/* ==========================================================================
   Blush POC — Content + drawer (S3)
   Real left-column product content, right-column media, and the mobile
   bottom-sheet drawer. Composes from css/tokens.css + base.css; loaded after
   header.css. Every colour/space/type value here MUST be a token.
   Desktop (>=768px) = normal in-column content, NO drawer.
   Mobile  (<768px)  = the left column becomes a bottom sheet (peek/expanded).
   Fixed-position drawer *placement* lives in css/layout.css; this file styles
   the content and the sheet surface + collapse.
   ========================================================================== */

/* --- Right column: media -------------------------------------------------
   Three real photos + the S4 looping detail video. .media-item (layout.css)
   supplies the square + desktop max-width; photo and video fill it identically,
   cover-cropped, so they share this one fit rule. */
.media-item--photo,
.media-item--video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo sequences (S9): three layers stacked in the frame; layer 1 is the base,
   the upper layers start transparent and are crossfaded in by scroll
   (js/scroll.js). The frame keeps the square via its own aspect-ratio AND is
   the positioning context — without it the absolute layers anchor to the whole
   product section (the R18 defect). */
.media-frame { position: relative; }
.media-seq__img {
  position: absolute;
  inset: 0;
}
.media-seq__img:first-child { position: relative; }  /* base layer sizes the frame */
.media-seq__img:not(:first-child) { opacity: 0; }

/* --- Left column: title + price ------------------------------------------ */
.info__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-20);
}
.info__price {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.info__bag {
  height: var(--icon-size);
  width: auto;
  color: var(--color-brown);   /* in-content icon: normal colour, NOT blended */
}
.info__amount {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-title);
}
.info__currency {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--size-body-sm);
  color: var(--color-brown);
}
/* .info__value composes .type-title-sm (350, brown) via the class in markup */

/* --- Left column: details (description, spec, care) ----------------------- */
.info__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.info__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Divider rule — dashed washed hairline (operator, S9). */
.info__rule {
  border: 0;
  border-block-start: 1px dashed var(--color-washed);
  block-size: 0;
  margin: 0;
  background: none;
}

/* Spec table — label (brown, strong) + value (washed .type-body-sm). */
.info__spec {
  --spec-label-col: 116px;   /* local layout constant, not a design token */
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.info__spec-row {
  display: grid;
  grid-template-columns: var(--spec-label-col) 1fr;
  column-gap: var(--space-20);
}
.info__spec-label {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--size-body-sm);
  color: var(--color-brown);
}
/* .info__spec-value composes .type-body-sm via the class in markup */

/* Care list — laundry glyph + washed .type-body-sm label. */
.info__care {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: none;
  padding: 0;
}
.info__care-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.info__care-icon {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  flex: 0 0 auto;
  opacity: 0.55;   /* soften the black glyph into the washed register */
}

/* --- Drawer handle grip (hidden until the mobile breakpoint) -------------- */
.drawer__toggle { display: none; }
.drawer__grip {
  inline-size: 44px;
  block-size: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-washed) 70%, transparent);
}

/* ==========================================================================
   Mobile (<768px): the left column IS the bottom-sheet drawer.
   Placement (fixed inset) is in layout.css; here we style the sheet surface,
   the always-visible peek (handle + head), and the peek <-> expanded collapse.
   ========================================================================== */
@media (max-width: 767px) {
  .product__info {
    background: var(--color-light);
    /* straight corners (operator, S9 — rounded removed) */
    box-shadow: 0 -4px 24px color-mix(in srgb, var(--color-dark) 12%, transparent);
    padding-inline: var(--space-20);
    padding-block: var(--space-20);   /* top space reduced to 20 (grip removed) */
    gap: var(--space-12);
  }

  /* Grip line removed (operator, S9): the head is the tap/drag target; the
     hidden button still carries aria-expanded for the state. */
  .drawer__toggle { display: none; }

  .info__head { cursor: pointer; }

  /* Peek (default): head + TWO description lines, the second fading out
     (operator's reference image) — a bottom mask over a 2-line clip. */
  .info__details {
    max-block-size: calc(2 * 1.5 * var(--size-body));   /* 2 body lines */
    overflow: hidden;
    transition: max-block-size 0.35s ease;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0, #000 calc(100% - 1.5 * var(--size-body)), transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0, #000 calc(100% - 1.5 * var(--size-body)), transparent 100%);
  }

  /* Expanded: reveal details, inner-scroll (scrollbar hidden), and a TOP fade
     that grows as the text scrolls under the sheet's top edge (--drawer-fade,
     element px, set by js/drawer.js from scrollTop). */
  .product__info.is-open .info__details {
    max-block-size: 65vh;
    overflow-y: auto;
    padding-block-end: var(--space-12);   /* clear the sheet's bottom padding */
    scrollbar-width: none;                /* Firefox */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 var(--drawer-fade, 0px));
    mask-image: linear-gradient(to bottom,
        transparent 0, #000 var(--drawer-fade, 0px));
  }
  .info__details::-webkit-scrollbar { display: none; }   /* WebKit */

  /* Subtle scrim behind the expanded sheet. */
  .drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 15;                 /* below the sheet (20), above the page */
    background: color-mix(in srgb, var(--color-dark) 32%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .product__info.is-open ~ .drawer__scrim {
    opacity: 1;
    visibility: visible;
  }
}

/* ==========================================================================
   Desktop (>=768px): normal in-column content, NO drawer.
   head + details go display:contents so their children become flex items of
   .product__info and reorder to the reading order:
   title -> description -> price -> rule -> spec -> rule -> care.
   ========================================================================== */
@media (min-width: 768px) {
  .drawer__toggle,
  .drawer__scrim { display: none; }

  /* Text fades out under the logo as it scrolls beneath it (operator, S9):
     the mask line (--fade-a/--fade-b, element px) is driven per scroll frame
     by js/scroll.js from the header's live bottom edge. Defaults = no fade. */
  .product__info {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent var(--fade-a, -1px), #000 var(--fade-b, 0px));
    mask-image: linear-gradient(to bottom,
        transparent var(--fade-a, -1px), #000 var(--fade-b, 0px));
  }

  .info__head,
  .info__details { display: contents; }

  .info__title { order: 1; }
  .info__desc  { order: 2; }
  .info__price { order: 3; }
  .info__details > .info__rule:nth-of-type(1) { order: 4; }
  .info__spec  { order: 5; }
  .info__details > .info__rule:nth-of-type(2) { order: 6; }
  .info__care  { order: 7; }
}