/*
 * Single Product — Editorial Gallery + Sticky Summary (hybrid).
 *
 * Above-fold: 2-col grid (gallery | sticky summary). Below: accordion,
 * storytelling, related products. Mobile: swipe gallery + fixed CTA bar.
 * Reuses .wpdl-product-card (related) and .is-style-wpdl-faq (accordion).
 *
 * Sticky summary + mobile fixed bar are pure CSS — no JS in P4.
 * Ordering: each section grouped; low-spec before high-spec within a section.
 *
 * Tokens read:
 *   color.terracotta.500          — kicker, CTA hover, active accents
 *   color.green.*                 — gallery placeholder colours
 *   color.neutral.*               — thumb placeholder colours
 *   semantic.color.text.primary   — title, price, ink CTA bg
 *   semantic.color.text.muted     — breadcrumb, wishlist, delivery
 *   semantic.color.text.secondary — descriptions
 *   semantic.color.text.inverse   — CTA label, mobile dots active
 *   semantic.color.border.base    — pills, quantity, dividers
 *   semantic.color.bg.background   — mobile bar bg
 *   semantic.typography.display    — title, headings (Cormorant)
 *   semantic.typography.body       — labels, price, body (Inter)
 *   space.1–11 · duration.base · easing.default
 */

/* Section margins are set on each section's own rule below (no wrapper
   > * reset — avoids descending-specificity conflicts). */

/* --- Breadcrumb ----------------------------------------------------- */

.wpdl-single-product__breadcrumb {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: var(--wp--custom--space--6) var(--wp--custom--space--6);
}

.wpdl-single-product__breadcrumb-link {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-single-product__breadcrumb span {
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-single-product__breadcrumb-link:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

/* --- Above-fold grid ------------------------------------------------ */

.wpdl-single-product__fold.wp-block-group {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr;
  gap: var(--wp--custom--space--8);
  align-items: start;
  margin-block: 0 var(--wp--custom--space--11);
}

/* --- Gallery -------------------------------------------------------- */

.wpdl-single-product__gallery.wp-block-group {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--wp--custom--space--3);
  align-items: start;
}

.wpdl-single-product__thumbs.wp-block-group {
  gap: var(--wp--custom--space--3);
}

.wpdl-single-product__thumb.wp-block-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  cursor: pointer;
}

.wpdl-single-product__thumb.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpdl-single-product__thumb:nth-child(1) img { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-single-product__thumb:nth-child(2) img { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-single-product__thumb:nth-child(3) img { background-color: var(--wp--custom--semantic--color--border--base); }
.wpdl-single-product__thumb:nth-child(4) img { background-color: var(--wp--custom--semantic--color--brand--primary); }

.wpdl-single-product__thumb.is-active {
  outline: 1.5px solid var(--wp--custom--semantic--color--text--primary);
  outline-offset: 2px;
}

.wpdl-single-product__main-img.wp-block-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-single-product__main-img.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile swipe dots — hidden on desktop */
.wpdl-single-product__dots.wp-block-group {
  display: none;
  gap: var(--wp--custom--space--2);
}

.wpdl-single-product__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  margin: 0;
  background-color: var(--wp--custom--semantic--color--border--strong);
}

.wpdl-single-product__dot.is-active {
  background-color: var(--wp--custom--semantic--color--text--primary);
}

/* --- Summary (sticky on desktop) ----------------------------------- */

.wpdl-single-product__summary.wp-block-group {
  position: sticky;
  top: var(--wp--custom--space--6);
}

.wpdl-single-product__category {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  margin-block: 0 var(--wp--custom--space--2);
}

.wpdl-single-product__title {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: clamp(1.3125rem, 1.0rem + 1.34vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-single-product__price {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-single-product__short-desc {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-product__size-label {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--3);
}

/* --- Size pills ----------------------------------------------------- */

.wpdl-single-product__sizes.wp-block-group {
  gap: var(--wp--custom--space--3);
  margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-product__size-pill {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
  padding: var(--wp--custom--space--2) var(--wp--custom--space--4);
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  cursor: pointer;
  transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-single-product__size-pill:hover {
  border-color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-single-product__size-pill.is-active {
  border-color: var(--wp--custom--semantic--color--text--primary);
}

/* --- Quantity + Add to cart ---------------------------------------- */

.wpdl-single-product__purchase.wp-block-group {
  gap: var(--wp--custom--space--4);
  align-items: stretch;
  margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-single-product__quantity.wp-block-group {
  gap: var(--wp--custom--space--4);
  align-items: center;
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  padding-inline: var(--wp--custom--space--4);
}

.wpdl-single-product__qty-btn {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 1rem;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
  cursor: pointer;
  user-select: none;
}

.wpdl-single-product__qty-value {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
  min-width: 1.25rem;
  text-align: center;
}

.wpdl-single-product__cta.wp-block-buttons {
  flex: 1;
}

/* --- Add to cart button style (dark ink → terracotta hover) --------- */

.is-style-wpdl-add-to-cart {
  width: 100%;
}

.is-style-wpdl-add-to-cart .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-block-size: 3.125rem;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--inverse);
  background-color: var(--wp--custom--semantic--color--text--primary);
  border: none;
  border-radius: 0;
  transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.is-style-wpdl-add-to-cart .wp-block-button__link:hover {
  background-color: var(--wp--custom--semantic--color--accent--primary);
}

/* --- Wishlist ------------------------------------------------------- */

.wpdl-single-product__wishlist {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-product__wishlist a {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-single-product__wishlist a:hover {
  color: var(--wp--custom--semantic--color--accent--primary);
}

/* --- Delivery / trust ---------------------------------------------- */

.wpdl-single-product__delivery.wp-block-group {
  gap: var(--wp--custom--space--3);
  padding-block-start: var(--wp--custom--space--5);
  border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-single-product__delivery-item {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

/* --- Accordion (reuses is-style-wpdl-faq, constrained 720px) -------- */

.wpdl-single-product__accordion.wp-block-group {
  max-width: 45rem;
  margin-block: 0 var(--wp--custom--space--11);
}

/* --- Storytelling (image-left + text-right) ------------------------ */

.wpdl-single-product__story.wp-block-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--custom--space--9);
  align-items: center;
  margin-block: 0 var(--wp--custom--space--11);
}

.wpdl-single-product__story-img.wp-block-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  background-color: var(--wp--custom--semantic--color--brand--strong);
}

.wpdl-single-product__story-img.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpdl-single-product__story-kicker {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-single-product__story-heading {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-single-product__story-body {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
}

/* --- Related products ---------------------------------------------- */

.wpdl-single-product__related.wp-block-group {
  margin-block: 0;
}

.wpdl-single-product__related-heading {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-single-product__related-grid.wp-block-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--custom--space--7);
  margin-block: 0;
}

.wpdl-single-product__related-grid > .wpdl-product-card {
  margin-block: 0;
}

/* --- Mobile sticky bar — hidden except on mobile ------------------- */

.wpdl-single-product__mobile-bar.wp-block-group {
  display: none;
}

/* --- Tablet (< 64em / 1024px) -------------------------------------- */

@media (width < 64em) {
  .wpdl-single-product__fold.wp-block-group {
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--8);
  }

  .wpdl-single-product__summary.wp-block-group {
    position: static;
    top: auto;
  }

  .wpdl-single-product__related-grid.wp-block-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Mobile (< 40em / 640px) --------------------------------------- */

@media (width < 40em) {
  /* Gallery: hide thumb rail, show main full-width + dots */
  .wpdl-single-product__gallery.wp-block-group {
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--4);
  }

  .wpdl-single-product__thumbs.wp-block-group {
    display: none;
  }

  .wpdl-single-product__dots.wp-block-group {
    display: flex;
  }

  .wpdl-single-product__story.wp-block-group {
    grid-template-columns: 1fr;
    gap: var(--wp--custom--space--6);
  }

  /* Reserve space so fixed bar never covers the last content row */
  .wpdl-single-product.wp-block-group {
    padding-block-end: var(--wp--custom--space--11);
  }

  /* Fixed bottom bar: price + add to cart, always in thumb reach */
  .wpdl-single-product__mobile-bar.wp-block-group {
    display: flex;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;
    align-items: center;
    gap: var(--wp--custom--space--4);
    padding: var(--wp--custom--space--3) var(--wp--custom--space--5);
    background-color: var(--wp--custom--semantic--color--background--canvas);
    border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
  }

  .wpdl-single-product__mobile-price {
    font-family: var(--wp--custom--semantic--typography--body--font-family);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--wp--custom--semantic--color--text--primary);
    margin-block: 0;
  }

  .wpdl-single-product__mobile-cta.wp-block-buttons {
    flex: 1;
  }

  .wpdl-single-product__mobile-cta .wp-block-button__link {
    min-block-size: 2.75rem;
  }
}

/* --- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wpdl-single-product__breadcrumb-link,
  .wpdl-single-product__size-pill,
  .wpdl-single-product__wishlist a,
  .is-style-wpdl-add-to-cart .wp-block-button__link {
    transition: none;
  }
}

/* =============================================================================
   WC P8 — single-product.html block theming
   Scoped to .wpdl-single-product (tagName=main in template).
   Uses WC native blocks: breadcrumbs, store-notices, product-image-gallery,
   post-title, product-rating, product-price, post-excerpt, add-to-cart-form,
   product-meta, product-details, related-products pattern.
   ============================================================================= */

/* stylelint-disable no-descending-specificity -- WC block selectors intentionally
   follow static pattern selectors; no cascade conflict on same properties. */

/* Breadcrumbs */
body.single-product .wc-block-breadcrumbs {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: var(--wp--custom--space--6) var(--wp--custom--space--6);
}

body.single-product .wc-block-breadcrumbs a,
body.single-product .wc-block-breadcrumbs__separator {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
}

body.single-product .wc-block-breadcrumbs a:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Above-fold columns (gallery | summary) — gap controlled by WC template's
   block attribute (style.spacing.blockGap). No CSS override needed here. */

/* Gallery — sticky on desktop */
body.single-product .wp-block-woocommerce-product-image-gallery {
  position: sticky;
  top: var(--wp--custom--space--6);
}

/* BEST SELLER pill — rose badge on the gallery (replaces WC "Sale!" flash) */
body.single-product .wp-block-woocommerce-product-image-gallery .onsale,
body.single-product .wpdl-badge--bestseller {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--wp--custom--space--4);
  inset-inline-start: var(--wp--custom--space--4);
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0.375rem var(--wp--custom--space--3);
  border-radius: var(--wp--custom--radius--pill, 999px);
  background-color: var(--wp--custom--semantic--color--accent--primary);
  color: var(--wp--custom--semantic--color--text--inverse);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Category label (kicker) — small uppercase, kraft/tan accent per design */
body.single-product .wpdl-single-product__kicker {
  margin-block: 0 var(--wp--custom--space--3);
}

body.single-product .wpdl-single-product__kicker,
body.single-product .wpdl-single-product__kicker a {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  text-decoration: none;
}

body.single-product .wpdl-single-product__kicker a:hover {
  color: var(--wp--custom--semantic--color--brand--strong);
}

/* Product title — 40–48px per spec */
body.single-product .wpdl-single-product__title.wp-block-post-title {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: clamp(2rem, 1.25rem + 3.33vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--3);
}

/* Product rating stars */
body.single-product .wpdl-single-product__rating {
  margin-block: 0 var(--wp--custom--space--4);
}

body.single-product .star-rating span::before {
  color: var(--wp--custom--semantic--color--accent--primary);
}

body.single-product .woocommerce-review-link {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  color: var(--wp--custom--semantic--color--text--muted);
}

/* Product price */
body.single-product .wpdl-single-product__price {
  margin-block: 0 var(--wp--custom--space--5);
}

body.single-product .wpdl-single-product__price .price,
body.single-product .wpdl-single-product__price .wc-block-components-product-price,
body.single-product .wpdl-single-product__price .woocommerce-Price-amount {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 1.5rem; /* 24px measured */
  font-weight: 600;
  color: var(--wp--custom--semantic--color--accent--secondary); /* gold (Figma #c0912e) */
}

body.single-product .price ins {
  text-decoration: none;
  color: var(--wp--custom--semantic--color--accent--secondary); /* gold sale price */
}

body.single-product .price del {
  opacity: 0.55;
  color: var(--wp--custom--semantic--color--text--muted);
}

/* Short description (post-excerpt) */
body.single-product .wpdl-single-product__excerpt .wp-block-post-excerpt__excerpt {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--secondary);
  margin-block: 0 var(--wp--custom--space--6);
}

/* Add to cart form — quantity + button row */
body.single-product .wp-block-woocommerce-add-to-cart-form,
body.single-product .wc-block-add-to-cart-form {
  margin-block: 0 var(--wp--custom--space--5);
}

body.single-product .quantity .qty {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;
  border: none; /* container border on .quantity handles this; no per-input border */
  padding: var(--wp--custom--space--2) var(--wp--custom--space--3);
  width: 3.75rem;
  text-align: center;
  background: transparent;
}

/* Primary CTA — full-width, 52px height, rounded, GREEN (brand) per design */
body.single-product .single_add_to_cart_button,
body.single-product .wp-block-woocommerce-add-to-cart-form .button {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--button--primary--text);
  background-color: var(--wp--custom--semantic--color--button--primary--bg);
  border: none;
  border-radius: var(--wp--custom--radius--sm);
  width: 100%;
  min-block-size: 3.25rem;
  padding-inline: var(--wp--custom--space--8);
  cursor: pointer;
  transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .single_add_to_cart_button:hover,
body.single-product .wp-block-woocommerce-add-to-cart-form .button:hover {
  background-color: var(--wp--custom--semantic--color--button--primary--hover-bg);
}

/* Product meta (SKU, category, tags) */
body.single-product .wp-block-woocommerce-product-meta {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: var(--wp--custom--space--5) 0;
  padding-block-start: var(--wp--custom--space--5);
  border-block-start: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
}

body.single-product .wp-block-woocommerce-product-meta a {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
}

body.single-product .wp-block-woocommerce-product-meta a:hover {
  color: var(--wp--custom--semantic--color--accent--primary);
}

/* Product details (tabs: description / reviews / shipping) */
body.single-product .wpdl-single-product__details {
  margin-block: var(--wp--custom--space--7) var(--wp--custom--space--7);
}

/* ── Tablet / mobile ─────────────────────────────────────────────── */

@media (width < 48em) {
  /* Mobile: hide thumb rail, show main image full-width */
  body.single-product .woocommerce-product-gallery {
    flex-direction: column;
  }

  body.single-product .flex-control-nav.flex-control-thumbs {
    display: none;
  }

  body.single-product .wp-block-woocommerce-product-image-gallery {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-product .single_add_to_cart_button,
  body.single-product .wp-block-woocommerce-add-to-cart-form .button,
  body.single-product .wc-block-breadcrumbs a {
    transition: none;
  }
}

/* stylelint-enable no-descending-specificity */

/* =============================================================================
   WC P8 — Single product visual polish (6 buyer-facing fixes)
   ============================================================================= */

/* stylelint-disable no-descending-specificity */

/* 1. GALLERY — vertical thumbnail rail LEFT + large main image RIGHT
      Editorial layout matching design-refs/product-single/single-product-desktop-fold.png
      WC Flexslider adds .woocommerce-product-gallery__wrapper (main) and
      .flex-control-thumbs (thumbnails) after JS init. ----------------------- */

body.single-product .woocommerce-product-gallery {
  display: flex;
  flex-direction: row;      /* thumb rail left, main image right */
  align-items: flex-start;
  gap: var(--wp--custom--space--3);
}

/* Thumbnail rail — 80px vertical strip on the left per spec */
body.single-product .flex-control-nav.flex-control-thumbs {
  order: -1;               /* render before main image */
  display: flex;
  flex-direction: column;
  gap: var(--wp--custom--space--2);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 5rem;             /* 80px per spec */
  flex-shrink: 0;
}

/* WC core sets `.woocommerce div.product div.images .flex-control-thumbs li
   { width:25% }` (specificity 0,4,3) for its horizontal 4-col strip. Our rail
   is a vertical column, so each thumb must fill the 80px width. Body carries
   both `single-product` + `woocommerce`, so `body.single-product.woocommerce`
   (no space) matches body itself and out-specifies WC (0,5,4) — no !important. */
body.single-product.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  overflow: hidden;
}

body.single-product .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--wp--custom--radius--sm);
  transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .flex-control-thumbs li img.flex-active {
  opacity: 1;
  outline: 0.125rem solid var(--wp--custom--semantic--color--accent--primary);
  outline-offset: -0.125rem;
}

body.single-product .flex-control-thumbs li img:hover {
  opacity: 1;
}

/* Main image area — capped so the photo never dominates (editorial), but large
   enough to balance the taller summary column. 30rem × 4:5 ≈ 600px tall.
   IMPORTANT: flexslider wraps `__wrapper` in `.flex-viewport` on init and sets
   the wrapper to `width:800%` (the slide track). Cap the VIEWPORT, never the
   wrapper — capping the track clips slides 2+ so thumbnail clicks show nothing.
   `.flex-viewport` is the flex child post-init; `__wrapper` is the no-JS one. */
body.single-product .flex-viewport,
body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  flex: 1;
  min-width: 0;
  max-width: 30rem;
}

/* Hide WC's zoom trigger (magnifying glass). It's absolutely positioned to the
   gallery's top-right, but the capped 30rem image leaves whitespace on the right
   — so it landed ON the image for some products and OUTSIDE it for others.
   Removing it fixes the inconsistency; hover-zoom still works. */
body.single-product .woocommerce-product-gallery__trigger {
  display: none;
}

/* Image container — position:relative anchors the .zoomImg WC injects.
   overflow intentionally NOT hidden: WC zoom.js requires unconstrained zoomImg. */
body.single-product .woocommerce-product-gallery__image {
  position: relative;
}

body.single-product .woocommerce-product-gallery__image a {
  display: block;
}

/* Main image — 4:5 portrait ratio, soft radius, light bg per spec */
body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery__image .wp-post-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--wp--custom--radius--md);
  background-color: var(--wp--custom--semantic--color--surface--secondary);
}


/* 2. COLUMN GAP — controlled by WC template block attribute, not overrideable via class */

/* 3. BREADCRUMB — smaller + more muted so title dominates
      Overrides the font-size + color set in the WC P8 section above. ------- */
/* stylelint-disable-next-line no-duplicate-selectors */
body.single-product .wc-block-breadcrumbs {
  font-size: 0.5625rem;  /* 9px — was 11px */
  letter-spacing: 0.1em;
  color: var(--wp--custom--semantic--color--text--muted);
}

/* stylelint-disable-next-line no-duplicate-selectors */
body.single-product .wc-block-breadcrumbs a,
body.single-product .wc-block-breadcrumbs__separator {
  color: var(--wp--custom--semantic--color--text--muted);
}

/* stylelint-disable-next-line no-duplicate-selectors */
body.single-product .wc-block-breadcrumbs a:hover {
  color: var(--wp--custom--semantic--color--text--muted);
}

/* 4. QUANTITY CONTROL — premium editorial stepper
      Single bordered container, 52px height matching primary CTA.
      JS in woocommerce.php injects .wpdl-qty-btn minus / plus buttons.
      Container border transitions to terracotta accent on hover / focus.      */

body.single-product .quantity {
  display: inline-flex;
  align-items: stretch;
  block-size: 3.25rem; /* 52px — matches primary button height */
  border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--radius--sm);
  transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* Border accent on button hover (modern :has) or keyboard focus-within */
body.single-product .quantity:focus-within,
body.single-product .quantity:has(.wpdl-qty-btn:hover) {
  border-color: var(--wp--custom--semantic--color--accent--primary);
}

/* Quantity input — centred number, no browser spin arrows */
body.single-product .quantity input.qty {
  appearance: none;
  /* stylelint-disable-next-line property-no-vendor-prefix -- Firefox requires this to hide spin buttons */
  -moz-appearance: textfield;
  border: none;
  inline-size: 3rem;
  text-align: center;
  padding: 0;
  background: transparent;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--primary);
}

body.single-product .quantity input.qty::-webkit-inner-spin-button,
body.single-product .quantity input.qty::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* Focus ring on the input itself is suppressed — container handles it */
body.single-product .quantity input.qty:focus-visible {
  outline: none;
}

/* − / + buttons — text-only, transparent, full control height */
body.single-product .wpdl-qty-btn {
  background: transparent;
  border: none;
  padding-inline: var(--wp--custom--space--5);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  color: var(--wp--custom--semantic--color--text--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .wpdl-qty-btn:hover {
  color: var(--wp--custom--semantic--color--accent--primary);
}

/* Keyboard focus ring on individual buttons (inner outline, doesn't escape container) */
body.single-product .wpdl-qty-btn:focus-visible {
  outline: 0.125rem solid var(--wp--custom--semantic--color--accent--primary);
  outline-offset: -0.1875rem;
}

/* 5. DESCRIPTION TABS — underline style, no box ----------------------------- */

body.single-product .woocommerce-tabs .tabs.wc-tabs {
  display: flex;
  gap: var(--wp--custom--space--7);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--custom--space--7);
  border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
}

body.single-product .woocommerce-tabs .tabs.wc-tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* Reset WC's default tab pseudo-element decorations (shadow/connector lines) */
body.single-product .woocommerce-tabs .tabs.wc-tabs li::before,
body.single-product .woocommerce-tabs .tabs.wc-tabs li::after {
  display: none;
}

body.single-product .woocommerce-tabs .tabs.wc-tabs li a {
  display: block;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  padding-block: var(--wp--custom--space--4);
  border-block-end: 0.125rem solid transparent;
  margin-block-end: -0.0625rem; /* overlap the ul border */
  transition:
    color       var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .woocommerce-tabs .tabs.wc-tabs li.active a,
body.single-product .woocommerce-tabs .tabs.wc-tabs li a:hover {
  color: var(--wp--custom--semantic--color--text--primary);
  border-block-end-color: var(--wp--custom--semantic--color--text--primary);
}

body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-tabs .panel {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--wp--custom--semantic--color--text--secondary);
}

/* 6. CATEGORY — label stacked above term link (terracotta accent) ---------- */

body.single-product .wpdl-single-product__meta-cat {
  margin-block: 0 var(--wp--custom--space--3);
}

/* "Category: " prefix → small uppercase label */
body.single-product .wpdl-single-product__meta-cat .wp-block-post-terms__prefix {
  display: block;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block-end: var(--wp--custom--space--1);
}

/* Term link → terracotta outlined badge pill */
body.single-product .wpdl-single-product__meta-cat a {
  display: inline-block;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--accent--primary);
  text-decoration: none;
  border: 0.0625rem solid var(--wp--custom--semantic--color--accent--primary);
  padding: 0.1875rem var(--wp--custom--space--3);
  transition:
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .wpdl-single-product__meta-cat a:hover {
  border-color: var(--wp--custom--semantic--color--accent--primary);
}

/* Same style for tags if shown */
body.single-product .wpdl-single-product__meta-tags {
  margin-block: 0;
}

body.single-product .wpdl-single-product__meta-tags .wp-block-post-terms__prefix {
  display: block;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block-end: var(--wp--custom--space--1);
}

body.single-product .wpdl-single-product__meta-tags a {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
}

body.single-product .wpdl-single-product__meta-tags a:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.single-product .flex-control-thumbs li img,
  body.single-product .wpdl-qty-btn,
  body.single-product .woocommerce-tabs .tabs.wc-tabs li a,
  body.single-product .wpdl-single-product__meta-cat a {
    transition: none;
  }
}

/* =============================================================================
   Spec additions: secondary actions · trust list · compact info accordion
   ============================================================================= */

/* Contact actions — Gọi ngay (green) + Chat Zalo (blue) side by side */
body.single-product .wpdl-single-product__contact {
  margin-block: var(--wp--custom--space--3) var(--wp--custom--space--3);
  gap: var(--wp--custom--space--3);
}

body.single-product .wpdl-single-product__contact-btn {
  flex: 1 1 0;
  margin-block: 0;
}

body.single-product .wpdl-single-product__contact-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--space--2);
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--wp--custom--space--3) var(--wp--custom--space--4);
  border-radius: var(--wp--custom--radius--md);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--wp--custom--semantic--color--text--inverse);
  transition: filter var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .wpdl-single-product__contact-btn a:hover {
  filter: brightness(0.93);
}

/* Gọi ngay — brand green with phone glyph */
body.single-product .wpdl-single-product__contact-btn--call a {
  background-color: var(--wp--custom--semantic--color--brand--primary);
}

body.single-product .wpdl-single-product__contact-btn--call a::before {
  content: "\260E"; /* ☎ */
  font-size: 0.9375rem;
  line-height: 1;
}

/* Chat Zalo — Zalo blue with chat glyph.
   Raw hex is intentional: this is Zalo's brand mark colour, not a design
   token. token-guard keeps design decisions token-driven; a third-party
   brand mark is not a swappable design decision (same rule as
   floating-actions.css). */
body.single-product .wpdl-single-product__contact-btn--zalo a {
  /* stylelint-disable-next-line color-no-hex */
  background-color: #0068ff;
}

body.single-product .wpdl-single-product__contact-btn--zalo a::before {
  content: "\1F4AC"; /* 💬 */
  font-size: 0.9375rem;
  line-height: 1;
}

/* Share link — small, centred, muted */
body.single-product .wpdl-single-product__share-link {
  margin-block: 0 var(--wp--custom--space--4);
}

body.single-product .wpdl-single-product__share-link a {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

body.single-product .wpdl-single-product__share-link a:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Trust row — 3 columns horizontal, icon + title/sub per item */
body.single-product .wpdl-single-product__trust {
  margin-block: 0 var(--wp--custom--space--5);
  padding-block: var(--wp--custom--space--4);
  border-block: 1px solid var(--wp--custom--semantic--color--border--base);
  gap: var(--wp--custom--space--3);
}

body.single-product .wpdl-single-product__trust-item {
  flex: 1;
  gap: var(--wp--custom--space--2);
  align-items: center;
}

body.single-product .wpdl-single-product__trust-item .wpdl-icon {
  color: var(--wp--custom--semantic--color--brand--primary);
  flex-shrink: 0;
}

body.single-product .wpdl-single-product__trust-item .wpdl-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

body.single-product .wpdl-single-product__trust-title {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--custom--semantic--color--text--primary);
  margin: 0;
}

body.single-product .wpdl-single-product__trust-sub {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--wp--custom--semantic--color--text--muted);
  margin: 0;
}

/* Compact info accordion (Shipping / Returns / Care) */
body.single-product .wpdl-single-product__info-accordion {
  border-block-start: 1px solid var(--wp--custom--semantic--color--border--base);
  margin-block: 0 var(--wp--custom--space--5);
}

body.single-product .wpdl-single-product__info-item {
  border-block-end: 1px solid var(--wp--custom--semantic--color--border--base);
}

body.single-product .wpdl-single-product__info-item > summary {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--primary);
  padding-block: var(--wp--custom--space--3);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.single-product .wpdl-single-product__info-item > summary::-webkit-details-marker {
  display: none;
}

body.single-product .wpdl-single-product__info-item > summary::after {
  content: '+';
  font-size: 1rem;
  font-weight: 300;
  color: var(--wp--custom--semantic--color--text--muted);
}

body.single-product .wpdl-single-product__info-item[open] > summary::after {
  content: '−';
}

body.single-product .wpdl-single-product__info-item > p,
body.single-product .wpdl-single-product__info-item .wp-block-paragraph {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--secondary);
  padding-block-end: var(--wp--custom--space--4);
  margin: 0;
}

/* =============================================================================
   Note box — cream panel with order-guidance bullets (product-notice part)
   ============================================================================= */

.wpdl-product-notice {
  margin-block: var(--wp--custom--space--4) 0;
  padding: var(--wp--custom--space--4) var(--wp--custom--space--5);
  background-color: var(--wp--custom--semantic--color--surface--secondary);
  border-radius: var(--wp--custom--radius--md);
}

.wpdl-product-notice__title {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--2);
}

.wpdl-product-notice__list {
  margin: 0;
  padding-inline-start: var(--wp--custom--space--4);
  list-style: none;
}

.wpdl-product-notice__list li {
  position: relative;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--secondary);
  padding-block: 0.0625rem;
}

.wpdl-product-notice__list li::before {
  content: "•";
  position: absolute;
  inset-inline-start: calc(-1 * var(--wp--custom--space--4));
  color: var(--wp--custom--semantic--color--accent--secondary);
}

/* =============================================================================
   Template parts: product-cta (Need Help box) · why-choose-us (trust band)
   ============================================================================= */

/* ── Need Help box (Zalo / Messenger / Call) ───────────────────────── */

.wpdl-product-cta {
  margin-block: var(--wp--custom--space--5) var(--wp--custom--space--4);
  gap: var(--wp--custom--space--3);
  padding: var(--wp--custom--space--5);
  background-color: var(--wp--custom--semantic--color--brand--soft);
  border-radius: var(--wp--custom--radius--md);
}

.wpdl-product-cta__title {
  font-family: var(--wp--custom--font--family--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--brand--strong);
  margin-block: 0;
}

.wpdl-product-cta__lead {
  font-family: var(--wp--custom--font--family--body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wp--custom--semantic--color--text--secondary);
  margin-block: 0;
}

.wpdl-product-cta__row {
  gap: var(--wp--custom--space--3);
  flex-wrap: wrap;
}

.wpdl-product-cta__row > * {
  margin-block: 0;
  flex: 1;
}

/* White buttons with brand-coloured logo (editorial, not solid brand fills) */
.wpdl-product-cta__btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--space--2);
  padding: var(--wp--custom--space--3) var(--wp--custom--space--3);
  border-radius: var(--wp--custom--radius--sm);
  background-color: var(--wp--custom--semantic--color--background--canvas);
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  font-family: var(--wp--custom--font--family--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--custom--semantic--color--text--primary);
  text-decoration: none;
  transition:
    border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--default),
    box-shadow var(--wp--custom--duration--fast) var(--wp--custom--easing--default);
}

.wpdl-product-cta__btn a:hover {
  border-color: var(--wp--custom--semantic--color--brand--primary);
  box-shadow: var(--wp--custom--shadow--sm);
}

/* stylelint-disable color-no-hex, color-hex-length -- Zalo + Messenger third-party brand colours */
.wpdl-product-cta__btn--zalo a::before {
  content: '';
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230068ff'%3E%3Cpath d='M12 2C6.48 2 2 6.02 2 11c0 2.6 1.23 4.94 3.2 6.58L4.5 21l3.6-1.9c1.2.38 2.5.6 3.9.6 5.52 0 10-4.02 10-9S17.52 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wpdl-product-cta__btn--messenger a::before {
  content: '';
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23009cff'%3E%3Cpath d='M12 2C6.36 2 2 6.13 2 11.7c0 2.91 1.19 5.44 3.14 7.17V22l2.9-1.59c.77.21 1.59.33 2.44.33 5.64 0 10.2-4.13 10.2-9.74C20.67 6.13 17.64 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* stylelint-enable color-no-hex, color-hex-length */

.wpdl-product-cta__call {
  display: flex;
  align-items: center;
  gap: var(--wp--custom--space--2);
  font-family: var(--wp--custom--font--family--body);
  font-size: 0.75rem;
  color: var(--wp--custom--semantic--color--text--secondary);
  margin: 0;
}

.wpdl-product-cta__call::before {
  content: '📞';
  font-size: 0.8125rem;
}

.wpdl-product-cta__call a {
  font-weight: 600;
  color: var(--wp--custom--semantic--color--brand--strong);
  text-decoration: none;
}

.wpdl-product-cta__call span {
  color: var(--wp--custom--semantic--color--text--muted);
}

/* ── Trust band — full-width, 4 items horizontal (below fold) ──────── */

.wpdl-trust-band {
  margin-block: var(--wp--custom--space--7);
  padding-block: var(--wp--custom--space--6);
  border-block: 1px solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-trust-band__grid.wp-block-columns {
  gap: var(--wp--custom--space--5) !important;
}

.wpdl-trust-band__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--custom--space--3);
  text-align: start;
}

.wpdl-trust-band__item .wpdl-icon {
  color: var(--wp--custom--semantic--color--brand--primary);
  flex-shrink: 0;
}

.wpdl-trust-band__item .wpdl-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.wpdl-trust-band__title {
  font-family: var(--wp--custom--font--family--display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
  line-height: 1.3;
}

.wpdl-trust-band__sub {
  font-family: var(--wp--custom--font--family--body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
  line-height: 1.3;
}

@media (width < 48rem) {
  .wpdl-trust-band__grid.wp-block-columns {
    flex-wrap: wrap;
  }

  .wpdl-trust-band__grid .wp-block-column {
    flex-basis: calc(50% - var(--wp--custom--space--5)) !important;
  }
}

/* stylelint-enable no-descending-specificity */