/* ==========================================================================
   Ase Soccer — fiche produit
   Direction : « le dos du maillot ». Le bandeau de flocage (écusson, club,
   saison) ouvre le panneau d'achat, le prix est le point typographique fort,
   les tailles sont des pastilles et l'étiquette cousue dans le col porte
   l'information honnête (réplique). Chargé après ase-design.css.
   ========================================================================== */

body.single-product {
  --ase-p-panel: #ffffff;
  --ase-p-gap: 44px;
}

/* --- 1. Cadre : la fiche occupe la largeur du site (1240 px) -------------- */

/* Le thème réserve ~856 px à l'article de la fiche produit ; on ouvre la page
   pour loger une grande photo et un panneau lisible. Mesuré après coup :
   1240 px d'article donnent 645 px de galerie et 511 px de panneau. */
body.single-product main article {
  /* La grille du thème ne laisse que ~856 px à l'article (une colonne sur
     deux) : on lui fait occuper toute la largeur du conteneur. */
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}

.single-product .product-entry-wrapper {
  --product-gallery-width: 52%;
  gap: var(--ase-p-gap);
  align-items: flex-start;
  position: relative;
}

/* --- 2. Fil d'Ariane ----------------------------------------------------- */

.single-product .ct-breadcrumbs {
  grid-column: 1 / -1;
  margin-bottom: 22px;
}

/* --- 3. Galerie ---------------------------------------------------------- */

.single-product .woocommerce-product-gallery {
  flex: 0 0 var(--product-gallery-width);
  max-width: none;
  position: sticky;
  top: calc(var(--ase-hd-h) + var(--ase-ab) + 18px);
}

.single-product .ct-product-gallery-container {
  position: relative;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, var(--ase-soft) 62%, var(--ase-soft-2) 100%);
  padding: 22px;
  border: 1px solid var(--ase-line);
  box-shadow: 0 18px 46px rgba(10, 15, 26, .06);
}

.single-product .ct-product-gallery-container .flexy-view {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.single-product .woocommerce-product-gallery img {
  border-radius: 18px;
  mix-blend-mode: multiply;   /* les visuels sont sur fond blanc */
}

/* Étiquette de remise : pilule sombre, en haut à gauche de la photo. */
.single-product .product .onsale {
  top: 34px;
  left: 34px;
  min-height: 0;
  height: 30px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ase-pill);
  background: var(--ase-ink) !important;
  color: #fff;
  font-family: var(--ase-font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Loupe : disque blanc discret, bord gauche du visuel. */
.single-product .woocommerce-product-gallery__trigger {
  top: 34px;
  inset-inline-end: 34px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ase-line);
  color: var(--ase-ink);
}

/* Pouces : deux tuiles, libellées devant / dos. */
.single-product .flexy-pills[data-type="thumbs"] {
  margin-top: 18px;
  padding: 0 22px 4px;
}

.single-product .flexy-pills ol {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .flexy-pills li {
  flex: 0 0 auto;
  width: 82px;
  padding: 0;
  position: relative;
}

.single-product .flexy-pills li .ct-media-container {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ase-line);
  background: #fff;
}

.single-product .flexy-pills li .ct-media-container::after {
  border-radius: 14px;
  border-width: 2px;
}

.single-product .flexy-pills li.active .ct-media-container::after {
  border-color: var(--ase-ink);
}

/* Libellé « devant » / « dos » ajouté par le script sous chaque tuile. */
.ase-p-thumb-lab {
  display: block;
  margin-top: 7px;
  font-family: var(--ase-font-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ase-muted-2);
}

.single-product .flexy-pills li.active .ase-p-thumb-lab { color: var(--ase-ink); }
.single-product .flexy-pills li:hover { opacity: 1; }

/* --- 4. Bandeau « flocage » (écusson · club · saison) -------------------- */

.ase-p-floc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  margin: 0 0 4px;
}

.ase-p-crest {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ase-ink);
  box-shadow: 0 10px 24px rgba(10, 15, 26, .18);
}

.ase-p-crest img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.ase-p-who { display: flex; flex-direction: column; min-width: 0; }

.ase-p-who b {
  font-family: var(--ase-font-cond);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ase-ink);
}

.ase-p-who > span {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ase-muted-2);
}

.ase-p-rep {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border: 1.5px dashed rgba(10, 15, 26, .28);
  border-radius: 12px;
  background: var(--ase-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ase-ink);
  line-height: 1.15;
}

.ase-p-rep em {
  display: block;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ase-muted);
}

.ase-p-i { flex: none; }

/* --- 5. Titre ------------------------------------------------------------ */

.single-product .product_title {
  font-size: 33px;
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0 0 14px;
}

/* --- 6. Prix ------------------------------------------------------------- */

.single-product .summary .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--ase-line);
  font-family: var(--ase-font-cond);
}

.single-product .summary .price .woocommerce-Price-amount {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ase-ink);
}

.single-product .summary .price del {
  order: 2;
  text-decoration: none;
  position: relative;
  color: var(--ase-muted-2);
}

.single-product .summary .price del .woocommerce-Price-amount {
  font-size: 20px;
  font-weight: 600;
  color: inherit;
}

.single-product .summary .price del::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1.5px;
  background: currentColor;
  opacity: .85;
}

.single-product .summary .price ins {
  order: 1;
  text-decoration: none;
}

/* Économie affichée : reprise du badge du site, en pastille d'accent. */
.single-product .ase-p-save {
  order: 3;
  padding: 5px 11px;
  border-radius: var(--ase-pill);
  background: var(--ase-soft-2);
  font-family: var(--ase-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ase-ink);
}

/* --- 7. Description courte ---------------------------------------------- */

.single-product .woocommerce-product-details__short-description {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ase-body);
  margin-bottom: 22px;
}

.single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* --- 8. Tailles en pastilles -------------------------------------------- */

.ase-p-sizes { margin: 0 0 18px; }

.ase-p-sizes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.ase-p-lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ase-ink);
}

.ase-p-guide {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ase-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ase-p-guide:hover { color: var(--ase-accent-d); border-bottom-color: currentColor; }
.ase-p-guide span { margin-left: 5px; }

.ase-p-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ase-p-chip {
  min-width: 52px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(10, 15, 26, .16);
  border-radius: 13px;
  background: #fff;
  font-family: var(--ase-font-cond);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ase-ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}

.ase-p-chip:hover { border-color: var(--ase-ink); }
.ase-p-chip:active { transform: translateY(1px); }

.ase-p-chip.is-on {
  background: var(--ase-ink);
  border-color: var(--ase-ink);
  color: #fff;
}

.ase-p-chip[aria-disabled="true"] {
  color: var(--ase-muted-2);
  border-style: dashed;
  cursor: not-allowed;
  background: var(--ase-soft);
  text-decoration: line-through;
}

.ase-p-hint {
  margin: 9px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ase-muted-2);
  min-height: 16px;
}

.ase-p-hint.is-warn { color: #b4231f; }

/* Le menu déroulant du thème reste dans la page (il porte la valeur) mais
   s'efface derrière les pastilles dès que le script a pris la main. */
html.ase-p-js .single-product table.variations {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 9. Quantité + bouton d'achat -------------------------------------- */

.single-product form.cart {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.single-product .ct-cart-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 4px !important;
  flex-wrap: wrap;
}

.single-product .ct-cart-actions .quantity {
  flex: 0 0 132px;
  height: 56px;
  border: 1px solid rgba(10, 15, 26, .16);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.single-product .ct-cart-actions .quantity .qty {
  height: 54px;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--ase-font-cond);
  font-size: 19px;
  font-weight: 600;
  color: var(--ase-ink);
  text-align: center;
}

.single-product .ct-cart-actions .quantity .ct-increase,
.single-product .ct-cart-actions .quantity .ct-decrease {
  width: 40px;
  color: var(--ase-muted);
}

.single-product .ct-cart-actions .quantity:hover { border-color: var(--ase-ink); }

.single-product .single_add_to_cart_button {
  flex: 1 1 auto;
  height: 56px;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 99px !important;
  background: var(--ase-ink) !important;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--ase-font);
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  padding: 0 28px !important;
  box-shadow: 0 14px 30px rgba(10, 15, 26, .18);
  transition: background .16s, box-shadow .16s, transform .12s;
}

.single-product .single_add_to_cart_button:hover {
  background: var(--ase-accent-d) !important;
  box-shadow: 0 16px 34px rgba(26, 159, 224, .32);
}

.single-product .single_add_to_cart_button:active { transform: translateY(1px); }

.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button[disabled] {
  background: var(--ase-soft-2) !important;
  color: var(--ase-muted) !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* Ligne d'erreur « Merci de choisir une taille » de WooCommerce. */
.single-product .woocommerce-variation.single_variation { font-size: 13.5px; }

.single-product .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ase-muted);
}

/* --- 10. Étiquette de col --------------------------------------------- */

.ase-p-tag {
  position: relative;
  margin: 26px 0 0;
  padding: 18px 20px 18px 22px;
  border: 1.5px dashed rgba(10, 15, 26, .22);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, var(--ase-soft));
}

.ase-p-tag-l {
  position: absolute;
  top: -9px;
  left: 18px;
  padding: 0 8px;
  background: #fff;
  font-family: var(--ase-font-cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ase-muted-2);
}

.ase-p-tag ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.ase-p-tag li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ase-body);
}

.ase-p-tag li b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ase-ink);
}

.ase-p-tag li span { display: block; color: var(--ase-muted); }
.ase-p-tag li > svg { margin-top: 1px; color: var(--ase-accent-d); }

/* --- 11. UGS + catégories, en bas du panneau ------------------------- */

.single-product .product_meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ase-line);
  font-size: 12.5px;
  color: var(--ase-muted-2);
  line-height: 1.7;
}

.single-product .product_meta .sku,
.single-product .product_meta a { color: var(--ase-muted); }
.single-product .product_meta a:hover { color: var(--ase-accent-d); }

/* --- 12. Description, fiche technique, avis -------------------------- */

.single-product .woocommerce-tabs {
  margin-top: 56px !important;
  border-top: 1px solid var(--ase-line);
  padding-top: 26px;
}

.single-product .wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
}

.single-product .wc-tabs li {
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}

.single-product .wc-tabs li a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ase-line);
  border-radius: 99px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ase-muted);
}

.single-product .wc-tabs li.active a {
  background: var(--ase-ink);
  border-color: var(--ase-ink);
  color: #fff;
}

.single-product .wc-tabs li a:hover { color: var(--ase-ink); }
.single-product .wc-tabs li.active a:hover { color: #fff; }

.single-product .woocommerce-Tabs-panel {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ase-body);
}

.single-product .woocommerce-Tabs-panel h2 { font-size: 20px; margin-bottom: 10px; }

.ase-p-attr-t {
  margin: 26px 0 10px !important;
  font-family: var(--ase-font);
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ase-muted-2) !important;
}

.single-product table.shop_attributes {
  width: 100%;
  border: 1px solid var(--ase-line);
  border-radius: 16px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.single-product table.shop_attributes tr + tr td,
.single-product table.shop_attributes tr + tr th { border-top: 1px solid var(--ase-line); }

.single-product table.shop_attributes th {
  width: 220px;
  padding: 14px 20px !important;
  background: var(--ase-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ase-ink);
  vertical-align: top;
}

.single-product table.shop_attributes td {
  padding: 14px 20px !important;
  font-size: 14px;
  color: var(--ase-body);
  background: none !important;
}

.single-product table.shop_attributes td p { margin: 0; }

/* --- 13. Barre d'achat collante -------------------------------------- */

.ase-p-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ase-line);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.ase-p-sticky.is-on { transform: none; }
.ase-p-sticky[hidden] { display: block; }

.ase-p-sticky-in {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ase-p-sticky-img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ase-soft);
  object-fit: cover;
  mix-blend-mode: multiply;
}

.ase-p-sticky-txt { min-width: 0; display: flex; flex-direction: column; }

.ase-p-sticky-txt b {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ase-ink);
}

.ase-p-sticky-meta {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ase-muted-2);
}

.ase-p-sticky-size[data-empty] { color: #b4231f; }

.ase-p-sticky-price {
  margin-left: auto;
  font-family: var(--ase-font-cond);
  font-size: 26px;
  font-weight: 700;
  color: var(--ase-ink);
  white-space: nowrap;
}

.ase-p-sticky-price del { display: none; }
.ase-p-sticky-price ins { text-decoration: none; }

.ase-p-sticky-btn {
  flex: none;
  height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 99px;
  background: var(--ase-ink);
  color: #fff;
  font-family: var(--ase-font);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s;
}

.ase-p-sticky-btn:hover { background: var(--ase-accent-d); }

/* --- 14. Clavier, mouvement réduit ---------------------------------- */

.ase-p-chip:focus-visible,
.single-product .single_add_to_cart_button:focus-visible,
.ase-p-sticky-btn:focus-visible,
.ase-p-guide:focus-visible {
  outline: 2px solid var(--ase-accent-d);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ase-p-sticky, .ase-p-chip, .single-product .single_add_to_cart_button { transition: none; }
}

/* --- 15. Adaptation -------------------------------------------------- */

@media (max-width: 1000px) {
  .single-product .product-entry-wrapper { --product-gallery-width: 100%; gap: 26px; }
  .single-product .woocommerce-product-gallery { position: static; }
  .ase-p-floc { flex-wrap: wrap; }
  .ase-p-rep { margin-left: 0; }
  .single-product .product_title { font-size: 27px; }
  .single-product .summary .price .woocommerce-Price-amount { font-size: 40px; }
  .single-product .woocommerce-tabs { margin-top: 34px !important; }
  .single-product table.shop_attributes th { width: 150px; padding: 12px 14px !important; }
  .single-product table.shop_attributes td { padding: 12px 14px !important; }
}

@media (max-width: 782px) {
  .single-product .ct-product-gallery-container { padding: 12px; border-radius: 20px; }
  .single-product .product .onsale { top: 22px; left: 22px; }
  .single-product .woocommerce-product-gallery__trigger { top: 22px; inset-inline-end: 22px; }
  .single-product .flexy-pills[data-type="thumbs"] { padding: 0 12px 2px; }
  .single-product .flexy-pills li { width: 72px; }
  .ase-p-crest { width: 48px; height: 48px; border-radius: 14px; }
  .ase-p-crest img { width: 28px; height: 28px; }
  .ase-p-who b { font-size: 21px; }
  .ase-p-chip { min-width: 46px; height: 42px; font-size: 16px; }
  .single-product .single_add_to_cart_button { min-width: 0; flex: 1 1 100%; }
  .single-product .ct-cart-actions .quantity { flex: 0 0 116px; }
  .ase-p-sticky-txt b { font-size: 12.5px; }
  .ase-p-sticky-price { font-size: 21px; }
  .ase-p-sticky-btn { padding: 0 18px; }
  /* La barre collante masque le bas de page : on réserve sa hauteur. */
  body.single-product { padding-bottom: 82px; }
}