/* ══════════════════════════════════════════════════════════════════════════
   chrome.css — the persistent frame around every page.
   Announcement strip · header · primary nav + dropdowns · mobile drawer ·
   mini-cart drawer · footer · age gate · back-to-top.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TOP BAR ───────────────────────────────────────────────────────────
   Two stacked rows: the legally required nicotine warning on a near-black
   ground, then the store's promises on the brand colour. Both are set in
   the mono face so they read as chrome rather than as content. */
.tv-topbar-warn {
  background: #0A0A0B;
  color: rgba(255, 255, 255, .74);
  font-family: var(--tv-font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-align: center;
  padding: 7px var(--tv-pad-x);
  line-height: 1.45;
}
.tv-topbar-warn b { color: #fff; font-weight: 700; }

.tv-topbar {
  background: var(--brand);
  color: rgba(255, 255, 255, .92);
  font-family: var(--tv-font-mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tv-topbar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  min-height: 40px;
  padding-block: 6px;
}
.tv-topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.tv-topbar-item svg { flex: 0 0 auto; opacity: .9; }
.tv-topbar-sep { opacity: .4; }
.tv-topbar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .tv-topbar-warn { font-size: 10px; letter-spacing: .03em; }
  .tv-topbar-row { gap: 10px; font-size: 10px; letter-spacing: .04em; }
  /* Three uppercase promises will not fit a phone on one line; dropping the
     separators lets them wrap as a tidy block instead of a ragged list. */
  .tv-topbar-sep { display: none; }
}

/* ── HEADER ────────────────────────────────────────────────────────────── */
.tv-hdr {
  position: sticky;
  top: 0;
  z-index: var(--tv-z-sticky);
  background: var(--tv-paper);
  border-bottom: 1px solid var(--tv-hair);
}
.tv-hdr-row {
  display: flex;
  align-items: center;
  gap: var(--tv-s-8);
  /* A little more air than the old 68px so the pill-shaped items sit in the
     bar rather than filling it. */
  height: 76px;
}

.tv-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tv-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  color: var(--tv-ink);
  flex: 0 0 auto;
}
.tv-logo:hover { color: var(--tv-ink); }
.tv-logo-word { font-weight: 800; color: var(--brand-ink); }
.tv-logo img { max-height: 40px; width: auto; }
/* The flame mark is sized here rather than left to the cap above: that rule
   only clamps an uploaded logo, and with `width: auto` the SVG's own 512px
   intrinsic size would drive it to the full 40px. */
.tv-logo-mark { height: 30px; width: auto; }

/* WordPress renders the custom logo as its own <a>; keep it on the baseline. */
.custom-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.custom-logo-link img { max-height: 44px; width: auto; border-radius: 0; }

/* The <nav> wrapper must not consume a slot in the header flex row. */
.tv-nav-wrap { display: contents; }

.tv-hdr-spacer { flex: 1; }

.tv-hdr-tools { display: flex; align-items: center; gap: var(--tv-s-3); flex: 0 0 auto; }

.tv-iconbtn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tv-r-sm);
  color: var(--tv-ink-2);
  transition: background-color var(--tv-dur-fast), color var(--tv-dur-fast);
}
.tv-iconbtn:hover { background: var(--tv-paper-deep); color: var(--tv-ink); }

.tv-cartbtn { position: relative; }
.tv-cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding-inline: 5px;
  border-radius: var(--tv-r-pill);
  background: var(--brand); color: #fff;
  font: 700 10px/18px var(--tv-font-display);
  text-align: center;
}
.tv-cart-count[data-count="0"] { display: none; }

/* ── PRIMARY NAV ───────────────────────────────────────────────────────── */
/* The 24px that used to be a flex `gap` now lives as padding on each item.
   Visually identical, but the space between two items belongs to one of them
   instead of to neither — with a gap, sliding from one menu to the next
   crossed a strip where both closed and reopened. The outer margin loses the
   first item's side padding so the text starts on the same optical line. */
.tv-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: calc(var(--tv-s-6) - 14px);
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.tv-nav > li { margin: 0; }
.tv-nav a, .tv-nav .tv-nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tv-ink-2);
  white-space: nowrap;
  transition: color var(--tv-dur-fast), background-color var(--tv-dur-fast);
}
/* Direct children only — dropdown links have their own padding. The vertical
   padding is what makes the item box reach down to the dropdown, leaving no
   dead strip between them. */
.tv-nav > li > a,
.tv-nav > li > .tv-nav-trigger {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--tv-r-sm);
}
/* Hovered and current items take a soft fill; before this the bar only shifted
   colour. Triggers need their own selectors — the element is a <button>, so
   every `> a` rule missed them and a section with children never highlighted. */
.tv-nav > li > a:hover,
.tv-nav > li > .tv-nav-trigger:hover,
.tv-nav > li.current-menu-item > a,
.tv-nav > li.current-menu-ancestor > a,
.tv-nav > li.current-menu-item > .tv-nav-trigger,
.tv-nav > li.current-menu-ancestor > .tv-nav-trigger {
  background: var(--tv-paper-deep);
  color: var(--tv-ink);
}
/* The current section also gets a brand rule, so the bar states where you are
   without a permanent fill that would read as a stuck hover state. */
.tv-nav > li.current-menu-item > a::after,
.tv-nav > li.current-menu-ancestor > .tv-nav-trigger::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: var(--brand);
}

/* The one deliberately loud nav item (loyalty / club link). */
.tv-nav .tv-nav-accent > a, .tv-nav a.tv-nav-accent { color: var(--brand-ink); font-weight: 700; }
.tv-nav > li.tv-nav-accent > a:hover,
.tv-nav > li.tv-nav-accent > .tv-nav-trigger:hover { color: var(--brand-ink); background: var(--brand-soft); }

.tv-nav-item { position: relative; }
.tv-nav-caret { transition: transform var(--tv-dur-fast); flex: 0 0 auto; }
.tv-nav-has-menu:hover .tv-nav-caret,
.tv-nav-has-menu:focus-within .tv-nav-caret { transform: rotate(180deg); }

.tv-nav-dropdown {
  position: absolute;
  /* Flush to the bottom of the item, not 10px below it. That 10px belonged to
     no element, so the pointer lost :hover crossing it and the panel began
     fading out before it was reached — the flicker. The visual gap now comes
     from the item's own padding, which is hoverable. */
  top: 100%;
  /* Centred on its parent item. `--tv-dd-shift` is nudged by theme.js only
     when a wide menu would otherwise run past the edge of the viewport. It is
     applied as a margin, deliberately outside `transform`: the transform is
     animated, so folding the correction into it made the panel slide sideways
     while it faded in. */
  left: 50%;
  --tv-dd-shift: 0px;
  min-width: 240px;
  background: var(--tv-paper);
  border: 1px solid var(--tv-hair);
  border-radius: var(--tv-r-md);
  box-shadow: var(--tv-elev-3);
  padding: 8px;
  margin: 0;
  /* After the `margin` shorthand, never before it — the shorthand resets every
     side, so an earlier margin-left here would be silently discarded. */
  margin-left: var(--tv-dd-shift);
  list-style: none;
  z-index: var(--tv-z-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--tv-dur-base) var(--tv-ease),
              transform var(--tv-dur-base) var(--tv-ease),
              visibility var(--tv-dur-base);
}
.tv-nav-has-menu:hover > .tv-nav-dropdown,
.tv-nav-has-menu:focus-within > .tv-nav-dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
/* A long child list (every brand) splits into columns — automatically past
   the threshold, or on demand via a `tv-mega` class on the parent item. */
.tv-nav-dropdown--mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  min-width: 420px;
  max-width: min(92vw, 900px);
}
.tv-nav-dropdown--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 620px; }
.tv-nav-dropdown--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 800px; }
.tv-nav-dropdown li { margin: 0; }
.tv-nav-dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--tv-r-sm);
  color: var(--tv-ink-2);
  font-size: 14px; font-weight: 600;
  /* `.tv-nav a` sets nowrap for the top row; with artwork leading, long
     category names have to be allowed to take a second line. */
  white-space: normal;
}
.tv-nav-dropdown a:hover { background: var(--tv-paper-deep); color: var(--tv-ink); }
/* The page you are on, when it is a link inside a dropdown. */
.tv-nav-dropdown .current-menu-item > a { color: var(--tv-ink); }
.tv-nav-dd-meta {
  font-family: var(--tv-font-mono); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tv-ink-3); font-weight: 400;
}

/* ── CATEGORY ROW ARTWORK ────────────────────────────────────────────────
   The term's shop image leads the row. Rows are the same height with or
   without artwork — the fallback shows the initial on the brand tint — so a
   group of categories never reads as a ragged list. */
.tv-nav-thumb {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tv-paper-deep);
  font-family: var(--tv-font-display); font-weight: 800;
  font-size: 12px; line-height: 1;
  color: var(--tv-ink-2);
  /* The row's own padding no longer carries the height once an image is in it. */
  margin-block: -3px;
}
.tv-nav-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No picture on the term: the initial reads as a deliberate mark, not a gap.
   Ink stays dark rather than taking the brand colour — a pale brand would
   otherwise sit pale-on-pale. */
.tv-nav-thumb--empty {
  background: color-mix(in srgb, var(--tv-thumb-bg, var(--brand)) 16%, transparent);
  color: var(--tv-ink-2);
}

/* The label takes the slack so the mono note stays flush right. */
.tv-nav-label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* ── BRAND TILE GRID ─────────────────────────────────────────────────────
   Used when a submenu is made entirely of brands. Same markup idea as the
   home brand wall, at navigation scale. */
.tv-nav-dropdown--brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  width: min(92vw, 660px);
  padding: 10px;
  /* Thirty brands at four columns is taller than a laptop viewport; the panel
     scrolls rather than running off the bottom of the screen. */
  max-height: min(74vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tv-nav-dropdown--brands a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  padding: 12px 10px;
}
.tv-nav-brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tv-thumb-bg, var(--brand)) 16%, transparent);
  color: var(--tv-ink-2);
  font-family: var(--tv-font-display); font-weight: 800;
  font-size: 15px; line-height: 1;
}
.tv-nav-brand-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tv-nav-brand-name {
  display: block;
  font-size: 13.5px; font-weight: 700; line-height: 1.25;
  color: var(--tv-ink);
  overflow-wrap: break-word;
}
.tv-nav-brand-meta {
  display: block;
  margin-top: -2px;
  font-family: var(--tv-font-mono); font-size: 9.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tv-ink-3); font-weight: 400;
}
.tv-nav-dropdown--brands a:hover .tv-nav-brand-meta { color: var(--tv-ink-2); }
/* The closing "All brands" row is a link, not a tile: keep it on one line. */
.tv-nav-dropdown--brands .tv-nav-cat a { flex-direction: row; align-items: center; padding: 10px 12px; }

@media (max-width: 1100px) {
  .tv-nav-dropdown--brands { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(92vw, 520px); }
}
/* Full-width "All brands →" row closing a brand submenu. */
.tv-nav-dropdown .tv-nav-cat {
  grid-column: 1 / -1;
  border-top: 1px solid var(--tv-hair);
  margin-top: 8px;
  padding-top: 6px;
}
.tv-nav-dropdown .tv-nav-cat a { color: var(--brand-ink); font-weight: 700; }
.tv-nav-dropdown .tv-nav-cat a:hover { color: var(--brand-ink); background: var(--brand-soft); }


/* ── MOBILE DRAWER ─────────────────────────────────────────────────────── */
.tv-nav-toggle { display: none; }
.tv-nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 2px 0;
  background: var(--tv-ink); border-radius: 2px;
}

.tv-mobile-dialog {
  border: 0; padding: 0;
  max-width: 360px; width: 90%;
  margin: 0 0 0 auto;
  height: 100%; max-height: 100%;
  background: var(--tv-paper);
  color: var(--tv-ink);
  overflow-y: auto;
}
.tv-mobile-dialog::backdrop { background: rgba(11, 11, 13, .45); }
.tv-mobile-close {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px; font-size: 20px; color: var(--tv-ink-3);
  border-radius: var(--tv-r-sm);
}
.tv-mobile-close:hover { background: var(--tv-paper-deep); color: var(--tv-ink); }
.tv-mobile-list {
  list-style: none; margin: 0;
  padding: 64px 24px 40px;
  display: flex; flex-direction: column; gap: 4px;
}
.tv-mobile-list > li { margin: 0; }
.tv-mobile-list > li > a,
.tv-mobile-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px;
  font-family: var(--tv-font-display); font-weight: 700; font-size: 17px;
  color: var(--tv-ink); cursor: pointer; list-style: none;
}
.tv-mobile-list summary::-webkit-details-marker { display: none; }
.tv-mobile-list summary::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--tv-ink-3); border-bottom: 2px solid var(--tv-ink-3);
  transform: rotate(45deg); transition: transform var(--tv-dur-base);
}
.tv-mobile-list details[open] summary::after { transform: rotate(-135deg); }
.tv-mobile-list details ul {
  list-style: none; margin: 0 0 8px;
  padding: 0 0 4px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.tv-mobile-list details ul a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 4px; font-size: 14px; font-weight: 500; color: var(--tv-ink-2);
}
.tv-mobile-meta { font-family: var(--tv-font-mono); font-size: 10px; color: var(--tv-ink-3); text-transform: uppercase; }
.tv-mobile-divider { height: 1px; background: var(--tv-hair); margin: 10px 0; }

@media (max-width: 960px) {
  .tv-nav { display: none; }
  .tv-nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  .tv-hdr-row { gap: var(--tv-s-4); }
}
@media (min-width: 961px) { .tv-mobile-dialog[open] { display: none; } }

/* ── MINI-CART DRAWER ──────────────────────────────────────────────────── */
.tv-cart-scrim {
  position: fixed; inset: 0;
  background: rgba(11, 11, 13, .4);
  z-index: var(--tv-z-modal);
  opacity: 0; pointer-events: none;
  transition: opacity var(--tv-dur-base);
}
.tv-cart-scrim.is-open { opacity: 1; pointer-events: auto; }

.tv-cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  z-index: calc(var(--tv-z-modal) + 1);
  background: var(--tv-paper);
  border-left: 1px solid var(--tv-hair);
  box-shadow: var(--tv-elev-3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--tv-dur-slow) var(--tv-ease-out);
}
.tv-cart-panel.is-open { transform: translateX(0); }
.tv-cart-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--tv-hair);
}
.tv-cart-panel-title {
  font-family: var(--tv-font-mono); font-size: 11px;
  letter-spacing: var(--tv-tr-mono); text-transform: uppercase;
  color: var(--tv-ink-3);
}
.tv-cart-panel-head button {
  width: 32px; height: 32px; border-radius: var(--tv-r-sm);
  font-size: 16px; color: var(--tv-ink-3);
}
.tv-cart-panel-head button:hover { background: var(--tv-paper-deep); color: var(--tv-ink); }
.tv-cart-panel-body { flex: 1; overflow-y: auto; padding: 8px 22px; }

.tv-cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tv-cart-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--tv-hair);
}
.tv-cart-item:last-child { border-bottom: 0; }
.tv-cart-item img {
  width: 60px; height: 60px;
  object-fit: contain;
  border-radius: var(--tv-r-sm);
  background: #fff;
}
.tv-cart-item-name { font-family: var(--tv-font-display); font-weight: 700; font-size: 14px; line-height: 1.25; margin: 0; }
.tv-cart-item-name a { color: var(--tv-ink); }
.tv-cart-item-name a:hover { color: var(--brand-ink); }
.tv-cart-item-var { font-size: 12px; color: var(--tv-ink-3); margin: 2px 0 0; }
.tv-cart-price { font-family: var(--tv-font-display); font-weight: 800; font-size: 15px; color: var(--brand-ink); white-space: nowrap; }

/* Stepper (or the fixed "Qty 1" for sold-individually lines) with the remove
   control riding immediately to its right, the arrangement the cart page uses. */
.tv-cart-controls { display: flex; align-items: center; gap: 10px; margin-top: 9px; }

/* Per-line stepper. The PDP pill at drawer scale — same border, radius and
   glass ground, sized down to clear a 60px row. */
.tv-cart-qty {
  display: inline-flex; align-items: center;
  height: 30px;
  border: 1px solid var(--tv-hair-2);
  border-radius: var(--tv-r-pill);
  background: var(--tv-glass);
  overflow: hidden;
}
.tv-cart-qty button { width: 28px; height: 100%; font-size: 15px; line-height: 1; color: var(--tv-ink-2); }
.tv-cart-qty button:hover:not(:disabled) { background: var(--tv-paper-deep); color: var(--tv-ink); }
.tv-cart-qty button:disabled { opacity: .3; cursor: default; }
.tv-cart-qty-input {
  width: 36px; min-width: 36px; height: 100%; padding: 0;
  text-align: center; background: transparent; border: 0; outline: 0;
  font-family: var(--tv-font-display); font-weight: 700; font-size: 13px;
  color: var(--tv-ink); -moz-appearance: textfield; appearance: textfield;
}
.tv-cart-qty-input:focus { background: var(--tv-paper-deep); }
.tv-cart-qty-input::-webkit-outer-spin-button,
.tv-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-cart-qty-static { font-size: 12px; color: var(--tv-ink-3); }

.tv-cart-item-end { display: flex; justify-content: flex-end; }

/* Icon-only, so the tap target is the button rather than the 15px glyph.
   Deliberately the same 26px ring the cart page puts on its own remove link,
   including the red hover: one destructive-action look across both surfaces. */
.tv-cart-remove {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--tv-hair-2);
  border-radius: var(--tv-r-pill);
  color: var(--tv-ink-3);
  transition: background-color var(--tv-dur-fast), color var(--tv-dur-fast), border-color var(--tv-dur-fast);
}
.tv-cart-remove:hover { background: var(--tv-signal-err); color: #fff; border-color: transparent; }

/* Set while a change is in flight, so the row cannot be double-submitted. */
.tv-cart-item.is-busy { opacity: .5; pointer-events: none; }
.tv-cart-panel-foot {
  border-top: 1px solid var(--tv-hair);
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.tv-cart-panel-foot .tv-btn { width: 100%; }
.tv-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--tv-ink-2); }
.tv-cart-subtotal strong { font-family: var(--tv-font-display); font-size: 18px; color: var(--tv-ink); }
.tv-cart-empty { padding: 40px 0; text-align: center; color: var(--tv-ink-3); font-size: 14px; }

/* Free-shipping progress meter. */
.tv-shipbar { font-size: 12.5px; color: var(--tv-ink-3); }
.tv-shipbar-track { height: 5px; border-radius: var(--tv-r-pill); background: var(--tv-paper-warm); margin-top: 7px; overflow: hidden; }
.tv-shipbar-fill { height: 100%; border-radius: var(--tv-r-pill); background: var(--brand); transition: width var(--tv-dur-slow) var(--tv-ease); }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.tv-ftr {
  border-top: 1px solid var(--tv-hair);
  /* Resolves to the Kiosk near-black on a Daylight page: tokens.css scopes the
     Kiosk block to .tv-ftr there, so this one line changes the whole ground. */
  background: var(--tv-paper);
  color: var(--tv-ink);
  padding: var(--tv-s-16) 0 var(--tv-s-8);
}
/* On a Kiosk page the footer would be the same near-black as the page above
   it and disappear. Lift it one step instead of flipping it white. */
[data-theme="dark"] .tv-ftr { background: var(--tv-paper-deep); }

.tv-ftr-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--tv-s-10);
}
@media (max-width: 900px) { .tv-ftr-grid { grid-template-columns: 1fr 1fr; gap: var(--tv-s-8); } }
@media (max-width: 560px) { .tv-ftr-grid { grid-template-columns: 1fr; } }

.tv-ftr h4 {
  font-family: var(--tv-font-mono); font-size: 11px;
  letter-spacing: var(--tv-tr-mono); text-transform: uppercase;
  color: var(--tv-ink-3); font-weight: 400;
  margin-bottom: var(--tv-s-4);
}
.tv-ftr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tv-ftr-col li { margin: 0; }
.tv-ftr-col a { font-size: 14px; color: var(--tv-ink-2); font-weight: 500; }
.tv-ftr-col a:hover { color: var(--tv-ink); }

.tv-ftr-brand p { font-size: 13.5px; color: var(--tv-ink-3); max-width: 34ch; line-height: 1.6; margin: 14px 0 16px; }

/* Newsletter sign-up. */
.tv-subscribe { margin-top: 18px; }
.tv-subscribe-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
/* base.css resets every img to `height: auto`, which lets the SVG fall back to
   its own 512px intrinsic size here; the height is pinned on this selector too
   so the icon can never outgrow the two lines of copy beside it. */
.tv-subscribe-banner .tv-logo-mark { flex: 0 0 auto; height: 30px; }
.tv-subscribe-h { font-family: var(--tv-font-display); font-weight: 700; font-size: 15px; color: var(--tv-ink); }
.tv-subscribe-sub { font-size: 12px; color: var(--tv-ink-3); margin-top: 2px; }
.tv-subscribe-form { display: flex; gap: 8px; }
.tv-subscribe-form input {
  flex: 1; min-width: 0; height: 44px;
  border-radius: var(--tv-r-pill);
  border: 1px solid var(--tv-hair-2);
  background: var(--tv-paper);
  padding-inline: 16px;
  font: 500 14px var(--tv-font-body);
  color: var(--tv-ink);
}
.tv-subscribe-form button {
  height: 44px; padding-inline: 18px;
  border-radius: var(--tv-r-pill);
  background: var(--brand); color: #fff;
  font-family: var(--tv-font-display); font-weight: 700; font-size: 14px;
}
.tv-subscribe-echo { font-size: 12.5px; margin-top: 8px; }
.tv-subscribe-echo--ok  { color: var(--tv-signal-ok); }
.tv-subscribe-echo--err { color: var(--tv-signal-err); }

/* Legal / nicotine warning. */
.tv-ftr-warnwrap { margin-top: var(--tv-s-10); padding-top: var(--tv-s-6); border-top: 1px solid var(--tv-hair); }
.tv-footer-warning {
  font-family: var(--tv-font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--tv-ink-2);
  border: 1px solid var(--tv-hair-2);
  border-radius: var(--tv-r-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.tv-footer-legal { font-size: 11.5px; color: var(--tv-ink-4); line-height: 1.6; margin-bottom: 8px; max-width: 90ch; }
.tv-ftr-bottom {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: var(--tv-s-12); padding-top: var(--tv-s-6);
  border-top: 1px solid var(--tv-hair);
  font-size: 12px; color: var(--tv-ink-4);
}
.tv-ftr-social { display: flex; gap: 10px; margin-left: auto; }
.tv-ftr-social a { color: var(--tv-ink-3); }
.tv-ftr-social a:hover { color: var(--tv-ink); }

/* ── AGE GATE ──────────────────────────────────────────────────────────── */
.tv-agegate-scrim {
  position: fixed; inset: 0;
  z-index: var(--tv-z-modal);
  background: rgba(11, 11, 13, .62);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tv-agegate {
  width: 100%; max-width: 380px;
  border-radius: var(--tv-r-lg);
  background: var(--tv-paper);
  border: 1px solid var(--tv-glass-edge);
  box-shadow: var(--tv-elev-3);
  padding: 34px 30px;
  text-align: center;
}
.tv-agegate-badge {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: var(--tv-r-md);
  background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tv-font-display); font-weight: 800; font-size: 20px;
}
.tv-agegate h2 { font-size: var(--tv-fs-h3); font-weight: 800; margin-bottom: 8px; }
.tv-agegate p { font-size: 13.5px; color: var(--tv-ink-3); line-height: 1.55; margin-bottom: 20px; }
.tv-agegate-actions { display: flex; flex-direction: column; gap: 10px; }
.tv-agegate-actions .tv-btn { width: 100%; }
.tv-agegate-deny { font-size: 13px; color: var(--tv-ink-3); text-decoration: underline; }
.tv-agegate-warn {
  font-family: var(--tv-font-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--tv-ink-4); margin-top: 18px; line-height: 1.5;
}
/* Set by the inline head script before paint, so the page never flashes. */
html.tv-agegate-locked body { overflow: hidden; }

/* ── BACK TO TOP ───────────────────────────────────────────────────────── */
.tv-totop {
  position: fixed; right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tv-ink); color: var(--tv-paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--tv-elev-2);
  z-index: var(--tv-z-sticky);
  opacity: 0; pointer-events: none;
  transition: opacity var(--tv-dur-base), transform var(--tv-dur-base);
}
.tv-totop.is-shown { opacity: 1; pointer-events: auto; }
.tv-totop:hover { transform: translateY(-2px); color: var(--tv-paper); }

/* ── REWARDS LAUNCHER — floating button plus a two-tab rule panel ──────── */
/* Steps in for WPLoyalty's Launcher add-on, which is a paid tier. Bottom
   LEFT, so it shares no corner with the to-top button above. */
.tv-rewards {
  position: fixed; left: 22px; bottom: 22px;
  z-index: var(--tv-z-sticky);
}

.tv-rewards-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 10px;
  border: 0; border-radius: var(--tv-r-pill);
  /* Darkening towards one corner stops the pill reading as a flat sticker,
     and the same colour does duty as the glow underneath it. */
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 74%, #000));
  color: var(--tv-on-accent);
  font-family: var(--tv-font-display); font-weight: 700;
  font-size: var(--tv-fs-small); letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--brand) 80%, transparent), var(--tv-elev-1);
  transition: transform var(--tv-dur-base) var(--tv-ease), box-shadow var(--tv-dur-base) var(--tv-ease);
}
.tv-rewards-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -14px color-mix(in srgb, var(--brand) 85%, transparent), var(--tv-elev-2);
}
.tv-rewards-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.tv-rewards-btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

/* Revealed with visibility rather than display: the fade can animate, and a
   hidden panel leaves the tab order on its own — which aria-hidden on a
   merely transparent panel would get wrong. The origin sits down on the
   button, so the panel reads as growing out of it rather than fading in. */
.tv-rewards-panel {
  position: absolute; left: 0; bottom: calc(100% + 14px);
  width: min(352px, calc(100vw - 40px));
  padding: var(--tv-s-5);
  border: 1px solid var(--tv-hair); border-radius: var(--tv-r-xl);
  background: var(--tv-paper); color: var(--tv-ink);
  box-shadow: var(--tv-elev-3);
  visibility: hidden; opacity: 0;
  transform: translateY(10px) scale(.97);
  transform-origin: 26px calc(100% + 14px);
  transition: opacity var(--tv-dur-base) var(--tv-ease),
              transform var(--tv-dur-base) var(--tv-ease-out),
              visibility var(--tv-dur-base);
}
.tv-rewards.is-open .tv-rewards-panel { visibility: visible; opacity: 1; transform: none; }

/* The tail: a rotated square of the panel's own surface, carrying the two
   hairlines that face outwards. It covers the panel's bottom border where it
   meets it, which is what makes the seam disappear. */
.tv-rewards-panel::after {
  content: ""; position: absolute; left: 24px; bottom: -5px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--tv-paper);
  border-right: 1px solid var(--tv-hair); border-bottom: 1px solid var(--tv-hair);
}

.tv-rewards-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-left: 14px; margin-bottom: var(--tv-s-3);
}
/* The panel's single vivid note: a short brand rule beside the title. */
.tv-rewards-head::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 19px; margin-top: -9.5px;
  border-radius: 2px; background: var(--brand);
}
.tv-rewards-title { margin: 0; font-family: var(--tv-font-display); font-size: var(--tv-fs-h4); font-weight: 800; letter-spacing: -.01em; }
.tv-rewards-close {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tv-hair); border-radius: 50%;
  background: var(--tv-paper); color: var(--tv-ink-3); cursor: pointer;
  transition: color var(--tv-dur-base) var(--tv-ease),
              border-color var(--tv-dur-base) var(--tv-ease),
              background var(--tv-dur-base) var(--tv-ease);
}
.tv-rewards-close:hover { color: var(--tv-ink); border-color: var(--tv-hair-2); background: var(--tv-paper-deep); }

/* Segmented control: two tabs in a recessed track. State lives on
   aria-selected, so the script never has to move a class around. */
.tv-rewards-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: var(--tv-s-3);
  border-radius: var(--tv-r-pill); background: var(--tv-paper-deep);
}
.tv-rewards-tabs [role="tab"] {
  flex: 1; padding: 8px 10px;
  border: 0; border-radius: var(--tv-r-pill); background: none;
  color: var(--tv-ink-2);
  font-family: inherit; font-size: var(--tv-fs-small); font-weight: 700;
  cursor: pointer;
  transition: color var(--tv-dur-base) var(--tv-ease),
              background var(--tv-dur-base) var(--tv-ease),
              box-shadow var(--tv-dur-base) var(--tv-ease);
}
.tv-rewards-tabs [role="tab"]:hover { color: var(--tv-ink); }
.tv-rewards-tabs [role="tab"][aria-selected="true"] {
  background: var(--tv-paper); color: var(--tv-ink);
  box-shadow: var(--tv-elev-1);
}
.tv-rewards-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.tv-rewards-list { margin: 0; padding: 0; list-style: none; }
.tv-rewards-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--tv-hair);
  font-size: var(--tv-fs-small); color: var(--tv-ink-2);
}
.tv-rewards-list li:last-child { border-bottom: 0; }
/* A dot, not a glyph: these rows are rates, not a checklist. */
.tv-rewards-list li > span { display: flex; align-items: center; gap: 9px; }
.tv-rewards-list li > span::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); opacity: .45;
}
/* The value is set as a chip so it lands before the wording beside it. */
.tv-rewards-list b {
  flex: 0 0 auto; padding: 3px 10px;
  border-radius: var(--tv-r-pill);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

.tv-rewards-cta { width: 100%; justify-content: center; height: 46px; margin-top: var(--tv-s-4); }

@media (max-width: 520px) {
  /* The label stays — it is what makes the button findable — but the widget
     tucks closer to the corner where it has less content to cover. */
  .tv-rewards { left: 16px; bottom: 16px; }
  .tv-rewards-btn { padding: 0 17px 0 10px; }
  .tv-rewards-panel { padding: var(--tv-s-4); border-radius: var(--tv-r-lg); }
  .tv-rewards-cta { height: 44px; }
}

/* ── MEGA PANEL — headed columns plus a promo card ─────────────────────── */
/* Used when a dropdown item has children of its own. The column flow and the
   card sit side by side; the flow itself is CSS multi-column so two short
   groups stack in one column instead of each claiming a whole one. */
.tv-nav-dropdown--panel {
  display: flex;
  align-items: stretch;
  gap: var(--tv-s-6);
  padding: var(--tv-s-6);
  /* Real labels run to 28 characters ("5% Nicotine Disposable Vapes"), and a
     brand row carries an in-stock badge on the same line. A fixed column count
     sized to shorter test labels wrapped all of them, so the columns are set
     by WIDTH instead: as many as fit at 248px each, up to three. Narrow
     viewports drop to two and then one without a media query. */
  min-width: 0;
  width: max-content;
  max-width: min(94vw, 1128px);
}
.tv-nav-colset {
  flex: 1 1 auto;
  min-width: 0;
  columns: 240px 3;
  column-gap: var(--tv-s-6);
  /* The rule between columns is the divider in the reference design. */
  column-rule: 1px solid var(--tv-hair);
}
.tv-nav-promo { flex: 0 0 236px; display: flex; }

.tv-nav-group {
  /* Without this a group can be split across two columns, orphaning its
     heading at the bottom of one. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  margin-bottom: var(--tv-s-6);
}
.tv-nav-group:last-child { margin-bottom: 0; }

.tv-nav-grouphead {
  display: block;
  padding: 0 0 9px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--tv-hair);
  font-family: var(--tv-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tv-ink-3);
}
.tv-nav-grouplist { list-style: none; margin: 0; padding: 0; }
.tv-nav-grouplist li { margin: 0; }

/* Promo card — the brand ground, so it reads as an offer rather than a link.
   Selector is deliberately three classes deep: the card is an <a> inside the
   nav, so `.tv-nav a` (white-space:nowrap) and `.tv-nav-dropdown a`
   (padding, justify-content) both outrank a single class and were winning.
   The nowrap in particular made the card's min-content the full width of its
   sentence, which silently overrode `flex-basis` and blew the panel wide. */
.tv-nav-dropdown .tv-nav-promo > .tv-nav-promo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: var(--tv-s-5);
  border-radius: var(--tv-r-md);
  background: linear-gradient(165deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 62%, #000) 100%);
  color: #fff;
  white-space: normal;
}
.tv-nav-dropdown .tv-nav-promo > .tv-nav-promo-card:hover { color: #fff; }

/* Column links may wrap rather than force the column wider. */
.tv-nav-colset a { white-space: normal; }
.tv-nav-promo-h {
  font-family: var(--tv-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tv-nav-promo-p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.tv-nav-promo-btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 42px;
  border-radius: var(--tv-r-pill);
  background: #fff;
  color: var(--brand);
  font-family: var(--tv-font-display);
  font-weight: 700; font-size: 14px;
  transition: transform var(--tv-dur-fast) var(--tv-ease);
}
.tv-nav-promo-card:hover .tv-nav-promo-btn { transform: translateY(-1px); }

@media (max-width: 1100px) {
  .tv-nav-dropdown--panel { min-width: 0; width: min(92vw, 720px); flex-wrap: wrap; }
  .tv-nav-colset { columns: 2; flex: 1 1 100%; }
  .tv-nav-promo { flex: 1 1 100%; }
}

/* The drawer's promo card. Same card classes as the panel, so one set of
   visual rules covers both; only the selector has to reach it here, since the
   drawer sits outside .tv-nav and none of those link rules apply. */
.tv-mobile-list > li.tv-mobile-promo { margin-top: var(--tv-s-4); }
.tv-mobile-list .tv-nav-promo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: var(--tv-s-5);
  border-radius: var(--tv-r-md);
  background: linear-gradient(165deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 62%, #000) 100%);
  color: #fff;
  white-space: normal;
}
.tv-mobile-list .tv-nav-promo-btn { width: 100%; }