/* Product detail page (PDP) — Product section layout architecture only.
   Typography/copy styling is a placeholder pass; see
   src/products/PRODUCT-PAGE-SPEC.md for the full spec this implements.

   Three tiers:
   - <1008px:       single stacked column, full-width gallery image.
   - 1008–1279px:   two equal flexible columns (50/50).
   - >=1280px:      two fixed-width columns (617px gallery / 598px info).

   The gallery is always full-bleed (no page padding) at every tier —
   only the info pane (and, below 1008px, the whole info block) carries
   inset padding. Spec's own note: at 1008–1279px the gallery pane MUST
   use aspect-ratio: auto, or the row's stretched height drives the
   pane's width and breaks the 50/50 split. */

/* 16px (1rem) gap between the breadcrumb block and the product section,
   per spec — kept here rather than in shop-header.njk since it's PDP-
   specific spacing, not part of the reused breadcrumb/heading partial. */
.product-detail {
  margin-top: 1rem;
}

.product-detail__gallery {
  aspect-ratio: 4 / 5;
}

.product-detail__gallery .product-gallery-item {
  width: 100%;
  height: 100%;
}

.product-detail__gallery .product-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* <1008px only: swipeable carousel (arrows + snap + dots) in place of the
   >=1008px independent-scroll multi-image pane. Scoped entirely to this
   query so none of it leaks into the >=1008px sticky scroll containers —
   .product-gallery-carousel/-track have no special layout above 1007px,
   so the figures just stack in the >=1008px pane's normal block flow as
   already built. The controls themselves are explicitly hidden at
   >=1008px below (in the existing min-width: 1008px block) since simply
   scoping their layout rules here would still leave the plain, unstyled
   buttons visible/inline in that pane otherwise. */
@media (max-width: 1007px) {
  .product-gallery-carousel {
    position: relative;
  }

  .product-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-gallery-track::-webkit-scrollbar {
    display: none;
  }

  .product-gallery-track .product-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
  }

  .product-gallery-track .product-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem; /* 44px min tap target; also the visible circle's size */
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Fixed dark circle so the chevron reads against any product photo —
       deliberately not a scrim/gradient tied to image content, and not
       cream, since cream/beige products (WIP, Final Draft) would wash it out. */
    background-color: rgba(0, 0, 0, 0.3); /* matches .product-gallery-dot */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--color-cream);
    transition: opacity 200ms ease;
  }

  .product-gallery-arrow:hover,
  .product-gallery-arrow:focus-visible {
    opacity: 0.6;
  }

  .product-gallery-arrow--prev {
    left: 1rem;
  }

  .product-gallery-arrow--next {
    right: 1rem;
  }

  .product-gallery-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
  }

  .product-gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    padding: 0;
  }

  .product-gallery-dot.is-active {
    background: var(--color-black);
  }
}

/* <1008px: stacked. Info content full width minus
   --page-padding-product on each side, no inner-column cap. */
.product-detail__info {
  padding: 1.5rem var(--page-padding-product) 1.5rem; /* 24px */
}

.product-detail__inner {
  max-width: none;
}

.product-detail__description {
  max-width: none;
}

.product-detail__collection {
  font-family: var(--font-body);
  font-size: var(--text-label-tight);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-color-muted);
}

.product-detail__name {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(
    var(--text-heading-product-title-min),
    1rem + 1.389vw,
    var(--text-heading-product-title-max)
  );
  color: var(--text-color-primary);
  margin-top: 0.5rem; /* 8px */
}

.product-detail__price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-color-primary);
  margin-top: 1rem; /* 16px */
}

.product-detail__colour {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  margin-top: 1.5rem; /* 24px */
}

.product-detail__swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.product-detail__colour-label {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  color: var(--text-color-muted);
}

.product-detail__colour-name {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  color: var(--text-color-primary);
}

.product-detail__size-guide {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  text-decoration: underline;
  color: var(--text-color-muted);
  margin-top: 0.75rem; /* 12px */
}

.product-detail__description {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: 1.6;
  color: var(--text-color-secondary);
  margin-top: 1.5rem; /* 24px */
}

/* Shared "Enquire on WhatsApp" CTA — same icon+label markup pattern
   and typography as .nav-enquire (css/nav.css): font-family/size/
   weight/tracking/uppercase, solid fill, no border. Layout (full-
   width vs. inline, padding, margin-top) stays on each page-specific
   class below rather than folded in here — .product-detail__cta sits
   full-width in the info pane, .how-to-order__cta sits inline in the
   dark How-To-Order section; kept separate rather than assumed equal. */
.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-black);
  color: var(--text-color-inverse);
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  border: none;
  transition: background-color 200ms ease;
}

.whatsapp-cta:hover {
  /* filter: brightness() can't lighten pure black — it's a
     multiplicative scale (channel * amount), and 0 * any percentage
     is still 0. Verified via real render before choosing this
     approach. Direct hex swap instead, same mechanism .nav-enquire's
     own hover already uses. Single consumer of this exact charcoal —
     not promoted to a token. */
  background-color: #363636;
}

.whatsapp-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.product-detail__cta {
  width: 100%;
  padding: 1.125rem 1.5rem; /* 18px 24px */
  margin-top: 1.5rem; /* 24px */
}

.product-detail__accordions {
  margin-top: 2rem; /* 32px */
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.product-detail__accordion-item {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  text-transform: capitalize;
  padding: 1rem 0; /* 16px 0 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.product-detail__accordion-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  color: var(--text-color-primary);
}

.product-detail__accordion-item summary::-webkit-details-marker {
  display: none;
}

/* <1008px only: plain-text drawer triggers replace the inline accordion
   at >=1008px (see the min-width: 1008px block below for the swap and
   the trigger's own styling). Hidden here since this row has no drawer
   to open below that width. */
.product-detail__info-triggers {
  display: none;
}

/* Custom list style for accordion content. Descendant selectors, not a
   compound ul.product-detail__accordion-content — the real markup nests
   <ul class="details-list"> inside <div class="product-detail__accordion-content">,
   the class never lands on the <ul> itself. */
.product-detail__accordion-content ul {
  list-style: none;
  padding-left: 0;
  padding-bottom: 1.5rem;
}

.product-detail__accordion-content li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.45rem;
}

.product-detail__accordion-content li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-red);
  line-height: inherit;
}

.product-detail__accordion-content {
  color: var(--text-color-secondary);
}

.product-detail__accordion-content strong {
  color: var(--text-color-primary);
}

/* Fade-in on open, mirroring footer.css's .footer-care[open] span pattern.
   Native <details> has no animated close, only an instant snap — this only
   covers the open transition; the collapse remains abrupt by default. */
details[open] .product-detail__accordion-content {
  animation: accFade 250ms ease forwards;
}

@keyframes accFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1008–1279px: two equal flexible columns, no gap. At >=1008px overall,
   both panes use the page's single normal scroll — position: sticky pins
   each one near the top of the viewport as far as its own column's
   content allows, but neither pane gets its own internal scrollbar
   (no fixed height / overflow-y here anymore). The gallery still holds
   multiple stacked images rather than a single fixed-ratio box. */
@media (min-width: 1008px) {
  .product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    max-width: 1215px;
    margin-inline: auto;
    align-items: start; /* prevents grid from stretching both columns to match the taller one's height */
  }

  .product-detail__gallery,
  .product-detail__info {
    min-width: 0;
    position: sticky;
    top: var(--nav-height);
  }

  .product-detail__gallery {
    /* Remove the fixed aspect-ratio at this tier — the gallery now holds
       multiple stacked images and scrolls, rather than being one
       fixed-ratio box. Images inside keep their own natural aspect ratio. */
    aspect-ratio: unset;
  }

  .product-gallery-item {
    margin-bottom: 1rem; /* gap between stacked images in the scrolling gallery */
  }

  /* Mobile carousel controls: inert and hidden here — the independent-
     scroll multi-image pane replaces the carousel entirely at this tier. */
  .product-gallery-arrow,
  .product-gallery-dots {
    display: none;
  }

  /* Inline accordion -> drawer-trigger swap: below 1008px the plain
     <details>/<summary> accordion is the interaction; at this tier it's
     replaced by a row of plain-text buttons that open the shared
     #product-info-drawer instead (js/size-guide-drawer.js). */
  .product-detail__accordions {
    display: none;
  }

  .product-detail__info-triggers {
    display: flex;
    flex-direction: column;
    margin-top: 2rem; /* 32px, matching .product-detail__accordions's own margin-top */
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .product-detail__info-trigger {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--text-nav);
    text-transform: capitalize;
    color: var(--text-color-primary);
    padding: 1rem 0; /* matches .product-detail__accordion-item padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    text-decoration: none;
    /* .product-detail__size-guide has no hover/transition of its own to
       match (checked — none exists), so this uses the same 200ms ease
       already established for quick UI hovers elsewhere on this page:
       .product-gallery-arrow (this file) and .shop-breadcrumb a
       (product.html's inline styles). */
    transition: text-decoration-color 200ms ease;
  }

  .product-detail__info-trigger:hover,
  .product-detail__info-trigger:focus-visible {
    text-decoration: underline;
  }

  .product-detail__info {
    padding: 2rem 3.5rem 2rem 2rem; /* 32px 56px 32px 32px */
  }

  .product-detail__inner {
    max-width: 21.75rem; /* 348px */
  }

  .product-detail__description {
    max-width: 18.75rem; /* 300px */
  }
}

/* >=1280px: two fixed-width columns, no gap. Grid's explicit track
   sizing (617px 598px) handles both panes' widths directly. Height,
   overflow, sticky positioning, and aspect-ratio all carry over
   unchanged from the >=1008px block above — nothing pane-sizing-related
   is overridden at this tier. */
@media (min-width: 1280px) {
  .product-detail {
     grid-template-columns:
      minmax(0, 617px)
      minmax(0, 598px);
      justify-content: center;
    gap: 0;
  }

  .product-detail__info {
    /* Asymmetric: 48px left (near the gallery), 96px right — anchors
       content toward the gallery, leaves intentional whitespace on
       the outer-right edge. */
    padding: 3rem 6rem 3rem 3rem; /* 48px 96px 48px 48px */
  }

  .product-detail__inner {
    max-width: 28.5rem; /* 456px */
  }

  .product-detail__description {
    max-width: 23.75rem; /* 380px */
  }
}

/* <600px only (matches the site's existing phone breakpoint). Reorders
   content to: collection -> name+price row -> description -> colour ->
   size guide -> CTA -> accordions, and puts name/price side by side.
   .product-detail__inner isn't a flex container at any other tier, so
   this is scoped entirely to this query — 600-1007px keeps the plain
   stacked document order untouched. No markup changes: `order` handles
   the reorder, and margin-left: auto on the price (the standard flex
   auto-margin trick) pushes it to the row's far end without needing a
   wrapper around the name/price pair. */
@media (max-width: 599px) {
  .product-detail__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .product-detail__collection {
    order: 1;
    flex: 1 1 100%;
  }

  .product-detail__name {
    order: 2;
  }

  .product-detail__price {
    order: 3;
    margin-top: 0.5rem; /* 8px */
    margin-left: auto;
  }

  .product-detail__description {
    order: 4;
    flex: 1 1 100%;
  }

  .product-detail__colour {
    order: 5;
    flex: 1 1 100%;
  }

  .product-detail__size-guide {
    order: 6;
    flex: 1 1 100%;
    text-align: left;
  }

  .product-detail__cta {
    order: 7;
    flex: 1 1 100%;
  }

  .product-detail__accordions {
    order: 8;
    flex: 1 1 100%;
    border-top: none;
  }
}

/* Shared panel styling for both the size guide drawer and #product-info-
   drawer — the latter reuses this class in its markup instead of getting
   a duplicated #product-info-drawer rule set, since every property here
   (position, height, background, transform, transition, overflow) is
   identical between the two; only the two drawers' *content* differs.
   Width intentionally diverges from nav.css's .mobile-drawer (340px,
   unchanged) — these two drawers hold denser content (a data table /
   multi-section accordion) than the nav's link list, so they're wider. */
.size-guide-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100svh;
  width: min(600px, 90vw);
  background-color: var(--color-cream);
  z-index: 200;
  padding: 2rem;
  transform: translateX(100%);
  transition: transform 320ms ease;
  overflow-y: auto;
}

.size-guide-drawer.is-open {
  transform: translateX(0);
}

.size-guide-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
}

.size-guide-drawer-scrim[hidden] {
  display: none;
}

.size-guide-drawer__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

/* Both drawer titles share identical header treatment (see the markup
   comment on #product-info-drawer) — kept as one rule so they stay in
   sync rather than drifting into two copies. */
#size-guide-drawer-title,
#product-info-drawer-title {
  font-weight: 400;
  color: var(--text-color-primary);
}

@media (max-width: 768px) {
  .size-guide-drawer {
    width: 100%; /* full-page on mobile, matching the accessories-video full-width decision made earlier in this project */
  }
}

.how-to-order {
  background: var(--color-black);
  color: var(--color-cream);
  padding: 2rem var(--page-padding-product);
}

.how-to-order__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em; /* literal value, no token, matching project decision on this exact tracking */
  color: var(--text-color-accent);
}

.how-to-order__heading {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(1.625rem, 1rem + 2.778vw, 3.5rem);
  line-height: 1.1;
  color: var(--text-color-inverse);
  margin-top: 1.5rem;
}

.how-to-order__heading em {
  color: var(--text-color-accent);
  font-style: italic;
}

.how-to-order__intro {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-color-inverse-secondary);
  margin-top: 1.75rem;
  max-width: 21.25rem;
}

.how-to-order__cta {
  border: 1px solid var(--text-color-inverse);
  padding: 1rem 1.5rem;
  margin-top: 2rem;
}

.how-to-order__steps {
  list-style: none;
  margin-top: 2.25rem;
}

.how-to-order__step {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(246, 238, 233, 0.15);
}

.how-to-order__step-number {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  color: var(--text-color-accent);
}

.how-to-order__step-title {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1rem;
  color: var(--text-color-inverse);
  margin-bottom: 0.5rem;
}

.how-to-order__step-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-nav);
  line-height: 1.6;
  color: var(--text-color-inverse-muted);
}

/* Gap between Product section and How To Order — spec: clamp(80px,6vw,96px), 4px-grid-snapped, ONLY at >=1008px; zero below. */
@media (min-width: 1008px) {
  .how-to-order {
    margin-top: clamp(5rem, 4rem + 6vw, 6rem); /* 80px -> 96px */
  }

  .how-to-order {
    display: flex;
    gap: 5rem; /* 80px, matching reference file's two-column gap */
    padding-block: 4rem;
  }

  .how-to-order__content,
  .how-to-order__steps {
    flex: 1;
  }

  .how-to-order__steps {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1rem;
}

.size-guide-table th,
.size-guide-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--font-body);
  font-size: var(--text-nav);
}

.size-guide-fit-notes {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.size-guide-fit-notes li {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.size-guide-drawer__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-mobile);
  line-height: 1.6;
  color: var(--text-color-secondary);
  margin-top: 1rem;
}

.size-guide-drawer__subhead {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 1rem;
  margin-top: 1.5rem;
}