/* =========================================================================
   Jimmy's Superstore — stylesheet
   Palette: logo black + logo red + logo gold on white. Flat shadows, no glow.
   Motion: typographic only (letter stagger, typewriter, text marquee).
   ========================================================================= */

:root {
  /* Jimmy's Superstore brand palette, pulled from the shop logo */
  --ink: #0b0b0b; /* logo black */
  --ink-soft: #2b2b2b;
  --muted: #6e6e6e;
  /* 6.1:1 on --red-wash, 6.4:1 on white. --muted is 4.49:1 on --red-wash,
     a hair under the 4.5:1 AA floor, so tinted panels use this instead. */
  --muted-strong: #5a5a5a;
  --paper: #ffffff;
  --paper-2: #f5f5f3;
  --white: #ffffff;
  --line: #e5e5e3;
  --line-strong: #d0d0ce;

  --red: #e81820; /* logo red */
  --red-lt: #f2353b;
  --red-deep: #b81118;
  --red-wash: #fdeded;

  --gold: #f8d800; /* logo gold */
  --gold-soft: #ffe94a;
  --gold-deep: #c9a800;
  --gold-wash: #fefad8;

  --ink-2: #0b0b0b; /* dark surface, replaces old navy */
  --ink-3: #1c1c1c;
  --ink-4: #2e2e2e;

  --faint: #767676; /* 4.54:1 on white; for de-emphasised struck-out text */
  --good: #177a55; /* 5.31:1 on white, 4.69:1 on --good-wash; old #2fa37a was 3.16:1 */
  --good-wash: #e6f4ee;

  /* Legacy aliases kept so older rules keep resolving. */
  --deal: #e81820;
  --warn: #c9a800;

  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 26px;

  /* Flat, tight shadows — no glow. */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.07);
  --shadow: 0 2px 6px rgba(11, 11, 11, 0.09);
  --shadow-lg: 0 4px 14px rgba(11, 11, 11, 0.12);

  --max: 1200px;
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* Class-based display rules would otherwise beat the UA [hidden] rule. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 6px;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.dim {
  opacity: 0.28;
}

.good {
  color: var(--good);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 60;
}

.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--white);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
}

.wrap-narrow {
  max-width: 720px;
}

/* ------------------------------------------------ utility bar + header */

.utility {
  background: var(--ink);
  color: rgba(255, 253, 249, 0.82);
  font-size: 0.82rem;
}

.utility-inner {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.42rem 0;
}

.utility-phone {
  font-weight: 600;
  color: #F8D800;
  white-space: nowrap;
}

.utility-phone:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ announcement */

.announcement {
  background: linear-gradient(90deg, var(--ink-2), var(--ink-3));
  color: #FFFFFF;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.announcement a {
  color: #F8D800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 253, 249, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.02rem;
  line-height: 1.15;
}

.logo-img {
  height: 68px;
  width: auto;
  display: block;
  border-radius: 12px;
  flex: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.header-search {
  flex: 1;
  max-width: 22rem;
  margin-left: 0.5rem;
}

.header-search .search-field {
  width: 100%;
}

.header-search .search-field input {
  width: 100%;
  min-width: 0;
}

.badge-saved {
  background: var(--red);
  color: #0B0B0B;
}

.saved-btn:hover {
  color: var(--deal);
}

.cart-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.nav {
  display: flex;
  gap: 0.25rem;
  font-weight: 500;
}

.nav a {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.nav a:hover {
  background: var(--paper-2);
}

.nav a[aria-current="page"] {
  background: var(--ink-2);
  color: #fff;
}

.icon-btn {
  position: relative;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.icon-btn:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.icon-btn:active {
  transform: scale(0.95);
}

.cart-btn {
  margin-left: 0.5rem;
}

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--deal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 0.28rem;
  border: 2px solid var(--white);
}

.menu-btn {
  display: none;
  margin-left: auto;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  /* overflow: hidden was preventing position: sticky on .hero-inner from working,
     leaving a blank 100vh runway. Use clip instead so the sticky header works and
     the cross-fade scroll is still driven by real scroll position. */
  overflow: clip;
  border-bottom: 1px solid var(--line);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  padding: 4rem 0 3.5rem;
  align-items: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--red-deep);
  margin-bottom: 0.8rem;
}

.kicker.light {
  color: var(--gold);
}

.lead {
  color: var(--muted);
  font-size: 1.09rem;
  max-width: 40rem;
}

.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  margin-bottom: 0.45em;
  /* Split chars are inline-blocks; keep the line box tidy. */
  line-height: 1.06;
}

.hero-rotate {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.hero-rotate .tw {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 1px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.3rem 0 1.6rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.87rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.pill.good {
  background: var(--good-wash);
  border-color: #bfe3d3;
  color: #0f5f46;
}

.pill.warn {
  background: #fdf0dc;
  border-color: #f0d3a4;
  color: var(--warn);
}

.pill.info {
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.985);
}

.btn-primary {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
}

.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.btn-primary.in-basket {
  background: var(--good);
  border-color: var(--good);
  color: #ffffff;
}

.btn-ghost {
  background: var(--white);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

.btn-ghost-inv {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.btn-ghost-inv:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn-lg {
  padding: 0.9rem 1.5rem;
  font-size: 1.02rem;
}

.btn-block {
  width: 100%;
}

.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding: 0;
  margin: 1.6rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-trust .icon {
  color: var(--good);
}

.hero-card {
  position: relative;
  background: var(--ink-2);
  color: #f6efe3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  opacity: 0.9;
}

.hero-card .card-copy {
  padding: 1.3rem 1.5rem 1.6rem;
}

.hero-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.muted-light {
  color: rgba(246, 239, 227, 0.72);
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

.hero-card .price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: #F8D800;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 0.9rem;
}

.hero-card .price-row a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------- hero card carousel --- */

/* The hero card is now a simple auto-advancing carousel. No scroll runway needed. */
.hero-card {
  /* The card itself handles layout; the slides cross-fade in place. */
}

.hero-slides {
  position: relative;
  min-height: 448px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: var(--o, 0);
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}

.hero-slide.is-active {
  pointer-events: auto;
  opacity: 1 !important;
}

.hero-slide img {
  flex: none;
  width: 100%;
  height: 252px;
  object-fit: cover;
}

.hero-slide .card-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 0 0;
  min-height: 0; /* allows flex child to shrink below content size */
  overflow: hidden;
}

.hero-slide .card-copy > * {
  flex-shrink: 0;
}

.hero-slide .muted-light {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  z-index: 2;
}

.hero-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(246, 239, 227, 0.45);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.hero-dot:hover::before {
  background: rgba(246, 239, 227, 0.8);
}

.hero-dot.is-active::before {
  background: var(--gold);
  transform: scale(1.45);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 999px;
}

/* Dots are absolutely positioned on the slide, not inside card-copy */

/* Mobile: adjust carousel for smaller screens */
@media (max-width: 760px) {
  .hero-slide img {
    height: 220px;
  }

  .hero-slide .card-copy {
    padding: 0.875rem 0 0;
  }

  .hero-dots {
    bottom: 0.35rem;
  }

  .hero-dot {
    width: 24px;
    height: 24px;
  }

  .hero-dot::before {
    width: 6px;
    height: 6px;
  }
}

/* Reduced motion: instant switches, no fade. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------- hero marquee --- */

/* The gold strip under the hero. It used to scroll sideways forever; now it
   slides in from the right the first time you scroll to it, stays where it
   lands, and ripples in place. */

/* ------------------------------------------------------- highlights grid --- */

/* ------------------------------------------------------ home slide-up --- */

/* Initial state: content starts below the viewport, hidden by intro overlay. */
#app {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* When intro ends, slide the content up into place. */
.intro-done #app {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------- sections */

.section {
  padding: 2.6rem 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.section-head h2 {
  margin-bottom: 0;
}

.section-head .kicker {
  margin-bottom: 0.3rem;
}

.link-arrow {
  font-weight: 600;
  color: var(--red-deep);
  white-space: nowrap;
}

.link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------- category grid */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
}

.cat-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.2s var(--ease), box-shadow 0.24s var(--ease),
    border-color 0.2s var(--ease);
  overflow: hidden;
}

/* The arrow is wrapped so it can slide on its own. The count text stays put. */
.cat-arrow {
  display: inline-block;
  transition: transform 0.22s var(--ease);
}

/* Hover is the card lifting and the arrow nudging right. There used to be a red
   line scaling in along the bottom edge; it read as a progress bar and said
   nothing about the card being a link. */
.cat-card:active {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.cat-card:active .cat-arrow {
  transform: translateX(4px);
}

/* :hover sticks on touch after a tap, so it is gated and :active covers those
   screens instead. */
@media (hover: hover) {
  .cat-card:hover {
    transform: translateY(-3px);
    border-color: var(--ink);
    box-shadow: var(--shadow-lg);
  }

  .cat-card:hover .cat-arrow {
    transform: translateX(4px);
  }
}

.cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--red-wash);
  color: var(--red-deep);
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
}

.cat-icon .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.cat-sub {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.cat-count {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red-deep);
}

/* ----------------------------------------------------------------- deals */

.deals-section {
  padding-top: 0.5rem;
}

.deal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.deal {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.deal:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.deal-media {
  position: relative;
  background: var(--paper-2);
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.deal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deal-media .badge-save {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
}

.deal-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem 1rem;
}

.deal-copy strong {
  font-size: 0.95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.deal-price {
  font-weight: 700;
  color: var(--deal);
  font-size: 1.05rem;
}

.deal-price s {
  color: var(--faint);
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 0.2rem;
}

/* --------------------------------------------------------- trust strip */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  padding: 0.4rem 0 0.6rem;
}

.trust-strip article {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.trust-strip article:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.trust-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--ink-2);
  color: var(--red-lt);
  display: grid;
  place-items: center;
}

.trust-icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.trust-strip div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trust-strip strong {
  font-size: 0.95rem;
}

.trust-strip span:last-child {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.badge-save {
  align-self: flex-start;
  background: var(--deal);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

/* --------------------------------------------------------------- product */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1.1rem;
}

.product {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}

.product:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.product-media {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.badge-note {
  background: rgba(11, 11, 11, 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.save-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.94);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.18s var(--ease);
    background 0.18s var(--ease);
}

.save-btn .icon,
.save-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.save-btn:hover {
  color: var(--red);
}

.save-btn.on {
  background: var(--deal);
  border-color: var(--deal);
  color: #fff;
}

.save-btn.on svg path {
  fill: currentColor;
}

.product-body {
  padding: 0.95rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--red-deep);
}

.product-name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.product-name:hover {
  color: var(--red-deep);
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.rating .stars {
  color: var(--red);
  letter-spacing: -0.05em;
}

.rating-num {
  font-weight: 700;
  color: var(--ink);
}

.price {
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.price-lg {
  font-size: 1.9rem;
  margin: 0.6rem 0 0.9rem;
}

.compare {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.88rem;
}

.save-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--red-deep);
  background: var(--red-wash);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

.product-foot {
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-foot .btn {
  width: 100%;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
}

/* img fallback */
.img-broken img {
  display: none;
}

.img-broken::after {
  content: "🛒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  background: repeating-linear-gradient(
    45deg,
    var(--paper-2),
    var(--paper-2) 12px,
    var(--paper) 12px,
    var(--paper) 24px
  );
}

/* ------------------------------------------------------------------ why */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.why-grid article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.2rem;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.why-grid article:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.why-grid .icon {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--red-deep);
  margin-bottom: 0.6rem;
}

.why-grid h3 {
  margin-bottom: 0.3rem;
}

.why-grid p {
  color: var(--muted);
  font-size: 0.93rem;
  margin: 0;
}

/* -------------------------------------------------------------- reviews */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.quote:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.quote-stars {
  color: var(--red);
  letter-spacing: -0.05em;
}

.quote h3 {
  font-size: 1.02rem;
  margin: 0;
}

.quote p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

.quote-foot {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}

.quote-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.quote-who {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}

.quote-who strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-who span {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.quote-src {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--red-deep);
  background: var(--red-wash);
  border: 1px solid rgba(232, 24, 32, 0.26);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

.quote-src .icon {
  width: 0.8rem;
  height: 0.8rem;
}

/* ------------------------------------------- reviews: show more + form */

.reviews-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.reviews-more .btn {
  /* The control is a real button, so reset the link-ish button styling. */
  cursor: pointer;
}

.reviews-more-note {
  margin: 0;
  font-size: 0.82rem;
  /* Not .dim: that is opacity .28, which lands at 1.91:1 on white and
     fails WCAG AA. --muted measures 5.1:1. */
  color: var(--muted);
  opacity: 1;
}

/* ------------------------------------------------------------- the form -- */

.lead-tight {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.review-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 1.8rem);
}

.review-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.review-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.review-form .field > span,
.review-form .field > legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}

/* The optional hint inside a label. .dim is opacity .28, which measures
   1.45:1 on white and fails WCAG AA; --muted is 5.1:1. */
.review-form .field em {
  color: var(--muted);
  opacity: 1;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}

.review-form input[type="text"],
.review-form textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.75rem;
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.review-form textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.55;
}

.review-form input:focus,
.review-form textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 32, 0.16);
}

.field-wide {
  grid-column: 1 / -1;
}

/* Star picker: real radio inputs, hidden behind the glyphs. */
.review-stars {
  grid-column: 1 / -1;
}

.star-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.star-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.star-pick span {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
  padding: 0.15rem;
  transition: color 0.14s var(--ease), transform 0.14s var(--ease);
}

.star-pick:hover span {
  color: var(--gold);
}

/* Highlight every option up to the checked one, so the row reads as a scale. */
.star-pick input:checked + span {
  color: var(--gold);
}

.star-pick input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.review-form-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.review-form-foot .btn {
  cursor: pointer;
}

.review-form-foot .btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.review-form-msg {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}

.review-form-msg.is-ok {
  color: var(--green, #16794a);
}

.review-form-msg.is-bad {
  color: var(--red-deep);
}

/* Honeypot: off-screen, not display:none, so bots still find it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .review-form-grid {
    grid-template-columns: 1fr;
  }

  .review-form-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .review-form-foot .btn {
    width: 100%;
  }
}

/* ----------------------------------------------------------- visit band */

.visit-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.2rem;
  align-items: center;
  background:
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  color: #f6efe3;
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  box-shadow: var(--shadow-lg);
}

.visit-band h2 {
  color: #fff;
  margin-bottom: 0.4rem;
}

.visit-band .actions {
  margin-top: 1.3rem;
}

.visit-hours {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}

.visit-hours h3 {
  color: #F8D800;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------- hours */

.hours {
  display: grid;
  gap: 0.1rem;
  font-size: 0.92rem;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  border-bottom: 1px dashed var(--line);
}

.visit-hours .hours div {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: rgba(246, 239, 227, 0.9);
}

.hours div.today {
  background: var(--red-wash);
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: transparent;
}

.visit-hours .hours div.today {
  background: rgba(242, 53, 59, 0.16);
  color: #ffd694;
  font-weight: 600;
}

.hours em {
  font-style: normal;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red-deep);
  margin-left: 0.35rem;
}

/* ----------------------------------------------------------- page hero */

.page-hero {
  padding: 3rem 0 1.4rem;
}

.page-hero h1 {
  margin-bottom: 0.3em;
}

/* ------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 0.44rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.chip .icon {
  width: 1rem;
  height: 1rem;
}

.chip:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.chip.active {
  background: var(--ink-2);
  color: #fff;
  border-color: var(--ink-2);
}

.chip.active .icon {
  color: var(--red-lt);
}

.chip-n {
  font-size: 0.72rem;
  opacity: 0.6;
  font-weight: 600;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.search-field:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 32, 0.22);
}

.search-field .icon {
  color: var(--muted);
}

.search-field input {
  border: 0;
  background: none;
  outline: none;
  min-width: 11rem;
  padding: 0.15rem 0;
}

/* Search suggestions dropdown */
.search-field {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
}

.search-suggestions[hidden] {
  display: none;
}

.suggestions-section {
  border-bottom: 1px solid var(--line-soft);
}

.suggestions-section:last-child {
  border-bottom: none;
}

.suggestions-label {
  display: block;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  gap: 0.75rem;
  transition: background 0.12s var(--ease);
}

.suggestion-item:hover {
  background: var(--paper-2);
}

.suggestion-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.suggestion-text {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-category {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.suggestion-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

.suggestion-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}

.suggestion-delete:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.suggestion-delete .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

/* Slight adjustment for recent searches section */
.suggestion-item.recent {
  padding-left: 0.75rem;
  padding-right: 0.35rem;
}

@media (max-width: 560px) {
  .search-suggestions {
    left: -0.5rem;
    right: -0.5rem;
    max-height: 280px;
  }
}

.sort {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.toggle input {
  accent-color: var(--red);
  width: 1.05rem;
  height: 1.05rem;
}

.results-line {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
}

/* -------------------------------------------------------------- product detail */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 1.8rem;
}

.breadcrumb a:hover {
  color: var(--red-deep);
  text-decoration: underline;
}

.breadcrumb span[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: start;
}

.detail-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

.detail-copy h1 {
  margin-bottom: 0.3em;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0;
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  background: var(--paper-2);
  color: var(--ink-soft);
}

.stock-pill.ok {
  background: var(--good-wash);
  color: #0f5f46;
}

.stock-pill.mid {
  background: #fdf3e3;
  color: var(--warn);
}

.stock-pill.low {
  background: #fdeceb;
  color: var(--deal);
}

.detail-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1.4rem 0 0.6rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}

.qty button {
  border: 0;
  background: none;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.16s var(--ease);
}

.qty button:hover {
  background: var(--paper-2);
}

.qty span {
  min-width: 2rem;
  text-align: center;
  font-weight: 600;
}

.qty-lg button {
  width: 46px;
  height: 46px;
  font-size: 1.25rem;
}

.save-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--white);
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.save-inline:hover {
  border-color: var(--deal);
  color: var(--deal);
}

.save-inline.on {
  background: var(--deal);
  border-color: var(--deal);
  color: #fff;
}

.detail-notes {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.detail-notes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-notes .icon {
  color: var(--red-deep);
}

.detail-notes a {
  color: var(--red-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- split/panel */

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.8rem;
  align-items: start;
}

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--shadow-sm);
}

.panel + .panel {
  margin-top: 1.1rem;
}

.panel h2 {
  font-size: 1.25rem;
}

.summary {
  position: sticky;
  top: 6.5rem;
}

.summary-rows {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.93rem;
}

.summary-rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.summary-rows .total {
  border-top: 1px solid var(--line-strong);
  padding-top: 0.7rem;
  margin-top: 0.3rem;
  font-weight: 700;
  font-size: 1.15rem;
  font-family: "Fraunces", serif;
}

.summary .btn {
  margin-top: 0.4rem;
}

.fineprint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.8rem 0 0;
  display: block;
}

.fineprint .icon {
  vertical-align: -0.15em;
}

/* ---------------------------------------------------------------- cart */

.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.cart-line img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--paper-2);
}

.cart-line-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cart-line-price {
  font-size: 0.88rem;
  color: var(--muted);
}

.cart-line-price s {
  color: var(--faint);
  opacity: 1;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.cart-line-total {
  font-size: 1.05rem;
  white-space: nowrap;
}

.cart-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  flex-wrap: wrap;
}

.linkish {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.88rem;
}

.linkish:hover {
  color: var(--deal);
}

.empty-block {
  text-align: center;
  padding: 2.5rem 1rem;
}

.empty-emoji {
  font-size: 2.6rem;
  margin: 0 0 0.4rem;
}

.empty-block h2 {
  margin-bottom: 0.3rem;
}

.empty-block p {
  color: var(--muted);
}

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- forms */

.form {
  display: grid;
  gap: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.form input,
.form textarea,
.form select {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.72rem 0.85rem;
  background: var(--paper);
  font-weight: 400;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background 0.18s var(--ease);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 32, 0.22);
}

.checkline {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400 !important;
  font-size: 0.86rem;
  color: var(--muted);
}

.checkline input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--red);
  flex: none;
}

/* --------------------------------------------------------------- receipt */

.receipt {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 1.4rem 0;
  box-shadow: var(--shadow);
}

.receipt-head {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 1rem;
  border-bottom: 2px dashed var(--line-strong);
  font-size: 0.85rem;
  color: var(--muted);
}

.receipt-head strong {
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  color: var(--ink);
}

.receipt-rows {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 0;
  font-size: 0.93rem;
}

.receipt-rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 2px dashed var(--line-strong);
  font-weight: 700;
  font-family: "Fraunces", serif;
  font-size: 1.25rem;
}

.receipt-foot {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.receipt-foot div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.receipt-foot span {
  color: var(--muted);
}

/* --------------------------------------------------------------- facts */

.facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.93rem;
}

.facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--ink-soft);
}

.facts .icon {
  color: var(--red-deep);
  margin-top: 0.2rem;
}

.facts a {
  color: var(--red-deep);
  font-weight: 600;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.9rem;
}

.contact-list li {
  display: flex;
  gap: 0.7rem;
}

.contact-list .icon {
  color: var(--red-deep);
  margin-top: 0.25rem;
}

.contact-list div {
  display: grid;
  gap: 0.1rem;
}

.contact-list span {
  color: var(--muted);
  font-size: 0.88rem;
}

.contact-list a {
  color: var(--red-deep);
  font-weight: 600;
}

/* ------------------------------------------------------------ busy chart */

.busy-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 0.8rem 0 0;
}

.busy-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  height: 100%;
}

.busy-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--line-strong);
  min-height: 4px;
  transition: height 0.5s var(--ease), background 0.2s var(--ease);
}

.busy-bar.calm {
  background: #35a37b;
}

.busy-bar.warm {
  background: var(--gold);
}

.busy-bar.hot {
  background: var(--red);
}

.busy-col span {
  font-size: 0.65rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ map */

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 0.9rem;
  background: var(--paper-2);
}

.map-wrap iframe {
  width: 100%;
  height: 240px;
  border: 0;
  display: block;
  filter: saturate(0.9);
}

/* ------------------------------------------------------------------ faq */

.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 60rem;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  transition: border-color 0.18s var(--ease);
}

.faq-item[open] {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--red-deep);
  line-height: 1;
  flex: none;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------- footer */

/* Scoped to the page footer so the <footer> inside each review card is
   unaffected — a bare `footer` selector would paint those black. */
body > footer {
  background: var(--ink-2);
  color: rgba(255, 255, 255, 0.82);
  padding: 3rem 0 1.6rem;
  margin-top: 3rem;
}

.foot-grid {
  display: grid;
  /* minmax(0, ...) not 1fr: an <input> reports a ~219px intrinsic
     min-content size, and a 1fr track floors itself at min-content. That
     pushed the footer to ~341px and made the whole page scroll sideways on
     320px phones. Zero lets the track shrink and the flex row below it
     compress the input. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
}

.foot-grid > * {
  min-width: 0;
}

body > footer strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  color: #fff;
}

body > footer p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.6rem;
}

body > footer a {
  color: #F8D800;
}

body > footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tiny {
  opacity: 0.85;
  font-size: 0.82rem;
  margin: 0;
}

.credit-made {
  margin: 0;
  white-space: nowrap;
}

.credit-made a {
  color: var(--gold);
  font-weight: 600;
}

.foot-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
}

.foot-legal .tiny {
  max-width: 34rem;
}

@media (max-width: 640px) {
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .foot-legal {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------------------------------------------------------- newsletter */

.newsletter {
  margin-top: 1.2rem;
}

.newsletter label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.5rem;
}

.newsletter-row {
  display: flex;
  gap: 0.5rem;
}

.newsletter-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-radius: 999px;
  padding: 0.62rem 0.95rem;
  outline: none;
}

.newsletter-row input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.newsletter-row input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 32, 0.22);
}

.newsletter-row .btn {
  padding: 0.62rem 1.1rem;
}

.newsletter small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.foot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.foot-badges span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}

.foot-nav {
  display: flex;
  /* Wraps, because the nav now carries the two policy links too, and seven
     items on one line pushed the footer wider than a small phone. */
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  background: var(--ink-2);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.92rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
  z-index: 60;
  box-shadow: var(--shadow-lg);
  max-width: calc(100% - 2rem);
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.good {
  background: var(--good);
}

.toast.warn {
  background: var(--warn);
}

/* =========================================================================
   Typographic motion — the only animation on the site.
   No card fades, no slides, no scroll reveals. Text moves, nothing else glows.
   ========================================================================= */

/* 1. Letter stagger — headings tagged with data-split rise word by word. */

.split-word {
  display: inline-block;
  white-space: nowrap;
}

.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  animation: char-rise 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 26ms);
}

@keyframes char-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 2. Typewriter — a caret blinks after a cycling word. */

.tw {
  color: var(--red);
}

.tw-caret {
  display: inline-block;
  width: 3px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--red);
  animation: caret-blink 1s steps(2, start) infinite;
  vertical-align: -0.06em;
  height: 1em;
}

.tw-caret.is-done {
  animation: none;
  background: transparent;
}

@keyframes caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 3. Underline sweep — text links and ghost buttons wipe a line in. */

.link-arrow,
.foot-nav a,
.foot-grid a:not(.btn),
.nav a {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.28s var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible,
.foot-nav a:hover,
.foot-nav a:focus-visible,
.foot-grid a:not(.btn):hover,
.foot-grid a:not(.btn):focus-visible,
.nav a:hover,
.nav a:focus-visible {
  background-size: 100% 2px;
}

.nav a[aria-current="page"] {
  background-size: 0% 2px;
}

/* 4. Text marquee — the gold ticker strip. */

/* 5. Respect reduced motion: no letters fly, no caret blinks, ticker stops. */

@media (prefers-reduced-motion: reduce) {
  .split-char {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .tw-caret,
  .tw-caret.is-done {
    animation: none;
  }

  /* The gold strip: no ripple, and it appears rather than sliding in.
     Without the explicit reset it would be left stuck at opacity 0. */
  .marquee-track {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .marquee-track span {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero-inner,
  .split,
  .product-detail,
  .visit-band {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    padding: 2.8rem 0 2.4rem;
    gap: 2rem;
  }

  .visit-band {
    padding: 1.8rem;
    gap: 1.5rem;
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary {
    position: static;
  }

  .nav {
    display: none;
  }

  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 0.8rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    gap: 0.2rem;
  }

  .nav.open a {
    padding: 0.7rem 1rem;
  }

  .menu-btn {
    display: inline-flex;
  }

  .header-search {
    max-width: none;
  }

  .utility-left {
    display: none;
  }
}

/* Phones: keep search visible by giving it a row of its own under the logo,
   rather than hiding it — shoppers on a phone search most. */
@media (max-width: 760px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.6rem 0;
  }

  .header-search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    margin-left: 0;
  }

  .header-search .search-field {
    padding: 0.5rem 0.9rem;
  }

  .header-search .search-field input {
    min-width: 0;
  }

  .header-actions {
    margin-left: auto;
  }

  .cart-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .wrap,
  .header-inner {
    width: calc(100% - 1.6rem);
  }

  .logo-img {
    height: 52px;
    border-radius: 10px;
  }

  .quote-foot {
    padding-top: 0.75rem;
  }

  .quote-avatar {
    width: 30px;
    height: 30px;
  }

  .quote-src {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }

  .product-body {
    padding: 0.75rem 0.75rem 0.85rem;
  }

  .product-name {
    font-size: 0.9rem;
  }

  .price {
    font-size: 0.98rem;
  }

  .form-row,
  .foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-line {
    grid-template-columns: 64px 1fr;
  }

  .cart-line img {
    width: 64px;
    height: 64px;
  }

  .cart-line-total {
    grid-column: 2;
    justify-self: start;
  }

  .section {
    padding: 1.8rem 0;
  }

  .deal-media img {
    width: 100%;
    height: 100%;
  }

  .detail-buy {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-buy .btn,
  .detail-buy .save-inline {
    width: 100%;
  }

  .qty-lg {
    align-self: flex-start;
  }
}

@media (max-width: 380px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .logo-img {
    height: 44px;
    border-radius: 8px;
  }

  .quote-foot {
    gap: 0.5rem;
  }

  .quote-avatar {
    width: 28px;
    height: 28px;
  }
}

/* ------------------------------------------------------------ motion pref */

/* --------------------------------------------------------------- print */

@media print {
  .site-header,
  .announcement,
  footer,
  .toast,
  .actions,
  .fineprint {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .receipt {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .page-hero {
    padding: 0;
  }
}

/* =========================================================================
   Shop assistant - floating chat panel.
   Fixed bottom-right; the toast (bottom-centre) steps aside while it's open.
   ========================================================================= */

.bot-launch {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), background 0.18s var(--ease);
}

.bot-launch.is-ready {
  opacity: 1;
  transform: none;
}

.bot-launch:hover {
  background: var(--ink);
}

.bot-launch-icon {
  width: 26px;
  height: 26px;
}

.bot-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--paper);
}

.bot-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 5.4rem;
  z-index: 61;
  width: min(372px, calc(100vw - 2.2rem));
  height: min(560px, calc(100dvh - 7.5rem));
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  /* Visibility, not just opacity. While closed, the close button, input and
     suggestion chips were still in the tab order even though the panel was
     marked aria-hidden, which axe reports as "aria-hidden contains focusable
     descendants". Hiding it properly also drops it from the a11y tree. The
     delayed transition lets the fade-out finish before it snaps away. */
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0s linear 0.22s;
}

.bot-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0s;
}

/* --------------------------------------------------------------- header */

.bot-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--ink);
  color: #ffffff;
  flex: none;
}

.bot-head-av {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: "Fraunces", serif;
}

.bot-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.bot-head-text strong {
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}

.bot-head-status {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.bot-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s var(--ease);
}

.bot-close:hover {
  background: var(--red);
}

.bot-close svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------------ log */

.bot-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--paper-2);
}

.bot-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 100%;
}

.bot-msg.bot-user {
  justify-content: flex-end;
}

.bot-av {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.bot-bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 100%;
}

.bot-bubble strong {
  color: var(--ink);
}

/* Inline links in the reply text. .bot-link and .bot-product carry their own
   colours — .bot-link is white-on-red, so it must not inherit this. */
.bot-bubble a:not(.bot-link):not(.bot-product) {
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bot-bubble a.bot-link {
  color: #ffffff;
  text-decoration: none;
}

.bot-msg.bot-user .bot-bubble {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  border-radius: 14px 14px 4px 14px;
}

.bot-msg.bot-user .bot-bubble strong {
  color: #ffffff;
}

/* Keep the reply text tidy while the row is still single-line. */
.bot-msg > .bot-bubble:only-child {
  max-width: 85%;
}

.bot-products,
.bot-reviews,
.bot-links,
.bot-note {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ------------------------------------------------ suggestions above input */

.bot-suggestions {
  flex: none;
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem 0.1rem;
  background: var(--white);
  overflow-x: auto;
  scrollbar-width: none;
}

.bot-suggestions::-webkit-scrollbar {
  display: none;
}

.bot-suggestions[hidden] {
  display: none;
}

.bot-suggest {
  flex: none;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
    color 0.18s var(--ease);
}

.bot-suggest:hover {
  border-color: var(--red);
  background: var(--red-wash);
  color: var(--red-deep);
}

.bot-product {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.bot-product:hover {
  border-color: var(--ink);
  background: var(--paper);
}

.bot-product-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}

.bot-product-meta {
  font-size: 0.74rem;
  color: var(--muted);
}

.bot-reviews blockquote {
  margin: 0;
  padding: 0.5rem 0.65rem;
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.bot-stars {
  color: var(--red);
  font-size: 0.78rem;
  margin-right: 0.2rem;
}

.bot-reviews cite {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--muted);
}

.bot-note {
  font-size: 0.78rem;
  color: var(--muted);
}

.bot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.bot-link:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* --------------------------------------------------------- typing dots */

.bot-dots {
  display: inline-flex;
  gap: 4px;
  padding: 0.15rem 0;
}

.bot-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: bot-dot 1.1s var(--ease) infinite;
}

.bot-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.bot-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes bot-dot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ----------------------------------------------------------------- form */

.bot-form {
  flex: none;
  display: flex;
  gap: 0.45rem;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.bot-form input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.bot-form input::placeholder {
  color: var(--muted);
}

.bot-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 32, 0.18);
}

.bot-send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s var(--ease);
}

.bot-send:hover {
  background: var(--ink);
}

.bot-send svg {
  width: 17px;
  height: 17px;
}

/* Keep the launcher clear of the toast, and vice versa. */
body.bot-open .toast {
  display: none;
}

/* Mobile: the panel becomes a near-full-screen sheet. */
@media (max-width: 640px) {
  .bot-panel {
    right: 0.6rem;
    left: 0.6rem;
    bottom: 4.9rem;
    width: auto;
    height: min(72dvh, calc(100dvh - 6rem));
  }

  .bot-launch {
    right: 0.8rem;
    bottom: 0.8rem;
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bot-launch,
  .bot-panel,
  .bot-product,
  .bot-link,
  .bot-suggest,
  .bot-suggestions,
  .bot-form input {
    transition: none;
  }

  .bot-dots i {
    animation: none;
    opacity: 0.6;
  }
}

/* =========================================================================
   First-visit intro — full-screen video hook, once per session.

   The clip is 1280x720. On a wide viewport it fills edge to edge; on a
   portrait phone object-fit: cover scales it up and crops the sides, which
   keeps the centred logo intact.

   --intro-zoom is an optional trim of the bottom of the frame (1 = none).
   It is left at 1 on purpose. The source clip has a truncated line baked into
   it — "LOADING YOUR NEXT GREAT FAL..." — sitting at 91-92% of the frame
   height. The outro's "EXPLORE MORE" sits at 89-91%. They overlap, so there
   is no cut that removes the typo and keeps the outro: trimming to 1.1 hides
   the typo but slices "EXPLORE MORE" in half, which reads as broken layout.
   Showing the whole frame is the lesser evil. The real fix is to re-render
   the clip without the truncated line; if you do, nothing here needs to
   change.
   ========================================================================= */

body.intro-lock {
  overflow: hidden;
}

.intro {
  --intro-zoom: 1;
  --intro-fade: 0.45s;

  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  opacity: 0;
  transition: opacity var(--intro-fade) var(--ease);
}

.intro[hidden] {
  display: none;
}

.intro.is-in {
  opacity: 1;
}

/* Fade to the shop underneath rather than cutting to it. */
.intro.is-out {
  opacity: 0;
  pointer-events: none;
}

.intro-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Stop the clip from being dragged around on touch devices. */
  touch-action: manipulation;
}

.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Landscape: fill the screen and trim the edges a little. The logo sits
     centre-frame, so a shallow crop on a wide window never touches it. */
  object-fit: cover;
  /* Anchored to the top so --intro-zoom trims the bottom of the frame. */
  transform: scale(var(--intro-zoom));
  transform-origin: center top;
  background: #000;
}

/*
  Portrait: cover would scale a 16:9 clip up by ~3.5x to fill a tall phone
  and slice off both ends of the wordmark. Contain keeps the whole frame;
  the bars above and below are the clip's own black, so they read as part
  of the frame rather than as letterboxing.
*/
@media (orientation: portrait) {
  .intro-video {
    object-fit: contain;
  }
  /* Keep the veil anchored to the bottom of the visible frame. */
  .intro-stage {
    display: grid;
    place-items: center;
  }
}

/* Keeps the skip button legible over the bright gold chevrons at the end. */
.intro-veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.intro-skip {
  position: absolute;
  right: clamp(0.9rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* comfortable touch target */
  padding: 0.6rem 1.15rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.intro-skip:hover,
.intro-skip:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  border-color: #ffffff;
}

.intro-skip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.intro-sound {
  position: absolute;
  left: clamp(0.9rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  font-size: 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.intro-sound .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.intro-sound:hover,
.intro-sound:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  border-color: #ffffff;
}

.intro-sound:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Poster-only fallback: if the clip cannot play, do not show an empty stage. */
.intro--no-video .intro-video {
  display: none;
}

.intro--no-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0b0b0b url("/assets/intro-poster.jpg") center / cover no-repeat;
}

@media (max-width: 640px) {
  .intro-skip {
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    transition: none;
  }
}

/* ------------------------------------------------------- staff login link */

.admin-link {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
}

.admin-link:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--gold);
}

/* =========================================================================
   Offers & deals notifications
   ========================================================================= */

.notify {
  position: relative;
  display: flex;
}

.notify-bell {
  position: relative;
}

.notify-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

/* ---------------------------------------------------------- the dropdown */

.notify-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 70;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(460px, calc(100dvh - 8rem));
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  /* Mirrors the chat panel so a closed dropdown is out of the a11y tree. */
  visibility: visible;
}

.notify-panel[hidden] {
  display: none;
}

.notify-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--white);
}

.notify-panel-head strong {
  font-family: "Fraunces", serif;
  font-size: 1rem;
}

.notify-clear {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
  white-space: nowrap;
}

.notify-clear:hover {
  color: var(--red);
}

.notify-list {
  display: flex;
  flex-direction: column;
}

.notify-empty {
  margin: 0;
  padding: 1.4rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* --------------------------------------------------------- an offer item */

.notify-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.notify-item:last-child {
  border-bottom: 0;
}

.notify-item.is-read {
  background: var(--paper-2);
}

.notify-kind {
  align-self: start;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

.notify-item[data-kind="deal"],
.offer-card[data-kind="deal"] .notify-kind {
  background: var(--red-wash);
  border-color: rgba(232, 24, 32, 0.28);
  color: var(--red-deep);
}

.notify-item[data-kind="offer"],
.offer-card[data-kind="offer"] .notify-kind {
  background: var(--gold-wash);
  border-color: rgba(201, 168, 0, 0.45);
  /* Gold is far too light for text on white; this is the deep tone. */
  color: #6b5600;
}

.notify-item[data-kind="closing"] .notify-kind,
.offer-card[data-kind="closing"] .notify-kind {
  background: #eef1f6;
  border-color: #cfd6e2;
  color: #33405c;
}

.notify-body strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.35;
}

.notify-body p {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.notify-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.notify-until {
  font-size: 0.76rem;
  color: var(--muted);
}

.notify-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 17, 24, 0.35);
}

.notify-link:hover {
  border-bottom-color: var(--red-deep);
}

.notify-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* --------------------------------------------------- home page offers band */

/* The offers band is a carousel: a snapping track with arrows either side.
   Scrolling rather than a transform means swiping works on a phone for free,
   with no drag handling in JS. */
.offers-head-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.carousel-arrows {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.carousel-arrow,
.carousel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* comfortable touch target */
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.carousel-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.carousel-toggle {
  width: 38px;
  height: 38px;
  color: var(--muted);
}

.carousel-toggle svg {
  width: 1rem;
  height: 1rem;
}

.carousel-arrow:hover,
.carousel-toggle:hover {
  background: var(--paper-2);
  border-color: var(--red);
  color: var(--red-deep);
}

.carousel-arrow:focus-visible,
.carousel-toggle:focus-visible,
.carousel-dot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.offers-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* The browser's own smooth scroll would fight the arrow-key handling in JS. */
  scroll-behavior: auto;
  padding-bottom: 0.25rem;
  /* The scrollbar duplicates the arrows and dots, so it is hidden rather than
     left as a second, less obvious control. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.offers-track::-webkit-scrollbar {
  display: none;
}

.offers-track:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 6px;
}

/* One card plus a peek of the next, so it reads as scrollable before anyone
   reaches for the arrows. */
.offers-track > .offer-card {
  flex: 0 0 86%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (min-width: 560px) {
  .offers-track > .offer-card {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (min-width: 880px) {
  .offers-track > .offer-card {
    flex-basis: calc((100% - 2rem) / 3);
  }
}

@media (min-width: 1140px) {
  .offers-track > .offer-card {
    flex-basis: calc((100% - 3rem) / 4);
  }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.carousel-dot {
  width: 26px; /* touch target, with the visual dot drawn inside */
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.16s var(--ease), transform 0.16s var(--ease);
}

.carousel-dot:hover::before {
  background: var(--red-lt);
}

.carousel-dot.is-active::before {
  background: var(--red);
  transform: scale(1.3);
}

/* One offer, or no more than fit on screen: nothing to move to. */
.offers-section.is-single .carousel-arrows,
.offers-section.is-single .carousel-dots {
  display: none;
}

.offer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
}

.offer-card[data-kind="offer"] {
  border-left-color: var(--gold-deep);
}

.offer-card[data-kind="info"] {
  border-left-color: #33405c;
}

.offer-card[data-kind="closing"] {
  border-left-color: var(--red-deep);
}

.offer-card.is-read {
  opacity: 0.72;
}

.offer-card strong {
  font-size: 1.02rem;
  line-height: 1.35;
}

.offer-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.offer-foot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.3rem;
}

.offer-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 17, 24, 0.35);
}

.offer-link:hover {
  border-bottom-color: var(--red-deep);
}

@media (max-width: 640px) {
  .notify-panel {
    position: fixed;
    top: auto;
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    max-height: min(70dvh, 30rem);
  }
}

/* =========================================================================
   Shared shopping lists

   The link only ever holds product ids and quantities, so there is nothing
   here to redact — the view can be as plain as it likes.
   ========================================================================= */

.share-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.share-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}

.share-row-media {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
}

.share-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.share-row-copy strong {
  font-size: 1rem;
}

.share-row-copy strong a {
  color: inherit;
  text-decoration: none;
}

.share-row-copy strong a:hover {
  color: var(--red-deep);
}

.share-row-copy .muted {
  font-size: 0.82rem;
}

.share-qty {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.share-row-price {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.share-row-price s {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--faint);
}

.share-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--paper-2);
  border-radius: var(--radius);
}

.share-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.share-summary > div span {
  font-size: 0.82rem;
  color: var(--muted);
}

.share-summary strong {
  font-size: 1.3rem;
}

/* ---------------------------------------------------- clipboard fallback -- */

.share-fallback {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0.5rem 0;
}

.share-fallback label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.share-fallback input {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}

.share-fallback p {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .share-row {
    grid-template-columns: 56px 1fr;
    row-gap: 0.5rem;
  }

  .share-row-media {
    width: 56px;
    height: 56px;
  }

  .share-row-price {
    grid-column: 2;
    text-align: left;
  }
}

/* =========================================================================
   Back control

   Sits at the top left of the page, directly under the logo, and sticks below
   the header as the visitor scrolls so it is always one tap away.

   --back-offset is written by js/back.js from the header's measured height,
   which changes across breakpoints.
   ========================================================================= */

.backbar {
  position: sticky;
  top: var(--back-offset, 68px);
  z-index: 30;
  /* The header is translucent with a backdrop blur, so the bar needs a
     matching background or page content shows through as it scrolls under. */
  background: rgba(255, 253, 249, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.backbar[hidden] {
  display: none;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* comfortable touch target */
  padding: 0.4rem 0.9rem 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.back-btn:hover {
  background: var(--paper-2);
  color: var(--red-deep);
}

.back-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.back-arrow {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  transition: transform 0.16s var(--ease);
}

.back-btn:hover .back-arrow {
  transform: translateX(-2px);
}

/* Keep the label aligned with the page gutter rather than the raw padding. */
.backbar > .back-btn {
  margin-left: max(1.25rem, calc((100vw - var(--max, 1180px)) / 2));
}

.back-label {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .back-btn {
    font-size: 0.84rem;
    padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  }

  .backbar > .back-btn {
    margin-left: 1rem;
  }
}

/* On a short landscape phone the header plus this bar would eat the screen,
   so drop the bar's own chrome and leave just the arrow. */
@media (max-height: 480px) {
  .backbar {
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .back-label {
    display: none;
  }

  .back-btn {
    padding: 0.4rem;
  }
}

/* =========================================================================
   JSS Clubcard

   Two-tier discount card: a lower rate on any basket, a higher one past a
   threshold the shop sets in the admin panel.
   ========================================================================= */

/* ------------------------------------------------------------ side panels -- */

.club-widget {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--paper-2);
}

.club-widget.is-on {
  border-color: var(--red-lt);
  background: var(--red-wash);
}

/* --muted lands at 4.49:1 on --red-wash, a hair under the 4.5:1 AA floor, and
   .fineprint and .linkish both default to it. Scope the darker tone to the
   tinted panel rather than restyling those classes across the whole site. */
.club-widget.is-on .club-widget-label,
.club-widget.is-on .fineprint,
.club-widget.is-on .linkish {
  color: var(--muted-strong);
}

/* --deal is 4.07:1 on --red-wash; --red-deep is 5.92:1. */
.club-widget.is-on .linkish:hover {
  color: var(--red-deep);
}

.club-widget-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.club-widget-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.club-widget-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.club-widget-row .btn {
  flex: none;
}

.club-widget-row input[aria-invalid="true"] {
  border-color: var(--red-deep);
  background: var(--red-wash);
}

.club-widget-error {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--red-deep);
}

.club-widget-error[hidden] {
  display: none;
}

.club-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.club-widget-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: var(--red-deep);
}

.club-widget-off {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.55rem 0 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
  font-weight: 700;
  color: var(--good);
}

.club-widget-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.club-widget .fineprint {
  margin: 0.4rem 0 0;
}

/* --------------------------------------------------------- tier explainer -- */

.club-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.club-tier {
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--paper);
  text-align: left;
}

.club-tier.is-top {
  border-color: var(--red-lt);
  background: var(--red-wash);
}

.club-tier-pct {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--red-deep);
}

.club-tier strong {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.05rem;
}

.club-tier p {
  margin: 0.3rem 0 0;
  color: var(--muted-strong);
}

/* ------------------------------------------------------------- the card -- */

.club-card {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  text-align: center;
}

.club-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.club-card-top strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  color: var(--ink);
}

.club-qr {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
  /* A printed or photographed code has to keep its quiet zone, so no crop. */
  padding: 0;
}

.club-qr[hidden] {
  display: none;
}

.club-card-num {
  margin-top: 0.9rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.club-card-name {
  margin-top: 0.35rem;
  font-weight: 600;
}

.club-card-email {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.club-card-hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.club-show {
  margin: 1.5rem auto 0;
  max-width: 260px;
  text-align: center;
}

.club-show-label {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ----------------------------------------------------------- lists + form -- */

.club-perks {
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.club-perks li {
  margin-bottom: 0.4rem;
}

.club-steps {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.club-steps li {
  margin-bottom: 0.5rem;
}

/* Off-screen but still submitted, so a bot filling the form in is detected. */
.club-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .club-card {
    padding: 1rem;
  }

  .club-widget-row {
    flex-wrap: wrap;
  }

  .club-widget-row .btn {
    width: 100%;
  }
}

/* -------------------------------------------------------- live shop bar -- */

.utility-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.utility-live {
  color: rgba(255, 253, 249, 0.72);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Digits that do not change width, so the bar does not twitch every minute. */
#utility-clock {
  font-variant-numeric: tabular-nums;
}

.utility-weather {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(255, 255, 249, 0.22);
}

#weather-icon {
  font-size: 0.95em;
  line-height: 1;
}

#weather-text {
  font-weight: 600;
  color: rgba(255, 253, 249, 0.92);
}

/* The bar is a single line of small type. Anything wider than a small phone
   has to fit; below that the clock and weather step aside for the number. */
@media (max-width: 420px) {
  .utility-left {
    display: none;
  }
}

/* ------------------------------------------------- first-visit notice --- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  /* A dialog with no animation still works; one that only exists after a
     transition does not. The fade is layered on top with a transition. */
}

.popup[hidden] {
  display: none;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.popup-panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.6rem 1.65rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.popup.is-open .popup-backdrop {
  opacity: 1;
}

.popup.is-open .popup-panel {
  opacity: 1;
  transform: none;
}

.popup-kicker {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 0.5rem;
}

.popup-head h2 {
  margin-bottom: 0.7rem;
  font-size: 1.4rem;
}

.popup-body p {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.popup-body p:last-child {
  margin-bottom: 0;
}

.popup-actions {
  margin-top: 1.3rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.popup-actions .btn-block {
  display: block;
  margin-bottom: 0.55rem;
}

.popup-accept {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.popup-accept:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.popup-accept:focus-visible,
.popup-panel a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .popup-panel {
    padding: 1.3rem 1.25rem 1.2rem;
  }

  .popup-head h2 {
    font-size: 1.25rem;
  }
}

/* Reduced motion: no fade, no slide, straight to the answer. */
@media (prefers-reduced-motion: reduce) {
  .popup-backdrop,
  .popup-panel {
    transition: none;
  }

  .popup-panel {
    transform: none;
  }
}

/* ------------------------------------------------------- policy pages -- */

.legal-updated {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.wrap.legal-wrap {
  padding-top: 0.5rem;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.legal-nav a {
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease);
}

.legal-nav a:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}

.legal-nav a[aria-current="page"] {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--paper);
}

/* Reading width. A policy set to the full 1200px container is unreadable. */
.legal-doc {
  max-width: 44rem;
}

.legal-h {
  margin: 2.2rem 0 0.75rem;
  font-size: 1.2rem;
  line-height: 1.35;
}

.legal-doc .legal-h:first-child {
  margin-top: 0;
}

.legal-p {
  margin: 0 0 1.05rem;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.legal-fineprint {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 3rem;
}

@media (max-width: 560px) {
  .legal-links .btn {
    flex: 1 1 100%;
  }
}

@media print {
  /* A policy that cannot be filed on paper is not much of a policy. */
  .legal-nav,
  .legal-links {
    display: none;
  }
}
/* ------------------------------------------------------ mobile intro --- */



.intro--mobile {

  background: #0b0b0b;

}



.intro-mobile-stage {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1.5rem;

  padding: 2rem;

  text-align: center;

}



.intro-mobile-logo {

  width: 80px;

  height: 80px;

  border-radius: 16px;

  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 40px rgba(248, 216, 0, 0.4),

    0 0 80px rgba(248, 216, 0, 0.2);

  animation: mobile-logo-reveal 1.2s var(--ease) forwards;

  opacity: 0;

  transform: scale(0.5);

}



.intro-mobile-logo .icon {

  width: 40px;

  height: 40px;

  color: #0b0b0b;

  stroke-width: 2.5;

}



@keyframes mobile-logo-reveal {

  0% {

    opacity: 0;

    transform: scale(0.5);

    box-shadow: 0 0 0 rgba(248, 216, 0, 0);

  }

  50% {

    box-shadow: 0 0 60px rgba(248, 216, 0, 0.6),

      0 0 120px rgba(248, 216, 0, 0.3);

  }

  100% {

    opacity: 1;

    transform: scale(1);

    box-shadow: 0 0 40px rgba(248, 216, 0, 0.4),

      0 0 80px rgba(248, 216, 0, 0.2);

  }

}



.intro-mobile-title {

  font-size: clamp(1.75rem, 6vw, 2.75rem);

  font-weight: 700;

  color: var(--paper);

  letter-spacing: -0.02em;

  animation: mobile-text-reveal 0.8s var(--ease) forwards;

  animation-delay: 0.4s;

  opacity: 0;

  transform: translateY(20px);

}



.intro-mobile-tagline {

  font-size: clamp(0.95rem, 3vw, 1.15rem);

  color: var(--muted);

  max-width: 280px;

  line-height: 1.5;

  animation: mobile-text-reveal 0.8s var(--ease) forwards;

  animation-delay: 0.6s;

  opacity: 0;

  transform: translateY(20px);

}



@keyframes mobile-text-reveal {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.intro-mobile-gold-bar {

  width: 60px;

  height: 3px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  border-radius: 2px;

  animation: mobile-bar-reveal 1s var(--ease) forwards;

  animation-delay: 0.8s;

  opacity: 0;

  transform: scaleX(0);

  transform-origin: center;

}



@keyframes mobile-bar-reveal {

  to {

    opacity: 1;

    transform: scaleX(1);

  }

}



.intro-mobile-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



.intro-mobile-particles::before,

.intro-mobile-particles::after {

  content: "";

  position: absolute;

  width: 4px;

  height: 4px;

  background: var(--gold);

  border-radius: 50%;

  opacity: 0;

  animation: mobile-particle-float 3s ease-in-out infinite;

}



.intro-mobile-particles::before {

  top: 20%;

  left: 15%;

  animation-delay: 0s;

}



.intro-mobile-particles::after {

  bottom: 25%;

  right: 18%;

  animation-delay: 1.5s;

}



@keyframes mobile-particle-float {

  0%, 100% {

    opacity: 0;

    transform: translateY(0) scale(1);

  }

  25% {

    opacity: 0.8;

    transform: translateY(-30px) scale(1.2);

  }

  50% {

    opacity: 0.4;

    transform: translateY(-60px) scale(0.8);

  }

  75% {

    opacity: 0.1;

    transform: translateY(-80px) scale(0.5);

  }

}



/* Particles animation also respect reduced motion */

@media (prefers-reduced-motion: reduce) {

  .intro-mobile-particles::before,

  .intro-mobile-particles::after {

    animation: none;

    opacity: 0;

  }

}



/* Mobile skip button */

#intro-mobile-skip {

  position: absolute;

  bottom: clamp(1.2rem, 4vh, 2rem);

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  min-height: 44px;

  padding: 0.75rem 2rem;

  font: inherit;

  font-size: 0.85rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--paper);

  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);

  border: none;

  border-radius: 999px;

  cursor: pointer;

  box-shadow: 0 4px 20px rgba(248, 216, 0, 0.4);

  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);

}



#intro-mobile-skip:hover {

  transform: translateX(-50%) scale(1.05);

  box-shadow: 0 6px 30px rgba(248, 216, 0, 0.6);

}



#intro-mobile-skip:focus-visible {

  outline: 2px solid var(--gold);

  outline-offset: 3px;

}



@media (prefers-reduced-motion: reduce) {

  .intro-mobile-logo,

  .intro-mobile-title,

  .intro-mobile-tagline,

  .intro-mobile-gold-bar {

    animation: none !important;

    opacity: 1 !important;

    transform: none !important;

  }

}