/* =========================================================================
   License Shop — Design Tokens & Base Styles
   Palette sampled pixel-by-pixel from the reference site's screenshot.
   Change the values below to re-skin the entire theme.
   ========================================================================= */

:root {
  /* Brand colors — these are fallbacks; the live values are injected from the
     Customizer palette by license_shop_inline_tokens(). Keep them in sync with
     the palette defaults so there's no colour flash before the tokens load. */
  --color-brand-orange: #FF5A5F;         /* action */
  --color-brand-orange-hover: #E24E52;
  --color-brand-green: #F59E0B;          /* promo / amber */

  /* Accent (brand / trust) leads links & badges, depth adds contrast,
     off-white lifts cards. */
  --color-accent-blue: #0E9F6E;          /* trust / emerald */
  --color-accent-blue-hover: #0B8A5F;
  --color-accent-blue-dim: #D7F1E6;
  --color-navy: #0B2E24;
  --color-bg: #F7FAF8;

  /* Neutrals */
  --color-text: #12241F;
  --color-text-muted: #8A8A8F;
  --color-text-on-dark: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-on-bright: #111827;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Semantic surfaces. Keep these separate from literal white: --color-white
     is also used for text/icons on brand fills and must never turn dark. */
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-control-bg: #FFFFFF;
  --color-heading: var(--color-navy);

  /* Section tints */
  --color-tint-blue: #E9F7F0;      /* alternating section background */
  --color-tint-grey: #F2F5F3;      /* tab bar / pill background */
  --color-tint-peach: #FFECEC;     /* add-to-cart button background */

  /* Borders */
  --color-border: #E3EAE7;

  /* Status / accents */
  --color-verified-blue: #0E9F6E;
  --color-star: #F59E0B;
  --color-success: #047857;
  --color-success-bg: #ECFDF5;
  --color-success-border: #A7F3D0;
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;
  --color-danger: #B91C1C;
  --color-danger-bg: #FEF2F2;
  --color-danger-border: #FECACA;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing rhythm */
  --section-padding-y: clamp(48px, 5vw, 96px);
  --container-max: 1320px;
  --gutter: 24px;

  /* Shape */
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-tile: 8px;

  /* Shadow (subtle — source site is mostly flat) */
  --shadow-card: 0 8px 28px color-mix(in srgb, var(--color-navy) 7%, transparent);
  --shadow-soft: 0 2px 10px color-mix(in srgb, var(--color-navy) 4%, transparent);
  --radius-panel: calc(var(--radius-card) + 10px);
  --color-caption: color-mix(in srgb, var(--color-text) 70%, var(--color-surface));
  --shadow-popover: 0 12px 32px rgba(12, 12, 14, 0.16);

  --transition-base: 180ms ease;
}

/* =========================================================================
   Reset / base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-brand-orange); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-brand-orange-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

/* Inline SVG icon scale. Without a base size the icons collapse to 0x0,
   which is what hid every star rating. Specific rules can still override. */
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 12px; height: 12px; }
.icon-star { width: 14px; height: 14px; }

.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-star); }
.stars > span { display: inline-flex; }

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

.section { padding-block: var(--section-padding-y); }
.section--tint { background: var(--color-tint-blue); }
/* Focused steps (e.g. the cart): half the usual gap under the header. */
.section--compact { padding-top: calc(var(--section-padding-y) / 2); }
.section--compact > article > h1:first-child { margin-top: 0; margin-bottom: 20px; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.btn:hover { transform: translateY(-1px); }

.btn--dark {
  background: var(--color-black);
  color: var(--color-text-on-dark);
}
.btn--dark:hover { background: #1a1a1a; color: var(--color-text-on-dark); }

.btn--orange {
  background: var(--color-brand-orange);
  color: var(--color-on-accent);
}
.btn--orange:hover { background: var(--color-brand-orange-hover); color: var(--color-on-accent); }

.btn--peach {
  background: var(--color-tint-peach);
  color: var(--color-brand-orange);
  padding: 10px 20px;
  font-size: var(--fs-small);
}
.btn--peach:hover { background: #FCE3D2; color: var(--color-brand-orange-hover); }

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn--outline:hover { border-color: var(--color-brand-orange); color: var(--color-brand-orange); }

.btn--sm { padding: 8px 18px; font-size: var(--fs-xs); }

.link-arrow {
  color: var(--color-brand-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Top announcement bar
   ========================================================================= */
.announcement-bar {
  background: var(--color-brand-green);
  color: var(--color-on-accent);
  text-align: center;
  font-size: var(--fs-small);
  padding: 10px var(--gutter);
  position: relative;
}
.announcement-bar a { color: var(--color-on-accent); text-decoration: underline; font-weight: 700; }
.announcement-bar strong { font-weight: 700; }
.announcement-bar__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-on-accent);
  font-size: 1rem;
  opacity: 0.85;
}
.announcement-bar__close:hover { opacity: 1; }

/* =========================================================================
   Utility bar
   ========================================================================= */
.utility-bar {
  background: var(--color-text);
  color: var(--color-on-accent);
  font-size: var(--fs-xs);
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
  gap: 16px;
  flex-wrap: wrap;
}
.utility-bar__reviews {
  display: flex;
  align-items: center;
  gap: 8px;
}
.utility-bar__reviews strong { text-decoration: underline; }
.utility-bar__stars { color: var(--color-star); letter-spacing: 1px; }
.utility-bar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.utility-bar__right a { color: var(--color-on-accent); }
.utility-bar__right a:hover { color: var(--color-tint-peach); }
.utility-bar__pill {
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* =========================================================================
   Main header
   ========================================================================= */
.site-header {
  background: var(--color-brand-orange);
  color: var(--color-on-accent);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 18px;
}
.site-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-on-accent);
  line-height: 1.05;
  flex-shrink: 0;
}
/* Image logo (Customizer → Site Identity → Logo). Height comes from the
   Header settings via --logo-height / --logo-height-mobile; width follows the
   image's own proportions, capped so a very wide mark can't crowd the search. */
.site-logo--image { display: inline-flex; align-items: center; line-height: 0; }
.site-logo__img {
  display: block;
  height: var(--logo-height, 40px);
  width: auto;
  max-width: min(240px, 45vw);
  object-fit: contain;
}
.site-logo span { display: block; font-size: 0.9rem; font-weight: 600; }

.primary-nav { flex: 1; }
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.primary-nav > ul > li { position: relative; }
.primary-nav > ul > li > a {
  color: var(--color-on-accent);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 10px 0;
  display: inline-block;
}
.primary-nav > ul > li > a:hover { color: var(--color-on-accent); }

/* Mega menu */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  padding: 8px;
  min-width: 260px;
  z-index: 50;
}
.primary-nav li:hover > .mega-menu,
.primary-nav li:focus-within > .mega-menu { display: block; }
.mega-menu ul { display: flex; flex-direction: column; gap: 2px; }

/* Each option is a full-width row, so the whole row is the click target, not
   just the words. Hover/focus: a soft tint of the action colour. Shared by the
   nav dropdowns and the account dropdown (links and the dark-mode button). */
.mega-menu li > a,
.mega-menu li > button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), padding-left var(--transition-base);
}
.mega-menu li > a:hover,
.mega-menu li > a:focus-visible,
.mega-menu li > button:hover,
.mega-menu li > button:focus-visible {
  background: var(--color-tint-peach);
  color: var(--color-brand-orange);
  padding-left: 18px;
  outline: none;
}
.mega-menu li.current-menu-item > a { color: var(--color-brand-orange); font-weight: 600; }
.mega-menu__heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* .header-actions layout (margin-left, gap, flex) is defined once in the
   "Header refinements" section below — kept single-source to avoid drift. */
.header-actions button,
.header-actions a {
  background: none;
  border: none;
  color: var(--color-on-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.header-actions .icon { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -9px;
  right: -11px;
  background: var(--color-navy);
  color: var(--color-on-accent);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}
.header-cart:hover .cart-count { transform: scale(1.1); }
.mobile-menu-toggle { display: none; }

.account-menu { position: relative; }
.account-menu__panel {
  left: auto;
  right: 0;
  min-width: 180px;
}
.account-menu:hover .account-menu__panel,
.account-menu:focus-within .account-menu__panel { display: block; }

.search-form {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  padding: 0 14px;
}
.search-form input {
  background: none;
  border: none;
  color: var(--color-on-accent);
  padding: 8px 0;
  width: 140px;
  font-size: var(--fs-small);
}
.search-form input::placeholder { color: rgba(255,255,255,0.75); }
.search-form input:focus { outline: none; }
.search-form button { color: var(--color-on-accent); }

.breadcrumb {
  /* Separator colour: grey by default; deep-blue styles override it below. */
  --breadcrumb-sep: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  /* +25% on the previous size (--fs-xs 0.75rem) and weight (400 → 500). */
  font-size: calc(var(--fs-xs) * 1.25);
  font-weight: 500;
  padding-top: 16px;
  padding-bottom: 6px;
}
/* Breadcrumb text uses the primary (commerce) colour. */
.breadcrumb a { color: var(--color-brand-orange); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-brand-orange-hover); text-decoration: underline; }
/* Current page: not a link, kept in the depth tone so it reads as "you are here". */
.breadcrumb__current { color: var(--color-heading); }

/* Triangle separator, drawn with borders so it stays crisp at any size and
   picks up the per-style colour. Sits before every crumb except the first — and
   not before the right-aligned category badge — vertically centred by the row. */
.breadcrumb > * + *:not(.breadcrumb__cat)::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 9px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--breadcrumb-sep);
  vertical-align: middle;
  flex: none;
}

/* Deep-blue styles get a deep-blue triangle; the default stays grey. */
.style-electric .breadcrumb,
.style-conversion_pro .breadcrumb {
  --breadcrumb-sep: var(--color-navy);
}

/* Category badge, pushed to the far right of the breadcrumb row (product pages).
   Reuses the accent pill look; vertically centred by the flex row. */
.breadcrumb__cat {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue-dim);
  color: var(--color-accent-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}
.breadcrumb__cat:hover { color: var(--color-accent-blue-hover); text-decoration: none; }

/* =========================================================================
   Hero
   ========================================================================= */
/* Half the usual section gap above the slider so it sits close under the header. */
.hero {
  padding-block: calc(var(--section-padding-y) / 2) var(--section-padding-y);
  overflow: hidden;
}
/* All slides share one grid cell, so the slider is always as tall as its
   tallest slide and switching slides never changes the page height (which
   made the page jump under a scrolling user). Inactive slides are faded out
   and hidden from assistive tech with visibility, not removed from layout. */
.hero__slider {
  position: relative;
  display: grid;
}
.hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.hero__slide[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero__dots { grid-row: 2; }
.hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 24px;
}
.hero__eyebrow em { font-style: normal; color: var(--color-brand-orange); display: block; }
.hero__headline { color: var(--color-brand-orange); font-size: 1.6rem; margin-bottom: 12px; }
.hero__copy { color: var(--color-text); margin-bottom: 20px; }
.hero__copy strong { color: var(--color-brand-green); }
.hero__code { margin-bottom: 24px; font-size: var(--fs-small); }
.hero__code strong { color: var(--color-brand-green); font-weight: 700; }
.hero__media { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.hero__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--color-brand-green);
  color: var(--color-on-accent);
  font-weight: 700;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.hero__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.hero__dots button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-brand-orange);
  padding: 0;
}
.hero__dots [data-goto-slide]::before { content: ''; width: 20px; height: 4px; border-radius: var(--radius-pill); background: var(--color-border); }
.hero__dots [data-goto-slide].is-active::before { background: var(--color-brand-orange); width: 28px; }
.hero__dots button:focus-visible { outline: 2px solid var(--color-brand-orange); outline-offset: 2px; }
.hero__dots .hero__pause { border: 1px solid var(--color-border); background: var(--color-surface); font-size: 1rem; }
.hero__dots .hero__pause[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

/* =========================================================================
   USP strip
   ========================================================================= */
.usp-strip { padding-block: 16px; }
/* The strip is a light band between the slider and the next section, so the
   sections either side only need half their usual gap next to it. */
.hero:has(+ .usp-strip) { padding-bottom: calc(var(--section-padding-y) / 2); }
.usp-strip + .section { padding-top: calc(var(--section-padding-y) / 2); }
.usp-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 24px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.usp-strip__item { padding: 4px 16px; min-width: 0; }
.usp-strip__item + .usp-strip__item { border-left: 1px solid var(--color-border); }
.usp-strip__icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  color: var(--color-brand-orange);
}
.usp-strip__title { font-weight: 800; font-size: var(--fs-body); margin-bottom: 2px; }
.usp-strip__desc { margin: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--color-caption); }

/* =========================================================================
   Section heading
   ========================================================================= */
.section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.section-heading--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.section-heading h2 { margin: 0; }
.section-heading .accent { color: var(--color-brand-orange); }
.section-heading__sub { color: var(--color-text-muted); margin-top: 8px; }

/* =========================================================================
   Product tabs
   ========================================================================= */
/* Homepage sections share an inset surface and one spacing rhythm. */
.home-panel {
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.home-panel--tint { background: var(--color-tint-blue); }
.home-catalogue .section-heading { margin-bottom: 28px; gap: 24px; }
.home-catalogue .section-heading h2 { font-size: clamp(1.45rem, 2.25vw, 1.9rem); letter-spacing: -0.035em; }
.home-catalogue .link-arrow { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.home-brands { padding-top: 0; }
.home-categories { padding-top: 0; }
.home-chosen { padding-top: 0; }
.home-categories .section-heading__sub { color: var(--color-caption); margin-bottom: 0; }
.product-tabs { min-width: 0; overflow-anchor: none; }
.catalogue-tabs {
  scroll-margin-top: 150px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  margin-bottom: 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  overscroll-behavior-x: contain;
}
.catalogue-tabs a {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-tile);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-caption);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.catalogue-tabs a:hover { color: var(--color-brand-orange); background: var(--color-surface); }
.catalogue-tabs a.is-active { color: var(--color-on-accent); background: var(--color-brand-orange); box-shadow: var(--shadow-soft); }
.catalogue-tabs a:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -3px; }
.product-tabs__panel[hidden] { display: none; }
.product-tabs__panel:focus-visible { outline: 2px solid var(--color-accent-blue); outline-offset: 6px; }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-tabs__footer { text-align: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.product-tabs__footer a { min-height: 44px; justify-content: center; }

/* Category cards give the whole block a clear destination. */
.value-props__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.value-prop {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.value-prop:hover, .value-prop:focus-within { border-color: var(--color-accent-blue); box-shadow: var(--shadow-card); }
.value-prop__icon { width: 48px; height: 48px; padding: 11px; border-radius: var(--radius-tile); background: var(--color-tint-blue); color: var(--color-accent-blue); }
.value-prop h3 { margin: 2px 0 10px; font-size: 1.1rem; }
.value-prop p { margin-bottom: 18px; font-size: var(--fs-small); color: var(--color-caption); line-height: 1.65; }
.value-prop .link-arrow { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); }
.value-prop .link-arrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* =========================================================================
   Reviews carousel
   ========================================================================= */
.reviews {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.reviews__summary {
  flex: 0 0 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
  text-align: center;
}
.reviews__summary .stars { color: var(--color-star); font-size: 1.1rem; margin-bottom: 8px; }
.reviews__summary .score { font-size: 1.5rem; font-weight: 700; }
.reviews__track {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.review-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px;
  position: relative;
}
.review-card .stars { color: var(--color-star); margin-bottom: 10px; }
.review-card__verified {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  height: 18px;
  background: var(--color-verified-blue);
  border-radius: 50%;
  color: var(--color-on-accent);
}
.review-card__date { font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 8px; }
.review-card__text { font-size: var(--fs-small); margin-bottom: 8px; }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.cta-band h2 { margin: 0; }
.cta-band__social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}
.cta-band__social a {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.cta-band__social a:hover { background: var(--color-text); color: var(--color-on-accent); }

/* =========================================================================
   Newsletter modal
   ========================================================================= */
.newsletter-modal {
  position: fixed;
  inset: 0;
  background: rgba(12,12,14,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.newsletter-modal.is-open { display: flex; }
.newsletter-modal__box {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  max-width: 720px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
}
.newsletter-modal__media { background: var(--color-tint-blue); }
.newsletter-modal__media img { width: 100%; height: 100%; object-fit: cover; }
.newsletter-modal__content { padding: 40px; }
.newsletter-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--color-tint-grey);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.newsletter-form { display: flex; gap: 8px; margin-top: 20px; }
.newsletter-form input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-size: var(--fs-small);
}
.newsletter-modal__dismiss {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { 
  background: var(--color-navy); 
  color: var(--color-on-accent);
  padding-top: var(--section-padding-y); 
}
.footer-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
  padding-bottom: 48px;
}
.footer-columns h3 {
  color: var(--color-on-accent);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.footer-columns ul li { margin-bottom: 12px; }
.footer-brand-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.footer-brand-logos img { max-height: 22px; opacity: 0.85; }
.footer-newsletter input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: var(--fs-small);
  margin-bottom: 12px;
}
.footer-newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-accent);
  transition: all 0.2s ease;
}
.footer-social a:hover {
  background: var(--color-brand-orange);
  border-color: var(--color-brand-orange);
  color: var(--color-on-accent);
}
.footer-cta__about { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-xs); margin-top: 16px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 24px;
}
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-bottom__legal { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); max-width: 560px; }
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-icons li {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-xs);
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.payment-icons img { height: 16px; }

/* Prevent sticky buy bar from covering footer badges on single product page */
body.single-product .site-footer {
  padding-bottom: 90px;
}

/* =========================================================================
   Sticky trust badge + chat bubble
   ========================================================================= */
/* Buyer Protection trust badge — a small premium card, fixed bottom-left,
   linking to the store's Trustpilot profile. */
.trust-badge-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 175px;
  padding: 12px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  text-decoration: none;
  transition: bottom 260ms cubic-bezier(0.4, 0, 0.2, 1), transform var(--transition-base), box-shadow var(--transition-base);
}
.trust-badge-float--link { cursor: pointer; }
.trust-badge-float--link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}

/* Smoothly elevate trust badge above sticky buy bar when active */
body:has(.sticky-buy.is-visible) .trust-badge-float,
body.has-sticky-buy-active .trust-badge-float {
  bottom: 84px;
}

@media (max-width: 560px) {
  body:has(.sticky-buy.is-visible) .trust-badge-float {
    bottom: 74px;
    padding: 8px 12px;
  }
}
.trust-badge-float__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.trust-badge-float__shield { width: 14px; height: 14px; color: var(--color-accent-blue); flex: none; }

.trust-badge-float__row {
  display: flex;
  align-items: center;
}
.trust-badge-float__row--top {
  gap: 8px;
}
.trust-badge-float__row--bottom {
  gap: 6px;
  font-size: 0.8125rem;
}

.trust-badge-float__star-logos {
  display: flex;
  align-items: center;
  gap: 2px;
}
.trust-badge-float__star-tile {
  width: 18px;
  height: 18px;
  display: block;
}
.trust-badge-float__score-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.trust-badge-float__label {
  font-weight: 700;
  color: var(--color-text);
}
.trust-badge-float__sep {
  color: var(--color-text-muted);
  font-weight: 400;
  opacity: 0.65;
}
.trust-badge-float__count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* =========================================================================
   Mobile off-canvas menu
   Component styles live in assets/css/mobile-menu.css, which is enqueued
   after this file. Nothing is declared here so those rules aren't fighting
   higher-specificity leftovers.
   ========================================================================= */

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
  .search-form { display: none; }
  .hero__slide { grid-template-columns: 1fr; }
  .value-props__grid { grid-template-columns: 1fr; }
  .newsletter-modal__box { grid-template-columns: 1fr; }
  .newsletter-modal__media { display: none; }
}

@media (max-width: 768px) {
  .usp-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 0; }
  .usp-strip__item { padding: 16px 10px; }
  .usp-strip__item + .usp-strip__item { border-left: 0; }
  .usp-strip__item:nth-child(even) { border-left: 1px solid var(--color-border); }
  .usp-strip__item:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .usp-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .home-panel { padding: 18px; }
  .home-catalogue .home-panel { padding: 20px 12px; }
  .home-catalogue .section-heading { padding-inline: 4px; gap: 12px; margin-bottom: 20px; }
  .home-catalogue .section-heading h2 { max-width: 20ch; line-height: 1.3; }
  .catalogue-tabs { margin-bottom: 20px; }
  .catalogue-tabs a { flex-grow: 0; padding-inline: 14px; font-size: 0.8125rem; }
  .value-prop { grid-template-columns: 40px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .value-prop__icon { width: 40px; height: 40px; padding: 9px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews { flex-direction: column; }
  .reviews__summary { flex: none; }
  .section-heading--split { flex-direction: column; align-items: flex-start; gap: 12px; }
  .trust-badge-float { display: none; }
  .trust-badge-float__title { font-size: 0.62rem; }
  .trust-badge-float__stars { font-size: 13px; letter-spacing: 2px; }
  .trust-badge-float__score strong { font-size: 0.95rem; }
}

@media (max-width: 560px) {
  .home .container { padding-inline: 16px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-columns { grid-template-columns: 1fr; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
}

/* WooCommerce archive grid layout lives in woocommerce.css, which loads after
   this file and keeps the shared cards at the same breakpoints as home. */

.woocommerce-pagination ul {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-tile);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
}
.woocommerce-pagination .current { background: var(--color-brand-orange); color: var(--color-on-accent); border-color: var(--color-brand-orange); }

/* Single product page — light-touch styling so it doesn't look bare */
.single-product .summary { padding-block: 20px; }
.single-product .price { color: var(--color-brand-orange); font-size: 1.4rem; font-weight: 700; }
.single-product .cart .button,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  background: var(--color-brand-orange);
  color: var(--color-on-accent);
  border: none;
  font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--color-brand-orange-hover); color: var(--color-on-accent); }

/* =========================================================================
   Dark mode
   `html[data-theme]` deliberately outranks the Customizer's later `:root`
   token block. Brand colours remain owner-controlled; only semantic page,
   surface, text and state roles change here. Literal white stays white so
   labels and icons on coloured controls retain their contrast.
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1116;
  --color-surface: #171B22;
  --color-surface-raised: #1D222B;
  --color-control-bg: #11151B;
  --color-text: #E8ECF2;
  --color-text-muted: #AAB2BD;
  --color-heading: #F7F9FC;
  --color-border: #343C48;
  --color-tint-blue: color-mix(in srgb, var(--color-accent-blue) 13%, var(--color-surface));
  --color-tint-grey: #222833;
  --color-tint-peach: color-mix(in srgb, var(--color-brand-orange) 16%, var(--color-surface));
  --color-accent-blue-dim: color-mix(in srgb, var(--color-accent-blue) 20%, var(--color-surface));
  --color-price-tint: color-mix(in srgb, var(--color-price) 18%, var(--color-surface));
  --color-price-line: color-mix(in srgb, var(--color-price) 45%, var(--color-border));
  --color-caption: color-mix(in srgb, var(--color-text) 76%, var(--color-surface));
  --color-success: #6EE7B7;
  --color-success-bg: color-mix(in srgb, #10B981 18%, var(--color-surface));
  --color-success-border: color-mix(in srgb, #10B981 48%, var(--color-border));
  --color-warning: #FCD34D;
  --color-warning-bg: color-mix(in srgb, #F59E0B 18%, var(--color-surface));
  --color-warning-border: color-mix(in srgb, #F59E0B 48%, var(--color-border));
  --color-danger: #FCA5A5;
  --color-danger-bg: color-mix(in srgb, #EF4444 16%, var(--color-surface));
  --color-danger-border: color-mix(in srgb, #EF4444 45%, var(--color-border));
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 3px 14px rgba(0, 0, 0, 0.24);
  --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.48);
}
html[data-theme="dark"] body { background: var(--color-bg); }

/* =========================================================================
   Header refinements — slim single-row bar
   The nav was wrapping onto a second line because the logo block carried a
   tagline (~290px) and a full search input sat in the same row. The logo is
   now compact, and search opens as a panel from an icon.
   ========================================================================= */
.site-header .container {
  gap: 24px;
  padding-block: 12px;
  flex-wrap: nowrap;
}
.site-logo {
  font-size: 1.25rem;
  white-space: nowrap;
}
.site-logo span {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.9;
  white-space: nowrap;
}

.primary-nav { min-width: 0; }
.primary-nav > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}
.primary-nav > ul > li { flex: 0 0 auto; }
.primary-nav .nav-top-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background var(--transition-base), color var(--transition-base);
}
.primary-nav .nav-top-link .chevron { opacity: 0.75; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-base);
}
.header-search-toggle:hover { background: rgba(255, 255, 255, 0.28); }
.header-search-toggle svg { width: 20px; height: 20px; }

/* Search panel */
.header-search-panel {
  background: var(--color-surface);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-card);
}
.header-search-panel[hidden] { display: none; }
.header-search-panel__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.header-search-panel__form > svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex: none;
}
.header-search-panel__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}
.header-search-panel__form input[type="search"]:focus { outline: none; }
.header-search-panel__close {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
}

@media (max-width: 1200px) {
  .primary-nav .nav-top-link { padding: 8px 7px; font-size: 0.82rem; }
  .site-header .container { gap: 16px; }
}

/* =========================================================================
   Brand strip — evenly spaced tiles on a tint band
   ========================================================================= */
/* One row, always: --brand-cols / -md / -sm are set inline by the template
   (the "Brands shown" count, capped at 4 on tablets and 3 on phones, and never
   more than the brands that exist); narrow layouts allow horizontal scrolling. */
.brand-strip__grid {
  display: grid;
  grid-template-columns: repeat(var(--brand-cols, 7), minmax(0, 1fr));
  gap: 12px;
}
.brand-strip__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.brand-strip__tile img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.brand-strip__name { font-size: 0.9rem; font-weight: 700; color: var(--color-text); text-align: center; }
a.brand-strip__tile { transition: border-color var(--transition-base), box-shadow var(--transition-base); }
a.brand-strip__tile:hover { border-color: var(--color-brand-orange); box-shadow: var(--shadow-card); }

@media (max-width: 900px) {
  .value-props__grid { grid-template-columns: minmax(0, 1fr); }
  .brand-strip__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .brand-strip__tile { scroll-snap-align: start; }
}
@media (max-width: 520px) {
  .brand-strip__grid { grid-auto-columns: calc((100% - 24px) / 3); }
}

/* =========================================================================
   Reviews carousel — bordered summary card, arrows, scrolling track
   ========================================================================= */
.reviews {
  display: grid;
  grid-template-columns: 168px 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 16px;
}
.reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 22px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
}
.reviews__summary .stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.reviews__summary .score {
  margin: 6px 0 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.reviews__summary-label { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }

.reviews__nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-base);
}
.reviews__nav:hover { background: var(--color-tint-grey); }
.reviews__nav svg { width: 22px; height: 22px; }

.reviews__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 4px;
}
.reviews__track::-webkit-scrollbar { display: none; }

.review-card {
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.review-card__head .stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.review-card__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-verified-blue);
  color: var(--color-on-accent);
}
.review-card__verified svg { width: 11px; height: 11px; }
.review-card__date { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.review-card__text { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.review-card__author { margin: auto 0 0; padding-top: 8px; font-size: var(--fs-xs); font-weight: 600; }

@media (max-width: 900px) {
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .reviews__summary { flex-direction: row; gap: 12px; }
  .reviews__summary .score { margin: 0; }
  .reviews__nav { display: none; }
}

/* =========================================================================
   Footer — reference layout
   Column 1 carries the call to action and social links; the remaining
   three are menu-driven link lists.
   ========================================================================= */
.footer-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.footer-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 20px;
  max-width: 12ch;
  color: var(--color-on-accent);
}
.footer-cta .btn {
  margin-bottom: 22px;
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-on-accent);
}
.footer-cta .btn:hover {
  background: transparent;
  color: var(--color-on-accent);
  border-color: rgba(255, 255, 255, 0.4);
}
.footer-cta__about {
  margin: 18px 0 0;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--color-white) 75%, var(--color-navy));
  max-width: 34ch;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  color: var(--color-text);
  display: inline-flex;
  transition: color var(--transition-base);
}
.footer-social a:hover { color: var(--color-brand-orange); }
.footer-social svg { width: 18px; height: 18px; }

.footer-columns h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 18px;
}
.footer-columns ul { list-style: none; margin: 0; padding: 0; }
.footer-columns ul li { margin-bottom: 11px; }
.footer-columns a {
  color: color-mix(in srgb, var(--color-white) 82%, var(--color-navy));
  font-size: var(--fs-small);
  line-height: 1.5;
}
.footer-columns a:hover { color: var(--color-on-accent); text-decoration: underline; text-underline-offset: 4px; }

.footer-bottom { border-top: 1px solid var(--color-border); }
.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 22px;
}
/* Muted, but readable on the navy footer (6.4:1; the body grey was 4.2:1). */
.footer-bottom__legal { margin: 0; font-size: var(--fs-xs); color: color-mix(in srgb, var(--color-white) 62%, var(--color-navy)); max-width: 62ch; }
.footer-bottom__company {
  margin: 4px 0 0;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-white) 62%, var(--color-navy));
}
.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.payment-icons li {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
}

@media (max-width: 992px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-columns { grid-template-columns: 1fr; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
  /* Phones: one address line per row, like a postal address. */
  .footer-bottom__company > span { display: block; }
  .footer-bottom__company > .footer-bottom__sep { display: none; }
}

/* =========================================================================
   Hero — full-width banner layout
   A slide set to "Full-width image" drops the two-column grid and shows a
   single designed banner edge to edge inside the container.
   ========================================================================= */
.hero__slide--full {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: block;
  padding: 0;
  align-self: start;
}
.hero__banner,
.hero__banner-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hero__banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.hero__banner-link {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hero__banner-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* Keep the dots clear of a full-bleed banner */
.hero__slide--full + .hero__dots,
.hero__slider:has(.hero__slide--full:not([hidden])) .hero__dots {
  margin-top: 14px;
}

/* =========================================================================
   MERGE LAYER — cool accent overlaid on the warm base
   Design rule: orange leads action (buttons, prices, cart, discount).
   Blue accents trust & information (links, eyebrows, badges, focus, steps).
   Navy adds depth. Off-white body lifts white cards. Every colour here is a
   token, so all of it re-skins from Customizer → Colours & Type.
   ========================================================================= */

/* Depth: the thin top utility bar gradient */
.utility-bar { background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-accent-blue) 100%); }

/* Verified badge follows the accent so blue stays one consistent hue */
.review-card__verified { background: var(--color-accent-blue); }

/* --- Eyebrow labels: small blue uppercase with a leading dot (reference) --- */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
}
.hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-blue);
  flex: none;
}
.hero__eyebrow em { font-style: normal; color: var(--color-accent-blue); }

/* --- Trust / information links go blue; commerce links (incl. breadcrumb) stay orange --- */
.product-single__rating-count,
.woocommerce-info a,
.shop-header__desc a {
  color: var(--color-accent-blue);
}
.product-single__rating-count:hover,
.woocommerce-info a:hover {
  color: var(--color-accent-blue-hover);
}

/* Nav pill hover / open state: a subtle translucent highlight that reads on ANY
   header colour, with the label kept white. (An accent-coloured label could
   match the header background — e.g. emerald label on the emerald header — and
   disappear, which is what looked "off".) */
.primary-nav .nav-top-link:hover,
.primary-nav > ul > li:hover > .nav-top-link,
.primary-nav > ul > li:focus-within > .nav-top-link {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-on-accent);
}

/* --- Blue "info" badge (Featured / compatibility / lifetime), reference-style --- */
.badge-info,
.product-single__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue-dim);
  color: var(--color-accent-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Search focus ring in the accent instead of orange --- */
.header-search-panel__form input[type="search"]:focus,
.mobile-menu__search:focus-within {
  outline: none;
}
.mobile-menu__search:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-accent-blue-dim);
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-accent-blue-dim);
}

/* --- Cards lift off the off-white page with a softer, larger shadow --- */
.review-card,
.reviews__summary {
  box-shadow: var(--shadow-soft);
}

/* Product-page spec assurances read as trust info → blue check marks */
.product-single__assurances svg { color: var(--color-accent-blue); }

/* =========================================================================
   Process — numbered "how it works" strip (merged widget)
   Numbered accent tiles in consistent white cards.
   ========================================================================= */
.process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: process;
}
.process__step {
  position: relative;
  padding: 30px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-card);
  background: var(--color-tint-blue);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent-blue);
  -webkit-text-stroke: 0;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.process__title {
  font-size: 1.0625rem;
  margin: 0 0 8px;
}
.process__text {
  margin: 0;
  color: var(--color-caption);
  font-size: 0.9rem;
  line-height: 1.6;
}
/* A connecting hairline between steps on wide screens */
.process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  right: -1px;
  width: clamp(20px, 3vw, 40px);
  height: 2px;
  background: var(--color-border);
  transform: translateX(100%);
}
@media (max-width: 820px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__step:not(:last-child)::after { display: none; }
}

/* =========================================================================
   Sticky header
   Keep the navigation height stable so scroll anchoring cannot repeatedly
   trigger the scrolled state. Announcement and utility bars scroll away.
   ========================================================================= */
.site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 600;
  transition: box-shadow var(--transition-base);
}
.site-header.is-sticky.is-scrolled {
  box-shadow: var(--shadow-card);
}

/* Keep clear of the WordPress admin bar for logged-in users */
.admin-bar .site-header.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header.is-sticky {
    top: 0;
  }
  .admin-bar .site-header.is-sticky:not(.is-scrolled) {
    top: 46px;
  }
}

/* The search panel drops just under the sticky bar, so it travels with it */
.site-header.is-sticky .header-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
}

/* =========================================================================
   LIVE SEARCH — instant product suggestions (header + sidebar)
   ========================================================================= */
.header-search-panel__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search-panel__form:focus-within > svg { color: var(--color-accent-blue); }
.mobile-menu__search:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-accent-blue-dim);
}

.ls-search-results {
  max-height: min(58vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ls-search-results[hidden] { display: none; }
.header-search-panel .ls-search-results {
  border-top: 1px solid var(--color-border);
  margin-top: 2px;
  padding-bottom: 8px;
}
.ls-search-results--drawer {
  margin: 8px 20px 0;
  flex: none; /* the drawer is a flex column; without this an overflow:auto child collapses to height 0 */
}

.ls-search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border-radius: var(--radius-tile);
  color: var(--color-text);
}
.ls-search-result:hover,
.ls-search-result.is-active { background: var(--color-tint-blue); }

.ls-search-result__thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--color-tint-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-search-result__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ls-search-result__thumb.is-empty { box-shadow: inset 0 0 0 1px var(--color-border); }

.ls-search-result__text { flex: 1 1 auto; min-width: 0; }
.ls-search-result__title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-search-result__cat {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.ls-search-result__price {
  flex: none;
  font-weight: 800;
  color: var(--color-brand-orange);
  font-size: 0.9rem;
  white-space: nowrap;
}
.ls-search-result__price del { color: var(--color-text-muted); font-weight: 400; font-size: 0.78rem; margin-right: 4px; }
.ls-search-result__price ins { text-decoration: none; }

.ls-search-all {
  display: block;
  padding: 12px 6px 4px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-blue);
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}
.ls-search-all:hover,
.ls-search-all.is-active { color: var(--color-accent-blue-hover); background: var(--color-tint-blue); border-radius: var(--radius-tile); }

.ls-search-loading,
.ls-search-empty {
  padding: 16px 6px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* =========================================================================
   TWO-ROW HEADER (logo + search + actions  ·  divider  ·  nav)
   A stacked storefront header: row 1 holds the logo, an always-visible
   search box, and the support / account / cart actions; row 2 holds the
   primary navigation. Both rows share the header background colour (set by
   the palette/style tokens) and are separated by a thin divider line.
   These rules are appended last so they win over the earlier single-row
   ".site-header .container" layout.
   ========================================================================= */

/* --- Row 1 --------------------------------------------------------------- */
.site-header__top .container {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 14px;
  flex-wrap: nowrap;
}
.site-header__top .site-logo { flex: 0 0 auto; }

/* --- Row 1: always-visible search box ------------------------------------ */
.site-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--color-surface);
  border-radius: 8px;
}
.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}
.site-search__input::placeholder { color: var(--color-text-muted); }
.site-search__input:focus { outline: none; }
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search__btn {
  flex: none;
  width: 50px;
  height: 100%;
  border: none;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-base);
}
.site-search__btn:hover { color: var(--color-brand-orange); }
.site-search__btn svg { width: 20px; height: 20px; }

/* Live-suggestions dropdown, anchored under the search box */
.site-search .ls-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  z-index: 60;
  padding-bottom: 6px;
}

/* --- Row 1: support / account / cart actions ----------------------------- */
.header-action { display: inline-flex; align-items: center; gap: 8px; }
.account-menu.header-action .header-action__link { display: inline-flex; align-items: center; gap: 8px; }
.header-action__label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.header-action__sub  { font-size: 0.72rem; font-weight: 500; opacity: 0.85; }
.header-action__main { font-size: 0.9rem;  font-weight: 700; }

/* --- Divider + Row 2 (navigation) ---------------------------------------- */
.site-header__nav {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.site-header__nav .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 0;
  flex-wrap: nowrap;
}
.site-header__nav .primary-nav { flex: 1 1 auto; display: block; }
.site-header__nav .primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;   /* wrap rather than overflow, so the mega-menu is never clipped */
  padding: 3px 0;
}

/* --- Mega menu columns --------------------------------------------------------
   A top-level item whose children have children (see the mega-menu walker)
   opens a full-width panel anchored to the nav row, not to the item, so panels
   for items on the right never run off screen: one column per child (its
   heading links to that sub-category), a "View all" footer link. */
.site-header__nav .container { position: relative; }
.primary-nav > ul > li.has-mega-columns { position: static; }
.mega-menu--columns {
  left: 0;
  right: 0;
  top: 100%;
  min-width: 0;
  padding: 20px 22px 14px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
/* Invisible bridge over the gap below the nav, so moving the pointer down
   into the panel doesn't close it. */
.mega-menu--columns::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega-menu--columns .mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 20px;
}
.mega-menu--columns .mega-menu__columns > li { min-width: 0; }
.mega-menu--columns .mega-menu__heading-link {
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-orange);
}
.mega-menu--columns .sub-menu { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.mega-menu--columns .sub-menu a { padding: 7px 10px; font-size: 0.875rem; }
.mega-menu--columns .mega-view-all {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.mega-menu--columns .mega-view-all > a { width: auto; display: inline-flex; font-weight: 700; color: var(--color-brand-orange); }
/* Several "View all" links share one divider (e.g. Design & CAD). */
.mega-menu--columns .mega-view-all + .mega-view-all { margin-top: -14px; padding-top: 0; border-top: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 992px) {
  /* Nav row (and its divider) collapse into the hamburger drawer. */
  .site-header__nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }

  /* Search drops onto its own full-width line under the logo + actions. */
  .site-header__top .container { flex-wrap: wrap; gap: 12px 16px; }
  .site-search { order: 3; flex-basis: 100%; height: 42px; }
  .header-actions { margin-left: auto; }
  .header-action__label { display: none; }   /* icon-only actions on small screens */
  .header-action--support { display: none; }  /* keep the compact set: account · cart · menu */
  .site-logo__img { height: var(--logo-height-mobile, 32px); }
}

/* =========================================================================
   WordPress Page & Gutenberg Block Content Styles
   Restores lists, headings, quotes, tables, and block formatting inside
   page/post content so theme respects WordPress editor choices.
   ========================================================================= */
.page-content,
.entry-content,
.post-content {
  line-height: 1.7;
}

.page-content h1, .entry-content h1 { font-size: 2.25rem; margin-top: 1.4em; margin-bottom: 0.5em; }
.page-content h2, .entry-content h2 { font-size: 1.75rem; margin-top: 1.3em; margin-bottom: 0.5em; }
.page-content h3, .entry-content h3 { font-size: 1.35rem; margin-top: 1.2em; margin-bottom: 0.5em; }
.page-content h4, .entry-content h4 { font-size: 1.15rem; margin-top: 1.1em; margin-bottom: 0.5em; }
.page-content h5, .entry-content h5 { font-size: 1rem; margin-top: 1em; margin-bottom: 0.5em; }
.page-content h6, .entry-content h6 { font-size: 0.875rem; margin-top: 1em; margin-bottom: 0.5em; text-transform: uppercase; }

/* Lists (unordered & ordered). Only plain lists written in the editor (no
   class) and block-editor lists get prose styling — WooCommerce and theme
   components rendered inside .page-content (order summary, account nav…)
   style their own classed lists and must not inherit bullets and indents. */
.page-content ul:not([class]),
.entry-content ul:not([class]),
.wp-block-list:not(.is-style-none),
ul.wp-block-list {
  list-style-type: disc !important;
  margin: 1em 0 1.25em 1.5em !important;
  padding-left: 1.25em !important;
}

.page-content ol:not([class]),
.entry-content ol:not([class]),
ol.wp-block-list {
  list-style-type: decimal !important;
  margin: 1em 0 1.25em 1.5em !important;
  padding-left: 1.25em !important;
}

.page-content ul ul,
.entry-content ul ul,
.wp-block-list ul {
  list-style-type: circle !important;
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

.page-content ul ul ul,
.entry-content ul ul ul {
  list-style-type: square !important;
}

.page-content li,
.entry-content li,
.wp-block-list li {
  margin-bottom: 0.4em;
  line-height: 1.6;
}

/* Block quotes */
.page-content blockquote,
.entry-content blockquote,
.wp-block-quote {
  border-left: 4px solid var(--color-brand-orange);
  padding: 12px 20px;
  margin: 1.5em 0;
  background: var(--color-tint-grey);
  border-radius: 0 var(--radius-tile) var(--radius-tile) 0;
  font-style: italic;
  color: var(--color-text);
}

/* Tables */
.page-content table,
.entry-content table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.page-content th,
.entry-content th,
.page-content td,
.entry-content td,
.wp-block-table th,
.wp-block-table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}
.page-content th,
.entry-content th,
.wp-block-table th {
  background: var(--color-tint-grey);
  font-weight: 700;
}

/* Alignments */
.alignwide {
  max-width: 100%;
  width: 100%;
}
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* =========================================================================
   Order Tracker & License Lookup Component
   ========================================================================= */
.order-tracker {
  max-width: 920px;
  margin: 0 auto;
}

.order-tracker__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 36px);
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.order-tracker__search-card {
  text-align: center;
}
.order-tracker__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-tint-peach);
  color: var(--color-brand-orange);
  margin-bottom: 16px;
}
.order-tracker__search-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  color: var(--color-heading);
  margin-bottom: 8px;
}
.order-tracker__search-header p {
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto 28px;
  font-size: 0.95rem;
}

.order-tracker__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .order-tracker__form-grid { grid-template-columns: 1fr; }
}

.order-tracker__field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.order-tracker__field input[type="text"],
.order-tracker__field input[type="email"] {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-tile);
  background: var(--color-bg);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.order-tracker__field input:focus {
  outline: none;
  border-color: var(--color-brand-orange);
  background: var(--color-surface);
}

.order-tracker__alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-tile);
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 0.9rem;
}
.order-tracker__alert--error {
  background: #FDF2F2;
  border: 1px solid #FDE8E8;
  color: #9B1C1C;
}

/* Header & Metadata */
.order-tracker__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 640px) {
  .order-tracker__meta { grid-template-columns: 1fr; gap: 12px; }
}

.order-tracker__meta-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.order-tracker__meta-value { margin: 0; font-size: 1.5rem; color: var(--color-heading); }
.order-tracker__meta-value-sm { font-weight: 600; color: var(--color-text); }

.order-tracker__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--color-tint-grey);
  color: var(--color-text);
}
.order-tracker__badge--completed { background: #DEF7EC; color: #03543F; }
.order-tracker__badge--processing { background: #E1EFFE; color: #1E429F; }
.order-tracker__badge--on-hold { background: #FEF08A; color: #713F12; }

/* Visual Stepper */
.order-tracker__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.order-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.order-tracker__step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.order-tracker__step.is-complete .order-tracker__step-dot {
  background: var(--color-brand-orange);
  border-color: var(--color-brand-orange);
  color: var(--color-on-accent);
}
.order-tracker__step-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.order-tracker__step.is-complete .order-tracker__step-label {
  color: var(--color-heading);
  font-weight: 700;
}
.order-tracker__step-line {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  margin: 0 -10px 24px;
}
.order-tracker__step-line.is-active {
  background: var(--color-brand-orange);
}

/* License Keys Card */
.order-tracker__keys-card {
  border-left: 4px solid var(--color-brand-orange);
}
.order-tracker__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.order-tracker__section-title h3 { margin: 0; font-size: 1.25rem; color: var(--color-heading); }

.order-tracker__key-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
  padding: 20px;
  margin-bottom: 16px;
}
.order-tracker__key-item:last-child { margin-bottom: 0; }

.order-tracker__key-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.order-tracker__key-product {
  display: flex;
  align-items: center;
  gap: 14px;
}
.order-tracker__key-product h4 { margin: 0 0 4px; font-size: 1rem; color: var(--color-heading); }
.order-tracker__key-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--color-surface);
  padding: 4px;
  border: 1px solid var(--color-border);
}
.order-tracker__key-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-tracker__key-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-blue);
}

.order-tracker__key-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-tile);
  padding: 14px 18px;
  margin-top: 12px;
}
.order-tracker__key-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.order-tracker__key-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.order-tracker__key-code {
  font-family: SFMono-Regular, Consolas, Monaco, 'Andale Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0.05em;
  word-break: break-all;
  background: var(--color-tint-grey);
  padding: 6px 12px;
  border-radius: 6px;
}

.order-tracker__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .order-tracker__grid { grid-template-columns: 1fr; }
}

.order-tracker__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.order-tracker__table th,
.order-tracker__table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.order-tracker__table th { text-align: left; color: var(--color-text-muted); font-weight: 600; }
.order-tracker__table tfoot th { color: var(--color-heading); font-weight: 700; font-size: 1rem; border-bottom: none; }

.order-tracker__details-list > div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}
.order-tracker__details-list > div:last-child { border-bottom: none; }
.order-tracker__details-list .label { color: var(--color-text-muted); font-weight: 600; }
.order-tracker__details-list .val { font-weight: 700; color: var(--color-heading); }

/* =========================================================================
   Contact Page & Built-in AJAX Form Component
   ========================================================================= */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}
@media (max-width: 820px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  /* Phones: the contact form first, the info cards below it. */
  .contact-page-main { order: -1; }
}

.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}
.contact-info-card:last-child { margin-bottom: 0; }
.contact-info-card--highlight {
  background: var(--color-bg);
  border-color: var(--color-border);
}
.contact-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-tint-peach);
  color: var(--color-brand-orange);
  margin-bottom: 14px;
}
.contact-info-card__icon--blue {
  background: var(--color-accent-blue-dim);
  color: var(--color-accent-blue);
}
.contact-info-card h3 {
  font-size: 1.15rem;
  color: var(--color-heading);
  margin-bottom: 8px;
}
.contact-info-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.contact-info-card p a { color: var(--color-heading); font-weight: 700; }
.contact-info-card__address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.contact-info-card__address strong { color: var(--color-heading); }
.contact-info-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-blue);
  background: var(--color-accent-blue-dim);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.contact-form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.contact-form__title {
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  color: var(--color-heading);
  margin-bottom: 8px;
}
.contact-form__subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .contact-form__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
}

.contact-form__field {
  margin-bottom: 20px;
}
.contact-form__grid .contact-form__field { margin-bottom: 0; }

.contact-form__field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-tile);
  background: var(--color-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-brand-orange);
  background: var(--color-surface);
}

.contact-form__action {
  margin-top: 24px;
}

.contact-form__response-msg {
  padding: 14px 20px;
  border-radius: var(--radius-tile);
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.5;
}
.contact-form__response-msg--success {
  background: #DEF7EC;
  border: 1px solid #BCF0DA;
  color: #03543F;
}
.contact-form__response-msg--error {
  background: #FDF2F2;
  border: 1px solid #FDE8E8;
  color: #9B1C1C;
}

/* =========================================================================
   404 — page not found
   A single centred card on a soft brand glow: gradient "404", heading,
   product search (live suggestions), home/shop buttons, category chips.
   ========================================================================= */
.error-404 {
  /* No footer on the 404, so the section fills the rest of the screen and
     centres the card in it. */
  min-height: calc(100vh - 170px);
  min-height: calc(100dvh - 170px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--section-padding-y) / 2);
  background:
    radial-gradient(60% 50% at 50% 0%, var(--color-accent-blue-dim), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, var(--color-tint-peach), transparent 70%);
}
.error-404 > .container { width: 100%; }
.error-404__card {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 56px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-card) * 1.5);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  text-align: center;
}
.error-404__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue-dim);
  color: var(--color-accent-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.error-404__code {
  font-family: var(--font-heading);
  font-size: clamp(5.5rem, 16vw, 9.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--color-brand-orange) 30%, color-mix(in srgb, var(--color-brand-orange) 35%, var(--color-surface)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  user-select: none;
}
.error-404__title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom: 10px;
}
.error-404__text {
  max-width: 480px;
  margin: 0 auto 28px;
  color: var(--color-text-muted);
}

/* Reuses the header search box (and its live-suggestions dropdown), framed
   for a light surface. */
.error-404__search {
  max-width: 520px;
  height: 52px;
  margin: 0 auto 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  text-align: left;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.error-404__search:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 4px var(--color-accent-blue-dim);
}
.error-404__search .site-search__input { padding-left: 22px; }
.error-404__search .site-search__btn { border-left: none; width: 56px; }

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.error-404__popular {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.error-404__popular-label {
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.error-404__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.error-404__chips a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}
.error-404__chips a:hover,
.error-404__chips a:focus-visible {
  border-color: var(--color-brand-orange);
  background: var(--color-tint-peach);
  color: var(--color-brand-orange);
}

@media (max-width: 520px) {
  .error-404__actions .btn { flex: 1 1 100%; }
}