/* ==========================================================================
   Blush POC — Design polish (S8)
   Final layered adjustments: linked LAST so it refines spacing, interaction
   and focus without churning the source stylesheets. Additive only — every
   colour/space/type value composes from css/tokens.css; the micro-values here
   (scale amounts, easings, durations) are local polish constants, not tokens.
   Judgement areas per brief: text spacings + drawer.
   ========================================================================== */

/* Shared restrained easing + a soft luxe zoom curve (local polish constants). */
:root {
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Header — subtle icon/logo hover + keyboard focus.
   The header carries mix-blend-mode:difference, so any outline/colour here is
   composited too: currentColor (--icon-inverse) resolves to dark over the light
   page, giving a legible ring. Hover is a gentle scale only (restrained).
   -------------------------------------------------------------------------- */
.site-header__icon {
  transition: transform 220ms var(--ease-soft);
  transform-origin: center;
}
/* The logo-mark's transform is COMPOSED in header.css from --logo-rest
   (condense) × --logo-hover — hover only sets its factor, so it never fights
   the condensed scale, and the left-pinned origin (header.css) is preserved. */
@media (hover: hover) {
  .site-header__action:hover .site-header__icon { transform: scale(1.09); }
  .site-header__logo:hover .site-header__logo-mark { --logo-hover: 1.03; }
  .site-header__action:active .site-header__icon { transform: scale(0.96); }
}
.site-header__action:focus-visible,
.site-header__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Media — frame each item so a gentle zoom stays WITHIN the square.
   .media-frame is the sized/clipping box; the inner .media-item keeps its
   cover-fit from content.css. Sizing mirrors the old per-item rules (full
   width; capped to --media-size and centred on desktop) so the two-column
   layout and the mobile full-bleed stack are unchanged.
   -------------------------------------------------------------------------- */
.media-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--background-theme);   /* themed letterbox until media paints */
}
@media (min-width: 768px) {
  .media-frame {
    max-width: var(--media-size);        /* inherited from .page (layout.css) */
    margin-inline: auto;
  }
}
.media-frame .media-item {
  transition: transform 700ms var(--ease-soft);
  transform-origin: center;
}
@media (hover: hover) {
  .media-frame:hover .media-item { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   3. Price — buy affordance. Not a control in the POC, so this is a visual
   cue only (no faked role/tabindex): pointer cursor + the bag lifting to the
   accent on hover.
   -------------------------------------------------------------------------- */
.info__price { cursor: pointer; }
.info__bag { transition: transform 220ms var(--ease-soft), color 220ms ease; }
@media (hover: hover) {
  .info__price:hover .info__bag {
    transform: translateY(-1px) scale(1.06);
    color: var(--color-accent);
  }
}

/* --------------------------------------------------------------------------
   4. Desktop text rhythm — operator spec (S9): a space-40 beat throughout.
   Base flow gap (.product__info) is space-20, so each junction adds a space-20
   margin to total 40: below the title; above AND below the price; below the
   first divider (its "above" comes from the price's bottom margin); above and
   below the second divider. head/details are display:contents on desktop, so
   these children are flex items and the child selectors still hit.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .info__title { margin-block-end: var(--space-20); }             /* → 40 below title */
  .info__price { margin-block: var(--space-20); }                 /* → 40 above + below */
  .info__details > .info__rule { margin-block: 0 var(--space-20); }  /* line 1 → 40 below */
  .info__details > .info__rule:last-of-type { margin-block: var(--space-20); } /* line 2 → 40 above + below */
}

/* --------------------------------------------------------------------------
   5. Drawer (mobile) — refined bottom sheet + drag support (judgement area).
   Surface/grip/scrim polish; .is-dragging kills the height transition so the
   sheet tracks the finger 1:1 (js/drawer.js), and touch-action:none on the
   drag zones stops the page scrolling under the gesture.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Straight-cornered sheet (operator, S9); the grip + its affordance rules
     are gone with it — the head is the tap/drag target. */
  .product__info {
    box-shadow: 0 -2px 32px color-mix(in srgb, var(--color-dark) 14%, transparent);
  }

  /* Drag zone (the title): never let the gesture scroll the page underneath.
     The description keeps native touch — it is the scroll area when open. */
  .info__title { touch-action: none; }

  /* While dragging, follow the finger (no easing); JS drives max-block-size. */
  .product__info.is-dragging .info__details { transition: none; }

  /* Soften the scrim so the media above stays present (per drawer preview). */
  .drawer__scrim { background: color-mix(in srgb, var(--color-dark) 24%, transparent); }
}

/* --------------------------------------------------------------------------
   6. Focus-visible fallback for any other interactive element (a11y).
   Zero-specificity :where() so the component-scoped rings above always win.
   -------------------------------------------------------------------------- */
:where(a, button):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Respect reduced motion — collapse the polish transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .media-frame .media-item,
  .site-header__icon,
  .site-header__logo-mark,
  .info__bag,
  .info__details,
  .drawer__scrim { transition-duration: 1ms; }
}