/* Globl Travel storefront - shared styles for every public page.

   The layout follows a classic shop theme: an offer strip, a centred-logo
   header with icons, a link bar, product pages with a gallery beside a buy
   panel, a slide-in basket and a four-column footer. The colours are ours - 
   night background, mint accent - because the brand is dark everywhere else
   (the logo, the guides, the Instagram) and a pastel shop would look like a
   different company.

   Linked, not inlined: every page shares it, so one cached request beats
   repeating ~20KB of CSS in each HTML response. */

:root {
  --bg:        #0a0c10;
  --bg-2:      #0d1116;
  --surface:   #11161d;
  --surface-2: #161c24;
  --line:      rgba(255,255,255,.085);
  --line-2:    rgba(255,255,255,.16);
  --text:      #f3f5f7;
  --soft:      #c9d2da;
  --muted:     #97a3af;
  --accent:    #35E4A3;
  --accent-2:  #1fb37f;
  --accent-ink:#04140d;
  --accent-wash: rgba(53,228,163,.09);
  --accent-line: rgba(53,228,163,.34);
  --amber:     #ffc078;
  --danger:    #ff7a7a;
  /* Christmas, and only Christmas. Berry and candlelight rather than the mint
     accent: the accent already means "buy this" on every page, and giving it a
     second meaning would blunt both. Deep enough to read as an object on a
     near-black ground, and far enough from --danger that a seasonal edition is
     never mistaken for a warning. */
  --festive:      #a71d3a;
  --festive-2:    #5f0f22;
  --festive-ink:  #ffe9c9;
  --festive-line: rgba(255,233,201,.34);

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --page: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 56px;
  --edge: clamp(16px, 7.5vw, 150px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 990px) { :root { --header-h: 74px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(53,228,163,.28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
body.is-locked { overflow: hidden; }
/* Components set display: flex/grid, which would beat the hidden attribute. */
[hidden] { display: none !important; }

.page-width { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.015em; text-wrap: balance; margin: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .12s ease, box-shadow .18s ease;
}
.button svg { width: 18px; height: 18px; flex: none; }
.button:active { transform: translateY(1px); }
.button--solid { background: var(--accent); color: var(--accent-ink);
                 box-shadow: 0 10px 28px -14px rgba(53,228,163,.8); }
.button--solid:hover { background: #4cf0b3; box-shadow: 0 14px 34px -14px rgba(53,228,163,.95); }
/* The shop-theme "Add to cart": an outline button that fills on hover. */
.button--outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.button--outline:hover { background: var(--accent); color: var(--accent-ink); }
.button--ghost { border-color: var(--line-2); color: var(--text); background: rgba(255,255,255,.03); }
.button--ghost:hover { border-color: var(--accent-line); color: var(--accent); }
.button--block { width: 100%; }
.button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.button.is-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
             text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,12,16,.9);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* Full viewport width (not capped at --page) so the icons sit near the edges. */
  height: var(--header-h); padding-inline: clamp(8px, 1.6vw, 24px);
}
.header__left, .header__right { display: flex; align-items: center; gap: 4px; }
.header__right { justify-content: flex-end; }
.header__logo { display: block; line-height: 0; }
.header__logo img { height: 26px; width: auto; }
@media (min-width: 990px) { .header__logo img { height: 34px; } }

.icon-button {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.icon-button svg { width: 22px; height: 22px; }
.icon-button:hover { color: var(--accent); background: rgba(255,255,255,.04); }
/* Instagram sits in a filled circle, like the social badge on the reference
   theme - it is the one outward link in the bar and should look like it. */
.icon-button--social { width: 36px; height: 36px; margin-inline: 4px;
                       background: var(--accent); color: var(--accent-ink); }
.icon-button--social svg { width: 18px; height: 18px; }
.icon-button--social:hover { background: #4cf0b3; color: var(--accent-ink); }
.basket-count {
  position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 700 11px/19px var(--font-display); text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.basket-count[hidden] { display: none; }
.basket-count.is-bumped { animation: bump .45s var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } }

.only-desktop { display: none !important; }
@media (min-width: 990px) {
  .only-desktop { display: inline-grid !important; }
  .only-mobile { display: none !important; }
}

/* Link bar under the header - desktop only; phones get the drawer. */
.menu-bar { display: none; border-top: 1px solid var(--line); background: var(--bg-2); }
@media (min-width: 990px) { .menu-bar { display: block; } }
.menu-bar ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter);
               display: flex; justify-content: center; gap: clamp(26px, 3.4vw, 52px); }
.menu-bar a {
  position: relative; display: block; padding: 15px 0 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--soft);
  transition: color .15s ease;
}
.menu-bar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
                     background: var(--accent); transform: scaleX(0); transform-origin: center;
                     transition: transform .22s var(--ease); }
.menu-bar a:hover { color: var(--text); }
.menu-bar a:hover::after, .menu-bar a[aria-current="page"]::after { transform: scaleX(1); }
.menu-bar a[aria-current="page"] { color: var(--accent); }

/* Desktop: one row across the full width - logo at the left, the page links
   centred, search and the icons at the right, hairline underneath. The same
   bar on every page; the homepage makes it clear over its hero (index.html). */
@media (min-width: 990px) {
  .site-header {
    display: grid; grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "logo nav search icons"; align-items: center;
    height: var(--header-h); padding-inline: var(--edge);
  }
  .header { display: contents; }
  .header__left { grid-area: search; }
  .header__logo { grid-area: logo; justify-self: start; }
  .header__logo img { height: 26px; }
  .header__right { grid-area: icons; }
  .menu-bar { grid-area: nav; height: 100%; border: 0; background: none; }
  .menu-bar ul { height: 100%; padding: 0; gap: clamp(18px, 2.6vw, 44px); }
  .menu-bar li { height: 100%; }
  .menu-bar a {
    display: flex; align-items: center; height: 100%; padding: 0; white-space: nowrap;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
    letter-spacing: .1em; color: rgba(255,255,255,.82);
  }
  .menu-bar a:hover { color: var(--text); }
  .menu-bar a::after { bottom: -1px; background: #fff; }
  .menu-bar a[aria-current="page"] { color: var(--text); }
}
/* Wide screens: centre the links on the bar itself rather than on the space
   between the logo and the icons. Narrower, they centre in that space. */
@media (min-width: 1180px) {
  .menu-bar { position: absolute; grid-column: 1 / -1; left: 50%; transform: translateX(-50%); width: max-content; }
}
@media (min-width: 990px) and (max-width: 1179px) {
  .menu-bar ul { gap: clamp(12px, 1.8vw, 26px); padding-inline: 20px; }
  .menu-bar a { font-size: 11.5px; letter-spacing: .07em; }
}

/* ── Drawers (menu, basket, search) ──────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 100; margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: var(--text); overflow: hidden;
}
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: transparent; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(3,5,8,.62);
                 opacity: 0; transition: opacity .28s ease; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column;
  width: min(92vw, 420px); background: var(--bg-2);
  box-shadow: 0 0 60px rgba(0,0,0,.55);
  transition: transform .32s var(--ease);
}
.drawer--left  .drawer__panel { left: 0;  transform: translateX(-100%); border-right: 1px solid var(--line); }
.drawer--right .drawer__panel { right: 0; transform: translateX(100%);  border-left: 1px solid var(--line); }
.drawer--top   .drawer__panel { left: 0; right: 0; bottom: auto; width: 100%;
                                transform: translateY(-100%); border-bottom: 1px solid var(--line); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                padding: 14px 14px 14px 22px; border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--font-display); font-size: 15px; font-weight: 600;
                 letter-spacing: .12em; text-transform: uppercase; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { border-top: 1px solid var(--line); padding: 18px 22px max(18px, env(safe-area-inset-bottom)); }

/* Menu drawer */
.menu-drawer__links { list-style: none; margin: 0; padding: 10px 0; }
.menu-drawer__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 22px; text-decoration: none;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.menu-drawer__links a svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.menu-drawer__links a:hover, .menu-drawer__links a[aria-current="page"] { color: var(--accent); }
.menu-drawer__links a:hover svg { transform: translateX(3px); color: var(--accent); }
.menu-drawer__search { padding: 16px 22px 4px; }
/* The small links sit on the footer's rule rather than floating wherever the
   nav above them happens to end - so the drawer reads as two blocks, not three
   with a gap in the middle. */
.menu-drawer__body { display: flex; flex-direction: column; }
.menu-drawer__small { list-style: none; margin: auto 0 0; padding: 8px 22px 18px;
                      display: flex; flex-wrap: wrap; gap: 6px 18px; }
.menu-drawer__small a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.menu-drawer__small a:hover { color: var(--text); }
/* Instagram, as a row you can hit rather than a line of text with a badge
   next to it. Full width, its own surface, and a second line saying what
   following actually gets you - a bare handle asks for a follow and gives no
   reason for one. */
.menu-drawer__foot { padding-inline: 14px; }
.ig-cta {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line-2);
  transition: border-color .2s ease, background-color .2s ease;
}
.ig-cta:hover { border-color: var(--accent); background: var(--accent-wash); }
.ig-cta__mark {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; background: var(--accent); color: var(--accent-ink);
}
.ig-cta__mark svg { width: 19px; height: 19px; }
.ig-cta__text { display: grid; gap: 2px; min-width: 0; }
.ig-cta__text b { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text); }
.ig-cta__text span { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ig-cta__go { flex: none; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.ig-cta__go svg { width: 18px; height: 18px; }
.ig-cta:hover .ig-cta__go { transform: translateX(3px); color: var(--accent); }

.social-row { display: flex; align-items: center; gap: 12px; }
.social-row a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
                font-weight: 600; font-size: 14px; }
.social-row .icon-button--social { margin: 0; }

/* Search */
.search-form { position: relative; }
.search-form input {
  width: 100%; height: 52px; border-radius: 999px;
  padding: 0 52px 0 22px; font: 16px var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); appearance: none;
}
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53,228,163,.16); }
.search-form button { position: absolute; right: 4px; top: 4px; }
.search-drawer__inner { max-width: 760px; margin: 0 auto; width: 100%;
                        display: flex; align-items: center; gap: 10px; padding: 22px var(--gutter); }
.search-drawer__inner .search-form { flex: 1; }

/* Basket drawer */
.offer-meter { padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--accent-wash); }
.offer-meter p { margin: 0 0 10px; font-size: 13.5px; color: var(--soft); }
.offer-meter p b { color: var(--accent); font-weight: 600; }
.offer-meter__dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.offer-meter__dots i { height: 5px; border-radius: 999px; background: rgba(255,255,255,.1);
                       transition: background-color .3s ease; }
.offer-meter__dots i.is-on { background: var(--accent); }

.line-items { list-style: none; margin: 0; padding: 6px 22px; }
.line-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
             padding: 14px 0; border-bottom: 1px solid var(--line); }
.line-item:last-child { border-bottom: 0; }
.line-item__img { width: 64px; height: 80px; border-radius: var(--r-sm); overflow: hidden;
                  background: var(--surface-2); border: 1px solid var(--line); }
.line-item__img img { width: 100%; height: 100%; object-fit: cover; }
.line-item__title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
                    line-height: 1.3; text-decoration: none; }
.line-item__title:hover { color: var(--accent); }
.line-item__meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.line-item__price { font-family: var(--font-display); font-weight: 600; font-size: 14px;
                    text-align: right; font-variant-numeric: tabular-nums; }
.line-item__remove { display: inline-flex; margin-top: 6px; padding: 0; border: 0; background: none;
                     color: var(--muted); font-size: 12.5px; text-decoration: underline;
                     text-underline-offset: 3px; cursor: pointer; }
.line-item__remove:hover { color: var(--danger); }

.summary { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.summary li { display: flex; justify-content: space-between; gap: 14px; color: var(--soft); }
.summary li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary s { color: var(--muted); margin-right: 6px; }
.summary .is-offer span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px;
                                              border-radius: 50%; background: var(--accent);
                                              margin: 0 8px 1px 0; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline;
                  padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 4px; }
.summary__total span:first-child { font-family: var(--font-display); font-weight: 600; letter-spacing: .1em;
                                   text-transform: uppercase; font-size: 12.5px; }
.summary__total b { font-family: var(--font-display); font-size: 24px; font-weight: 700;
                    font-variant-numeric: tabular-nums; }
.summary__saving { color: var(--accent); font-size: 13px; text-align: right; margin: 0 0 12px; min-height: 1em; }
.summary__note { color: var(--muted); font-size: 12px; margin: 10px 0 0; text-align: center; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 14px;
           font-size: 12.5px; color: var(--soft); line-height: 1.5; cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--accent); }

.empty-state { padding: 46px 26px; text-align: center; }
.empty-state svg { width: 46px; height: 46px; color: var(--muted); margin: 0 auto 14px; }
.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin: 0 auto 22px; max-width: 30ch; font-size: 14px; }

/* ── Sections & headings ─────────────────────────────────────────────────── */
.section { padding-block: clamp(48px, 7vw, 92px); }
.section--tight { padding-block: clamp(36px, 5vw, 60px); }
.section--band { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
                flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: block; font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
           letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; line-height: 1.12; }
.section-sub { color: var(--muted); margin: 10px 0 0; max-width: 58ch; font-size: clamp(14.5px, 1.4vw, 16px); }
.view-all { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
            text-transform: uppercase; text-decoration: none; color: var(--soft);
            border-bottom: 1px solid var(--line-2); padding-bottom: 4px; }
.view-all:hover { color: var(--accent); border-color: var(--accent); }

/* ── Product cards ───────────────────────────────────────────────────────── */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 26px);
                grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 750px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media { position: relative; overflow: hidden; border-radius: var(--r-md);
               aspect-ratio: 4 / 5; background: var(--surface); border: 1px solid var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .6s var(--ease), opacity .3s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                      background: linear-gradient(180deg, transparent 55%, rgba(6,8,11,.55)); }
/* The book name set on the cover, so a grid of photos still reads as a
   series of guides rather than a stock gallery. */
.card__cover-title { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
                     font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 21px);
                     letter-spacing: .06em; text-transform: uppercase; line-height: 1.05; }
.card__cover-title small { display: block; font-size: 9.5px; letter-spacing: .2em; color: var(--accent);
                           font-weight: 600; margin-bottom: 5px; }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2;
         padding: 4px 10px; border-radius: 999px; font-family: var(--font-display);
         font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
         background: var(--bg); color: var(--text); border: 1px solid var(--line-2); }
.badge--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.badge--amber  { background: #2a1d0b; color: var(--amber); border-color: rgba(255,192,120,.4); }
/* Selling fast. Top-right, because the top-left slot is already spoken for and
   two pills stacked on one corner read as a sticker sheet. Amber, not berry:
   this is about the shop, not about the season, and a Christmas edition can
   carry both at once. */
/* Discount code box in the order summary. Deliberately quiet: it is a field
   for people who already have a code, not an invitation to go hunting for one
   (and a prominent empty code box is a reason to leave and search). */
.code-form { margin: 14px 0 4px; }
.code-form__label { display: block; font-size: 11px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.code-form__row { display: flex; gap: 8px; }
.code-form__row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px;
                        border-radius: var(--r-sm); border: 1px solid var(--line);
                        background: var(--bg); color: var(--text);
                        font: inherit; font-size: 14px; letter-spacing: .04em; }
.code-form__row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-form__row .button { flex: none; padding: 10px 16px; }
.code-form__err { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
.code-form__help { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.badge--hot { left: auto; right: 10px; display: inline-flex; align-items: center; gap: 5px;
              background: var(--amber); color: #2a1d0b; border-color: var(--amber);
              box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.badge--hot svg { width: 12px; height: 12px; }

/* The festive ribbon. Replaces the badge on a Christmas edition - see
   partials/cards.html - and is the whole reason the homepage can put seasonal
   and year-round books under one heading without the shelf reading as a pile:
   the five with a ribbon are the December ones. */
.ribbon { position: absolute; top: 10px; left: 10px; z-index: 2;
          display: inline-flex; align-items: center; gap: 5px;
          padding: 4px 11px 4px 9px; border-radius: 999px;
          font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
          letter-spacing: .06em; color: var(--festive-ink);
          background: linear-gradient(135deg, var(--festive), var(--festive-2));
          border: 1px solid var(--festive-line);
          box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.ribbon svg { width: 12px; height: 12px; flex: none; }
/* A warm edge on the cover, so a row of festive books reads as a set from
   across the page rather than one pill at a time. Inset, so it never changes
   the card's size or the grid's rhythm. */
.card--festive .card__media { border-color: var(--festive-line);
                              box-shadow: inset 0 0 0 1.5px rgba(167,29,58,.7), 0 6px 26px rgba(167,29,58,.18); }
.card--festive .card__cover-title small { color: var(--festive-ink); }
.card__body { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 3px; }
.card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3;
               text-decoration: none; }
.card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
.card__title:hover { color: var(--accent); }
.card__meta { color: var(--muted); font-size: 12.5px; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.price small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: 11.5px; margin-left: 3px; }
.price s { color: var(--muted); font-weight: 500; margin-right: 6px; }
/* Quick add. Sits above the stretched title link (z-index 2) so it adds
   instead of navigating. Always visible on touch, revealed on hover elsewhere. */
.card__quick { position: absolute; z-index: 3; right: 10px; bottom: 10px;
               width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
               display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
               box-shadow: 0 8px 20px rgba(0,0,0,.4); transition: transform .2s var(--ease), opacity .2s ease; }
.card__quick svg { width: 20px; height: 20px; }
.card__quick:hover { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) {
  .card__quick { opacity: 0; transform: translateY(6px); }
  .card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
}
.card__quick.is-done { background: var(--text); }

/* A destination we have not written: a flag tile, not a stock photo. */
.card__media--flag { display: grid; place-items: center;
                     background: radial-gradient(120% 90% at 30% 10%, #16222c, var(--surface) 70%); }
.card__media--flag span { font-size: clamp(44px, 7vw, 64px); line-height: 1;
                          font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }

/* ── Bundle band ─────────────────────────────────────────────────────────── */
.bundle-card { position: relative; display: grid; gap: 22px; align-items: center;
               border: 1px solid var(--accent-line); border-radius: var(--r-lg); overflow: hidden;
               padding: clamp(18px, 3vw, 34px);
               background: radial-gradient(90% 120% at 100% 0%, rgba(53,228,163,.14), transparent 60%), var(--surface); }
@media (min-width: 860px) { .bundle-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
/* Cards are emitted one after another by the page, so the space between them
   belongs to the card, not to a wrapper that does not exist. */
.bundle-card + .bundle-card { margin-top: clamp(16px, 2.2vw, 26px); }
.bundle-card + .offer-strip, .bundle-card ~ .offer-strip { margin-top: clamp(20px, 2.6vw, 30px); }
/* A fanned stack that holds any number of covers: each one may shrink, and
   each after the first tucks under the one before, so a four-book bundle stays
   inside its column instead of running over the words beside it. */
.bundle-card__covers { display: flex; justify-content: center; align-items: center; padding: 8px 0 4px; }
.bundle-card__covers img { flex: 0 1 200px; width: 200px; min-width: 0; height: auto;
                           aspect-ratio: 4/5; object-fit: cover;
                           border-radius: var(--r-md); border: 1px solid var(--line-2);
                           box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.bundle-card__covers img + img { margin-left: clamp(-34px, -2.2vw, -18px); }
.bundle-card__covers img:nth-child(1) { transform: rotate(-6deg); }
.bundle-card__covers img:nth-child(2) { transform: rotate(-1deg) translateY(9px); }
.bundle-card__covers img:nth-child(3) { transform: rotate(4deg) translateY(2px); }
.bundle-card__covers img:nth-child(n+4) { transform: rotate(8deg) translateY(11px); }
.bundle-card h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.15; }
/* Says what "limited edition" actually means, next to the price. */
.edition-note { display: flex; gap: 9px; margin: 14px 0 4px; padding: 12px 14px;
                border: 1px solid var(--accent-line); border-radius: var(--r-md);
                background: var(--accent-wash); color: var(--soft);
                font-size: 13px; line-height: 1.45; }
.edition-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.edition-note b { color: var(--text); font-weight: 600; }

.bundle-card__until { display: flex; align-items: center; gap: 7px; margin: 10px 0 0 !important;
                      color: var(--accent); font-size: 13px; font-weight: 500; }
.bundle-card__until svg { width: 15px; height: 15px; flex: none; }
.bundle-card p { color: var(--soft); margin: 10px 0 18px; max-width: 46ch; }
.bundle-card .price { font-size: 26px; }
.bundle-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sticker { position: absolute; top: 16px; right: 16px; transform: rotate(6deg);
           padding: 8px 12px; border-radius: 10px; background: var(--text); color: var(--bg);
           font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1.1;
           letter-spacing: .06em; text-transform: uppercase; text-align: center; }

.offer-strip { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 760px) { .offer-strip { grid-template-columns: repeat(3, 1fr); } }
.offer-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
              border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.offer-tile__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
                  background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent); }
.offer-tile__ic svg { width: 19px; height: 19px; }
.offer-tile b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.offer-tile p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ── Product page ────────────────────────────────────────────────────────── */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 18px 0;
               color: var(--muted); font-size: 12.5px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span[aria-hidden] { opacity: .5; }

.product { display: grid; gap: clamp(22px, 4vw, 64px); padding-block: 18px clamp(40px, 6vw, 80px); }
@media (min-width: 990px) { .product { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; } }

/* Gallery: a swipe slider on phones, a stacked grid on desktop. */
.gallery { position: relative; }
.gallery__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px;
                  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
                  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: 0 0 88%; scroll-snap-align: center; border-radius: var(--r-md); overflow: hidden;
                 border: 1px solid var(--line); background: var(--surface); position: relative; }
.gallery__item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery__counter { display: flex; justify-content: center; align-items: center; gap: 8px;
                    margin-top: 12px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gallery__cover-cap { position: absolute; inset: auto 0 0 0; padding: 22px; z-index: 1;
                      background: linear-gradient(180deg, transparent, rgba(6,8,11,.88)); }
.gallery__cover-cap span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
                           color: var(--accent); font-weight: 600; }
.gallery__cover-cap b { display: block; font-family: var(--font-display); font-weight: 800;
                        font-size: clamp(28px, 4vw, 44px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
@media (min-width: 990px) {
  .gallery__track { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible;
                    margin: 0; padding: 0; }
  .gallery__item { flex: none; }
  .gallery__item:first-child { grid-column: 1 / -1; }
  .gallery__item:first-child img { aspect-ratio: 5 / 4; }
  .gallery__item:not(:first-child) img { aspect-ratio: 1 / 1; }
  /* An odd photo out at the end takes the full row instead of leaving a hole. */
  .gallery__item:not(:first-child):last-child:nth-child(even) { grid-column: 1 / -1; }
  .gallery__item:not(:first-child):last-child:nth-child(even) img { aspect-ratio: 5 / 3; }
  .gallery__counter { display: none; }
}

.product__info { min-width: 0; }
@media (min-width: 990px) { .product__info { position: sticky; top: calc(var(--header-h) + 64px); } }
.product__vendor { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--muted); }
.product__title { font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1.08; margin: 8px 0 12px; }
.product__price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.product__price .price { font-size: 20px; font-weight: 500; }
.pill svg { width: 14px; height: 14px; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
        font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
        background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line); }
.product__tax { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }

.rule-label { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px;
              font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em;
              text-transform: uppercase; color: var(--soft); }
.rule-label::before, .rule-label::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* Bundle & save options */
.options { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.option { position: relative; display: block; border: 1px solid var(--line-2); border-radius: var(--r-md);
          background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.option:hover { border-color: rgba(53,228,163,.5); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 15px 16px; }
.option__radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted);
                 display: grid; place-items: center; transition: border-color .15s ease; }
.option__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
                        transform: scale(0); transition: transform .18s var(--ease); }
.option__name, .option__sub { display: block; }
.option__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.25; }
.option__sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.option__sub b { color: var(--accent); font-weight: 600; }
.option__price { text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 16px;
                 font-variant-numeric: tabular-nums; line-height: 1.2; }
.option__price s { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.option:has(input:checked) { border-color: var(--accent); background: linear-gradient(180deg, rgba(53,228,163,.08), rgba(53,228,163,.02)); }
.option:has(input:checked) .option__radio { border-color: var(--accent); }
.option:has(input:checked) .option__radio::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Wraps rather than a fixed three-column grid: a bundle can hold two books or
   four, and the old grid scattered a four-book set across two ragged rows. */
.option__members { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
                   margin: 0 16px 16px; padding: 12px; border-radius: var(--r-sm);
                   background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.option__member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.option__member img { width: 40px; height: 50px; border-radius: 6px; object-fit: cover; flex: none; }
.option__member span { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.option__plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
                background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; }
.option .sticker { top: -12px; right: 14px; padding: 6px 10px; font-size: 10px; }

/* Add-on rows: tick another guide to build an any-3 set */
/* Two across once there is room: fourteen add-ons stacked one per row is a
   column of scrolling, and the cover images are small enough to pair. */
.addons { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); }
.addon { display: grid; grid-template-columns: 20px 40px 1fr auto; gap: 12px; align-items: center;
         padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
         background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .15s ease; }
.addon:hover { border-color: var(--line-2); }
.addon input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.addon img { width: 40px; height: 50px; border-radius: 6px; object-fit: cover; }
.addon b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.addon .price { font-size: 13.5px; }
.addon:has(input:checked) { border-color: var(--accent-line); background: var(--accent-wash); }
/* The fold. Styled as a quiet control rather than a browser triangle, and it
   keeps its own gap from the four rows above it. */
.addons-more { margin-top: 8px; }
.addons-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                         justify-content: center; gap: 8px; padding: 10px 14px;
                         border: 1px solid var(--line); border-radius: var(--r-md);
                         color: var(--soft); font-size: 13.5px;
                         transition: border-color .15s ease, color .15s ease; }
.addons-more > summary::-webkit-details-marker { display: none; }
.addons-more > summary::after { content: ''; width: 7px; height: 7px; flex: none;
                                border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
                                transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.addons-more[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.addons-more > summary:hover { border-color: var(--accent-line); color: var(--text); }
.addons-more[open] > summary { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .addons-more > summary::after { transition: none; } }

.unlock { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 22px 0 10px; }
.unlock b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.unlock b svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; color: var(--accent); }
.unlock span { color: var(--muted); font-size: 12.5px; }
.unlock-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.unlock-meter i { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); transition: background-color .25s ease; }
.unlock-meter i.is-on { background: var(--accent); }

.product__actions { display: grid; gap: 10px; margin-top: 22px; }
.product__actions .button { min-height: 54px; font-size: 15px; }
.product__sample { text-align: center; font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* Long description, split by hairlines like the reference theme's product copy */
.product__desc { margin-top: 30px; }
.desc-block { padding: 24px 0; border-top: 1px solid var(--line); }
.desc-block h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0;
                 margin-bottom: 12px; }
.desc-block p { margin: 0 0 12px; color: var(--soft); font-size: 14.5px; line-height: 1.75; }
.desc-block p:last-child { margin-bottom: 0; }
.desc-block strong { color: var(--text); font-weight: 600; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feature-list b { display: block; font-weight: 600; font-size: 14.5px; color: var(--text); }
.feature-list span { color: var(--soft); font-size: 14px; line-height: 1.65; }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tick-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--soft); font-size: 14.5px; }
.tick-list svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }
.covers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.covers-list li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.covers-list .flag { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
                     background: var(--surface-2); border: 1px solid var(--line); font-size: 15px;
                     font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.covers-list b { display: block; font-weight: 600; }
.covers-list small { color: var(--muted); font-size: 12px; }
.share { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none;
         color: var(--muted); font-size: 13px; cursor: pointer; }
.share svg { width: 16px; height: 16px; }
.share:hover { color: var(--accent); }

/* Not written yet */
.pending { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
           padding: clamp(20px, 3vw, 32px); margin-top: 20px; }
.pending p { color: var(--soft); margin: 10px 0 0; }

/* ── Basket page ─────────────────────────────────────────────────────────── */
.basket-page { display: grid; gap: clamp(22px, 4vw, 48px); padding-block: 26px clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .basket-page { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.basket-page .line-items { padding: 0; border-top: 1px solid var(--line); }
.basket-page .line-item { grid-template-columns: 84px 1fr auto; }
.basket-page .line-item__img { width: 84px; height: 105px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: clamp(18px, 2.6vw, 28px); }
@media (min-width: 900px) { .panel--sticky { position: sticky; top: calc(var(--header-h) + 64px); } }
.notice { border: 1px solid rgba(255,192,120,.35); background: rgba(255,192,120,.07); color: var(--soft);
          border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { margin-top: clamp(40px, 6vw, 80px); background: var(--bg-2); border-top: 1px solid var(--line); }
.footer__grid { display: grid; gap: 34px 28px; padding-block: clamp(40px, 5vw, 64px); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr .8fr .8fr 1.3fr; } }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; } }
.footer__brand img { height: 30px; width: auto; margin-bottom: 14px; }
.footer__brand p { color: var(--muted); font-size: 14px; margin: 0 0 16px; max-width: 34ch; }
.footer h2 { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .16em;
             text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { color: var(--soft); text-decoration: none; font-size: 14px; }
.footer ul a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer__signup { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__signup { grid-column: auto; } }
.footer__signup p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.inline-form { display: flex; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
               background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.inline-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53,228,163,.14); }
.inline-form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 0; background: transparent;
                     color: var(--text); font: 15px var(--font-body); }
.inline-form input:focus { outline: none; }
.inline-form input::placeholder { color: var(--muted); }
.inline-form button { flex: none; width: 54px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.inline-form button svg { width: 18px; height: 18px; margin: auto; }
.inline-form button:hover { background: #4cf0b3; }
.form-msg { font-size: 13px; margin: 8px 0 0; min-height: 1.2em; color: var(--muted); }
.form-msg.is-ok { color: var(--accent); }
.form-msg.is-err { color: var(--danger); }
.footer__bottom { border-top: 1px solid var(--line); }
.footer__bottom .page-width { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                              gap: 14px; padding-block: 18px; }
.footer__legal { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.footer__legal a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.footer__legal a:hover { color: var(--text); }
.footer .payment-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.payment-icons li { height: 24px; min-width: 38px; padding: 0 7px; border-radius: 5px; display: grid; place-items: center;
                    background: #f3f5f7; color: #111; font: 800 9.5px/1 var(--font-display); letter-spacing: .02em; }
.payment-icons svg { height: 12px; width: auto; }

/* ── Content pages (terms, privacy, order) ───────────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; padding-block: clamp(30px, 5vw, 60px); }
.prose h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; margin-bottom: 8px; }
.prose h2 { font-size: 19px; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--soft); }
.prose a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .card:hover .card__media img { transform: none; }
}

/* ── Accounts ────────────────────────────────────────────────────────────── */
.auth { min-height: calc(100dvh - 360px); display: grid; place-items: center; padding-block: clamp(34px, 6vw, 80px); }
.auth__card { width: 100%; max-width: 460px; padding: clamp(24px, 4vw, 38px); border-radius: var(--r-lg);
              border: 1px solid var(--line-2); background:
              radial-gradient(120% 80% at 100% 0%, rgba(53,228,163,.10), transparent 55%), var(--surface);
              box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
.auth__card h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 600; line-height: 1.1; }
.auth__lede { color: var(--soft); margin: 10px 0 24px; }
.auth__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
              background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent); }
.auth__icon svg { width: 26px; height: 26px; }
.field-label { display: block; font-size: 13px; font-weight: 500; color: var(--soft); margin: 0 0 7px; }
.input { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-md); appearance: none;
         border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 16px var(--font-body);
         transition: border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53,228,163,.16); }
.auth form .button { margin-top: 14px; }
.form-error { color: var(--danger); font-size: 13.5px; margin: 10px 0 0; }
.auth__perks { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.auth__perks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--soft); font-size: 14px; }
.auth__perks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.auth__foot { color: var(--muted); font-size: 13px; margin: 18px 0 0; }
.auth__email { color: var(--text); font-weight: 600; word-break: break-all; }
.test-link { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); font-size: 13px; color: var(--soft);
             border: 1px dashed rgba(255,192,120,.5); background: rgba(255,192,120,.06); }
.test-link a { color: var(--amber); word-break: break-all; }

.account-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
                padding-block: clamp(30px, 5vw, 56px) clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--line); }
.account-head h1 { font-size: clamp(32px, 4.6vw, 50px); font-weight: 500; line-height: 1.05; }
.account-head p { color: var(--muted); margin: 8px 0 0; }
.account-head p b { color: var(--text); font-weight: 600; }
.account { display: grid; gap: clamp(20px, 3.4vw, 48px); padding-block: 26px clamp(40px, 6vw, 80px); }

/* Section nav: a sticky side list on desktop, a scrolling pill row on phones */
.account-nav { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; }
@media (max-width: 989px) {
  .account-nav { top: var(--header-h); margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter);
                 background: rgba(10,12,16,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
                 border-bottom: 1px solid var(--line); }
}
@media (min-width: 990px) { .account-nav { top: calc(var(--header-h) + 64px); } }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.account-nav ul::-webkit-scrollbar { display: none; }
@media (min-width: 990px) { .account-nav ul { flex-direction: column; gap: 2px; } }
.account-nav a { display: flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none;
                 padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--soft);
                 font-size: 13.5px; font-weight: 500; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
@media (min-width: 990px) { .account-nav a { border-color: transparent; border-radius: var(--r-sm); padding: 11px 14px; font-size: 14.5px; } }
.account-nav a svg { width: 17px; height: 17px; flex: none; }
.account-nav a .count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.account-nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.account-nav a.is-active { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-line); }
.account-nav form { display: none; }
@media (min-width: 990px) { .account-nav form { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } }
.link-button { border: 0; background: none; padding: 9px 14px; color: var(--muted); font-size: 14px; cursor: pointer;
               text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover { color: var(--danger); }

.account-section { scroll-margin-top: calc(var(--header-h) + 80px); }
.account-section + .account-section { margin-top: clamp(40px, 5vw, 64px); }
.account-section > .section-head { margin-bottom: 18px; }
.account-section h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; }

.library { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.book { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; border-radius: var(--r-md);
        border: 1px solid var(--line); background: var(--surface); transition: border-color .15s ease; }
.book:hover { border-color: var(--line-2); }
.book img { width: 84px; height: 105px; object-fit: cover; border-radius: var(--r-sm); }
.book__body { display: flex; flex-direction: column; min-width: 0; }
.book__title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.book__meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 10px; }
.book__actions .button { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm); }
.book__actions .button svg { width: 15px; height: 15px; }
.book__actions a.text-link { font-size: 13px; }

.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.row { display: grid; gap: 10px 18px; align-items: center; padding: 16px 18px; background: var(--surface); }
.row + .row { border-top: 1px solid var(--line); }
@media (min-width: 720px) { .row { grid-template-columns: minmax(0, 1fr) auto auto; } }
.row__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.row__meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.row .button { min-height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: var(--r-sm); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px;
          font-weight: 600; border: 1px solid var(--line-2); color: var(--soft); width: max-content; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.status--amber { color: var(--amber); border-color: rgba(255,192,120,.4); background: rgba(255,192,120,.07); }
.status--muted { color: var(--muted); }

.orders-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.orders-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.orders-table th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
                   color: var(--muted); padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.orders-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--soft); vertical-align: top; }
.orders-table tr:last-child td { border-bottom: 0; }
.orders-table td.num { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.orders-table a { color: var(--accent); }

.empty-box { padding: 30px 22px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.empty-box p { color: var(--muted); margin: 6px auto 16px; max-width: 42ch; }
.empty-box b { font-family: var(--font-display); font-size: 17px; }

.details { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 15px 18px; background: var(--surface); }
.details dt { color: var(--muted); font-size: 13.5px; }
.details dd { margin: 0; color: var(--text); font-weight: 500; word-break: break-all; }

.account-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
               background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

.save-account { margin-top: 18px; text-align: left; display: grid; gap: 14px; align-items: center; }
@media (min-width: 620px) { .save-account { grid-template-columns: 1fr auto; } }
.save-account b { font-family: var(--font-display); display: block; margin-bottom: 4px; }
.save-account p { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Phones: the bar holds menu · logo · basket only. Instagram and the account
   link don't fit, and both are already in the menu drawer. Hidden here rather
   than removed so the header markup stays the same on every page. */
@media (max-width: 989px) {
  .header__right .icon-button--social,
  .header__right a[href="/account"] { display: none; }
  /* Phones: no bar at all - the header floats over the page with only a
     shadow that fades to nothing. The negative margin lets the page run up
     underneath it; otherwise the space behind the header is just the black
     page background and reads as a solid block whatever the gradient does. */
  .site-header {
    background: transparent; border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    margin-bottom: calc(-1 * var(--header-h));
  }
  .site-header::before {
    content: ""; position: absolute; inset: 0 0 -32px 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(10,12,16,.7) 0%, rgba(10,12,16,.35) 55%, rgba(10,12,16,0) 100%);
  }
  /* Pages keep their text clear of the icons; the homepage photo runs under. */
  .site-header ~ main { padding-top: var(--header-h); }
  .site-header ~ main:has(> .hero:first-child) { padding-top: 0; }
}
/* Grid items default to min-width:auto, which let the orders table push the
   whole account page wider than the phone. */
.account { grid-template-columns: minmax(0, 1fr); }
.account > * { min-width: 0; }
.auth__email { word-break: normal; overflow-wrap: anywhere; }

@media (min-width: 990px) { .account { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
/* Phones: each order becomes a small card instead of a table you scroll sideways. */
@media (max-width: 619px) {
  .orders-table { min-width: 0; }
  .orders-table thead { display: none; }
  .orders-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px;
                     border-bottom: 1px solid var(--line); }
  .orders-table tr:last-child { border-bottom: 0; }
  .orders-table td { padding: 0; border: 0; }
  .orders-table td:nth-child(1) { grid-column: 1; grid-row: 1; color: var(--muted); }
  .orders-table td:nth-child(3) { grid-column: 2; grid-row: 1; font-weight: 600; }
  .orders-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--text); }
  .orders-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 13.5px; }
}



/* ── Sign-in pages: the split-screen login component, in site colours ───────
   Desktop: photo and form each exactly half the viewport. Phones: form only. */
.login { min-height: 100dvh; display: flex; background: var(--bg); }
.login__media { display: none; }
@media (min-width: 990px) {
  .login { height: 100dvh; overflow: hidden; }
  .login__media { display: block; position: relative; flex: 0 0 50vw; width: 50vw; height: 100dvh; overflow: hidden; }
  .login__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
}
.login__back { position: absolute; top: 24px; left: 24px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
               display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.2);
               -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .15s ease; }
.login__back svg { width: 20px; height: 20px; }
.login__back:hover { background: rgba(0,0,0,.3); }
.login__back--panel { position: absolute; top: 16px; left: 16px; background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 990px) { .login__back--panel { display: none; } }

.login__panel { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
                overflow-y: auto; padding: 88px 0 32px; }
@media (min-width: 990px) { .login__panel { flex: 0 0 50vw; width: 50vw; padding: 120px 0 40px; } }
.login__inner { width: 100%; max-width: 448px; padding: 32px; }
/* Brand mark centred across the top of the form half. */
.login__logo { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); line-height: 0; }
.login__logo img { height: 24px; width: auto; }
@media (min-width: 990px) { .login__logo { top: 40px; } .login__logo img { height: 30px; } }
@media (max-width: 480px) { .login__inner { padding: 16px; } }
.login__head { margin-bottom: 32px; }
.login__head h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.2;
                  letter-spacing: -.01em; margin: 0 0 8px; color: var(--text); }
.login__head p { margin: 0; color: var(--muted); }
.login__head p b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.login__head a, .login__link { color: var(--accent); font-weight: 500; text-decoration: none; }
.login__head a:hover, .login__link:hover { color: #4cf0b3; }
.login__form { display: grid; gap: 24px; }
.login__label { display: block; font-size: 14px; font-weight: 500; color: var(--soft); margin-bottom: 8px; }
.login__input { width: 100%; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; appearance: none;
                background: var(--surface); color: var(--text); font: 16px/1.5 var(--font-body); outline: none;
                transition: border-color .15s ease, box-shadow .15s ease; }
.login__input::placeholder { color: var(--muted); }
.login__input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.login__password { position: relative; }
.login__password .login__input { padding-right: 48px; }
.login__eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 4px; border: 0;
              border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.login__eye svg { width: 20px; height: 20px; }
.login__eye:hover { background: rgba(255,255,255,.06); color: var(--text); }
.login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.login__remember { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.login__remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.login__submit { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px;
                 border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); cursor: pointer;
                 font: 600 16px/1.5 var(--font-display); text-decoration: none; transition: background-color .15s ease; }
.login__submit:hover { background: #4cf0b3; }
.login__divider { position: relative; margin: 0; text-align: center; font-size: 14px; }
.login__divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line-2); }
.login__divider span { position: relative; padding: 0 8px; background: var(--bg); color: var(--muted); }
.login__social { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px;
                 border: 1px solid var(--line-2); border-radius: 12px; color: var(--soft); text-decoration: none;
                 font-size: 14px; font-weight: 500; transition: background-color .15s ease, border-color .15s ease; }
.login__social svg { width: 20px; height: 20px; }
.login__social:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); }
.login__help { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
/* First and last name, revealed once the password is started. Side by side
   where there is room, stacked on a phone, and faded in so the form grows
   rather than snapping. */
.login__names { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .login__names { grid-template-columns: 1fr; } }
.login__names:not([hidden]) { animation: login-names-in .26s var(--ease) both; }
@keyframes login-names-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.login__error { margin: -12px 0 20px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #ffb4b4;
                background: rgba(255,122,122,.08); border: 1px solid rgba(255,122,122,.35); }
.login__notice { margin: -12px 0 20px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--soft);
                 background: var(--accent-wash); border: 1px solid var(--accent-line); }
.login__foot { margin: 24px 0 0; font-size: 14px; }

/* Early-bird price line. Deliberately not a banner, a ribbon or a countdown -
   William asked for the offer stated, not announced. Lives in the shared sheet
   because both the collection hero and every guide page use it. */
/* ── Early-bird notice ── a card in the corner, under the drawers (z 100) and
   above the sticky header (z 50). Width is capped by the viewport so it never
   pushes a phone sideways. */
.eb-toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
            width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto;
            gap: 4px 10px; padding: 14px 14px 14px 16px; background: var(--surface-2);
            border: 1px solid var(--accent-line); border-radius: var(--r-md);
            box-shadow: 0 18px 40px rgba(0,0,0,.45); color: var(--soft); font-size: 13.5px; line-height: 1.5;
            animation: eb-in .5s var(--ease) both; }
.eb-toast[hidden] { display: none; }
.eb-toast__tag { grid-column: 1; font-family: var(--font-display); font-size: 11px; font-weight: 600;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eb-toast__text { grid-column: 1; margin: 0; }
.eb-toast__text b { color: var(--text); font-weight: 600; }
.eb-toast__close { grid-column: 2; grid-row: 1 / 3; align-self: start; width: 28px; height: 28px;
                   margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: transparent;
                   color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.eb-toast__close:hover { background: rgba(255,255,255,.06); color: var(--text); }
.eb-toast.is-leaving { animation: eb-out .25s var(--ease) both; }
@keyframes eb-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes eb-out { to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .eb-toast, .eb-toast.is-leaving { animation: none; } }

/* ── Campaign bar (partials/campaign-bar.html) ─────────────────────────────
   Sits above the sticky header in the document rather than over it, so it
   scrolls away instead of eating height on a phone for the whole visit. */
.cbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 4px 14px; padding: 9px var(--gutter); background: var(--accent-wash);
        border-bottom: 1px solid var(--accent-line); font-size: 13.5px;
        color: var(--soft); text-align: center; }
.cbar p { margin: 0; }
.cbar b { font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
          letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
          margin-right: 8px; }
.cbar a { color: var(--muted); font-size: 12.5px; text-decoration: underline;
          text-underline-offset: 3px; }
.cbar a:hover { color: var(--text); }

/* ── Campaign landing page (templates/campaigns/landing.html) ──────────── */
/* Three things, in two columns: what the offer is, what it costs, and the
   books. The first version centred all of it in one narrow stack, which gave
   a price the same weight as a footnote and showed nothing being sold. */
.clh { position: relative; overflow: clip;
       padding: clamp(26px, 4.5vw, 60px) 0 clamp(30px, 4.5vw, 56px); }
/* Atmosphere behind the fan, so the page is a room rather than a black sheet.
   Two offset washes: a brighter one under the covers, a faint one behind the
   headline to stop the left column going flat. */
.clh__glow { position: absolute; inset: -25% -12% auto -12%; height: 80%; pointer-events: none;
             background: radial-gradient(58% 68% at 74% 22%, rgba(53,228,163,.17), transparent 66%),
                         radial-gradient(52% 62% at 6% 2%, rgba(53,228,163,.06), transparent 70%); }

.clh__grid { position: relative; display: grid; gap: clamp(24px, 4vw, 34px); }
@media (min-width: 900px) {
  .clh__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
               align-items: start; column-gap: clamp(40px, 5vw, 76px); }
  /* The copy and the panel stack down the left; the fan spans both and centres
     against them. Written as grid placement rather than as a wrapper div, so
     the phone keeps the reading order copy → books → price. */
  .clh__copy  { grid-column: 1; grid-row: 1; }
  .clh__panel { grid-column: 1; grid-row: 2; }
  .clh__art   { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.clh__kicker { display: inline-flex; align-items: center; gap: 7px;
               padding: 6px 13px 6px 10px; border-radius: 999px;
               border: 1px solid var(--accent-line); background: var(--accent-wash);
               font-family: var(--font-display); font-size: 11px; font-weight: 600;
               letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.clh__kicker svg { width: 13px; height: 13px; flex: none; }
.clh h1 { font-size: clamp(33px, 5.2vw, 60px); font-weight: 600; line-height: 1.03;
          letter-spacing: -.028em; margin: clamp(15px, 2.2vw, 22px) 0 0; max-width: 17ch; }
.clh__lede { color: var(--soft); max-width: 44ch; margin: clamp(12px, 1.6vw, 16px) 0 0;
             font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.55; }

/* One surface holds the whole offer - price, ladder, button, and the one thing
   to know before clicking it. Loose on the page those four read as four
   unrelated lines, and the eye picks the biggest rather than the first. */
.clh__panel { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-lg);
              border: 1px solid var(--line-2);
              background: radial-gradient(120% 100% at 0% 0%, rgba(53,228,163,.10), transparent 58%),
                          var(--surface);
              box-shadow: 0 34px 70px -42px rgba(0,0,0,.95); }
.clh__price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.clh__price b { font-family: var(--font-display); font-size: clamp(44px, 6.2vw, 66px);
                line-height: .86; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.clh__per { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px;
            color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.clh__per s { font-size: 13.5px; text-decoration-color: rgba(255,255,255,.45); }
/* Anchored to the right edge of the row rather than trailing the number: the
   saving is the headline figure's counterweight, not another word after it. */
.clh__save { margin-left: auto; padding: 7px 14px; border-radius: 999px;
             background: var(--accent); color: var(--accent-ink);
             font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
             letter-spacing: .03em; white-space: nowrap;
             box-shadow: 0 10px 26px -10px rgba(53,228,163,.65); }

/* The volume ladder as two tiles. It used to be the smallest line on the page,
   which is the wrong weight for the only upsell the shop has. */
.clh__tiers { list-style: none; margin: clamp(16px, 2.2vw, 22px) 0 0; padding: 0;
              display: grid; gap: 10px;
              grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.clh__tiers li { display: grid; gap: 2px; padding: 11px 14px 12px;
                 border: 1px solid var(--line); border-radius: var(--r-sm);
                 background: var(--bg-2); }
.clh__tier-n { font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
               letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.clh__tiers b { font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 20px);
                font-weight: 600; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.clh__tiers small { color: var(--accent); font-size: 11.5px; font-weight: 600; }
.clh__cta { width: 100%; margin: clamp(15px, 2vw, 20px) 0 0; }
.clh__fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; }

/* The books, fanned. Decorative - every one is named and linked in the grid
   below - so the whole block is aria-hidden and carries no alt text. */
.clh__art { position: relative; width: min(100%, 520px); margin-inline: auto;
            aspect-ratio: 1 / .9; }
.clh__cover { position: absolute; margin: 0; width: 52%; aspect-ratio: 4 / 5;
              border-radius: var(--r-md); overflow: hidden; background: var(--surface);
              border: 1px solid var(--line-2); transform-origin: 50% 100%;
              box-shadow: 0 44px 70px -32px rgba(0,0,0,.95);
              transition: transform .55s var(--ease); }
.clh__cover img { width: 100%; height: 100%; object-fit: cover; }
.clh__cover::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(180deg, transparent 46%, rgba(5,7,10,.8)); }
/* The series name on every cover, as on the product cards, so a stack of
   photographs still reads as a shelf of guides. */
.clh__cover figcaption { position: absolute; left: 11px; right: 11px; bottom: 10px; z-index: 1;
                         font-family: var(--font-display); font-weight: 700;
                         font-size: clamp(11px, 1.6vw, 16px); letter-spacing: .055em;
                         text-transform: uppercase; line-height: 1.05; }
.clh__cover figcaption small { display: block; font-size: 8px; letter-spacing: .2em;
                               color: var(--accent); font-weight: 600; margin-bottom: 4px; }
/* Middle one in front and slightly larger; the outer two splay from their
   bottom edge, so the group reads as a fan and not as a dropped pile. The
   tilt is kept small: on a phone the container is only ~350px, and a steeper
   angle threw the top corners past the page gutter. */
.clh__cover--1 { left: 6%;  top: 13%; z-index: 1; transform: rotate(-6deg); }
.clh__cover--2 { left: 50%; top: 0;   z-index: 3; width: 56%; transform: translateX(-50%); }
.clh__cover--3 { right: 6%; top: 13%; z-index: 2; transform: rotate(6deg); }
/* Only the front cover is named. Three titles at these angles overlapped into
   one unreadable line, and the books are all named again in the grid below
   anyway. A lone cover is the front one, so it keeps its title. */
.clh__cover--1 figcaption,
.clh__cover--3 figcaption { display: none; }
.clh__cover--1:only-child figcaption { display: block; }
.clh__cover--festive { border-color: var(--festive-line);
                       box-shadow: inset 0 0 0 1.5px rgba(167,29,58,.65),
                                   0 44px 70px -32px rgba(0,0,0,.95); }
.clh__cover--festive figcaption small { color: var(--festive-ink); }
@media (hover: hover) and (min-width: 900px) {
  .clh__art:hover .clh__cover--1 { transform: rotate(-10deg) translate(-6%, -2%); }
  .clh__art:hover .clh__cover--2 { transform: translateX(-50%) translateY(-3.5%); }
  .clh__art:hover .clh__cover--3 { transform: rotate(10deg) translate(6%, -2%); }
}

/* The three things that stop somebody buying a PDF from a brand they met on
   Instagram. They were one grey line of text; they are the answer to the last
   question, so they get the weight of one. */
.clh__assure { list-style: none; margin: clamp(30px, 4.5vw, 52px) auto 0; padding: 0;
               display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.clh__assure li { display: flex; align-items: flex-start; gap: 12px;
                  padding: 14px 16px; border: 1px solid var(--line);
                  border-radius: var(--r-md); background: var(--bg-2); }
.clh__assure svg { width: 17px; height: 17px; flex: none; color: var(--accent);
                   padding: 8px; box-sizing: content-box; border-radius: 10px;
                   background: var(--accent-wash); border: 1px solid var(--accent-line); }
.clh__assure b { display: block; font-family: var(--font-display); font-size: 13.5px;
                 font-weight: 600; }
.clh__assure small { display: block; color: var(--muted); font-size: 12.5px;
                     line-height: 1.45; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .clh__cover,
  .clh__art:hover .clh__cover { transition: none; }
  .clh__art:hover .clh__cover--1 { transform: rotate(-6deg); }
  .clh__art:hover .clh__cover--2 { transform: translateX(-50%); }
  .clh__art:hover .clh__cover--3 { transform: rotate(6deg); }
}

.cl-count { font-family: var(--font-display); color: var(--muted); font-size: 14px;
            margin-left: 10px; font-weight: 500; }