/* ==========================================================================
   LYS — Components
   Cards, verdict box, score chip, offers table, comparison, breadcrumb,
   buttons, chips, grids, pros/cons, hub layouts.
   ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 52px;
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
  padding: 0 1.75rem;          /* 0 28px — luxury button */
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Primary: ink fill, bronze on hover — restrained, MR PORTER register */
.btn--solid { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.btn--solid:hover { background: var(--c-bronze); border-color: var(--c-bronze); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-ivory); }
.btn--block { width: 100%; }
.btn--text { border: none; min-height: 0; padding: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-stone);
  padding-block: var(--space-3);
}
.breadcrumb a { color: var(--c-stone); }
.breadcrumb a:hover { color: var(--c-bronze); }
.breadcrumb__sep { margin-inline: var(--space-1); color: var(--c-mist); }

/* --- Grids ------------------------------------------------------------- */
.grid { display: grid; gap: 2rem; }   /* 32px — generous card spacing */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* --- Product card ------------------------------------------------------ */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%; /* fill the grid row so bottoms can align */
}
.product-card__media {
  aspect-ratio: 4 / 5;
  background: var(--c-bone);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__brand {
  font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--c-stone);
  font-weight: 500;
}
.product-card__name {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 500; margin: var(--space-1) 0;
  line-height: 1.12; letter-spacing: var(--tracking-card);
}
.product-card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  margin-top: auto;            /* pin price/score + CTA to the card bottom */
  padding-top: var(--space-2); /* breathing room when titles run short */
}
.product-card__price { font-size: var(--fs-base); }
.product-card__price del { color: var(--c-stone); margin-right: var(--space-1); }
.product-card__cta { margin-top: var(--space-2); }
.product-card__pick {
  position: absolute; top: var(--space-2); left: var(--space-2);
  background: var(--c-ink); color: var(--c-ivory);
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-eyebrow);
  font-weight: 600;
  text-transform: uppercase; padding: 4px var(--space-2);
}

/* --- Score chip — the authority anchor --------------------------------- */
.score {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--font-display); line-height: var(--lh-tight);
}
.score__value {
  font-size: var(--fs-score); font-weight: 500; line-height: 1;
  letter-spacing: var(--tracking-card); color: var(--c-ink);
}
.score__max { font-size: var(--fs-sm); color: var(--c-stone); }
/* Inline contexts (sticky bar, short-answer) stay compact */
.score--inline .score__value { font-size: var(--fs-xl); }
.score--inline .score__max { font-size: var(--fs-xs); }

/* --- Premium tier meter ------------------------------------------------ */
.meter { display: inline-flex; gap: 4px; vertical-align: middle; }
.meter__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-mist); }
.meter__dot--on { background: var(--c-bronze); }

/* --- Verdict box ------------------------------------------------------- */
.verdict {
  border: var(--hairline);
  border-left: 3px solid var(--c-bronze);
  background: var(--c-white);
  padding: var(--space-5);   /* 64px — the killer moment breathes */
}
/* The verdict score is the single most confident element on the page */
.verdict .score__value { font-size: 4rem; }   /* 64px */
.verdict .score__max { font-size: var(--fs-lg); }
.verdict__text {
  font-family: var(--font-display);
  font-size: var(--fs-lg); line-height: 1.4; color: var(--c-ink);
  max-width: 60ch; margin: var(--space-3) 0 0;
}
.verdict__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5); margin-block: var(--space-4);
}
.verdict__row { font-size: var(--fs-base); }
.verdict__label {
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--c-stone); font-size: var(--fs-2xs); font-weight: 600;
  display: block; margin-bottom: 4px;
}
@media (max-width: 560px) { .verdict__grid { grid-template-columns: 1fr; } }

/* --- Pros / cons ------------------------------------------------------- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.proscons h4 { font-family: var(--font-label); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-stone); }
.proscons ul { list-style: none; margin: 0; padding: 0; }
.proscons li { padding-left: var(--space-3); position: relative; margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.proscons__pro li::before { content: "+"; position: absolute; left: 0; color: var(--c-success); }
.proscons__con li::before { content: "–"; position: absolute; left: 0; color: var(--c-alert); }
@media (max-width: 560px) { .proscons { grid-template-columns: 1fr; } }

/* --- Offers table (where to buy) -------------------------------------- */
.offers { border-top: var(--hairline); }
.offer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--hairline);
}
.offer-row__merchant { font-size: var(--fs-base); }
.offer-row__stock { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-stone); }
.offer-row__price { font-family: var(--font-display); font-size: var(--fs-lg); margin-left: auto; }

/* --- Comparison table -------------------------------------------------- */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-2); border-bottom: var(--hairline); font-size: var(--fs-sm); vertical-align: top; }
.compare-table th { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-xs); color: var(--c-stone); }

/* --- Chips ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  border: var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3); font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--c-bronze); color: var(--c-bronze); }

/* --- FAQ accordion ----------------------------------------------------- */
.faq details { border-bottom: var(--hairline); padding-block: var(--space-2); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: var(--fs-lg); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { color: var(--c-bronze); }

/* --- Single-product layout -------------------------------------------- */
.product-hero { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-5); align-items: start; }
.product-hero__media { aspect-ratio: 4 / 5; background: var(--c-bone); overflow: hidden; }
.product-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__thumbs { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.product-hero__thumb {
  width: 64px; height: 80px; padding: 0; cursor: pointer;
  border: 1px solid transparent; background: var(--c-bone); overflow: hidden;
}
.product-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero__thumb.is-active { border-color: var(--c-bronze); }

.product-hero__brand a { color: var(--c-stone); }
.product-hero__brand a:hover { color: var(--c-bronze); }
.product-hero__title { margin-bottom: var(--space-2); }
.product-hero__score { display: inline-flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.product-hero__score-link {
  font-family: var(--font-label); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-stone);
}
.product-hero__score:hover .product-hero__score-link { color: var(--c-bronze); }
.product-hero__summary { color: var(--c-graphite); font-size: var(--fs-lg); }
.product-hero__price { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-1); }
.product-hero__price del { color: var(--c-stone); font-size: var(--fs-base); margin-right: var(--space-1); }
.product-hero__buy { margin-top: var(--space-3); }
.product-hero__save { margin-top: var(--space-2); }
@media (max-width: 768px) { .product-hero { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Price intelligence — the tracked-history signal */
.price-intel {
  display: flex; align-items: baseline; gap: var(--space-1);
  font-size: var(--fs-sm); color: var(--c-success); margin-bottom: var(--space-2);
}
.price-intel__mark { color: var(--c-success); }

/* Merchant context box (Lyst pattern) */
.merchant-box {
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin-block: var(--space-2);
  font-size: var(--fs-sm);
}
.merchant-box__from { margin: 0 0 2px; }
.merchant-box__line { margin: 0; color: var(--c-graphite); }
.merchant-box__line + .merchant-box__line { margin-top: 2px; }

/* Detail accordions */
.product-hero__accordions { margin-top: var(--space-4); border-top: var(--hairline); }
.acc { border-bottom: var(--hairline); }
.acc summary {
  cursor: pointer; list-style: none; padding-block: var(--space-2);
  font-family: var(--font-label); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  display: flex; justify-content: space-between; align-items: center;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--c-stone); font-size: var(--fs-lg); }
.acc[open] summary::after { content: "–"; }
.acc[open] summary { color: var(--c-bronze); }
.acc > *:not(summary) { margin-bottom: var(--space-3); font-size: var(--fs-sm); }

/* Section rhythm on the product page */
.product-section { margin-block: var(--space-5); }

/* Brand strip */
.brand-strip { border-block: var(--hairline); padding-block: var(--space-4); max-width: var(--prose-max); }
.brand-strip__name { font-size: var(--fs-xl); margin-bottom: var(--space-1); }
.brand-strip__copy { color: var(--c-graphite); }

/* Sticky buy bar */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--c-ivory) 96%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: var(--hairline);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy__inner {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-2);
}
.sticky-buy__name {
  font-family: var(--font-display); font-size: var(--fs-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.sticky-buy__price { font-family: var(--font-display); font-size: var(--fs-lg); }
.sticky-buy .btn { flex-shrink: 0; }
@media (max-width: 560px) { .sticky-buy__name .score { display: none; } }

/* --- Problem hub: short answer callout --------------------------------- */
.short-answer {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
  align-items: center;
  background: var(--c-bone);
  border-left: 3px solid var(--c-bronze);
  padding: var(--space-4);
  margin-block: var(--space-3) var(--space-5);
}
.short-answer__text { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.3; margin: 0; }
.short-answer__pick { display: flex; gap: var(--space-3); align-items: stretch; }
.short-answer__media { flex: 0 0 110px; aspect-ratio: 4/5; overflow: hidden; background: var(--c-mist); }
.short-answer__media img { width: 100%; height: 100%; object-fit: cover; }
.short-answer__detail { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.short-answer__detail h3 { font-size: var(--fs-lg); margin: 2px 0 var(--space-1); line-height: 1.2; }
.short-answer__meta { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); }
.short-answer__price { font-family: var(--font-display); font-size: var(--fs-lg); }
@media (max-width: 860px) {
  .short-answer { grid-template-columns: 1fr; gap: var(--space-3); }
  .short-answer__text { font-size: var(--fs-lg); }
}

/* --- Problem hub: criteria checklist ----------------------------------- */
.criteria { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.criteria li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
  color: var(--c-graphite);
}
.criteria li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--c-bronze);
  font-size: var(--fs-base);
}

/* --- Routine call-to-action strip -------------------------------------- */
.routine-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  border: var(--hairline);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.routine-cta:hover { border-color: var(--c-bronze); background: var(--c-bone); }
.routine-cta .eyebrow { margin: 0 0 2px; }
.routine-cta__title { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--c-ink); }
.routine-cta__arrow { font-size: var(--fs-2xl); color: var(--c-bronze); transition: transform var(--dur) var(--ease); }
.routine-cta:hover .routine-cta__arrow { transform: translateX(6px); }

/* --- Hub layout (problem / section) ----------------------------------- */
.hub-header { padding-block: var(--space-5) var(--space-4); }
.hub-header h1 { max-width: 18ch; }
.hub-header p { max-width: 52ch; color: var(--c-graphite); font-size: var(--fs-lg); }

/* --- Section eyebrow divider ------------------------------------------ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.section-head .eyebrow { margin: 0; }

/* --- Filter bar --------------------------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  border-block: var(--hairline); padding-block: var(--space-2);
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter);
}
.filter-bar__facet { display: inline-flex; align-items: center; gap: var(--space-1); }
.filter-bar__label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--c-stone);
}
.filter-bar select {
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-ink);
  background: transparent; border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.filter-bar .btn { padding: var(--space-1) var(--space-2); }
.filter-bar__clear { font-size: var(--fs-sm); color: var(--c-stone); }

/* --- Tonal media placeholder --------------------------------------------
   Designed fallback for image-less products/guides: brand eyebrow + serif
   initial on rotating muted grounds. Reads as curation, not absence. */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  width: 100%; height: 100%;
}
.ph--tone-1 { background: var(--c-bone); }
.ph--tone-2 { background: #E7E1D6; }                /* warm parchment */
.ph--tone-3 { background: #E2E4DD; }                /* olive-washed grey */
.ph--tone-4 { background: #E9E3DB; color-scheme: light; } /* stone blush */
.ph__eyebrow {
  font-family: var(--font-label); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--c-stone);
}
.ph__initial {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1;
  color: var(--c-graphite); opacity: .35;
}

/* --- Guide card ---------------------------------------------------------- */
.guide-card { display: flex; flex-direction: column; }
.guide-card__media {
  aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: var(--space-2);
  background: var(--c-bone);
}
.guide-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.guide-card:hover .guide-card__media img { transform: scale(1.03); }
.guide-card__kicker {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--c-bronze);
}
.guide-card__title {
  font-family: var(--font-display); font-size: var(--fs-xl);
  line-height: var(--lh-heading); margin: var(--space-1) 0;
}
.guide-card__title a:hover { color: var(--c-bronze); }
.guide-card__excerpt { color: var(--c-graphite); font-size: var(--fs-sm); margin: 0; }

/* --- Homepage ------------------------------------------------------------ */
.home-hero { padding-top: 80px; padding-bottom: var(--space-7); }
.home-hero__grid {
  display: grid; grid-template-columns: 60fr 40fr; gap: 72px;
  align-items: center;
  min-height: 78vh;
}
.home-hero__copy { max-width: 600px; }
.home-hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-hero);
  font-weight: 500;
  max-width: 13ch;   /* commanding 2–3 line stack for real editor headlines
                        (the brief's 10ch over-stacks longer titles) */
  text-wrap: balance;
  margin-block: var(--space-3) var(--space-3);
}
.home-hero__standfirst {
  color: var(--c-graphite); font-size: var(--fs-lg);
  line-height: 1.5; max-width: 46ch;
}
.home-hero__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-bone); }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 860px) {
  .home-hero__grid { grid-template-columns: 1fr; min-height: 0; gap: var(--space-4); }
  .home-hero__media { order: -1; aspect-ratio: 3 / 2; }
}

.category-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.category-tile {
  border: var(--hairline); background: var(--c-ivory);
  padding: var(--space-4);
  display: flex; align-items: baseline; justify-content: space-between;
  transition: border-color var(--dur) var(--ease);
}
.category-tile:hover { border-color: var(--c-bronze); }
.category-tile h3 { margin: 0; font-size: var(--fs-xl); }
.category-tile .category-tile__arrow { color: var(--c-stone); transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.category-tile:hover .category-tile__arrow { color: var(--c-bronze); transform: translateX(4px); }
@media (max-width: 700px) { .category-tiles { grid-template-columns: 1fr 1fr; } }

.trust-strip {
  border-block: var(--hairline);
  padding-block: var(--space-4);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
}
.trust-strip__claim { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--tracking-card); margin: 0; }
.trust-strip__copy { color: var(--c-graphite); font-size: var(--fs-base); line-height: 1.6; margin: 0; max-width: 56ch; }

/* --- Hub headers (problem / section / guide) ----------------------------- */
.hub-header { padding-block: var(--space-6) var(--space-4); }
.hub-header h1 { max-width: 16ch; margin-bottom: var(--space-2); }
.hub-header p { max-width: 52ch; color: var(--c-graphite); font-size: var(--fs-lg); margin: 0; }
.hub-header__meta { color: var(--c-stone); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* --- Footer -------------------------------------------------------------- */
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5);
  align-items: start; margin-bottom: var(--space-4);
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.site-footer__nav a { font-size: var(--fs-sm); color: var(--c-graphite); }
.site-footer__nav a:hover { color: var(--c-bronze); }
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --- Header row 1: visible search, icon actions, auth, market ------------ */
.site-header__search { flex: 1; max-width: 420px; }
/* Actions pin to the right edge; the flexible gap lives between search and actions. */
.site-header__row1 .site-actions { margin-left: auto; }
.site-header__search .site-search {
  border: var(--hairline); border-radius: var(--radius-sm);
  padding-inline: var(--space-2) var(--space-1);
  transition: border-color var(--dur-fast) var(--ease);
}
.site-header__search .site-search:focus-within { border-color: var(--c-bronze); }
.site-header__search .site-search__input {
  width: 100%; flex: 1; opacity: 1;
  padding: var(--space-1) 0; border-bottom: none;
}

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  color: var(--c-graphite);
  transition: color var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--c-bronze); }

.site-actions__saved-mark { font-size: 20px; line-height: 1; }
.site-actions .saved-count {
  position: absolute; top: 2px; right: 0; margin: 0;
}

.btn--compact {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs);
}
.site-actions__market {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  color: var(--c-stone);
  white-space: nowrap;
  cursor: help;
}

/* --- Notifications bell --------------------------------------------------- */
.notif { position: relative; }
.notif__dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-bronze);
}
.notif__panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 340px; max-height: 60vh; overflow-y: auto;
  background: var(--c-ivory);
  border: var(--hairline); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgb(26 24 22 / 0.08);
  padding: var(--space-2);
  z-index: var(--z-overlay);
  text-transform: none; letter-spacing: 0;
}
.notif__head {
  font-family: var(--font-label); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--c-stone); margin: 0 0 var(--space-1); padding: var(--space-1);
}
.notif__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  padding: var(--space-1);
  font-size: var(--fs-sm); color: var(--c-ink);
}
.notif__item:hover { background: var(--c-bone); }
.notif__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__move { white-space: nowrap; color: var(--c-success); }
.notif__move del { color: var(--c-stone); margin-right: 4px; }
.notif__empty { margin: 0; padding: var(--space-2); font-size: var(--fs-sm); color: var(--c-graphite); }

.mobile-panel__meta {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-sm);
}

/* --- Header search (CSS-expanding, zero JS) ------------------------------ */
.site-search { display: flex; align-items: center; position: relative; }
.site-search__input {
  width: 0; opacity: 0; padding: 0; border: none;
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-ink);
  background: transparent; border-bottom: 1px solid var(--c-mist);
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-search:focus-within .site-search__input,
.site-search__input:not(:placeholder-shown) {
  width: 200px; opacity: 1; padding: var(--space-1) 0;
  outline: none; border-bottom-color: var(--c-bronze);
}
.site-search__submit {
  background: none; border: none; cursor: pointer;
  color: var(--c-graphite); padding: var(--space-1);
  display: inline-flex; align-items: center;
  transition: color var(--dur-fast) var(--ease);
}
.site-search__submit:hover { color: var(--c-bronze); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Mega menu (desktop) ------------------------------------------------- */
.site-nav li.has-mega { position: static; }

.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--c-ivory);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  box-shadow: 0 18px 32px rgb(26 24 22 / 0.06);
  z-index: var(--z-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.site-nav li.has-mega:hover > .mega,
.site-nav li.has-mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-6);
  padding-block: var(--space-4) var(--space-5);
}
.mega__head {
  font-family: var(--font-label);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-stone);
  margin: 0 0 var(--space-2);
}
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li { margin-bottom: var(--space-2); }
.mega__col a {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--c-ink);
  text-transform: none;
  letter-spacing: 0;
}
.mega__col a:hover { color: var(--c-bronze); }
.mega__all {
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-bronze) !important;
}
.mega__col--edit ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
}
.mega__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-stone);
  margin-bottom: 2px;
}
@media (max-width: 980px) { .mega__col--edit ul { grid-template-columns: 1fr; } }

/* --- Mobile nav toggle + panel ------------------------------------------- */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; position: relative; padding: 0;
}
.nav-toggle__bar {
  display: block; width: 22px; height: 1.5px; background: var(--c-ink);
  margin: 5px auto; transition: transform var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-panel {
  position: fixed; inset: 72px 0 0 0;
  background: var(--c-ivory);
  z-index: calc(var(--z-nav) - 1); /* below the sticky header so the ✕ stays reachable */
  overflow-y: auto;
  padding-block: var(--space-4);
  border-top: var(--hairline);
}
.mobile-panel .site-search { margin-bottom: var(--space-4); }
.mobile-panel .site-search__input { width: 100%; opacity: 1; padding: var(--space-1) 0; flex: 1; }
.mobile-panel__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-panel__nav a {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  line-height: 1.2; color: var(--c-ink);
}
.mobile-panel__nav a:hover { color: var(--c-bronze); }
.mobile-panel__saved {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
  font-size: var(--fs-lg) !important;
  color: var(--c-bronze) !important;
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  /* Search, auth and market live in the panel on mobile; bell + ◇ stay. */
  .site-header__search,
  .site-actions__auth,
  .site-actions__market { display: none; }
  .notif__panel { position: fixed; left: var(--space-2); right: var(--space-2); top: 76px; width: auto; }
}
@media (min-width: 769px) {
  .mobile-panel { display: none !important; }
}

/* --- Search results ------------------------------------------------------- */
.search-results__count { color: var(--c-stone); font-size: var(--fs-sm); }
.search-empty { max-width: var(--prose-max); }

/* --- Pagination ------------------------------------------------------------ */
.pagination { margin-top: var(--space-5); }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  border-top: var(--hairline); padding-top: var(--space-3);
  font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.pagination .page-numbers {
  color: var(--c-graphite); padding: var(--space-1);
}
.pagination .page-numbers.current {
  color: var(--c-bronze); border-bottom: 1px solid var(--c-bronze);
}
.pagination a.page-numbers:hover { color: var(--c-bronze); }

/* --- Prose product embeds ([lys_products]) -------------------------------- */
.l-prose .embed-products,
.embed-products {
  margin-block: var(--space-4);
}
/* Embeds inside the 680px prose column escape to a wider measure */
.l-prose .embed-products {
  width: min(100%, var(--content-max));
}

/* --- Saved Essentials --------------------------------------------------- */
.product-card__save {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
  background: color-mix(in srgb, var(--c-ivory) 85%, transparent);
  border: none; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer;
  font-size: var(--fs-base); color: var(--c-graphite); line-height: 1;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card__save:hover { color: var(--c-bronze); transform: scale(1.08); }
.product-card__save.is-saved,
[data-save-product].is-saved { color: var(--c-bronze); }

.saved-count {
  display: inline-block; margin-left: 6px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--c-bronze); color: var(--c-white);
  font-size: 11px; line-height: 18px; text-align: center;
  letter-spacing: 0; padding-inline: 4px;
}

/* --- Inline forms (newsletter, alerts) ---------------------------------- */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; position: relative; }
.inline-form input[type="email"] {
  flex: 1 1 240px; max-width: 360px;
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-ink);
  background: var(--c-white); border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.inline-form input[type="email"]:focus { outline: 2px solid var(--c-bronze); outline-offset: 1px; }
.form-done { color: var(--c-success); font-size: var(--fs-base); }
.site-footer__newsletter { margin-bottom: var(--space-5); }

/* --- Inline tab hint (affiliate flow) --------------------------------- */
.lys-tab-hint {
  position: fixed; left: 50%; bottom: var(--space-3); transform: translateX(-50%);
  background: var(--c-ink); color: var(--c-ivory); font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  z-index: var(--z-overlay); max-width: 90vw;
}
.lys-affiliate-fallback { display: inline-block; margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--c-bronze); }