/* ==========================================================================
   TOPKKO TOOLS — Global stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography & helpers
   4.  Buttons & form controls
   5.  Header / navigation / mobile drawer
   6.  Hero
   7.  Categories
   8.  Product card (shared component)
   9.  Sections: promo, features, testimonials, newsletter
   10. Footer
   11. Breadcrumb & page head
   12. Products listing (filters, toolbar, pagination)
   13. Product details (gallery, options, tabs, reviews)
   14. Overlays: search, quick view, toast
   15. Animations
   16. Responsive
   17-27. Later additions, numbered in place below
   28. Content pages (About, Contact, policies) and FAQs
   29. Compare (card button, tray, table)
   30. Error pages
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand */
  --primary-color: #a50f2d;
  --primary-dark: #7d0a21;
  --primary-light: #c8163a;
  --primary-soft: #fdf2f4;
  --secondary-color: #14161a;
  --secondary-light: #22262d;
  --accent-color: #f5a300;

  /* Text */
  --text-color: #1d2129;
  --text-strong: #0d0f13;
  --muted-color: #6b7280;
  --muted-light: #9aa3af;

  /* Surfaces */
  --background-color: #ffffff;
  --surface-alt: #f1f4f8;
  --surface-dark: #14161a;
  /* Alternating dark band — near-black carrying a trace of the logo red */
  --section-dark: #160708;
  --border-color: #e4e7ec;
  --border-strong: #cdd2da;

  /* Status */
  --success-color: #0f8a45;
  --danger-color: #d32f2f;
  --warning-color: #e08600;
  --star-color: #f5a300;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 20, 27, .05);
  --shadow: 0 2px 8px rgba(16, 20, 27, .06);
  --shadow-md: 0 8px 24px rgba(16, 20, 27, .09);
  --shadow-lg: 0 18px 48px rgba(16, 20, 27, .14);

  /* Shape */
  --border-radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Type */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1320px;
  --gutter: 24px;
  --header-height: 78px;
  --nav-height: 50px;
  /* What actually stays pinned while scrolling */
  --sticky-header: calc(var(--header-height) + var(--nav-height));

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --transition: .25s var(--ease);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-header) + 16px);

  /* Sideways overflow is stopped here rather than on body, and this matters
     more than it looks. `overflow-x: hidden` on body makes the browser compute
     overflow-y as auto, which promotes body to a scroll container in its own
     right. The document then stops being the thing that scrolls, and the arrow
     keys, Page Up/Down, Home and End all stop working — the wheel still does,
     because it scrolls whatever is under the pointer, so the bug reads as
     "arrow keys are broken" rather than "the page is the wrong scroller". */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-color);
  background: var(--background-color);
  /* clip, not hidden: it contains overflow without creating a scroll box. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { height: auto; }

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--primary-color); color: #fff; }

/* Accessibility helpers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 999;
  background: var(--primary-color);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* Small helpers the templates lean on and the stylesheet never declared.
   .hide is the one that mattered: the address book's add/edit form is marked
   with it until Add address is pressed, so with no rule behind it the form was
   simply always open, and Add address looked like a button that scrolled.
   .muted was not grey, .grow was not filling its card, and .num was set in the
   body face like any other text. */
.hide { display: none !important; }
.muted { color: var(--muted-color); }
.grow { flex: 1 1 auto; min-width: 0; }
.num { font-family: var(--font-panel); letter-spacing: .04em; }

/* ==========================================================================
   3. TYPOGRAPHY & HELPERS
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { color: var(--muted-color); }

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

.section { padding: clamp(48px, 6vw, 84px) 0; }
.section--alt { background: var(--surface-alt); }
.section--tight { padding: clamp(36px, 4vw, 56px) 0; }

/* Section heading block */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-head__text { max-width: 640px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--primary-color);
}

.section-head p { margin-top: 10px; }

.section-head__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.section-head__link:hover { color: var(--primary-color); border-color: var(--primary-color); }
.section-head__link i { transition: transform var(--transition); }
.section-head__link:hover i { transform: translateX(4px); }

/* Star rating */
.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--star-color);
  font-size: .8rem;
  line-height: 1;
}
.stars i { color: var(--star-color); }
.stars .is-empty { color: #d7dbe1; }

/* ==========================================================================
   4. BUTTONS & FORM CONTROLS
   ========================================================================== */

.btn {
  --btn-bg: var(--primary-color);
  --btn-fg: #fff;
  --btn-border: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform .12s var(--ease),
              box-shadow var(--transition);
}

.btn:hover {
  --btn-bg: var(--primary-dark);
  --btn-border: var(--primary-dark);
  box-shadow: 0 5px 14px rgba(165, 15, 45, .2);
}

.btn:active { transform: translateY(1px); }

.btn--dark { --btn-bg: var(--secondary-color); --btn-border: var(--secondary-color); }
.btn--dark:hover { --btn-bg: #000; --btn-border: #000; box-shadow: 0 5px 14px rgba(20, 22, 26, .25); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--text-strong); --btn-border: var(--border-strong); }
.btn--outline:hover { --btn-bg: var(--secondary-color); --btn-fg: #fff; --btn-border: var(--secondary-color); box-shadow: none; }

/* The quiet one: Cancel, Remove, Sign out. It has to read as the way out of
   something, not as a second thing to do, so it carries no fill and no border
   until it is hovered. */
.btn--plain {
  --btn-bg: transparent;
  --btn-fg: var(--muted-color);
  --btn-border: transparent;
}
.btn--plain:hover {
  --btn-bg: var(--surface-alt);
  --btn-fg: var(--text-strong);
  --btn-border: transparent;
  box-shadow: none;
}

.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .45); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--secondary-color); --btn-border: #fff; box-shadow: none; }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: .78rem; }
.btn--lg { padding: 16px 34px; font-size: .95rem; }

.btn[disabled],
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* Icon-only button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-color);
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: #fff;
}

/* Inputs */
.field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field::placeholder { color: var(--muted-light); }
.field:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(165, 15, 45, .12);
}

.field-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted-color);
  margin-bottom: 6px;
}

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Checkbox / radio rows */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: .875rem;
  color: var(--text-color);
  transition: color var(--transition);
}
.check:hover { color: var(--primary-color); }

.check input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all var(--transition);
}
.check input[type='radio'] { border-radius: 50%; }

.check input:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
.check input:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }

.check__count { margin-left: auto; font-size: .78rem; color: var(--muted-light); }

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
}

/* --- Announcement strip --- */
.topbar {
  background: var(--secondary-color);
  color: #cfd4dc;
  font-size: .78rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
}
.topbar__msg { display: flex; align-items: center; gap: 8px; }
.topbar__msg i { color: var(--primary-light); }
.topbar__links { display: flex; align-items: center; gap: 22px; }
.topbar__links a { transition: color var(--transition); }
.topbar__links a:hover { color: #fff; }
.topbar__links i { margin-right: 6px; color: var(--muted-light); }

/* --- Main bar --- */
.header-main {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-height);
}

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

/* Search */
.header-search {
  flex: 1 1 auto;
  max-width: 620px;
  /* Without this the flex item cannot shrink past its min-content width —
     which the category <select> sets — and it shoves the header actions off
     the right edge on tablet widths. */
  min-width: 0;
}

.search-form {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--secondary-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--transition);
}
.search-form:focus-within { box-shadow: 0 0 0 3px rgba(20, 22, 26, .12); }

.search-form__select {
  flex: none;
  border: none;
  border-right: 1px solid var(--border-color);
  background: var(--surface-alt);
  padding: 0 32px 0 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-color);
  max-width: 190px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.search-form__select:focus { outline: none; }

.search-form__input {
  flex: 1 1 auto;
  border: none;
  padding: 12px 16px;
  font-size: .9rem;
  min-width: 0;
}
.search-form__input:focus { outline: none; }

.search-form__btn {
  flex: none;
  width: 54px;
  background: var(--primary-color);
  color: #fff;
  font-size: 1rem;
  transition: background var(--transition);
}
.search-form__btn:hover { background: var(--primary-dark); }

/* Live suggestions */
.header-search { position: relative; }

.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
}
.search-suggest.is-open { display: block; }

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition);
}
.search-suggest__item:last-child { border-bottom: none; }
.search-suggest__item:hover,
.search-suggest__item:focus-visible { background: var(--surface-alt); }

.search-suggest__item img {
  width: 46px; height: 46px;
  object-fit: contain;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  flex: none;
}
.search-suggest__name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-suggest__meta { font-size: .75rem; color: var(--muted-color); }
.search-suggest__price { margin-left: auto; font-weight: 700; color: var(--primary-color); font-size: .875rem; white-space: nowrap; }
.search-suggest__empty { padding: 22px 16px; text-align: center; color: var(--muted-color); font-size: .875rem; }

/* Header actions */
.header-actions { flex: none; display: flex; align-items: center; gap: 6px; }

.header-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-color);
  transition: background var(--transition), color var(--transition);
}
.header-action:hover { background: var(--surface-alt); color: var(--primary-color); }
.header-action > i { font-size: 1.15rem; }

.header-action__text { display: flex; flex-direction: column; line-height: 1.25; }
.header-action__label { font-size: .68rem; color: var(--muted-color); text-transform: uppercase; letter-spacing: .06em; }
.header-action__value { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--text-strong); }

.badge-count {
  position: absolute;
  top: 2px;
  left: 24px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--primary-color);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  transition: transform .25s var(--ease);
}
.badge-count[data-count='0'] { display: none; }
.badge-count.is-bumped { animation: badgePop .45s var(--ease); }

/* Burger + mobile-only search toggle (both shown by the responsive rules) */
.header-toggle,
.header-search-btn { display: none; }

/* --- Navigation bar (carries the logo's crimson) --- */
.site-nav { background: var(--primary-color); }

.site-nav__inner { display: flex; align-items: stretch; gap: 4px; }

.nav-list { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }

.nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--nav-height);
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  transition: background var(--transition), color var(--transition);
}

.nav-list > li > a::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px;
  bottom: 0;
  height: 3px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-list > li > a:hover,
.nav-list > li > a[aria-current='page'] { background: rgba(0, 0, 0, .16); color: #fff; }
.nav-list > li > a:hover::after,
.nav-list > li > a[aria-current='page']::after { transform: scaleX(1); }

.nav-list > li > a .fa-chevron-down { color: rgba(255, 255, 255, .75); }

.nav-list .badge-hot {
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--accent-color);
  color: #3a2600;
  padding: 2px 5px;
  border-radius: 3px;
  transform: translateY(-6px);
}

/* --- Dropdowns on the nav bar ---------------------------------------------
   `.nav-item--has-menu` opens on hover (desktop pointer) and on click/focus
   (keyboard), so the menus are reachable without a mouse. */

.nav-item { position: relative; }

.nav-item__panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-item:hover > .nav-item__panel,
.nav-item.is-open > .nav-item__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item > a .fa-chevron-down { font-size: .62rem; opacity: .6; transition: transform var(--transition); }
.nav-item:hover > a .fa-chevron-down,
.nav-item.is-open > a .fa-chevron-down { transform: rotate(180deg); }

/* --- Products mega menu: categories left, subcategories right --- */

.nav-mega {
  width: min(94vw, 880px);
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 386px;
}

.nav-mega__cats {
  border-right: 1px solid var(--border-color);
  background: var(--surface-alt);
  padding: 10px;
  overflow-y: auto;
  max-height: 460px;
}

.nav-mega__cat {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-color);
  transition: background var(--transition), color var(--transition);
}
.nav-mega__cat i:first-child {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  font-size: .8rem;
  transition: all var(--transition);
}
.nav-mega__cat .fa-chevron-right { margin-left: auto; font-size: .62rem; opacity: 0; transition: opacity var(--transition); }
.nav-mega__cat:hover,
.nav-mega__cat.is-active { background: #fff; color: var(--primary-color); box-shadow: var(--shadow-xs); }
.nav-mega__cat.is-active i:first-child { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.nav-mega__cat.is-active .fa-chevron-right { opacity: 1; }

.nav-mega__panel { padding: 22px 24px; display: none; }
.nav-mega__panel.is-active { display: block; animation: fadeUp .25s var(--ease); }

.nav-mega__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.nav-mega__head h4 { font-size: 1rem; }
.nav-mega__head small { font-size: .74rem; color: var(--muted-color); }

.nav-mega__subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  margin-bottom: 18px;
}
.nav-mega__sub {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  color: var(--muted-color);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.nav-mega__sub::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
  transition: background var(--transition);
}
.nav-mega__sub:hover { background: var(--surface-alt); color: var(--primary-color); padding-left: 13px; }
.nav-mega__sub:hover::before { background: var(--primary-color); }

.nav-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.nav-mega__cta i { transition: transform var(--transition); }
.nav-mega__cta:hover i { transform: translateX(4px); }

/* --- Simple dropdown (Brands) --- */

.nav-drop { width: 288px; padding: 10px; }

.nav-drop__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.nav-drop__link:hover { background: var(--surface-alt); color: var(--primary-color); }
.nav-drop__link b { display: block; font-size: .86rem; color: var(--text-strong); }
.nav-drop__link small { font-size: .73rem; color: var(--muted-color); }
.nav-drop__badge {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted-light);
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.nav-drop__link:hover .nav-drop__badge { background: var(--primary-soft); color: var(--primary-color); }

/* Contact chip pushed right on the nav bar */
.nav-support {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.nav-support i { color: #fff; font-size: 1.1rem; }
.nav-support b { color: #fff; font-family: var(--font-display); }

/* --- Mobile drawer --- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 19, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 900;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed;
  top: 0; left: 0;
  height: 100dvh;
  width: min(88vw, 340px);
  background: #fff;
  z-index: 950;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .32s var(--ease);
  box-shadow: var(--shadow-lg);
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  flex: none;
}
.mobile-nav__head img { height: 34px; }

.mobile-nav__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 24px; }

.mobile-nav__section-title {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding: 18px 18px 8px;
}

.mobile-nav a.mobile-nav__link,
.mobile-nav button.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.mobile-nav__link:hover { background: var(--surface-alt); color: var(--primary-color); }
.mobile-nav__link i:first-child { width: 20px; color: var(--primary-color); font-size: .9rem; }
.mobile-nav__link .fa-chevron-right { margin-left: auto; font-size: .7rem; color: var(--muted-light); }

.mobile-nav__foot {
  flex: none;
  padding: 16px 18px;
  border-top: 1px solid var(--border-color);
  display: grid;
  gap: 10px;
  background: var(--surface-alt);
}

/* ==========================================================================
   6. HERO SLIDER  (image only — no overlaid copy)
   ========================================================================== */

.hero-slider {
  position: relative;
  background: var(--surface-alt);
  overflow: hidden;
  touch-action: pan-y;
}

.hero-slider__track {
  display: flex;
  transition: transform .55s var(--ease);
  will-change: transform;
}

.hero-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: block;
}

.hero-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  /* The banners carry their own headline text, so they are shown whole at
     their native 1672x940 ratio — any crop would slice the wording. */
  aspect-ratio: 1672 / 940;
  object-fit: contain;
  background: var(--surface-alt);
}

/* Arrows */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--text-strong);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.hero-slider:hover .hero-slider__arrow,
.hero-slider__arrow:focus-visible { opacity: 1; }
.hero-slider__arrow:hover { background: var(--primary-color); color: #fff; }
.hero-slider__arrow--prev { left: 18px; }
.hero-slider__arrow--next { right: 18px; }

/* Dots — below the artwork, not over it: the banners carry their own
   bottom strip of copy that an overlay would sit on top of. */
.hero-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  background: #fff;
}
.hero-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  border: none;
  transition: all var(--transition);
}
.hero-slider__dot:hover { background: var(--muted-color); }
.hero-slider__dot.is-active {
  width: 30px;
  background: var(--primary-color);
}

/* --- Hero video (replaces the image slider) --- */

.hero-video {
  position: relative;
  background: var(--surface-alt);
  overflow: hidden;
  line-height: 0;
}

.hero-video__media {
  display: block;
  width: 100%;
  height: auto;
  /* Same 16:9 box the banners used, so swapping back causes no reflow */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-alt);
}

/* Trust strip under the hero */
.trust-strip { border-bottom: 1px solid var(--border-color); background: #fff; }
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-right: 1px solid var(--border-color);
}
.trust-item:last-child { border-right: none; }
.trust-item i { font-size: 1.35rem; color: var(--primary-color); flex: none; }
.trust-item b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--text-strong); }
.trust-item span { font-size: .78rem; color: var(--muted-color); }

/* ==========================================================================
   7. CATEGORIES
   ========================================================================== */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.category-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary-color);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.category-card:hover::before { transform: scaleY(1); }

.category-card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--primary-color);
  font-size: 1.25rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.category-card:hover .category-card__icon {
  background: var(--primary-color);
  color: #fff;
  transform: scale(1.06);
}

.category-card h3 { font-size: 1rem; line-height: 1.3; }
.category-card p { font-size: .8rem; margin-top: 4px; }

.category-card__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted-color);
}
.category-card__foot i { color: var(--primary-color); transition: transform var(--transition); }
.category-card:hover .category-card__foot i { transform: translateX(4px); }

/* ==========================================================================
   8. PRODUCT CARD  (shared across every page)
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
/* Needed because the rule above sets display, which beats the browser's own
   [hidden]. Used by the wishlist page, where unsaving a product takes its card
   off the list — hidden rather than removed, so a save the server refuses puts
   the card back with it. */
.product-card[hidden] { display: none; }

/* Media — this wrapper, not the card, anchors the overlay controls so they
   can never cover the Add to Cart button underneath. */
.product-card__top { position: relative; }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform .45s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.07); }

/* Badges */
.product-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 3;
}
.badge {
  font-family: var(--font-display);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--secondary-color);
  color: #fff;
  line-height: 1.4;
}
.badge--new { background: var(--success-color); }
.badge--best { background: var(--accent-color); color: #3a2600; }
.badge--out { background: var(--muted-color); }

/* Wishlist */
.wishlist-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: .85rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.wishlist-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
.wishlist-btn.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.wishlist-btn.is-active i { font-weight: 900; }
.wishlist-btn.is-pop { animation: heartPop .45s var(--ease); }

/* Hover quick actions */
.product-card__quick {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.quick-action {
  flex: 1 1 auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(20, 22, 26, .93);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}
.quick-action:hover { background: var(--primary-color); }

/* Body */
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  flex: 1 1 auto;
}

.product-card__cat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.product-card__title {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  transition: color var(--transition);
}
.product-card__title:hover { color: var(--primary-color); }

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--muted-color);
}
.product-card__rating b { color: var(--text-color); font-weight: 600; }

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.price__now {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.price__was { font-size: .82rem; color: var(--muted-light); text-decoration: line-through; }
.price__off { font-size: .74rem; font-weight: 700; color: var(--success-color); }

.product-card__stock { font-size: .74rem; display: flex; align-items: center; gap: 6px; }
.product-card__stock.in { color: var(--success-color); }
.product-card__stock.out { color: var(--danger-color); }
.product-card__stock i { font-size: .5rem; }

.product-card__foot { padding: 0 16px 16px; display: flex; gap: 8px; }
.product-card__foot .btn { flex: 1 1 auto; }
.product-card__foot .icon-btn { flex: none; }

/* Card state after add-to-cart */
.btn.is-added {
  --btn-bg: var(--success-color);
  --btn-border: var(--success-color);
  pointer-events: none;
}

/* List view variant (products page) */
.product-grid.is-list { grid-template-columns: 1fr; gap: 16px; }

.is-list .product-card { flex-direction: row; }
.is-list .product-card__top { width: 230px; flex: none; }
.is-list .product-card__media { height: 100%; aspect-ratio: auto; min-height: 200px; }
.is-list .product-card__quick { display: none; }
.is-list .product-card__body { padding: 20px; gap: 10px; }
.is-list .product-card__title {
  font-size: 1.05rem;
  -webkit-line-clamp: 2;
  min-height: 0;
}
.is-list .product-card__desc {
  font-size: .85rem;
  color: var(--muted-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.is-list .price { margin-top: 0; }
.is-list .product-card__foot {
  padding: 20px 20px 20px 0;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  min-width: 190px;
}
.is-list .product-card__foot .btn { width: 100%; }
.is-list .product-card__foot .icon-btn { width: 100%; }
.product-card__desc { display: none; }
.is-list .product-card__desc { display: -webkit-box; }

/* Horizontal scroller (new arrivals) */
.product-scroller {
  --scroller-gap: 22px;
  --scroller-per-view: 4;
  display: grid;
  grid-auto-flow: column;
  /* Show a whole number of cards at rest so the row never ends on a card
     sliced by the container edge. */
  grid-auto-columns: calc(
    (100% - (var(--scroller-per-view) - 1) * var(--scroller-gap)) / var(--scroller-per-view)
  );
  gap: var(--scroller-gap);
  overflow-x: auto;
  /* Without this the element is also a vertical scroll container, and a
     vertical swipe starting on the carousel is swallowed instead of
     scrolling the page. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the card hover lift, which would otherwise be clipped */
  padding: 6px 2px 12px;
  margin: -6px -2px -12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.product-scroller::-webkit-scrollbar { display: none; }
.product-scroller > * { scroll-snap-align: start; }

/* Arrows dim once you reach either end */
.scroller-nav .icon-btn:disabled {
  opacity: .35;
  pointer-events: none;
}

.scroller-nav { display: flex; gap: 8px; }

/* ==========================================================================
   9. PROMO / FEATURES / TESTIMONIALS / NEWSLETTER
   ========================================================================== */

/* Promo banner */
.promo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(115deg, #14161a 0%, #24272e 46%, #7d0a21 100%);
  color: #fff;
  padding: clamp(34px, 5vw, 62px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 32px;
}
.promo::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 46px solid rgba(255, 255, 255, .05);
}
.promo__body { position: relative; z-index: 2; max-width: 560px; }
.promo .eyebrow { color: #ffb3c2; }
.promo .eyebrow::before { background: #ffb3c2; }
.promo h2 { color: #fff; margin-bottom: 12px; }
.promo p { color: rgba(255, 255, 255, .78); margin-bottom: 24px; }

.promo__deal {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.promo__deal span { color: var(--accent-color); }

.countdown { display: flex; gap: 10px; position: relative; z-index: 2; }
.countdown__unit {
  min-width: 74px;
  padding: 12px 6px;
  text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.countdown__unit b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.countdown__unit span {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}

/* Small promo pair */
.promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.promo-mini {
  position: relative;
  border-radius: var(--border-radius);
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.promo-mini:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.promo-mini--dark { background: var(--secondary-color); border-color: var(--secondary-color); }
.promo-mini--dark h3, .promo-mini--dark .promo-mini__link { color: #fff; }
.promo-mini--dark p { color: rgba(255, 255, 255, .7); }
.promo-mini__tag {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.promo-mini--dark .promo-mini__tag { color: var(--accent-color); }
.promo-mini p { font-size: .88rem; max-width: 300px; }
.promo-mini__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
}
.promo-mini__link i { transition: transform var(--transition); }
.promo-mini:hover .promo-mini__link i { transform: translateX(5px); }
.promo-mini__art {
  position: absolute;
  right: -30px; bottom: -30px;
  width: 190px;
  opacity: .5;
  pointer-events: none;
}

/* Why choose us */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.feature-card__icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: 1.4rem;
  transition: background var(--transition), color var(--transition);
}
.feature-card:hover .feature-card__icon { background: var(--primary-color); color: #fff; }
.feature-card h3 { font-size: .98rem; margin-bottom: 6px; }
.feature-card p { font-size: .82rem; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.testimonial {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 6px; right: 22px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--primary-soft);
}
.testimonial p { font-size: .9rem; color: var(--text-color); position: relative; z-index: 1; }
.testimonial__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.testimonial__avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary-color);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
}
.testimonial__who b { display: block; font-size: .88rem; color: var(--text-strong); }
.testimonial__who span { font-size: .76rem; color: var(--muted-color); }

/* Newsletter */
.newsletter {
  background: var(--secondary-color);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 340px at 82% 50%, rgba(165, 15, 45, .42), transparent 65%);
}
.newsletter__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding-block: clamp(40px, 5vw, 64px);
}
.newsletter h2 { color: #fff; }
.newsletter p { color: rgba(255, 255, 255, .72); margin-top: 10px; }

.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form__control { flex: 1 1 240px; min-width: 0; }
.newsletter-form .field {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  padding: 15px 16px;
}
.newsletter-form .field::placeholder { color: rgba(255, 255, 255, .5); }
.newsletter-form .field:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .12); }

.form-msg { font-size: .8rem; margin-top: 8px; display: none; }
.form-msg.is-visible { display: block; }
.form-msg.is-error { color: #ff97a8; }
.form-msg.is-success { color: #6fe0a0; }
.newsletter-form .field.is-invalid { border-color: #ff97a8; }

.newsletter__note { font-size: .76rem; color: rgba(255, 255, 255, .5); margin-top: 14px; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer { background: #101216; color: #9aa3af; font-size: .875rem; }

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
  gap: 40px 32px;
  padding: clamp(44px, 5vw, 68px) 0 44px;
}

.footer-brand img { height: 40px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-brand p { color: #8b94a1; font-size: .85rem; margin-bottom: 20px; max-width: 320px; }

.footer-col h3 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 700;
}

.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: #9aa3af; transition: color var(--transition), padding-left var(--transition); font-size: .86rem; }
.footer-col a:hover { color: #fff; padding-left: 5px; }

.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: .85rem; line-height: 1.55; }
.footer-contact i { color: var(--primary-light); margin-top: 4px; flex: none; width: 16px; }
.footer-contact a { color: #9aa3af; }
.footer-contact a:hover { color: #fff; }

.social-links { display: flex; gap: 10px; }
.social-links a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  color: #cbd2db;
  transition: all var(--transition);
}
.social-links a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .8rem;
}
.footer-bottom__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: #fff; }

.payment-methods { display: flex; align-items: center; gap: 10px; }
.payment-methods span { font-size: .74rem; color: #6f7885; }
.payment-methods i {
  font-size: 1.5rem;
  color: #b7bec8;
  transition: color var(--transition);
}
.payment-methods i:hover { color: #fff; }

/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary-color);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--primary-dark); }

/* ==========================================================================
   11. BREADCRUMB & PAGE HEAD
   ========================================================================== */

.page-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-color);
  padding: 22px 0 26px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8rem;
  color: var(--muted-color);
  margin-bottom: 14px;
}
.breadcrumb a { transition: color var(--transition); }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: '/'; color: var(--border-strong); }
.breadcrumb [aria-current='page'] { color: var(--text-strong); font-weight: 500; }

.page-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-head__count { font-size: .85rem; color: var(--muted-color); }
.page-head__count b { color: var(--text-strong); }

/* ==========================================================================
   12. PRODUCTS LISTING
   ========================================================================== */

.shop-layout {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 32px 0 64px;
}

/* --- Sidebar --- */
.shop-sidebar {
  position: sticky;
  top: calc(var(--sticky-header) + 20px);
  max-height: calc(100vh - var(--sticky-header) - 40px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.shop-sidebar__scroll { display: grid; gap: 12px; }

.filter-block {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
  overflow: hidden;
}

.filter-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-strong);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.filter-block__head i { font-size: .7rem; color: var(--muted-color); transition: transform var(--transition); }
.filter-block[open] .filter-block__head { border-bottom-color: var(--border-color); }
.filter-block[open] .filter-block__head i { transform: rotate(180deg); }
.filter-block__head::-webkit-details-marker { display: none; }
.filter-block__head::marker { content: ''; }

.filter-block__body { padding: 12px 16px 16px; }
.filter-block__body.is-scroll { max-height: 260px; overflow-y: auto; }

/* Applied filter chips */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.active-filters:empty { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--primary-soft);
  border: 1px solid #f3d3da;
  color: var(--primary-dark);
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 500;
}
.filter-chip button {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: .55rem;
  transition: background var(--transition);
}
.filter-chip button:hover { background: var(--primary-dark); }

.clear-all {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted-color);
  text-decoration: underline;
  transition: color var(--transition);
}
.clear-all:hover { color: var(--danger-color); }

/* Price inputs */
.price-fields { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.price-fields .field { padding: 9px 10px; font-size: .82rem; text-align: center; }
.price-fields span { color: var(--muted-light); font-size: .8rem; }

.price-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.price-preset {
  font-size: .74rem;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--muted-color);
  transition: all var(--transition);
}
.price-preset:hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--primary-soft); }

/* Rating filter rows */
.rating-option { display: flex; align-items: center; gap: 8px; }
.rating-option .stars { font-size: .75rem; }

/* --- Toolbar --- */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
  margin-bottom: 20px;
}

.toolbar__result { font-size: .85rem; color: var(--muted-color); margin-right: auto; }
.toolbar__result b { color: var(--text-strong); }

.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__group label { font-size: .8rem; color: var(--muted-color); white-space: nowrap; }
.toolbar__group .field { padding: 9px 12px; font-size: .82rem; padding-right: 34px; }

.view-toggle {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle button {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  color: var(--muted-color);
  transition: all var(--transition);
}
.view-toggle button + button { border-left: 1px solid var(--border-color); }
.view-toggle button:hover { background: var(--surface-alt); }
.view-toggle button.is-active { background: var(--secondary-color); color: #fff; }

.filter-open-btn { display: none; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--border-radius);
  background: #fff;
}
.empty-state i { font-size: 2.6rem; color: var(--border-strong); margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 420px; margin: 0 auto 22px; font-size: .9rem; }

/* Skeleton shimmer */
.skeleton-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: #fff;
}
.skeleton-card__media { aspect-ratio: 1/1; background: var(--surface-alt); }
.skeleton-card__body { padding: 16px; display: grid; gap: 10px; }
.skeleton-line { height: 12px; border-radius: 4px; background: var(--surface-alt); }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-card__media,
.skeleton-line {
  background: linear-gradient(90deg, #f0f2f5 25%, #e7eaef 37%, #f0f2f5 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 40px;
}
/* Only the controls and the ellipsis get a box. Scoping matters here: a bare
   `.pagination span` would also hit the label inside Prev / Next and draw a
   second bordered box within the control.

   Anchors and buttons both appear: the server renders the pager as links so a
   crawler can reach page 26, and products.js swaps in buttons once you page
   in place. They have to be indistinguishable. */
.pagination button,
.pagination a,
.pagination .pagination__dots {
  text-decoration: none;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-color);
  transition: all var(--transition);
}

/* The word inside Prev / Next is plain text, not a control */
.pagination__label {
  border: 0;
  background: none;
  padding: 0;
  min-width: 0;
  height: auto;
  font: inherit;
  color: inherit;
}
.pagination button:hover:not(:disabled),
.pagination a:hover { border-color: var(--secondary-color); background: var(--secondary-color); color: #fff; }
.pagination button.is-active,
.pagination a.is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  pointer-events: none;
}
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.pagination .pagination__dots { border-color: transparent; background: transparent; color: var(--muted-light); min-width: 26px; }

/* --- Mobile filter drawer --- */
.filter-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
}
.filter-drawer-foot { display: none; }

/* ==========================================================================
   13. PRODUCT DETAILS
   ========================================================================== */

.product-detail { padding: 32px 15px 20px; }

.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* --- Gallery --- */
.gallery { display: grid; gap: 14px; position: sticky; top: calc(var(--sticky-header) + 20px); }

.gallery__stage {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface-alt);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
  transform-origin: center;
}
.gallery__stage.is-zoomed img { transform: scale(2); padding: 0; }
.gallery__stage.is-fading img { opacity: 0; }

.gallery__badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }

.gallery__hint {
  position: absolute;
  bottom: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: .73rem;
  color: var(--muted-color);
  pointer-events: none;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  box-shadow: var(--shadow);
  z-index: 3;
  transition: all var(--transition);
}
.gallery__arrow:hover { background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }
.gallery__arrow--prev { left: 12px; }
.gallery__arrow--next { right: 12px; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
}
.gallery__thumb {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  aspect-ratio: 1/1;
  overflow: hidden;
  padding: 6px;
  transition: border-color var(--transition), transform var(--transition);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.gallery__thumb.is-active { border-color: var(--primary-color); }

/* --- Product info --- */
.product-info { display: grid; gap: 18px; }

.product-info__cat {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.product-info h1 { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.25; }

.product-info__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: .82rem;
  color: var(--muted-color);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}
.product-info__meta .divider { width: 1px; height: 14px; background: var(--border-color); }
.product-info__meta b { color: var(--text-strong); }
.product-info__meta a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; }
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 600;
}
.stock-pill.in { background: #e8f6ee; color: var(--success-color); }
.stock-pill.out { background: #fdeaea; color: var(--danger-color); }

/* Price block */
.price-box {
  background: var(--surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px 22px;
}
.price-box .price { margin: 0; align-items: baseline; }
.price-box .price__now { font-size: 2.1rem; color: var(--primary-color); }
.price-box .price__was { font-size: 1rem; }
.price-box .price__off {
  background: var(--success-color);
  color: #fff;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: .74rem;
}
.price-box__note { font-size: .78rem; color: var(--muted-color); margin-top: 8px; }
.price-box__save { font-size: .82rem; color: var(--success-color); font-weight: 600; margin-top: 6px; }

.product-info__lead { font-size: .95rem; line-height: 1.7; }

/* Options */
.option-group { display: grid; gap: 10px; }
.option-group__label {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.option-group__label span { color: var(--muted-color); font-weight: 500; text-transform: none; letter-spacing: 0; }

.option-list { display: flex; flex-wrap: wrap; gap: 10px; }

.option-pill {
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-color);
  transition: all var(--transition);
}
.option-pill:hover { border-color: var(--border-strong); }
.option-pill.is-active {
  border-color: var(--primary-color);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 600;
}

.color-list { display: flex; gap: 12px; }
.color-swatch {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  padding: 3px;
  transition: all var(--transition);
}
.color-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.color-swatch.is-active { border-color: var(--primary-color); transform: scale(1.06); }

/* Quantity + actions */
.buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}
.qty-stepper button {
  width: 44px;
  align-self: stretch;
  display: grid;
  place-items: center;
  color: var(--text-color);
  transition: background var(--transition), color var(--transition);
}
.qty-stepper button:hover:not(:disabled) { background: var(--secondary-color); color: #fff; }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.qty-stepper input {
  width: 54px;
  height: 46px;
  border: none;
  border-inline: 1.5px solid var(--border-color);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; }

.buy-row .btn { flex: 1 1 180px; }
.buy-row .icon-btn { width: 50px; height: auto; flex: none; }
.buy-row .icon-btn.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* Delivery info */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.delivery-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
}
.delivery-item i { color: var(--primary-color); font-size: 1.05rem; margin-top: 2px; flex: none; }
.delivery-item b { display: block; font-size: .84rem; color: var(--text-strong); font-family: var(--font-display); }
.delivery-item span { font-size: .78rem; color: var(--muted-color); }

.assurance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .78rem;
  color: var(--muted-color);
}
.assurance-row i { color: var(--success-color); margin-right: 6px; }

/* --- Tabs --- */
.tabs { margin-top: 56px; }

.tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__nav::-webkit-scrollbar { display: none; }

.tabs__btn {
  position: relative;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-color);
  white-space: nowrap;
  transition: color var(--transition);
}
.tabs__btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--primary-color);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.tabs__btn:hover { color: var(--text-strong); }
.tabs__btn[aria-selected='true'] { color: var(--primary-color); }
.tabs__btn[aria-selected='true']::after { transform: scaleX(1); }
.tabs__btn span {
  font-family: var(--font-body);
  font-size: .7rem;
  color: var(--muted-light);
  margin-left: 5px;
}

.tabs__panel { padding: 30px 0; animation: fadeUp .35s var(--ease); }
.tabs__panel[hidden] { display: none; }

.prose { max-width: 860px; }
.prose p { font-size: .95rem; line-height: 1.8; margin-bottom: 16px; color: var(--text-color); }
.prose h2,
.prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 26px 0 12px; }

.spec-table { border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; }
.spec-table table { font-size: .88rem; }
.spec-table th,
.spec-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border-color); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }
.spec-table th {
  width: 38%;
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--muted-color);
  border-right: 1px solid var(--border-color);
}
.spec-table td { color: var(--text-strong); font-weight: 500; }

.feature-list { display: grid; gap: 14px; max-width: 860px; }
.feature-list li {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
  font-size: .9rem;
  line-height: 1.65;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.feature-list li:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.feature-list i { color: var(--success-color); margin-top: 4px; flex: none; }

/* --- Reviews --- */
.reviews-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }

.review-summary {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px;
  text-align: center;
  background: var(--surface-alt);
}
.review-summary__score {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
}
.review-summary .stars { font-size: 1rem; margin: 10px 0 4px; }
.review-summary__count { font-size: .8rem; color: var(--muted-color); }

.review-bars { display: grid; gap: 8px; margin-top: 22px; text-align: left; }
.review-bar { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted-color); }
.review-bar__track { flex: 1 1 auto; height: 7px; background: #e2e5ea; border-radius: 99px; overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--star-color); border-radius: 99px; transition: width .6s var(--ease); }
.review-bar__num { width: 34px; text-align: right; }

.review-list { display: grid; gap: 18px; }

.review-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 22px;
  background: #fff;
}
.review-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.review-card__avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-color);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
}
.review-card__who b { display: block; font-size: .9rem; color: var(--text-strong); }
.review-card__who span { font-size: .76rem; color: var(--muted-color); }
.review-card__date { margin-left: auto; font-size: .76rem; color: var(--muted-light); }
.review-card h4 { font-size: .95rem; margin-bottom: 6px; }
.review-card p { font-size: .88rem; line-height: 1.7; }
.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  color: var(--success-color);
  font-weight: 600;
  margin-top: 10px;
}

/* Review form */
.review-form {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px;
  background: var(--surface-alt);
  display: grid;
  gap: 16px;
  margin-top: 8px;
}
.review-form[hidden] { display: none; }
.review-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Star rating input.

   Radio inputs and labels, not buttons: it posts with the form, it is
   keyboard operable, and it works with the script disabled. The markup runs
   five down to one because "fill this star and every lower one" needs a
   selector that reaches forwards, and row-reverse puts one back on the left
   where a reader expects it. */
.star-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  font-size: 1.4rem;
  color: #d7dbe1;
}
.star-input label {
  cursor: pointer;
  color: inherit;
  transition: color var(--transition), transform .15s var(--ease);
}

/* The checked star and everything after it in the DOM — which is every
   star below it on screen. */
.star-input__radio:checked ~ label { color: var(--star-color); }

/* Hovering previews a rating, so it has to beat the checked state rather
   than blend with it — otherwise picking a lower score than the current one
   still shows the higher one filled. */
.star-input:hover .star-input__radio:checked ~ label { color: #d7dbe1; }
.star-input label:hover,
.star-input label:hover ~ label { color: var(--star-color); }
.star-input label:hover { transform: scale(1.15); }

/* The input is visually hidden, so focus has to show on its label. */
.star-input__radio:focus-visible + label {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A short note under a field. */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted-color);
}

/* Shown in place of the write-a-review button once this customer has
   written one — waiting, or published. */
.review-mine {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .84rem;
  line-height: 1.5;
  text-align: left;
}
.review-mine i { margin-top: 2px; }

/* The review text itself, which is sanitised markup rather than a string. */
.review-card__body p { margin: 0 0 10px; }
.review-card__body p:last-child { margin-bottom: 0; }
.review-card__body ul,
.review-card__body ol { margin: 0 0 10px; padding-left: 20px; }

/* ==========================================================================
   14. OVERLAYS — quick view, toast
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13, 15, 19, .58);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__dialog {
  position: relative;
  width: min(100%, 900px);
  max-height: 90dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(.98);
  transition: transform .3s var(--ease);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  transition: all var(--transition);
}
.modal__close:hover { background: var(--danger-color); border-color: var(--danger-color); color: #fff; }

.quick-view { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.quick-view__media {
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  padding: 32px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.quick-view__media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.quick-view__body { padding: 34px 32px; display: grid; gap: 14px; align-content: start; }
.quick-view__body h3 { font-size: 1.25rem; line-height: 1.35; }

/* Toast */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 980;
  display: grid;
  gap: 10px;
  width: min(92vw, 340px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--success-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: .86rem;
  color: var(--text-strong);
  animation: toastIn .35s var(--ease);
  pointer-events: auto;
}
.toast.is-leaving { animation: toastOut .3s var(--ease) forwards; }
.toast i { font-size: 1rem; color: var(--success-color); flex: none; }
.toast--info { border-left-color: var(--secondary-color); }
.toast--info i { color: var(--secondary-color); }
.toast--warn { border-left-color: var(--warning-color); }
.toast--warn i { color: var(--warning-color); }
.toast--error { border-left-color: var(--danger-color); }
.toast--error i { color: var(--danger-color); }
.toast small { display: block; color: var(--muted-color); font-size: .76rem; }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   15. ANIMATIONS
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes badgePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(24px); }
}
@keyframes shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Items inside a horizontal carousel sit off-screen sideways, so the reveal
   observer never fires for them: they stay at opacity 0 and translated 22px
   down. That offset also makes the carousel a vertical scroll container,
   which swallows vertical page swipes on touch. Show them outright. */
.product-scroller > .reveal {
  opacity: 1;
  transform: none;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Flying image on add-to-cart */
.fly-img {
  position: fixed;
  z-index: 990;
  width: 74px; height: 74px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  transition: all .75s cubic-bezier(.5, -0.2, .7, 1);
}
/*
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}*/

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* ---- ≤ 1280px ---- */
@media (max-width: 1280px) {
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer-col--shop { display: none; }
}

/* ---- ≤ 1100px ---- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-scroller { --scroller-per-view: 3; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 22px; }
  .nav-support { display: none; }
  .nav-list > li > a { padding: 0 12px; font-size: .78rem; }
}

/* ---- ≤ 1024px — tablet ---- */
@media (max-width: 1024px) {
  :root { --header-height: 68px; --nav-height: 0px; }

  /* Below the desktop nav there is no room for a 190px category picker
     next to a usable search field — the drawer covers category browsing. */
  .search-form__select { display: none; }
  .logo img { height: 38px; }

  /* Header collapses to logo / search / actions with a burger */
  .header-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-strong);
    font-size: 1.05rem;
    flex: none;
  }
  .site-nav { display: none; }
  .topbar__links li:not(:last-child) { display: none; }

  .header-main { gap: 14px; }
  .header-action--account,
  .header-action .header-action__text { display: none; }
  .header-action { padding: 8px 10px; }
  .badge-count { left: 22px; }

  /* Hero stacks */

  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }

  .promo { grid-template-columns: 1fr; }
  .newsletter__inner { grid-template-columns: 1fr; gap: 24px; }

  .product-detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .gallery { position: static; }
  .reviews-layout { grid-template-columns: 1fr; gap: 26px; }

  /* Filter sidebar becomes a drawer */
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar {
    position: fixed;
    top: 0; left: 0;
    z-index: 950;
    width: min(90vw, 360px);
    height: 100dvh;
    max-height: none;
    background: #fff;
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .32s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 90px;
    overflow-y: auto;
  }
  .shop-sidebar.is-open { transform: translateX(0); }
  .filter-drawer-head { display: flex; }
  .filter-block { border: none; border-bottom: 1px solid var(--border-color); border-radius: 0; }

  /* The panel itself must not scroll — only the middle section does, so the
     action bar stays pinned. (A transformed ancestor also makes
     `position: fixed` scroll with the content, so static + flex is correct.) */
  .shop-sidebar { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .shop-sidebar__scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* One scroll region, not nested ones */
  .shop-sidebar .filter-block__body.is-scroll { max-height: none; overflow: visible; }

  .filter-drawer-foot {
    display: flex;
    gap: 10px;
    flex: none;
    padding: 14px 18px;
    background: #fff;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 16px rgba(16, 20, 27, .06);
  }
  .filter-drawer-foot .btn { flex: 1 1 auto; }
  .filter-open-btn { display: inline-flex; }
  .toolbar__result { width: 100%; margin-right: 0; order: -1; }
}

/* ---- ≤ 860px ---- */
@media (max-width: 860px) {
	.check input[type='checkbox']:checked::after { left: 7px;
    top: 3px;}
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col--shop { display: block; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-pair { grid-template-columns: 1fr; }
  .quick-view { grid-template-columns: 1fr; }
  .quick-view__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 24px; }
  .review-form__row { grid-template-columns: 1fr; }
  .is-list .product-card { flex-direction: column; }
  .is-list .product-card__top { width: 100%; }
  .is-list .product-card__media { width: 100%; aspect-ratio: 1/1; min-height: 0; }
  .is-list .product-card__foot { padding: 0 16px 16px; flex-direction: row; align-self: stretch; min-width: 0; }
  .is-list .product-card__desc { -webkit-line-clamp: 3; }
}

/* ---- ≤ 768px — mobile ---- */
@media (max-width: 768px) {
  :root { --gutter: 16px; }

  .hero-slider__arrow { display: none; }

  /* Search drops to its own row */
  .header-main { flex-wrap: wrap; padding-block: 10px; gap: 10px; }
  .header-search { order: 3; flex: 1 0 100%; max-width: none; }
  .logo { margin-right: auto; }
  .logo img { height: 34px; }
  .search-form__select { display: none; }
  .search-form { border-width: 1.5px; }
  .search-form__input { padding: 10px 14px; font-size: .85rem; }
  .search-form__btn { width: 46px; }

  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A partial third card is the swipe affordance on touch */
  .product-scroller { --scroller-per-view: 2.15; --scroller-gap: 14px; }
  .product-card__body { padding: 12px; gap: 6px; }
  .product-card__foot { padding: 0 12px 12px; }
  .product-card__title { font-size: .84rem; }
  .price__now { font-size: 1.05rem; }
  .product-card__quick { opacity: 1; pointer-events: auto; transform: none; position: static; padding: 0 12px; margin: 4px 0 0; }
  .product-card__quick .quick-action { height: 34px; background: var(--surface-alt); color: var(--text-color); }
  .product-card__quick .quick-action:hover { background: var(--secondary-color); color: #fff; }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .category-card { padding: 16px 14px; }
  .category-card__icon { width: 44px; height: 44px; font-size: 1.05rem; }
  .category-card h3 { font-size: .9rem; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Stack icon over label so the four items stop wrapping mid-phrase */
  .trust-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; }
  .trust-item i { font-size: 1.15rem; }
  .trust-item b { font-size: .84rem; }
  .trust-item span span { font-size: .74rem; }


  .delivery-grid { grid-template-columns: 1fr; }
  .buy-row { flex-direction: column; }
  .buy-row .qty-stepper { align-self: flex-start; }
  .buy-row .btn { flex: 1 1 auto; width: 100%; }
  .buy-row .icon-btn { width: 100%; height: 48px; }

  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .tabs__btn { padding: 12px 15px; font-size: .78rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .to-top { right: 14px; bottom: 14px; }
  .toast-stack { right: 12px; left: 12px; bottom: 70px; width: auto; }

  .shop-toolbar { padding: 12px; gap: 10px; }
  .toolbar__group label { display: none; }
}

/* ---- ≤ 480px ---- */
@media (max-width: 480px) {
  /* Two cards per row leaves no space for the arrow button beside a
     nowrap "Add to Cart" label — drop it; the image and title already
     link through to the product. */
  .product-card__foot .icon-btn { display: none; }
  .product-card__foot .btn { flex: 1 1 100%; padding-inline: 10px; font-size: .72rem; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; }
  .promo { padding: 28px 22px; }
  .countdown__unit { min-width: 60px; padding: 10px 4px; }
  .countdown__unit b { font-size: 1.25rem; }
  .pagination button,
  .pagination .pagination__dots { min-width: 38px; height: 38px; padding: 0 9px; font-size: .8rem; }
  .pagination__label { display: none; }
  .price-box { padding: 16px; }
  .price-box .price__now { font-size: 1.7rem; }
  .review-summary__score { font-size: 2.6rem; }
  .spec-table th, .spec-table td { padding: 11px 12px; font-size: .82rem; }
  .spec-table th { width: 44%; }
}

/* ---- ≤ 360px — smallest supported ---- */
@media (max-width: 360px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-scroller { --scroller-per-view: 1.75; --scroller-gap: 10px; }
  .product-card__cat { font-size: .62rem; }
  .btn { padding: 11px 16px; font-size: .78rem; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. ABOUT + BRANDS  (home page sections)
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center;
}

.about-copy p { font-size: .96rem; line-height: 1.8; margin-bottom: 14px; }

.about-points { display: grid; gap: 12px; margin: 22px 0 26px; }
.about-point { display: flex; gap: 13px; align-items: flex-start; }
.about-point i {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: .85rem;
}
.about-point b { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--text-strong); }
.about-point span { font-size: .84rem; color: var(--muted-color); }

.about-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--surface-alt);
  box-shadow: var(--shadow-md);
}
.about-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.brand-card__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.brand-card__mark span { color: var(--primary-color); }
.brand-card__tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.brand-card p { font-size: .84rem; }
.brand-card__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted-color);
}
.brand-card__foot i { color: var(--primary-color); transition: transform var(--transition); }
.brand-card:hover .brand-card__foot i { transform: translateX(4px); }

/* ==========================================================================
   18. PRODUCT MEDIA ACTIONS  (brochure / video buttons)
   ========================================================================== */

.media-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.media-action {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: left;
  transition: all var(--transition);
}
.media-action:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

.media-action i:first-child {
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: #fff;
}
.media-action b {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}
.media-action small { font-size: .72rem; color: var(--muted-color); }

.media-action--pdf i:first-child { background: #c8262c; }
.media-action--pdf:hover { border-color: #c8262c; }
.media-action--youtube i:first-child { background: #ff0000; }
.media-action--youtube:hover { border-color: #ff0000; }
.media-action--instagram i:first-child {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
}
.media-action--instagram:hover { border-color: #ee2a7b; }

/* Video modal */
.modal__dialog--video { width: min(100%, 940px); background: #0b0e13; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Instagram embeds are portrait */
.video-frame--portrait { aspect-ratio: 9 / 14; max-width: 420px; margin-inline: auto; }

.video-empty {
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 54px 28px;
  color: #cbd2db;
}
.video-empty i { font-size: 2.4rem; color: var(--primary-light); }
.video-empty h3 { color: #fff; font-size: 1.1rem; }
.video-empty p { color: #8b94a1; font-size: .86rem; max-width: 400px; }

/* ==========================================================================
   19. MOBILE APP SHELL  (bottom tab bar + search sheet)
   ========================================================================== */

.tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 700;
  background: var(--primary-color);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -6px 22px rgba(12, 4, 6, .3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 7px 4px 8px;
  /* On solid crimson, 80% white clears 4.5:1 for these 10px labels */
  color: rgba(255, 255, 255, .8);
  font-size: .66rem;
  font-weight: 600;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.tabbar__item i {
  font-size: 1.16rem;
  transition: transform var(--transition);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.tabbar__item:active i { transform: scale(.86); }
.tabbar__item[aria-current='page'] { color: #fff; }
.tabbar__item[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 0;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #fff;
}

/* Inverted against the bar — a crimson pill on crimson would vanish. */
.tabbar .badge-count {
  top: 4px;
  left: 50%;
  margin-left: 4px;
  background: #fff;
  color: var(--primary-dark);
  border-color: rgba(0, 0, 0, .18);
}

/* Full-screen search sheet */
.search-sheet {
  position: fixed;
  inset: 0;
  z-index: 970;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s var(--ease);
}
.search-sheet.is-open { transform: translateY(0); visibility: visible; }

.search-sheet__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  flex: none;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
.search-sheet__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  min-width: 0;
}
.search-sheet__field i { color: var(--muted-light); flex: none; }
.search-sheet__field input {
  flex: 1 1 auto;
  border: none;
  background: none;
  font-size: .95rem;
  min-width: 0;
}
.search-sheet__field input:focus { outline: none; }
.search-sheet__cancel {
  flex: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary-color);
  padding: 8px 4px;
}

.search-sheet__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.search-sheet__section-title {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-light);
  padding: 18px 16px 8px;
}

.search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; }
.search-chip {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  font-size: .82rem;
  color: var(--text-color);
  transition: all var(--transition);
}
.search-chip:hover,
.search-chip:active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.search-sheet .search-suggest__item { padding: 12px 16px; }

/* ==========================================================================
   20. MOBILE / APP-LIKE REFINEMENTS
   ========================================================================== */

@media (max-width: 1024px) {
  /* Bottom tab bar replaces the desktop header actions */
  .tabbar { display: block; }
  /* 58px of items + the 1px top border */
  body { padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px)); }

  .to-top { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .toast-stack { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* The drawer and sheets sit above the tab bar */
  .mobile-nav,
  .search-sheet { z-index: 970; }

  /* A filter panel that is a column flex container must not squash its
     children — without this every block collapses to just its header. */
  .shop-sidebar .filter-block { flex: none; }
}

@media (max-width: 768px) {
  /* Compact app-style header: burger, logo, search icon.
     Cart and wishlist live in the tab bar instead. */
  .header-main { flex-wrap: nowrap; gap: 10px; }
  .header-search { display: none; }
  .header-actions { margin-left: auto; }
  .header-action { display: none; }
  .header-search-btn {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-strong);
    font-size: 1rem;
    flex: none;
  }
  /* The announcement strip is desktop-only — phones need the vertical space */
  .topbar { display: none; }

  /* Filters become a bottom sheet — the native app pattern */
  .shop-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 86dvh;
    border-right: none;
    border-top: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .shop-sidebar.is-open { transform: translateY(0); }
  .filter-drawer-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .filter-drawer-head::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 99px;
    background: var(--border-strong);
  }
  .filter-drawer-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* Category rail: horizontal scroll instead of a cramped grid */
  .category-grid--rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .category-grid--rail::-webkit-scrollbar { display: none; }
  .category-grid--rail .category-card {
    flex: 0 0 138px;
    scroll-snap-align: start;
    padding: 14px 12px;
  }
  .category-grid--rail .category-card__foot { display: none; }
  .category-grid--rail > .reveal { opacity: 1; transform: none; }

  /* Bigger tap targets throughout */
  .btn { min-height: 44px; }

  /* Except in the account area, where that floor was doing the damage. A
     44px slab is right for the one button a screen is asking you to press;
     applied to Edit, Remove and Cancel as well it turns a card footer into
     three of them. The primary actions here keep their own explicit heights
     — 44px on a full-width Save, 46px on Sign in — so this only lets the
     secondary ones back down to the size they read as. */
  .account .btn { min-height: 40px; }
  .account .btn--sm,
  .account .btn--plain,
  .authpage .btn--plain { min-height: 34px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .check { padding: 9px 0; }
  .check input { width: 22px; height: 22px; }
  .nav-list > li > a { min-height: 44px; }

  .media-actions { grid-template-columns: 1fr; }

  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog {
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(30px);
  }
  .modal__dialog--video { border-radius: var(--radius-lg); margin: 12px; }
}

@media (max-width: 560px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-figure { order: -1; }
}

/* ==========================================================================
   21. MOBILE DRAWER ACCORDIONS  (category → subcategory, brands)
   ========================================================================== */

.mobile-acc { border-bottom: 1px solid var(--border-color); }

.mobile-acc__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  min-height: 48px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-color);
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.mobile-acc__btn:hover,
.mobile-acc__btn[aria-expanded='true'] { background: var(--surface-alt); color: var(--primary-color); }
.mobile-acc__btn > i:first-child { width: 20px; color: var(--primary-color); font-size: .9rem; flex: none; }
.mobile-acc__btn .mobile-acc__chev {
  margin-left: auto;
  font-size: .72rem;
  color: var(--muted-light);
  transition: transform var(--transition);
}
.mobile-acc__btn[aria-expanded='true'] .mobile-acc__chev { transform: rotate(90deg); color: var(--primary-color); }

.mobile-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
  background: var(--surface-alt);
}
.mobile-acc__panel > div { overflow: hidden; }
.mobile-acc.is-open > .mobile-acc__panel { grid-template-rows: 1fr; }

.mobile-acc__sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 50px;
  min-height: 44px;
  font-size: .86rem;
  color: var(--muted-color);
  border-top: 1px solid var(--border-color);
  transition: color var(--transition), background var(--transition);
}
.mobile-acc__sub::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.mobile-acc__sub:hover { color: var(--primary-color); background: #fff; }
.mobile-acc__sub--all { font-weight: 600; color: var(--primary-color); }
.mobile-acc__sub--all::before { background: var(--primary-color); }
.mobile-acc__count { margin-left: auto; font-size: .74rem; color: var(--muted-light); }

/* ==========================================================================
   22. CART DRAWER
   ========================================================================== */

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 960;
  width: min(92vw, 420px);
  height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s var(--ease);
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  flex: none;
}
.cart-drawer__head h3 { font-size: 1.05rem; }
.cart-drawer__head .icon-btn { margin-left: auto; }
.cart-drawer__count {
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary-color);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

.cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cart-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
}

.cart-line__media {
  width: 74px; height: 74px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  overflow: hidden;
  flex: none;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.cart-line__name {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line__name:hover { color: var(--primary-color); }
.cart-line__variant { font-size: .74rem; color: var(--muted-color); margin-top: 3px; }
.cart-line__price { font-family: var(--font-display); font-weight: 700; color: var(--primary-color); font-size: .95rem; margin-top: 6px; }

.cart-line__row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }

.cart-line__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cart-line__qty button {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  font-size: .7rem;
  color: var(--text-color);
  transition: background var(--transition), color var(--transition);
}
.cart-line__qty button:hover { background: var(--secondary-color); color: #fff; }
.cart-line__qty span {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
}

.cart-line__remove {
  margin-left: auto;
  font-size: .76rem;
  color: var(--muted-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  transition: color var(--transition);
}
.cart-line__remove:hover { color: var(--danger-color); }

/* A price that moved while the line sat in the cart, and a quantity that has
   reached the shelf. Both are the server telling the customer something about
   their own cart, so they are stated on the line rather than as a toast that
   scrolls away — the line is where they will look. */
.cart-line__changed {
  font-size: .72rem;
  color: var(--accent-color);
  margin-top: 3px;
}

.cart-line__note {
  font-size: .72rem;
  color: var(--muted-color);
  margin-top: 7px;
}

/* The + button when everything in stock is already in the cart. */
.cart-line__qty button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.cart-line__qty button:disabled:hover { background: transparent; color: inherit; }

.cart-drawer__foot {
  flex: none;
  border-top: 1px solid var(--border-color);
  background: #fff;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 12px;
}

.cart-total { display: flex; align-items: baseline; justify-content: space-between; }
.cart-total span { font-size: .85rem; color: var(--muted-color); }
.cart-total b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-strong); }
.cart-drawer__note { font-size: .74rem; color: var(--muted-color); text-align: center; }

.cart-empty {
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  padding: 64px 28px;
}
.cart-empty i { font-size: 2.6rem; color: var(--border-strong); }
.cart-empty h4 { font-size: 1rem; }
.cart-empty p { font-size: .86rem; max-width: 260px; }

@media (max-width: 768px) {
  /* Bottom sheet on phones, matching the filter panel */
  .cart-drawer {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 88dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .cart-drawer.is-open { transform: translateY(0); }
  .cart-drawer__head { position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .cart-drawer__head::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 99px;
    background: var(--border-strong);
  }
}

/* ==========================================================================
   23. SHOP BY APPLICATION  (replaces the promotional banner)
   ========================================================================== */

.application-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.application-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--secondary-color);
  color: #fff;
  min-height: 244px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.application-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px 220px at 88% 8%, rgba(165, 15, 45, .55), transparent 70%);
  transition: opacity var(--transition);
}
.application-card::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 170px; height: 170px;
  border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .05);
}
.application-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.application-card:hover::before { opacity: .75; }

.application-card > * { position: relative; z-index: 2; }

.application-card__icon {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 1.2rem;
}
.application-card h3 { color: #fff; font-size: 1.05rem; line-height: 1.3; }
.application-card p { color: rgba(255, 255, 255, .72); font-size: .84rem; }

.application-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.application-card__foot i { transition: transform var(--transition); }
.application-card:hover .application-card__foot i { transform: translateX(5px); }

@media (max-width: 1100px) {
  .application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .application-grid { grid-template-columns: 1fr; gap: 14px; }
  .application-card { min-height: 0; padding: 22px 20px; }
}

/* ==========================================================================
   24. FILTER SIDEBAR — interaction polish
   ========================================================================== */

/* --- Sticky summary bar at the top of the sidebar --- */

.filter-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--surface-alt);
  font-size: .82rem;
  color: var(--muted-color);
}
.filter-summary b { color: var(--text-strong); font-family: var(--font-display); }
.filter-summary__clear {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary-color);
  white-space: nowrap;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.filter-summary__clear:hover { border-bottom-color: var(--primary-color); }
.filter-summary__clear[hidden] { display: none; }

/* --- Long lists: reveal instead of an inner scrollbar --- */

.filter-list__item[hidden] { display: none; }

.filter-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 2px;
  font-size: .79rem;
  font-weight: 600;
  color: var(--primary-color);
  transition: gap var(--transition);
}
.filter-more:hover { gap: 10px; }
.filter-more i { font-size: .62rem; transition: transform var(--transition); }
.filter-more.is-open i { transform: rotate(180deg); }

/* --- Dual handle price range --- */

.range {
  position: relative;
  height: 34px;
  margin: 4px 2px 10px;
}

.range__track,
.range__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 99px;
  transform: translateY(-50%);
  pointer-events: none;
}
.range__track { left: 0; right: 0; background: var(--border-color); }
.range__fill { background: var(--primary-color); }

/* Two native sliders stacked; only the thumbs stay interactive */
.range input[type='range'] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}
.range input[type='range']:focus { outline: none; }
.range input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(165, 15, 45, .25);
}
.range input[type='range']::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-color);
  box-shadow: var(--shadow);
  cursor: grab;
  transition: transform .12s var(--ease), box-shadow var(--transition);
}
.range input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range input[type='range']:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }
.range input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-color);
  box-shadow: var(--shadow);
  cursor: grab;
}

.range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--text-strong);
  font-weight: 600;
  margin-bottom: 10px;
}
.range-values span { color: var(--muted-color); font-weight: 400; }

/* Preset chips show which one is live */
.price-preset.is-active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

/* --- Filter counts on the section headers --- */

.filter-block__head .filter-badge {
  margin-left: auto;
  margin-right: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary-color);
  color: #fff;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
}
.filter-block__head .filter-badge[hidden] { display: none; }

/* --- Results updating feedback --- */

.product-grid.is-updating {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s var(--ease);
}

/* --- Mobile: active filter count on the trigger --- */

.filter-open-btn { position: relative; }
.filter-open-btn .filter-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary-color);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  border: 2px solid #fff;
}
.filter-open-btn .filter-badge[hidden] { display: none; }

/* --- Desktop sidebar: one scroll region, never nested --- */

@media (min-width: 1025px) {
  .shop-sidebar { scrollbar-width: thin; }
  .shop-sidebar::-webkit-scrollbar { width: 8px; }
  .shop-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
  .shop-sidebar::-webkit-scrollbar-track { background: transparent; }
  /* Show-more replaces the old inner scrollers */
  .filter-block__body.is-scroll { max-height: none; overflow: visible; }
}

/* --- Tablet: filters as a side drawer, results keep full width --- */

@media (min-width: 769px) and (max-width: 1024px) {
  .shop-sidebar {
    width: min(420px, 90vw);
    border-radius: 0;
  }
  .filter-drawer-foot { padding-bottom: 16px; }
}

/* Row hit areas that are comfortable on every device */
.check {
  border-radius: var(--radius-sm);
  padding-inline: 6px;
  margin-inline: -6px;
}
.check:hover { background: var(--surface-alt); }
.check:has(input:checked) { color: var(--primary-color); font-weight: 500; }

/* ==========================================================================
   25. SECTION RHYTHM
   --------------------------------------------------------------------------
   White ↔ tinted alternation carries the page, with a single dark band as
   punctuation. The brand crimson stays reserved for actions (prices, cart
   buttons, badges, nav) so it keeps its meaning — using it as a section
   background would bury those on top of it.
   ========================================================================== */

.section--alt {
  position: relative;
  background: var(--surface-alt);
}

/* Faint engineering grid — reads as precision tooling up close, as a flat
   tint from a normal viewing distance. */
.section--alt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 22, 26, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 26, .028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.section--alt > * { position: relative; z-index: 1; }

/* Hairline separators so adjacent same-tone sections still read as separate */
.section--alt + .section--alt { border-top: 1px solid rgba(20, 22, 26, .06); }

/* --- Dark anchor band --- */

.section--dark {
  position: relative;
  background: var(--section-dark);
  color: #cfd5de;
  overflow: hidden;
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(165, 15, 45, .42), transparent 62%),
    radial-gradient(620px 380px at 6% 92%, rgba(52, 60, 74, .8), transparent 60%);
}
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 40%, #000 35%, transparent 80%);
}
.section--dark > * { position: relative; z-index: 1; }

.section--dark .section-head h2,
.section--dark .section-head h3 { color: #fff; }
.section--dark .section-head p { color: rgba(255, 255, 255, .72); }
.section--dark .eyebrow { color: #ff9fb0; }
.section--dark .eyebrow::before { background: #ff9fb0; }
.section--dark .section-head__link { color: #fff; }
.section--dark .section-head__link:hover { color: #ff9fb0; border-color: #ff9fb0; }

/* Cards inside the dark band become glass rather than white blocks */
.section--dark .feature-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
.section--dark .feature-card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.section--dark .feature-card__icon {
  background: rgba(165, 15, 45, .22);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #ff9fb0;
}
.section--dark .feature-card:hover .feature-card__icon {
  background: var(--primary-color);
  color: #fff;
}
.section--dark .feature-card h3 { color: #fff; }
.section--dark .feature-card p { color: rgba(255, 255, 255, .62); }

/* ==========================================================================
   26. PRODUCT TABS ON SMALL SCREENS
   --------------------------------------------------------------------------
   Four tabs do not fit one row on a phone, and the strip scrolls with its
   scrollbar hidden — so "Reviews" sat off-screen with nothing to suggest it
   existed. Below 600px they become a 2x2 block instead: every tab visible,
   nothing to scroll, and a filled active state that reads without relying
   on an underline sitting mid-block.
   ========================================================================== */

@media (max-width: 600px) {
  .tabs { margin-top: 40px; }

  .tabs__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-bottom: none;
    overflow: visible;
    margin-bottom: 6px;
  }

  .tabs__btn {
    padding: 13px 8px;
    min-height: 48px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-color);
    font-size: .76rem;
    letter-spacing: .04em;
    white-space: normal;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }

  /* The underline indicator makes no sense in a grid */
  .tabs__btn::after { display: none; }

  .tabs__btn[aria-selected='true'] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
  }
  .tabs__btn[aria-selected='true'] span { color: rgba(255, 255, 255, .75); }

  .tabs__panel { padding: 18px 0 0; }
}

/* Count beside the Reviews tab — gives the tab a reason to be tapped */
.tabs__count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted-light);
}
.tabs__btn[aria-selected='true'] .tabs__count { color: var(--primary-light); }

@media (max-width: 600px) {
  .tabs__btn[aria-selected='true'] .tabs__count { color: rgba(255, 255, 255, .8); }
}

/* ==========================================================================
   27. IMAGE LIGHTBOX
   --------------------------------------------------------------------------
   Replaces the in-place 2x scale, which cropped the product with no way to
   pan and left most of the image unreachable. This is a full-screen viewer
   with wheel / pinch zoom, drag-to-pan and thumbnail navigation.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  flex-direction: column;
  /* Opaque: even a few percent of the white header behind ghosts through
     and competes with the product. */
  background: #0a0b0e;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* --- Top bar --- */

.lightbox__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  color: #fff;
}

.lightbox__title {
  font-size: .82rem;
  color: rgba(255, 255, 255, .68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

.lightbox__tools { display: flex; align-items: center; gap: 6px; flex: none; }

.lightbox__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .9rem;
  transition: background var(--transition), opacity var(--transition);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__btn:disabled { opacity: .35; pointer-events: none; }

.lightbox__zoom {
  min-width: 56px;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* --- Stage --- */

.lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Flex, not grid: in an auto-sized grid row a percentage max-height on the
     image cannot resolve, so it was ignored and tall images overflowed. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* All gestures are handled in script */
  touch-action: none;
  cursor: zoom-in;
}
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-panning { cursor: grabbing; }

.lightbox__img {
  max-width: 94%;
  max-height: 94%;
  width: auto;
  height: auto;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .18s var(--ease);
}
.lightbox__stage.is-panning .lightbox__img { transition: none; }

/* --- Arrows --- */

.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background var(--transition);
  z-index: 2;
}
.lightbox__arrow:hover { background: var(--primary-color); }
.lightbox__arrow--prev { left: 14px; }
.lightbox__arrow--next { right: 14px; }

/* --- Thumbnail rail --- */

.lightbox__thumbs {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  scrollbar-width: none;
}
.lightbox__thumbs::-webkit-scrollbar { display: none; }

.lightbox__thumb {
  flex: none;
  width: 62px;
  height: 62px;
  padding: 5px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: rgba(255, 255, 255, .08);
  transition: border-color var(--transition), background var(--transition);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__thumb.is-active { border-color: var(--primary-light); background: rgba(255, 255, 255, .16); }

/* --- Hint --- */

.lightbox__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  font-size: .74rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--transition);
}
.lightbox__stage.is-zoomed .lightbox__hint { opacity: 0; }

@media (max-width: 600px) {
  /* Swipe and the thumbnail rail cover navigation here; the arrows only
     sat on top of the product. */
  .lightbox__arrow { display: none; }
  .lightbox__thumb { width: 52px; height: 52px; }
  .lightbox__title { display: none; }
  .lightbox__tools { margin-left: auto; }
}

/* The gallery stage now opens the viewer rather than scaling in place */
.gallery__stage { cursor: zoom-in; }
.gallery__stage.is-zoomed img { transform: none; padding: 7%; }

/* -------------------------------------------------------------------------
   Warranty tab
   The period is the answer most people came for, so it leads the panel as a
   single line before the terms rather than being buried in them.
   ------------------------------------------------------------------------- */

.warranty-period {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1px solid var(--border, #e3e7ec);
  border-radius: 999px;
  background: var(--bg-alt, #f5f7f9);
  font-size: 1rem;
}
.warranty-period i { color: var(--primary-color, #a50f2d); }

/* -------------------------------------------------------------------------
   Quote-only products
   A product with no published price is not out of stock, it is made to order.
   Amber rather than red: nothing is wrong, it just needs a conversation.
   ------------------------------------------------------------------------- */

.product-card__stock.quote,
.stock-pill.quote {
  color: #b26a00;
}
.product-card__stock.quote i,
.stock-pill.quote i {
  color: #b26a00;
}
.stock-pill.quote {
  background: #fdf3e3;
}

/* -------------------------------------------------------------------------
   Reviews empty state
   Shown until real reviews exist. The page used to invent them.
   ------------------------------------------------------------------------- */

.review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 46px 24px;
  border: 1px dashed var(--border, #e3e7ec);
  border-radius: 14px;
  background: var(--bg-alt, #f5f7f9);
  text-align: center;
  color: var(--text-muted, #6b7685);
}
.review-empty > i {
  font-size: 1.7rem;
  color: var(--text-muted, #9aa4b2);
  margin-bottom: 8px;
}
.review-empty p { margin: 0; }
.review-empty p b { color: var(--text, #12161c); font-size: 1.02rem; }


/* =========================================================================
   ACCOUNTS — sign in, register, My Account
   -------------------------------------------------------------------------
   Topkko sells bench instruments: soldering stations, rework stations, power
   supplies, microscopes. So the account area is built from that vernacular
   rather than from generic shop furniture — a faceplate rail across the top
   of each panel, legends set in mono small caps the way a silkscreen legend
   is, and the supporting copy set as a specification table, which is the
   densest and most-read block in their own catalogue.

   Everything is drawn from tokens already in this file. The only addition is
   IBM Plex Mono, which is not a new face: it is the third voice of the system
   the admin panel already uses, brought across so the two halves of the
   product agree.
   ========================================================================= */

:root {
  --font-panel: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A legend on an instrument: small, wide-tracked, upper case, never large. */
.legend {
  font-family: var(--font-panel);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---- the page ----
   One card, centred. Sign in and create an account are the same decision made
   two ways, so they share a card and a tab rather than a page each. The panel
   of reasons that used to sit beside it is gone: anyone on this page has
   already decided, and it left the two columns fighting over height. */

.authpage {
  padding: 56px 0 90px;
  background:
    linear-gradient(180deg, #fff 0 130px, var(--surface-alt) 130px),
    var(--surface-alt);
}

.authcard {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(19, 22, 28, .35);
}

/* The rail. A device has one, in the brand colour, carrying its legend. */
.authcard__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 26px;
  background: var(--primary-color);
  color: #fff;
}
.authcard__rail .legend { color: rgba(255, 255, 255, .82); }

/* A panel LED. Green because that is what ready looks like on a bench. */
.authcard__lamp { display: inline-flex; align-items: center; gap: 7px; }
.authcard__lamp::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}

/* ---- both forms, side by side ----
   Signing in and signing up are two different people arriving, not one person
   choosing, so both are on the page and neither is hidden behind a control.
   The divider is a hairline, not a gap: they are two halves of one card. */

.authsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.authcol { padding: 26px 28px 30px; }

/* The returning customer is the common case, so sign in takes the plain white
   half and the longer form sits on the tinted one. */
.authcol--new {
  background: var(--surface-alt);
  border-left: 1px solid var(--border-color);
}

.authcol__head {
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: -.02em;
  margin: 0 0 5px;
}
.authcol__sub {
  margin: 0 0 20px;
  font-size: .87rem;
  color: var(--muted-color);
}

.authform { display: block; }

/* ---- fields ---- */

.formrow { margin-bottom: 17px; }
.formrow:last-of-type { margin-bottom: 0; }

.formrow__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-panel);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-color);
  margin-bottom: 7px;
}
.formrow__label .req { color: var(--primary-color); }

.formrow__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: var(--text-strong);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.formrow__input::placeholder { color: var(--muted-light); }
.formrow__input:hover:not(:focus) { border-color: var(--muted-light); }
.formrow__input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(165, 15, 45, .13);
}
select.formrow__input { appearance: auto; }

/* The input and its button share a box, so the button can be centred on the
   input rather than pinned to the bottom of the whole row — which drifts the
   moment a hint or an error appears underneath. */
.formrow__control { position: relative; display: block; }
.formrow__control--withbtn .formrow__input { padding-right: 50px; }
.formrow__reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--muted-light);
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1;
  transition: color .15s, background .15s;
}
.formrow__reveal:hover { color: var(--primary-color); background: rgba(165, 15, 45, .07); }
.formrow__reveal[aria-pressed="true"] { color: var(--primary-color); }

.formrow__input.is-bad { border-color: var(--danger-color); background: #fffafa; }
.formrow__input.is-bad:focus { box-shadow: 0 0 0 3px rgba(211, 47, 47, .13); }

/* Errors slide rather than appear: a field that grows by a line without
   warning shifts everything below it under the thumb. */
.formrow__error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 7px 0 0;
  font-size: .82rem;
  color: var(--danger-color);
  animation: fieldslide .18s ease-out;
}
.formrow__error::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .78rem; }
@keyframes fieldslide { from { opacity: 0; transform: translateY(-3px); } }
/*@media (prefers-reduced-motion: reduce) { .formrow__error { animation: none; } }*/

.formrow__hint { margin: 7px 0 0; font-size: .8rem; color: var(--muted-light); }

/* Caps Lock on a password field is the single most common reason a correct
   password is rejected, and nothing on a phone or a laptop says so. */
.formrow__caps {
  display: none;
  align-items: center; gap: 6px;
  margin: 7px 0 0;
  font-size: .78rem;
  color: var(--warning-color);
}
.formrow__caps.is-on { display: flex; }

.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* .formrow:last-of-type drops its bottom margin so a form does not end in a
   gap. Inside a pair that reading is wrong: the second field is the last of
   its type in the grid, not the last thing on the form, and stacked on a
   phone it ends up hard against whatever follows. */
.fieldgrid .formrow:last-of-type { margin-bottom: 17px; }

.authform__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 20px 0;
}
.authform__link { font-size: .85rem; color: var(--primary-color); font-weight: 500; }

.checkline { display: inline-flex; align-items: center; gap: 9px; font-size: .87rem; cursor: pointer; }
.checkline input { width: 16px; height: 16px; accent-color: var(--primary-color); }
.checkrow { display: grid; gap: 11px; margin: 6px 0 22px; }

/* A full-width action gets a little more height than an inline one, and
   room above it: it was sitting hard against the last field. */
.btn--block { width: 100%; justify-content: center; height: 44px; margin-top: 6px; }
.btn.is-busy { opacity: .8; pointer-events: none; }

/* ---- button scale in the account area ----

   Everywhere else on this site a button is a call to action and is sized to
   be one. In here they are form actions — Save, Cancel, Edit, Remove — and a
   row of them at storefront size reads as four things demanding attention on
   a page whose job is to be quiet. So the whole area runs one size down.

   Scoped rather than global on purpose: the same classes carry the Add to
   Cart and Filters buttons, which are the right size where they are.

   .btn--sm needs the same treatment for a second reason: its 10px of vertical
   padding was more than the 9px on the base button, so "small" was rendering
   taller than normal. */
.authpage .btn,
.account .btn { font-size: .73rem; padding: 7px 15px; gap: 8px; }

.authpage .btn--sm,
.account .btn--sm { font-size: .69rem; padding: 5px 12px; }

.authpage .btn--lg,
.account .btn--lg { font-size: .84rem; padding: 12px 26px; }

.authform .btn--block { height: 42px; margin-top: 22px; }
.account .btn--block { height: 38px; }

.notice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; margin-bottom: 18px;
  border-radius: 9px;
  font-size: .88rem;
}
.notice--ok  { background: #e9f7f0; color: #0b6b40; }
.notice--bad { background: #fdeeee; color: #b3261e; }
.notice i { flex-shrink: 0; }

/* ---- My Account ---- */

.account { padding: 30px 0 84px; background: var(--surface-alt); min-height: 60vh; }
.account__grid { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; align-items: start; }

.accountnav {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 96px;
}

/* Both are phone furniture. On a desktop the rail is a rail: there is no
   button to open it and nothing to close. */
.accountbar { display: none; }
.accountnav__head { display: none; }
.accountnav__who {
  display: flex; align-items: center; gap: 12px;
  padding: 18px;
  background: var(--secondary-color);
  color: #fff;
}
.accountnav__avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--primary-color); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: .95rem;
}
.accountnav__who b { display: block; font-size: .92rem; }
.accountnav__who small { display: block; font-size: .75rem; color: rgba(255,255,255,.6); word-break: break-all; }

.accountnav__list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 1px; }
.accountnav__list a,
.accountnav__list .is-soon {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .89rem;
  color: var(--text-color);
  transition: background .15s, color .15s;
}
.accountnav__list a:hover { background: var(--surface-alt); }
.accountnav__list a.is-on { background: var(--primary-soft); color: var(--primary-color); font-weight: 600; }
.accountnav__list i { width: 17px; text-align: center; font-size: .86rem; opacity: .8; }

.accountnav__list .is-soon { color: var(--muted-light); cursor: default; }
.accountnav__list .is-soon em {
  margin-left: auto;
  font-family: var(--font-panel);
  font-style: normal; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface-alt); color: var(--muted-light);
  padding: 3px 7px; border-radius: 20px;
}

.accountnav__out { padding: 12px; border-top: 1px solid var(--border-color); }

.accounthead { margin-bottom: 20px; }
.accounthead h1 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 5px; }
.accounthead p { margin: 0; color: var(--muted-color); font-size: .91rem; }
.accounthead--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.panelcard {
  display: flex; gap: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
}
.panelcard--muted { background: #fff; border-style: dashed; }
.panelcard--form { display: block; padding: 26px; }
.panelcard--narrow { max-width: 540px; }
.panelcard h2 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 8px; }
.panelcard p { margin: 0 0 14px; font-size: .89rem; color: var(--muted-color); }
.panelcard__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary-color);
  display: grid; place-items: center;
}

.account__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

/* Details read as a spec block here too, for the same reason. */
.deflist { margin: 0 0 16px; display: grid; }
.deflist > div {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border-color);
  font-size: .88rem;
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt {
  font-family: var(--font-panel);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-light); padding-top: 3px;
}
.deflist dd { margin: 0; }

.formhead { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 6px; }
.formnote { font-size: .85rem; color: var(--muted-color); margin: 0 0 18px; }
.formfoot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.rule { border: 0; border-top: 1px solid var(--border-color); margin: 24px 0; }

/* ---- address book ---- */

.addressgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; margin-bottom: 20px; }

.addresscard {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.addresscard:hover { box-shadow: 0 12px 28px -20px rgba(19,22,28,.4); }
.addresscard.is-default { border-color: var(--primary-color); }
.addresscard header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* Two default tags beside a full name do not fit across a phone-width card.
     They drop to their own line rather than squeezing the name to an
     ellipsis — whose address it is matters more than which tags it carries. */
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-color);
}
.addresscard.is-default header { background: var(--primary-soft); }
/* The recipient's name, since there is no label field any more. A name is
   not a legend, so this one drops the mono-and-tracked treatment the labels
   had and is simply set in the display face. */
.addresscard h2 {
  font-family: var(--font-display);
  font-size: .93rem; letter-spacing: -.01em;
  margin: 0; color: var(--text-strong);
  min-width: 0; overflow-wrap: anywhere;
}
.addresscard__tags { display: flex; gap: 5px; }
.addresscard__body { font-size: .87rem; line-height: 1.65; margin: 0; padding: 16px; flex: 1; }
.addresscard__phone { font-size: .84rem; color: var(--muted-color); margin: 0; padding: 0 16px 14px; }
.addresscard footer { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-color); }
.addresscard footer form { margin: 0; }

.tag {
  display: inline-block;
  font-family: var(--font-panel);
  font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 3px 7px; border-radius: 5px;
  background: #fff; border: 1px solid var(--border-strong); color: var(--muted-color);
  white-space: nowrap;
}
.tag--live { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.addressline { font-size: .86rem; line-height: 1.6; margin: 0 0 14px; }

.addressform {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 26px;
}

/* ---- tablet ---- */

@media (max-width: 900px) {
  .account__grid { grid-template-columns: minmax(0, 1fr); }
  .accountnav { position: static; }
  .fieldgrid { grid-template-columns: 1fr; }
}

/* ---- phone ----
   The form is the page. The spec sheet follows it; nobody reading it came
   here to read it first. The panel loses its frame because a bordered card
   inset from the edge of a 390px screen wastes the only width there is. */

@media (max-width: 640px) {
  .authpage { padding: 0 0 100px; background: #fff; }
  .authpage .container { padding-left: 0; padding-right: 0; }

  .authcard__rail { padding: 10px 18px; }
  .authcard__head { padding: 24px 18px 2px; }
  .authcard__head h1 { font-size: 1.55rem; }
  .authform { padding: 18px 18px 22px; }
  .authcard__foot { padding: 16px 18px 22px; text-align: center; }


  /* Thumb-sized. 46px is fine for a mouse; a thumb wants a little more. */
  .formrow__input { height: 50px; font-size: 1rem; }
  .authform .btn--block { height: 46px; font-size: .8rem; }
  .account .btn--block { height: 44px; font-size: .78rem; }

  .account { padding: 0 0 100px; background: #fff; }
  .account__grid { gap: 0; }
  .accountbody { padding: 20px 16px 0; }
  .panelcard { border-radius: 12px; }
  .addressgrid { grid-template-columns: 1fr; }
  .addressform { border-left: 0; border-right: 0; border-radius: 0; padding: 22px 16px; }
  .formfoot { flex-direction: column-reverse; }
  .formfoot .btn { width: 100%; justify-content: center; height: 44px; }
}

/* ---- the account rail on a phone ----

   A vertical rail stacked above the body means scrolling past nine items and
   a sign-out button to reach the page you just asked for. The strip of chips
   that replaced it was no better: it hid whichever section you were in as
   soon as it scrolled sideways, and it was fighting the sticky header for the
   same 68 pixels.

   So the rail becomes a bottom sheet behind one button — the gesture the
   listing page already teaches with Filters, and the same geometry, because
   two panels that behave differently are two things to learn. The button
   names the section you are in, so the menu is not hiding what the page
   already knows.

   Everything the desktop rail carries comes back inside the sheet, the
   who-am-I block and the four "soon" items included: a sheet has the room a
   strip did not.

   Opening is TK.openPanel's job (js/account.js). That is what gives the sheet
   the shared backdrop and one shared history entry, so Back closes the sheet
   and the next Back leaves the page. */

@media (max-width: 900px) {
  .accountbar { display: block; padding: 12px 16px 0; }

  .accountbar__btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-alt);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-strong);
    cursor: pointer;
  }
  .accountbar__btn > i:first-child { color: var(--primary-color); font-size: .92rem; }
  .accountbar__chev { margin-left: auto; font-size: .72rem; color: var(--muted-color); }

  .accountnav {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    z-index: 970;
    width: 100%;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .32s var(--ease);
    overflow: hidden;
  }
  .accountnav.is-open { transform: translateY(0); }

  .accountnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    position: relative;
    padding: 17px 14px 12px;
    border-bottom: 1px solid var(--border-color);
  }
  .accountnav__head strong { font-family: var(--font-display); font-size: .96rem; }
  /* The grab handle every bottom sheet on this site wears. */
  .accountnav__head::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 99px;
    background: var(--border-strong);
  }

  /* The sheet must not scroll — only its middle does, or the sign-out button
     leaves the bottom of the screen. */
  .accountnav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .accountnav__list a,
  .accountnav__list .is-soon { padding: 12px; font-size: .92rem; }
  .accountnav__list a i,
  .accountnav__list .is-soon i { font-size: .92rem; }

  .accountnav__out {
    flex: none;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .accountbody { padding-top: 18px; }
}

/* Under the header rather than at the top of the page, so switching section
   is one tap from anywhere down a long address book. Only below 768px: above
   that the announcement strip is still inside the sticky header, and
   --header-height does not describe how tall that header actually is. */
@media (max-width: 768px) {
  .accountbar {
    position: sticky;
    top: calc(var(--header-height) + 1px);
    z-index: 30;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
  }

  /* Add address scrolls the form into view and puts the caret in its first
     field. html's scroll-padding-top already reserves the sticky header for
     that scroll; this reserves the section bar sitting under it, which is the
     rest of the reason the focused box was landing where it could not be
     seen. Only the extra — the two offsets add up.

     The fields carry it as well as the form: the caret is set with
     preventScroll, but the soft keyboard coming up scrolls the page again on
     its own and aims at the input, not at the form. */
  .addressform,
  .addressform .formrow__input { scroll-margin-top: 70px; }
}

/* ---- the single-purpose cards ----
   Forgot password and set-a-new-password have no second panel to switch to,
   so they keep a plain heading where the tabs would be. */

.authcard__head { padding: 26px 26px 0; }
.authcard__head h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 0 0 7px;
}
.authcard__head p { margin: 0; color: var(--muted-color); font-size: .91rem; }

.authcard__foot {
  margin: 0;
  padding: 16px 26px 24px;
  border-top: 1px solid var(--border-color);
  font-size: .88rem;
  color: var(--muted-color);
  text-align: center;
}
.authcard__foot a { color: var(--primary-color); font-weight: 600; }

/* ---- the auth card on a phone ----
   The two halves stack, sign in first. The divider becomes a horizontal rule
   because a vertical one between stacked blocks means nothing. */

@media (max-width: 780px) {
  .authsplit { grid-template-columns: 1fr; }
  .authcol--new { border-left: 0; border-top: 1px solid var(--border-color); }
}

@media (max-width: 640px) {
  .authcard { max-width: none; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .authpage { padding: 0 0 100px; background: #fff; }
  .authpage .container { padding-left: 0; padding-right: 0; }
  .authcard__rail { padding: 10px 18px; }
  .authcol { padding: 22px 18px 26px; }
  .authcard__head { padding: 22px 18px 0; }
  .authcard__foot { padding: 16px 18px 22px; }

  /* Thumb-sized. 46px is fine for a mouse; a thumb wants a little more. */
  .formrow__input { height: 50px; font-size: 1rem; }
  .authpage .btn--block { height: 46px; font-size: .8rem; }
}

/* ==========================================================================
   CHECKOUT, PAYMENT AND ORDERS
   --------------------------------------------------------------------------
   Borrows the account area's vocabulary — .panelcard, .formrow, .fieldgrid —
   because it is the same customer doing the same kind of work, and a checkout
   that looks like a different site is a checkout people abandon.

   The summary is sticky on a desktop and comes first on a phone, where "what
   am I paying" is the question being asked while scrolling past everything
   else.
   ========================================================================== */

.checkout { padding: 26px 0 60px; }

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 26px;
  align-items: start;
}

.checkout__main { display: grid; gap: 18px; }

.checkout__hint {
  color: var(--muted-color);
  font-size: .82rem;
  margin: 0 0 12px;
}

/* ---- picking an address ---- */

.addresspick { display: grid; gap: 10px; margin-bottom: 12px; }

.addresspick__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.addresspick__item:hover { border-color: var(--border-strong); }

.addresspick__item input { margin-top: 3px; accent-color: var(--primary-color); flex: none; }

/* :has, so the whole card lights rather than just the dot. Every browser this
   shop supports has it; where it does not, the radio still shows which is
   chosen and nothing is lost. */
.addresspick__item:has(input:checked) {
  border-color: var(--primary-color);
  background: var(--primary-soft);
}

.addresspick__body { display: grid; gap: 2px; font-size: .84rem; }
.addresspick__body b { font-family: var(--font-display); font-size: .9rem; }
.addresspick__body small { color: var(--muted-color); font-size: .76rem; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .85rem;
  cursor: pointer;
  margin-bottom: 12px;
}
.checkbox input { accent-color: var(--primary-color); }

/* ---- picking how to pay ---- */

.paypick { display: grid; gap: 10px; }

.paypick__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.paypick__item:hover { border-color: var(--border-strong); }
.paypick__item:has(input:checked) { border-color: var(--primary-color); background: var(--primary-soft); }

.paypick__item input { margin-top: 4px; accent-color: var(--primary-color); flex: none; }
.paypick__body { display: grid; gap: 3px; }
.paypick__body b { font-family: var(--font-display); font-size: .88rem; }
.paypick__body span { color: var(--muted-color); font-size: .79rem; }
.paypick__body em { color: var(--accent-color); font-style: normal; }

/* Online payment before a gateway exists. Greyed rather than removed, so the
   customer can see it is coming rather than wondering why there is only one
   way to pay. */
.paypick__item.is-off { opacity: .55; cursor: not-allowed; }
.paypick__item.is-off:hover { border-color: var(--border-color); }

.checkout__newaddress {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px 22px;
  margin-top: 18px;
}

.formactions { display: flex; gap: 10px; margin-top: 16px; }

/* ---- the summary ---- */

.summary {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  position: sticky;
  top: 96px;
}

.summary__title { font-family: var(--font-display); font-size: 1rem; margin: 0 0 14px; }

.summary__lines {
  display: grid;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.summary__line { display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; }
.summary__line img { border: 1px solid var(--border-color); border-radius: 8px; object-fit: contain; padding: 3px; }
.summary__line span { display: grid; gap: 1px; min-width: 0; }
.summary__line a { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__line a:hover { color: var(--primary-color); }
.summary__line small { color: var(--muted-color); font-size: .72rem; }
.summary__line b { font-size: .84rem; white-space: nowrap; }

.summary__totals { margin: 14px 0 0; display: grid; gap: 8px; }
.summary__totals > div { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.summary__totals dt { color: var(--muted-color); }
.summary__totals dd { margin: 0; font-weight: 600; }
.summary__totals small { color: var(--muted-light); }

/* The tax rows are set apart because they are the ones a customer claiming
   input credit reads carefully, and the ones that must match the invoice. */
.summary__tax { font-size: .79rem !important; }
.summary__tax dt, .summary__tax dd { color: var(--muted-color) !important; font-weight: 500 !important; }

.summary__grand {
  border-top: 1px solid var(--border-color);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 1rem !important;
}
.summary__grand dt { color: var(--text-strong) !important; font-family: var(--font-display); font-weight: 700; }
.summary__grand dd { color: var(--primary-color); font-family: var(--font-display); font-size: 1.15rem; }

.summary__note {
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .78rem;
}

.summary .btn--block { margin-top: 14px; }

.summary__fine {
  margin: 12px 0 0;
  text-align: center;
  color: var(--muted-light);
  font-size: .72rem;
}

/* ---- the stub payment page ---- */

.payframe { padding: 50px 0 80px; display: grid; place-items: center; }

.payframe__card {
  width: min(460px, 100%);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 30px;
  text-align: center;
}

.payframe__eyebrow {
  font-family: var(--font-panel);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--muted-color);
  margin: 0;
}

.payframe__card h1 { font-size: 2.1rem; margin: 6px 0 2px; }
.payframe__order { color: var(--muted-color); font-size: .8rem; margin: 0 0 18px; }
.payframe__actions { display: grid; gap: 10px; margin-top: 18px; }
.payframe__note { margin: 16px 0 0; color: var(--muted-light); font-size: .74rem; }

/* ---- one order ---- */

.orderpage { padding: 10px 0 60px; }

.orderpage__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 0px 10px;
}
.orderpage__number { font-family: var(--font-panel); font-size: 1.05rem; font-weight: 600; margin: 0; }
.orderpage__meta { margin: 3px 0 0; color: var(--muted-color); font-size: .8rem; }

.orderpage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.orderpage__main, .orderpage__aside { display: grid; gap: 18px; }

.orderitems { display: grid; gap: 14px; }
.orderitem { display: grid; grid-template-columns: 60px 1fr auto; gap: 13px; align-items: center; }
.orderitem img { border: 1px solid var(--border-color); border-radius: 8px; object-fit: contain; padding: 4px; }
.orderitem__body { display: grid; gap: 2px; min-width: 0; }
.orderitem__body b { font-size: .88rem; }
.orderitem__body small { color: var(--muted-color); font-size: .74rem; }
.orderitem__total { white-space: nowrap; font-family: var(--font-display); }

/* The trail. A line down the left rather than a table, because it is a
   sequence of events and reads as one. */
.ordertrail { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 16px; }
.ordertrail li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; position: relative; }
.ordertrail li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -18px;
  width: 1px;
  background: var(--border-color);
}
.ordertrail__dot {
  width: 11px; height: 11px; margin-top: 4px;
  border-radius: 50%;
  background: var(--primary-color);
  flex: none;
}
.ordertrail b { display: block; font-size: .85rem; font-weight: 600; }
.ordertrail small { color: var(--muted-color); font-size: .74rem; }

/* ---- narrow ---- */

@media (max-width: 1024px) {
  .checkout__grid, .orderpage__grid { grid-template-columns: 1fr; }

  /* The summary goes first on a phone, but only as a collapsed line showing
     the total — see .summary__toggle. It is context on arrival, not a call to
     action: the only button up there now is the disclosure itself. */
  .checkout__aside { order: -1; }
  .summary { position: static; }
  .summary__lines { max-height: 180px; }
}

@media (max-width: 560px) {
  .step__body, .step__head, .checkout__newaddress, .summary { padding: 14px; }
  .orderitem { grid-template-columns: 48px 1fr; }
  .orderitem__total { grid-column: 2; justify-self: start; }
  .payframe { padding: 26px 0 50px; }
  .payframe__card { padding: 22px 18px; }
}

/* Both of these set `display` on the elements the page hides, which beats the
   browser's own [hidden] rule — the same trap `.product-card[hidden]` above
   solves. Without them the IGST row and the CGST row show at the same time,
   which is not a cosmetic problem: an order has one delivery address and
   therefore one answer, and showing both says the shop does not know which. */
.summary__totals > div[hidden] { display: none; }
.addresspick[hidden] { display: none; }

/* A panel on the order page: title above its content.

   Deliberately not .panelcard, which is display:flex because it was built for
   an icon beside a sentence. Reusing it here put every heading next to its own
   content instead of above it. */
.orderbox {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px 22px;
}
.orderbox > h2 {
  font-family: var(--font-display);
  font-size: .95rem;
  margin: 0 0 14px;
}
.orderbox .summary__totals { margin-top: 0; }
.orderbox .addresscard__body { margin: 0; font-size: .84rem; line-height: 1.7; }
.orderbox .addresscard__phone { margin: 10px 0 0; font-size: .8rem; color: var(--muted-color); }

/* ==========================================================================
   CHECKOUT — THE STEP ACCORDION
   --------------------------------------------------------------------------
   One step open at a time. A finished step collapses to a line saying what was
   chosen, with Change on the right, which is what makes the whole order
   reviewable at a glance before anything is paid.

   The rule the layout exists to enforce: the call to action belongs to the step,
   not to the page. Place Order lives inside step three and is unreachable until
   the two above it have been answered.
   ========================================================================== */

/* The progress line under the heading. It reports; it is not navigation, so
   nothing in it is clickable. */
.stepbar {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.stepbar li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  color: var(--muted-light);
  font-weight: 500;
}

.stepbar li + li::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--border-color);
  margin-right: 3px;
}

.stepbar span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: .68rem;
  font-weight: 700;
}

.stepbar li.is-on { color: var(--primary-color); }
.stepbar li.is-on span { border-color: var(--primary-color); background: var(--primary-soft); }

.stepbar li.is-done { color: var(--success-color, #05803a); }
.stepbar li.is-done span {
  border-color: currentColor;
  background: currentColor;
  color: #fff;
  font-size: 0;
}
/* The tick replaces the number once the step is answered. */
.stepbar li.is-done span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .6rem;
}

/* ---- the steps themselves ---- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.step {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.step.is-open {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}

.step__head { margin: 0; }

/* The whole heading is the target. A 12px "Change" link is not something to ask
   a thumb to find. */
.step__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.step__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-color);
  font-size: .8rem;
  font-weight: 700;
}

.step__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  flex: none;
}

/* What was chosen, on the same line as the title once the step is closed. It is
   the reason a collapsed step is still useful. */
.step__summary {
  flex: 1;
  min-width: 0;
  color: var(--muted-color);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.step__change {
  flex: none;
  font-size: .76rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step__body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--border-color);
  margin-top: -1px;
  padding-top: 18px;
}

/* Closed. Not `display: none` on the step itself — the heading stays, which is
   the whole point of a collapsed step. */
.step:not(.is-open) .step__body { display: none; }

/* An open step has nothing to summarise and nothing to change: you are in it.
   An upcoming one has nothing to summarise either — it may hold a default,
   but the customer has not seen it, and a step announcing an answer to a
   question it has not asked yet reads as something already decided for
   them. Both show the title alone. */
.step.is-open .step__summary,
.step.is-open .step__change,
.step:not(.is-open):not(.is-done) .step__summary,
.step:not(.is-open):not(.is-done) .step__change { display: none; }

/* You move forward with the button, not by jumping ahead to a step whose
   prerequisites have not been answered. */
.step:not(.is-open):not(.is-done) .step__toggle { cursor: default; }
.step:not(.is-open):not(.is-done) .step__title { color: var(--muted-color); }

/* Answered and closed. */
.step.is-done .step__num {
  background: var(--success-bg, #ecfdf3);
  color: var(--success-color, #05803a);
  font-size: 0;
}
.step.is-done .step__num::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .7rem;
}

/* Not yet reached: the number is grey rather than brand, so the eye goes to the
   step that wants an answer. */
.step:not(.is-open):not(.is-done) .step__num {
  background: var(--border-color);
  color: var(--muted-color);
}

/* Tried to advance without answering. A shake rather than a red border, because
   nothing is wrong yet — something is simply missing. */
@keyframes tk-step-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.step.is-shaking { animation: tk-step-shake .4s ease; }
/*@media (prefers-reduced-motion: reduce) {
  .step.is-shaking { animation: none; border-color: var(--danger-color); }
}*/

.step__foot { margin-top: 18px; }

/* The button that moves you on. Full width because on a phone it is the only
   thing being asked for at that moment. */
.step__foot .btn--block { height: 48px; }

.btn--pay { font-size: .92rem; }

.paysafe {
  margin: 12px 0 0;
  text-align: center;
  color: var(--muted-light);
  font-size: .72rem;
  line-height: 1.6;
}

/* A quieter affordance than a button, for "add another address". */
.linkbtn {
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

.formrow__optional {
  font-weight: 400;
  color: var(--muted-light);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- the summary as a disclosure ---- */

/* Hidden on a desktop, where the whole summary is visible in its own column and
   there is nothing to disclose. */
.summary__toggle { display: none; }

.summary__totals--grand { margin-top: 0; }

@media (max-width: 1024px) {
  .summary__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 0 12px;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    color: inherit;
  }
  .summary__toggle span { flex: 1; text-align: left; font-weight: 600; font-size: .86rem; }
  .summary__toggle b { font-family: var(--font-display); color: var(--primary-color); }
  .summary__chev { transition: transform var(--transition); font-size: .7rem; color: var(--muted-color); }
  .summary__toggle[aria-expanded="true"] .summary__chev { transform: rotate(180deg); }

  /* The title is the toggle's job on a phone. */
  .summary__title { display: none; }

  .summary__panel { display: none; }
  .summary__panel.is-open { display: block; }

  .summary__totals--grand { border-top: 1px solid var(--border-color); padding-top: 12px; }
}

/* The checkout heading carries the progress line, so it needs less air beneath
   it than a page head that ends at its title. */
.page-head--tight { padding-bottom: 18px; }

/* ==========================================================================
   ORDER PAGE — HEADLINE AND TRACKER
   --------------------------------------------------------------------------
   The tracker is the part people come back for. A list of dated entries answers
   "what has happened"; what is being asked is "where is it", and that is a
   position on a line. The dated list is still there, folded away, for when the
   answer is disputed.
   ========================================================================== */

.ordertop {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}

/* The mark is a filled disc rather than a bare icon: at a glance the colour and
   the shape say which of the three states this is before a word is read. */
.ordertop__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  font-size: 1.15rem;
}
.ordertop__mark i { color: #fff; }

.ordertop h1 { font-size: 1.3rem; margin: 2px 0 4px; color: inherit; }
.ordertop p { margin: 0; font-size: .88rem; }
.ordertop__sub { margin-top: 6px !important; opacity: .78; font-size: .8rem !important; }
.ordertop__acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

.ordertop--ok   { background: #ecfdf3; color: #05603a; }
.ordertop--wait { background: #fffaeb; color: #93370d; }
.ordertop--off  { background: #fef3f2; color: #912018; }

/* ---- the tracker ---- */

.track {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px 22px 20px;
  margin-bottom: 20px;
}

.track__line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  position: relative;
}

/* The rail the dots sit on, drawn behind them. */
.track__line::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--border-color);
}

.track__stop {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.track__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-color);
  color: var(--muted-light);
  font-size: .8rem;
  transition: all var(--transition);
}

.track__label { font-size: .76rem; font-weight: 600; color: var(--muted-light); }
.track__blurb { font-size: .68rem; color: var(--muted-light); display: none; }

/* Passed. */
.track__stop.is-done .track__dot {
  background: var(--success-color);
  border-color: var(--success-color);
  color: #fff;
}
.track__stop.is-done .track__label { color: var(--text-color); }

/* Where it is now — the only stop that gets the brand colour, a ring and its
   explanatory line, because it is the only one being asked about. */
.track__stop.is-now .track__dot {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 0 0 5px var(--primary-soft);
}
.track__stop.is-now .track__label { color: var(--primary-color); font-weight: 700; }
.track__stop.is-now .track__blurb { display: block; color: var(--muted-color); }

/* The completed part of the rail, drawn over the grey one. --track-step is the
   index of the current stop, set inline by the view. */
.track__line::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 12%;
  height: 2px;
  background: var(--success-color);
  width: calc((76% / 3) * var(--track-step));
  transition: width var(--transition);
}

.track__courier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.track__couriername { display: block; font-weight: 600; font-size: .86rem; }
.track__awb { font-family: var(--font-panel); font-size: .8rem; color: var(--muted-color); }

.track__note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: .78rem;
}

/* ---- the folded history ---- */

.orderbox--details { padding: 0; }
.orderbox--details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  list-style: none;
}
.orderbox--details > summary::-webkit-details-marker { display: none; }
.orderbox--details > summary i { color: var(--muted-color); font-size: .78rem; transition: transform var(--transition); }
.orderbox--details[open] > summary i { transform: rotate(180deg); }
.orderbox--details .ordertrail { padding: 0 22px 20px 28px; }

/* ---- odds and ends ---- */

.paychip { margin: 14px 0 0; }
.badge--paid { background: #ecfdf3; color: #05603a; }
.badge--due  { background: #fffaeb; color: #93370d; }

.orderhelp {
  margin: 4px 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--muted-color);
}
.orderhelp a { color: var(--primary-color); font-weight: 600; }

@media (max-width: 700px) {
  .ordertop { padding: 18px; gap: 13px; }
  .ordertop__mark { width: 38px; height: 38px; font-size: 1rem; }
  .ordertop h1 { font-size: 1.1rem; }

  .track { padding: 18px 14px 16px; }

  /* Five stops will not fit across a 375px screen as a row, so the line turns
     vertical rather than shrinking the labels to nothing. */
  .track__line { grid-auto-flow: row; grid-auto-columns: auto; gap: 18px; }
  .track__line::before { top: 8px; bottom: 8px; left: 17px; right: auto; width: 2px; height: auto; }
  .track__line::after {
    top: 8px; left: 17px; width: 2px;
    height: calc(((100% - 16px) / 3) * var(--track-step));
  }
  .track__stop {
    grid-template-columns: 36px 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: 4px 14px;
  }
  .track__dot { grid-row: span 2; }
  .track__label { align-self: end; }
  .track__blurb { align-self: start; }
  .track__stop.is-now .track__blurb { display: block; }
}

/* Both addresses side by side in the main column. They answer one question —
   where is this going and who is being invoiced — so they belong together. */
.addrpair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* A box that offers help rather than stating a fact. */
.orderbox--soft { background: var(--primary-soft); border-color: transparent; }
.orderbox__body { margin: 0 0 10px; font-size: .84rem; line-height: 1.65; }
.orderbox--soft .btn { margin-top: 4px; }

@media (max-width: 700px) {
  .addrpair { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   MY ORDERS
   --------------------------------------------------------------------------
   Cards rather than a table. A table of order numbers is something to decode;
   what somebody scanning for one particular order actually recognises is the
   photograph of the thing they bought, so that comes first and the number sits
   above it.
   ========================================================================== */

.ordersbar { display: flex; gap: 9px; margin-bottom: 14px; }

.ordersbar__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color var(--transition);
}
.ordersbar__search:focus-within { border-color: var(--primary-color); }
.ordersbar__search i { color: var(--muted-light); font-size: .82rem; }
.ordersbar__search input {
  flex: 1;
  height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  outline: none;
}

.ordertabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; }

.ordertabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted-color);
  white-space: nowrap;
  transition: all var(--transition);
}
.ordertabs__tab:hover { border-color: var(--border-strong); color: var(--text-color); }
.ordertabs__tab span {
  font-size: .72rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--border-color);
  color: var(--muted-color);
}
.ordertabs__tab.is-on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.ordertabs__tab.is-on span { background: rgba(255,255,255,.25); color: #fff; }

/* ---- one order ---- */

.ordercard {
  display: block;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ordercard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }

.ordercard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--background-alt, #f8f9fb);
  border-bottom: 1px solid var(--border-color);
}
.ordercard__number { font-family: var(--font-panel); font-size: .82rem; font-weight: 600; }

.ordercard__state {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ordercard__state.is-wait  { background: #fffaeb; color: #93370d; }
.ordercard__state.is-live  { background: #ecfdf3; color: #05603a; }
.ordercard__state.is-brand { background: var(--primary-soft); color: var(--primary-color); }
.ordercard__state.is-done  { background: var(--border-color); color: var(--muted-color); }
.ordercard__state.is-off   { background: #fef3f2; color: #912018; }

.ordercard__body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}

/* Overlapped, so four thumbnails take the width of about two and a half and
   still read as a set rather than a row of separate things. */
.ordercard__thumbs { display: flex; align-items: center; }
.ordercard__thumbs img {
  width: 44px; height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  padding: 3px;
  margin-right: -10px;
}
.ordercard__thumbs img:last-of-type { margin-right: 0; }
.ordercard__more {
  margin-left: 14px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted-color);
}

.ordercard__what { min-width: 0; display: grid; gap: 1px; }
.ordercard__what b {
  font-size: .87rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ordercard__what small { color: var(--muted-color); font-size: .75rem; }

.ordercard__money { text-align: right; display: grid; gap: 1px; }
.ordercard__money b { font-family: var(--font-display); font-size: .95rem; white-space: nowrap; }
.ordercard__money small { color: var(--muted-color); font-size: .72rem; }

.ordercard__track {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px dashed var(--border-color);
  font-size: .78rem;
  color: var(--muted-color);
}
.ordercard__awb { font-family: var(--font-panel); color: var(--text-color); }
.ordercard__track--wait { color: #93370d; background: #fffaeb; border-top-style: solid; }

@media (max-width: 560px) {
  .ordersbar { flex-wrap: wrap; }
  .ordersbar__search { flex: 1 1 100%; }

  /* The money moves under the description rather than being squeezed into a
     third column on a 375px screen. */
  .ordercard__body { grid-template-columns: auto 1fr; }
  .ordercard__money { grid-column: 2; text-align: left; }
  .ordercard__money b { font-size: .9rem; }
}

/* ==========================================================================
   RETURNS
   ========================================================================== */

.returnform { display: grid; gap: 16px; }

.retitems { display: grid; gap: 12px; }

.retitem {
  display: grid;
  grid-template-columns: 48px 1fr 120px;
  gap: 13px;
  align-items: center;
}
.retitem img { border: 1px solid var(--border-color); border-radius: 8px; object-fit: contain; padding: 3px; }
.retitem__what { min-width: 0; display: grid; gap: 1px; }
.retitem__what b { font-size: .87rem; }
.retitem__what small { color: var(--muted-color); font-size: .75rem; }

/* A line with nothing left to send back is dimmed rather than removed: the
   customer is looking for it, and its absence would read as a mistake. */
.retitem.is-spent { opacity: .55; }
.retitem__qty .formrow__input { height: 40px; }

.retreasons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.retreason {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.retreason:hover { border-color: var(--border-strong); }
.retreason:has(input:checked) { border-color: var(--primary-color); background: var(--primary-soft); }
.retreason input { margin-top: 3px; accent-color: var(--primary-color); flex: none; }
.retreason span { display: grid; gap: 1px; }
.retreason b { font-size: .84rem; }
.retreason small { color: var(--muted-color); font-size: .74rem; }

/* The postage promise in full. Green when the shop is carrying it, amber when
   the customer is — the colour is the summary. */
.retnote {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: .82rem;
  background: #fffaeb;
  color: #93370d;
}
.retnote.is-ours { background: #ecfdf3; color: #05603a; }

@media (max-width: 640px) {
  .retreasons { grid-template-columns: 1fr; }
  .retitem { grid-template-columns: 48px 1fr; }
  .retitem__qty { grid-column: 2; }
}

/* One return request on the order page. */
.retrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
}
.retrow:last-child { border-bottom: 0; padding-bottom: 0; }
.retrow b { display: block; font-family: var(--font-panel); font-size: .8rem; }
.retrow small { display: block; color: var(--muted-color); font-size: .74rem; }

/* ==========================================================================
   28. Content pages (About, Contact, and the four policy documents)
   ==========================================================================
   A reading column, not a layout. These pages are prose that somebody has to
   get through — a customer checking whether they can send something back, or a
   payment gateway reviewer looking for a refund clause — so the whole section
   is one measure wide, generously leaded, with headings that break the wall of
   text into things you can scan for.

   Nothing here is scoped to a page slug. All six use the same template and
   must look like one document set. */

.doc { padding: 40px 0 72px; }

.doc__wrap {
  max-width: 78ch;
}

/* Said while the wording has not been agreed. Deliberately not styled as an
   error: it is a caveat, not a fault, and a red box on a legal page reads as
   something being wrong with the shop. */
.doc__draft {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 14px 16px;
  border: 1px solid #fde68a;
  border-left: 3px solid #d97706;
  border-radius: 8px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: .9rem;
  line-height: 1.6;
}
.doc__draft i { margin-top: 3px; color: #d97706; }

/* The prose itself. Selectors are descendant rather than class-per-element
   because the body is authored in the panel's rich text editor and arrives as
   plain tags — there is nowhere to hang a class. */
.doc__body { color: var(--text-color); font-size: 1rem; line-height: 1.75; }

.doc__body h3 {
  margin: 38px 0 12px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-strong);
}
.doc__body h3:first-child { margin-top: 0; }

.doc__body h4 {
  margin: 26px 0 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
}

.doc__body p { margin: 0 0 16px; }
.doc__body ul,
.doc__body ol { margin: 0 0 18px; padding-left: 22px; }
.doc__body li { margin-bottom: 9px; }
.doc__body li:last-child { margin-bottom: 0; }
.doc__body strong { color: var(--text-strong); font-weight: 600; }

.doc__body a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc__body a:hover { color: var(--primary-dark); }

.doc__body blockquote {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-alt, #fafafa);
  color: var(--muted-color);
}

/* The other documents, at the foot of each one. A customer reading the refund
   policy is usually a step from wanting the shipping policy. */
.doc__more {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border-color);
}
.doc__more h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-color);
}
.doc__more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc__more a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: .86rem;
  color: var(--text-color);
  transition: border-color var(--transition), color var(--transition);
}
.doc__more a:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 640px) {
  .doc { padding: 26px 0 52px; }
  .doc__body { font-size: .95rem; }
  .doc__body h3 { margin-top: 30px; font-size: 1.08rem; }
}

/* FAQs. Shares the reading column above; only the accordion is new.

   Built on <details>/<summary>, so the open and closed states are the browser's
   own and there is no script to go wrong. The marker is replaced with a chevron
   because the default triangle differs on every platform. */
.faq__group { margin-bottom: 34px; }
.faq__group:last-of-type { margin-bottom: 0; }

.faq__cat {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.faq__item {
  border-bottom: 1px solid var(--border-color);
}
.faq__item:first-of-type { border-top: 1px solid var(--border-color); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-strong);
  transition: color var(--transition);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--primary-color); }

.faq__item summary::after {
  content: '\f078';                    /* chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex: 0 0 auto;
  font-size: .72rem;
  color: var(--muted-color);
  transition: transform var(--transition);
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item[open] summary { color: var(--primary-color); }

.faq__answer {
  padding: 0 2px 18px;
  max-width: 68ch;
  color: var(--text-color);
  line-height: 1.7;
}
.faq__answer p { margin: 0 0 12px; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }

/* Keyboard users must be able to see which question they are on. */
.faq__item summary:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   18. Compare — the card button, the tray, and the table
   ========================================================================== */

/* Sits under the wishlist heart, same shape and same states, because they are
   the same kind of control: a toggle over the image that remembers something
   about this browser. */
.compare-btn {
  position: absolute;
  top: 54px; right: 10px;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--muted-color);
  font-size: .8rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.compare-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
.compare-btn.is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* The detail page uses the shared .icon-btn, so only the active state needs
   saying — the rest it already has. */
.icon-btn[data-compare].is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* ---- the tray ---- */

/* A floating card, not a bar welded to the bottom edge. The edge belongs to the
   tab bar on a phone — Home, Shop, Search, Account, Cart — and a tray docked
   there covers the entire navigation, which is what this used to do. Sitting
   clearly *above* something also reads as dismissible, which it now is.

   Removed from the DOM entirely when nothing is selected: an empty bar parked
   over a phone screen is rent paid for nothing. */
.cmp-tray {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);
  width: min(var(--container), calc(100% - 32px));
  /* Under the tab bar (700) on purpose. They are laid out so they never meet,
     but if a future change makes them, navigation wins. */
  z-index: 690;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: cmpTrayUp .26s var(--ease);
}

@keyframes cmpTrayUp {
  from { transform: translate(-50%, calc(100% + 28px)); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}

/* Above the tab bar rather than over it. 59px is the bar (58 of items and its
   1px border); the 10 is the gap that makes the two read as separate things. */
@media (max-width: 1024px) {
  .cmp-tray {
    bottom: calc(69px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
  }
}

/* The grab handle. A sheet along the bottom of a phone is expected to have one
   and to do something when you pull it down, so it has one and it does. */
.cmp-tray__pull {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 0 3px;
  -webkit-tap-highlight-color: transparent;
}
.cmp-tray__pull-bar {
  width: 42px; height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--transition);
}
.cmp-tray__pull:hover .cmp-tray__pull-bar { background: var(--muted-light); }

/* Only the collapsed pill shows a label — expanded, the tray says what it is
   by showing the products. */
.cmp-tray__pull-label { display: none; }

/* ---- collapsed ---- */

/* Folded away to a pill in the corner. The alternative to a dismissible tray is
   a shopper who has to clear the comparison to get their screen back, which
   loses the comparison — the one thing they were building. */
.cmp-tray.is-collapsed {
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  transform: none;
  width: auto;
  border-radius: var(--radius-pill);
  background: var(--primary-color);
  border-color: var(--primary-color);
  animation: none;
}
.cmp-tray.is-collapsed .cmp-tray__inner,
.cmp-tray.is-collapsed .cmp-tray__pull-bar { display: none; }

.cmp-tray.is-collapsed .cmp-tray__pull {
  width: auto;
  gap: 9px;
  padding: 0 16px;
  min-height: 46px;
}
.cmp-tray.is-collapsed .cmp-tray__pull-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.cmp-tray__pull-count {
  display: grid;
  place-items: center;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 700;
}

/* ---- the expanded body ---- */

.cmp-tray__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 16px 14px;
}

.cmp-tray__slots {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.cmp-tray__slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Grows to fit a long name and stops. Two slots sharing a 1320px bar between
     them makes a thumbnail and four words look like a mistake. */
  flex: 0 1 300px;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
  transition: border-color var(--transition), background var(--transition);
}

/* The whole slot is the link and the X sits over it, rather than the X being
   inside the anchor — a button nested in a link is invalid, and browsers
   disagree about which of the two a tap belongs to. */
.cmp-tray__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.cmp-tray__slot img {
  width: 46px; height: 46px;
  flex: none;
  object-fit: contain;
}

/* Two lines, then clipped. Tool names run long, and a tray that grows a row
   taller for one product is a tray that moves under your thumb. */
.cmp-tray__name {
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}
.cmp-tray__slot:hover { border-color: var(--primary-color); }
.cmp-tray__link:hover .cmp-tray__name { color: var(--primary-color); }

/* The empty slot is the instruction: one product is not a comparison, and a
   dashed box saying so beats a sentence somewhere else on the page. */
.cmp-tray__slot--empty {
  justify-content: center;
  padding: 6px 12px;
  min-height: 58px;
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface-alt);
  color: var(--muted-color);
  font-size: .82rem;
  font-weight: 600;
}
.cmp-tray__slot--empty i { font-size: .9rem; }
.cmp-tray__slot--empty:hover {
  border-color: var(--primary-color);
  background: var(--primary-soft);
  color: var(--primary-color);
}

.cmp-tray__drop {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--muted-color);
  font-size: .68rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition);
}
.cmp-tray__drop:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.cmp-tray__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.cmp-tray__clear {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted-color);
  padding: 8px 4px;
  transition: color var(--transition);
}
.cmp-tray__clear:hover { color: var(--danger-color); }
.cmp-tray__go { white-space: nowrap; }

/* Not a link until there are two things to compare. Disabled rather than
   hidden, so the destination stays visible the whole time and the empty slot
   beside it explains what is missing. */
.cmp-tray__go[disabled] {
  background: var(--surface-alt);
  border-color: var(--border-color);
  color: var(--muted-light);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- what the tray costs the page ---- */

/* Fixed elements do not reserve their own space, so the last row of products
   used to sit underneath the tray. Two footprints, because the collapsed pill
   is half the height of the open tray. */
body.has-compare-tray { padding-bottom: 122px; }
body.has-compare-tray.compare-collapsed { padding-bottom: 84px; }

body.has-compare-tray .to-top { bottom: 118px; }
body.has-compare-tray .toast-stack { bottom: 174px; }
body.has-compare-tray.compare-collapsed .to-top { bottom: 78px; }
body.has-compare-tray.compare-collapsed .toast-stack { bottom: 134px; }

@media (max-width: 1024px) {
  /* The tab bar's own reserve plus the tray sitting on top of it. */
  body.has-compare-tray { padding-bottom: calc(171px + env(safe-area-inset-bottom, 0px)); }
  body.has-compare-tray.compare-collapsed { padding-bottom: calc(127px + env(safe-area-inset-bottom, 0px)); }

  /* Back-to-top and an open tray are two floating things stacked over five
     inches of screen. The tray is the one the shopper just asked for. */
  body.has-compare-tray:not(.compare-collapsed) .to-top { display: none; }
  body.has-compare-tray.compare-collapsed .to-top { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }

  body.has-compare-tray .toast-stack { bottom: calc(174px + env(safe-area-inset-bottom, 0px)); }
  body.has-compare-tray.compare-collapsed .toast-stack { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-tray { animation: none; }
}

/* ---- the tray on a phone ---- */

/* Thumbnails only. Two names, a Clear and a Compare across 340 points is four
   things fighting; the picture is enough to recognise what you picked, each
   slot carries its own X so Clear has nothing left to do, and the button gets
   the room it needs to be a real target. */
@media (max-width: 640px) {
  .cmp-tray__inner { gap: 14px; padding: 2px 12px 12px; }
  .cmp-tray__slots { flex: none; gap: 12px; }
  .cmp-tray__slot {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    padding: 4px;
    justify-content: center;
  }
  .cmp-tray__link { width: 100%; height: 100%; }
  .cmp-tray__slot img { width: 100%; height: 100%; }
  .cmp-tray__slot--empty { min-height: 0; justify-content: center; }
  .cmp-tray__slot--empty span,
  .cmp-tray__name,
  .cmp-tray__clear { display: none; }
  .cmp-tray__drop { top: -7px; right: -7px; width: 22px; height: 22px; }
  .cmp-tray__actions { flex: 1 1 auto; min-width: 0; }
  .cmp-tray__go { flex: 1 1 auto; justify-content: center; }
}

/* ---- the table ---- */

/* One horizontal scroller for the whole table rather than cells that wrap — on
   the wide screens where a comparison can still overflow. Below 768px it is
   turned off again: two columns fit a phone, and a scroller there would only
   stop the header sticking. */
.cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
}

/* Fixed layout so the two products get the same width. Left to the browser,
   the column with the longer name takes three quarters of the table and the
   other one is squeezed against the edge — which reads as one product being
   more important than the other, in a table whose whole job is to weigh them
   evenly. */
.cmp {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: .9rem;
}

.cmp th,
.cmp td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}

/* The label column stays put if the table ever does scroll sideways — a very
   long specification value on a narrow desktop window. Everything else splits
   the rest evenly. */
.cmp tbody th,
.cmp__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 220px;
  background: var(--surface-alt, #fafafa);
  font-weight: 600;
  color: var(--text-strong);
}

/* Left, like every value under it. This cell used to ask for centre and never
   got it — `.cmp th` outranks a single class — so the picture floated in the
   middle of the column while the name and the button sat against its left
   edge. One edge for the whole column is what makes two of them scannable. */
.cmp__head {
  position: relative;
  background: #fff;
  border-bottom: 2px solid var(--border-color);
}
/* The product block inside the cell, so the remove button has something its
   own size to sit on. */
.cmp__card { position: relative; max-width: 260px; padding-right: 34px; }

.cmp__head img { width: 110px; height: 110px; object-fit: contain; margin: 0 0 8px; display: block; }
.cmp__thumb { display: block; color: inherit; }
.cmp__thumb:hover .cmp__name { color: var(--primary-color); }

/* Capped. A column here is 500 points wide on a laptop, and a Call Sales that
   runs the whole way across it reads as the page shouting. */
.cmp__head .btn {
  width: 100%;
  max-width: 220px;
}

.cmp__name {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
  transition: color var(--transition);
}

.cmp__drop {
  position: absolute;
  top: 0; right: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--muted-color);
  transition: all var(--transition);
}
.cmp__drop:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* The column for the product that has not been picked yet. A comparison of one
   is the state people land in most often — arriving from a single card, before
   they have found the second tool — and an empty column offering to be filled
   says what to do next without a paragraph explaining it. */
.cmp__head--ghost { background: var(--surface-alt); }

.cmp__ghost-add {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--border-radius);
  color: var(--muted-color);
  font-size: .84rem;
  font-weight: 600;
  transition: all var(--transition);
}
.cmp__ghost-add i { font-size: 1.15rem; }
.cmp__ghost-add:hover {
  border-color: var(--primary-color);
  background: var(--primary-soft);
  color: var(--primary-color);
}
.cmp__ghost { background: var(--surface-alt); }

.cmp__price { font-weight: 700; color: var(--text-strong); font-size: 1rem; }
.cmp__in    { color: #05603a; }
.cmp__out   { color: #b42318; }

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }

/* Rows every product answers identically. Hidden only while the filter is on —
   the class is on the table, so one toggle moves the whole set. */
.cmp.is-diff-only .cmp__row.is-same { display: none; }

.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
}
.cmp-toggle input { width: 16px; height: 16px; accent-color: var(--primary-color); }

.cmp__note {
  margin: 16px 0 0;
  font-size: .88rem;
  color: var(--muted-color);
}
.cmp__note a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }

/* ---- the table on a phone ---- */

@media (max-width: 768px) {
  /* Two columns fit, so the sideways scroller comes off — which is also what
     lets the header stick to the viewport rather than to a box that never
     scrolls vertically. */
  .cmp-wrap { overflow: visible; }

  .cmp { font-size: .82rem; }
  .cmp th, .cmp td { padding: 10px; }

  /* The head follows you down the specification list. Losing track of which
     column is which by row twelve is the whole failure mode of a comparison
     table on a phone. Under the sticky site header, the offset the account
     bar already uses. */
  .cmp thead th {
    position: sticky;
    top: calc(var(--header-height) + 1px);
    z-index: 4;
  }
  /* Sticky on both axes at once, so it has to outrank each of them. */
  .cmp__corner { z-index: 5; }

  .cmp tbody th,
  .cmp__corner { width: 34%; font-size: .78rem; }

  .cmp__head { padding: 10px 8px; }
  .cmp__head img { width: 62px; height: 62px; margin-bottom: 6px; }
  .cmp__name {
    margin-bottom: 8px;
    font-size: .78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Half a phone's width minus a label column is 110 points, and "Call Sales"
     with an icon does not fit that at the shared button's tracking. The
     letter-spacing and the icon gap go first — they are decoration; the words
     are the button. */
  .cmp__head .btn {
    width: 100%;
    min-height: 36px;
    padding: 6px 4px;
    gap: 6px;
    font-size: .7rem;
    letter-spacing: 0;
  }
  /* No reserved gutter here: the column is 110 points wide, the image only 62,
     so the X has the top-right corner to itself already — and those 26 points
     were coming straight out of the button's text. */
  .cmp__card { max-width: none; padding-right: 0; }
  .cmp__drop { width: 24px; height: 24px; font-size: .7rem; }
  .cmp__ghost-add { padding: 14px 6px; font-size: .74rem; gap: 6px; }

  .cmp__price { font-size: .88rem; }
}


/* ==========================================================================
   30. Error pages
   ==========================================================================
   One centred column. A 404 is a dead end, and the two things somebody in that
   position wants are a way to find what they came for and a way back — so the
   search box is the largest thing on it and everything else is secondary. */

.errorpage {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 0 24px;
  text-align: center;
}

/* Big, and deliberately not the loudest thing on the page: the heading below
   it is what actually says what happened. */
.errorpage__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--border-color);
  letter-spacing: -.03em;
}

.errorpage h1 {
  margin: 6px 0 12px;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--text-strong);
}

.errorpage > p {
  margin: 0 auto 26px;
  max-width: 46ch;
  color: var(--muted-color);
  line-height: 1.7;
}

.errorpage__search {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
}
.errorpage__search i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-color);
  pointer-events: none;
}
.errorpage__search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--text-color);
}
.errorpage__search input:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 1px;
  border-color: var(--primary-color);
}
.errorpage__search .btn { flex: 0 0 auto; height: 46px; }

.errorpage__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.errorpage__cats {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.errorpage__cats h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-color);
}
.errorpage__cats ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.errorpage__cats a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: .86rem;
  color: var(--text-color);
  transition: border-color var(--transition), color var(--transition);
}
.errorpage__cats a:hover { border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 560px) {
  .errorpage__search { flex-direction: column; }
  .errorpage__search .btn { width: 100%; }
}