/* ============================================================================
   v2-amazon-v20260508b.css — IMPECCABLE polish for /amazon/index.html
   Loaded AFTER inline <style> so every selector here wins via cascade order.
   Brand canon: cream #faf9f5 bg, ink #141413, single accent orange #c9613f.
   Fraunces serif display, Inter UI. WCAG 2.2 AA on every state.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FIX 1 — Sticky control bar stacks BELOW global nav (not under it)
   The global <nav> is position:sticky top:0 z-index:10 (style-v...css:48).
   The .az-controls inline rule is also top:0 z-index:50 — same offset, so it
   floats over the nav and the nav disappears at scroll. Push az-controls down
   by the nav height (~62px desktop, ~58px small screens) so the two sticky
   bars stack cleanly.
   --------------------------------------------------------------------------- */
.az-controls {
  top: 62px;
  /* Soft shadow appears only when the bar is pinned (page scrolled past hero).
     The browser doesn't tell us "is this sticky engaged?", so we rely on the
     hero living above this bar — once the user scrolls past, the shadow
     visually separates the bar from the cards under it. */
  box-shadow: 0 1px 0 rgba(20,20,19,0.06), 0 8px 16px -12px rgba(20,20,19,0.10);
  /* Slightly stronger backdrop for legibility against busy card grid below. */
  background: color-mix(in srgb, var(--bg, #faf9f5) 88%, transparent);
}
:root[data-theme="dark"] .az-controls {
  box-shadow: 0 1px 0 rgba(245,239,228,0.06), 0 8px 16px -12px rgba(0,0,0,0.4);
}
@media (max-width: 720px) {
  .az-controls { top: 58px; }
}

/* ---------------------------------------------------------------------------
   FIX 2 — Anchor / jump-to scrolling does not hide the first card under bar
   When users open the page with #anchor or use Cmd+F to a card, the sticky
   az-controls (60px) + nav (62px) = ~122px of overlap. scroll-margin-top
   pushes the anchor target down so it lands fully visible.
   --------------------------------------------------------------------------- */
.az-grid-wrap { scroll-margin-top: 130px; }
.az-card { scroll-margin-top: 130px; }

/* ---------------------------------------------------------------------------
   FIX 3 — Filter chip count badge is a real chip (Sleep · 4 form)
   Original: <span class="az-count">25</span> reads as "All 25" — number is
   smaller and 0.6 opacity, but no visible separator. Spec calls for "Sleep · 4"
   shape. We add a middle-dot separator and lift contrast so the count is
   readable on the active (dark) chip too.
   --------------------------------------------------------------------------- */
.az-chip .az-count {
  /* Insert the bullet separator via ::before so we don't touch the HTML */
  font-variant-numeric: tabular-nums; /* numbers don't shift width 1→2→25 */
  font-size: 11px;
  font-weight: 600;
  opacity: 1;                          /* legibility — was 0.6 */
  color: var(--muted, #6b6960);
  letter-spacing: 0.02em;
}
.az-chip .az-count::before {
  content: "·";
  display: inline-block;
  margin: 0 4px 0 2px;
  opacity: 0.55;
}
/* Active chip (dark bg) — the count needs to read in cream against ink */
.az-chip.is-active .az-count {
  color: rgba(250, 249, 245, 0.78);
}
:root[data-theme="dark"] .az-chip.is-active .az-count {
  color: rgba(22, 17, 14, 0.72);
}
/* Hover state — count picks up the orange too so the chip reads as one unit */
.az-chip:hover .az-count { color: #c9613f; }

/* ---------------------------------------------------------------------------
   FIX 4 — Filter chips: clear focus-visible ring (WCAG 2.4.7), idle vs active
   Original .az-chip has no :focus-visible — keyboard users get the default
   browser ring which can be invisible on some themes. Spec mandates 2px
   #c9613f / 2px offset.
   --------------------------------------------------------------------------- */
.az-chip:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 2px;
  border-color: #c9613f;
}
.az-chip { transition: background 0.18s, color 0.18s, border-color 0.18s; }
/* Subtle press feedback so chip click feels physical */
.az-chip:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------------
   FIX 5 — Filter row scrolls horizontally on narrow screens (no wrap chaos)
   Original: flex-wrap forces chips onto 3 lines on iPhone SE → eats vertical
   real estate above the cards. Better: horizontal scroll with snap, so the
   filter strip stays one tidy row and users swipe through it. Desktop unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .az-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox — hide ugly scrollbar */
    -ms-overflow-style: none;          /* IE/Edge legacy */
    /* Fade-out edges to hint there's more to scroll */
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    padding: 2px 4px;                  /* room for focus-visible outline */
    margin: 0 -4px;                    /* offset the padding above */
  }
  .az-filter-row::-webkit-scrollbar { display: none; }
  .az-chip {
    scroll-snap-align: start;
    flex-shrink: 0;                    /* don't squish; let scroll handle it */
  }
}

/* ---------------------------------------------------------------------------
   FIX 6 — Sort dropdown gets a styled chevron + current-sort highlight
   Native <select> chevrons are inconsistent across Mac/Win/iOS. We use
   appearance:none + an inline SVG chevron so the dropdown feels native to
   the brand. The "current sort is non-default" gets an orange tick (border
   color shift) so users notice when they've left the recommended order.
   --------------------------------------------------------------------------- */
.az-sort {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Chevron — small, ink-toned, sits 12px from the right edge */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b6960' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;                  /* room for the chevron */
  font-weight: 500;
  transition: border-color 0.18s, color 0.18s;
}
.az-sort:hover { border-color: #c9613f; }
.az-sort:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 2px;
  border-color: #c9613f;
}
/* When the user has left default sort, signal it visually (JS toggles class) */
.az-sort[data-non-default="true"] {
  border-color: #c9613f;
  color: #c9613f;
}
:root[data-theme="dark"] .az-sort {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a8a497' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   FIX 7 — Card hover: lift only, NEVER reflow the grid
   Original: hover swaps border-color #e8e6dc → #c9613f. That's a 1px color
   change with no width change, BUT the translateY(-3px) without backing
   shadow + the border feel imbalanced. Refined to:
   - translateY(-2px) — quieter lift, brand calls for "quiet"
   - softer ink-toned shadow (NOT orange — single-accent rule)
   - border stays neutral; the OUTLINE picks up orange instead so we don't
     bork sub-pixel widths
   - cursor pointer is set; tabIndex=0 + role=button means focus-visible matters
   --------------------------------------------------------------------------- */
.az-card {
  /* Use will-change sparingly — only on the property that animates */
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s,
              outline-offset 0.15s;
}
.az-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(20,20,19,0.10),
              0 2px 4px rgba(20,20,19,0.04);
  border-color: var(--rule, #e8e6dc);   /* override hover-orange — keep neutral */
}
:root[data-theme="dark"] .az-card:hover {
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5),
              0 2px 4px rgba(0,0,0,0.3);
}
/* Focus-visible ring — keyboard navigation gets a clear orange 2/2 ring */
.az-card:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 3px;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(201,97,63,0.18);
}
/* Suppress focus on click (mouse users don't want a ring on click) */
.az-card:focus:not(:focus-visible) { outline: none; }

/* The "Read →" CTA inside the card slides on card hover OR card focus.
   Original only animates on hover — keyboard users get no visual feedback. */
.az-card:focus-visible .az-card-cta::after { transform: translateX(2px); }

/* ---------------------------------------------------------------------------
   FIX 8 — Card price stripe: improve hierarchy
   Inline rule: .az-card-price font-weight:700, font-size:13px — but the price
   is the lowest-weight signal in the card and gets visually outranked by the
   word "Read". Lift the price color contrast and tighten the foot row.
   --------------------------------------------------------------------------- */
.az-card-price {
  font-variant-numeric: tabular-nums;   /* $7-12 vs $130-180 align right edge */
  letter-spacing: 0.01em;
  /* Free items already render as "Free" — give them a soft pill so they don't
     look like a typo */
}
.az-card-price:where([data-free="true"], :has(:contains("Free"))) {
  /* :has(:contains()) isn't real CSS — JS sets data-free="true" instead.
     Falls back gracefully — just slightly different color for $0 items. */
  color: #2da44e;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   FIX 9 — Compare checkbox: cleaner pinning + obvious pressed state
   Original: 24x24 absolute box top:14 right:14, and body[data-compare-mode]
   pads the card right by 50px. Issues:
   - The checkbox is a <div> with no role — screen readers don't see it
   - The "checked" green doesn't appear; only orange. Users want a tick.
   - The padding-right shoves text against the checkbox at narrow widths.
   --------------------------------------------------------------------------- */
.az-card-checkbox {
  /* Slightly rounder edge, more "selectable" feel */
  border-radius: 6px;
  /* Dark-mode bg defaults to white in original — fix that */
  background: var(--bg, #faf9f5);
  border-color: rgba(20,20,19,0.20);
  box-shadow: 0 1px 2px rgba(20,20,19,0.05);
}
:root[data-theme="dark"] .az-card-checkbox {
  background: rgba(26,22,20,0.95);
  border-color: rgba(245,239,228,0.20);
}
.az-card-checkbox:hover { border-color: #c9613f; }
.az-card-checkbox.checked {
  background: #c9613f;
  border-color: #c9613f;
  box-shadow: 0 2px 6px rgba(201,97,63,0.32);
}
/* The card itself shows a thin orange border when its checkbox is checked —
   selection state must be obvious from across the room. JS adds .is-selected. */
body[data-compare-mode] .az-card.is-selected {
  border-color: #c9613f;
  box-shadow: 0 0 0 1px #c9613f, 0 8px 24px -8px rgba(201,97,63,0.18);
}

/* Mobile: don't pad-right by 50px — that eats 35% of a 320px card.
   Instead, move the checkbox to top-left corner with a smaller hit area-zone
   handled in motion + don't reserve that horizontal space. */
@media (max-width: 540px) {
  body[data-compare-mode] .az-card { padding-right: 22px; padding-top: 44px; }
  .az-card-checkbox { top: 12px; right: 12px; }
}

/* ---------------------------------------------------------------------------
   FIX 10 — Compare tray: real "Comparing X/4 · Clear · Compare now"
   Original: single button "0 selected · Open compare". Spec calls for a
   3-action tray: count badge + Clear + Compare now. We restyle the existing
   button (keep DOM small) and JS will inject inner spans/buttons.
   --------------------------------------------------------------------------- */
.az-compare-tray {
  /* Make it a proper toolbar, not a single button */
  display: none;                        /* JS toggles via [hidden] still works */
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 14px;                  /* less pill-y, more bar */
  /* Slimmer shadow — orange 0.4 was screaming on a quiet page */
  box-shadow: 0 16px 40px -12px rgba(201,97,63,0.45),
              0 0 0 1px rgba(201,97,63,0.12);
  bottom: 20px;
  /* iOS safe area — don't sit under the home indicator */
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
}
.az-compare-tray:not([hidden]) { display: inline-flex; }
.az-compare-tray .tray-count {
  margin-right: 0;                      /* override inline 4px */
  padding: 4px 10px;
  background: rgba(0,0,0,0.22);
  border-radius: 99px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* Slot for Clear and "Compare now" — JS injects <button class="tray-clear">
   and the existing trailing text becomes a button. */
.az-compare-tray .tray-clear {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.az-compare-tray .tray-clear:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.6);
}
.az-compare-tray .tray-clear:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.az-compare-tray .tray-cta {
  background: #fff;
  color: #c9613f;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.az-compare-tray .tray-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.az-compare-tray .tray-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Mobile: tray becomes a true bottom sheet — full width, rounded top corners
   only, sits above the safe-area inset, doesn't block last card from view. */
@media (max-width: 640px) {
  .az-compare-tray {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    transform: none;                    /* override translateX(-50%) */
    width: auto;
    border-radius: 16px;
    padding: 12px 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }
  .az-compare-tray .tray-cta { flex: 1 0 auto; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   FIX 11 — <dialog> backdrop tint matches brand canon (#0a0905b3)
   Original: rgba(20,20,19,0.55) — too light; reads as gray, not "cinematic
   ink wash". Spec: #0a0905b3 = rgb(10,9,5,0.7). Plus a stronger blur.
   Same for compare dialog.
   --------------------------------------------------------------------------- */
.az-detail::backdrop,
.az-compare-dialog::backdrop {
  background: rgba(10, 9, 5, 0.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------------------
   FIX 12 — <dialog> open animation: opacity fade only (no scale gimmick)
   Native <dialog> with showModal() pops with no animation. Add a tiny fade
   so it feels intentional, NOT bouncy. Reduced-motion: instant.
   --------------------------------------------------------------------------- */
@keyframes az-dialog-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes az-backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.az-detail[open],
.az-compare-dialog[open] {
  animation: az-dialog-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.az-detail[open]::backdrop,
.az-compare-dialog[open]::backdrop {
  animation: az-backdrop-fade-in 220ms ease-out;
}
/* Close button gets a touch-friendly hit area + clear focus ring */
.az-detail-close {
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.az-detail-close:hover {
  background: rgba(20,20,19,0.06);
}
.az-detail-close:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 2px;
}

/* The "Buy on Amazon" CTA inside the detail dialog: lift its presence so the
   user knows what to do next. Add a small "external link" SVG hint so it's
   clear this leaves Deskrune. */
.az-detail-buy {
  position: relative;
  letter-spacing: 0.005em;
}
.az-detail-buy:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 2px;
}
.az-detail-buy::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5h5v5M9.5 2.5L4 8M2.5 4.5v5h5' stroke='%23faf9f5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
  vertical-align: -1px;
  transition: transform 0.18s, opacity 0.18s;
}
.az-detail-buy:hover::after { transform: translate(2px, -2px); opacity: 1; }

/* ---------------------------------------------------------------------------
   FIX 13 — Trust strip ABOVE the fold (visible without scrolling)
   Brand canon (trust.md): "Disclosure visible above the fold" is required.
   Original: disclosure-strip is at bottom of page. We render a thin
   above-the-fold band INSIDE the hero (using a pseudo-class on .az-hero)
   that pulls the eyebrow into a richer trust line.

   Implementation: extend the .az-eyebrow line so it reads as a 3-part
   disclosure on desktop, stacks on mobile.
   --------------------------------------------------------------------------- */
.az-eyebrow {
  /* Tighter padding, more breathing room around the dot separators */
  padding: 7px 14px;
  letter-spacing: 0.14em;
  /* Make the eyebrow feel like a trust badge, not a decorative chip */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
/* A small trust dot before the eyebrow text — subtle live signal */
.az-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9613f;
  flex-shrink: 0;
  animation: az-trust-pulse 3s ease-in-out infinite;
}
@keyframes az-trust-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201,97,63,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 4px rgba(201,97,63,0); }
}
@media (prefers-reduced-motion: reduce) {
  .az-eyebrow::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   FIX 14 — Reduced-motion respect: kill View Transitions, lift, pulses
   prefers-reduced-motion users get instant state changes. The View Transitions
   API ::view-transition pseudo-elements default to a 250ms cross-fade, so we
   cancel them in this mode. Hover lifts also disabled (vestibular).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .az-card,
  .az-card:hover,
  .az-card:focus-visible {
    transform: none !important;
    transition: border-color 0.01s, box-shadow 0.01s, outline 0.01s;
  }
  .az-card-cta::after,
  .az-card:hover .az-card-cta::after,
  .az-card:focus-visible .az-card-cta::after {
    transition: none;
    transform: none;
  }
  .az-detail[open],
  .az-compare-dialog[open],
  .az-detail[open]::backdrop,
  .az-compare-dialog[open]::backdrop {
    animation: none;
  }
  .az-compare-tray .tray-cta:hover { transform: none; }
  /* View Transitions API — instant snap, no cross-fade */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.001s;
  }
}

/* ---------------------------------------------------------------------------
   BONUS — Small typographic + contrast polish that doesn't earn its own #
   - Card honest-text gets a touch more line-height for ADHD readability
   - Empty-state typography scales up so it doesn't feel like an error 404
   - Disclosure-strip green tint reduced — green here was reading clinical;
     ink-tint is quieter and on-brand
   - High-contrast color scheme: forced-colors media query support (Win HC)
   --------------------------------------------------------------------------- */
.az-card-honest {
  line-height: 1.6;
}
.az-empty {
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft, #1f1c18);
  opacity: 0.7;
}
.az-disclosure-strip {
  background: rgba(20, 20, 19, 0.03);
  border-top-color: rgba(20, 20, 19, 0.10);
}
:root[data-theme="dark"] .az-disclosure-strip {
  background: rgba(245, 239, 228, 0.03);
  border-top-color: rgba(245, 239, 228, 0.10);
}

/* Windows High Contrast mode — chips, buttons, dialogs render with system
   colors instead of our brand palette so the page is usable. */
@media (forced-colors: active) {
  .az-chip,
  .az-card,
  .az-detail-buy,
  .az-compare-tray,
  .az-detail-close,
  .az-compare-close,
  .az-cta-primary,
  .az-cta-secondary {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }
  .az-chip.is-active,
  .az-detail-buy,
  .az-cta-primary {
    background: Highlight;
    color: HighlightText;
  }
  .az-card:focus-visible,
  .az-chip:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* End of v2-amazon-v20260508b.css ========================================== */