/* ================================================================
   GLOBAL BASE STYLES
   Reset + foundational styles using tokens from style.css
   ================================================================ */

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

/* Visually hidden but still reachable by screen readers/SEO — for headings
   like a page's own H1 that the design intentionally doesn't show. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Lenis (assets/js/lenis-init.js) now owns scroll smoothing — native
     scroll-behavior:smooth fights it (two competing scroll animations
     on the same axis) so it's deliberately not set here. */
  overflow-x: hidden;
  /* overflow-x:hidden alone stops the page from being SCROLLED into
     that extra space, but doesn't stop the browser's own layout
     viewport (window.innerWidth) from ballooning past the real device
     width in the first place — confirmed live: on pages with more than
     one off-screen translateX(±100%) overlay/duplicate-content rail
     (product pages have both the trust-strip and related-products
     marquees on top of the sitewide mini-cart/search/scan drawers),
     window.innerWidth measured ~32px wider than the true viewport,
     which every position:fixed; inset:0 element (nav, utility bar, the
     drawers themselves) then inherited as ITS width too — the actual
     "cut off on the right, empty space to scroll into" bug. A hard
     max-width caps the box itself regardless of what any descendant's
     layout tries to claim. */
  max-width: 100vw;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-slow), color var(--t-slow);
  /* Safety net: several fixed-position overlays (mini-cart panel, search
     modal, mobile filter drawer) sit off-screen via translateX(±100%)
     while closed. Without this, the browser still counts that translated-
     away box as part of the page's scrollable area — since transforms
     don't shrink layout/paint bounds — producing exactly the "extra
     whitespace on the right + page scrolls sideways" symptom, sitewide,
     because the mini-cart is present on every page. */
  overflow-x: hidden;
  max-width: 100vw;
}

/* Plain running body copy (product/page descriptions via wpautop(),
   WooCommerce reviews and comment content, form help text) gets
   Poppins instead of the sitewide Montserrat — everything else
   (headings, buttons, nav, labels, badges) keeps var(--font) exactly
   as it already does, since none of those are <p> tags. */
p {
  font-family: var(--font-body);
}

/* Offset content below fixed utility bar + nav */
body {
  padding-top: calc(var(--utility-bar-h) + var(--nav-h));
}

/* ================================================================
   UTILITY BAR — thin trust strip pinned above the nav, sitewide.
   Always solid (never transparent, unlike the nav on the homepage) —
   it's meant to just always be legible. Sits above .site-nav AND
   .mobile-brand-bar; both get pushed down by --utility-bar-h below.
   ================================================================ */

.utility-bar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  max-width: 100vw;
  height: var(--utility-bar-h);
  background: var(--color-navy-dark);
  z-index: calc(var(--z-fixed) + 1);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Two identical .utility-bar__row copies side by side, nudged along by
   JS (main.js) rather than a CSS % keyframe — a translateX(-50%)
   keyframe assumes the track's two halves are pixel-identical widths,
   which a webfont swap (FOUT) after first paint could quietly throw
   off by a px or two, showing up as a visible gap partway through the
   loop. JS instead measures the real rendered scrollWidth/2 at runtime
   and wraps against that — same "duplicate + modulo" technique as the
   homepage's brand rail and the product page's trust strip, which
   don't have this failure mode. */
.utility-bar__track {
  display: flex;
  align-items: center;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.utility-bar__track::-webkit-scrollbar { display: none; }

.utility-bar__row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-inline: var(--sp-6);
  white-space: nowrap;
  flex-shrink: 0;
}

.utility-bar__item {
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}

.utility-bar__phone {
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
}

@media (prefers-reduced-motion: reduce) {
  .utility-bar__track {
    overflow-x: auto;
  }

  .utility-bar__row[aria-hidden="true"] {
    display: none;
  }
}

body.admin-bar .utility-bar {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .utility-bar {
    top: 46px;
  }
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* ----------------------------------------------------------------
   Layout helpers
   ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ================================================================
   NAV
   ================================================================ */

.site-nav {
  position: fixed;
  top: var(--utility-bar-h);
  inset-inline: 0;
  max-width: 100vw;
  height: var(--nav-h);
  background: var(--color-navy);
  display: flex;
  align-items: center;
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  /* Enables smooth transparent→opaque crossfade on homepage */
  transition: background 0.45s ease, box-shadow 0.45s ease,
              backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}

/* Hairline accent along the bottom edge */
.site-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(38, 85, 194, 0.45);
}

/* Sit below the WordPress admin toolbar instead of being clipped by it (logged-in staff only) */
body.admin-bar .site-nav {
  top: calc(32px + var(--utility-bar-h));
}

@media (max-width: 782px) {
  body.admin-bar .site-nav {
    top: calc(46px + var(--utility-bar-h));
  }
}

/* ----------------------------------------------------------------
   Desktop: float the nav as the same glass pill used for the
   mobile bottom bar, instead of a full-width flat bar — one
   consistent shape language at both breakpoints.
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
  .site-nav {
    top: calc(var(--utility-bar-h) + var(--sp-4));
    inset-inline: var(--sp-6);
    max-width: calc(var(--container-max) + var(--sp-16));
    margin-inline: auto;
    border-radius: var(--r-full);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* The pill's own border/shadow define its edge — the full-width hairline doesn't suit a capsule */
  .site-nav::after {
    display: none;
  }

  .site-nav .container {
    padding-inline: var(--sp-8);
  }

  body.admin-bar .site-nav {
    top: calc(32px + var(--utility-bar-h) + var(--sp-3));
  }

  body {
    padding-top: calc(var(--utility-bar-h) + var(--nav-h) + var(--sp-4) * 2);
  }

  body.home {
    padding-top: var(--utility-bar-h);
  }
}

.site-nav .container {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  position: relative;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Straight divider between the logo and the page links — only makes
   sense once there's something to its right, so it rides along with
   .nav-links on mobile (display:none below 768px). */
.nav-divider {
  display: none;
  flex-shrink: 0;
  width: 1px;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 768px) {
  .nav-divider { display: block; }
}

.nav-logo__link {
  display: flex;
  align-items: center;
  transition: transform var(--t-spring), filter var(--t-base);
}

.nav-logo__link:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(38, 85, 194, 0.45));
}

/* Nav is always navy, so this is always the white-wordmark variant of the logo */
.nav-logo__img {
  max-height: calc(var(--nav-h) * 0.62);
  width: auto;
  object-fit: contain;
}

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--sp-8);
}

/* wp_nav_menu still wraps each item in <li> even with no <ul> around them
   (items_wrap only strips the outer wrapper) — without this they show the
   browser's default list bullet since there's no ancestor <ul> for our
   global "ul,ol{list-style:none}" reset to reach. */
.nav-links li {
  list-style: none;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-links a {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* A two-word item ("About Us") wrapping onto its own second line —
     while every one-word neighbor stays put — reads as broken, not
     responsive. Never allowed, at any width; the tightened size/gap
     below is what actually keeps the row fitting instead. */
  white-space: nowrap;
  transition: color var(--t-fast), transform var(--t-spring), text-shadow var(--t-base);
  position: relative;
}

/* Between "links first appear" and "comfortably wide desktop", the
   pill nav is at its most cramped — logo + divider + links + every
   icon all competing for one row with nothing giving way. This is
   also this theme's own kiosk target (a big-phone-format in-store
   touchscreen runs this desktop layout, not the mobile bottom bar,
   right around this width) — shrinking the links themselves (not
   just hoping nowrap alone is enough), and trimming the pill's own
   padding/gaps, is what keeps the whole row inside the pill instead
   of the action icons spilling past its right edge. */
@media (min-width: 768px) and (max-width: 1100px) {
  .site-nav .container { padding-inline: var(--sp-4); gap: var(--sp-4); }
  .nav-links { gap: var(--sp-4); }
  .nav-links a { font-size: var(--text-xs); letter-spacing: 0.02em; }
  .nav-actions { gap: var(--sp-2); }
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-blue);
  transition: width var(--t-base);
  border-radius: var(--r-full);
  box-shadow: 0 0 8px rgba(38, 85, 194, 0.7);
}

.nav-links a:hover,
.nav-links a.current-menu-item {
  color: var(--color-white);
  transform: translateY(-1px);
  text-shadow: 0 0 16px rgba(38, 85, 194, 0.35);
}

.nav-links a:hover::after,
.nav-links a.current-menu-item::after {
  width: 100%;
}

/* Instant press feedback — respond on the tap itself, not just on hover */
.nav-links a:active {
  color: var(--color-blue-light);
  transition: color var(--t-press);
}

/* ----------------------------------------------------------------
   Dropdown sub-menus (e.g. "Brands" → Casio, Citizen, Tissot…)
   WordPress nests these as <ul class="sub-menu"> inside the <li>;
   without this they render as an inline wall of links. First level
   opens below the parent; anything nested inside a sub-menu flies
   out to the side instead of stacking, so deeper category trees
   stay contained instead of growing forever downward.
   ---------------------------------------------------------------- */

.nav-links li {
  position: relative;
}

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--sp-3));
  min-width: 210px;
  padding: var(--sp-2);
  margin-top: var(--sp-2);
  background: var(--color-navy-dark);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(38, 85, 194, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: var(--z-dropdown);
}

/* Invisible bridge over the gap above the panel so the hover chain
   (li → sub-menu) doesn't break while the cursor crosses it */
.nav-links .sub-menu::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--sp-2));
  left: 0;
  right: 0;
  height: var(--sp-2);
}

/* A sub-menu nested inside a sub-menu flies out to the right rather
   than stacking below — keeps multi-level brand trees compact */
.nav-links .sub-menu .sub-menu {
  top: calc(-1 * var(--sp-2));
  left: 100%;
  margin-top: 0;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links .sub-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-base);
}

/* No underline sweep inside dropdown panels — the row highlight is enough */
.nav-links .sub-menu a::after {
  content: none;
}

.nav-links .sub-menu a:hover {
  background: rgba(38, 85, 194, 0.16);
  color: var(--color-white);
  padding-left: calc(var(--sp-3) + 4px);
  transform: none;
  text-shadow: none;
}

/* Nav action icons (search, cart, scan, theme toggle) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}

.nav-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(255,255,255,0.80);
  border-radius: var(--r-full);
  transition: color var(--t-fast), background var(--t-fast),
              transform var(--t-spring), box-shadow var(--t-base);
}

.nav-action-btn:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--shadow-glow-sm);
}

.nav-action-btn:active {
  transform: translateY(0) scale(0.94);
}

.nav-action-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-base);
}

.nav-action-btn:hover svg {
  transform: scale(1.08);
}

/* Cart count badge — populated via JS; opacity/scale so it can pop in instead of hard-toggling display */
.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 3px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 1rem;
  text-align: center;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--color-navy);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-fast), transform var(--t-spring);
  pointer-events: none;
}

.cart-count.visible {
  opacity: 1;
  transform: scale(1);
}

/* No top bar on phones — the bottom tab bar is the entire mobile nav */
@media (max-width: 767px) {
  .site-nav {
    display: none;
  }

  body {
    padding-top: calc(var(--utility-bar-h) + var(--mobile-brand-bar-h));
  }
}

/* Logo-only strip that replaces the full top bar on phones. Stays
   fixed in place at all times — never hides on scroll — since the
   search icon lives here and needs to stay reachable throughout. */
.mobile-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: var(--utility-bar-h);
  inset-inline: 0;
  max-width: 100vw;
  height: var(--mobile-brand-bar-h);
  background: var(--color-navy);
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-sm);
}

/* Each side's icon pair sits at its edge via absolute positioning
   rather than as normal flex siblings — with `justify-content: center`
   above, a flex child would just group up next to the logo instead of
   staying pinned to the edge, and the logo needs to stay visually
   centered regardless of either side's content. Centered via
   top:50%/margin-top (not transform:translateY(-50%)) because the
   group itself doesn't need a hover transform, but its children
   (.nav-action-btn) do — keeping the group's own vertical centering
   off `transform` means it never fights a child's hover transform. */
.mobile-brand-bar__side {
  position: absolute;
  top: 50%;
  margin-top: -1.25rem;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.mobile-brand-bar__side--left {
  left: var(--sp-2);
}

.mobile-brand-bar__side--right {
  right: var(--sp-2);
}

.mobile-brand-bar .nav-logo .nav-logo__img {
  max-height: 2.25rem;
}

body.admin-bar .mobile-brand-bar {
  top: calc(46px + var(--utility-bar-h)); /* WP's mobile admin-bar height */
}

@media (min-width: 768px) {
  .mobile-brand-bar {
    display: none;
  }
}

/* ----------------------------------------------------------------
   Search modal — opened from the desktop header icon and the
   mobile bottom bar's Search tab. Same visual language as the
   barcode entry modal (barcode-scanner.css) for consistency.
   ---------------------------------------------------------------- */
/* Stays in the DOM at all times — display:none can't be transitioned, and
   an app-style modal should materialize (fade + scale in) rather than
   snap into view. visibility + pointer-events keep it fully inert and
   out of the tab order while closed. */
.toman-search-modal {
  display: flex;
  position: fixed;
  inset: 0;
  max-width: 100vw;
  z-index: var(--z-modal);
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(var(--sp-16), 20vh, 30vh);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.toman-search-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.toman-search-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.toman-search-box {
  position: relative;
  width: 90%;
  max-width: 520px;
  transform: scale(0.94) translateY(8px);
  transition: transform var(--t-base);
}

.toman-search-modal.is-open .toman-search-box {
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toman-search-box { transition: opacity var(--t-fast); transform: none; }
}

.toman-search-close {
  position: absolute;
  top: calc(-1 * var(--sp-8));
  right: 0;
  background: none;
  border: none;
  font-size: var(--text-2xl);
  color: var(--color-white);
  cursor: pointer;
  line-height: 1;
}

.toman-search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-surface);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  box-shadow: var(--shadow-lg);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t-fast);
}

/* .toman-search-form__input itself has outline:none (below) since a
   default browser outline on a borderless field inside this pill
   looks broken — this ring on the pill wrapper is the real focus
   indicator, so keyboard users still get a clear "this is focused"
   signal instead of losing it entirely. */
.toman-search-form:focus-within {
  outline-color: var(--color-blue);
}

.toman-search-form__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  stroke: var(--color-text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.toman-search-form__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--color-text);
}

.toman-search-form__input::placeholder {
  color: var(--color-text-muted);
}

.toman-search-form__submit {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-blue);
  color: var(--color-white);
  border: none;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--t-fast);
}

.toman-search-form__submit:hover {
  background: var(--color-blue-dark);
}

.toman-search-form__submit:active {
  transform: scale(0.95);
  transition: transform var(--t-press), background var(--t-fast);
}

/* ── Live search results ─────────────────────────────────────── */

.toman-search-results {
  margin-top: var(--sp-2);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
}

.toman-search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}

.toman-search-result:hover { background: var(--color-bg); }

.toman-search-result__img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  /* White, not gray — see product-card.css's __img-wrap. */
  background: var(--color-white);
  overflow: hidden;
}

.toman-search-result__img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

.toman-search-result__info { min-width: 0; flex: 1; }

.toman-search-result__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toman-search-result__price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.toman-search-results__viewall {
  display: block;
  text-align: center;
  padding: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--color-blue);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-1);
}

.toman-search-results__empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ================================================================
   MOBILE BOTTOM TAB BAR
   Floating pill nav — where most customers actually shop from.
   Desktop keeps the header above; this stays out of the way there.
   ================================================================ */

.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  max-width: 26rem;
  margin-inline: auto;
  height: 3.75rem;
  padding-inline: var(--sp-2);
  background: rgba(11, 25, 41, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-full);
  box-shadow: 0 12px 32px rgba(7, 25, 41, 0.45), 0 2px 8px rgba(7, 25, 41, 0.3);
  z-index: var(--z-fixed);
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  color: rgba(255, 255, 255, 0.55);
  border-radius: var(--r-lg);
  position: relative;
  transition: color var(--t-fast), transform var(--t-spring);
}

.tab-bar__item svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-spring);
}

.tab-bar__item span:last-child {
  font-size: 0.625rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
}

.tab-bar__item:hover {
  color: var(--color-white);
  transform: translateY(-2px);
}

.tab-bar__item:hover svg {
  transform: scale(1.1);
}

/* Press reads as a press-in, not a hover-lift — instant, no spring delay */
.tab-bar__item:active {
  color: var(--color-white);
  transform: scale(0.90);
  transition: transform var(--t-press), color var(--t-fast);
}

.tab-bar__item.is-active {
  color: var(--color-blue);
}

.tab-bar__item.is-active svg {
  filter: drop-shadow(0 0 8px rgba(38, 85, 194, 0.6));
}

/* Small active-tab dot, echoes the underline sweep used in the header nav */
.tab-bar__item.is-active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--color-blue);
  box-shadow: 0 0 6px rgba(38, 85, 194, 0.8);
}

/* Cart badge inside the stacked icon/label layout */
.tab-bar__item--cart {
  position: relative;
}

.tab-bar__item--cart .cart-count {
  position: absolute;
  top: 2px;
  left: 50%;
  right: auto;
  transform: translateX(6px) scale(0.4);
  min-width: 1rem;
  height: 1rem;
  padding-inline: 3px;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 1rem;
  text-align: center;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--color-navy-dark);
  opacity: 0;
  transition: opacity var(--t-fast), transform var(--t-spring);
  pointer-events: none;
}

.tab-bar__item--cart .cart-count.visible {
  opacity: 1;
  transform: translateX(6px) scale(1);
}

/* Center scanner button — raised above the pill, the signature feature */
.tab-bar__scan {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  margin-top: -1.5rem;
  background: var(--color-blue);
  border: 3px solid var(--color-navy-dark);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-glow-md), 0 6px 16px rgba(7, 25, 41, 0.5);
  transition: transform var(--t-spring), box-shadow var(--t-base);
}

.tab-bar__scan svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: var(--color-white);
}

.tab-bar__scan:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: var(--shadow-glow-md), 0 10px 22px rgba(7, 25, 41, 0.55);
}

.tab-bar__scan:active {
  transform: scale(0.94);
  transition: transform var(--t-press);
}

/* Bottom bar is mobile-only — the header nav covers desktop */
@media (min-width: 768px) {
  .tab-bar { display: none; }
}

/* Keep floating bar from covering footer content/buttons on phones */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(3.75rem + var(--sp-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* Product pages swap the tab bar for a single sticky "Add to Cart" bar
   (product-single.css) — two stacked bottom bars would be clutter, and
   the one CTA that matters on this screen deserves the full width. */
@media (max-width: 899px) {
  body.single-product .tab-bar {
    display: none;
  }
}

/* ================================================================
   COMPARE BAR — sitewide floating pill (compare.js), only visible
   once at least one product is selected. Sits above the mobile tab
   bar/product page's own sticky Add-to-Cart bar (same bottom offset
   either way — close enough in height that a shared value doesn't
   visibly collide with either), and just a simple corner offset on
   desktop where neither of those exist.
   ================================================================ */
.compare-bar {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(3.75rem + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  background: rgba(11, 25, 41, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + var(--sp-6)));
  transition: transform var(--t-base), opacity var(--t-base), visibility 0s linear var(--t-base);
}

.compare-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--t-base), opacity var(--t-base), visibility 0s;
}

.compare-bar__count {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-white);
}

.compare-bar__cta {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-5);
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  transition: background var(--t-fast);
}

.compare-bar__cta:hover { background: var(--color-blue-dark); }

.compare-bar__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25rem;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}

.compare-bar__clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .compare-bar {
    left: auto;
    right: var(--sp-6);
    bottom: var(--sp-6);
    margin-inline: 0;
  }
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */

.site-main {
  min-height: calc(100vh - var(--utility-bar-h) - var(--nav-h));
}

/* ================================================================
   FOOTER
   Rebuilt after a reference the user shared: an arched newsletter
   banner → a contact/visit/hours strip → a divider → a four-column
   link grid → a plain bottom bar. Flat navy/blue throughout — no
   gradients, same rule as everywhere else on this site.
   ================================================================ */

.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.62);
  margin-top: var(--sp-16);
  position: relative;
}

/* ── Hero band: CTA banner + Contact/Visit/Hours strip ─────────
   The arc SVG sits flush at the very top, one viewBox unit taller
   than it needs so its bottom edge (the deepest point of the dip)
   lines up exactly with the padding below it — the page's own
   background colour "dips" into the dark band instead of a hard
   edge. The photo behind both sections is barely there on purpose
   (a hint, not a backdrop) — .footer-hero__bg's low opacity over the
   flat navy-dark base is what keeps text contrast fine without a
   separate scrim layer. The circular mark is the brand's own
   clock-logo shape, equally faint, layered on top of the photo. */

.footer-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-dark);
}

.footer-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}

.footer-subscribe {
  position: relative;
  padding-block: clamp(var(--sp-10), 8vw, var(--sp-20)) clamp(var(--sp-10), 6vw, var(--sp-16));
}

.footer-subscribe__arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(28px, 5vw, 70px);
  display: block;
  z-index: 1;
}

.footer-subscribe__mark {
  position: absolute;
  top: clamp(-40px, -6vw, -10px);
  right: clamp(-30px, -4vw, 0px);
  width: clamp(140px, 20vw, 260px);
  height: clamp(140px, 20vw, 260px);
  color: rgba(255, 255, 255, 0.06);
}

.footer-subscribe__inner {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.footer-subscribe__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-display);
  color: var(--color-white);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}

.footer-subscribe__sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
}

.footer-subscribe__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-8);
  background: transparent;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  transition: transform var(--t-spring), background var(--t-fast);
}

.footer-subscribe__btn:hover { background: rgba(255, 255, 255, 0.1); }
.footer-subscribe__btn:active { transform: scale(0.96); transition: transform var(--t-press); }

/* ── Contact / Visit / Hours strip ────────────────────────────── */

.footer-info {
  /* Positioned (not static) so it paints above .footer-hero__bg —
     both are stacked by DOM order once positioned, and this comes
     after the bg image in the markup; left static it would paint
     UNDER the photo layer instead of over it. */
  position: relative;
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 700px) {
  .footer-info { padding-block: var(--sp-8); }
}

.footer-info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  text-align: center;
}

.footer-info__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.footer-info__col a,
.footer-info__col p {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.8);
}

.footer-info__col a { transition: color var(--t-fast); }
.footer-info__col a:hover { color: var(--color-white); }

.footer-info__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-blue-light);
  margin-bottom: var(--sp-1);
}

@media (min-width: 700px) {
  .footer-info__grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }

  .footer-info__col {
    padding-inline-start: var(--sp-8);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-info__col:first-child {
    padding-inline-start: 0;
    border-left: none;
  }
}

/* ── Link grid ────────────────────────────────────────────────── */

.footer-columns {
  padding-block: var(--sp-8);
}

@media (min-width: 700px) {
  .footer-columns { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)); }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-4);
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
}

/* Accepted Payments has 8 short badges — cramped into half a mobile
   row it wraps to 4+ rows and blows out the footer's height, so it
   spans the full row instead (badges then wrap to 2 tidy rows). */
@media (max-width: 699px) {
  .footer-col:last-child { grid-column: 1 / -1; }
}

/* Column label — dim, small, uppercase; the links below it are the
   bright element, not this. */
.footer-col__heading {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-col a,
.footer-col li {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast);
}

.footer-col a:hover { color: var(--color-white); }
.footer-col a:active { color: var(--color-blue-light); transition: color var(--t-press); }

/* ── Accepted-payment badges ──────────────────────────────────
   Real logo artwork the user supplied (background-removed, cropped
   tight) — each sits on its own small white card so every logo's
   original colors stay legible (several, like Apple Pay's, are pure
   black and would vanish on a dark chip). */

.footer-payments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.footer-payment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 40px;
  padding: var(--sp-1);
  background: var(--color-white);
  border-radius: var(--r-md);
}

.footer-payment img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Bottom bar ──────────────────────────────────────────────── */

.footer-bottom {
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* rgba(255,255,255,0.28) measured 2.47:1 against the navy footer bg —
   well under WCAG AA's 4.5:1 minimum, i.e. this text was close to
   unreadable for low-vision visitors. 0.55 clears 5.6:1 while still
   reading as clearly secondary/muted next to the brighter nav text
   elsewhere. Same fix applied to .footer-social-text and
   .footer-legal-links below, since all three shared this value. */
.footer-copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
}

.footer-copy a {
  color: inherit;
  transition: color var(--t-fast);
}

.footer-copy a:hover { color: var(--color-white); }

.footer-social-text {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
}

.footer-social-text a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--t-fast);
}

.footer-social-text a:hover { color: var(--color-white); }

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--text-xs);
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--t-fast);
}

.footer-legal-links a:hover { color: var(--color-white); }

.footer-legal-links a:hover { color: rgba(255, 255, 255, 0.65); }

/* ================================================================
   SCROLL-TRIGGERED FADE-UP — sitewide utility
   Any page can put [data-animate] (+ optional [data-animate-delay])
   on an element; main.js's IntersectionObserver adds .is-visible the
   first time it scrolls into view. Originally homepage-only, moved
   here so About Us and future pages get the same treatment.
   ================================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  /* The sitewide smooth-decel curve (no overshoot past 1 — see its
     definition in style.css) — entrances should settle, not spring. */
  transition:
    opacity  0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter    0.85s var(--ease-out);
  /* GPU-safe: only transform/opacity/filter, never top/left/width/height */
  will-change: transform, opacity;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Softer variant — small/inline elements (badges, single lines of text)
   where the full travel distance reads as jumpy rather than premium. */
[data-animate="fade"] {
  transform: translateY(12px);
  filter: blur(3px);
}

/* [data-animate="scale"] used to pop in with a scale transform; cards
   (brand cards, gender tiles, product cards) now just fade in upward
   like everything else — no special scale rule needed, they fall
   through to the plain [data-animate] treatment above. The attribute
   value is kept as "scale" in the markup only so a future variant can
   target it without touching every template again. */

/* Sideways variants — same recipe as the base rule (opacity + blur +
   transform only, same duration/easing, settles rather than
   springs), just travelling in from a side instead of from below.
   For laying out several entrances on one screen without repeating
   the same up-fade for every element. */
[data-animate="left"] {
  transform: translateX(-32px);
  filter: blur(4px);
}

[data-animate="right"] {
  transform: translateX(32px);
  filter: blur(4px);
}

/* Stagger delays from data-animate-delay attribute (value in ms, applied as s) */
[data-animate-delay="75"]  { transition-delay: 0.075s; }
[data-animate-delay="100"] { transition-delay: 0.10s; }
[data-animate-delay="150"] { transition-delay: 0.15s; }
[data-animate-delay="200"] { transition-delay: 0.20s; }
[data-animate-delay="225"] { transition-delay: 0.225s; }
[data-animate-delay="300"] { transition-delay: 0.30s; }
[data-animate-delay="400"] { transition-delay: 0.40s; }
[data-animate-delay="500"] { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ================================================================
   SHARED CONTENT PRIMITIVES
   Section headings + buttons used across the homepage AND plain
   content pages (About Us, etc.) — kept sitewide so every page speaks
   the same typographic/button vocabulary instead of each one growing
   its own one-off styles.
   ================================================================ */

.section-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--sp-3);
}

.section-label--light {
  color: rgba(38, 85, 194, 0.9);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-display);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

/* Centered heading + subtitle, no eyebrow */
.section-heading-center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.section-heading-center .section-title {
  margin-bottom: var(--sp-3);
}

.section-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap var(--t-spring);
}

.section-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.section-link:hover { gap: var(--sp-3); }
.section-link:active { opacity: 0.6; transition: opacity var(--t-press); }

/* Primary button — outline only, no fill (sitewide, outside the
   hero section: that keeps its own solid-pill treatment in
   home.css). Border/text use the blue this button used to fill
   with, so it reads as the same "primary" weight without a fill. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-8);
  background: transparent;
  border: 1.5px solid var(--color-blue);
  color: var(--color-blue);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-spring);
}

.btn-primary:hover {
  border-color: var(--color-blue-dark);
  color: var(--color-blue-dark);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.97);
  transition: transform var(--t-press);
}

/* Outline button — light-background counterpart to .btn-ghost (which
   needs a dark/photo backdrop to read at all). For content pages. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-8);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-spring);
}

.btn-outline:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.btn-outline:active {
  transform: scale(0.97);
  transition: transform var(--t-press);
}

/* ================================================================
   404 PAGE
   ================================================================ */
.page-404__inner {
  max-width: 560px;
  margin-inline: auto;
  padding-block: clamp(var(--sp-16), 12vw, var(--sp-20)) clamp(var(--sp-12), 8vw, var(--sp-16));
  text-align: center;
}

.page-404__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--color-blue);
}

.page-404__title {
  margin-top: var(--sp-3);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-navy);
}

.page-404__sub {
  margin-top: var(--sp-3);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.page-404__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-8) auto 0;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--t-fast);
}

.page-404__search:focus-within {
  outline-color: var(--color-blue);
}

.page-404__search svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--color-text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.page-404__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.page-404__search-submit {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  transition: background var(--t-fast);
}

.page-404__search-submit:hover {
  background: var(--color-blue-dark);
}

.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* ================================================================
   COOKIE CONSENT BANNER
   Rendered by assets/js/cookie-consent.js only when no choice has
   been made yet (no toman_consent cookie). Fixed to the bottom,
   above everything except an open modal, matching the site's own
   navy/blue palette rather than a generic gray consent-tool look.
   ================================================================ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  background: var(--color-navy-dark);
  box-shadow: 0 -8px 30px rgba(7, 25, 41, 0.25);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cookie-consent.is-visible {
  transform: translateY(0);
}

.cookie-consent__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--container-pad);
}

.cookie-consent__text {
  flex: 1 1 320px;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
}

.cookie-consent__link {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.cookie-consent__btn {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-press);
}

.cookie-consent__btn:active {
  transform: scale(0.97);
}

.cookie-consent__btn--reject {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-consent__btn--reject:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.cookie-consent__btn--accept {
  background: var(--color-blue);
  color: var(--color-white);
}

.cookie-consent__btn--accept:hover {
  background: var(--color-blue-dark);
}

@media (max-width: 640px) {
  .cookie-consent__actions {
    width: 100%;
  }

  .cookie-consent__btn {
    flex: 1;
  }
}

/* ── "Install the app" banner ───────────────────────────────────
   Same bottom-sheet mechanics/tokens as .cookie-consent just above
   (fixed, slide-up, navy-dark, pill buttons) — see pwa-install.js for
   when this shows (gated on beforeinstallprompt/iOS Safari detection,
   already-installed, and not recently dismissed). */
.pwa-install-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  background: var(--color-navy-dark);
  box-shadow: 0 -8px 30px rgba(7, 25, 41, 0.25);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pwa-install-banner.is-visible {
  transform: translateY(0);
}

.pwa-install-banner__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--container-pad);
}

.pwa-install-banner__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  background-image: url('../images/logo-mark-white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.pwa-install-banner__text {
  flex: 1 1 260px;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
}

.pwa-install-banner__text strong {
  color: var(--color-white);
}

.pwa-install-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.pwa-install-banner__btn {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-press);
}

.pwa-install-banner__btn:active {
  transform: scale(0.97);
}

.pwa-install-banner__btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.pwa-install-banner__btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

.pwa-install-banner__btn--primary:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

@media (max-width: 640px) {
  .pwa-install-banner__actions {
    width: 100%;
  }

  .pwa-install-banner__btn {
    flex: 1;
  }
}