/* =========================================================
   Power Vape Shop — Storefront CSS
   Mobile-first, custom design system, no framework.
   Target: < 20 KB uncompressed.
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens & reset
   --------------------------------------------------------- */
:root {
  --c-primary:    #111111;
  --c-header-2:   #1a1a1a;
  --c-gold:       #e8c15a;
  --c-gold-soft:  #f4d98a;
  --c-accent:     #e63946;
  --c-accent-h:   #c8303b;
  --c-bg:         #ffffff;
  --c-surface:    #f4f4f5;
  --c-text:       #1a1a1a;
  --c-muted:      #6b7280;
  --c-border:     #e4e4e7;
  --c-white:      #ffffff;

  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         16px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);

  --header-h:     114px;
  --container-w:  1340px;

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-size:    16px;
  --lh:           1.6;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
ul,ol { list-style: none; }

/* ---------------------------------------------------------
   2. Layout utilities
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 768px)  { .container { padding-inline: 24px; } }
@media (min-width: 1024px) { .container { padding-inline: 32px; } }
@media (min-width: 1280px) { .container { padding-inline: 40px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.flex   { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2  { gap: 8px; }
.gap-4  { gap: 16px; }

.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (min-width: 640px)  { .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------
   3. Header — top bar + nav + trust bar
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ── Row 1: Top bar ── */
.top-bar { background: var(--c-primary); }

.top-bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 22px;
  min-height: 60px;
  padding-block: 16px 8px;   /* a little more room above, off the top edge of the page */
}

.logo { display: flex; align-items: center; }
.logo img { height: 42px; width: auto; }

/* Search: takes the space between the logo and the account link */
.search { position: relative; width: 100%; max-width: 640px; justify-self: center; }
.search.is-open { z-index: 30; }

.search input {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px 0 44px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  outline: none;
  background: var(--c-white);
}
.search input::placeholder { color: #8a93a3; font-weight: 500; }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* search icon — left side */
.search > button[type="submit"] {
  position: absolute;
  left: 10px; right: auto; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* clear button — right side */
.search > button[type="button"] {
  position: absolute;
  right: 10px; left: auto; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.search svg {
  width: 18px; height: 18px;
  stroke: #8a93a3; fill: none; stroke-width: 2;
}

/* Voice search: a microphone at the right of the box */
.search.has-voice input { padding-right: 46px; }
.search > button.search-mic[type="button"] { right: 8px; width: 32px; height: 32px; border-radius: 50%; }
.search-mic svg { transition: stroke .15s; }
.search-mic:hover svg { stroke: var(--c-primary); }
.search-mic.is-listening { background: rgba(230, 57, 70, .12); }
.search-mic.is-listening svg { stroke: var(--c-accent); }
.search-mic.is-listening::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--c-accent); opacity: 0; animation: mic-ring 1.3s ease-out infinite;
}
@keyframes mic-ring { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
@keyframes mic-dot  { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sp-voice {
  display: flex; align-items: center; gap: 10px; margin: 0 40px 14px 0;
  font-size: .9375rem; font-weight: 600; color: #fff;
}
.sp-voice-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); animation: mic-dot 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .search-mic.is-listening::after { animation: none; opacity: .5; }
  .sp-voice-dot { animation: none; }
}
@media (max-width: 768px) {
  .search.has-voice input { padding-right: 40px; }
  .search > button.search-mic[type="button"] { right: 3px; width: 34px; height: 34px; }
}

/* Search dropdown panel */
[x-cloak] { display: none !important; }

/* Search dropdown: a dark panel in the header's own black and gold, products as a grid */
.search-panel {
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  width: min(780px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 18px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.1);
  color: #f3f3f3;
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
  isolation: isolate;
}
/* narrower desktops: hang the panel from the left of the field so it never leaves the screen */
@media (max-width: 1023px) {
  .search-panel { left: 0; transform: none; width: min(560px, calc(100vw - 32px)); }
}

.search-panel-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #d6d6d6;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.search-panel-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.search-panel-close svg { width: 14px; height: 14px; display: block; }

/* section labels: small gold caps */
.sp-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-gold);
}
.sp-label svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-count { color: #8d8d8d; font-weight: 600; letter-spacing: .04em; }

/* trending collections */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0 36px 0 0; list-style: none; }
.sp-chips a {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: #ececec; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.sp-chips a:hover { border-color: var(--c-gold); color: var(--c-gold); background: rgba(232,193,90,.08); }

/* product cards */
.sp-grid { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sp-card { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.sp-card-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; margin-bottom: 6px;
  border-radius: 12px; background: #f4f2ee; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.sp-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sp-card-ph { width: 34px; height: 34px; stroke: #cdc6b6; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-card-badge {
  position: absolute; top: 8px; left: 8px;
  max-width: calc(100% - 16px); padding: 4px 8px;
  border-radius: 999px; background: var(--c-gold); color: #111;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-card-vendor { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8f8f8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; font-size: 13px; font-weight: 600; line-height: 1.3; color: #fff;
}
.sp-card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.sp-card-price b { font-size: 14px; font-weight: 800; color: var(--c-gold); }
.sp-card-price s { font-size: 12px; font-weight: 500; color: #8a8a8a; }
.sp-card:hover .sp-card-img,
.sp-card:focus-visible .sp-card-img { box-shadow: 0 0 0 2px var(--c-gold); transform: translateY(-2px); }
.sp-card:hover .sp-card-title { color: var(--c-gold-soft); }
/* a result nobody can buy now (the API's in_stock is false): faded picture and a dark "Sold out" in place of the offer badge */
.sp-card.is-sold .sp-card-img img { opacity: .45; filter: grayscale(.85); }
.sp-card.is-sold .sp-card-badge { background: #1a1a1a; color: #fff; }

/* the typed words, picked out */
.search-panel mark { background: transparent; color: var(--c-gold); font-weight: 800; }

/* live results: products, and collections + guides beside them */
.sp-live { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 20px 26px; align-items: start; }
.sp-live--solo { grid-template-columns: minmax(0, 1fr); }
.sp-main { min-width: 0; padding-right: 0; }
.sp-live--solo .sp-main .sp-label { padding-right: 36px; }
.sp-side { padding: 0 0 0 22px; border-left: 1px solid rgba(255,255,255,.09); }
.sp-side section + section { margin-top: 22px; }
.sp-side .sp-label { padding-right: 36px; }

.sp-links { margin: 0; padding: 0; list-style: none; }
.sp-links a {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 -8px; padding: 8px;
  border-radius: 8px;
  color: #e6e6e6; font-size: 13px; font-weight: 500; line-height: 1.35;
  transition: background .15s, color .15s;
}
.sp-links a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sp-links svg { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; stroke: var(--c-gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-links span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sp-empty {
  margin: 0; padding: 18px;
  border-radius: 12px; background: rgba(255,255,255,.04);
  color: #bdbdbd; font-size: 14px; line-height: 1.5;
}
.sp-empty strong { color: #fff; }

/* loading: shimmering cards in place of the products */
.sp-skel { pointer-events: none; }
.sp-skel .sp-card-img { background: linear-gradient(100deg, #242424 30%, #333 50%, #242424 70%); background-size: 200% 100%; animation: sp-shimmer 1.2s linear infinite; }
.sp-skel-line { display: block; height: 10px; border-radius: 5px; background: #242424; }
.sp-skel-line--short { width: 55%; }
@keyframes sp-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sp-skel .sp-card-img { animation: none; } }

/* the way to everything else */
.sp-all {
  grid-column: 1 / -1;
  position: sticky; bottom: 14px; z-index: 3;   /* stays in view while the results scroll under it */
  box-shadow: 0 0 0 14px #151515;               /* a dark ring, so cards passing under it do not show around it */
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px;
  border-radius: 12px; background: var(--c-gold); color: #111;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .15s;
}
.sp-all:hover { background: var(--c-gold-soft); }
.sp-all strong { font-weight: 800; }
.sp-all svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* narrower desktops: the product grid sits beside the side lists in less room */
@media (max-width: 1023px) {
  .sp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-live--solo .sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Account / Basket links */
.header-link {
  display: flex; align-items: center;
  gap: 8px;
  font-size: 15px; font-weight: 700; line-height: 1.15;
  white-space: nowrap; color: var(--c-white);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); text-decoration: none;
}
.header-link small { font-size: 14px; font-weight: 400; opacity: .85; display: block; }
.header-link svg { width: 32px; height: 32px; stroke: var(--c-white); fill: none; stroke-width: 1.4; }
.header-link span { text-align: left; }
.header-link:hover { opacity: .75; }
.header-link:hover svg { stroke: currentColor; }

/* Cart badge */
.cart-badge {
  position: absolute;
  top: -6px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: var(--c-gold);
  color: #111;
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-header-bg, #111);
  pointer-events: none;
}

/* Mobile hamburger */
.menu-toggle {
  display: none;
  width: 24px; height: 32px;
  border: 0; background: transparent;
  flex-direction: column; justify-content: center; gap: 4px;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.menu-toggle span { display: block; height: 2px; width: 22px; background: var(--c-white); border-radius: 2px; }

/* ── Row 2: Main nav ── */
.main-nav {
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; z-index: 1;
}

.main-nav > .container { position: relative; }

.main-nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 46px;
  align-items: center;
  gap: 10px;
}

.main-nav a {
  font-size: 16px; font-weight: 600;
  color: var(--c-white); white-space: nowrap;
}
.main-nav a:hover { color: var(--c-gold-soft); }

/* Twelve entries: type and gaps ease with the width so the row stays on one
   line from about 1130px up. Links inside the panels are not touched. */
.main-nav > .container > ul { gap: clamp(4px, .6vw, 8px); }
.main-nav > .container > ul > li > a { font-size: clamp(12.5px, 1.1vw, 15px); }

.caret {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 3px;
  vertical-align: middle;
  position: relative; top: -1px;
  stroke: var(--c-white);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease, stroke .15s;
}
.main-nav a:hover .caret { stroke: var(--c-gold-soft); }
.nav-item.is-open > a .caret { transform: rotate(180deg); }

.nav-item {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center;
}

/* ── Simple dropdown ── */
.nav-sub {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  z-index: 20;
  width: 220px;
  padding: 16px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.nav-item.is-open .nav-sub { display: block; animation: nav-in .16s ease; }

/* ── Mega menu ── */
/* has-mega items must be position:static so .nav-mega anchors to the container */
.nav-item.has-mega { position: static; }

.nav-mega {
  display: none;
  position: absolute;
  top: 100%; left: 5%; right: 5%;
  z-index: 20;
  max-height: 70vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  border-radius: 0 0 12px 12px;
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}
.nav-item.is-open .nav-mega { display: grid; animation: nav-mega-in .16s ease; }
.nav-mega-2 { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.nav-mega-3 {
  /* The page says how wide each column is (--nav-tracks, from NavColumns::tracks): a normal one a quarter of the menu, a
     wide one what the normal ones leave. The old quarter / quarter / half is only what an old page falls back to. */
  grid-template-columns: var(--nav-tracks, 1fr 1fr 2fr);
  gap: 0 0;
}
.nav-mega-4 { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }

@keyframes nav-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nav-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-sub-label {
  display: block; margin: 0 0 6px;
  color: var(--c-text); font-size: 17px; font-weight: 700;
  padding-bottom: 0;
  letter-spacing: -.01em;
}
/* stacked section inside a column */
.nav-mega-section + .nav-mega-section { margin-top: 24px; }

.nav-mega-col + .nav-mega-col { padding-left: 36px; }

/* Brand search input inside mega col. It never runs wider than 540px, the most it was in a half-width column: a wide column
   can now be three quarters of the menu (NavColumns::tracks), or all of it, and a search box needs no more than this. */
.nav-brands-search {
  display: flex; align-items: center;
  gap: 8px;
  max-width: 540px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f8f8f8;
}
.nav-brands-search svg { width: 15px; height: 15px; stroke: #999; fill: none; stroke-width: 2; flex-shrink: 0; }
.nav-brands-search input {
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: var(--c-text);
  width: 100%;
}
.nav-brands-search input::placeholder { color: #aaa; }

/* A column with a wide section (.nav-mega-col-wide) is wider than the others through --nav-tracks above; the class is only
   a hook. The A-Z cells are minmax(0, 1fr) so a long name wraps inside its cell and never runs into the next one. */
.nav-brands-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0 24px; }
.nav-brands-grid--1 { grid-template-columns: minmax(0, 1fr); }
.nav-brands-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-brands-grid ul { list-style: none; margin: 0; padding: 0; }
.nav-brands-cell { min-width: 0; }
.nav-brands-empty { margin: 0; font-size: 13px; color: #888; }
.nav-brand-group { margin-bottom: 14px; }
.nav-brand-letter {
  display: block; margin: 0 0 5px;
  font-size: 13px; font-weight: 700; color: var(--c-gold);
  border-bottom: 1px solid #e5e7eb; padding-bottom: 5px;
}

.nav-sub ul,
.nav-mega ul { display: block; list-style: none; margin: 0; padding: 0; }
.nav-sub a,
.nav-mega a { display: block; padding: 5px 0; color: #333; font-size: 14px; font-weight: 400; line-height: 1.45; }
.nav-sub a:hover,
.nav-mega a:hover { color: var(--c-gold); }
/* .main-nav a keeps the top row on one line; inside a mega menu a long name wraps instead of running into the next column */
.nav-mega a { white-space: normal; overflow-wrap: break-word; }

/* ── Trust bar: the slim strip above the sticky header (scrolls away) ── */
.trust-bar {
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}

.trust-bar-inner {
  display: flex;
  justify-content: space-between;   /* first item on the left edge, last on the right edge */
  align-items: center;
  gap: 16px;
  min-height: 38px;
}

/* The type eases with the width (as the nav does) so the longer delivery countdown stays on one line */
.trust-item {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; font-size: clamp(12.5px, 1.1vw, 15px); color: #fff; font-weight: 300;
}
.trust-item strong { font-weight: 700; }

/* Delivery countdown: gold figures */
.trust-delivery .trust-time,
.trust-delivery strong { color: var(--c-gold); font-weight: 600; }
.trust-delivery .trust-time { font-variant-numeric: tabular-nums; }

.trust-item svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.trust-google {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; color: inherit;
}
.trust-google svg { stroke: none; width: 24px; height: 24px; }
.trust-google-stars { font-size: 13px; color: #f5c518; letter-spacing: 1px; line-height: 1; }
.trust-google-label { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; }

/* ---------------------------------------------------------
   4. Hero slider
   --------------------------------------------------------- */
.hs { padding: 20px 0 8px; }

.hs-track {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 390px;
  background: #0d1b2a;
  touch-action: pan-y;            /* a sideways swipe moves the banner, up and down still scrolls the page */
  -webkit-user-select: none; user-select: none;
}

/* ── Slides ──
   CSS says which slide is showing; how one gives way to the next is animated by the
   heroSlider component in home/index.php (a push from the side, a settling picture, rising words). */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hs-slide.hs-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}
.hs-slide.hs-leaving { opacity: 1; visibility: visible; z-index: 1; }
.hs-slide.hs-active,
.hs-slide.hs-leaving { will-change: transform, opacity; }

.hs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* left-side text-readability gradient */
.hs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.2) 75%, transparent 100%);
}

/* ── Copy ── */
.hs-copy {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 580px;
}

.hs-badge {
  /* the slide's kicker: a still gold tab to the left of the words (a bar that grows with a wrapped line) */
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 3px 0 3px 11px;
  border-left: 3px solid var(--c-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hs-title {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hs-sub {
  margin: 0 0 16px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.55;
}

.hs-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  text-decoration: none;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 5px 14px 5px 8px;
  backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s;
}
.hs-google-badge:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); }
.hs-google-stars { font-size: 13px; color: #f5c518; letter-spacing: 1px; line-height: 1; }
.hs-google-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.9); }
.hs-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.hs-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: opacity .16s, background .16s;
}
.hs-btn--white { background: #fff; color: #111; }
.hs-btn--white:hover { opacity: .88; }
.hs-btn--dark  { background: #1a1a2e; color: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.hs-btn--dark:hover  { background: #111; }

/* ── Arrows ── */
/* Arrows: big bare chevrons with no disc behind them. A soft shadow keeps them readable on any
   picture; the button is a generous target while the glyph itself stays slim. Hidden on phones
   (swipe is there instead). */
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 104px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: .9;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, opacity .2s;
}
.hs-arrow svg {
  width: clamp(28px, 2.8vw, 40px); height: clamp(28px, 2.8vw, 40px);
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.55));
  transition: transform .25s cubic-bezier(.22,.8,.2,1);
}
.hs-arrow:hover,
.hs-arrow:focus-visible { color: var(--c-gold); opacity: 1; }
.hs-arrow--prev:hover svg { transform: translateX(-4px); }
.hs-arrow--next:hover svg { transform: translateX(4px); }
.hs-arrow:active svg { transform: scale(.9); }
.hs-arrow:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -8px; border-radius: 16px; }
.hs-arrow--prev { left: 4px; }
.hs-arrow--next { right: 4px; }
@media (prefers-reduced-motion: reduce) { .hs-arrow svg { transition: none; } }

/* ── Stat panel (slide 1, right side) ── */
.hs-statpanel {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 230px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
}
.hs-statrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hs-statrow:last-child { border-bottom: 0; }
.hs-statrow strong {
  min-width: 68px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #e8c15a 0%, #f4d98a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.hs-statrow span {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
}
@media (max-width: 900px) {
  .hs-statpanel { display: none; }
}

/* ── Header mobile ── */
@media (max-width: 768px) {
  /* Hamburger: show */
  .menu-toggle { display: flex !important; }

  /* Top bar: flex row instead of grid */
  .top-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding-block: 6px;
  }

  /* Logo smaller, no shrink */
  .logo { flex-shrink: 0; margin-left: 0; }
  .logo img { height: 28px; }

  /* Search: compact, takes remaining space */
  .search { flex: 1; min-width: 0; max-width: none; }
  .search input { height: 36px; font-size: 16px; border-radius: 8px; padding: 0 14px 0 36px; }
  .search > button[type="submit"] { left: 8px; }
  .search > button[type="button"] { right: 6px; }
  .search svg { width: 16px; height: 16px; }

  /* Account / Cart: icon only — hide text spans, tighter gap */
  .header-link > span:not([style]) { display: none; }
  .header-link { padding: 0 2px; gap: 0; }
  .header-link svg { width: 24px; height: 24px; }

  /* Desktop nav: hidden (hamburger opens mobile-nav) */
  .main-nav { display: none; }

  /* Trust bar: hidden on mobile */
  .trust-bar { display: none; }

  /* Search panel: fixed overlay, full-width, hanging from the bottom edge of the 52px header */
  .search-panel {
    position: fixed;
    top: 52px;
    left: 0; right: 0;
    transform: none;
    width: 100%;
    max-height: 72vh;
    border-radius: 0 0 18px 18px;
    border-width: 1px 0 0;
    z-index: 200;
    padding: 18px 14px 14px;
  }
  .search-panel-close { top: 8px; right: 8px; }

  /* Prevent iOS auto-zoom — all inputs must be ≥16px on mobile */
  input, textarea, select { font-size: 16px !important; }

  /* When search is active: hide logo only, search expands to fill logo space */
  .top-bar-inner:has(.search.is-open) .logo {
    display: none !important;
  }
  .top-bar-inner:has(.search.is-open) .search {
    flex: 1 1 auto;
  }

  /* Two cards across, results and side lists stacked */
  .sp-grid--4,
  .sp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-live,
  .sp-live--solo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sp-side { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .sp-chips { padding-right: 0; margin-bottom: 20px; }
  .sp-chips a { padding: 6px 12px; font-size: 12.5px; }
  .sp-links a { padding: 10px 8px; }
}

/* Mobile slider images */
@media (max-width: 768px) {
  .hs-bg--1 { background-image: url('https://powervapeshop.co.uk/cdn/shop/files/50k_vape_MOBILE_REWORK.png?v=1778843405&width=1000') !important; background-position: center top !important; }
  .hs-bg--2 { background-image: url('https://powervapeshop.co.uk/cdn/shop/files/PVS_BANNER_PRICE_UPGRADE_MOBILE.jpg?v=1784542370&width=1000') !important; background-position: center top !important; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hs-track { min-height: 380px; }
  .hs-copy { left: 24px; right: 24px; max-width: 100%; }
  .hs-title { font-size: 24px; }
  .hs-sub { font-size: 14px; }
}
@media (max-width: 480px) {
  .hs-track { min-height: 320px; border-radius: 10px; }
  .hs-copy { left: 18px; right: 18px; }
  .hs-title { font-size: 21px; }
}

/* ---------------------------------------------------------
   4a. Sideways rail — a row that scrolls with round arrows (only while there is more that way),
       a mouse drag, or a swipe. storefront.js (rails) drives it from data-rail. Used by the strip
       under the banner and by multibuy deals; --rail-fade is the colour behind it.
   --------------------------------------------------------- */
.rail {
  --rail-fade:   #ffffff;
  --rail-fade-0: rgba(255,255,255,0);
  position: relative; flex: 1; min-width: 0; display: flex;
}
.rail-track {
  display: flex; flex: 1; min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-snap-type: none; }   /* no snapping under a mouse drag, it settles on release */
.rail-track.is-dragging > * { pointer-events: none; }

.rail-nav {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--c-text);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background .15s;
}
.rail-nav:hover { background: #f0f0f2; }
.rail-nav svg { width: 16px; height: 16px; }
.rail-nav--prev { left: 8px; }
.rail-nav--next { right: 8px; }
.rail.can-prev .rail-nav--prev,
.rail.can-next .rail-nav--next { display: flex; }
/* a soft fade at an edge that has more behind it */
.rail::before, .rail::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.rail::before { left: 0;  background: linear-gradient(90deg,  var(--rail-fade), var(--rail-fade-0)); }
.rail::after  { right: 0; background: linear-gradient(270deg, var(--rail-fade), var(--rail-fade-0)); }
.rail.can-prev::before, .rail.can-next::after { opacity: 1; }

@media (max-width: 768px) {
  .rail-nav, .rail::before, .rail::after { display: none !important; }   /* a swipe does it on a phone */
  .rail-track { cursor: auto; }
}

/* ---------------------------------------------------------
   4a-i. Recently viewed — a slim strip under the banner, only for visitors with a history
   --------------------------------------------------------- */
.rv { padding: 4px 0 12px; }
.rv-box {
  display: flex; align-items: stretch;
  min-height: 96px;
  border-radius: 8px;                /* the banner's corners */
  background: var(--c-surface);
  overflow: hidden;
}
.rv .rail { --rail-fade: var(--c-surface); --rail-fade-0: rgba(244,244,245,0); }
.rv-head {
  flex: 0 0 148px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
  padding: 14px 8px 14px 20px;
}
.rv-title { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--c-text); }
.rv-clear {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-muted); font: inherit; font-size: 12px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-clear:hover { color: var(--c-text); }

.rv-item {
  flex: 0 0 auto; width: 268px;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center;
  margin: 8px 0; padding: 6px 12px;
  border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: background .15s;
}
.rv-item:hover { background: rgba(0,0,0,.04); }
.rv-img {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 8px; background: #fff; overflow: hidden;
}
.rv-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rv-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-vendor { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--c-text);
}
.rv-item:hover .rv-name { text-decoration: underline; text-underline-offset: 2px; }
.rv-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.rv-price b { font-size: 14px; font-weight: 800; color: var(--c-text); }
.rv-price s { font-size: 12px; font-weight: 500; color: var(--c-muted); }

@media (max-width: 768px) {
  .rv-box { flex-direction: column; min-height: 0; }
  .rv-head { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
  .rv-item { width: 236px; margin: 6px 0 10px; padding: 6px 10px; }
}
@media (max-width: 480px) { .rv-box { border-radius: 10px; } }

/* ---------------------------------------------------------
   4b. Quick Shop — ecigone-style category cards
   --------------------------------------------------------- */
.qs { padding: 10px 0 32px; }

.qs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.qs-heading {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
  letter-spacing: -.02em;
}
.qs-view-all {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--c-primary);
  text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.qs-view-all:hover { opacity: .7; }

.qs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Full-bleed image card */
.qs-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  min-height: 210px;
  text-decoration: none;
  background: var(--c-primary);
  transition: transform .25s ease, box-shadow .25s ease;
}
.qs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Full-bleed background image */
.qs-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}
.qs-card:hover .qs-bg { transform: scale(1.06); }

/* Gradient overlay — dark left → transparent right */
.qs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(8,16,28,.88) 0%,
    rgba(8,16,28,.65) 45%,
    rgba(8,16,28,.15) 100%
  );
  z-index: 1;
  transition: background .25s;
}
.qs-card:hover::before {
  background: linear-gradient(
    105deg,
    rgba(8,16,28,.92) 0%,
    rgba(8,16,28,.70) 45%,
    rgba(8,16,28,.20) 100%
  );
}

/* Text content */
.qs-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  gap: 3px;
}
.qs-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-gold);
  margin-bottom: 2px;
}
.qs-name {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0;
}
.qs-price {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin: 0 0 8px;
}
.qs-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-gold);
  color: #0d1b2a;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 7px;
  align-self: flex-start;
  transition: opacity .18s;
  line-height: 1;
}
.qs-card:hover .qs-btn { opacity: .88; }

@media (max-width: 1023px) {
  .qs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .qs-card { min-height: 160px; }
}

/* old qs 599px rule replaced by mobile section below */

/* ---------------------------------------------------------
   4c. Trending Now — product carousel
   --------------------------------------------------------- */
/* ── Popular Collections ("Shop by type") ───────────────────
   Three feature tiles (black, gold icon) for the categories that matter most, then compact light tiles.
   The first three tiles of the grid in Theme > Homepage Builder are the feature ones. */
.pc { padding: 12px 0 24px; }
.pc-heading { font-size: 30px; font-weight: 800; color: var(--c-text); margin: 0 0 14px; letter-spacing: -.02em; }

.pc-card {
  position: relative;
  display: flex; align-items: center;
  border-radius: 8px;
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.pc-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pc-name { line-height: 1.3; transition: color .18s; }
.pc-icon { position: absolute; width: auto; transition: opacity .18s, color .18s; }

/* the feature tiles */
.pc-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.pc-feat--2 { grid-template-columns: repeat(2, 1fr); }
.pc-feat--1 { grid-template-columns: 1fr; }
.pc-card--feat {
  min-height: 132px; padding: 18px 22px;
  background: linear-gradient(135deg, #1c1c1c, #0c0c0c);
  color: #fff;
}
.pc-card--feat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.pc-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 72%; }
.pc-card--feat .pc-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pc-note {
  margin-top: -4px;                   /* belongs to the name above it */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.66);
}
.pc-go { font-size: 13px; font-weight: 700; color: var(--c-gold); }
.pc-card--feat .pc-icon { top: 14px; right: 22px; height: 150px; color: var(--c-gold); opacity: .55; }
.pc-card--feat:hover .pc-icon { opacity: 1; }

/* the compact tiles under them; as many as there are, filling the row */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pc-card--sm { min-height: 68px; padding: 12px 16px; background: var(--c-surface); color: #111; }
.pc-card--sm .pc-name { position: relative; z-index: 1; font-size: 15.5px; font-weight: 800; color: #111; }
.pc-card--sm .pc-icon { top: 8px; right: 12px; height: 78px; color: #111; opacity: .45; }
.pc-card--sm:hover { background: #111; transform: translateY(-2px); }
.pc-card--sm:hover .pc-name { color: #fff; }
.pc-card--sm:hover .pc-icon { color: var(--c-gold); opacity: 1; }

@media (max-width: 1023px) {                    /* three feature tiles side by side get narrow */
  .pc-card--feat { padding: 16px 18px; }
  .pc-card--feat .pc-name { font-size: 21px; }
  .pc-card--feat .pc-icon { height: 124px; right: 14px; }
}
@media (max-width: 767px) {
  .pc-feat { grid-template-columns: 1fr; }
  .pc-card--feat { min-height: 104px; }
  .pc-card--feat .pc-icon { height: 118px; right: 16px; }
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-grid > .pc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd one out fills its row */
  .pc-card--sm { padding: 12px 14px; }
  .pc-card--sm .pc-name { font-size: 14.5px; }
  .pc-card--sm .pc-icon { height: 62px; right: 8px; }
}

/* ---------------------------------------------------------
   4c. Multibuy deals — products with an "Any 3 for £25" offer, as deal tiles on a dark panel
   --------------------------------------------------------- */
.mb { padding: 12px 0 20px; }
.mb-box {
  border-radius: 8px;                /* the banner's corners */
  background: var(--c-primary);
  color: #fff;
  overflow: hidden;
  padding: 22px 0 24px;
}
.mb .rail::before, .mb .rail::after { display: none; }   /* on the dark panel the half-seen card and the arrow already say there is more */

.mb-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 24px; margin-bottom: 16px;
}
.mb-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.mb-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.66); }
.mb-all {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 700; color: var(--c-gold); white-space: nowrap;
  transition: color .15s;
}
.mb-all svg { width: 14px; height: 14px; }
.mb-all:hover { color: var(--c-gold-soft); }

.mb-track { gap: 14px; padding: 4px 24px 6px; scroll-padding-left: 24px; }
.mb-card {
  position: relative;
  flex: 0 0 auto; width: 224px;
  display: flex; flex-direction: column;
  background: #fff; color: var(--c-text);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.mb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.mb-deal {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 99px;
  background: var(--c-gold); color: #151515;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-img {
  display: flex; align-items: center; justify-content: center;
  height: 176px; padding: 40px 14px 10px;
  background: #fff;
}
.mb-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mb-body { display: flex; flex-direction: column; gap: 3px; padding: 4px 14px 14px; }
.mb-vendor { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--c-text);
}
.mb-card:hover .mb-name { text-decoration: underline; text-underline-offset: 2px; }
.mb-price { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; font-size: 12.5px; color: var(--c-muted); }
.mb-price b { font-size: 17px; font-weight: 800; color: var(--c-text); }
.mb-price s { margin-left: 4px; font-size: 13px; }
.mb-save {
  align-self: flex-start; margin-top: 6px;
  padding: 3px 9px; border-radius: 6px;
  background: #e6f6ec; color: #11803a;
  font-size: 12px; font-weight: 700;
}

@media (max-width: 768px) {
  .mb-box { padding: 18px 0 18px; }
  .mb-head { padding: 0 16px; margin-bottom: 14px; }
  .mb-title { font-size: 22px; }
  .mb-track { gap: 12px; padding: 2px 16px 4px; scroll-padding-left: 16px; }
  .mb-card { width: 188px; }
  .mb-img { height: 144px; padding-top: 38px; }
}
@media (max-width: 480px) { .mb-box { border-radius: 10px; } }

/* ── Trending Now ───────────────────────────── */
.tn { padding: 12px 0 20px; }

.tn-heading {
  font-size: 30px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 14px;
  letter-spacing: -.02em;
}
/* The heading row of a home carousel: the title (and tagline) on the left, "View All" on the right. */
.tn-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tn-header .tn-heading { margin: 0; }
.tn-header .tn-see-all { flex: none; margin-left: 0; white-space: nowrap; }
/* The tagline staff can set under a carousel's heading (Theme > Carousels > Subtitle). The heading's line box
   is tall (body line height), so with a tagline it is closed up and the two read as a pair. */
.tn-header--sub { margin-bottom: 16px; }
.tn-header--sub .tn-heading { line-height: 1.2; }
.tn-subheading {
  margin: 2px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-muted);
  text-wrap: balance;              /* two even lines on a phone, not one word left over */
}

.tn-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.tn-track::-webkit-scrollbar { display: none; }

.tn-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Offer badge — compact pill overlaid top-left of image */
.tn-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 4;
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.tn-badge--info     { background: #f5c200; color: #1a0800; box-shadow: 0 2px 5px rgba(200,150,0,.3); }
.tn-badge--preorder { background: #f5c200; color: #1a0800; box-shadow: 0 2px 5px rgba(200,150,0,.3); }
.tn-badge--new      { background: #0d1b2a; color: #fff; }

.tn-badge-corner {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 3;
  letter-spacing: .01em;
}
.tn-badge--sale { background: #e8243c; color: #fff; font-weight: 600; }

.tn-img {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: #fff;
}
.tn-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

.tn-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 10px;
  flex: 1;
}

.tn-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.35;
  margin: 0;
  height: calc(15px * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stars */
.tn-stars { display: flex; align-items: center; gap: 4px; }
.tn-stars svg { flex-shrink: 0; }
.tn-count { font-size: 12.5px; color: var(--c-muted); }

/* Price */
.tn-price { font-size: 17px; font-weight: 800; color: var(--c-text); margin: 0; }
.tn-price--sale { display: flex; align-items: baseline; gap: 8px; }
.tn-sale { color: #e8243c; font-size: 17px; font-weight: 800; }
.tn-was { font-size: 13px; font-weight: 400; color: var(--c-muted); text-decoration: line-through; }

.tn-spec {
  font-size: 11.5px;
  color: var(--c-muted);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.tn-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-height: 0;
}
.tn-card__foot { padding: 0 14px 14px; }
.tn-buy {
  display: block;
  width: 100%;
  padding: 11px;
  background: #0d1b2a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 7px;
  text-decoration: none;
  transition: background .18s;
}
.tn-buy:hover { background: #1e3a52; }

/* A product nobody can buy now (no variant can be bought: App\Domain\Products\Stock). The picture is faded, "Sold out" sits
   on it where the offer badge would be (the offer and Sale badges are left off by the partial), and the button is a grey
   one that does nothing. The card is still a link to the product page. */
.tn-card--sold .tn-img img { opacity: .45; filter: grayscale(.85); }
.tn-soldout {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  padding: 4px 9px;
  border-radius: 5px;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.tn-buy--sold,
.tn-buy--sold:hover { background: var(--c-surface); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-border); cursor: not-allowed; }

/* "View All" at the right of a carousel's heading (the arrows are the shared rail's) */
.tn-see-all {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: opacity .15s;
}
.tn-see-all svg { width: 14px; height: 14px; }
.tn-see-all:hover { opacity: .6; }

@media (max-width: 767px) {
  .tn-card { flex: 0 0 220px; }
  .tn-img { height: 160px; }
}

/* ---------------------------------------------------------
   5. Mobile nav drawer
   --------------------------------------------------------- */
/* Hamburger → X when open */
.menu-toggle span {
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 52px; /* sits below the header */
  left: 0; right: 0; bottom: 0;
  z-index: 4100; /* over the bottom nav bar (4000), so the panel runs to the bottom of the screen; under the basket drawer (4500) */
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s;
}
.mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; }

.mobile-nav__panel {
  position: relative;
  width: min(82vw, 320px);
  height: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__links { flex: 1; }

/* Top-level accordion item */
.mn-item { border-bottom: 1px solid #f0f0f0; }
.mn-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 15px 20px;
  background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #1a1a2e;
  font-family: var(--font-sans); text-align: left;
}
.mn-item.is-open .mn-toggle { color: var(--c-primary); }
.mn-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform .2s; }
.mn-item.is-open > .mn-toggle .mn-chevron { transform: rotate(180deg); }

/* Level-1 sub panel */
.mn-sub { background: #f9f9f9; }

/* Flat sub-links (New In, Coils) */
.mn-sub-link {
  display: block; padding: 12px 20px 12px 28px;
  font-size: 14px; font-weight: 500; color: #374151;
  text-decoration: none; border-bottom: 1px solid #eee;
}
.mn-sub-link:hover { color: var(--c-primary); background: #f3f3f3; }

/* Level-2 section headers */
.mn-sub-item { border-bottom: 1px solid #eee; }
.mn-sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 13px 20px 13px 24px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #1a1a2e;
  font-family: var(--font-sans); text-align: left;
}
.mn-sub-toggle:hover { color: var(--c-primary); }
.mn-sub-toggle .mn-chevron { transition: transform .2s; }

/* Level-2 links */
.mn-sub2 { background: #f3f3f3; }
.mn-sub2 a {
  display: block; padding: 10px 20px 10px 36px;
  font-size: 13px; font-weight: 400; color: #4b5563;
  text-decoration: none; border-bottom: 1px solid #eaeaea;
}
.mn-sub2 a:hover { color: var(--c-primary); }

/* Direct link (no dropdown) */
.mn-link {
  display: flex; align-items: center;
  padding: 15px 20px;
  font-size: 15px; font-weight: 600; color: #1a1a2e;
  text-decoration: none; border-bottom: 1px solid #f0f0f0;
}
.mn-link:hover { background: #f8f8f8; color: var(--c-primary); }

/* Extras — secondary links (Contact, Blog, etc.) */
.mn-extras { padding: 14px 0 8px; border-top: 2px solid #f0f0f0; }
.mn-extras a {
  display: block; padding: 8px 20px;
  font-size: 14px; font-weight: 500; color: #4b5563; text-decoration: none;
}
.mn-extras a:hover { color: var(--c-primary); }

.mobile-nav__footer {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));   /* clear of the home indicator now that the panel reaches the screen's bottom */
  border-top: 1px solid #eee;
}
.mobile-nav__account-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: var(--c-primary);
  color: #fff;
  font-size: 14px; font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}
.mobile-nav__account-btn svg { width: 18px; height: 18px; stroke: #fff; }

/* ---------------------------------------------------------
   5. Cart drawer
   --------------------------------------------------------- */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  right: 0; top: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  font-weight: 600; font-size: .9375rem;
  flex-shrink: 0;
}
.cart-drawer__close-btn {
  background: none; border: none; padding: 4px;
  color: var(--c-text); cursor: pointer; line-height: 0;
  border-radius: 50%; transition: background .15s;
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer__close-btn:hover { background: var(--c-surface); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.cart-drawer__foot {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}

.cart-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}
.cart-item:last-child { border-bottom: 0; }

.cart-item__img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  flex-shrink: 0;
}

.cart-item__info { flex: 1; min-width: 0; }
.cart-item__title { font-size: .875rem; font-weight: 500; line-height: 1.3; }
.cart-item__variant { font-size: .8125rem; color: var(--c-muted); }
.cart-item__price { font-weight: 600; font-size: .9375rem; margin-top: 4px; }

.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  overflow: hidden; margin-top: 6px;
}
.qty-stepper button {
  width: 28px; height: 28px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--c-text);
}
.qty-stepper input {
  width: 36px; height: 28px;
  border: none; text-align: center;
  font-size: .875rem; font-weight: 500;
}

/* ---------------------------------------------------------
   6. Section
   --------------------------------------------------------- */
.section { padding: 40px 0; }
@media (min-width: 768px) { .section { padding: 56px 0; } }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}

.section__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
@media (min-width: 768px) { .section__title { font-size: 1.5rem; } }

.section__link {
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-accent);
  white-space: nowrap;
}
.section__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   8. Product card
   --------------------------------------------------------- */
.product-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card__img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-surface);
  overflow: hidden;
}

.product-card__img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform .3s;
}
.product-card:hover .product-card__img { transform: scale(1.04); }

.product-card__badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: .6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: .04em;
}

.product-card__body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__title {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__price {
  margin-top: auto;
  padding-top: 6px;
  display: flex; align-items: baseline; gap: 6px;
}

.product-card__price-now { font-weight: 700; font-size: .9375rem; }

.product-card__price-was {
  font-size: .8125rem;
  color: var(--c-muted);
  text-decoration: line-through;
}

/* ---------------------------------------------------------
   9. Collection card
   --------------------------------------------------------- */
.collection-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--c-surface);
}

.collection-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.collection-card:hover img { transform: scale(1.06); }

.collection-card__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%);
  color: var(--c-white);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.2;
}


/* ---------------------------------------------------------
   11. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn-primary:hover { background: var(--c-accent-h); }

.btn-dark {
  background: var(--c-primary);
  color: var(--c-white);
}
.btn-dark:hover { background: #333; }

.btn-outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-outline:hover { border-color: var(--c-text); }

.btn-full { width: 100%; }

.btn-sm { height: 36px; padding: 0 14px; font-size: .8125rem; }

/* ---------------------------------------------------------
   12. Form elements
   --------------------------------------------------------- */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  background: var(--c-bg);
  color: var(--c-text);
  outline: none;
  transition: border-color .15s;
}
.form-control:focus { border-color: var(--c-primary); }
.form-control.is-invalid { border-color: var(--c-accent); }

.form-error { font-size: .8125rem; color: var(--c-accent); margin-top: 4px; }

/* ---------------------------------------------------------
   13. Breadcrumb
   --------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px;
  font-size: .8125rem; color: var(--c-muted);
  padding: 12px 0;
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb span { color: var(--c-text); font-weight: 500; }

/* ---------------------------------------------------------
   14. Pagination
   --------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 28px 0 32px;
}
.page-numbers {
  display: flex; align-items: center; gap: 4px;
}
/* Previous / Next text buttons */
.page-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-dark);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.page-nav-btn:hover { border-color: #111; background: #f9fafb; }
.page-nav-btn.is-disabled { opacity: .35; pointer-events: none; }

/* Numbered page buttons */
.page-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 4px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500;
  background: var(--c-bg); color: var(--c-text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.page-btn:hover { border-color: #111; background: #f9fafb; }
.page-btn.is-active {
  background: #111; color: #fff; border-color: #111;
  font-weight: 700;
}

/* ---------------------------------------------------------
   15. Product Detail Page (PDP)
   --------------------------------------------------------- */

/* Two-column grid: wide left (gallery+desc) + narrower sticky right */
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 28px 0 64px;
  align-items: start;
}

/* ── LEFT column (gallery + description) ── */
.pdp-left { min-width: 0; }

/* ── RIGHT column (sticky purchase panel) ── */
.pdp-right {
  position: sticky;
  top: calc(var(--header-h, 108px) + 20px);
  min-width: 0;
}

/* ── Gallery ── */
.pdp-gallery { margin-bottom: 8px; }

.pdp-gallery-main {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid #f5f5f5;
}
.pdp-gallery-main img {
  width: 80%; height: 80%;
  object-fit: contain;
  transition: opacity .2s;
}
.pdp-no-img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* Thumbnails — scrollable strip with arrows */
.pdp-thumbs-wrap {
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
.pdp-thumbs {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  flex: 1;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumbs-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1.5px solid var(--c-border); border-radius: 6px;
  background: var(--c-bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
  color: var(--c-text);
}
.pdp-thumbs-arrow:hover { border-color: #aaa; background: var(--c-surface); }

.pdp-thumb {
  width: 80px; height: 80px; flex-shrink: 0;
  border: 2px solid var(--c-border); border-radius: 8px;
  overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { border-color: #aaa; }
.pdp-thumb.is-active { border-width: 1.5px; border-color: #888; }

/* ── Description + reviews (inside left col; no tabs, the reviews follow the description) ── */
.pdp-body-section {
  border-top: 1px solid var(--c-border);
  margin-top: 24px;
  padding: 28px 0 48px;
}
/* The header is sticky (113px on a desktop, 52px on a phone), so a jump to #reviews, which the review pager
   uses, has to stop below it. */
.pdp-reviews {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--c-border);
  scroll-margin-top: 130px;
}
@media (max-width: 767px) {
  .pdp-reviews { margin-top: 32px; padding-top: 24px; scroll-margin-top: 68px; }
}
.pdp-body { font-size: .9375rem; line-height: 1.75; color: var(--c-text); }
.pdp-body p  { margin: 0 0 14px; }
.pdp-body h2 { font-size: 1.125rem; font-weight: 700; margin: 24px 0 10px; }
.pdp-body h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; }
.pdp-body ul, .pdp-body ol { padding-left: 20px; margin: 0 0 14px; }
.pdp-body li { margin-bottom: 5px; }
.pdp-body a  { color: var(--c-primary); text-decoration: underline; }
.pdp-body strong { font-weight: 700; }

.pdp-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.pdp-tags li {
  padding: 4px 12px; font-size: .8125rem;
  background: var(--c-surface); border-radius: 20px; color: var(--c-muted);
}

/* ── Right panel: vendor / title / price / stock ── */
/* Vendor + rating row */
.pdp-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.pdp-vendor-wrap { display: flex; align-items: center; gap: 5px; }
.pdp-by { font-size: .875rem; color: var(--c-muted); }
.pdp-vendor {
  font-size: 1rem; font-weight: 700;
  color: var(--c-text);
}
/* Underlined and hover-coloured only when it is a link: a brand with no collection is plain text */
a.pdp-vendor { text-decoration: underline; text-underline-offset: 2px; }
a.pdp-vendor:hover { color: var(--c-accent); }
.pdp-rating { display: flex; align-items: center; gap: 6px; }
.pdp-stars { display: flex; align-items: center; gap: 3px; }
.pdp-rating-count { font-size: .9375rem; color: var(--c-muted); font-weight: 500; text-decoration: none; }

.pdp-title {
  font-size: 1.625rem; font-weight: 800; line-height: 1.2;
  color: var(--c-text); margin: 0 0 14px;
}
.pdp-title-divider {
  border: none; border-top: 1px solid var(--c-border);
  margin: 0 0 16px;
}

/* Price row: left cluster + right stock */
.pdp-price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.pdp-price-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pdp-price { font-size: 1.75rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.pdp-compare {
  font-size: 1.0625rem; color: var(--c-muted);
  text-decoration: line-through; font-weight: 400;
}
.pdp-save-badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  background: var(--c-accent); color: #fff;
  padding: 3px 8px; border-radius: 20px;
}
.pdp-offer-badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  background: transparent; color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  line-height: 1;
}
.pdp-stock {
  display: flex; align-items: center; gap: 5px;
  font-size: .8125rem; font-weight: 600; color: #16a34a;
  white-space: nowrap; flex-shrink: 0;
}
.pdp-stock.is-out { color: #dc2626; }

/* Highlights */
.pdp-highlights-wrap { margin-bottom: 18px; }
.pdp-highlights-title {
  font-size: 1.0625rem; font-weight: 700; color: var(--c-text);
  margin: 0 0 8px;
}
.pdp-highlights {
  list-style: none; padding: 0; margin: 0;
}
.pdp-highlights li {
  position: relative; padding-left: 16px;
  font-size: .9375rem; line-height: 1.6; color: var(--c-text);
  margin-bottom: 3px;
}
.pdp-highlights li::before {
  content: '•'; position: absolute; left: 0; top: 0;
  color: var(--c-accent); font-weight: 700;
}

/* Option groups */
.pdp-options { margin-bottom: 16px; }
.pdp-option-group { margin-bottom: 16px; }
.pdp-option-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pdp-option-label {
  font-size: 1rem; font-weight: 700; color: var(--c-text);
}
.pdp-opt-val { font-weight: 700; color: var(--c-text); }
.pdp-option-required {
  font-size: .75rem; font-weight: 600; color: var(--c-accent); flex-shrink: 0;
}

/* Multi-buy table — ecigone style */
.pdp-multibuy {
  margin-bottom: 20px;
}
.pdp-multibuy-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--c-border);
}
.pdp-multibuy-head .pdp-mb-label {
  font-size: 1rem; font-weight: 800; color: var(--c-text);
}
.pdp-multibuy-head .pdp-mb-col {
  font-size: .8125rem; font-weight: 500; color: var(--c-muted);
}
.pdp-multibuy-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  font-size: .9375rem; color: var(--c-text);
}
.pdp-multibuy-price { font-weight: 700; }
.pdp-select-wrap {
  position: relative;
}
.pdp-select {
  display: block; width: 100%;
  padding: 11px 40px 11px 14px;
  font-size: .9375rem; font-weight: 500; color: var(--c-text);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pdp-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.pdp-select-chevron {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  pointer-events: none; stroke: var(--c-muted);
}

/* Qty + ATC row */
/* ATC dark box */
.pdp-atc-box {
  background: var(--c-primary);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
}
.pdp-atc-shipping {
  text-align: center;
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}
.pdp-atc-shipping strong { color: #fff; font-weight: 700; }
.pdp-atc-shipping span  { color: #fff; font-weight: 600; }

.pdp-atc-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 8px;
}
.pdp-qty {
  display: flex; align-items: center;
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 7px;
  overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,.08);
}
.pdp-qty-btn {
  width: 34px; height: 100%; min-height: 42px;
  background: none; border: none; cursor: pointer;
  font-size: 1.125rem; font-weight: 400; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.pdp-qty-btn:hover { background: rgba(255,255,255,.12); }
.pdp-qty-input {
  width: 36px; text-align: center;
  border: none; border-left: 1px solid rgba(255,255,255,.15); border-right: 1px solid rgba(255,255,255,.15);
  font-size: .875rem; font-weight: 600; color: #fff;
  background: none; padding: 0; outline: none; -moz-appearance: textfield;
}
.pdp-qty-input::-webkit-inner-spin-button,
.pdp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.pdp-atc-btn {
  flex: 1; padding: 0 14px; min-height: 42px;
  background: #fff; color: var(--c-primary);
  font-size: 1rem; font-weight: 800; letter-spacing: .02em;
  border: none; border-radius: 7px; cursor: pointer;
  transition: opacity .15s;
}
.pdp-atc-btn:hover { opacity: .88; }
.pdp-atc-btn.is-disabled { background: rgba(255,255,255,.2); color: rgba(255,255,255,.4); cursor: not-allowed; opacity: 1; }
/* What the basket refused (not enough in stock, or a fault), under the quantity and the button, with a button for the
   quantity that is left */
.pdp-atc-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid rgba(245,194,0,.5); border-radius: 8px; background: rgba(245,194,0,.12);
  color: #fde68a; font-size: .875rem; line-height: 1.45;
}
.pdp-atc-notice__text { flex: 1 1 200px; min-width: 0; }
.pdp-atc-notice__btn {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 6px;
  background: var(--c-gold); color: #111; font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer;
}
.pdp-atc-notice__btn:hover { opacity: .88; }

.pdp-atc-delivery {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: .75rem; color: rgba(255,255,255,.65);
}
.pdp-atc-delivery strong { color: #fff; font-weight: 600; }
.pdp-atc-timer { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Trust strip */

/* ── FBT (Frequently Bought Together) ── */
.pdp-fbt { padding: 20px 0 8px; }
.pdp-fbt-title {
  font-size: 1.125rem; font-weight: 800; color: var(--c-text);
  margin-bottom: 12px;
}
.pdp-fbt-list { display: flex; flex-direction: column; gap: 0; }
.pdp-fbt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.pdp-fbt-row:first-child { border-top: 1px solid var(--c-border); }
.pdp-fbt-img-wrap {
  flex-shrink: 0; width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden;
  background: var(--c-surface); display: flex;
  align-items: center; justify-content: center;
}
.pdp-fbt-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
}
.pdp-fbt-no-img {
  width: 72px; height: 72px; border-radius: 8px; background: var(--c-surface); flex-shrink: 0;
}
.pdp-fbt-info { flex: 1; min-width: 0; }
.pdp-fbt-name {
  display: block; font-size: .875rem; font-weight: 600;
  line-height: 1.4; color: var(--c-text); text-decoration: none;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-fbt-name:hover { text-decoration: underline; }
.pdp-fbt-price {
  display: block; font-size: .9375rem; font-weight: 800; color: var(--c-text);
}
.pdp-fbt-btn {
  flex-shrink: 0; padding: 9px 16px;
  background: var(--c-primary); color: #fff;
  font-size: .8125rem; font-weight: 700; text-align: center;
  border-radius: 8px; text-decoration: none; white-space: nowrap;
}

/* ── More Items Like This ── */
.pdp-more-section { padding: 40px 0; border-top: 1px solid var(--c-border); }
.pdp-section-heading { font-size: 1.25rem; font-weight: 800; color: var(--c-text); margin: 0 0 20px; }

/* ── Reviews tab ── */
.rv-summary { display: flex; gap: 32px; align-items: flex-start; padding: 24px; border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.rv-summary-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; }
.rv-big-num { font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--c-text); }
.rv-summary-stars { display: flex; gap: 2px; }
.rv-summary-label { font-size: .8125rem; color: var(--c-muted); text-align: center; }
.rv-summary-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.rv-bar-row { display: flex; align-items: center; gap: 8px; }
.rv-bar-label { font-size: .8125rem; color: var(--c-muted); width: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.rv-bar-track { flex: 1; height: 10px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.rv-bar-fill { height: 100%; background: #FFB800; border-radius: 99px; transition: width .3s; }
.rv-bar-count { font-size: .8125rem; color: var(--c-muted); width: 30px; text-align: right; flex-shrink: 0; }
.rv-write-cta { background: var(--c-primary); border-radius: 10px; padding: 28px 20px; text-align: center; margin-bottom: 20px; }
.rv-write-stars { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; }
.rv-write-link { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-primary); border: none; border-radius: 8px; padding: 11px 22px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: opacity .15s; }
.rv-write-link:hover { opacity: .88; }
.rv-write-sub { color: rgba(255,255,255,.6); font-size: .875rem; margin: 6px 0 0; }
.rv-list { display: flex; flex-direction: column; gap: 12px; }
.rv-card { display: flex; gap: 14px; border: 1px solid var(--c-border); border-radius: 10px; padding: 18px; }
.rv-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; color: var(--c-text); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-card-body { flex: 1; min-width: 0; }
.rv-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rv-card-name { font-weight: 700; font-size: .9375rem; color: var(--c-text); }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; background: #dcfce7; color: #166534; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.rv-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rv-card-stars { display: flex; gap: 1px; }
.rv-card-date { font-size: .8125rem; color: var(--c-muted); }
.rv-card-body-text { font-size: .9375rem; color: var(--c-text); line-height: 1.6; margin: 0; }
.rv-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.rv-page-btn { padding: 8px 18px; border: 1px solid var(--c-border); border-radius: 7px; font-size: .875rem; font-weight: 600; color: var(--c-text); text-decoration: none; background: #fff; cursor: pointer; }
.rv-page-btn:hover { background: #f3f4f6; }
.rv-page-btn--off { color: var(--c-muted); cursor: default; }
.rv-page-info { font-size: .875rem; color: var(--c-muted); }
.rv-empty { font-size: .9375rem; color: var(--c-muted); margin: 8px 0 0; }
/* The cards and the pager are swapped in place by the pager's script: they dim while the next page loads, and
   the new page is scrolled to below the sticky header (113px on a desktop, 52px on a phone). */
.rv-feed { scroll-margin-top: 130px; transition: opacity .15s; }
.rv-feed:focus { outline: none; }
.rv-feed.is-loading { opacity: .45; pointer-events: none; }
@media (max-width: 767px) { .rv-feed { scroll-margin-top: 68px; } }
@media (prefers-reduced-motion: reduce) { .rv-feed { transition: none; } }
.rv-empty a { color: var(--c-primary); }

/* ── Write a Review Modal ── */
[x-cloak] { display: none !important; }
.rv-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rv-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.rv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: #fff; z-index: 1;
}
.rv-modal-title { font-size: 1.0625rem; font-weight: 800; color: var(--c-text); }
.rv-modal-close { background: none; border: none; cursor: pointer; padding: 4px; color: var(--c-muted); border-radius: 6px; }
.rv-modal-close:hover { background: #f3f4f6; color: var(--c-text); }
.rv-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rv-modal-label { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; color: var(--c-muted); text-transform: uppercase; margin-bottom: 6px; }
.rv-modal-req { color: var(--c-accent, #e63946); }
.rv-modal-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.rv-modal-star { background: none; border: none; cursor: pointer; padding: 2px; line-height: 0; }
.rv-modal-tap { font-size: .8125rem; color: var(--c-muted); margin-left: 4px; }
.rv-modal-textarea, .rv-modal-input, .rv-modal-select {
  width: 100%; border: 1px solid var(--c-border); border-radius: 8px;
  padding: 10px 12px; font-size: .9375rem; font-family: inherit; color: var(--c-text);
  background: #fff; outline: none; transition: border-color .15s;
}
.rv-modal-textarea:focus, .rv-modal-input:focus, .rv-modal-select:focus { border-color: var(--c-primary); }
.rv-modal-textarea { resize: vertical; }
.rv-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.rv-modal-submit {
  width: 100%; padding: 13px; background: var(--c-primary); color: #fff;
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s; margin-top: 8px;
}
.rv-modal-submit:hover { opacity: .88; }
.rv-modal-submit:disabled { opacity: .5; cursor: default; }
.rv-modal-note { font-size: .75rem; color: var(--c-muted); text-align: center; }
.rv-modal-note a { color: var(--c-primary); }
.rv-modal-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 7px; padding: 10px 14px; font-size: .875rem; }
.rv-modal-success { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; text-align: center; }
.rv-modal-success strong { font-size: 1.0625rem; }
.rv-modal-success p { color: var(--c-muted); font-size: .875rem; }
.rv-empty-link { background: none; border: none; padding: 0; color: var(--c-primary); cursor: pointer; font: inherit; text-decoration: underline; }
@media(max-width:480px) { .rv-modal-row { grid-template-columns: 1fr; } }

/* ── What Our Customers Say (kept for homepage use) ── */
.pdp-reviews-track { gap: 14px; padding-bottom: 4px; }
.pdp-review-card {
  flex: 0 0 300px; min-width: 0;
  border: 1px solid var(--c-border); border-radius: 12px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px;
  background: #fff; position: relative; overflow: hidden;
}
.pdp-review-top { display: flex; align-items: center; gap: 8px; }
.pdp-review-stars { display: flex; gap: 2px; }
.pdp-review-source {
  margin-left: auto; display: flex; align-items: center;
  font-size: .625rem; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .06em;
}
.pdp-review-source svg { display: block; }
.pdp-review-body {
  font-size: .875rem; color: #333; line-height: 1.6;
  margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pdp-review-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--c-border);
}
.pdp-review-author { font-size: .8125rem; font-weight: 700; color: var(--c-text); }
.pdp-review-date { font-size: .75rem; color: var(--c-muted); }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .pdp-grid { gap: 32px; }
  .pdp-title { font-size: 1.3125rem; }
}
@media (max-width: 767px) {
  /* Switch to flex column so we can reorder: gallery → purchase → tabs */
  .pdp-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 32px;
    overflow-x: hidden; /* guard against any child overflowing the page */
  }
  /* pdp-left dissolves — its children (gallery + body-section) become flex items */
  .pdp-left { display: contents; }
  .pdp-gallery      { order: 1; padding: 12px 0 0; min-width: 0; max-width: 100%; overflow: hidden; }
  .pdp-right        { order: 2; position: static; padding: 16px 0 0; min-width: 0; max-width: 100%; }
  .pdp-body-section { order: 3; border-top: 1px solid var(--c-border); margin-top: 24px; min-width: 0; max-width: 100%; }
  /* Absolute-fill image — avoids flex percentage-width resolution bugs */
  .pdp-gallery-main {
    display: block; position: relative;
    height: clamp(260px, 70vw, 380px);
    margin-bottom: 12px; aspect-ratio: auto;
  }
  .pdp-gallery-main img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .pdp-thumbs-wrap { max-width: 100%; overflow: hidden; }
  .pdp-thumbs { gap: 6px; }
  .pdp-thumb { width: 64px; height: 64px; }
  .pdp-thumbs-arrow { width: 28px; height: 28px; }
  .pdp-title { font-size: 1.25rem; }
  .pdp-price { font-size: 1.5rem; }
  .pdp-atc-btn { min-height: 48px; font-size: 1rem; }
  .pdp-highlights li { font-size: .875rem; }
  .pdp-select { font-size: 1rem; }
  .pdp-fbt-row { padding: 10px 0; }
  .pdp-opt-sel { display: none; } /* show only option name on mobile */
}

/* ---------------------------------------------------------
   16. Footer
   --------------------------------------------------------- */
.site-footer-placeholder { display: none; }

.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 40px;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-brand { color: var(--c-white); }

.footer-logo {
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-white); margin-bottom: 10px;
}

.footer-brand p {
  font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.65);
}

.footer-col h4 {
  font-size: .875rem;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a {
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  transition: color .15s;
}
.footer-col ul li a:hover { color: var(--c-white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px 0;
  font-size: .8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------------------------------------------------
   16. Misc utilities
   --------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--c-muted); }
.mt-2  { margin-top: 8px; }
.mt-4  { margin-top: 16px; }
.mt-8  { margin-top: 32px; }
.mb-4  { margin-bottom: 16px; }
.pt-4  { padding-top: 16px; }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge-red   { background: #fef2f2; color: #b91c1c; }
.badge-green { background: #f0fdf4; color: #15803d; }
.badge-gray  { background: var(--c-surface); color: var(--c-muted); }

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--c-muted);
}
.empty-state p { margin-top: 8px; font-size: .9375rem; }
/* The basket page's message, while the page finds out whether this browser has a basket the server was not told about;
   the timer shows it anyway if the script that does so never runs */
.empty-state.is-checking { visibility: hidden; animation: empty-state-show 0s linear 2.5s forwards; }
@keyframes empty-state-show { to { visibility: visible; } }

.divider { height: 1px; background: var(--c-border); margin: 24px 0; }

/* ---------------------------------------------------------
   17. Horizontal scroll row (mobile product strip)
   --------------------------------------------------------- */
.product-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.product-row::-webkit-scrollbar { display: none; }
.product-row .product-card {
  flex-shrink: 0;
  width: 160px;
  scroll-snap-align: start;
}
@media (min-width: 640px)  { .product-row .product-card { width: 200px; } }
@media (min-width: 1024px) {
  .product-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .product-row .product-card { width: auto; }
}

/* ---------------------------------------------------------
   18. Account / auth pages
   Sign in, sign up and password pages: one rounded block, a black panel saying what an account is for
   beside the form (the panel is left out on phones). Then the signed-in account area (.acct-*).
   --------------------------------------------------------- */
/* The layout around them (layouts/auth.php): a plain bar with the logo, the page, the policy links */
.page-auth { background: var(--c-surface); }
.au-top { background: #fff; border-bottom: 1px solid var(--c-border); }
.au-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.au-top__logo { display: block; }
.au-top__logo img { display: block; height: 34px; width: auto; }
.au-top__back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .875rem; font-weight: 700; color: var(--c-text); text-decoration: none;
}
.au-top__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-foot { padding-bottom: 36px; }
.au-foot .co-footer { margin-top: 0; text-align: center; }
.au-foot .co-footer__links { justify-content: center; }

.au { padding: 40px 0 8px; background: var(--c-surface); }
.au-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  max-width: 980px; margin: 0 auto;
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md);
}

.au-aside {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px; background: var(--c-primary); color: #fff;
}
.au-eyebrow {
  align-self: flex-start; margin: 0 0 20px; padding-bottom: 6px;
  border-bottom: 3px solid var(--c-gold);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.au-aside__title { margin: 0 0 30px; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.au-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.au-perks li { display: flex; gap: 14px; align-items: flex-start; }
.au-perks svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  fill: none; stroke: var(--c-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.au-perks strong { display: block; margin-bottom: 2px; font-size: .9375rem; font-weight: 700; }
.au-perks span > span { color: rgba(255,255,255,.72); font-size: .875rem; line-height: 1.5; }

.au-card { padding: 44px 44px 36px; }
.au-title { margin: 0 0 6px; font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-primary); }
.au-lead { margin: 0 0 24px; font-size: .9375rem; line-height: 1.55; color: var(--c-muted); }

.au-field { margin-bottom: 16px; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 6px; font-size: .8125rem; font-weight: 700; color: var(--c-text);
}
.au-label a { font-weight: 600; color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.au-label a:hover { color: var(--c-primary); }
.au-input {
  box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px;
  border: 1.5px solid #d4d4d8; border-radius: 8px; background: #fff;
  font: inherit; font-size: 1rem; color: var(--c-text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.au-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(232,193,90,.5); }
.au-input.is-invalid { border-color: #dc2626; }
.au-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.au-error { margin-top: 6px; font-size: .8125rem; color: #dc2626; }
.au-hint  { margin-top: 6px; font-size: .8125rem; color: var(--c-muted); }

.au-pass { position: relative; }
.au-pass .au-input { padding-right: 68px; }
.au-pass__btn {
  position: absolute; top: 0; right: 0; height: 48px; padding: 0 16px;
  background: none; border: 0; font: inherit; font-size: .8125rem; font-weight: 700; color: var(--c-muted); cursor: pointer;
}
.au-pass__btn:hover { color: var(--c-primary); }
.au-pass__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -4px; border-radius: 8px; }

.au-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: .875rem; line-height: 1.45; cursor: pointer; }
.au-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-primary); }
.au-check--stay { margin-top: 4px; margin-bottom: 18px; }
.au-check--stay small { display: block; margin-top: 1px; font-size: .8125rem; color: var(--c-muted); }

.au-btn {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; height: 50px; margin-top: 8px; padding: 0 20px;
  background: var(--c-primary); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.au-btn:hover { background: var(--c-gold); color: var(--c-primary); }
.au-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }

.au-alt { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--c-border); text-align: center; font-size: .9375rem; color: var(--c-muted); }
.au-alt a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.au-fine { margin: 14px 0 0; font-size: .75rem; line-height: 1.5; color: var(--c-muted); }
.au-fine a { color: inherit; text-decoration: underline; }

.au-alert { margin: 0 0 18px; padding: 12px 14px; border: 1px solid; border-radius: 8px; font-size: .9rem; line-height: 1.5; }
.au-alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.au-alert--ok    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.au-alert--info  { background: #fffbeb; border-color: #fde68a; color: #854d0e; }

/* A field only a script fills in: off to the side rather than display:none, which some scripts skip */
.au-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .page-auth, .au { background: #fff; }
  .au { padding: 0 0 16px; }
  .au-grid { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .au-aside { display: none; }
  .au-card { padding: 28px 0 0; }
}
@media (max-width: 340px) { .au-row { grid-template-columns: 1fr; gap: 0; } }

/* ── Signed-in account area ── */
.acct { padding: 32px 0 72px; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.acct-title { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-primary); }
.acct-sub { margin: 4px 0 0; font-size: .9375rem; color: var(--c-muted); }
.acct-signout {
  padding: 0; background: none; border: 0; font: inherit; font-size: .875rem; font-weight: 700;
  color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acct-signout:hover { color: var(--c-primary); }

.acct-verify {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 20px; padding: 16px 18px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
}
.acct-verify__text { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; line-height: 1.45; color: #78350f; }
.acct-verify__text strong { color: #451a03; }
.acct-verify__btn {
  flex: none; height: 40px; padding: 0 18px;
  background: var(--c-primary); color: #fff; border: 0; border-radius: 8px;
  font: inherit; font-size: .875rem; font-weight: 800; cursor: pointer; transition: background .15s, color .15s;
}
.acct-verify__btn:hover { background: var(--c-gold); color: var(--c-primary); }
@media (max-width: 560px) { .acct-verify { flex-direction: column; align-items: flex-start; } }

.acct-nav { display: flex; gap: 0 28px; margin-bottom: 28px; border-bottom: 2px solid var(--c-primary); }
.acct-nav a { position: relative; padding: 12px 0 14px; font-size: 1rem; font-weight: 800; color: var(--c-muted); text-decoration: none; }
.acct-nav a:hover { color: var(--c-text); }
.acct-nav a.is-active { color: var(--c-primary); }
.acct-nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--c-gold); border-radius: 2px 2px 0 0;
}

.acct-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.acct-card { padding: 24px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; }
.acct-card__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.0625rem; font-weight: 800; }

.acct-orders { list-style: none; margin: 0; padding: 0; }
.acct-orders li + li { border-top: 1px solid var(--c-border); }
.acct-order {
  display: grid; grid-template-columns: 5.5rem 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px 0; color: var(--c-text); text-decoration: none;
}
.acct-order:hover .acct-order__no { text-decoration: underline; }
.acct-order__no { font-weight: 800; }
.acct-order__date { color: var(--c-muted); font-size: .875rem; }
.acct-order__total { min-width: 4.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A row of an order list: the link opens the order, Reorder sits beside it (a form cannot be inside the link) */
.acct-orderrow { display: flex; align-items: center; gap: 14px; }
.acct-orderrow > .acct-order { flex: 1; min-width: 0; }
.acct-reorder { flex: none; margin: 0; }
.acct-card__title .acct-reorder { margin-left: auto; }

.acct-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.acct-chip--ok   { background: #dcfce7; color: #166534; }
.acct-chip--wait { background: #fef3c7; color: #92400e; }
.acct-chip--off  { background: #f4f4f5; color: #52525b; }

.acct-more { display: inline-block; margin-top: 14px; font-size: .9375rem; font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.acct-empty { margin: 0 0 16px; color: var(--c-muted); }
.acct-start { display: inline-flex; width: auto; margin: 0; }
.acct-details { margin: 0; display: grid; gap: 14px; font-size: .9375rem; }
.acct-details dt { margin-bottom: 2px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.acct-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }

.acct-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: .875rem; color: var(--c-muted); }
.acct-pager a { font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.acct-back { display: inline-block; margin-bottom: 16px; font-size: .875rem; font-weight: 700; color: var(--c-muted); text-decoration: none; }
.acct-back:hover { color: var(--c-primary); }

.acct-items { list-style: none; margin: 0; padding: 0; }
.acct-items li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.acct-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-item__title { font-weight: 700; }
.acct-item__variant, .acct-item__qty { font-size: .875rem; color: var(--c-muted); }
.acct-item__total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-sums { margin: 16px 0 0; display: grid; gap: 8px; }
.acct-sums div { display: flex; justify-content: space-between; font-size: .9375rem; }
.acct-sums dt { color: var(--c-muted); }
.acct-sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.acct-sums__total { padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 1.0625rem !important; font-weight: 800; }
.acct-sums__total dt { color: var(--c-text); }

.acct-address { font-style: normal; line-height: 1.6; }
.acct-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.acct-addresses .acct-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Buttons and links in the account area */
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px;
  background: var(--c-primary); color: #fff; border: 1.5px solid var(--c-primary); border-radius: 8px;
  font: inherit; font-size: .9375rem; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.acct-btn:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-primary); }
.acct-btn--ghost { background: #fff; color: var(--c-primary); }
.acct-btn--sm { height: 34px; padding: 0 14px; gap: 6px; font-size: .8125rem; }
.acct-btn:disabled { opacity: .6; cursor: default; }
.acct-btn--ghost:disabled:hover { background: #fff; border-color: var(--c-primary); color: var(--c-primary); }
.acct-link {
  padding: 0; background: none; border: 0; font: inherit; font-size: .875rem; font-weight: 700;
  color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acct-link:hover { color: #000; }
.acct-link--danger { color: #b91c1c; }
.acct-optional { font-weight: 500; color: var(--c-muted); }

/* The address book */
.acct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.acct-toolbar__note { margin: 0; font-size: .9375rem; color: var(--c-muted); }
.acct-addr.is-default { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.acct-addr__phone { margin: 0; font-size: .875rem; color: var(--c-muted); }
.acct-addr__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: auto; padding-top: 6px; }
.acct-addr__actions form { margin: 0; }
.acct-addr__save { margin: 14px 0 0; }
.acct-addr__saved { margin: 14px 0 0; font-size: .875rem; color: #166534; font-weight: 700; }
.acct-addr__saved a { color: inherit; }
.acct-formcard { max-width: 640px; }
/* Birthday: three selects in a row, then a quiet "remove" under the buttons */
.acct-dob { margin: 16px 0 18px; padding: 0; border: 0; min-width: 0; }
.acct-dob legend { padding: 0; }
.acct-dob__row { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 10px; }
.acct-dob__label { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.acct-dob.is-invalid .au-input { border-color: var(--c-accent); }
.acct-dob__remove { margin-top: 14px; }
.acct-link--button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.acct-dd-link { margin-left: 8px; font-size: .8125rem; font-weight: 700; color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.acct-dd-link:hover { color: var(--c-primary); }
.acct-dd-link--add { margin-left: 0; font-size: .9375rem; }
.acct-form__actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.acct-form__actions .au-btn { width: auto; margin: 0; padding: 0 32px; }
@media (max-width: 560px) {
  .acct-toolbar { flex-direction: column; align-items: flex-start; }
  .acct-form__actions .au-btn { flex: 1; }
}

@media (max-width: 860px) {
  .acct-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .acct { padding-top: 20px; }
  .acct-title { font-size: 1.5rem; }
  .acct-card { padding: 18px; }
  .acct-order { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .acct-order__date { grid-column: 1; }
  .acct-order .acct-chip { grid-column: 1; justify-self: start; }
  .acct-order__total { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .acct-orderrow { position: relative; display: block; }
  .acct-orderrow .acct-order__total { grid-row: 1; align-self: start; }
  .acct-orderrow .acct-reorder { position: absolute; right: 0; bottom: 12px; }
  .acct-orderrow .acct-btn--sm { height: 38px; }
}

/* ---------------------------------------------------------
   19. Flash / alert
   --------------------------------------------------------- */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  margin-bottom: 16px;
  border-left: 4px solid currentColor;
}
.alert-success { background: #f0fdf4; color: #166534; }
.alert-error   { background: #fef2f2; color: #b91c1c; }
.alert-info    { background: #eff6ff; color: #1d4ed8; }

/* ---------------------------------------------------------
   20. Responsive helpers
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px)  { .collections-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .collections-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .collections-grid { grid-template-columns: repeat(6, 1fr); } }

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px)  { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .products-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .products-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Just In ── */
.ji { padding: 12px 0 28px; }

.ji-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.ji-heading { font-size: 30px; font-weight: 800; color: var(--c-text); margin: 0; letter-spacing: -.02em; }

.ji-tabs { display: flex; gap: 8px; }
.ji-tab { padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid #d1d5db; background: #fff; color: var(--c-dark); transition: background .15s, color .15s, border-color .15s; }
.ji-tab--active { background: #0d1b2a; color: #fff; border-color: #0d1b2a; }

.ji-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.ji-nav { display: flex; gap: 6px; }
.ji-nav-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: #fff; color: #0d1b2a; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; padding: 0; }
.ji-nav-btn svg { width: 16px; height: 16px; }
.ji-nav-btn:hover { background: #0d1b2a; color: #fff; border-color: #0d1b2a; }
.ji-nav-btn:hover svg { stroke: #fff; }
.ji-view-all { font-size: 14px; font-weight: 600; color: #0d1b2a; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.ji-view-all:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .ji-tabs { gap: 6px; }
  .ji-tab { padding: 7px 12px; font-size: 12px; }
}

/* ── Brands marquee ─────────────────────────────────────────── */
/* ── Brands: a row of brand cards, the shared sideways rail ──
   Logo, the name, "Shop <name> →". On hover the card goes black and the logo white (any transparent logo). */
.bc { padding: 12px 0 28px; }
.bc-title { margin: 0 0 14px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.bc-rail { --rail-fade: #fff; --rail-fade-0: rgba(255,255,255,0); }
.bc-track { gap: 10px; padding: 2px 0 4px; }
.bc-card {
  flex: 0 0 auto; width: 190px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px 14px;
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text); text-decoration: none;
  transition: background .18s, transform .18s;
}
.bc-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.bc-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; }
.bc-logo img { height: 64px; width: auto; max-width: 100%; object-fit: contain; transition: filter .18s; }
.bc-logo-text { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: center; transition: color .18s; }
.bc-name, .bc-go { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s; }
.bc-name { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111; }
.bc-go { font-size: 12.5px; font-weight: 700; color: var(--c-muted); }
.bc-card:hover { background: #111; transform: translateY(-2px); }
.bc-card:hover .bc-logo img { filter: brightness(0) invert(1); }
.bc-card:hover .bc-name, .bc-card:hover .bc-logo-text { color: #fff; }
.bc-card:hover .bc-go { color: var(--c-gold); }

@media (max-width: 767px) {
  .bc-title { font-size: 24px; }
  .bc-card { width: 152px; padding: 14px 10px 12px; }
  .bc-logo, .bc-logo img { height: 52px; }
}

/* ── About / Why Us ───────────────────────────────────────────
   A light, editorial block: a big heading, the story in two columns, four figures under heavy rules. */
.about {
  background: #f3efe5;
  color: var(--c-primary);
  padding: 72px 0 64px;
}
.about-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--c-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.about-heading {
  margin: 0 0 34px;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  color: var(--c-primary);
}
.about-brand {                      /* the brand name, marked like a highlighter pen */
  color: inherit;
  background: linear-gradient(transparent 62%, rgba(232,193,90,.7) 62%);
  padding: 0 .12em;
  margin: 0 -.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-cols { column-count: 2; column-gap: 56px; max-width: 940px; }
.about-cols--one { column-count: 1; max-width: 62ch; }
.about-body {
  break-inside: avoid;
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #3f3f46;
}
.about-body p { margin: 0 0 14px; }
.about-body > :last-child { margin-bottom: 0; }
.about-body a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.about-body a:hover { background: rgba(232,193,90,.35); }

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.about-stat { padding-top: 14px; border-top: 4px solid var(--c-primary); }
.about-stat-num {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--c-primary);
}
.about-stat-label { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: #52525b; }

.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.about-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border: 2px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.about-btn:hover { background: #000; }
.about-btn--line { background: transparent; color: var(--c-primary); }
.about-btn--line:hover { background: var(--c-primary); color: #fff; }

@media (max-width: 900px) {
  .about { padding: 52px 0 48px; }
  .about-cols { column-count: 1; max-width: 62ch; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-top: 32px; }
}
@media (max-width: 480px) {
  .about-stat-num { font-size: 30px; }
}

/* ── Reviews: a compact block, shared by the home page and the collection pages ──
   One slim header line (title + Google rating) over a sideways rail of small cards (the shared rail). */
.gr { padding: 44px 0; background: #f9fafb; border-top: 1px solid var(--c-border); }
.gr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.gr-heading {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-primary);
}
.gr-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: #fff;
  color: var(--c-primary);
  font-size: 13px;
  text-decoration: none;
  transition: border-color .15s;
}
.gr-rating:hover { border-color: var(--c-primary); }
.gr-google-icon { width: 18px; height: 18px; flex-shrink: 0; }
.gr-rating-stars { font-size: 14px; line-height: 1; letter-spacing: 1px; color: #f5a623; }
.gr-rating-label { color: var(--c-muted); font-weight: 500; }
.gr-rating-label strong { color: var(--c-primary); font-weight: 700; }
.gr-rating-go { width: 12px; height: 12px; flex-shrink: 0; color: var(--c-muted); }

.gr-rail { --rail-fade: #f9fafb; --rail-fade-0: rgba(249,250,251,0); }
.gr-track { gap: 12px; padding: 2px 0 4px; }
.gr-card {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.gr-card-top { display: flex; align-items: center; justify-content: space-between; }
.gr-stars { font-size: 14px; line-height: 1; letter-spacing: 1px; color: #f5a623; }
.gr-g-logo { flex-shrink: 0; opacity: .85; }
.gr-text {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px;
  line-height: 1.55;
  color: #374151;
}
.gr-card-by { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; padding-top: 2px; }
.gr-avatar {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.gr-name { min-width: 0; font-size: 13px; font-weight: 700; color: var(--c-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-when { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--c-muted); white-space: nowrap; }

@media (max-width: 680px) {
  .gr-card { width: 262px; }
}

/* ── FAQ (inside reviews section) ───────────────── */
.gr-faq { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--c-border); }
.faq-heading {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--c-primary);
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.4;
}
.faq-q:hover { color: #1a3a5c; }
.faq-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-muted); }
.faq-a { padding-bottom: 14px; }
.faq-a p { font-size: 15px; line-height: 1.75; color: var(--c-muted); margin: 0; }
@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ── Guides & reviews: dated headline rows, the words first ── */
.gd { padding: 40px 0 48px; background: #fff; border-top: 1px solid var(--c-border); }
.gd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.gd-heading { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--c-primary); }
.gd-all { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 14px; font-weight: 700; color: var(--c-primary); white-space: nowrap; }
.gd-all svg { width: 13px; height: 13px; }
.gd-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.gd-list { border-top: 2px solid var(--c-primary); }
.gd-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 132px;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-border);
  color: inherit;
  text-decoration: none;
}
.gd-row--noimg { grid-template-columns: 84px minmax(0, 1fr); }
.gd-date { display: block; line-height: 1; }
.gd-day { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--c-primary); }
.gd-mon { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--c-muted); }
.gd-copy { display: block; min-width: 0; }
.gd-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6d1a; }
.gd-title { margin: 4px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--c-primary); }
.gd-row:hover .gd-title { text-decoration: underline; text-underline-offset: 3px; }
.gd-by { display: block; margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.gd-thumb { width: 132px; height: 88px; object-fit: cover; border-radius: 8px; background: #f1f3f5; }

@media (max-width: 680px) {
  .gd { padding: 28px 0 32px; }
  .gd-row,
  .gd-row--noimg {
    grid-template-columns: minmax(0, 1fr) 92px;
    grid-template-areas: "date thumb" "copy thumb";
    gap: 6px 16px;
    align-items: start;
    padding: 14px 0;
  }
  .gd-row--noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "copy"; }
  .gd-date { grid-area: date; display: flex; align-items: baseline; gap: 6px; }
  .gd-day { font-size: 13px; letter-spacing: 0; }
  .gd-mon { margin-top: 0; }
  .gd-copy { grid-area: copy; }
  .gd-title { font-size: 17px; }
  .gd-thumb { grid-area: thumb; width: 92px; height: 70px; }
}

/* ── Newsletter ──────────────────────────────────── */
.nl {
  background: var(--c-primary);
  padding: 16px 0;
  position: relative;
  overflow: hidden;
}
.nl::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 180% at 75% 50%, rgba(232,193,90,.10) 0%, transparent 70%),
    radial-gradient(ellipse 30% 120% at 15% 50%, rgba(13,90,170,.12) 0%, transparent 65%);
  pointer-events: none;
}
.nl::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.nl .container { position: relative; z-index: 1; }
.nl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.nl-copy { flex: 1; min-width: 220px; }
.nl-heading { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -.02em; }
.nl-offer { color: var(--c-gold); }
.nl-sub { font-size: 12px; color: rgba(255,255,255,.65); margin: 0; line-height: 1.5; }
.nl-form { flex: 1; min-width: 280px; max-width: 420px; }
.nl-field {
  display: flex; align-items: center;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 8px; overflow: hidden;
  padding: 4px 4px 4px 14px;
}
.nl-input {
  flex: 1; padding: 0; border: none; outline: none;
  font-size: 13px; background: transparent; color: #fff;
  min-width: 0; height: 34px; line-height: 34px;
}
.nl-input::placeholder { color: rgba(255,255,255,.45); }
/* A saved address picked from the browser's own list is painted by the browser: Chrome and Safari give the field a pale
   blue background and dark text, which turned the dark, rounded field into a light box with square corners. That
   background cannot be overridden, but a transition beats it (it is held at "transparent" for a day), and the text colour
   and the caret are set on their own. One rule per name, as a rule holding a name the browser does not know is dropped. */
.nl-input:-webkit-autofill,
.nl-input:-webkit-autofill:hover,
.nl-input:-webkit-autofill:focus,
.nl-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 86400s ease-out 0s, color 86400s ease-out 0s;
}
.nl-input:autofill,
.nl-input:autofill:hover,
.nl-input:autofill:focus,
.nl-input:autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 86400s ease-out 0s, color 86400s ease-out 0s;
}
.nl-btn {
  padding: 0 16px; background: var(--c-gold); color: #0d1b2a;
  border: none; cursor: pointer; font-size: 12px; font-weight: 700;
  white-space: nowrap; transition: opacity .15s; flex-shrink: 0;
  height: 30px; border-radius: 5px; line-height: 30px;
}
.nl-btn:hover { opacity: .88; }
.nl-note { font-size: 11px; color: rgba(255,255,255,.4); margin: 6px 0 0; }
.nl-note a { color: rgba(255,255,255,.6); text-decoration: underline; }
.nl-thanks { font-size: 13px; font-weight: 600; color: #fff; margin: 0; }
.nl-error { font-size: 12px; font-weight: 600; color: #ffb4a8; margin: 6px 0 0; }
.nl-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 680px) {
  .nl-inner { flex-direction: column; align-items: flex-start; }
  .nl-form { max-width: 100%; width: 100%; }
}

/* ── Footer ──────────────────────────────────────────────────
   A contact card on the left, the link columns on the right, one slim line at the bottom. */
.site-footer { background: var(--c-primary); color: rgba(255,255,255,.75); font-size: 15px; }
.site-footer a { color: inherit; text-decoration: none; }

.ft-main { padding: 52px 0 44px; border-top: 1px solid rgba(255,255,255,.06); }
.ft-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ft-layout--solo { grid-template-columns: minmax(0, 1fr); }

/* The contact card */
.ft-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.ft-card-name { margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.ft-addr { margin: 0 0 18px; font-style: normal; line-height: 1.6; color: rgba(255,255,255,.78); }
.ft-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.ft-ico { width: 20px; height: 20px; flex: none; color: var(--c-gold); }
.ft-row > span { min-width: 0; }
.ft-row strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.005em; overflow-wrap: anywhere; transition: color .15s; }
.ft-row small { display: block; margin-top: 1px; font-size: 12.5px; color: rgba(255,255,255,.55); }
a.ft-row:hover strong { color: var(--c-gold); }

/* Social profiles: round icon buttons, gold on hover */
.ft-social { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.1); }
.ft-social-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ft-social-list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ft-soc {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  transition: background .15s, border-color .15s, color .15s;
}
.ft-soc svg { width: 19px; height: 19px; }
.ft-soc:hover, .ft-soc:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color: #151515; }

/* The link columns: as many as are set up, a short gold bar over each heading */
.ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; }
.ft-col-heading {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.ft-col-heading::before { content: ''; display: block; width: 24px; height: 3px; margin-bottom: 12px; background: var(--c-gold); }
.ft-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-links a { color: rgba(255,255,255,.72); transition: color .15s; }
.ft-links a:hover { color: #fff; }

/* The bottom line */
.ft-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.ft-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 18px 0;
}
.ft-copy { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; color: rgba(255,255,255,.55); }
.ft-age {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 8px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 999px;
  font-size: 12px; font-weight: 800; color: #fff;
}

@media (max-width: 1000px) {
  .ft-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ft-card { max-width: 480px; }
}
@media (max-width: 560px) {
  .site-footer { font-size: 14px; }
  .ft-main { padding: 36px 0 28px; }
  .ft-card { padding: 20px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 380px) { .ft-cols { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════════════════════════════════════════════
   WHATSAPP BUTTON (partials/whatsapp-button.php)
   A small white pill, a question over "Chat now", ending in the green WhatsApp circle, fixed to the
   bottom-right of the page. z-index 90: over the page, under the header (100), menus, search, filter
   sheet, cart drawer, cookie banner and age gate. Hidden on phones for now (see below).
   ══════════════════════════════════════════════════════ */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 16px;
  background: #fff;
  color: var(--c-primary);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .wa-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.12); } }
.wa-fab:focus-visible {   /* white then black ring: shows on the page and on the footer; no shadow transition, the layers would morph */
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #111, 0 4px 16px rgba(0,0,0,.16);
  transition: transform .2s ease;
}
.wa-fab__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; white-space: nowrap; text-align: left; }
.wa-fab__ask { font-size: 12px; font-weight: 500; color: var(--c-muted); }
.wa-fab__cta { font-size: 14px; font-weight: 800; letter-spacing: -.005em; }
.wa-fab__icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37,211,102,.2);   /* the soft ring: still, not a pulse */
}
.wa-fab__icon svg { width: 22px; height: 22px; }

/* The footer's bottom line (the copyright and the 18+ notice) must never end up under the button when the
   page is scrolled to its end, so it keeps clear of the corner the button sits in, by as much as the button
   reaches into the container: 20px offset + 134px of button + 8px of air, less the container's own side padding (24px,
   then 32px from 1024px, 40px from 1280px) and, past 1340px, the margin either side of the container.
   Only while the button is on the page, and only where it is shown (not phones). */
@media (min-width: 768px)  { .wa-dock + .site-footer .ft-bottom-inner { padding-right: 138px; } }
@media (min-width: 1024px) { .wa-dock + .site-footer .ft-bottom-inner { padding-right: 130px; } }
@media (min-width: 1280px) { .wa-dock + .site-footer .ft-bottom-inner { padding-right: max(0px, calc(122px - max(0px, (100vw - var(--container-w)) / 2))); } }

/* Phones: no button for now. (The phone version, above the bottom nav, shrinking to the circle on scroll,
   with a strip under the footer and its own cart-page rules, is in commit 0141e12.) */
@media (max-width: 767px) { .wa-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }
@media print { .wa-dock { display: none; } }

/* ══════════════════════════════════════════════════════
   HOMEPAGE MOBILE RESPONSIVE
   Breakpoints: 768px (tablet), 480px (phone)
   ══════════════════════════════════════════════════════ */

/* ── Trust bar ───────────────────────────────────────── */
@media (max-width: 768px) {
  .trust-bar-inner {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    padding: 8px 0;
    gap: 0;
  }
  .trust-item {
    font-size: 12px;
    gap: 7px;
    padding: 8px 10px;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .trust-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.06); }
  .trust-item:nth-last-child(-n+2) { border-bottom: none; }
  .trust-item svg { width: 20px; height: 20px; }
  .trust-google svg { width: 18px; height: 18px; }
  .trust-google-label { font-size: 12px; }
}
@media (max-width: 480px) {
  .trust-bar-inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none !important; }
  .trust-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); }
  .trust-item:last-child { border-bottom: none; }
}

/* ── Hero slider ─────────────────────────────────────── */
@media (max-width: 768px) {
  .hs-eyebrow { font-size: 10px; margin-bottom: 6px; }
  .hs-google-badge { margin-bottom: 10px; }
  .hs-actions { gap: 8px; }
  .hs-btn { padding: 7px 14px; font-size: 12px; }
  .hs-arrow { display: none; }
}
@media (max-width: 480px) {
  .hs-copy { padding: 20px; }
  .hs-title { font-size: 19px; margin-bottom: 6px; }
  .hs-sub { font-size: 13px; margin-bottom: 10px; }
  .hs-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hs-btn { width: auto; }
}

/* ── Quick Shop — updated for new full-bleed design ──── */
@media (max-width: 599px) {
  .qs-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qs-card { min-height: 150px; }
  .qs-body { padding: 14px; }
  .qs-name { font-size: 15px; }
  .qs-btn { font-size: 11px; padding: 6px 10px; }
}
@media (max-width: 380px) {
  .qs-grid { grid-template-columns: 1fr; }
  .qs-card { min-height: 180px; }
}

/* ── Trending Now ────────────────────────────────────── */
@media (max-width: 768px) {
  .tn { padding: 12px 0 16px; }
  .tn-heading { font-size: 22px; margin-bottom: 12px; }
  .tn-header { margin-bottom: 12px; }
  .tn-header--sub { margin-bottom: 14px; }
  .tn-card { flex: 0 0 200px; }
  .tn-see-all { font-size: 13px; margin-left: 0; }
}
@media (max-width: 480px) {
  .tn-card { flex: 0 0 180px; }
  .tn-img { height: 130px; }
}

/* ── Reviews (compact block) ─────────────────────────── */
@media (max-width: 768px) {
  .gr { padding: 32px 0; }
  .gr-heading { font-size: 20px; }
  .gr-text { font-size: 13px; }
}

/* ── FAQ ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-heading { font-size: 20px; margin-bottom: 10px; }
  .faq-q { font-size: 14px; padding: 14px 0; }
  .faq-a p { font-size: 13px; }
}

/* ── Newsletter ──────────────────────────────────────── */
@media (max-width: 768px) {
  .nl-heading { font-size: 16px; }
  .nl-offer { display: inline; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR
══════════════════════════════════════════════════════════ */
.mbn {
  display: none;
}
@media (max-width: 767px) {
  /* Push page content above the bar */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  .mbn {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #000;
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 4000;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
  }

  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }

  .mbn-item:active,
  .mbn-item.mbn-active { color: #fff; }

  .mbn-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .mbn-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
  }

  /* Active indicator dot */
  .mbn-active .mbn-label {
    position: relative;
  }
  .mbn-active .mbn-label::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: #e63946;
    border-radius: 50%;
    margin: 3px auto 0;
  }

  /* Sale FAB — raised centre button */
  .mbn-item--sale {
    color: #fff;
    position: relative;
    margin-top: -22px;
  }
  .mbn-sale-fab {
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #ff3b3b, #c0000a);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 -2px 0 rgba(255,255,255,.12) inset,
                0 6px 20px rgba(192,0,10,.55),
                0 2px 6px rgba(0,0,0,.4);
    border: 2px solid rgba(255,255,255,.12);
    transition: transform .15s, box-shadow .15s;
  }
  .mbn-item--sale:active .mbn-sale-fab {
    transform: scale(.94);
    box-shadow: 0 3px 10px rgba(192,0,10,.4);
  }
  .mbn-sale-fab svg { width: 18px; height: 18px; stroke: #fff; flex-shrink: 0; }
  .mbn-sale-text {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    line-height: 1;
  }
}

/* ---------------------------------------------------------
   PLP — Collection product listing page
   --------------------------------------------------------- */

/* Breadcrumb */
.plp-bc-wrap {
  background: #f5f8fa;
  border-bottom: 1px solid #eaeef1;
}
.plp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap-y: 4px;
  padding: 8px 0; font-size: .8125rem;
}
.plp-bc-home {
  display: inline-flex; align-items: center; line-height: 1;
  color: var(--c-muted); transition: color .15s;
}
.plp-bc-home svg, .plp-bc-home path { fill: var(--c-muted) !important; }
.plp-bc-home:hover { color: var(--c-text); }
.plp-bc-home:hover svg, .plp-bc-home:hover path { fill: var(--c-text) !important; }
.plp-bc-sep {
  display: inline-flex; align-items: center; margin: 0 6px;
  flex-shrink: 0;
}
.plp-bc-link {
  color: var(--c-muted); text-decoration: none;
  transition: color .15s;
}
a.plp-bc-link:hover { color: var(--c-text); }   /* a crumb with no link (a brand or type without a collection) does not react */
.plp-bc-current { color: var(--c-text); font-weight: 600; text-decoration: none; }

/* Header */
.plp-head { padding: 12px 0 20px; }
.plp-title {
  font-size: 1.75rem; font-weight: 800; color: var(--c-dark);
  letter-spacing: -.02em; margin: 0 0 16px;
}
.plp-intro { font-size: .9375rem; line-height: 1.65; color: var(--c-text); margin: 0; }
.plp-intro p  { margin: 0 0 12px; }
.plp-intro p:last-child { margin-bottom: 0; }
.plp-intro a  { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.plp-intro a:hover { opacity: .8; }
.plp-intro strong { font-weight: 700; }
/* Mobile truncation */
.plp-intro-wrap { position: relative; overflow: hidden; }
.plp-intro-wrap.is-expanded { max-height: none !important; }
.plp-intro-fade {
  display: none; /* shown only on mobile via media query */
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, var(--c-bg, #fff));
  pointer-events: none;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  transition: opacity .3s;
}
.plp-intro-wrap.is-expanded .plp-intro-fade { opacity: 0; pointer-events: none; }
.plp-intro-toggle {
  display: none;
  margin-top: 8px;
  background: none; border: none; padding: 0;
  font-size: .875rem; font-weight: 600; color: var(--c-primary);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 767px) {
  .plp-intro-wrap { max-height: 155px; }
  .plp-intro-wrap.is-expanded { max-height: none; }
  .plp-intro-fade { display: block; }
  .plp-intro-toggle { display: inline-block; }
}

/* SEO description section — below product grid */
.plp-seo-section {
  margin-top: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}
.plp-reviews {
  border-top: 1px solid var(--c-border);
  padding-top: 36px;
  padding-bottom: 36px;
}
.plp-seo-body {
  font-size: .9375rem; line-height: 1.75; color: var(--c-text);
}
.plp-seo-body h2 { font-size: 1.375rem; font-weight: 700; color: var(--c-dark); margin: 0 0 12px; letter-spacing: -.01em; }
.plp-seo-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--c-dark); margin: 28px 0 8px; }
.plp-seo-body h4 { font-size: 1rem; font-weight: 600; color: var(--c-dark); margin: 20px 0 6px; }
.plp-seo-body p  { margin: 0 0 16px; }
.plp-seo-body p:last-child { margin-bottom: 0; }
.plp-seo-body ul, .plp-seo-body ol { margin: 0 0 16px; padding-left: 24px; }
.plp-seo-body li { margin-bottom: 6px; }
.plp-seo-body a  { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.plp-seo-body a:hover { opacity: .75; }
.plp-seo-body strong { font-weight: 700; }
.plp-seo-body em { font-style: italic; }
.plp-seo-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 16px 0; }
.plp-seo-body table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 16px 0; }
.plp-seo-body th { background: var(--c-surface); font-weight: 600; text-align: left; padding: 10px 14px; border: 1px solid var(--c-border); }
.plp-seo-body td { padding: 10px 14px; border: 1px solid var(--c-border); vertical-align: top; }
.plp-seo-body tr:nth-child(even) td { background: #fafafa; }
@media (max-width: 767px) {
  .plp-seo-section { margin-top: 32px; padding: 32px 0; }
  .plp-seo-body h2 { font-size: 1.2rem; }
  .plp-seo-body table { font-size: .8rem; }
  .plp-seo-body th, .plp-seo-body td { padding: 8px 10px; }
}

/* Two-column layout: sidebar + main */
.plp-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);   /* minmax(0, …): a wide row inside (the pager) must never stretch the column past the screen */
  gap: 28px;
  align-items: start;
  padding-top: 4px;
}
.plp-sidebar { /* sticky sidebar */ }
.plp-sidebar-inner {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.plp-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: var(--c-muted);
  text-transform: uppercase;
}
.plp-filter-clear {
  font-size: .8125rem; font-weight: 500; color: var(--c-primary);
  text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0;
}
.plp-filter-clear:hover { opacity: .8; }

.plp-filter-group { border-top: 1px solid var(--c-border); }
.plp-filter-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 13px 16px; background: none; border: none; cursor: pointer;
  font-size: .9375rem; font-weight: 700; color: var(--c-dark); text-align: left;
}
.plp-filter-toggle:hover { background: #fafafa; }
.plp-chevron { transition: transform .2s; flex-shrink: 0; }
.plp-filter-toggle[aria-expanded="false"] .plp-chevron { transform: rotate(-90deg); }

.plp-filter-body { padding: 0 0 10px; }
.plp-filter-body[hidden] { display: none; }

.plp-filter-item { display: block; }
.plp-filter-link {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 16px; text-decoration: none; color: inherit;
  font-size: .875rem; color: var(--c-text);
}
.plp-filter-link:hover { background: #f5f5f5; }
.plp-fcheck {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1.5px solid #ccc; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; transition: background .12s, border-color .12s;
}
.plp-filter-item.is-checked .plp-fcheck {
  background: #111; border-color: #111;
}
.plp-filter-label { flex: 1; }
.plp-filter-count { color: var(--c-muted); font-size: .8125rem; }

.plp-filter-more[hidden] { display: none; }
.plp-view-more {
  display: block; margin: 6px 16px 0;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .875rem; color: var(--c-primary); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.plp-view-more:hover { opacity: .8; }

/* Filter search input */
.plp-search-wrap { padding: 10px 16px 6px; }
.plp-filter-search {
  display: block; width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: .8125rem;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-bg); color: var(--c-text);
  outline: none; appearance: none; -webkit-appearance: none;
}
.plp-filter-search::placeholder { color: var(--c-muted); }
.plp-filter-search:focus { border-color: var(--c-primary); }

/* Toolbar: count + sort */
.plp-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border); margin-bottom: 20px;
}
.plp-bar-left {
  font-size: .9375rem; color: var(--c-text);
}
.plp-bar-left strong { font-weight: 700; }
.plp-sort-wrap { display: flex; align-items: center; gap: 8px; }
.plp-sort-label { font-size: .875rem; color: var(--c-muted); white-space: nowrap; }
.plp-sort {
  height: 38px; padding: 0 32px 0 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-text);
  font-size: .875rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.58l3.3-3.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  min-width: 160px;
}
.plp-sort:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.15); }

/* Product grid */
.plp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* Empty state */
.plp-empty {
  text-align: center; padding: 64px 0; color: var(--c-muted);
}
.plp-empty svg { margin: 0 auto 16px; display: block; opacity: .35; }
.plp-empty h3 { font-size: 1.125rem; font-weight: 700; color: var(--c-dark); margin: 0 0 6px; }
.plp-empty p  { font-size: .9375rem; margin: 0; }

/* Search results page (collections/show.php in search mode) */
.plp-search-colls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .875rem; color: var(--c-muted); }
.plp-search-colls a {
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  color: var(--c-primary); font-weight: 600; text-decoration: none;
}
.plp-search-colls a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.plp-empty .plp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.plp-empty-actions a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 8px;
  background: #f1f2f3; color: var(--c-primary); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.plp-empty-actions a:first-child { background: var(--c-primary); color: #fff; }
.plp-empty p a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.plp-popular { margin: 8px 0 48px; }
.plp-popular h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--c-primary); margin: 0 0 16px; }

/* Editorial / SEO content below products */
.plp-editorial {
  border-top: 1px solid var(--c-border);
  padding: 40px 0 48px;
  font-size: .9375rem; line-height: 1.7; color: var(--c-text);
}
.plp-editorial h2 { font-size: 1.375rem; font-weight: 700; color: var(--c-dark); margin: 32px 0 12px; }
.plp-editorial h2:first-child { margin-top: 0; }
.plp-editorial h3 { font-size: 1.125rem; font-weight: 700; color: var(--c-dark); margin: 24px 0 10px; }
.plp-editorial p  { margin: 0 0 14px; }
.plp-editorial ul, .plp-editorial ol { padding-left: 22px; margin: 0 0 14px; }
.plp-editorial li { margin-bottom: 6px; }
.plp-editorial a  { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.plp-editorial a:hover { color: var(--c-primary-dark, var(--c-primary)); }
.plp-editorial table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .875rem; }
.plp-editorial th, .plp-editorial td { padding: 10px 12px; border: 1px solid var(--c-border); text-align: left; }
.plp-editorial th { background: var(--c-surface); font-weight: 600; }
.plp-editorial strong { font-weight: 700; }

/* "Page 4 of 8": shown in place of the numbered buttons on a phone or tablet (see the max-width: 900px block below) */
.page-status { display: none; }

/* Pagination ellipsis */
.page-ellipsis { border-color: transparent !important; background: none !important; cursor: default; color: var(--c-muted); pointer-events: none; }

/* Pagination ellipsis already handled above */

/* Responsive */
@media (max-width: 1023px) {
  .plp-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
  .plp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Narrow pager: the numbered row (first, last and two either side of the current page, with gaps) is up to nine
   40px buttons, about 620px with Previous and Next, and as a nowrap flex row it used to stretch the whole column
   and the page on a phone. It needs the main column to be that wide, which is from about 900px (a tablet beside
   the 200px filter sidebar is narrower), so below that the pager reads "Previous · Page 4 of 8 · Next". */
@media (max-width: 900px) {
  .pagination { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .page-numbers { display: none; }
  .page-status { display: block; flex: 0 1 auto; font-size: .875rem; font-weight: 600; color: var(--c-text); white-space: nowrap; }
  .page-nav-btn { padding: 0 12px; }
}
/* Mobile filter button in the toolbar */
.plp-mob-filter-btn {
  display: none;
  align-items: center; gap: 6px;
  padding: 0 14px; height: 38px;
  background: var(--c-bg); color: var(--c-dark);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer;
}
.plp-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-dark); color: #fff; font-size: .6875rem; font-weight: 700;
}
.plp-bar-count { font-size: .9375rem; color: var(--c-text); }
.plp-bar-count strong { font-weight: 700; }

/* Close button (hidden on desktop) */
.plp-drawer-close { display: none; }
.plp-filter-head-right { display: flex; align-items: center; gap: 10px; }

/* Mobile filter overlay */
.plp-filter-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1099;
}
.plp-filter-overlay.is-open { display: block; }

@media (max-width: 767px) {
  .plp-layout { grid-template-columns: minmax(0, 1fr); }
  .plp-title { font-size: 1.375rem; }
  .plp-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plp-bar   { flex-wrap: nowrap; gap: 10px; border-top: none; border-bottom: 1px solid var(--c-border); padding: 10px 0; }
  .plp-sort-wrap { margin-left: auto; min-width: 0; }
  .plp-sort { min-width: 0; }   /* the 160px floor made the bar wider than a 320px screen; the box now shrinks to what is left beside Filter */
  .plp-bar-count { display: none; } /* product count shown in drawer head on mobile */

  /* Show mobile filter button */
  .plp-mob-filter-btn { display: inline-flex; }

  /* Convert sidebar to bottom sheet drawer */
  .plp-sidebar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1100;
    max-height: 88vh;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    display: flex; flex-direction: column;
  }
  .plp-sidebar.is-open { transform: translateY(0); }
  /* override desktop overflow:hidden so sticky header works */
  .plp-sidebar-inner {
    border: none; border-radius: 0; overflow: visible;
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }

  /* Sticky header sits outside the scroll area */
  .plp-filter-head {
    flex-shrink: 0;
    padding: 16px 16px 12px;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    border-radius: 16px 16px 0 0;
  }
  .plp-filter-head::before {
    content: ''; display: block;
    width: 36px; height: 4px; border-radius: 2px; background: #d1d5db;
    margin: 0 auto 14px;
  }

  /* Scrollable body below the sticky header */
  .plp-filter-scroll-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    /* padding-bottom clears the bottom nav bar (~60px) + safe area */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 12px));
  }
  .plp-drawer-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: #f3f4f6; border: none; cursor: pointer; color: var(--c-dark);
  }
  .plp-drawer-close:hover { background: #e5e7eb; }

  /* Larger touch targets for filter items */
  .plp-filter-link { padding: 10px 16px; }
  .plp-fcheck { width: 20px; height: 20px; border-radius: 4px; }
  .plp-filter-toggle { padding: 15px 16px; font-size: 1rem; }
  .plp-filter-count { font-size: .875rem; }
}

/* ================================================================
   Quick Buy modal (SweetAlert2-based, site-wide)
   ================================================================ */
.swal2-container { z-index: 5000 !important; }
.swal2-popup.pvs-popup { border-radius: 10px !important; padding: 0 !important; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; }
.swal2-html-container.pvs-body { margin: 0 !important; padding: 0 !important; }
.swal2-actions { display: none !important; }
.pvs-qb { font-family: 'Inter', sans-serif; text-align: left; }
.pvs-qb-head { display: flex; gap: 18px; align-items: flex-start; padding: 24px 24px 20px; }
.pvs-qb-img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; flex-shrink: 0; border: 1px solid #f0f0f0; }
.pvs-qb-meta { flex: 1; min-width: 0; }
.pvs-qb-title { font-size: 16px; font-weight: 700; color: #0d1b2a; margin: 0 0 8px; padding-right: 28px; line-height: 1.4; }   /* clear of the × */
.pvs-qb-stars { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pvs-qb-star-track { position: relative; display: inline-block; color: #e0e0e0; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.pvs-qb-star-track::before { content: '★★★★★'; }
.pvs-qb-star-fill { position: absolute; inset: 0; overflow: hidden; color: #f5a623; white-space: nowrap; }
.pvs-qb-star-fill::before { content: '★★★★★'; letter-spacing: 2px; }
.pvs-qb-review-count { font-size: 12.5px; color: #6b7280; }
.pvs-qb-price { margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.pvs-qb-sale-price { font-size: 24px; font-weight: 800; color: #e8243c; }
.pvs-qb-was-price { font-size: 14px; color: #9ca3af; text-decoration: line-through; }
.pvs-qb-reg-price { font-size: 24px; font-weight: 800; color: #0d1b2a; }
.pvs-qb-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 18px; line-height: 1; z-index: 10; }
.pvs-qb-close:hover { background: #e5e7eb; color: #374151; }
.pvs-qb-body { padding: 0 24px 20px; border-top: 1px solid #f0f0f0; }
.pvs-qb-field { margin-top: 16px; }
.pvs-qb-field-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.pvs-qb-label { font-size: 14px; font-weight: 700; color: #0d1b2a; }
.pvs-qb-required { font-size: 12px; font-weight: 700; color: #e8243c; letter-spacing: .03em; }
.pvs-qb-free-tag { font-size: 12px; font-weight: 700; color: #16a34a; }
.pvs-qb-select { width: 100%; padding: 11px 44px 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 6px; font-size: 14.5px; color: #374151; background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s; outline: none; }
.pvs-qb-select:focus { border-color: #0d1b2a; background-color: #fff; }
.pvs-qb-select.error { border-color: #e8243c; }
.pvs-qb-qty-row { display: flex; align-items: center; gap: 0; margin-top: 16px; border: 1.5px solid #e5e7eb; border-radius: 6px; overflow: hidden; width: fit-content; }
.pvs-qb-qty-btn { width: 46px; height: 46px; border: none; background: #f8f8f8; font-size: 20px; cursor: pointer; color: #374151; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.pvs-qb-qty-btn:hover { background: #f0f0f0; }
.pvs-qb-qty-input { width: 58px; height: 46px; border: none; border-left: 1.5px solid #e5e7eb; border-right: 1.5px solid #e5e7eb; text-align: center; font-size: 16px; font-weight: 700; color: #0d1b2a; background: #fff; outline: none; padding: 0; box-sizing: border-box; -moz-appearance: textfield; }
.pvs-qb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 24px 24px; border-top: 1px solid #f0f0f0; }
.pvs-qb-btn-add { padding: 14px; background: #0d1b2a; color: #fff; border: none; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; letter-spacing: .01em; }
.pvs-qb-btn-add:hover { background: #1a2f45; }
/* The way to the product page: an outlined button beside Add to Cart (there is no Cancel; the ×, Escape and a click outside close the modal) */
.pvs-qb-btn-details { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: #fff; color: #0d1b2a; border: 1.5px solid #0d1b2a; border-radius: 6px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s; }
.pvs-qb-btn-details:hover { background: #f9fafb; }
.pvs-qb-btn-details:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.pvs-qb-go { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-gold); color: #111; transition: transform .15s; }
.pvs-qb-btn-details:hover .pvs-qb-go { transform: translateX(2px); }
@media (max-width: 480px) { .pvs-qb-actions { grid-template-columns: 1fr; } }   /* two buttons do not fit side by side on a phone */
.pvs-qb-error { font-size: 12.5px; color: #e8243c; margin-top: 5px; display: none; }
.pvs-qb-error.visible { display: block; }
/* Not enough in stock (or the add failed): the words, and a button for the quantity that is left */
.pvs-qb-stock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid #f5c200; border-radius: 8px; background: #fff8e1;
  color: #5c4400; font-size: 13.5px; line-height: 1.45;
}
.pvs-qb-stock[hidden], .pvs-qb-stock__btn[hidden] { display: none; }
.pvs-qb-stock__text { flex: 1 1 180px; min-width: 0; }
.pvs-qb-stock__btn {
  flex: none; padding: 9px 16px; border: 0; border-radius: 6px;
  background: #0d1b2a; color: #fff; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.pvs-qb-stock__btn:hover { background: #1a2f45; }

/* ---------------------------------------------------------
   Cart drawer — dynamic item styles
   --------------------------------------------------------- */
.cart-drawer__head-title { font-size: 1.0625rem; font-weight: 700; }
.cart-drawer__item-count { font-size: .875rem; font-weight: 400; color: var(--c-muted); margin-left: 4px; }

.cart-empty-msg { padding: 40px 0; text-align: center; color: var(--c-muted); font-size: .9375rem; }
.cart-empty-msg a { color: var(--c-accent); text-decoration: none; }

/* Free shipping progress */
.cart-fsp { padding: 8px 0 12px; }
.fsp-unlocked { display: block; font-size: .75rem; font-weight: 600; color: #0a8c5e; margin-bottom: 6px; }
.fsp-hint { display: block; font-size: .75rem; color: var(--c-text); margin-bottom: 6px; }
.fsp-bar { height: 5px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.fsp-fill { height: 100%; background: #0a8c5e; border-radius: 3px; transition: width .4s ease; }

/* Drawer items */
.cart-drawer-items { display: flex; flex-direction: column; }
.cart-drawer-item {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
}
.cart-drawer-item:last-child { border-bottom: 0; }
.cart-drawer-item__img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  flex-shrink: 0;
  border: 1px solid var(--c-border);
}
.cart-drawer-item__img--empty { background: var(--c-surface); }
.cart-drawer-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-drawer-item__title { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.cart-drawer-item__var {
  display: block;
  font-size: .75rem; color: var(--c-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-drawer-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.cart-drawer-item__qty-row { display: flex; align-items: center; border: 1px solid var(--c-border); border-radius: 5px; overflow: hidden; }
.cdi-qty-btn {
  width: 28px; height: 28px;
  border: none; background: var(--c-surface);
  font-size: 1rem; line-height: 1;
  cursor: pointer; color: var(--c-text);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.cdi-qty-btn:hover { background: var(--c-border); }
.cdi-qty-val { width: 28px; text-align: center; font-size: .8125rem; font-weight: 600; }
.cart-drawer-item__price { font-weight: 700; font-size: .875rem; }
.cart-drawer-item__was { display: block; font-size: .75rem; font-weight: 400; color: var(--c-muted); text-align: right; }
.cdi-remove-btn {
  background: none; border: none; padding: 0;
  font-size: .6875rem; color: var(--c-muted);
  cursor: pointer; text-decoration: underline;
  margin-top: 3px; text-align: left;
  width: fit-content;
}
.cdi-remove-btn:hover { color: var(--c-text); }
.cdi-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.cdi-qty-btn:disabled:hover { background: var(--c-surface); }
/* "Only 3 in stock." under a line that is at its stock (or a refusal to go higher) */
.cdi-stock-note { margin: 5px 0 0; font-size: .75rem; line-height: 1.4; color: #9a5b00; font-weight: 600; }

/* Drawer footer */
.cart-drawer__totals { padding: 6px 0 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 10px; }
.cart-drawer__totals-row { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; padding: 1px 0; }
.cart-drawer__delivery-row { font-size: .8125rem; }
.cart-drawer__delivery-name { margin: 0 0 4px; font-size: .75rem; line-height: 1.35; color: var(--c-muted); text-align: right; }
.cart-drawer__subtotal-val { font-weight: 700; font-size: .9375rem; }
.cart-drawer__checkout-btn { font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }
.cart-drawer__reviews {
  text-align: center;
  font-size: .75rem; color: var(--c-muted);
  margin-top: 8px;
}
.cdr-stars { color: #fbbf24; letter-spacing: 1px; font-size: .875rem; vertical-align: middle; }
.cdr-google-icon { vertical-align: middle; display: inline-block; }
.cart-drawer__view-cart {
  display: block; text-align: center;
  margin-top: 6px;
  font-size: .75rem; color: var(--c-muted);
  text-decoration: underline;
}
.cart-drawer__view-cart:hover { color: var(--c-text); }

/* Drawer recommendations */
.cdr-recs-wrap { margin-top: 4px; }
.cdr-recs__head {
  font-size: .8125rem; font-weight: 700;
  padding: 10px 0 8px;
  border-top: 1px solid var(--c-border);
}
.cdr-recs__scroll {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.cdr-recs__scroll::-webkit-scrollbar { display: none; }
.cdr-rec-card {
  flex: 0 0 110px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px;
  background: var(--c-bg);
}
.cdr-rec-card__link {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.cdr-rec-card__img-wrap {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface);
}
.cdr-rec-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdr-rec-card__img-wrap--empty { background: var(--c-surface); }
.cdr-rec-card__name {
  font-size: .6875rem; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.cdr-rec-card__price { font-size: .75rem; font-weight: 700; }
.cdr-rec-card__btn {
  display: block; width: 100%; text-align: center;
  padding: 5px 4px; border-radius: var(--r-sm);
  font-size: .6875rem; font-weight: 600;
  background: var(--c-text); color: var(--c-bg);
  border: none; cursor: pointer;
  transition: opacity .15s; text-decoration: none;
}
.cdr-rec-card__btn:hover { opacity: .8; }
.cdr-rec-card__btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cart breadcrumb ───────────────────────────────────────── */
.cpage-breadcrumb { padding: 14px 0 0; }
.cpage-breadcrumb ol { display: flex; align-items: center; gap: 6px; list-style: none; flex-wrap: wrap; }
.cpage-breadcrumb li { font-size: .8125rem; color: var(--c-muted); }
.cpage-breadcrumb li + li::before { content: '/'; margin-right: 6px; }
.cpage-breadcrumb a { color: var(--c-muted); text-decoration: none; }
.cpage-breadcrumb a:hover { color: var(--c-text); text-decoration: underline; }

/* ── Cart page ─────────────────────────────────────────────── */
.cart-section { padding: 24px 0 64px; }
@media (max-width: 639px) { .cart-section { padding-bottom: 100px; } }

/* What a Reorder did, above the basket */
.rn { margin: 0 0 20px; padding: 14px 16px; border: 1px solid; border-radius: 10px; font-size: .9375rem; line-height: 1.5; }
.rn--ok   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.rn--warn { background: #fffbeb; border-color: #fde68a; color: #854d0e; }
.rn--none { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.rn__head { margin: 0; font-weight: 700; }
.rn__sub  { margin: 2px 0 0; }
.rn__list { margin: 8px 0 0; padding: 0 0 0 1.1em; }
.rn__list li + li { margin-top: 4px; }
.rn__list strong { font-weight: 800; }
.cart-layout { display: grid; gap: 32px; }
/* Let the columns shrink below their content, so a long discount code truncates instead of widening the page */
.cart-layout > * { min-width: 0; }
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1fr 360px; align-items: start; }
}

/* Items column header */
.cpage-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.cpage-col-head h1 { font-size: 1.375rem; font-weight: 800; }
.cpage-count { font-size: .9375rem; color: var(--c-muted); font-weight: 500; }

/* Table header (desktop only) */
.cpage-table-head {
  display: none;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--c-border);
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted);
}
@media (min-width: 640px) {
  .cpage-table-head { display: grid; grid-template-columns: 1fr 120px 80px; gap: 16px; }
  .cpage-table-head span:nth-child(2) { text-align: center; }
  .cpage-table-head span:nth-child(3) { text-align: right; }
}

/* Item rows */
.cart-page-items { display: flex; flex-direction: column; }
.cart-page-item {
  display: grid; grid-template-columns: 1fr auto; row-gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--c-border);
}
.cart-page-item:first-child { border-top: 1px solid var(--c-border); }
.cart-page-item__product { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .cart-page-item { grid-template-columns: 1fr 120px 80px; row-gap: 0; gap: 16px; align-items: center; }
  .cart-page-item__product { grid-column: auto; }
}

/* Product cell */
.cart-page-item__product { display: flex; gap: 14px; align-items: flex-start; }
.cart-page-item__img-link { display: block; flex-shrink: 0; }
.cart-page-item__img {
  width: 88px; height: 88px; flex-shrink: 0;
  object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface);
}
@media (min-width: 640px) { .cart-page-item__img { width: 80px; height: 80px; } }
.cart-page-item__body { flex: 1; min-width: 0; }
.cart-page-item__title {
  font-size: .9375rem; font-weight: 600; line-height: 1.4;
  color: var(--c-text); text-decoration: none; display: block;
}
.cart-page-item__title:hover { text-decoration: underline; }
.cart-page-item__var { display: block; font-size: .8125rem; color: var(--c-muted); margin-top: 3px; }
.cart-page-item__remove {
  background: none; border: none; padding: 0;
  font-size: .8125rem; color: var(--c-muted); cursor: pointer;
  text-decoration: underline; margin-top: 8px; display: block;
}
.cart-page-item__remove:hover { color: #dc2626; }

/* Qty cell */
.cart-page-item__qty {
  display: flex; align-items: center;
  border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden;
  width: fit-content; align-self: center;
}
@media (min-width: 640px) { .cart-page-item__qty { margin: 0 auto; } }
.cart-page-item__qty button {
  width: 34px; height: 34px; border: none; background: var(--c-surface);
  font-size: 1.125rem; cursor: pointer; color: var(--c-text);
  display: flex; align-items: center; justify-content: center;
}
.cart-page-item__qty button:hover { background: var(--c-border); }
.cart-page-item__qty button:disabled { opacity: .4; cursor: not-allowed; }
.cart-page-item__qty button:disabled:hover { background: var(--c-surface); }
.cart-page-item__qty span { width: 34px; text-align: center; font-size: .875rem; font-weight: 600; }
/* "Only 3 in stock." under a line that is at its stock (or a refusal to go higher) */
.cart-page-item__stock { margin-top: 6px; font-size: .8125rem; line-height: 1.4; color: #9a5b00; font-weight: 600; }
.cart-page-item__stock[hidden] { display: none; }

/* Price cell — visible on both mobile and desktop */
.cart-page-item__price { font-weight: 700; font-size: 1rem; text-align: right; align-self: center; }
.cart-page-item__was { display: block; font-size: .8125rem; font-weight: 400; color: var(--c-muted); }
/* "Any 3 for £25 applied · You save £4.34": one compact pill under a basket line (drawer, cart page, checkout summary) */
.line-offer { margin-top: 6px; }
.line-offer__badge {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px 2px 6px;
  background: #dcfce7; color: #15803d; border-radius: 12px;
  font-size: .75rem; font-weight: 600; line-height: 1.4;
}
.line-offer__badge svg { flex-shrink: 0; }
.line-offer__badge strong { font-weight: 700; white-space: nowrap; }   /* in a narrow column it wraps before "You save", never inside it */
/* "Add 1 more to get Any 3 for £25": the next multibuy deal within reach (drawer, cart page) */
.line-nudge {
  display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 6px; padding: 4px 9px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
  color: #92400e; font-size: .75rem; line-height: 1.35;
}
.line-nudge svg { flex-shrink: 0; }
.line-nudge strong { font-weight: 700; }

/* Mobile fixed checkout bar */
.cart-mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--c-bg); border-top: 1px solid var(--c-border);
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 200; box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
@media (max-width: 639px) { .cart-mobile-bar { display: block; } }
.cart-mobile-bar__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.cart-mobile-bar__ship { font-size: .8rem; flex: 1; min-width: 0; }
.cmb-ship--unlocked { color: #16a34a; }
.cart-mobile-bar__google {
  display: flex; align-items: center; gap: 3px;
  font-size: .75rem; color: var(--c-muted); flex-shrink: 0;
}
.cart-mobile-bar__google .cdr-stars { color: #FFB800; font-size: .75rem; letter-spacing: .5px; }
.cart-mobile-bar__google strong { color: var(--c-text); font-size: .8rem; }
.cart-mobile-bar__inner { display: flex; align-items: center; gap: 12px; }
.cart-mobile-bar__total { flex: 1; }
.cart-mobile-bar__label { display: block; font-size: .75rem; color: var(--c-muted); margin-bottom: 1px; }
.cart-mobile-bar__price { font-size: 1.125rem; font-weight: 800; }
.cart-mobile-bar__btn {
  flex-shrink: 0;
  background: #111; color: #fff;
  padding: 12px 22px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.cart-mobile-bar__btn:hover { background: #333; }

/* Continue shopping */
.cpage-continue-row { margin-top: 20px; }
.cpage-continue {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; color: var(--c-muted); text-decoration: none;
}
.cpage-continue:hover { color: var(--c-text); }

/* ── Summary sidebar ────────────────────────────────────────── */
.cpage-summary {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 24px;
  position: sticky; top: 100px;
}
.cpage-summary__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; }

/* Shipping progress */
.cpage-ship { margin-bottom: 16px; }
.cpage-ship__msg { font-size: .875rem; margin-bottom: 8px; }
.cpage-ship__msg--unlocked { color: #16a34a; }
.cpage-ship__track { height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden; }
.cpage-ship__fill { height: 100%; background: #16a34a; border-radius: 3px; transition: width .4s; }

/* Order note */
.cpage-note {
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  padding: 12px 0; margin-bottom: 16px;
}
.cpage-note__toggle {
  font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.cpage-note__toggle::-webkit-details-marker { display: none; }
.cpage-note__toggle::after { content: '+'; font-size: 1.125rem; color: var(--c-muted); }
details.cpage-note[open] .cpage-note__toggle::after { content: '−'; }
.cpage-note__input {
  width: 100%; margin-top: 10px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font-size: .875rem; font-family: inherit; resize: vertical; min-height: 72px; outline: none;
}
.cpage-note__input:focus { border-color: var(--c-text); }
.cpage-note__status { margin-top: 6px; font-size: .75rem; color: var(--c-muted); }
.cpage-note__status:empty { display: none; }
.cpage-note__status--error { color: #dc2626; }

/* Sum rows */
.cpage-sum-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cpage-sum-row { display: flex; justify-content: space-between; font-size: .9375rem; }
.cpage-sum-row--saving { align-items: center; gap: 12px; color: #16a34a; font-weight: 600; }
.cpage-sum-row__label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cpage-sum-row__tag { display: inline-flex; min-width: 0; }
.cpage-sum-row__amt { flex-shrink: 0; white-space: nowrap; }
.cpage-sum-err { font-size: .8125rem; color: #dc2626; margin-top: -2px; }
.cpage-sum-err:empty { display: none; }
.cpage-sum-row__free { color: #16a34a; font-weight: 700; }
.cpage-sum-note { margin: -4px 0 8px; font-size: .75rem; line-height: 1.35; color: var(--c-muted); text-align: right; }
.cpage-sum-note:empty { display: none; }
.cpage-sum-divider { border: none; border-top: 1px solid var(--c-border); margin: 12px 0; }
.cpage-sum-total { display: flex; justify-content: space-between; font-size: 1.0625rem; font-weight: 800; margin-bottom: 6px; }
.cpage-tax-note { font-size: .8125rem; color: var(--c-muted); margin-bottom: 14px; }

/* Discount code */
.cart-discount-form { display: flex; gap: 8px; margin: 12px 0 0; }
.cart-discount-input { flex: 1; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: .875rem; outline: none; }
.cart-discount-input:focus { border-color: var(--c-text); }
.cart-discount-btn { padding: 10px 14px; background: var(--c-text); color: #fff; border: none; border-radius: var(--r-sm); font-size: .875rem; font-weight: 600; cursor: pointer; }
.cart-discount-msg { font-size: .8125rem; margin-top: 6px; }
.cart-discount-msg.ok { color: #16a34a; }
.cart-discount-msg.err { color: #dc2626; }

/* Checkout button */
.cpage-checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px;
  background: var(--c-text); color: #fff;
  padding: 15px 20px; border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 700; text-decoration: none;
}
.cpage-checkout-btn:hover { opacity: .9; }

/* Age verification */
.cpage-age {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border);
}
.cpage-age__badge {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-text); color: #fff; font-size: .75rem; font-weight: 800;
}
.cpage-age__text { font-size: .75rem; color: var(--c-muted); line-height: 1.5; }

/* Google rating */
.cpage-google {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 14px; font-size: .8125rem; color: var(--c-muted);
}
.cpage-google .cdr-stars { color: #fbbc05; font-size: .875rem; letter-spacing: 1px; }
.cpage-google strong { color: var(--c-text); }

/* ── You May Also Like ─────────────────────────────────────── */
.cart-ymal { padding: 40px 0 60px; background: var(--c-surface); border-top: 1px solid var(--c-border); }
.cart-ymal__heading { font-size: 1.375rem; font-weight: 800; margin-bottom: 24px; }
.cart-ymal__loading { font-size: .9375rem; color: var(--c-muted); }
.cart-ymal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px)  { .cart-ymal__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cart-ymal__grid { grid-template-columns: repeat(6, 1fr); } }

/* ── Minimal checkout header ───────────────────────────────────────── */
/* Header and body share one column grid so the logo lines up with the form's left edge. */
.co-header, .co-layout {
  --co-cols: minmax(0, 1.15fr) minmax(0, 1fr);
  --co-left-inset: max(24px, calc(100% - 544px));
}
.co-header {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.co-header__inner { padding: 16px; }
.co-header__logo { display: block; width: max-content; }
.co-header__logo img { display: block; height: 32px; width: auto; }
@media (min-width: 900px) {
  .co-header { display: grid; grid-template-columns: var(--co-cols); }
  .co-header__inner { padding: 20px 40px 20px var(--co-left-inset); }
  .co-header__logo img { height: 36px; }
}

/* ── Checkout ──────────────────────────────────────────────────────── */

/* Mobile summary toggle */
.co-mob-sum {
  display: block;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 900px) { .co-mob-sum { display: none; } }

.co-mob-sum__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--c-text);
}
.co-mob-sum__left {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: #2563eb;
}
.co-mob-sum__chevron { transition: transform .2s; }
.co-mob-sum__price { font-size: 1rem; font-weight: 700; }
.co-mob-sum__body { padding: 0 16px 16px; border-top: 1px solid var(--c-border); }

/* 2-col layout */
.co-layout {
  display: grid;
}
@media (min-width: 900px) {
  /* 77px = checkout header height (20 + 36 + 20 + 1px border) */
  .co-layout { grid-template-columns: var(--co-cols); min-height: calc(100vh - 77px); }
}

/* Left (form) column — content is 504px max, pinned to the divider with a 40px gap */
.co-left {
  padding: 24px 16px 60px;
}
@media (min-width: 900px) {
  .co-left { padding: 40px 40px 80px var(--co-left-inset); }
}

/* Right (summary) column — content is 400px max, starts 40px from the divider */
.co-right {
  display: none;
  background: #f5f5f5;
  border-left: 1px solid var(--c-border);
}
@media (min-width: 900px) {
  .co-right { display: block; padding: 40px max(24px, calc(100% - 440px)) 80px 40px; }
}

/* Sections */
.co-section + .co-section { margin-top: 32px; }
.co-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.co-section-head .co-section-title { margin-bottom: 0; }
.co-section-title {
  font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; color: var(--c-text);
}
.co-section-sub { font-size: .8125rem; color: var(--c-muted); margin: -8px 0 12px; }
.co-signin { font-size: .875rem; color: var(--c-text); text-decoration: underline; }
.co-signedin { font-size: .875rem; color: var(--c-muted); }

/* Fields & inputs */
.co-field { margin-bottom: 12px; }
.co-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  font: inherit; font-size: .9375rem;
  outline: none; box-sizing: border-box;
  background: var(--c-bg);
  transition: border-color .15s, box-shadow .15s;
}
.co-input:focus { border-color: var(--c-text); box-shadow: 0 0 0 3px rgba(26,26,26,.1); }
.co-input--sm { padding: 9px 12px; font-size: .875rem; }
.co-input.is-invalid { border-color: #dc2626; }
.co-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.co-field-error { font-size: .8125rem; color: #dc2626; margin-top: 4px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-field[hidden] { display: none; }
/* City, state or prefecture, postcode: the countries that ask for a state or prefecture (Australia, Japan) */
.co-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .co-row--3 { grid-template-columns: 1fr; gap: 0; } }

/* A signed-in customer's saved addresses, above the delivery fields */
.co-saved__label { display: block; margin: 0 0 6px; font-size: .8125rem; font-weight: 700; color: var(--c-muted); }
.co-saved .co-input { cursor: pointer; }
.co-checkbox[hidden] { display: none; }

/* Checkboxes */
.co-checkbox { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--c-text); cursor: pointer; margin-bottom: 4px; }
.co-checkbox input { accent-color: var(--c-text); width: 16px; height: 16px; flex-shrink: 0; }

/* Primary button */
.co-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: var(--c-text); color: #fff; border: none; border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  margin-top: 8px; transition: opacity .15s;
}
.co-btn:disabled { opacity: .55; cursor: not-allowed; }
.co-btn:hover:not(:disabled) { opacity: .85; }
.co-btn--pay { font-size: 1.0625rem; padding: 16px 20px; margin-top: 20px; }

/* Error */
.co-error { font-size: .8125rem; color: #dc2626; margin-top: 6px; }
.co-error:empty { display: none; }

/* Link-styled button */
.co-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--c-text); text-decoration: underline;
}

/* Loading / empty placeholders */
.co-loading { color: var(--c-muted); font-size: .875rem; }
.co-empty { padding: 32px 0; text-align: center; color: var(--c-muted); }
.co-empty--error { color: #dc2626; }

/* Shipping methods */
.co-rates { border: 1px solid var(--c-border); border-radius: var(--r-sm); overflow: hidden; }
.co-rates > p { padding: 14px 16px; }
.co-rate {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; background: var(--c-bg);
}
.co-rate + .co-rate { border-top: 1px solid var(--c-border); }
.co-rate:has(input:checked) { background: #eff6ff; }
.co-rate input { flex-shrink: 0; accent-color: var(--c-text); width: 18px; height: 18px; }
.co-rate__info { flex: 1; min-width: 0; }
.co-rate__title { display: block; font-size: .9375rem; font-weight: 600; }
.co-rate__days  { display: block; font-size: .8125rem; color: var(--c-muted); margin-top: 2px; }
.co-rate__price { font-weight: 700; white-space: nowrap; }
.co-rate__price--free { color: #16a34a; }
/* The price before a discount code, struck through beside the one charged */
.co-rate__was, .co-sum-was { margin-right: 6px; font-weight: 400; color: var(--c-muted); }

/* Payment methods */
.co-pay-methods { border: 1px solid var(--c-border); border-radius: var(--r-sm); overflow: hidden; }
.co-pay-method {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; background: #eff6ff;
}
.co-pay-method input { flex-shrink: 0; accent-color: var(--c-text); width: 18px; height: 18px; }
.co-checkbox input:focus-visible, .co-rate input:focus-visible, .co-pay-method input:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }
.co-pay-method__name { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600; }
.co-pay-method__name small { display: block; font-size: .8125rem; font-weight: 400; color: var(--c-muted); }
.co-pay-method__logos { display: flex; gap: 4px; flex-shrink: 0; }
.co-pay-method__logos img { display: block; height: 24px; width: auto; }
.co-pay-panel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 20px; text-align: center;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  font-size: .875rem; color: var(--c-muted);
}
.co-pay-panel svg { color: var(--c-text); }
.co-pay-terms { font-size: .75rem; color: var(--c-muted); text-align: center; margin-top: 12px; }
.co-pay-terms a { color: var(--c-text); text-decoration: underline; }
.co-pay-viva { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: .8125rem; color: var(--c-muted); }
.co-pay-viva img { display: block; height: 22px; width: auto; }

/* Policy + contact footer (checkout and confirmation) */
.co-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-border); font-size: .8125rem; color: var(--c-muted); }
.co-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.co-footer a { color: var(--c-text); text-decoration: underline; }
.co-footer__help { margin-top: 12px; line-height: 1.6; }
.conf-wrap .co-footer { text-align: center; }
.conf-wrap .co-footer__links { justify-content: center; }

/* ── Order summary (right column + mobile) ─── */
.co-sum-items { margin-bottom: 4px; }

.co-sum-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--c-border);
}
.co-sum-item:last-child { border-bottom: none; }
.co-sum-item__img-wrap { position: relative; flex-shrink: 0; }
.co-sum-item__img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--c-border); display: block;
}
.co-sum-item__img--ph {
  width: 64px; height: 64px; border-radius: var(--r-sm);
  background: var(--c-border);
}
.co-sum-item__qty {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #6b7280; color: #fff;
  font-size: .6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.co-sum-item__info { flex: 1; min-width: 0; }
.co-sum-item__name { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.co-sum-item__var  { font-size: .75rem; color: var(--c-muted); margin-top: 2px; }
.co-sum-item__price { font-size: .875rem; font-weight: 700; white-space: nowrap; padding-top: 2px; text-align: right; }
.co-sum-item__was { display: block; font-size: .75rem; font-weight: 400; color: var(--c-muted); }

/* Discount row: the Apply button sits inside the field */
.co-sum-disc-row { position: relative; margin: 14px 0 4px; }
.co-sum-disc-row .co-input--sm { height: 44px; padding-right: 88px; }
.co-disc-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  padding: 5px 14px; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 600;
  white-space: nowrap; transition: background .15s;
}
.co-disc-btn:hover { background: var(--c-border); }

/* Applied discount code: a tag with a button to remove it. Under the code field at checkout,
   and (compact) inside the Savings row on the cart page. */
.co-disc-applied { margin-top: 8px; }
.co-disc-applied:empty { display: none; }
.disc-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 3px 3px 10px; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); color: var(--c-text); font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
}
.disc-chip > svg { flex-shrink: 0; width: 14px; height: 14px; }
.disc-chip__code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-chip__x {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;
  background: transparent; color: var(--c-muted); cursor: pointer; transition: background .15s, color .15s;
}
.disc-chip__x:hover { background: var(--c-border); color: var(--c-text); }
.disc-chip__x:focus-visible { outline: 2px solid var(--c-text); outline-offset: 0; }
.disc-chip__x:disabled { opacity: .5; cursor: default; }
.disc-chip--sm { padding: 2px 2px 2px 8px; gap: 5px; font-size: .75rem; }
.disc-chip--sm > svg { width: 12px; height: 12px; }
.disc-chip--sm .disc-chip__x { width: 24px; height: 24px; }
/* What a code does when that isn't a sum off the goods ("Free shipping", "Buy 2, get 1 free"), beside its tag */
.disc-note { margin-left: 8px; font-size: .8125rem; font-weight: 600; color: #16a34a; }

/* Power Club points: "Use my points" under the discount code, and the note when they cannot be used */
.co-points-slot:empty { display: none; }
.co-points-slot { margin-top: 12px; }
.co-points { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); cursor: pointer; }
.co-points.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.co-points__box { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primary); }
.co-points__text { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; line-height: 1.4; }
.co-points__text small { color: var(--c-muted); font-size: .8125rem; }
.co-points-note { margin: 0; padding: 10px 12px; background: var(--c-surface); border-radius: var(--r-sm); font-size: .8125rem; line-height: 1.45; color: var(--c-muted); }
.co-points-terms { margin: 6px 0 0; font-size: .75rem; }
.co-points-terms a { color: var(--c-muted); text-decoration: underline; }

/* Totals */
.co-sum-totals { padding-top: 10px; }
.co-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .875rem; padding: 5px 0;
}
.co-sum-row--disc { color: var(--c-text); }
.co-sum-row--muted span { color: var(--c-muted); }
.co-sum-row--total { font-weight: 700; font-size: 1rem; padding-top: 8px; }
.co-sum-row--total small { font-weight: 400; }
/* A line under a discount's name when a multibuy deal kept part of the basket out of it ("Not applied to items with a multibuy deal") */
.co-sum-sub { display: block; margin-top: 1px; font-size: .75rem; font-weight: 400; line-height: 1.3; color: var(--c-muted); }
.co-sum-divider { border: none; border-top: 1px solid var(--c-border); margin: 8px 0; }
.co-sum-savings { display: flex; align-items: center; gap: 6px; margin-top: 0; font-size: .8125rem; letter-spacing: .02em; text-transform: uppercase; }
.co-sum-savings svg { flex-shrink: 0; }

/* Accepted payment methods (desktop summary) */
.co-accept { margin-top: 28px; text-align: center; }
.co-accept__title { font-size: .875rem; font-weight: 700; margin-bottom: 12px; }
.co-accept__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.co-accept__logos img { display: block; height: 28px; width: auto; }

/* Google review card (above the items) */
.co-review {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 16px;
}
.co-review__g { flex-shrink: 0; }
.co-review__line { display: flex; align-items: center; gap: 8px; font-size: .9375rem; }
.co-review__stars { color: #fbbc05; letter-spacing: 1px; }
.co-review__sub { font-size: .8125rem; color: var(--c-muted); }
.co-review__sub strong { color: var(--c-text); }

/* ── Confirmation page ────────────────────────────────────────────── */
.conf-wrap { max-width: 600px; margin: 0 auto; padding: 48px 16px 80px; text-align: center; }
.conf-icon {
  width: 64px; height: 64px; background: #dcfce7; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
}
.conf-icon svg { color: #16a34a; }
.conf-eyebrow { font-size: .875rem; color: var(--c-muted); margin-bottom: 6px; }
.conf-title { font-size: 1.75rem; font-weight: 800; margin-bottom: 12px; }
.conf-msg { color: var(--c-muted); font-size: .9375rem; line-height: 1.6; margin-bottom: 28px; }
.conf-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 20px; text-align: left; margin-bottom: 28px;
}
.conf-item {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .9375rem; padding: 8px 0; border-bottom: 1px solid var(--c-border);
}
.conf-item:last-child { border-bottom: 0; }
.conf-item--total { font-weight: 700; }
.conf-item span:last-child { font-weight: 600; text-align: right; }
.conf-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── CMS pages (/pages/{handle}) ───────────────────────────────────── */
.page-content { padding: 32px 0 72px; }
/* no width cap of its own: .container's (1340px) applies, in line with the header and footer. It was a 780px column,
   700px of text on a wide screen. (max-width: none here would also lift the container's own cap.) */
.page-content__title { font-size: 1.75rem; font-weight: 800; line-height: 1.25; margin-bottom: 24px; }
/* The UK Vape Tax Calculator page (Admin → Pages) carries its own stylesheet, which caps its container at 1120px and
   centres it, so it sat inset from the page's title and the header. Let it use the page's width like every other page. */
.page-prose #pvs-vpd-calculator .pvs-vpd-container { width: 100%; }
.page-prose { font-size: .9375rem; line-height: 1.75; color: var(--c-text); overflow-wrap: break-word; }
.page-prose h1, .page-prose h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 36px 0 12px; }
.page-prose h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: 28px 0 10px; }
.page-prose h4, .page-prose h5, .page-prose h6 { font-size: 1rem; font-weight: 700; margin: 24px 0 8px; }
.page-prose > :first-child { margin-top: 0; }
.page-prose p, .page-prose ul, .page-prose ol, .page-prose table, .page-prose blockquote { margin-bottom: 16px; }
.page-prose ul, .page-prose ol { padding-left: 1.4rem; }
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose li { margin-bottom: 6px; }
.page-prose a { color: #2563eb; text-decoration: underline; }
.page-prose img, .page-prose video { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.page-prose iframe { max-width: 100%; }
.page-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.page-prose th, .page-prose td { border: 1px solid var(--c-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.page-prose th { background: var(--c-surface); }
.page-prose blockquote { border-left: 3px solid var(--c-border); padding: 4px 0 4px 16px; color: var(--c-muted); }
.page-prose hr { border: 0; border-top: 1px solid var(--c-border); margin: 28px 0; }

/* ── Contact us (/pages/contact) ───────────────────────────────────────
   A form card beside a card of other ways to reach the shop. The inputs, labels, errors and the button are the
   sign-in pages' (.au-*), so a form looks the same everywhere. */
/* no width cap of its own: the page runs the full container, in line with the header and the footer */
.ct-head .page-content__title { margin-bottom: 8px; }
.ct-lede { max-width: 60ch; margin: 0 0 28px; font-size: 1rem; line-height: 1.6; color: var(--c-muted); }
.ct-intro { max-width: 70ch; margin-bottom: 28px; }

.ct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ct-grid--solo { grid-template-columns: minmax(0, 640px); }

/* the redirect after sending lands on #contact-form: keep it clear of the sticky header (113px, 52px on a phone) */
.ct-card { padding: 28px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; scroll-margin-top: 130px; }
.ct-card__title { margin: 0 0 6px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; color: var(--c-primary); }
.ct-card__sub { margin: 0 0 20px; font-size: .9rem; line-height: 1.5; color: var(--c-muted); }

.ct-form .au-btn { margin-top: 4px; }
.ct-textarea { height: auto; min-height: 160px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ct-opt { font-weight: 500; color: var(--c-muted); }

/* the thank-you that replaces the form once a message is sent */
.ct-sent { padding: 8px 0 4px; }
.ct-sent__ico { display: block; width: 44px; height: 44px; margin-bottom: 14px; color: #16a34a; }
.ct-sent__title { margin: 0 0 6px; font-size: 1.125rem; font-weight: 800; color: var(--c-primary); }
.ct-sent__text { margin: 0 0 18px; font-size: .9375rem; line-height: 1.55; color: var(--c-text); overflow-wrap: anywhere; }
.ct-sent__again { font-size: .9rem; font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.ct-sent__again:hover { color: var(--c-accent); }

/* other ways to reach us */
.ct-ways .ct-card__title { margin-bottom: 14px; }
.ct-way { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--c-border); color: inherit; text-decoration: none; }
.ct-way:first-of-type { border-top: 0; padding-top: 0; }
.ct-way:last-child { padding-bottom: 0; }
.ct-way__ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #b8891a; }
.ct-way > span { min-width: 0; }
.ct-way strong { display: block; font-size: .9375rem; font-weight: 700; color: var(--c-primary); overflow-wrap: anywhere; transition: color .15s; }
.ct-way small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--c-muted); }
.ct-way address { margin: 3px 0 0; font-style: normal; font-size: .9rem; line-height: 1.55; color: var(--c-text); }
a.ct-way:hover strong { color: var(--c-accent); }

@media (max-width: 860px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ct-card { scroll-margin-top: 72px; }
}
@media (max-width: 520px) {
  .ct { padding-top: 24px; }
  .ct-card { padding: 20px; }
  .ct .au-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Blog (/blogs/{handle} and /blogs/{handle}/{slug}) ─────────────────
   An index of article cards, and an article with a side column. Runs the container's width like every page. */
.bl { padding: 28px 0 72px; }

.bl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 20px; font-size: .8125rem; color: var(--c-muted); }
.bl-crumbs a { color: inherit; text-decoration: none; }
.bl-crumbs a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.bl-crumbs [aria-current] { color: var(--c-text); overflow-wrap: anywhere; }

.bl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.bl-head__text { min-width: 0; }
.bl-title { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.bl-count { margin: 6px 0 0; font-size: .9375rem; color: var(--c-muted); }
.bl-count strong { color: var(--c-text); }
.bl-clear, .bl-empty a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bl-clear:hover, .bl-empty a:hover { color: var(--c-accent); }
.bl-empty { padding: 48px 0; font-size: 1rem; color: var(--c-muted); }
.bl-empty p { margin: 0; }
.bl-empty strong { color: var(--c-text); }
.bl-empty--search { padding: 12px 0 4px; }
.bl-sub { margin: 32px 0 18px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }

/* the search box: in the index's header, and (narrow) in an article's side column */
.bl-search {
  position: relative; display: flex; align-items: center; flex: 1 1 340px; min-width: 0; max-width: 460px;
  background: #fff; border: 1.5px solid #d4d4d8; border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.bl-search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-gold); }
.bl-search__icon { position: absolute; left: 14px; color: var(--c-muted); pointer-events: none; }
.bl-search__input {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 42px; border: 0; background: transparent;
  font: inherit; font-size: .9375rem; color: var(--c-text); outline: none;
}
.bl-search__input::placeholder { color: #8b8b95; }
.bl-search__btn {
  flex: none; height: 38px; margin: 3px; padding: 0 18px; border: 0; border-radius: 7px;
  background: var(--c-primary); color: #fff; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.bl-search__btn:hover { background: var(--c-gold); color: var(--c-primary); }
.bl-search__btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.bl-search--side { flex: none; width: 100%; max-width: none; }
.bl-search--side .bl-search__btn { padding: 0 14px; }

.bl-tag {
  align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--c-primary); color: var(--c-gold);
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
}

/* the index */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.bl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  transition: box-shadow .2s, transform .2s;
}
.bl-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.bl-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface); }
.bl-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #b5b5bd; }
.bl-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.bl-card__title { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.bl-card__title a { color: var(--c-primary); text-decoration: none; }
/* the whole card is the link */
.bl-card__title a::after { content: ''; position: absolute; inset: 0; }
.bl-card:hover .bl-card__title a { color: var(--c-accent); }
.bl-card__title a:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 4px; border-radius: 4px; }
.bl-card__excerpt {
  margin: 0; font-size: .9rem; line-height: 1.55; color: var(--c-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: auto 0 0; padding-top: 6px; font-size: .8125rem; color: var(--c-muted); }
.bl-grid + .pagination { margin-top: 40px; }

/* an article */
.bl-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.bl-post__main { min-width: 0; }
.bl-post__head { display: flex; flex-direction: column; gap: 14px; }
.bl-post__title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.bl-post__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .9rem; color: var(--c-muted); }
.bl-post__meta strong { color: var(--c-text); font-weight: 700; }
.bl-post__hero { margin: 26px 0 30px; overflow: hidden; border-radius: 14px; background: var(--c-surface); }
.bl-post__hero img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.bl-prose { font-size: 1.0625rem; line-height: 1.8; }
.bl-prose h2 { margin-top: 40px; }
/* a contents link scrolls the heading to just under the sticky header (113px; 52px on a phone) */
.bl-prose :is(h2, h3) { scroll-margin-top: 132px; }

/* the contents list of an article (Web\Support\ArticleToc): closed to begin with when it is long */
.bl-toc { margin: 0 0 32px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-gold); border-radius: 12px; }
.bl-toc__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.bl-toc__head::-webkit-details-marker { display: none; }
.bl-toc__head:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 8px; }
.bl-toc__title { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }
.bl-toc__count { font-size: .8125rem; color: var(--c-muted); }
.bl-toc__chev { margin-left: auto; flex: none; color: var(--c-muted); transition: transform .2s; }
.bl-toc details[open] .bl-toc__chev { transform: rotate(180deg); }
.bl-toc__list { margin: 0; padding: 0 22px 18px 44px; list-style: decimal; font-size: .9375rem; line-height: 1.5; }
.bl-toc__list > li { margin-top: 8px; padding-left: 4px; }
.bl-toc__list > li::marker { font-weight: 700; color: var(--c-muted); }
.bl-toc__sub { margin: 6px 0 2px; padding-left: 18px; list-style: disc; font-size: .875rem; }
.bl-toc__sub li { margin-top: 5px; }
.bl-toc a { color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
.bl-toc a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 800px) {
  .bl-toc--cols .bl-toc__list { columns: 2; column-gap: 40px; }
  .bl-toc--cols .bl-toc__list > li { break-inside: avoid; }
}
.bl-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-chip { padding: 5px 12px; border: 1px solid var(--c-border); border-radius: 999px; background: #fff; font-size: .8125rem; color: var(--c-text); }
.bl-back { font-size: .9375rem; font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.bl-back:hover { color: var(--c-accent); }

/* the side column: under the sticky header (113px) while the article scrolls */
.bl-side { position: sticky; top: 132px; display: grid; gap: 20px; }
.bl-box { padding: 20px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; }
.bl-box__title { margin: 0 0 14px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.bl-latest { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bl-latest a { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none; }
.bl-latest img, .bl-latest__ph { flex: none; width: 72px; height: 54px; border-radius: 8px; background: var(--c-surface); object-fit: cover; }
.bl-latest strong { display: block; font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--c-primary); }
.bl-latest small { display: block; margin-top: 3px; font-size: .75rem; color: var(--c-muted); }
.bl-latest a:hover strong { color: var(--c-accent); }
.bl-shop { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-shop a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: .8125rem; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.bl-shop a:hover { background: var(--c-gold); color: var(--c-primary); }

@media (max-width: 1100px) {
  .bl-post__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .bl-side { position: static; }
}
@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bl { padding-top: 20px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-prose { font-size: 1rem; }
  .bl-prose :is(h2, h3) { scroll-margin-top: 72px; }
  .bl-search { flex-basis: 100%; max-width: none; }
  .bl-toc__list { padding-left: 38px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-card { transition: none; }
  .bl-card:hover { transform: none; }
  .bl-toc__chev, .bl-search, .bl-search__btn { transition: none; }
}

/* ── FAQs (/pages/faqs) ────────────────────────────────────────────────
   Every active FAQ as a <details> accordion, two columns on a wide screen; the container's width like every page. */
.fq-head .page-content__title { margin-bottom: 6px; }
.fq-count { margin: 0 0 24px; min-height: 1.2em; font-size: .9375rem; color: var(--c-muted); }
.fq-intro { max-width: 70ch; margin-bottom: 28px; }
.fq-empty { padding: 32px 0; color: var(--c-muted); }

.fq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; align-items: start; }
.fq-col { border-top: 2px solid var(--c-primary); }
.fq-item { border-bottom: 1px solid var(--c-border); }
.fq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--c-primary);
}
.fq-item > summary::-webkit-details-marker { display: none; }
.fq-item > summary:hover { color: var(--c-accent); }
.fq-item > summary:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }
/* a plus that turns into a minus, drawn with two bars */
.fq-item > summary::after {
  content: ''; flex: none; width: 14px; height: 14px; color: var(--c-muted);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.fq-item[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.fq-a { padding: 0 0 20px; font-size: .9375rem; line-height: 1.75; color: var(--c-muted); }
.fq-a > :last-child { margin-bottom: 0; }

.fq-help {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding: 24px 28px; border-radius: 14px; background: var(--c-primary); color: #fff;
}
.fq-help__title { margin: 0 0 4px; font-size: 1.125rem; font-weight: 800; }
.fq-help__text { margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .72); }
.fq-help__btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 8px;
  background: var(--c-gold); color: var(--c-primary); font-size: .9375rem; font-weight: 800; text-decoration: none;
  transition: background .15s;
}
.fq-help__btn:hover { background: var(--c-gold-soft); }

@media (max-width: 860px) {
  .fq-grid { grid-template-columns: minmax(0, 1fr); }
  .fq-col + .fq-col { border-top: 0; }
}
@media (max-width: 520px) {
  .fq-item > summary { padding: 15px 0; font-size: .9375rem; }
  .fq-help { padding: 20px; }
  .fq-help__btn { width: 100%; justify-content: center; }
}

/* ── Power Club: the sign-up box, My Account → Power Club, and the two public pages ─────────────────── */
.au-club { margin: 4px 0 16px; padding: 14px 16px 6px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.au-club__title { margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.au-club .au-check { margin-bottom: 8px; }

.pclub-card .acct-card__title { flex-wrap: wrap; }
.pclub-text { margin: 0 0 12px; font-size: .9375rem; line-height: 1.6; color: var(--c-text); }
.pclub-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: .875rem; }
.pclub-links a { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pclub-links a:hover { color: var(--c-accent); }
.pclub-version { margin-left: auto; color: var(--c-muted); }

.pclub-points { margin-top: 20px; max-width: 760px; }
.pclub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.pclub-stat { padding: 16px 18px; background: var(--c-surface); border-radius: 12px; }
.pclub-stat__n { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.pclub-stat__l { display: block; margin-top: 2px; font-size: .875rem; color: var(--c-muted); }
.pclub-sub { margin: 22px 0 8px; font-size: 1rem; font-weight: 800; }
.pclub-history { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pclub-history th, .pclub-history td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--c-border); }
.pclub-history th { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.pclub-history .pclub-num { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pclub-up { color: #15803d; }
.pclub-down { color: #b91c1c; }
@media (max-width: 480px) { .pclub-stats { grid-template-columns: minmax(0, 1fr); } .pclub-history td:first-child { white-space: nowrap; } }

.pcpage-version { margin: -8px 0 24px; font-size: .9375rem; font-weight: 600; color: var(--c-muted); }
.pcpage-holding { padding: 24px 0; color: var(--c-muted); }
.pcpage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 0; }
.pcpage-btn { width: auto; margin-top: 0; padding: 0 26px; }
.pcpage-link { font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.pcpage-link:hover { color: var(--c-accent); }

/* ── Power Club pages: the blocks the text of /power-club and /power-club/terms is made of (CMS HTML, so they are
      plain classes: steps, tier cards, a note, a list, a callout, an accordion, numbered clauses) ───────────── */
.pcp-lead { max-width: 60ch; margin: 0 0 20px; font-size: 1.25rem; line-height: 1.5; font-weight: 600; color: var(--c-text); }
.pcpage .pcpage-actions { margin: 0 0 8px; }
/* the buttons sit inside .page-prose, whose blue links would otherwise colour them */
.page-prose a.au-btn { color: #fff; text-decoration: none; }
.page-prose a.pcpage-link { color: var(--c-primary); }
.page-prose a.pcpage-link:hover { color: var(--c-accent); }
.pcpage .page-prose h2 { margin-top: 40px; }

.page-prose ol.pcp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: pcp-step; }
.pcp-steps > li { margin: 0; padding: 22px 20px 20px; background: var(--c-surface); border-radius: 12px; line-height: 1.6; counter-increment: pcp-step; }
.pcp-steps > li::before { content: counter(pcp-step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--c-primary); color: var(--c-gold); font-weight: 800; }
.pcp-steps strong { display: block; margin-bottom: 4px; font-size: 1.125rem; }

.pcp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.pcp-tier { padding: 20px; background: #fff; border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary); border-radius: 12px; }
.page-prose .pcp-tier h3 { margin: 0 0 6px; font-size: 1.25rem; }
.pcp-tier__how { margin: 0 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); font-size: .8125rem; line-height: 1.4; color: var(--c-muted); }
.pcp-tier__how strong { display: block; margin-top: 2px; font-size: .9375rem; color: var(--c-text); }
.pcp-tier dl { margin: 0; }
.pcp-tier dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-border); font-size: .9375rem; }
.pcp-tier dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pcp-tier dt { color: var(--c-muted); }
.pcp-tier dd { margin: 0; font-weight: 700; text-align: right; }
.pcp-tier dl > div:first-child dd { font-size: 1.25rem; line-height: 1.2; }
.pcp-note { max-width: 70ch; margin: 0; font-size: .9375rem; color: var(--c-muted); }

.page-prose ul.pcp-list { margin: 0; padding: 0; list-style: none; }
.pcp-list li { position: relative; margin: 0 0 10px; padding-left: 28px; }
.pcp-list li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-gold); }

.pcp-callout { margin: 40px 0 0; padding: 20px 22px; background: var(--c-surface); border-left: 4px solid var(--c-gold); border-radius: 0 12px 12px 0; }
.page-prose .pcp-callout h2 { margin: 0 0 8px; font-size: 1.125rem; }
.pcp-callout p:last-child { margin-bottom: 0; }

.pcp-faq { margin: 0 0 8px; border-top: 2px solid var(--c-primary); }
.pcp-faq details { border-bottom: 1px solid var(--c-border); }
.pcp-faq summary { position: relative; padding: 16px 44px 16px 0; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.pcp-faq summary::-webkit-details-marker { display: none; }
.pcp-faq summary:hover { color: var(--c-accent); }
.pcp-faq summary:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; border-radius: 4px; }
.pcp-faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
.pcp-faq details[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.pcp-faq details > p { margin: 0 0 18px; color: var(--c-muted); }

/* The terms: one reading column, the clause numbers hanging in the margin */
.pcpage--terms .page-prose { max-width: 78ch; }
.page-prose h2[id^="clause-"] { scroll-margin-top: 130px; }
.pcp-clause { position: relative; margin: 0 0 10px; padding-left: 3.2em; }
.pcp-clause .pcp-n { position: absolute; left: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcp-contact { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--c-border); font-weight: 600; }
.pcp-todo { padding: 0 3px; background: #fde68a; color: #111; border-radius: 3px; }

@media (max-width: 900px) {
  .page-prose ol.pcp-steps, .pcp-tiers { grid-template-columns: minmax(0, 1fr); }
  .pcp-lead { font-size: 1.125rem; }
}

/* Printing the terms (or the page): the words only, no menus, banners or buttons */
@media print {
  body:has(.pcpage) .trust-bar, body:has(.pcpage) .site-header, body:has(.pcpage) .site-footer,
  body:has(.pcpage) .mbn, body:has(.pcpage) #cookie-banner, body:has(.pcpage) #age-gate,
  body:has(.pcpage) .pcpage-actions { display: none !important; }
  .pcpage .container { max-width: none; padding: 0; }
  .pcpage--terms .page-prose { max-width: none; }
  .pcpage h1, .pcpage h2, .pcpage h3 { break-after: avoid; }
  .pcp-clause, .pcp-tier, .pcp-faq details { break-inside: avoid; }
  .pcp-todo { background: none; }
  .page-prose a { color: inherit; }
}

/* ── Sign in with Google (2026-10-16) ──
   The button follows Google's branding rules (developers.google.com/identity/branding-guidelines): the light
   button, fill #fff, 1px #747775 stroke, #1F1F1F text, the unaltered four-colour G, 12px before the G, 10px
   between the G and the text, 12px after. Keep the wording to Google's own ("Sign in with Google",
   "Sign up with Google", "Continue with Google"). */
.au-gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  width: 100%; min-height: 46px; padding: 0 12px;
  background: #fff; border: 1px solid #747775; border-radius: 8px;
  color: #1f1f1f; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.au-gbtn:hover { background: #eee; color: #1f1f1f; }
.au-gbtn:active { background: #e8e8e8; }
.au-gbtn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.au-gbtn svg { flex: none; display: block; width: 20px; height: 20px; }

/* "or" between the Google button and the email form */
.au-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 22px; font-size: .8125rem; color: var(--c-muted); }
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.au-or span { flex: none; max-width: 80%; text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   Favourites (the link on a product page, the Favourites page) and
   the account's Profile page
   ══════════════════════════════════════════════════════════════════ */

/* The favourites controls (the link on a product page, "Remove" on the Favourites page). The script (storefront.js,
   Favourites) flips .is-on; the markup is partials/fav-button.php. There is no heart on product cards. */
.fav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.fav-btn svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: fill .15s, stroke .15s;
}
.fav-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.fav-btn.is-busy { opacity: .65; pointer-events: none; }
.fav-btn.is-on svg { fill: currentColor; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.fav-btn.is-pop svg { animation: fav-pop .3s ease; }

/* on the Favourites page: a plain "Remove" under the card's button, a line of text and not a button to look at, 40px tall
   so a thumb can hit it (a product is saved from its own page; the card itself has no heart) */
.fav-btn--remove {
  display: flex; width: 100%; min-height: 40px; margin-top: 4px;
  background: none; color: var(--c-muted);
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-border);
}
.fav-btn--remove:hover { color: #e8243c; text-decoration-color: currentColor; }

/* on the product page: one short line under the Add to Cart box (not in it, and not a button): a few words asking
   ("Want to find this again easily?") and then the link, the heart and the words, the words underlined. The link is
   still a <button> for the keyboard and screen readers (aria-pressed) and 44px tall so a thumb can hit it, but
   nothing about it is drawn as one. Both items start at the top of the row and the question is padded down to the
   link's text, so they line up on one row and, when the column is too narrow (a phone), the link drops under the
   question looking right. Once saved the script hides the question and only "Saved to favourites" is left. */
.pdp-fav { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; margin: -8px 0 0; }
.pdp-fav:empty { display: none; }
.pdp-fav__lead { padding: 12px 0 0; font-size: .9375rem; line-height: 1.3; color: var(--c-muted); }
.pdp-fav__lead[hidden] { display: none; }
.fav-btn--pdp {
  gap: 7px; min-height: 44px; padding: 0; justify-content: flex-start;
  background: none; color: var(--c-text);
  font-size: .9375rem; font-weight: 600; line-height: 1.3; text-align: left;
}
.fav-btn--pdp svg { width: 18px; height: 18px; }
.fav-btn--pdp .fav-btn__text {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.35);
}
.fav-btn--pdp:hover { color: #e8243c; }
.fav-btn--pdp:hover .fav-btn__text { text-decoration-color: currentColor; }
.fav-btn--pdp.is-on { color: #e8243c; }
@media (prefers-reduced-motion: reduce) {
  .fav-btn, .fav-btn svg { transition: none; }
  .fav-btn.is-pop svg { animation: none; }
}

/* The phone menu's Favourites row: how many are saved (shown to a signed-in customer only) */
.mn-fav-count[hidden] { display: none; }
.mn-fav-count {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px;
  background: var(--c-gold); color: #111; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center;
}

/* The message after a heart is pressed */
.fav-toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 4600;   /* over the basket drawer (4500), under the cookie notice (9000) */
  max-width: min(92vw, 440px); padding: 12px 16px;
  background: #111; color: #fff; border-radius: 10px;
  font-size: .9rem; line-height: 1.45; text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.fav-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fav-toast a { margin-left: 10px; color: var(--c-gold); font-weight: 700; white-space: nowrap; }

/* The Favourites page */
.fav-grid .tn-card { flex: initial; transition: opacity .2s, transform .2s; }
.fav-card-leaving { opacity: 0; transform: scale(.96); }
.fav-empty { padding: 56px 16px; text-align: center; color: var(--c-muted); }
.fav-empty[hidden], .fav-grid[hidden] { display: none; }
.fav-empty svg { display: block; width: 56px; height: 56px; margin: 0 auto 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; opacity: .35; }
.fav-empty h2 { margin: 0 0 6px; font-size: 1.25rem; color: var(--c-primary); }
.fav-empty p { margin: 0 auto 20px; max-width: 34rem; }
.fav-empty__btn { display: inline-flex; width: auto; padding: 0 28px; }
.fav-fine { margin: 24px 0 0; font-size: .8125rem; color: var(--c-muted); }

/* Account tabs: six of them do not fit a phone, so they scroll sideways (the underline of the current one sits inside the
   scrolling box, above the border, or the box would cut it off) */
@media (max-width: 700px) {
  .acct-nav { gap: 0 20px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a { flex: none; white-space: nowrap; font-size: .9375rem; }
}
.acct-more-row { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }

/* The Profile page: two cards (details, password), one under the other */
.pf-stack { display: grid; gap: 20px; max-width: 680px; }
.pf-card { scroll-margin-top: 130px; }
.pf-note { margin: 0 0 14px; font-size: .9375rem; line-height: 1.55; }
.pf-links { margin-top: 16px; }
.pf-links a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .pf-card { scroll-margin-top: 70px; } }