/* ==========================================================================
   MySmartLivingTools — storefront styles
   Palette: deep teal ink, coral accent, mint surfaces, pill geometry.
   ========================================================================== */

:root {
  /* Brand values, from the brand file. The site shipped with #08322C/#FF6B4A,
     which is a shade off; anything mixed from them (shadows, tints) is derived
     here rather than hardcoded, so this is the only place they live. */
  --ink:        #07322B;
  --ink-soft:   #3D6560;
  --ink-faint:  #7A9793;
  --coral:      #FE694A;
  --coral-dark: #E85431;
  --teal:       #0FB3A1;
  --teal-dark:  #0A8C7E;
  --mint:       #D6F0EC;
  --surface:    #F3F8F7;
  --cream:      #FFF6E6;
  --peach:      #FFE3D6;
  --yellow:     #FFD23F;
  --white:      #FFFFFF;
  --line:       #E3EDEB;
  --danger:     #D2452F;

  --radius:     18px;
  --radius-lg:  28px;
  --pill:       999px;
  --shadow-sm:  0 2px 8px rgba(8,50,44,.06);
  --shadow:     0 10px 30px rgba(8,50,44,.09);
  --shadow-lg:  0 24px 60px rgba(8,50,44,.14);
  --wrap:       1200px;
  --header-h:   76px;

  --font-head: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Nunito", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* Author `display` rules outrank the UA stylesheet, so [hidden] needs to win
   explicitly — otherwise any element given a display value ignores it. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.35rem); }
h3 { font-size: 1.15rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 10px; }

/* ------------------------------------------------------------- announcement */
.announce {
  background: var(--ink);
  color: var(--mint);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  overflow: hidden;
  padding: 8px 0;
}
.announce__track {
  display: flex; gap: 14px; align-items: center; white-space: nowrap; width: max-content;
  /* The duration is set per bar from its own width, so the pace stays the
     same however much text it carries. This is only the fallback. */
  animation: slide 34s linear infinite;
}
.announce__dot { color: var(--coral); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* backdrop-filter makes an element the containing block for position:fixed
   descendants, which would trap the mobile drawer inside the header — so the
   frosted effect is only applied at widths where the drawer is not fixed. */
@media (min-width: 901px) {
  .site-header { background: rgba(255,255,255,.93); backdrop-filter: saturate(160%) blur(12px); }
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 0px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ink); color: var(--coral); border-radius: 14px; flex: none;
}
/* A custom logo replaces the tile entirely, so transparent art keeps its shape. */
.brand__mark--image { background: none; border-radius: 0; width: auto; max-width: 190px; }
.brand__mark--image img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.brand--logo-only .brand__mark--image { max-width: 230px; }
.brand__text strong {
  display: block; font-family: var(--font-head); font-size: 1.16rem;
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.brand__text strong em { font-style: normal; color: var(--coral); }
.brand__text small { display: block; font-size: .68rem; color: var(--ink-faint); font-weight: 600; letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 9px 15px; border-radius: var(--pill); font-weight: 700; font-size: .93rem;
  color: var(--ink-soft); transition: background .18s, color .18s;
  white-space: nowrap;          /* a two-word label must never fold in half */
}

/* Between the mobile drawer and a roomy desktop the bar is tight: six links,
   a search box, an account button and the cart. Tighten rather than wrap.

   Every selector here carries .site-header for one reason: a media query adds
   no specificity, and the plain .header-actions, .acct-btn and .cart-btn rules
   live further down the file. Without the prefix those three declarations lost
   on source order and this block only half worked. */
@media (min-width: 901px) and (max-width: 1140px) {
  .site-header .nav { gap: 0; }
  .site-header .nav__link { padding: 9px 10px; font-size: .88rem; }
  .site-header .header-actions { gap: 7px; }
  .site-header .header-actions .searchbox { width: 42px; height: 42px; }
  .site-header .header-actions .searchbox:focus-within,
  .site-header .header-actions .searchbox:has(input:not(:placeholder-shown)) { width: 200px; }
  .site-header .acct-btn, .site-header .cart-btn { width: 42px; height: 42px; }
}
/* Air between the last menu link and the buttons, so the two groups read as
   two groups. Only above the drawer breakpoint: below it .nav is the fixed
   panel, and a right margin would shove the whole thing off its edge. */
@media (min-width: 901px) {
  .site-header .nav { margin-right: clamp(10px, 1.8vw, 26px); }
}

.nav__link:hover { background: var(--surface); color: var(--ink); }
.nav__link.is-active { background: var(--mint); color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.searchbox {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 8px 16px; color: var(--ink-faint);
  transition: border-color .18s, background .18s;
}
.searchbox:focus-within { border-color: var(--teal); background: var(--white); }
.searchbox input {
  border: 0; background: none; outline: none; width: 148px; font-size: .9rem; font-weight: 600;
  color: var(--ink);        /* the box is faint; what someone types should not be */
}
.searchbox input::placeholder { color: var(--ink-faint); font-weight: 600; }

/* The one in the top bar sits closed, the size of the buttons beside it, and
   opens when you reach for it. An open field was taking a sixth of the bar to
   do nothing most of the time.

   Done with :focus-within rather than script so it still works with JavaScript
   off: while closed the input covers the whole circle, so clicking the icon is
   clicking the input, and focus is what opens it. */
.header-actions .searchbox {
  width: 46px; height: 46px; padding: 0; position: relative; overflow: hidden; flex: none;
  transition: width .24s ease, border-color .18s, background .18s;
}
.header-actions .searchbox svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none;                      /* the input underneath takes the click */
}
.header-actions .searchbox input {
  width: 100%; height: 100%; padding: 0 0 0 40px; cursor: pointer;
  color: transparent; transition: color .12s;
}
.header-actions .searchbox input::placeholder { color: transparent; }

/* Open: while it has focus, and while it holds a term worth keeping in view. */
.header-actions .searchbox:focus-within,
.header-actions .searchbox:has(input:not(:placeholder-shown)) { width: 232px; }
.header-actions .searchbox:focus-within input,
.header-actions .searchbox:has(input:not(:placeholder-shown)) input {
  cursor: text; color: var(--ink);
}
.header-actions .searchbox:focus-within input::placeholder { color: var(--ink-faint); }

.searchbox--page {
  max-width: 620px; margin: 0 auto 30px; padding: 6px 6px 6px 22px; background: var(--white);
}
.searchbox--page input { width: 100%; }

.cart-btn {
  position: relative; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ink); color: var(--white); border-radius: var(--pill);
  transition: transform .18s, background .18s;
}
.cart-btn:hover { transform: translateY(-2px); background: var(--teal-dark); }
.cart-btn__count {
  position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center; background: var(--coral); color: #fff;
  border-radius: var(--pill); font-size: .7rem; font-weight: 800; border: 2px solid #fff;
}
.cart-btn__count.is-empty { display: none; }

.burger { display: none; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__close {
  display: none; position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: var(--pill); background: var(--surface);
  color: var(--ink); font-size: 1.5rem; line-height: 1; place-items: center;
}
.nav__close:hover { background: var(--ink); color: #fff; }
.searchbox--drawer { display: none; }
.nav__account { display: none; }        /* drawer only — see the mobile block */

/* --------------------------------------------------------------------- hero */
.hero {
  background:
    radial-gradient(1000px 480px at 88% -12%, var(--peach) 0%, transparent 62%),
    radial-gradient(760px 400px at 4% 8%, var(--mint) 0%, transparent 58%),
    var(--white);
  padding: clamp(38px, 6vw, 76px) 0 clamp(46px, 6vw, 84px);
}
.hero__inner {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 60px); align-items: center;
}
.hero__copy h1 { margin: 14px 0 16px; max-width: 15ch; }
.hero__text { font-size: 1.06rem; color: var(--ink-soft); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero__proof { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ink-soft); }
.stars { color: var(--yellow); letter-spacing: 1px; }

.eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--teal-dark);
}
.eyebrow--pill {
  display: inline-block; background: var(--mint); color: var(--ink);
  padding: 6px 14px; border-radius: var(--pill); margin-bottom: 12px; letter-spacing: .1em;
}

.hero__card {
  display: block; color: inherit;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; border: 1px solid var(--line); transform: rotate(-1.2deg);

  /* The picture is square, so the card's height is its width plus a body of
     about 150px. Sizing the card from the screen height is therefore the same
     thing as sizing it from its width — and it is the only way to make the card
     shorter without cutting the picture. The 330px is the header, the hero's
     own padding and the card body; tuned so the whole card clears the fold at
     1366x768 and upwards. */
  width: min(440px, 100%, calc(100vh - 330px));
  width: min(440px, 100%, calc(100svh - 330px));
  min-width: 300px;
  margin-inline: auto;
  transition: transform .2s, box-shadow .2s;
}
.hero__card:hover { transform: rotate(-1.2deg) translateY(-4px); }

/* Whole, never cropped. These listing images carry the app's name and its
   badges drawn inside them, right up to the edges: a `cover` fit, a
   `max-height` or a 16/9 box hides exactly the part the picture exists to
   show. */
.hero__media { display: block; background: var(--surface); aspect-ratio: 1 / 1; }
.hero__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}

/* A block, not a grid. A grid item is blockified, which quietly turns the
   title's `display: -webkit-box` into `flow-root` and stops the two-line clamp
   working — the title was showing three lines with no clamp at all. */
.hero__cardbody { display: block; padding: 14px 16px 16px; }
.hero__cardbody > * + * { margin-top: 6px; }

/* Line one: what kind of thing it is, and the discount if there is one. */
.hero__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero__format-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--teal-dark);
}
.hero__meta .flag { padding: 2px 8px; font-size: .64rem; }

/* Line two: the title, two lines at most. A four-line title was most of the
   card's height, and the whole of it is in the tooltip and on the page the card
   opens. */
.hero__cardtitle {
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; line-height: 1.25;
  color: var(--ink);

  /* Two lines, guaranteed. `-webkit-box` with a line-clamp is the usual way and
     gives the nicer "…", but it is silently blockified in some ancestor
     arrangements — it was computing as `flow-root` here and clamping nothing at
     all. The max-height is the part that cannot be ignored; the clamp rides
     along for the ellipsis where it does work. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 2.5em;                 /* 2 × line-height */
  overflow: hidden;
}

/* Line three: price and button on one row. */
.hero__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero__buy .card__price { margin: 0; padding: 0; }
.hero__buy .price { font-size: 1.16rem; }
.hero__buy .price--old { font-size: .85rem; }
.hero__cardbtn { flex: none; padding: 8px 16px; font-size: .84rem; }

/* The card and the promotion terms that belong to its price, as one column. */
.hero__cardwrap { display: grid; gap: 8px; justify-items: center; }
.hero__cardwrap .sale-note { max-width: 440px; margin: 0; text-align: left; }

/* Below 360px the row has no room for both, so the button takes its own line.
   At exactly 360 they still fit side by side, and keeping them there is what
   holds the card body inside its height budget on the narrowest common phone. */
@media (max-width: 359px) {
  .hero__buy { flex-wrap: wrap; }
  .hero__cardbtn { width: 100%; }
}

/* ------------------------------------------------------------------ marquee */
.marquee {
  background: var(--ink); color: var(--mint); padding: 13px 0; overflow: hidden;
  font-family: var(--font-head); font-size: .95rem; font-weight: 500;
}
.marquee__track {
  display: flex; gap: 22px; align-items: center; white-space: nowrap; width: max-content;
  animation: slide 46s linear infinite;   /* overridden per bar, as above */
}
.marquee__track span:nth-child(even) { color: var(--coral); }

/* ----------------------------------------------------------------- sections */
.section { padding: clamp(46px, 6vw, 82px) 0; }
.section--tight { padding: clamp(30px, 4vw, 52px) 0 clamp(46px, 6vw, 76px); }
.section--tint { background: var(--surface); }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px;
}
.section__sub { color: var(--ink-soft); margin-top: 8px; max-width: 52ch; }
.link-more { font-weight: 800; color: var(--teal-dark); white-space: nowrap; padding-bottom: 6px; }
.link-more:hover { color: var(--coral); }

.page-head {
  background: linear-gradient(180deg, var(--surface), var(--white));
  padding: 34px 0 30px; border-bottom: 1px solid var(--line);
}
.page-head--slim { padding: 26px 0 22px; }
.page-head h1 { margin-bottom: 10px; }
.page-head p { color: var(--ink-soft); max-width: 62ch; }

/* A collection page leads with the same collage as the tile that sent you
   there, beside the heading rather than under it. */
.page-head__split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 36px; align-items: center;
}
.page-head__art { min-width: 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--ink-faint); margin-bottom: 12px; font-weight: 600; }
.crumbs a:hover { color: var(--coral); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--pill); font-weight: 800; font-size: .93rem;
  border: 2px solid transparent; transition: transform .16s, box-shadow .16s, background .16s, color .16s;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

/* Coral is the page's one main action and nothing else — see docs/DESIGN-RULES.md.
   Six coral buttons on a screen is six things shouting equally, which reads the
   same as none of them shouting. Everything repeated, secondary or global uses
   one of the neutral styles below. */
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(254,105,74,.32); }
.btn--primary:hover { background: var(--coral-dark); transform: translateY(-2px); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #0b463d; transform: translateY(-2px); }

/* The workhorse: repeated actions — an Add to cart on every card — and anything
   secondary. Ink, never coral, including on hover. */
.btn--outline {
  background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none;
}
.btn--outline:hover { background: var(--mint); color: var(--ink); transform: translateY(-2px); }

/* The same idea on a dark background — the footer, in practice. */
.btn--outline-light,
.btn--outline-clear {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.72); box-shadow: none;
}
.btn--outline-light:hover,
.btn--outline-clear:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; transform: translateY(-2px); }

.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--link { background: none; color: var(--ink-soft); padding: 10px 6px; font-weight: 700; text-decoration: underline; }
.btn--link:hover { color: var(--ink); }

/* The focus ring is ink, not coral: a keyboard user tabbing through a page
   would otherwise light up button after button in the page's one accent colour
   with no way to tell which is the main action. */
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn--danger { color: var(--danger); }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* -------------------------------------------------------------------- grids */
.grid { display: grid; gap: 22px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* -------------------------------------------------------------- product card */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card__media { position: relative; display: block; background: var(--surface); }
.card__media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.04); }

.card__flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.flag {
  display: inline-block; padding: 5px 11px; border-radius: var(--pill);
  font-size: .7rem; font-weight: 800; letter-spacing: .03em; background: var(--ink); color: #fff;
}
.flag--sale { background: var(--coral); }
.flag--badge { background: var(--yellow); color: var(--ink); }
.flag--out { background: var(--ink-faint); }
.flag--float { position: absolute; top: 16px; left: 16px; }

.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-size: 1.02rem; line-height: 1.3; }
.card__title a:hover { color: var(--coral); }
.card__sub { font-size: .84rem; color: var(--ink-faint); line-height: 1.45; }
.card__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.card__form { margin-top: 6px; }

.price { font-family: var(--font-head); font-size: 1.28rem; font-weight: 600; color: var(--ink); }
.price--old { font-family: var(--font-body); font-size: .95rem; font-weight: 700; color: var(--ink-faint); }
.price--xl { font-size: 2.1rem; }
.save-pill {
  background: var(--peach); color: var(--coral-dark); font-size: .78rem; font-weight: 800;
  padding: 4px 12px; border-radius: var(--pill);
}

/* --------------------------------------------------- flash promo, homepage */
/* A warm band rather than the page tint, so the section reads as an event and
   not as one more shelf. */
.section--flash {
  background: linear-gradient(180deg, #FFF1E8, var(--white));
  border-block: 2px solid var(--peach);
}
.flashband {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 44px); margin-bottom: 26px;
}
.flashband__say { min-width: 0; }
.flashband__say h2 { margin-bottom: 0; }
.eyebrow--flash { background: var(--coral); color: #fff; }

/* With one deal the heading has the row to itself and the clock moves down into
   the panel, beside the price it applies to. */
.flashband--solo { display: block; }
.flashband--solo .section__sub { max-width: 68ch; }

.flashband__clock { flex: 0 0 auto; text-align: center; }
.flashband__lead {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral-dark); margin: 0 0 8px;
}
.flashband .flash__clock { gap: 10px; }
.flashband .flash__clock span { min-width: 74px; padding: 10px 6px; }
.flashband .flash__clock b { font-size: 1.85rem; }

/* ------------------------------------------------- the single-deal panel */
.flashdeal {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 38px); align-items: center;
  background: var(--white); border: 2px solid var(--coral);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(16px, 2vw, 22px);
}
.flashdeal__media {
  display: block; border-radius: 20px; overflow: hidden; background: var(--surface);
}
.flashdeal__media img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform .5s ease;
}
.flashdeal__media:hover img { transform: scale(1.03); }

.flashdeal__body { min-width: 0; }
.flashdeal__title { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin: 0 0 6px; }
.flashdeal__title a { color: inherit; }
.flashdeal__title a:hover { color: var(--coral); }
.flashdeal__sub { color: var(--ink-soft); margin: 0 0 16px; max-width: 46ch; }

.flashdeal__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.flashdeal__ticks {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.flashdeal__ticks li {
  position: relative; padding-left: 26px; font-size: .92rem; color: var(--ink-soft);
}
.flashdeal__ticks li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  color: var(--teal-dark); font-weight: 800;
}

.flashdeal__count { margin-bottom: 20px; }
.flashdeal__count .flash__clock { gap: 10px; max-width: 420px; }
.flashdeal__count .flash__clock span {
  padding: 10px 6px; background: var(--peach); box-shadow: none;
}
.flashdeal__count .flash__clock b { font-size: 1.7rem; color: var(--coral-dark); font-weight: 600; }
.flashdeal__count .flash__clock small { color: var(--coral-dark); opacity: .75; }

/* ------------------------------------------------------ flash strip, shop */
/* A band across the top of the listing rather than a second grid: the reduced
   products are already in the list below, so what is missing is the news and a
   way to narrow to them — not another copy of the same cards. */
.promostrip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px clamp(16px, 3vw, 30px);
  background: linear-gradient(135deg, var(--peach), #FFF1E8);
  border: 2px solid var(--coral); border-radius: 22px;
  padding: 16px clamp(16px, 2.4vw, 24px); margin-bottom: 22px;
}
.promostrip__say { flex: 1 1 240px; min-width: 0; }
.promostrip__head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-family: var(--font-head); font-size: 1.06rem; color: var(--ink);
}
.promostrip__bolt { font-size: 1.15rem; line-height: 1; }
.promostrip__lead {
  margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--coral-dark);
}
.promostrip .flash__clock { flex: 0 1 auto; gap: 8px; }
.promostrip .flash__clock span { min-width: 62px; padding: 7px 5px; }
.promostrip .flash__clock b { font-size: 1.35rem; }
.promostrip .btn { flex: 0 0 auto; }

.promostrip.is-urgent { border-color: var(--coral-dark); }
.promostrip.is-urgent .flash__clock b { color: var(--coral-dark); }

@media (max-width: 720px) {
  .promostrip { align-items: stretch; }
  .promostrip .flash__clock { flex: 1 1 100%; }
  .promostrip .flash__clock span { min-width: 0; }
  .promostrip .btn { width: 100%; }
}

/* Each card's own deadline, when several promos run at once. */
.card__ends {
  margin: -6px 0 12px; font-size: .78rem; font-weight: 600; color: var(--coral-dark);
}
.card__ends strong { font-weight: 800; }

.flashdeal__act { display: flex; flex-wrap: wrap; gap: 12px; }
.flashdeal__act form { flex: 1 1 260px; }
.flashdeal__act .btn { width: 100%; }
.flashdeal__act > .btn { flex: 1 1 200px; }

@media (max-width: 900px) {
  .flashband { flex-direction: column; align-items: stretch; }
  .flashband__clock { text-align: left; }
  .flashband .flash__clock span { min-width: 0; }
  /* The picture stops earning its column before the words do. */
  .flashdeal { grid-template-columns: 1fr; }
  .flashdeal__media img { aspect-ratio: 16/9; }
}
@media (max-width: 520px) {
  .flashdeal__act { flex-direction: column; }
  .flashdeal__act form, .flashdeal__act > .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ flash promo */
.flag--flash, .save-pill--flash {
  background: var(--coral); color: #fff;
}
.flash {
  margin: 14px 0 4px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(135deg, var(--peach), #FFF1E8);
  border: 2px solid var(--coral);
}
.flash__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.flash__label {
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--coral-dark);
}
.flash__off {
  background: var(--coral); color: #fff; font-size: .74rem; font-weight: 800;
  padding: 3px 10px; border-radius: var(--pill); white-space: nowrap;
}
.flash__text { margin: 0 0 12px; font-size: .84rem; color: var(--ink-soft); }
.flash__clock {
  display: flex; gap: 8px;
  /* Digits that do not jostle their neighbours as the seconds tick over. */
  font-variant-numeric: tabular-nums;
}
.flash__clock span {
  flex: 1 1 0; min-width: 0; text-align: center;
  background: #fff; border-radius: 14px; padding: 8px 4px;
  box-shadow: 0 2px 0 rgba(8, 50, 44, .07);
}
.flash__clock b {
  display: block; font-family: var(--font-head); font-size: 1.5rem;
  line-height: 1.1; color: var(--ink);
}
.flash__clock small {
  display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
/* The last hour, said with colour rather than another line of text. */
.flash.is-urgent { border-color: var(--coral-dark); }
.flash.is-urgent .flash__clock b { color: var(--coral-dark); }

@media (prefers-reduced-motion: no-preference) {
  .flash.is-urgent .flash__label { animation: flash-beat 1.6s ease-in-out infinite; }
}
@keyframes flash-beat {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.card.is-sold-out .card__media img { filter: grayscale(.65) opacity(.75); }

/* --------------------------------------------------------------- ratings */
.rate {
  display: inline-block; position: relative; white-space: nowrap;
  font-size: .95rem; line-height: 1; letter-spacing: 1px; color: #D7E3E1;
}
.rate::before { content: "★★★★★"; }
.rate i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--yellow); }
.rate i::before { content: "★★★★★"; }
.rate--lg { font-size: 1.35rem; letter-spacing: 2px; }

.card__rating { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-faint); font-weight: 700; }

/* --------------------------------------------------------------- reviews */
.reviews { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(22px, 3vw, 44px); align-items: start; }

.reviews__summary {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; text-align: center; position: sticky; top: calc(var(--header-h) + 16px);
}
.reviews__score { font-family: var(--font-head); font-size: 3rem; font-weight: 600; line-height: 1; }
.reviews__count { font-size: .85rem; color: var(--ink-faint); margin-top: 8px; }
.reviews__empty { font-size: .92rem; color: var(--ink-soft); margin-bottom: 16px; }

.reviews__spread { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }
.reviews__spread li { display: grid; grid-template-columns: 30px 1fr 22px; gap: 8px; align-items: center; }
.reviews__spreadlabel { font-size: .78rem; font-weight: 800; color: var(--ink-faint); }
.reviews__spreadn { font-size: .78rem; color: var(--ink-faint); text-align: right; }
.reviews__bar { height: 7px; background: var(--surface); border-radius: var(--pill); overflow: hidden; }
.reviews__bar span { display: block; height: 100%; background: var(--yellow); border-radius: var(--pill); }

.reviews__list { display: grid; gap: 14px; }
.review { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.review__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.review__title { font-size: 1.02rem; margin-top: 6px; }
.review__verified {
  flex: none; background: var(--mint); color: var(--teal-dark);
  font-size: .72rem; font-weight: 800; padding: 4px 11px; border-radius: var(--pill);
}
.review__body { color: var(--ink-soft); font-size: .94rem; }
.review__meta { font-size: .82rem; color: var(--ink-faint); margin-top: 10px; }

.review__photo {
  display: block; padding: 0; margin-top: 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); cursor: zoom-in;
  transition: transform .18s, box-shadow .18s;
}
.review__photo:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.review__photo img { width: 148px; height: 148px; object-fit: cover; display: block; }

/* ------------------------------------------------------------- drop zone */
.dropzone {
  position: relative; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 24px 20px; text-align: center;
  transition: border-color .18s, background .18s, transform .18s;
}
.dropzone:hover { border-color: var(--teal); background: var(--white); }
.dropzone.is-dragging {
  border-color: var(--coral); background: var(--peach); transform: scale(1.01);
}
.dropzone.is-dragging .dropzone__icon { transform: translateY(-3px); }

/* The input sits on top so click-to-browse and native drop work without JS. */
.dropzone__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.dropzone.has-file .dropzone__input { pointer-events: none; }
.dropzone:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(15,179,161,.15); }

.dropzone__prompt { display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.dropzone__icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--white); color: var(--teal-dark); border-radius: var(--pill);
  border: 1px solid var(--line); transition: transform .18s;
}
.dropzone__prompt strong { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.dropzone__hint { font-size: .8rem; color: var(--ink-faint); }

.dropzone__preview {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px; text-align: left;
}
.dropzone__preview img {
  width: 84px; height: 84px; flex: none; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
}
.dropzone__file { min-width: 0; }
.dropzone__file strong {
  display: block; font-size: .86rem; font-weight: 700; word-break: break-all; margin-bottom: 6px;
}
.dropzone__actions { display: flex; gap: 12px; }
.dropzone__actions button {
  font-size: .82rem; font-weight: 800; color: var(--teal-dark); text-decoration: underline;
}
.dropzone__actions button.is-danger { color: var(--danger); }

/* Click-to-enlarge overlay for review photos. */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(8,50,44,.82); cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
body.lb-open { overflow: hidden; }
.lightbox img {
  max-width: min(920px, 100%); max-height: 88vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute; top: 18px; right: 20px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: var(--pill);
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.5rem; line-height: 1;
}

.review-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; margin-top: 10px; scroll-margin-top: calc(var(--header-h) + 20px);
}
.review-form h3 { margin-bottom: 16px; }
.review-form__note { font-size: .8rem; color: var(--ink-faint); margin-top: 10px; }
.review-form__who {
  background: var(--mint); color: var(--teal-dark); border-radius: var(--radius);
  padding: 11px 15px; font-size: .84rem; margin-bottom: 18px;
}
.review-form__who strong { overflow-wrap: anywhere; }
.field__label { display: block; font-size: .85rem; font-weight: 800; margin-bottom: 6px; }

/* Radio stars, reversed so the CSS sibling selector can fill left-to-right. */
.starpick { display: inline-flex; flex-direction: row-reverse; gap: 8px; margin-top: 2px; }
.starpick input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Big enough to aim at with a thumb, and to read as the main control of the
   form rather than a footnote next to the text fields.
   `.field label` further down matches these as well and carries the same
   specificity, so on source order alone it would win and shrink every star to
   .85rem — which is exactly what it had been doing. Hence the second selector. */
.starpick label,
.field .starpick label {
  font-size: 2.8rem; line-height: 1; margin-bottom: 0; color: #D7E3E1;
  cursor: pointer; transition: color .12s, transform .12s;
}
.starpick label:hover { transform: scale(1.06); }
.starpick input:checked ~ label,
.starpick label:hover,
.starpick label:hover ~ label { color: var(--yellow); }
.starpick input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------- digital delivery */
.card__format {
  font-size: .76rem; font-weight: 800; color: var(--teal-dark);
  display: flex; align-items: center; gap: 6px; letter-spacing: .01em;
}
.hero__format { font-size: .82rem; color: var(--ink-faint); font-weight: 700; margin-bottom: 8px; }

.pdp__format {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--mint); border-radius: var(--radius); padding: 12px 18px;
  margin: 4px 0 18px; font-weight: 700; font-size: .92rem;
}
.pdp__format-what {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-dark); width: 100%;
}

.ship-bar--digital { background: var(--cream); }
.ship-bar--digital p { margin-bottom: 0; }

.digital-note {
  background: var(--mint); border-radius: var(--radius); padding: 16px 20px;
  font-size: .9rem; margin-bottom: 18px; color: var(--ink-soft);
}
.digital-note strong { display: block; color: var(--ink); margin-bottom: 3px; }

.confirm__panel--downloads { background: var(--mint); border-color: #B4E4DC; }
.downloads { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.download {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--white); border-radius: var(--radius); padding: 14px 18px;
}
.download__info strong { display: block; font-family: var(--font-head); font-weight: 600; }
.download__info small { color: var(--ink-faint); font-size: .8rem; }
.download__locked  { font-weight: 800; font-size: .84rem; color: var(--ink-faint); }
.download__pending { font-weight: 800; font-size: .84rem; color: var(--teal-dark); }

/* ----------------------------------------------------------- collection card */
.collection-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: block; transition: transform .2s, box-shadow .2s;
}
.collection-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.collection-card__img { display: block; }
.collection-card__body { display: block; padding: 16px 18px 20px; }
.collection-card__body strong { display: block; font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; }
.collection-card__body em { display: block; font-style: normal; color: var(--ink-soft); font-size: .88rem; margin: 6px 0 8px; }
.collection-card__body small { color: var(--coral); font-weight: 800; font-size: .82rem; }

/* ----------------------------------------------------- the collage on a tile */
/* A collection's picture is its own products, laid out like three photographs
   dropped on a table, over the collection's tint. It used to be a generated
   image showing the first two letters of the name; both collections begin with
   "B", so both tiles read "B&" — it named nothing, it was the same picture
   twice, and it looked like an image that had failed to load.

   Every size below is a percentage of the collage's own height, so one set of
   rules covers a 4:3 tile, a 16:10 tile and the 260px banner at the top of a
   collection page. The tint arrives as `--tint` from the partial, which reads
   it off the collection row. */
.collage {
  --tint: var(--mint);
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--tint);
}
.collection-card--lg .collage--tile { aspect-ratio: 16 / 10; }

.collage__card {
  position: absolute; top: 50%; left: 50%;
  aspect-ratio: 1 / 1; height: 62%;
  background: #fff; padding: 4px; border-radius: 12px;
  box-shadow: 0 8px 20px rgba(7, 50, 43, .14);
  transition: transform .25s ease;
}
.collage__card img {
  display: block; width: 100%; height: 100%;
  /* Contain, like every other product picture on this site. These images carry
     the app's name and its badges drawn right to the edges. */
  object-fit: contain; border-radius: 9px;
}

/* One product — centred, square on, and two soft discs behind it so the tile
   does not read as a single stamp on an empty ground. */
.collage--1 .collage__card { height: 72%; transform: translate(-50%, -50%); }
.collage--1::before,
.collage--1::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(7, 50, 43, .06);
}
.collage--1::before { width: 46%; aspect-ratio: 1; top: -14%; left: -10%; }
.collage--1::after  { width: 34%; aspect-ratio: 1; bottom: -12%; right: -6%; }

/* Two — fanned apart and overlapping by about a third, the second in front. */
.collage--2 .collage__card { height: 62%; }
.collage--2 .collage__card:nth-child(1) { transform: translate(-50%, -50%) translateX(-22%) rotate(-6deg); }
.collage--2 .collage__card:nth-child(2) { transform: translate(-50%, -50%) translateX(22%) rotate(6deg); z-index: 2; }

/* Three — two behind, fanned wider and smaller, and the first product of the
   collection upright in front of them. */
.collage--3 .collage__card { height: 56%; }
.collage--3 .collage__card:nth-child(2) { transform: translate(-50%, -50%) translateX(-28%) rotate(-9deg); }
.collage--3 .collage__card:nth-child(3) { transform: translate(-50%, -50%) translateX(28%) rotate(9deg); }
.collage--3 .collage__card--front {
  height: 66%; transform: translate(-50%, -50%); z-index: 3;
}

/* The banner at the top of a /collection/<slug> page: the same collage, bigger,
   so the page you land on looks like the tile you clicked. */
.collage--head {
  aspect-ratio: auto; height: 260px; width: 100%;
  border-radius: var(--radius-lg);
}

/* Only where there is a real pointer, and only for somebody who has not asked
   for less movement. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .collection-card:hover .collage--2 .collage__card:nth-child(1),
  .collection-card:focus-visible .collage--2 .collage__card:nth-child(1) {
    transform: translate(-50%, -50%) translateX(-28%) rotate(-9deg);
  }
  .collection-card:hover .collage--2 .collage__card:nth-child(2),
  .collection-card:focus-visible .collage--2 .collage__card:nth-child(2) {
    transform: translate(-50%, -50%) translateX(28%) rotate(9deg) translateY(-4px);
  }
  .collection-card:hover .collage--3 .collage__card:nth-child(2),
  .collection-card:focus-visible .collage--3 .collage__card:nth-child(2) {
    transform: translate(-50%, -50%) translateX(-34%) rotate(-12deg);
  }
  .collection-card:hover .collage--3 .collage__card:nth-child(3),
  .collection-card:focus-visible .collage--3 .collage__card:nth-child(3) {
    transform: translate(-50%, -50%) translateX(34%) rotate(12deg);
  }
  .collection-card:hover .collage--3 .collage__card--front,
  .collection-card:focus-visible .collage--3 .collage__card--front,
  .collection-card:hover .collage--1 .collage__card,
  .collection-card:focus-visible .collage--1 .collage__card {
    transform: translate(-50%, -50%) translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .collage__card { transition: none; }
}

@media (max-width: 900px) {
  .page-head__split { grid-template-columns: 1fr; gap: 20px; }
  .collage--head { height: 200px; }
}

/* ---------------------------------------------------------------- spotlight */
/* The picture column is capped rather than proportional: the image is square,
   so the width of its column is also the height of the section. Left as a
   fraction it grew with the screen, and at 1920 this one block was most of a
   page tall. */
.spotlight {
  display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 48px; align-items: center;
  background: var(--cream); border-radius: var(--radius-lg); padding: 32px;
}
.section--spotlight { padding: 48px 0; }

/* Contain, like every other product picture on the site: these images carry the
   app's name and its badges drawn right to the edges, and `cover` cut them. */
.spotlight__media img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* The whole column has to fit beside a 380px square, so every block here is
   measured: seven of them plus the gaps is the entire height budget. */
.spotlight__copy { display: grid; gap: 12px; align-content: center; }
/* justify-self, because a grid item stretches by default and the pill then
   reads as a bar across the column rather than as a label. */
.spotlight__copy > .eyebrow--pill {
  justify-self: start; margin-bottom: 0; padding: 4px 11px; font-size: .7rem;
}
.spotlight__title {
  margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.14;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 2.28em; overflow: hidden;
}
.spotlight__text {
  margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 3.1em; overflow: hidden;
}
/* .ticks comes later in the file and would otherwise win on equal specificity,
   putting its 18px margins back. */
.spotlight .spotlight__ticks { margin: 0; gap: 6px; }
.spotlight .spotlight__ticks li { line-height: 1.4; }
.spotlight__price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; line-height: 1.1;
}
.spotlight__price .price--xl { font-size: 1.85rem; }

/* The promotion terms sit under the price they describe, and the button then
   keeps its distance: pressed up against the small print, the two read as one
   thing and the note looks like part of the button. */
.spotlight .sale-note { margin: -6px 0 0; }
.spotlight__btn { justify-self: start; margin-top: 6px; padding: 11px 24px; }

.ticks { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-soft); font-weight: 600; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  display: grid; place-items: center; background: var(--teal); color: #fff;
  border-radius: var(--pill); font-size: .72rem; font-weight: 800;
}
.ticks--sm li { font-size: .9rem; }

/* -------------------------------------------------------------------- value */
.value-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px;
}
.value-card__n { font-family: var(--font-head); font-size: 2rem; color: var(--coral); display: block; margin-bottom: 8px; }
.value-card h3 { margin-bottom: 8px; }
.value-card p { color: var(--ink-soft); font-size: .93rem; }

/* -------------------------------------------------------------------- filters */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 10px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line);
  font-weight: 700; font-size: .88rem; color: var(--ink-soft); transition: .18s;
}
.chip:hover { border-color: var(--teal); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--sale.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* The flash chip is coloured even when off — it is news, and it is only in the
   row at all while a promo is running. */
.chip--flash {
  background: var(--peach); border-color: var(--peach); color: var(--coral-dark); font-weight: 800;
}
.chip--flash.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.sortbox { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.sortbox select {
  padding: 9px 14px; border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--white); font-weight: 700; font-size: .88rem; cursor: pointer;
}
.result-count { color: var(--ink-faint); font-size: .88rem; font-weight: 700; margin-bottom: 20px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager__btn, .pager__num {
  min-width: 42px; height: 42px; padding: 0 14px; display: grid; place-items: center;
  border-radius: var(--pill); border: 1px solid var(--line); font-weight: 800; font-size: .88rem; background: var(--white);
}
.pager__btn:hover, .pager__num:hover { border-color: var(--ink); }
.pager__num.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------------- PDP */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }

/* Three children, two columns: photos and then reviews down the left, the buy
   box down the right. Placed explicitly rather than by source order, because
   the source order is what a phone stacks — photos, price, reviews — and that
   is the order somebody scrolling should meet them in. */
@media (min-width: 901px) {
  /* The first row is exactly as tall as the photos, the second takes the rest.
     Left to itself the grid shared the buy box height between the two rows, so
     a long description pushed the reviews down and put the gap straight back
     under the gallery. */
  .pdp { grid-template-rows: auto 1fr; }

  .pdp__gallery { grid-column: 1; grid-row: 1; }
  .pdp__info    { grid-column: 2; grid-row: 1 / span 2; }
  .pdp__reviews { grid-column: 1; grid-row: 2; margin-top: clamp(28px, 4vw, 48px); }

  /* The buy box follows you down while you read the reviews beside it. Its grid
     area spans both rows, so there is room to travel. */
  .pdp__info { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
}

/* In half a page the score card and the list cannot sit side by side. */
.pdp__reviews .reviews { grid-template-columns: 1fr; }
.pdp__reviews .reviews__summary {
  position: static;
  display: grid; grid-template-columns: auto 1fr; gap: 6px 22px;
  align-items: center; text-align: left; padding: 20px 22px;
}
.pdp__reviews .reviews__score { grid-row: 1 / span 2; font-size: 2.4rem; }
.pdp__reviews .reviews__spread { grid-column: 2; margin: 0; }
.pdp__reviews .reviews__empty,
.pdp__reviews .reviews__summary .btn { grid-column: 1 / -1; }
.pdp__reviews .section__head { margin-bottom: 20px; }
.pdp__reviews .section__head h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

.pdp__gallery, .pdp__info { min-width: 0; }
.pdp__main { position: relative; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.pdp__main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
/* Phone and tablet: one row that swipes sideways, rather than a block of
   thumbnails several rows deep pushing the buy button off the screen. The bar
   is hidden here too, so the strip matches the desktop rail. */
.pdp__thumbs {
  display: flex; gap: 10px; margin-top: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* A grid item's default min-width is auto, which here means "as wide as 15
     thumbnails in a row" — the strip would push the whole page sideways instead
     of scrolling. Both the strip and the column it sits in must be allowed to
     be narrower than their contents. */
  min-width: 0;
  scrollbar-width: none;
  /* Swiping past the last thumbnail must not chain into the page or trigger
     the browser's back gesture. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.pdp__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pdp__thumbs > .pdp__thumb { scroll-snap-align: start; }

/* Sideways version of the desktop fade: only the end that still has photos. */
.pdp__thumbs.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
}
.pdp__thumbs.has-prev {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38px);
          mask-image: linear-gradient(to right, transparent 0, #000 38px);
}
.pdp__thumbs.has-prev.has-more {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
}
.pdp__thumb {
  position: relative;
  width: 78px; height: 78px; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--line); background: var(--surface); padding: 0;
  /* A long gallery must scroll the rail, not squeeze every thumbnail flat. */
  flex: 0 0 auto;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-active { border-color: var(--ink); }

/* Arrows sitting on the main photo, the way a listing gallery reads: step
   through every item — video included — without going near the thumbnails. */
.pdp__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 16px rgba(8, 50, 44, .18);
  transition: background .16s ease, transform .16s ease, opacity .16s ease;
}
.pdp__nav--prev { left: 12px; }
.pdp__nav--next { right: 12px; }
.pdp__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pdp__nav:active { transform: translateY(-50%) scale(.96); }

/* At the first and last item there is nowhere to go, so the arrow leaves
   rather than sitting there dead. */
.pdp__nav:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 700px) {
  .pdp__nav { width: 36px; height: 36px; }
  .pdp__nav--prev { left: 8px; }
  .pdp__nav--next { right: 8px; }
}

/* Video in the gallery: the stage swaps to a player, and the thumbnail that
   opens it carries a play badge so it reads as a video before it is clicked. */
.pdp__player { position: relative; aspect-ratio: 1/1; background: #000; }
.pdp__player > video,
.pdp__player > iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.pdp__cover { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pdp__cover img { width: 100%; height: 100%; object-fit: cover; }
.pdp__play {
  position: absolute; inset: auto 6px 6px auto;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(8, 50, 44, .82); color: #fff;
  box-shadow: 0 2px 8px rgba(8, 50, 44, .35); pointer-events: none;
}
.pdp__play--lg {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; background: rgba(255, 255, 255, .94); color: var(--ink);
  box-shadow: 0 10px 30px rgba(8, 50, 44, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pdp__cover:hover .pdp__play--lg { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 14px 38px rgba(8, 50, 44, .38); }
.pdp__thumb--video img { filter: brightness(.86); }

@media (min-width: 901px) {
  /* Etsy-style rail: thumbnails stand beside the stage instead of under it. */
  .pdp__gallery[data-gallery] { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: stretch; }
  .pdp__gallery[data-gallery] .pdp__main { grid-column: 2; grid-row: 1; }
  .pdp__gallery[data-gallery] .pdp__thumbs {
    grid-column: 1; grid-row: 1; margin-top: 0;
    flex-direction: column; flex-wrap: nowrap;
    /* The rail ends exactly where the photo does. `height: 0` keeps fifteen
       thumbnails from setting the row height — the photo alone does that — and
       `min-height: 100%` then fills whatever height the photo settled on. */
    height: 0; min-height: 100%;
    overflow-y: auto; overflow-x: hidden;

    /* The rail still scrolls — the bar itself is hidden, so a long gallery
       reads as a clean column of photos rather than a scrolling panel. */
    scrollbar-width: none;          /* Firefox */
    scroll-snap-type: y proximity;  /* the strip snaps sideways on touch */
  }
  .pdp__gallery[data-gallery] .pdp__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* With no bar to give it away, the edges fade to show there is more to
     reach — and only on the side that actually has more. */
  .pdp__thumbs.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 38px), transparent 100%);
  }
  .pdp__thumbs.has-prev {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
  }
  .pdp__thumbs.has-prev.has-more {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%);
  }
}

.pdp__info > .flag { margin-bottom: 12px; }
.pdp__info h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 8px; }
.pdp__sub { color: var(--ink-soft); font-size: 1.02rem; }
.pdp__rating { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--ink-faint); margin: 12px 0 16px; font-weight: 700; }
.pdp__price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp__tax { font-size: .82rem; color: var(--ink-faint); margin-top: 4px; }

.stock { font-size: .88rem; font-weight: 800; margin: 16px 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--pill); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: var(--pill); background: currentColor; }
.stock--in  { background: var(--mint); color: var(--teal-dark); }
.stock--low { background: var(--cream); color: #A9761A; }
.stock--out { background: #FBE7E3; color: var(--danger); }

.pdp__form { display: flex; gap: 12px; align-items: stretch; margin-bottom: 10px; }

.qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: var(--pill); overflow: hidden; background: var(--white); }
.qty button { width: 42px; height: 100%; min-height: 48px; font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); }
.qty button:hover { background: var(--surface); color: var(--ink); }
.qty input {
  width: 48px; text-align: center; border: 0; outline: none; font-weight: 800; background: none;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { min-height: 38px; width: 34px; font-size: 1rem; }
.qty--sm input { width: 40px; font-size: .9rem; }

.pdp__desc { margin: 28px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.pdp__desc h2 { font-size: 1.2rem; margin-bottom: 10px; }
.pdp__desc p { color: var(--ink-soft); margin-bottom: 12px; }

.pdp__faqs { margin: 22px 0 18px; }
.pdp__faqs h2 { font-size: 1.2rem; margin-bottom: 10px; }
.pdp__faqs .faq__item + .faq__item { margin-top: 8px; }


/* Only ever set by the script, once it has measured that there is something
   worth hiding. Nothing here applies to a page without JavaScript. */
.pdp__desc.is-clamped .pdp__desc-body {
  position: relative; max-height: 190px; overflow: hidden;
}
/* The fade says "this carries on" without a line of text saying so. */
.pdp__desc.is-clamped .pdp__desc-body::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 76px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
}
.pdp__desc.is-open .pdp__desc-body { max-height: none; }
.pdp__desc.is-open .pdp__desc-body::after { content: none; }

.pdp__more {
  margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: .92rem; font-weight: 800;
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
}
.pdp__more:hover { color: var(--coral); }


/* ---------------------------------------------------------------------- FAQ */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.faq { display: grid; gap: 10px; }
.faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px;
}
.faq__item summary {
  list-style: none; cursor: pointer; padding: 15px 0; font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 18px; height: 18px; flex: none; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--coral);
  border-radius: 2px; transition: transform .2s;
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__item p { padding-bottom: 16px; color: var(--ink-soft); font-size: .95rem; }

/* --------------------------------------------------------------------- cart */
.ship-bar { background: var(--mint); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; }
.ship-bar p { font-size: .92rem; font-weight: 700; margin-bottom: 10px; }
.ship-bar__track { height: 8px; background: rgba(8,50,44,.12); border-radius: var(--pill); overflow: hidden; }
.ship-bar__track span { display: block; height: 100%; background: var(--teal); border-radius: var(--pill); transition: width .4s; }

.cart-layout { display: grid; grid-template-columns: 1.6fr .9fr; gap: 30px; align-items: start; }
.cart-row {
  display: grid; grid-template-columns: 92px 1fr auto 32px; gap: 16px; align-items: center;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--white);
}
.cart-row__img img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; background: var(--surface); }
.cart-row__title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.cart-row__title:hover { color: var(--coral); }
.cart-row__info p { font-size: .82rem; color: var(--ink-faint); }
.cart-row__unit { font-size: .82rem; color: var(--ink-soft); font-weight: 700; }
.cart-row__total { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; min-width: 80px; text-align: right; }
.cart-row__remove {
  width: 30px; height: 30px; border-radius: var(--pill); background: var(--surface);
  color: var(--ink-faint); font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.cart-row__remove:hover { background: var(--danger); color: #fff; }
.cart-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

.summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px;
}
.summary--sticky { position: sticky; top: calc(var(--header-h) + 16px); }
.summary h2 { font-size: 1.2rem; margin-bottom: 16px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .93rem; color: var(--ink-soft); }
.summary__row strong { color: var(--ink); font-weight: 800; }
.summary__row--total {
  border-top: 2px dashed var(--line); margin-top: 8px; padding-top: 14px; font-size: 1.05rem; color: var(--ink);
}
.summary__row--total strong { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; }
.summary .btn { margin-top: 14px; }
.summary__note { font-size: .78rem; color: var(--ink-faint); margin-top: 12px; text-align: center; }

.summary__items { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
.summary__items li { display: flex; align-items: center; gap: 12px; font-size: .89rem; }
.summary__thumb { position: relative; flex: none; }
.summary__thumb img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--white); border: 1px solid var(--line); }
.summary__thumb em {
  position: absolute; top: -6px; right: -6px; background: var(--ink); color: #fff; font-style: normal;
  font-size: .68rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: var(--pill);
  display: grid; place-items: center; padding: 0 5px;
}
.summary__name { flex: 1; font-weight: 700; }
.summary__name em { font-style: normal; color: var(--ink-faint); }
.summary__amt { font-weight: 800; white-space: nowrap; }

/* ----------------------------------------------------------------- checkout */
.checkout-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 30px; align-items: start; }
.checkout-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px 26px; margin-bottom: 20px; }
.checkout-form legend { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; padding: 0 10px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 800; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 16px; border: 2px solid var(--line); border-radius: 14px;
  background: var(--white); outline: none; transition: border-color .18s; font-size: .95rem;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); }
.field small { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 5px; }
.field textarea { resize: vertical; }
.checkout-form__legal { font-size: .78rem; color: var(--ink-faint); text-align: center; margin-top: 12px; }
.hp { position: absolute; left: -9999px; }

.checkout-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.checkout-who a { font-weight: 800; text-decoration: underline; }
.checkout-who__or { color: var(--ink-faint); font-size: .86rem; }

.confirm__panel--account { background: var(--cream); border-color: #F2E2BE; }
.confirm__panel--account .btn { margin-top: 6px; }

/* ------------------------------------------------------------- account */
.acct-btn {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--pill); transition: background .18s, color .18s, transform .18s;
}
.acct-btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

.auth-wrap { max-width: 460px; }
.auth-form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow);
}
.auth-form .btn { margin-top: 6px; }
.auth-note { text-align: center; margin-top: 16px; font-size: .9rem; color: var(--ink-soft); }
.auth-note a { color: var(--teal-dark); font-weight: 800; }

.account-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 24px; align-items: start; }
.account-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px;
}
.account-card h2 { font-size: 1.1rem; margin-bottom: 16px; }
.account-empty { color: var(--ink-faint); font-size: .93rem; }
.account-empty a { color: var(--teal-dark); font-weight: 800; }

.account-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.account-table th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.account-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); }
.account-table tr:last-child td { border-bottom: 0; }
.account-table a { color: var(--teal-dark); font-weight: 800; }

.flag--ok   { background: var(--mint); color: var(--teal-dark); }
.flag--wait { background: var(--cream); color: #8A6414; }

.alert__action { margin-top: 12px; }
.account-signout { display: block; text-align: center; margin-top: 4px; }

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

@media (max-width: 760px) {
  /* A tablet still has room for two columns — stacking at 900 cost 250px of
     height for nothing. Below 760 the copy would be too narrow, so that is
     where it folds. */
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }

  /* The copy sets its own measure beside a picture. Stacked, the column already
     is the measure, and 15ch left the headline wrapping into a narrow ribbon
     with half the row empty next to it. */
  .hero__copy h1 { max-width: 20ch; }
  .hero__text { max-width: 60ch; }

  /* Centred rather than hugging the left edge of a full-width row, and no
     taller than it needs to be: a square picture made the hero a screen and a
     half tall, so nothing else on the page was ever seen first. */
  .hero__card { width: 100%; max-width: 420px; min-width: 0; margin-inline: auto; transform: none; }
  .hero__card:hover { transform: translateY(-4px); }
  .hero__cardbody { padding: 16px 18px 18px; }
}

/* -------------------------------------------------------------- confirmation */
.confirm { max-width: 720px; margin: 0 auto; text-align: center; }
.confirm__badge {
  width: 76px; height: 76px; margin: 0 auto 20px; display: grid; place-items: center;
  background: var(--teal); color: #fff; border-radius: var(--pill); font-size: 2rem;
  box-shadow: 0 12px 30px rgba(15,179,161,.35);
}
.confirm__lead { color: var(--ink-soft); margin-top: 12px; }
.confirm__number {
  display: inline-flex; flex-direction: column; gap: 2px; background: var(--mint);
  padding: 14px 30px; border-radius: var(--radius); margin: 24px 0;
}
.confirm__number span { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-dark); }
.confirm__number strong { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; }
.confirm__panel {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px;
}
.confirm__panel h2 { font-size: 1.05rem; margin-bottom: 14px; }
.confirm__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.addr { line-height: 1.6; font-weight: 600; }
.muted { color: var(--ink-faint); font-size: .86rem; margin-top: 10px; }

/* ------------------------------------------------------------------- contact */
.contact-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: start; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.contact-card--tint { background: var(--cream); }
.contact-card h3 { font-size: .95rem; margin-bottom: 6px; }
.contact-card a { font-weight: 800; color: var(--teal-dark); }
.contact-card a:hover { color: var(--coral); }
.contact-card p { font-size: .88rem; color: var(--ink-soft); margin-top: 4px; }

/* --------------------------------------------------------------------- legal */
.legal__updated { font-size: .84rem; color: var(--ink-faint); font-weight: 700; }
.legal-layout { display: grid; grid-template-columns: 1fr .38fr; gap: clamp(24px, 4vw, 52px); align-items: start; }

.legal { max-width: 72ch; }
.legal h2 {
  font-size: 1.28rem; margin: 30px 0 10px; padding-top: 20px; border-top: 1px solid var(--line);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.legal p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.7; }
.legal ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.legal li { position: relative; padding-left: 22px; color: var(--ink-soft); line-height: 1.6; }
.legal li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px;
  border-radius: var(--pill); background: var(--teal);
}
.legal strong { color: var(--ink); }
.legal a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }
.legal a:hover { color: var(--coral); }
.legal code { background: var(--surface); padding: 2px 7px; border-radius: 6px; font-size: .9em; }

.legal-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 12px; }
.legal-side__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.legal-side__card--tint { background: var(--cream); border-color: #F4E0B4; }
.legal-side__card h2 { font-size: .95rem; margin-bottom: 10px; }
.legal-side__card a { display: block; font-weight: 700; font-size: .9rem; padding: 4px 0; color: var(--teal-dark); }
.legal-side__card a:hover { color: var(--coral); }
.legal-side__card p { font-size: .87rem; color: var(--ink-soft); margin-bottom: 12px; }
.legal-side__card .btn { display: flex; }

/* --------------------------------------------------------------------- about */
.about-copy p { color: var(--ink-soft); font-size: 1.03rem; margin-bottom: 16px; }

.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px);
}
.cta-band p { color: var(--mint); margin-top: 6px; }

/* --------------------------------------------------------------------- misc */
.empty { text-align: center; padding: 50px 20px; max-width: 520px; margin: 0 auto; }
.empty--tall { padding: 80px 20px; }
.empty__icon { font-size: 3rem; margin-bottom: 12px; }
.empty h1, .empty h3 { margin-bottom: 10px; }
.empty p { color: var(--ink-soft); margin-bottom: 20px; }

/* -------------------------------------------------------------------- blog */
.postmeta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 10px; font-size: .78rem; font-weight: 700; color: var(--ink-faint);
}
/* A middle dot between the items, drawn rather than typed, so it never lands
   at the start of a wrapped line. */
.postmeta > * + *::before { content: '·'; margin-right: 8px; color: var(--line); }
.postmeta__new {
  background: var(--mint); color: var(--teal-dark); padding: 3px 10px;
  border-radius: var(--pill); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}
.postmeta__new + *::before { content: none; }

/* The category, said before the date because it is the stronger signal of what
   a piece is — and a link, because it is a section you can browse. */
.postmeta__cat {
  color: var(--teal-dark); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: .72rem;
}
.postmeta__cat:hover { color: var(--coral); }

/* The filter row above the listing. */
.chips--blog { margin-bottom: 26px; }
.chip__n {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--pill);
  background: var(--white); border: 1px solid var(--line);
  font-size: .72rem; color: var(--ink-faint);
}
.chip.is-active .chip__n { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }

.posttags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.posttags span {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  padding: 4px 11px; border-radius: var(--pill); font-size: .74rem; font-weight: 700;
}

/* --- the latest piece, given the width its position claims --- */
.postlead {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 40px;
}
.postlead__media {
  display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
}
.postlead__media img {
  display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s ease;
}
.postlead__media:hover img { transform: scale(1.03); }
.postlead__title { font-size: clamp(1.5rem, 3vw, 2.3rem); margin: 0 0 12px; }
.postlead__title a { color: inherit; }
.postlead__title a:hover { color: var(--coral); }
.postlead__sub { color: var(--ink-soft); margin: 0 0 16px; max-width: 52ch; }

/* --- the rest, as cards --- */
.postgrid { align-items: stretch; }
.postcard {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: .2s;
}
.postcard:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.postcard__media { display: block; background: var(--surface); }
.postcard__media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.postcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.postcard__title { font-size: 1.12rem; margin: 0 0 8px; }
.postcard__title a { color: inherit; }
.postcard__title a:hover { color: var(--coral); }
.postcard__sub { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* --- one article --- */
.posthead { max-width: 68ch; margin: 0 auto 28px; text-align: center; }
.posthead .postmeta { justify-content: center; }
.posthead .posttags { justify-content: center; }
.posthead h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 14px; }
.posthead__sub { color: var(--ink-soft); font-size: 1.08rem; max-width: 58ch; margin: 0 auto; }

.postfig { margin: 0 0 34px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.postfig img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Prose is measured in characters, not pixels: past about 70 the eye loses the
   start of the next line. */
.postbody { max-width: 68ch; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.postbody > * + * { margin-top: 1.1em; }
.postbody h2 { font-size: 1.6rem; color: var(--ink); margin-top: 1.9em; }
.postbody h3 { font-size: 1.22rem; color: var(--ink); margin-top: 1.6em; }
.postbody strong { color: var(--ink); }
.postbody ul, .postbody ol { padding-left: 1.3em; }
.postbody li + li { margin-top: .5em; }
.postbody a { color: var(--teal-dark); text-decoration: underline; font-weight: 700; }
.postbody a:hover { color: var(--coral); }
.postbody code {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 7px; font-size: .88em;
}

/* --- the template the piece is about --- */
.postbuy {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px clamp(16px, 2.4vw, 26px); align-items: center;
  max-width: 68ch; margin: 44px auto 0;
  background: var(--surface); border: 2px solid var(--mint);
  border-radius: var(--radius-lg); padding: 20px clamp(18px, 2.4vw, 24px);
}
.postbuy__media { display: block; border-radius: 16px; overflow: hidden; background: var(--white); }
.postbuy__media img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.postbuy__kicker {
  margin: 0 0 4px; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-dark);
}
.postbuy__title { font-size: 1.15rem; margin: 0 0 4px; }
.postbuy__title a { color: inherit; }
.postbuy__title a:hover { color: var(--coral); }
.postbuy__sub { margin: 0 0 8px; font-size: .9rem; color: var(--ink-soft); }
.postbuy__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.postbuy__act { display: flex; flex-direction: column; gap: 8px; }
.postbuy__act .btn { white-space: nowrap; }

.postmore { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .postlead { grid-template-columns: 1fr; }
  .postbuy { grid-template-columns: 72px minmax(0, 1fr); }
  .postbuy__act { grid-column: 1 / -1; flex-direction: row; }
  .postbuy__act .btn { flex: 1 1 0; }
}
@media (max-width: 520px) {
  .postbuy__act { flex-direction: column; }
}

/* ------------------------------------------------------- answer dialogues */
/* A native <dialog>: focus trapping, Escape to close and the backdrop all come
   with it, and none of them are worth reimplementing badly. */
.note {
  border: 0; padding: 0; background: none;
  width: min(440px, calc(100vw - 32px));
  color: var(--ink);
  /* The reset up at the top of this file zeroes every margin, which takes out
     the `margin: auto` a dialog is centred by. Put back explicitly. */
  margin: auto;
  max-height: calc(100vh - 32px);
}
.note::backdrop {
  background: rgba(8, 50, 44, .55);
  backdrop-filter: blur(3px);
}
.note__box {
  position: relative; text-align: center;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px rgba(8, 50, 44, .28);
  padding: 34px 28px 26px;
}
.note__icon {
  width: 62px; height: 62px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.9rem; font-weight: 800; line-height: 1;
}
.note--good .note__icon { background: var(--mint);  color: #0A5F55; }
.note--bad  .note__icon { background: #FBE7E3; color: #98301F; }

.note__title { font-size: 1.35rem; margin: 0 0 8px; }
.note__text  { color: var(--ink-soft); margin: 0 0 22px; }

.note__list {
  list-style: none; margin: 0 0 22px; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.note__list li {
  position: relative; padding-left: 24px; color: var(--ink-soft); font-size: .94rem;
}
.note__list li::before {
  content: '•'; position: absolute; left: 6px; top: -1px;
  color: var(--coral); font-weight: 800;
}

.note__x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.note__x:hover { background: var(--surface); color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .note[open] { animation: note-in .22s ease-out; }
}
@keyframes note-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.alert {
  border-radius: var(--radius); padding: 14px 20px; margin: 16px 0; font-size: .92rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface);
}
.alert a { text-decoration: underline; font-weight: 800; }
.alert--success { background: var(--mint); border-color: #B4E4DC; color: #0A5F55; }
.alert--error   { background: #FBE7E3; border-color: #F3CBC3; color: #98301F; }
.alert--warn    { background: var(--cream); border-color: #F4E0B4; color: #8A6414; }
.alert--info    { background: #E7F0FF; border-color: #C9DDFB; color: #1F4E93; }
.alert code { background: rgba(0,0,0,.07); padding: 2px 7px; border-radius: 6px; font-size: .88em; }

/* The photo picker states its own problems now that there is no toast. */
.dropzone__error {
  margin-top: 8px; padding: 9px 13px; border-radius: 12px;
  background: #FBE7E3; color: var(--danger); font-size: .82rem; font-weight: 700;
}


/* ------------------------------------------------------------ custom build */
.section__head--center { justify-content: center; text-align: center; }
.section__head--center p { margin-inline: auto; max-width: 56ch; }

.cb-hero {
  background:
    radial-gradient(900px 420px at 82% -10%, var(--peach) 0%, transparent 60%),
    radial-gradient(700px 380px at 6% 6%, var(--mint) 0%, transparent 58%),
    var(--white);
  padding: clamp(40px, 6vw, 84px) 0 clamp(34px, 5vw, 66px);
  text-align: center;
}
.cb-hero__inner { max-width: 760px; }
.cb-hero h1 { margin: 16px auto 16px; max-width: 18ch; }
.cb-hero p { color: var(--ink-soft); font-size: 1.04rem; max-width: 54ch; margin: 0 auto 26px; }

/* Three short promises under the button, so the hero closes on something
   concrete rather than a stretch of empty background. */
.cb-chips {
  list-style: none; padding: 0; margin: 26px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
}
.cb-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 7px 15px; font-size: .82rem; font-weight: 700; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.cb-chips svg { color: var(--teal); flex: none; }

/* steps ------------------------------------------------------------------- */
.cb-steps {
  list-style: none; padding: 0; margin: 34px 0 0;
  /* auto-fit rather than a fixed 3: the steps are editable, so two or four
     have to lay out just as well as three. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.cb-step {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 24px 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cb-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cb-step__n {
  position: absolute; top: -18px; left: 24px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--mint);
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}
.cb-step strong { display: block; font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; margin-bottom: 6px; }
.cb-step p { color: var(--ink-soft); font-size: .93rem; }

/* plans ------------------------------------------------------------------- */
.cb-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.cb-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px;
}
.cb-plan h3 { font-size: 1.15rem; }
.cb-plan--popular {
  border-color: var(--coral); border-width: 2px; box-shadow: var(--shadow-lg);
  transform: translateY(-10px);            /* the one we want read first */
}
.cb-plan__rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0 2px; }
.cb-plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: #fff; border-radius: var(--pill);
  padding: 4px 14px; font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cb-plan__price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.cb-plan__price strong { font-family: var(--font-head); font-size: 2.3rem; font-weight: 600; line-height: 1; }
.cb-plan__price--word { font-size: 1.6rem !important; }
.cb-plan__price span { color: var(--ink-faint); font-size: .82rem; font-weight: 700; }
.cb-plan .ticks { flex: 1; margin-bottom: 20px; }

/* why --------------------------------------------------------------------- */
.cb-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cb-why li {
  position: relative; background: var(--surface); border-radius: var(--radius-lg);
  padding: 26px 20px 22px; overflow: hidden;
}
/* Written as li.<class> so they outrank the plain ".cb-why li" above. */
.cb-why li.cb-why--mint  { background: var(--mint); }
.cb-why li.cb-why--cream { background: var(--cream); }
.cb-why li.cb-why--peach { background: var(--peach); }
.cb-why li.cb-why--sky   { background: #E7F0FF; }
/* One quiet accent per card — the wording is editable, so nothing here can
   depend on what any particular card says. */
.cb-why__mark {
  display: block; width: 26px; height: 4px; border-radius: var(--pill);
  background: var(--ink); opacity: .35; margin-bottom: 14px;
}
.cb-why strong { display: block; font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.cb-why span { color: var(--ink-soft); font-size: .9rem; }

/* form and closing band --------------------------------------------------- */
.cb-formwrap { max-width: 700px; }
.cb-form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.cb-final {
  position: relative; overflow: hidden;
  background:
    radial-gradient(520px 260px at 88% -30%, rgba(255,107,74,.42) 0%, transparent 60%),
    radial-gradient(460px 240px at 4% 120%, rgba(15,179,161,.38) 0%, transparent 62%),
    var(--ink);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 48px); text-align: center;
}
.cb-final h2 { color: #fff; max-width: 20ch; margin: 0 auto 10px; }
.cb-final p { color: var(--mint); margin-bottom: 22px; }

@media (max-width: 900px) {
  .cb-steps, .cb-why { grid-template-columns: repeat(2, 1fr); }
  .cb-plans { grid-template-columns: 1fr; gap: 26px; }
  .cb-plan--popular { transform: none; }   /* stacked, a lift only looks like a gap */
}
@media (max-width: 560px) {
  .cb-steps, .cb-why { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- chat */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 150; }

.chat__launcher {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border-radius: var(--pill);
  background: var(--ink); color: #fff; font-weight: 800; font-size: .92rem;
  box-shadow: var(--shadow-lg); transition: transform .18s, background .18s;
}
.chat__launcher:hover { transform: translateY(-2px); background: var(--teal-dark); }
.chat__launcher-icon { display: grid; place-items: center; }
.chat.is-open .chat__launcher { background: var(--ink); }

.chat__panel {
  position: absolute; right: 0; bottom: 62px;
  width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--ink); color: #fff; flex: none;
}
.chat__who { flex: 1; min-width: 0; }
.chat__head strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.chat__head small { display: block; font-size: .76rem; color: var(--mint); }
.chat__avatar {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--coral); color: #fff; border-radius: var(--pill);
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
}

.chat__intake { padding: 20px 18px; display: grid; gap: 6px; background: var(--surface); flex: 1; align-content: start; }
.chat__intro { font-size: .88rem; color: var(--ink-soft); margin-bottom: 6px; }
.chat__intake label { font-size: .78rem; font-weight: 800; margin-top: 6px; }
.chat__intake input {
  width: 100%; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--white); outline: none; font-size: .9rem;
}
.chat__intake input:focus { border-color: var(--teal); }
.chat__intake small { font-size: .72rem; color: var(--ink-faint); margin: 4px 0 10px; }
.chat__error {
  background: #FBE7E3; border: 1px solid #F3CBC3; color: #98301F;
  font-size: .8rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; margin-bottom: 8px;
}
.chat__close { color: #fff; font-size: 1.5rem; line-height: 1; width: 30px; height: 30px; border-radius: var(--pill); }
.chat__close:hover { background: rgba(255,255,255,.14); }

.chat__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface);
}
.chat__msg { max-width: 84%; display: flex; flex-direction: column; gap: 3px; }
.chat__msg p {
  padding: 10px 14px; border-radius: 16px; font-size: .89rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.chat__msg--user { align-self: flex-end; align-items: flex-end; }
.chat__msg--user p { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.chat__msg--ai p, .chat__msg--agent p {
  background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.chat__msg--agent p { background: var(--mint); border-color: #B4E4DC; }
.chat__meta { font-size: .68rem; color: var(--ink-faint); font-weight: 700; padding: 0 4px; }
.chat__msg.is-pending p { opacity: .6; }
/* A real person has taken over — mark the header so it is obvious. */
.chat.is-human .chat__avatar { background: var(--teal-dark); }

.chat__typing p { display: flex; gap: 4px; align-items: center; padding: 14px; }
.chat__typing span {
  width: 6px; height: 6px; border-radius: var(--pill); background: var(--ink-faint);
  animation: chatDot 1.2s infinite ease-in-out;
}
.chat__typing span:nth-child(2) { animation-delay: .15s; }
.chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat__form { padding: 12px; border-top: 1px solid var(--line); background: var(--white); flex: none; }
.chat__identity { margin-bottom: 8px; }
.chat__identity input {
  width: 100%; padding: 9px 14px; border: 2px solid var(--line); border-radius: 12px;
  outline: none; font-size: .86rem;
}
.chat__identity input:focus { border-color: var(--teal); }
.chat__row { display: flex; gap: 8px; align-items: flex-end; }
.chat__row textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 11px 14px;
  border: 2px solid var(--line); border-radius: 14px; outline: none; font-size: .89rem;
  font-family: var(--font-body); line-height: 1.4;
}
.chat__row textarea:focus { border-color: var(--teal); }
.chat__row button {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--ink); color: #fff; border-radius: var(--pill); transition: background .16s;
}
.chat__row button:hover { background: #0b463d; }
.chat__row button:disabled { opacity: .55; cursor: not-allowed; }
/* A dot on the avatar when a real person is watching the inbox. The assistant
   never gets one — it is always on, so the light would mean nothing. */
.chat__avatar { position: relative; }
.chat.is-online .chat__avatar::after,
.chat.is-offline .chat__avatar::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--ink-faint);
}
.chat.is-online .chat__avatar::after { background: #43D9A3; }

/* Shown in place of the composer once a conversation has been closed. */
.chat__over {
  padding: 16px 18px; border-top: 1px solid var(--line); background: var(--surface);
}
.chat__over p {
  font-size: .85rem; color: var(--ink-soft); font-weight: 600;
  margin-bottom: 12px; text-align: center;
}

/* Unread count on the closed launcher — otherwise a reply arrives unseen. */
.chat__launcher { position: relative; }
.chat__unread {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--pill);
  background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800;
  border: 2px solid #fff;
}

/* Starter questions: one tap instead of an empty box. */
.chat__quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; }
.chat__quick-btn {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 7px 13px; font-size: .8rem; font-weight: 700; color: var(--ink-soft);
  transition: border-color .15s, color .15s;
}
.chat__quick-btn:hover { border-color: var(--teal); color: var(--ink); }

/* Score the conversation once it has been closed. */
.chat__rate { padding: 4px 0 12px; text-align: center; }
.chat__rate p { font-size: .85rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.chat__stars { display: flex; justify-content: center; gap: 4px; }
.chat__stars button {
  font-size: 1.5rem; line-height: 1; color: var(--line);
  transition: transform .12s ease, color .12s ease;
}
.chat__stars button:hover { transform: scale(1.15); color: var(--yellow); }
.chat__stars button.is-on { color: var(--yellow); }

/* ------------------------------------------------------ chat attachments */
.chat__attach {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--ink-faint); cursor: pointer; transition: background .15s, color .15s;
}
.chat__attach:hover { background: var(--surface); color: var(--ink); }
.chat__attach .hp-label { position: absolute; left: -9999px; }

.chat__file {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding: 7px 10px 7px 13px;
  background: var(--surface); border-radius: var(--pill);
  font-size: .78rem; font-weight: 700; color: var(--ink-soft);
}
.chat__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__file button {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); color: var(--ink-faint); font-size: 1rem; line-height: 1;
}
.chat__file button:hover { background: var(--danger); color: #fff; }

.chat__shot {
  display: block; max-width: 100%; width: 190px; border-radius: 12px;
  margin-top: 6px; cursor: zoom-in; background: var(--surface);
}
.chat__doc {
  display: inline-block; margin-top: 6px; padding: 8px 13px;
  background: rgba(255,255,255,.22); border-radius: 12px;
  font-size: .82rem; font-weight: 700; text-decoration: underline;
  overflow-wrap: anywhere;
}
.chat__msg--user .chat__doc { background: rgba(255,255,255,.25); }
.chat__msg--ai .chat__doc, .chat__msg--agent .chat__doc { background: var(--white); color: var(--ink); }

.chat__note { font-size: .7rem; color: var(--ink-faint); margin-top: 8px; text-align: center; }

@media (max-width: 460px) {
  .chat { right: 12px; bottom: 12px; }
  .chat__panel { height: min(500px, calc(100vh - 110px)); }
  .chat__launcher-text { display: none; }
  .chat__launcher { padding: 14px; }
}

/* -------------------------------------------------------------------- trust */
.trust {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(30px, 4vw, 46px) 0;
}
.trust__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.trust__item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 22px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.trust__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }

.trust__icon {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 15px; transition: transform .2s;
}
.trust__item:hover .trust__icon { transform: scale(1.06) rotate(-3deg); }
.trust__icon--mint  { background: var(--mint);  color: var(--teal-dark); }
.trust__icon--peach { background: var(--peach); color: var(--coral-dark); }
.trust__icon--cream { background: var(--cream); color: #A9761A; }
.trust__icon--sky   { background: #E7F0FF;      color: #2F5FD0; }

.trust__text { display: block; min-width: 0; }
.trust__text strong {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; margin-bottom: 4px;
}
/* --ink-soft, not --ink-faint: at this size the faint tone is only ~3.1:1 on
   white, below the 4.5:1 WCAG AA threshold. */
.trust__text span { display: block; font-size: .85rem; line-height: 1.5; color: var(--ink-soft); }

/* ------------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: #CFE6E1; padding: 52px 0 22px; }
.summary__row--hint { color: var(--ink-faint); }
.summary__row--hint strong { font-weight: 700; }
.summary__row em { font-style: normal; color: var(--ink-faint); font-weight: 700; font-size: .84em; }
.field-check {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px;
  padding: 12px 14px; background: var(--surface); border-radius: 12px;
  font-size: .86rem; color: var(--ink-soft); cursor: pointer;
}
.field-check input { flex: none; margin-top: 2px; width: 17px; height: 17px; accent-color: var(--teal); }
.field-check:hover { background: var(--mint); }

.field__opt { font-weight: 600; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.vat-result { font-weight: 700; }
.vat-result--ok { color: var(--teal-dark); }
.vat-result--no { color: var(--danger); }

/* ----------------------------------------------------------------- bundles */
.bundle {
  background: var(--mint); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0;
}
.bundle__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 1rem; margin-bottom: 12px;
}
.bundle__save {
  background: var(--coral); color: #fff; border-radius: var(--pill);
  padding: 3px 12px; font-size: .76rem; font-weight: 800; letter-spacing: .01em;
}
.bundle__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.bundle__list li {
  display: flex; align-items: center; gap: 12px; background: var(--white);
  border-radius: 12px; padding: 8px 12px;
}
.bundle__list a { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.bundle__list img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }
.bundle__list strong { display: block; font-size: .9rem; line-height: 1.3; }
.bundle__list small { color: var(--ink-faint); font-size: .76rem; }
.bundle__list em { font-style: normal; font-weight: 800; font-size: .86rem; flex: none; }
.bundle__foot { margin-top: 12px; font-size: .86rem; color: var(--teal-dark); }
.bundle__foot s { color: var(--ink-faint); }

/* "Goes well with this", under the cart lines. */
.alsobuy { margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.alsobuy h2 { font-size: 1rem; margin-bottom: 12px; }
.alsobuy ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.alsobuy li {
  display: flex; align-items: center; gap: 12px; background: var(--surface);
  border-radius: 12px; padding: 8px 12px;
}
.alsobuy__link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.alsobuy img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }
.alsobuy strong { display: block; font-size: .9rem; line-height: 1.3; }
.alsobuy small { color: var(--ink-soft); font-weight: 700; font-size: .82rem; }
.btn--sm { padding: 8px 16px; font-size: .82rem; }

@media (max-width: 460px) {
  .bundle__list li, .alsobuy li { flex-wrap: wrap; }
  .alsobuy li .btn { width: 100%; }
}

/* ----------------------------------------------------------------- invoice */
.confirm__invoice { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); }
.confirm__invoice a { color: var(--teal-dark); font-weight: 800; }

.invoice-actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 18px; flex-wrap: wrap; }

.invoice {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 44px); max-width: 820px; margin: 0 auto;
}
.invoice__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.invoice__head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.invoice__number { font-family: var(--font-head); font-size: 1.05rem; color: var(--teal-dark); margin-top: 4px; }
.invoice__meta { display: grid; gap: 4px; font-size: .86rem; text-align: right; }
.invoice__meta span { color: var(--ink-faint); margin-right: 8px; }

.invoice__notice {
  margin-top: 18px; padding: 10px 14px; background: var(--cream); color: #8A6414;
  border-radius: 12px; font-size: .84rem; font-weight: 700;
}

.invoice__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; }
.invoice__parties h2 {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.invoice__parties p { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.invoice__parties strong { color: var(--ink); }

.invoice__items { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.invoice__items th {
  text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 8px 10px; border-bottom: 2px solid var(--line);
}
.invoice__items th:not(:first-child), .invoice__items td:not(:first-child) { text-align: right; }
.invoice__items td { padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: .92rem; }

.invoice__totals { display: grid; gap: 8px; max-width: 340px; margin-left: auto; font-size: .92rem; }
.invoice__totals > div { display: flex; justify-content: space-between; gap: 20px; }
.invoice__grand {
  border-top: 2px solid var(--line); padding-top: 10px; margin-top: 4px;
  font-size: 1.08rem; font-weight: 800;
}
.invoice__foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; }
.invoice__small { color: var(--ink-faint); font-size: .8rem; margin-top: 8px; }
.invoice__reverse { background: var(--surface); border-radius: 10px; padding: 10px 14px; font-size: .86rem; }

/* How it was paid, under the totals and aligned with them. Never more than the
   brand and the last four digits — that is all Stripe hands over. */
.invoice__payment {
  max-width: 340px; margin: 10px 0 0 auto; text-align: right;
  font-size: .86rem; color: var(--ink-soft);
}
.invoice__contact { font-size: .88rem; }
.invoice__contact a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }
.invoice__contact a:hover { color: var(--ink); }

/* A payment that was a rehearsal. Peach and coral-bordered, like the other
   warnings on the site — it is a label, not a button, so the one-coral-button
   rule is untouched. */
.testbadge {
  display: inline-block; margin: 0 0 18px;
  background: var(--peach); border: 2px solid var(--coral); border-radius: var(--pill);
  padding: 7px 18px; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral-dark);
}
.testbadge--wide { display: block; text-align: center; }

@media (max-width: 620px) {
  .invoice__parties { grid-template-columns: 1fr; gap: 18px; }
  .invoice__meta { text-align: left; }
  .invoice__totals { max-width: none; }
}

/* What actually comes out of the printer, or a "save as PDF": the document,
   without the site wrapped around it. */
@media print {
  /* One page of A4 or Letter, and nothing on it that is not the document.
     Everything below is tightened just enough to fit: the type is smaller, the
     gaps are narrower, and the parts that would break across a page are told
     not to. */
  @page { size: auto; margin: 10mm; }

  .site-header, .site-footer, .announce, .chat, .invoice-actions, .marquee,
  .cookiebar, .chat__panel, .skip-link { display: none !important; }

  body { background: #fff; font-size: 10pt; line-height: 1.45; }
  .section, .section--tight { padding: 0 !important; }
  .wrap { max-width: none; padding: 0; }

  .invoice {
    border: 0; border-radius: 0; padding: 0; max-width: none;
    /* Nothing inside the document may be split over two sheets. */
    page-break-inside: avoid; break-inside: avoid;
  }
  .invoice__head h1 { font-size: 17pt; margin-bottom: 2px; }
  .invoice__number { font-size: 11pt; margin-top: 2px; }
  .invoice__meta { gap: 2px; font-size: 9pt; }
  .invoice__parties { margin: 12px 0; gap: 16px; }
  .invoice__parties h2 { margin-bottom: 4px; }
  .invoice__parties p { font-size: 9.5pt; line-height: 1.45; }
  .invoice__items { margin-bottom: 10px; }
  .invoice__items th { padding: 5px 8px; border-bottom: 1px solid #999; }
  .invoice__items td { padding: 5px 8px; border-bottom: 1px solid #ddd; font-size: 9.5pt; }
  .invoice__items tr { page-break-inside: avoid; break-inside: avoid; }
  .invoice__totals { gap: 4px; font-size: 9.5pt; }
  .invoice__payment { margin-top: 8px; font-size: 9pt; }
  .invoice__foot { margin-top: 14px; padding-top: 10px; font-size: 9pt; }
  .invoice__foot p { margin: 0 0 4px; }
  .invoice__small { font-size: 8.5pt; margin-top: 4px; }
  .invoice__notice { margin: 10px 0; padding: 8px 12px; font-size: 9pt; }

  /* A badge printed as a pale outline says nothing. Browsers drop backgrounds
     when printing unless they are told to keep them. */
  .testbadge {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    background: #FFE3D6 !important; border-color: #FE694A !important;
    color: #8A2E14 !important; margin-bottom: 12px;
  }

  a[href]::after { content: ''; }
  a { color: inherit; text-decoration: none; }
  .invoice__contact a { text-decoration: underline; }
}

/* ------------------------------------------------------------------ coupon */
.summary__row--off { color: var(--teal-dark); }
.summary__row--off em { font-style: normal; font-weight: 800; letter-spacing: .02em; }

.coupon { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.coupon label { display: block; font-size: .8rem; font-weight: 800; margin-bottom: 8px; }
.coupon__row { display: flex; gap: 8px; }
.coupon__row input {
  flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--white); outline: none; font-size: .9rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .18s;
}
.coupon__row input:focus { border-color: var(--teal); }
.coupon__row .btn { flex: none; padding-inline: 18px; }
.coupon__error { display: block; margin-top: 8px; color: var(--danger); font-size: .8rem; font-weight: 700; }
.coupon__on {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--mint); color: var(--teal-dark); border-radius: 12px;
  padding: 11px 14px; font-size: .86rem;
}
.coupon__on button {
  background: none; border: 0; color: var(--teal-dark); font-weight: 800;
  font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 0;
}
.coupon__on button:hover { color: var(--coral); }

/* Brand, four link columns, then the sign-up — which needs more room than a
   list of one-word links, so it gets its own wider track. */
.footer__grid {
  display: grid; gap: 22px 20px;
  /* Six tracks in one row is tight, so the two that need room get it: the
     brand paragraph and the sign-up. A 130px email field is not a field. */
  /* Brand, three link columns, sign-up. The legal links moved to the bar
     below, which is what freed the room. */
  grid-template-columns: 1.1fr repeat(3, minmax(0, .7fr)) 1.5fr;
}
.footer__brand strong { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: #fff; display: block; margin-bottom: 10px; }
.footer__brand strong em { font-style: normal; color: var(--coral); }
.footer__brand p { font-size: .9rem; max-width: 42ch; opacity: .82; }
.footer__social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer__social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .09); color: var(--mint);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.footer__social a:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); }
.signup { max-width: 34ch; min-width: 0; }
.signup label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: #fff; }
.signup__note { font-size: .84rem; opacity: .78; margin: 4px 0 12px; }
.signup__row { display: flex; gap: 8px; }
.signup__row input {
  flex: 1 1 auto; min-width: 0; padding: 11px 15px; border-radius: var(--pill);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: #fff; font-size: .9rem; outline: none; transition: border-color .18s, background .18s;
}
.signup__row input::placeholder { color: rgba(255,255,255,.5); }
.signup__row input:focus { border-color: var(--mint); background: rgba(255,255,255,.14); }
.signup__row .btn { flex: none; }
@media (max-width: 560px) { .signup__row { flex-direction: column; } .signup__row .btn { width: 100%; } }

.footer__col h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); margin-bottom: 14px; }
.footer__col a { display: block; font-size: .9rem; padding: 5px 0; opacity: .85; }
.footer__col a:hover { color: var(--coral); opacity: 1; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.13); margin-top: 40px; padding-top: 20px; font-size: .82rem; opacity: .8;
}
.footer__legal { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.footer__legal a { opacity: .8; }
.footer__legal a:hover { color: var(--coral); opacity: 1; }
.footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__pay span { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 3px 10px; font-size: .72rem; font-weight: 700; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  /* Let the number of columns follow the width instead of stepping between
     two fixed counts: at 700px four groups fit, at 600 three do, and only a
     phone is down to two. The old jump to two at 700 left half the row empty
     and doubled the height for nothing. */
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  /* An email field cannot live in a 132px track, so it takes two.
     Below 560 the grid is two columns wide, so that is the whole row. */
  .signup { grid-column: span 2; max-width: 42ch; margin-top: 4px; }
  .footer__brand { grid-column: 1 / -1; }
  .searchbox input { width: 110px; }
}

@media (max-width: 900px) {
  .burger { display: flex; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(330px, 86vw); background: var(--white);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 74px 20px 32px; gap: 4px;
    box-shadow: var(--shadow-lg); z-index: 70;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(102%);
    visibility: hidden;                       /* keeps links out of the tab order */
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s;
  }
  .nav__link { padding: 14px 18px; font-size: 1.02rem; }
  .nav__close { display: grid; }

  /* Search is hidden in the header bar on mobile, so it lives in the drawer.
     Scoped to .nav so it beats the `.searchbox { display: none }` rule below,
     which the drawer form would otherwise match too. */
  .nav .searchbox--drawer { display: flex; margin-bottom: 12px; }
  .nav .searchbox--drawer input { width: 100%; }

  /* Account lives in the menu on a phone, where a bare round icon in the bar
     says nothing and costs room next to the cart. */
  .acct-btn { display: none; }
  .nav__account {
    display: block; margin-top: auto; padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .nav__whoami {
    display: block; padding: 0 18px 8px; font-size: .82rem; color: var(--ink-faint);
    overflow-wrap: anywhere;
  }
  .nav__whoami strong { color: var(--ink-soft); }
  /* Not flex children here, so they need telling to stack. */
  .nav__account .nav__link { display: block; }
  .nav__link--quiet { color: var(--ink-faint); font-weight: 700; }

  body.nav-open { overflow: hidden; }
  /* Sits below the header's stacking context (z-index 60) so it can never
     paint over the drawer, which lives inside the header. */
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(8,50,44,.45); z-index: 55;
  }
  .pdp, .cart-layout, .checkout-layout, .contact-layout, .faq-wrap, .spotlight, .reviews, .legal-layout {
    grid-template-columns: 1fr;
  }
  .summary--sticky, .reviews__summary, .legal-side { position: static; }
  .trust__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .trust__item { padding: 16px; gap: 12px; }
  .trust__icon { width: 40px; height: 40px; border-radius: 13px; }
  .searchbox { display: none; }
}

@media (max-width: 700px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .section__head { flex-direction: column; align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; }

  /* Checkout on a phone: show what is being bought before asking for details.
     The submit button lives inside the form, so it stays under the fields. */
  .checkout-layout .summary { order: -1; margin-bottom: 4px; }

  /* iOS Safari zooms the page in whenever a focused input is under 16px, which
     on checkout means the form jumps sideways the moment someone starts typing. */
  .field input, .field textarea, .field select { font-size: 16px; }

  .checkout-form fieldset { padding: 18px 16px 20px; }
  .checkout-form legend { font-size: 1rem; }

  /* Confirmation page: the download button is the whole point of the page, so
     it gets a full-width target instead of a small one adrift under the text. */
  .confirm__panel { padding: 18px 16px; }
  .download { padding: 14px; gap: 10px; }
  .download__info { min-width: 0; }
  .download__info strong { line-height: 1.3; overflow-wrap: anywhere; }
  .download .btn { width: 100%; }

  /* Two closing links at two different widths read as a mistake; stack them. */
  .confirm__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .confirm__cta .btn { width: 100%; }
  /* One shape for every narrow screen: thumbnail, details beside it, then
     quantity and line total underneath. Giving the title a row of its own made
     a tablet row taller than the same row on a phone. */
  .cart-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 10px;
    column-gap: 14px;
    padding: 14px;
  }
  .cart-row__img    { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .cart-row__img img { width: 72px; height: 72px; }
  .cart-row__info   { grid-column: 2; grid-row: 1; }
  .cart-row__remove { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .cart-row__total  { grid-column: 2; grid-row: 2; align-self: center; text-align: left; min-width: auto; }
  .cart-row__title  { line-height: 1.25; display: block; overflow-wrap: anywhere; }
  /* Short links do not need a desktop's gap between them, and the vertical one
     is what made this a 750px wall on a phone. */
  .footer__grid { gap: 22px 16px; }
  .footer__col a { padding: 4px 0; }
  .footer__col h4 { margin-bottom: 10px; }
  .footer__social { margin-top: 14px; }
  .footer__bottom { margin-top: 26px; padding-top: 16px; }

  /* The chat launcher floats over exactly this corner. Without room to sit
     clear of it the last payment badge ends up underneath a button, which is
     the same as not being there at all. */
  .site-footer { padding: 40px 0 92px; }
}

@media (max-width: 560px) {
  /* Four groups across three columns strands the fourth on a row of its own,
     which is taller than two even rows of two. */
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .brand__text small { display: none; }
  .hero__cta { gap: 10px; margin: 20px 0 18px; }
  .hero__cta .btn { width: 100%; }
  /* On the narrowest screens the headline should use every pixel it has. */
  .hero__copy h1 { max-width: none; }
  .pdp__form { flex-wrap: wrap; }
  /* A cart line stays a line on a phone: small thumbnail, details beside it,
     the price underneath. Blowing the picture up to full width turned every row
     into half a screen — three items and the totals were nowhere near the first
     scroll. */
  /* Same shape, tightened for a phone. */
  .cart-row { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px; }
  .cart-row__img img { width: 64px; height: 64px; }
  .cart-row__title  { font-size: .95rem; }
  .cart-row__info p { line-height: 1.35; margin-top: 2px; }
  .cart-row__unit   { font-size: .78rem; }

  /* Thumb-sized targets, side by side, instead of two stacked half-width ones. */
  .cart-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cart-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ================================================================ legal, v2
   The policy pages are now full HTML documents (content/legal/), so they bring
   headings, ordered lists and a table that the older mini-markup never
   produced. Everything below reuses the variables the rest of the site already
   uses — no new colours, no new type scale. */

.legal-page { max-width: 72ch; }
.legal-page > :first-child { margin-top: 0; }

.legal .legal-page h2 {
  font-family: var(--font-head);
  font-size: 1.22rem;
  margin: 30px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal .legal-page > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal .legal-page h3 { font-size: 1.02rem; margin: 20px 0 6px; }

.legal-page ol { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); display: grid; gap: 8px; }
.legal-page ol li { padding-left: 0; }
.legal-page ol li::before { content: none; }

/* A policy table is read by scanning across a row, so on a narrow screen it
   scrolls sideways rather than folding each cell onto its own line. */
.legal-table-wrap,
.legal-page .legal-table,
.legal-page table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-page table {
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: .92rem;
  min-width: 100%;
}
.legal-page th,
.legal-page td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
  white-space: normal;
}
.legal-page th { background: var(--surface); color: var(--ink); font-weight: 800; }

.legal-page .legal-contact {
  margin-top: 26px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
}

/* ------------------------------------------------- promotion + buying notes */
/* The terms of a sale, printed beside the sale. Quiet enough not to fight the
   price, readable enough to count as disclosed. */
.sale-note {
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.sale-note a { color: var(--ink-soft); text-decoration: underline; font-weight: 700; }
.sale-note a:hover { color: var(--coral); }
.sale-note--compact { font-size: .72rem; margin-top: 6px; }

/* ------------------------------------------------------- checkout consent */
.checkout-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .87rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}
.checkout-consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--teal-dark); }
.checkout-consent a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }

/* -------------------------------------------------------- business details */
.contact-business p { font-size: .9rem; line-height: 1.7; }
.contact-business p + p { margin-top: 10px; color: var(--ink-soft); }

/* The proof line under the hero carries no stars any more, so it no longer
   needs the gap that sat between them and the text. */
.hero__proof--plain { gap: 0; }

/* The footer's legal line now names the company and address as well, which is
   two lines of small print rather than one. */
.site-footer .footer__bottom p { line-height: 1.6; }
.site-footer .footer__legal { flex-wrap: wrap; }

@media (max-width: 720px) {
  .legal-page { max-width: none; }
  .legal-page table { font-size: .85rem; }
  .legal-page th, .legal-page td { padding: 8px 10px; }
}

/* ---------------------------------------------- hero eyebrow on small phones */
/* Three segments separated by "·" wrap onto three lines at 390px and read as a
   broken list. The later ones are the least important, so below 480px only the
   first two are shown; nothing is lost, the same promises appear again in the
   trust strip further down. */
.eyebrow--parts { display: block; }
.eyebrow__part  { white-space: nowrap; }

@media (max-width: 480px) {
  .eyebrow--parts .eyebrow__part--3,
  .eyebrow--parts .eyebrow__part--4 { display: none; }
}

/* ===================================================== Part B — layout fixes
   Everything below answers one of the problems found in the visual review on
   16 September 2026 (desktop 1920px and phone 390px). */

/* ------------------------------------------------------- grids with few items */
/* Three cards laid into four fixed columns left a quarter of the row empty, and
   two collection tiles left half of it. The section now takes as many columns
   as it has cards, up to four, each capped so two cards do not stretch into
   billboards, and the whole block centres itself. */
.grid--fit {
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  max-width: calc(var(--cols, 4) * 360px + (var(--cols, 4) - 1) * 22px);
  margin-inline: auto;
}

/* "View all →" lines up with the right edge of the grid rather than the edge of
   the page, so it reads as belonging to the row under it. */
.section__head { max-width: 100%; }
.grid--fit + .section__head, .section__head:has(+ .grid--fit) {
  max-width: calc(var(--cols, 4) * 360px + (var(--cols, 4) - 1) * 22px);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .grid--fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; }
  .section__head:has(+ .grid--fit) { max-width: none; }
}

/* ------------------------------------------------- badges below the picture */
/* The listing artwork has the app's name printed into it, and the badges used
   to sit exactly on top of that. They now open the card body: still the first
   thing read, covering nothing. */
.card__flags {
  position: static; display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 6px; margin-bottom: 2px;
}
.card__format {
  font-size: .78rem; color: var(--ink-faint); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------- how it works */
.howto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  list-style: none; padding: 0; margin: 0; counter-reset: none;
}
.howto__step {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.howto__n {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--pill); background: var(--mint); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
}
.howto__text { display: grid; gap: 4px; }
.howto__text strong { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.howto__text span { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

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

/* --------------------------------------------------------- hero, desktop */
/* At 1920×925 and 1366×768 the card's "View product" button fell below the
   fold, so the first screen ended on a cut-off card. Less vertical padding and
   a capped image height bring the whole card back inside the viewport; the
   image is anchored to its top because that is where the app's name sits. */
.hero { padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.2vw, 44px); }

/* --------------------------------------------------------- hero, phone */
@media (max-width: 640px) {
  /* The order a phone reads in: what this is, the promise, one button, then
     the app itself — so something you can buy is on screen without scrolling.
     The secondary button and the proof line both appear again further down the
     page, so nothing is lost by dropping them here. */
  .hero__inner { grid-template-columns: 1fr; gap: 20px; }
  .hero__copy  { display: contents; }
  .eyebrow--parts { order: 1; }
  .hero__copy h1  { order: 2; margin: 8px 0 10px; max-width: none; }
  .hero__text     { order: 3; font-size: 1rem; }
  .hero__cta      { order: 4; margin: 16px 0 4px; }
  .hero__proof    { order: 6; }
  /* The order belongs on the wrapper, which is the grid item — the card is
     inside it now, together with the promotion terms, and an order set on the
     card itself does nothing while the wrapper sits at the default 0 and lands
     above the headline. */
  .hero__cardwrap { order: 5; }
  .hero__card     { transform: none; }

  .hero__cta .btn--ghost { display: none; }
  .hero__proof { display: none; }

  .hero { padding: 16px 0 24px; }
}

/* ------------------------------------------------------- the help button */
@media (max-width: 768px) {
  /* On a phone this sat on top of "Add to cart" and on the footer links. It is
     reachable from the menu instead — see the nav — and the footer still
     carries Contact. Opening it from the menu puts it back for that visit only,
     and only as the panel, never as the floating pill. */
  .chat { display: none; }
  .chat.is-forced { display: block; }
  .chat.is-forced .chat__launcher { display: none; }
}

/* On a wide screen it stays, but steps out of the way over the footer, where a
   dark pill on a dark background is invisible and in the way at once. */
.chat.is-over-footer .chat__launcher {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, visibility .2s, transform .2s;
}

/* "Need help?" inside the mobile menu, where the floating button used to be. */
.nav__help {
  display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
@media (max-width: 768px) {
  .nav__help { display: block; }
}

/* ------------------------------------------------------ collection artwork */
/* **Deprecated — the tiles are a collage of product pictures now.** Kept beside
   collection_art() in includes/functions.php, which is kept for the same
   reason: the drawn marks are still worth having if a tile ever needs an icon
   again. Nothing renders these classes today.

   A drawn mark on the tile's own pale-green ground, at the same ratio as a
   photograph so a collection with a picture and one without sit level in the
   same row. */
.collection-card__icon {
  display: grid; place-items: center; aspect-ratio: 4/3;
  background: var(--mint); color: var(--ink);
}
.collection-card--lg .collection-card__icon { aspect-ratio: 16/10; }
.collection-card__icon svg { width: 34%; height: auto; max-width: 96px; opacity: .92; }

/* ======================================================== cookie banner */
/* A bar across the bottom on a wide screen, a sheet on a phone. It must not sit
   on top of the checkout consent checkbox or the pay button, so on the cart and
   checkout pages it shrinks to a single line. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(8,50,44,.10);
  padding: 14px clamp(16px, 4vw, 34px);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 min(46ch, 100%); margin: 0;
  font-size: .87rem; line-height: 1.55; color: var(--ink-soft);
}
.cookie-banner__text a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }

/* Reject and Accept are the same size, the same weight and next to each other.
   Settings is the quiet third option. */
.cookie-banner__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cookie-banner__actions .btn { min-width: 116px; }

.cookie-banner__settings {
  max-width: var(--wrap); margin: 14px auto 0; padding-top: 14px;
  border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start;
}
.cookie-banner__settings[hidden] { display: none; }
.cookie-banner__settings label {
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--ink-soft); cursor: pointer;
}
.cookie-banner__settings label span { color: var(--ink-faint); }
.cookie-banner__settings input { width: 17px; height: 17px; accent-color: var(--ink); }

/* On the two pages where a button matters more than this does. */
body[data-route="cart"] .cookie-banner,
body[data-route="checkout"] .cookie-banner { padding: 10px clamp(12px, 3vw, 24px); }
body[data-route="cart"] .cookie-banner__text,
body[data-route="checkout"] .cookie-banner__text { font-size: .8rem; }

@media (max-width: 760px) {
  .cookie-banner { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px; }
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner__actions .btn--link { grid-column: 1 / -1; }
  .cookie-banner__actions .btn { min-width: 0; }
}

/* On a short laptop screen the hero card ended exactly at the fold — the
   "View product" button's last pixel was the viewport's last pixel, which reads
   as a cut-off card rather than a complete one. The picture gives up a little
   height so the card finishes with room to spare. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero { padding: 16px 0 22px; }
  .hero__cardbody { padding: 13px 16px 15px; gap: 6px; }
  .hero__cardtitle { font-size: 1rem; }
}

/* ===================================================== the Tools dropdown */
/* The shop is no longer one kind of thing, so the menu entry opens onto the
   formats that actually have something on the shelf. Never coral: it is
   navigation, not the page's action. */
.nav__tools { position: relative; display: flex; align-items: center; }

.nav__link--tools {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .93rem; color: var(--ink-soft);
}
.nav__link--tools:hover { background: var(--surface); color: var(--ink); }
.nav__caret { transition: transform .18s; flex: none; }
[data-tools].is-open .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 120;
  min-width: 232px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, visibility .16s, transform .16s;
}
[data-tools].is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__panel-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 12px;
  font-size: .9rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
}
.nav__panel-link:hover,
.nav__panel-link:focus-visible { background: var(--surface); color: var(--ink); outline: none; }
.nav__panel-link.is-active { background: var(--mint); color: var(--ink); }
/* "All tools" is the way back to everything, so it reads a step stronger than
   the formats under it. */
.nav__panel-link--all { color: var(--ink); }
.nav__panel-link--all + .nav__panel-link { margin-top: 4px; }
.nav__panel-count { font-weight: 700; font-size: .8rem; color: var(--ink-faint); }

/* On a phone the whole nav is already a drawer, so a floating panel inside it
   would be a panel inside a panel. It becomes a plain indented list, open from
   the start — a visitor who opened the menu is looking for exactly this. */
@media (max-width: 900px) {
  .nav__tools { display: block; width: 100%; }
  .nav__link--tools { width: 100%; justify-content: space-between; min-height: 44px; }
  .nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: 2px 0 6px 14px; padding: 0 0 0 8px; min-width: 0;
  }
  .nav__panel-link { min-height: 44px; }
  /* The caret is a control on a desktop and decoration here. */
  [data-tools]:not(.is-open) .nav__panel { opacity: 1; visibility: visible; }
}

/* ------------------------------------------------------- format on a card */
/* Above the title, in the eyebrow style the rest of the site uses. Ink, not
   coral — a card already carries a coral sale badge, and two accents on one
   tile is two things competing to be read first. */
.card__format-label,
.pdp__format-label {
  display: inline-block;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--teal-dark);
}
.card__format-label:hover,
.pdp__format-label:hover { color: var(--ink); }
.pdp__format-label { font-size: .72rem; margin-bottom: 6px; }

.footer__sub { padding-left: 12px; opacity: .85; font-size: .88rem; }

/* ------------------------------------------------------------- legal note */
/* The "by buying you agree…" line, wherever it appears. Always its own line
   below the whole button group, never a flex or grid sibling of a button — put
   beside one it reads as part of the button rather than as a condition of it. */
.legal-note {
  display: block;
  margin: 12px 0 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
}
.legal-note a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }
.legal-note a:hover { color: var(--ink); }

/* ------------------------------------------------------ the free-download box */
/* A reader leaves an email and the document arrives. Inside an article it sits
   between two paragraphs, so it has to read as an offer rather than as an
   advert: mint, rounded, no coral — on a blog post the one coral button is the
   Add to cart on the product card at the end. */
.freebie {
  display: block; margin: 28px 0; padding: 22px 24px;
  background: var(--mint); border-radius: var(--radius-lg);
}
.freebie__tag {
  margin: 0 0 6px; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark);
}
.freebie__title {
  margin: 0; font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; color: var(--ink);
}
.freebie__what { margin: 6px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }

.freebie__form { display: flex; gap: 10px; margin: 14px 0 0; flex-wrap: wrap; }
.freebie__field { flex: 1 1 220px; min-width: 0; }
.freebie__field input {
  width: 100%; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--pill);
  background: var(--white); outline: none; font-size: .94rem; font-weight: 600;
  transition: border-color .18s;
}
.freebie__field input:focus { border-color: var(--teal); }
.freebie__form .btn { flex: none; }

.freebie__small { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.freebie__small a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; }
.freebie__done {
  margin: 14px 0 0; padding: 12px 16px; background: var(--white); border-radius: var(--radius);
  font-size: .92rem; line-height: 1.55; font-weight: 600; color: var(--teal-dark);
}
.freebie__error { margin: 12px 0 0; font-size: .88rem; font-weight: 700; color: var(--danger); }

/* On its own page it is the page, so it gets room and a heading. */
.freebie--page { max-width: 640px; margin-inline: auto; padding: 32px; text-align: center; }
.freebie--page h1 { margin: 0 0 8px; }
.freebie--page .freebie__form { justify-content: center; }
.freebie--page .freebie__what { max-width: 48ch; margin-inline: auto; }

/* Named for a screen reader, out of the way of everybody else. */
.sr-only {
  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;
}

/* ------------------------------------------------------------- the demo link */
/* Under both buy buttons, the full width of them, and outline — never coral.
   The one coral button on a product page is Add to cart, and a free demo that
   shouted louder than the thing being sold would be the wrong emphasis. */
.pdp__demo { display: flex; margin-top: 10px; }
.btn__icon { flex: none; }

/* What the link does, on its own line under it. Not part of the button: read on
   the same line it would look like a second label. */
.buy-caption {
  display: block; margin: 6px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-align: center;
}

/* -------------------------------------------------- spotlight on a phone */
@media (max-width: 900px) {
  .section--spotlight { padding: 32px 0; }
  .spotlight { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .spotlight__media { max-width: 320px; margin-inline: auto; width: 100%; }
  /* Three lines for the heading here: at this width two would cut a real
     sentence in half. */
  .spotlight__title { -webkit-line-clamp: 3; max-height: 3.42em; }
  .spotlight__text  { -webkit-line-clamp: 3; max-height: 4.65em; }
  /* On a 360px screen the three parts of the price row wrapped onto two lines,
     which cost more height than the type saved. */
  .spotlight__price { gap: 10px; }
  .spotlight__price .price--xl { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .spotlight__btn { justify-self: stretch; width: 100%; }
}