/* =====================================================================
   DH Optics — storefront stylesheet
   Phase 1: design tokens, resets, layout primitives and the shared
   components that appear on every page (top bar, header, breadcrumbs,
   product card, filters sidebar, trust badges, footer).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink:            #0f1620;
  --ink-2:          #33404f;
  --muted:          #6b7684;
  --muted-2:        #9aa3ad;
  --line:           #e4e8ed;
  --line-soft:      #eef1f5;
  --bg:             #ffffff;
  --bg-soft:        #f6f8fa;
  --bg-sand:        #F0EAE4;
  --bg-ice:         #D8E2EA;
  --navy:           #0A0A12;
  --accent:         #A88C70;   /* muted taupe-gold, sampled from the design */
  --link:           #1a6fd4;
  --star:           #f5a623;
  --success:        #1f8a4c;
  --success-bg:     #e6f4ec;
  --info:           #1a6fd4;
  --info-bg:        #e7f0fb;
  --warn:           #b7791f;
  --warn-bg:        #fdf3e2;
  --danger:         #d0342c;
  --danger-bg:      #fceceb;

  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --shadow-sm:      0 1px 2px rgba(16, 24, 40, .06);
  --shadow:         0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg:      0 12px 32px rgba(16, 24, 40, .12);

  --container:      1240px;
  --gutter:         24px;
  --header-h:       72px;
  --topbar-h:       36px;   /* the black bar above the header; both stick together */

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

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

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

/* The hidden attribute must beat component display rules (.btn is inline-flex,
   which would otherwise keep a [hidden] button visible). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }

/* Keyboard focus stays visible everywhere (spec 9 accessibility) */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; }

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

.section { padding-block: 48px; }
.section--tight { padding-block: 28px; }
.section--soft { background: var(--bg-soft); }

.section-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
}
.section-head h2 {
  font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.section-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.section-head .link-more { font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Sized by count rather than fixed at five, so switching a category off
   closes the gap instead of leaving a hole in the row. */
.category-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #1b2534; }
.btn--outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--bg-soft); }
.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--muted); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 14px; font-size: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

.input, .select, .textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font: inherit;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--link); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 120px; resize: vertical; }

.field-error { margin-top: 5px; font-size: 12px; color: var(--danger); }

.check {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.check input { width: 16px; height: 16px; accent-color: var(--navy); }
.check .count { margin-left: auto; font-size: 12px; color: var(--muted-2); }

/* ---------- Flash messages ---------- */
.flash-stack { margin-block: 16px; display: grid; gap: 10px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 14px;
}
.flash--success { background: var(--success-bg); border-color: #bfe3cf; color: var(--success); }
.flash--error   { background: var(--danger-bg);  border-color: #f4c7c4; color: var(--danger); }
.flash--info    { background: var(--info-bg);    border-color: #c8ddf7; color: var(--info); }
.flash--warning { background: var(--warn-bg);    border-color: #f0dcb4; color: var(--warn); }

/* =====================================================================
   Top utility bar
   ===================================================================== */
.topbar {
  background: var(--navy); color: rgba(255, 255, 255, .82);
  font-size: 12px;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: var(--topbar-h);
}
.topbar__group { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar__item strong { color: #fff; font-weight: 600; }
.topbar a:hover { color: #fff; }

/* =====================================================================
   Header
   ===================================================================== */
/* Top bar + header stick as one block, so the bar never scrolls away. */
.site-top { position: sticky; top: 0; z-index: 60; }
.header {
  position: relative; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--line-soft);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* The wordmark image is about 2.9 : 1, so height alone sets its size. */
.logo__img { display: block; height: 56px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; min-width: 0; }
.nav a {
  position: relative; padding: 8px 0;
  font-size: 14px; color: var(--ink-2);
  white-space: nowrap;   /* "Contact Lenses" must not wrap onto two lines */
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); font-weight: 600; }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--navy);
}
.nav a.is-highlight { color: var(--accent); font-weight: 600; }

/* Search must keep a usable width; the nav gives up space before it does. */
.header__search { flex: 1 1 200px; min-width: 170px; max-width: 340px; margin-left: auto; }
.search-form { position: relative; }
.search-form input {
  width: 100%; padding: 10px 14px 10px 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); font-size: 13px;
}
.search-form input:focus { background: #fff; border-color: var(--link); outline: none; }
.search-form button {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px; color: var(--muted); line-height: 0;
}

.header__actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.icon-action {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; gap: 3px; font-size: 11px; color: var(--ink-2);
}
.icon-action:hover { color: var(--ink); }
.icon-action.is-active { color: var(--ink); font-weight: 600; }
.icon-action__badge {
  position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.nav-toggle { display: none; background: none; border: 0; padding: 6px; color: var(--ink); }

/* =====================================================================
   Breadcrumbs
   ===================================================================== */
.breadcrumbs { padding-block: 14px; font-size: 13px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "›"; color: var(--muted-2); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); }

/* =====================================================================
   Page hero (category / account pages)
   ===================================================================== */
.page-hero { background: var(--bg-soft); }
.page-hero__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; padding-block: 26px 32px;
}
.page-hero h1 { font-size: 34px; margin-bottom: 6px; }
.page-hero p { color: var(--muted); margin: 0; max-width: 60ch; }
.page-hero__copy { min-width: 0; }
.page-hero__aside {
  flex-shrink: 0; display: grid; gap: 14px; justify-items: end;
  max-width: 460px;
}
.page-hero__media { flex-shrink: 0; max-width: 460px; }
.page-hero__media img { border-radius: var(--radius); width: 100%; }
/* When a promo card shares the column, the banner sits under it at half height. */
.page-hero__media--compact { max-width: 460px; }
.page-hero__media--compact img { max-height: 150px; object-fit: cover; }

/* =====================================================================
   Sub-category quick filter chips
   ===================================================================== */
.chips {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 12px; margin-block: 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.chip {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
}
.chip:hover { background: var(--bg-soft); }
.chip.is-active { background: #eef4fb; border-color: #cfe0f4; }
.chip__icon { width: 36px; height: 26px; object-fit: contain; flex-shrink: 0; }
.chip__label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip__count { font-size: 11px; color: var(--muted); }

/* =====================================================================
   Listing layout: filters sidebar + product grid
   ===================================================================== */
.listing { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }

.filters {
  position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 12px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--line-soft);
}
.filters__head h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.filters__clear { font-size: 12px; color: var(--link); background: none; border: 0; padding: 0; }

/* Mobile-only control that collapses the filter panel (see main.js). */
.filters-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 16px; padding: 13px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.filters-toggle__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 11px; letter-spacing: 0;
}
.filters-toggle__chevron {
  margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  /* Open: points up ("collapse me"). Collapsed: points down ("expand me"). */
  transform: rotate(-135deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.filters-panel.is-collapsed .filters-toggle__chevron {
  transform: rotate(45deg) translate(-2px, -2px);
}
.filters-panel.is-collapsed .filters { display: none; }

.facet { border-bottom: 1px solid var(--line-soft); padding: 14px 16px; }
.facet:last-child { border-bottom: 0; }
.facet__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.facet__toggle svg { transition: transform .18s ease; color: var(--muted); }
.facet[data-open="false"] .facet__toggle svg { transform: rotate(180deg); }
.facet__body { margin-top: 12px; }
.facet[data-open="false"] .facet__body { display: none; }
.facet__more { background: none; border: 0; padding: 4px 0; font-size: 13px; color: var(--ink-2); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); padding: 0; background: var(--c, #ccc);
  position: relative;
}
.swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.swatch--more {
  width: auto; height: 24px; padding: 0 10px; border-radius: 999px;
  background: #fff; font-size: 12px; color: var(--ink-2);
}

.range__values {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-2); margin-bottom: 8px;
}
.range input[type="range"] { width: 100%; accent-color: var(--navy); }

/* Listing toolbar */
.listing__toolbar {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.listing__count { font-size: 14px; color: var(--ink-2); }
.listing__tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.listing__tools label { font-size: 13px; color: var(--muted); }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
  padding: 7px 10px; background: #fff; border: 0; color: var(--muted); line-height: 0;
}
.view-toggle button.is-active { background: var(--navy); color: #fff; }

/* =====================================================================
   Product card
   ===================================================================== */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.product-grid > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.product-card {
  position: relative; background: #fff; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .18s ease;
}
.product-card:hover { box-shadow: var(--shadow); z-index: 1; }

.product-card__media {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center; background: #fff; overflow: hidden;
}
.product-card__media img { max-height: 100%; object-fit: contain; }

.product-card__wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.product-card__wish:hover { color: var(--danger); border-color: var(--danger); }
.product-card__wish.is-active { color: var(--danger); border-color: var(--danger); }
.product-card__wish.is-active svg { fill: currentColor; }

.product-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 8px; border-radius: 4px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.product-card__badge--soon { background: var(--muted); }

.product-card__brand { font-size: 13px; font-weight: 600; color: var(--ink); }
.product-card__name { font-size: 13px; color: var(--muted); }
.product-card__category { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__now { font-size: 16px; font-weight: 700; }
.price__was { font-size: 13px; color: var(--muted-2); text-decoration: line-through; }
.price__off { font-size: 12px; font-weight: 700; color: var(--success); }

.rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--star); line-height: 0; }
.rating__stars svg { width: 13px; height: 13px; }

.color-dots { display: flex; gap: 6px; }
.color-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--line);
}

.product-card__actions { margin-top: auto; display: flex; gap: 8px; }

/* List view */
.product-grid.is-list { grid-template-columns: 1fr; }
.product-grid.is-list .product-card { flex-direction: row; align-items: center; gap: 20px; }
.product-grid.is-list .product-card__media { width: 200px; flex-shrink: 0; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2);
}
.pagination a:hover { border-color: var(--navy); }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

/* Empty state */
.empty-state {
  padding: 64px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted);
}
.empty-state h3 { font-size: 18px; color: var(--ink); margin-bottom: 8px; }

/* =====================================================================
   Trust badges strip
   ===================================================================== */
.trust-strip { background: var(--bg-soft); }
.trust-strip__inner {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  padding-block: 26px;
}
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item__icon { color: var(--ink-2); flex-shrink: 0; }
.trust-item__title { font-size: 13px; font-weight: 700; }
.trust-item__subtitle { font-size: 12px; color: var(--muted); }

/* =====================================================================
   Account layout (Account.png / Wishlist.png)
   ===================================================================== */
.account { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }

.account-sidebar {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.account-sidebar__user {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; border-bottom: 1px solid var(--line-soft);
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 15px;
}
.account-sidebar__name { font-size: 14px; font-weight: 700; }
.account-sidebar__email { font-size: 12px; color: var(--muted); word-break: break-all; }
.account-sidebar__edit { font-size: 12px; color: var(--link); }

.account-nav { padding: 8px; }
.account-nav a,
.account-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; text-align: left;
  font-size: 14px; color: var(--ink-2);
}
.account-nav a:hover,
.account-nav button:hover { background: var(--bg-soft); }
.account-nav a.is-active { background: #eef4fb; color: var(--link); font-weight: 600; }
.account-nav a svg { color: var(--muted); flex-shrink: 0; }
.account-nav a.is-active svg { color: var(--link); }
.account-nav__divider { height: 1px; background: var(--line-soft); margin: 8px 12px; }
.account-nav .is-logout { color: var(--danger); }
.account-nav .is-logout svg { color: var(--danger); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 20px;
}
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.card__head h2 { font-size: 17px; }
.card__head p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

.stat-card { border-radius: var(--radius); padding: 18px; border: 1px solid transparent; }
.stat-card__label { font-size: 13px; color: var(--ink-2); }
.stat-card__value { font-size: 26px; font-weight: 700; margin-block: 4px 8px; }
.stat-card__link { font-size: 13px; color: var(--link); }
.stat-card--blue   { background: #eef4fb; border-color: #d9e7f7; }
.stat-card--green  { background: #e9f7ef; border-color: #cfeeda; }
.stat-card--amber  { background: #fdf6e7; border-color: #f5e6c2; }
.stat-card--violet { background: #f1eefb; border-color: #ded6f5; }

/* Data tables */
.table { font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table__thumb { width: 46px; height: 34px; object-fit: contain; }
.table-wrap { overflow-x: auto; }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge--delivered  { background: var(--success-bg); color: var(--success); }
.badge--shipped    { background: var(--info-bg);    color: var(--info); }
.badge--processing { background: var(--warn-bg);    color: var(--warn); }
.badge--pending    { background: var(--bg-soft);    color: var(--muted); }
.badge--cancelled,
.badge--returned   { background: var(--danger-bg);  color: var(--danger); }

/* =====================================================================
   Footer
   ===================================================================== */
.footer { background: var(--navy); color: rgba(255, 255, 255, .72); font-size: 13px; }
.footer a:hover { color: #fff; }

.footer__top {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
  gap: 32px; padding-block: 48px;
}
.footer h3 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.footer__links li { margin-bottom: 9px; }

.newsletter p { max-width: 32ch; margin-bottom: 16px; }
.newsletter__form { display: flex; max-width: 320px; }
.newsletter__form input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .2); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px;
}
.newsletter__form input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter__form button {
  padding: 11px 20px; border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--link); color: #fff; font-size: 13px; font-weight: 600;
}

.footer__social { display: flex; gap: 14px; margin-top: 22px; }
.footer__social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8);
}
.footer__social a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.footer__help li { display: flex; gap: 10px; margin-bottom: 14px; }
.footer__help strong { display: block; color: #fff; font-weight: 600; }
.footer__help span { font-size: 12px; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
}
.payment-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.payment-icons span {
  padding: 4px 10px; border-radius: 4px;
  background: #fff; color: var(--navy);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}

/* =====================================================================
   Placeholder (scaffold only — removed as pages are built)
   ===================================================================== */
.placeholder {
  margin-block: 48px; padding: 48px 32px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--bg-soft);
}
.placeholder h1 { font-size: 26px; margin-bottom: 10px; }
.placeholder__phase {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px;
  border-radius: 999px; background: var(--info-bg); color: var(--info);
  font-size: 12px; font-weight: 600;
}
.placeholder code {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; font-size: 13px;
}

/* ---- Error pages (404 / 403 / 419 / 500) ---- */
.error-page {
  max-width: 620px; margin-inline: auto; padding-block: 40px; text-align: center;
}
.error-page__code {
  font-family: var(--font-display, inherit); font-size: 88px; line-height: 1;
  font-weight: 700; letter-spacing: -0.03em; color: var(--accent); opacity: 0.35;
  margin-bottom: 8px;
}
.error-page__title { font-size: 30px; margin-bottom: 10px; }
.error-page__message { color: var(--muted); margin-bottom: 28px; }
.error-page__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 40px;
}
.error-page__search {
  padding-top: 28px; border-top: 1px solid var(--line);
}
.error-page__hint { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.error-page__form { display: flex; gap: 8px; }
.error-page__search .input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 600px) {
  .error-page__code { font-size: 64px; }
  .error-page__title { font-size: 24px; }
  .error-page__actions .btn { flex: 1 1 100%; }
  .error-page__form { flex-wrap: wrap; }
  .error-page__form .btn { width: 100%; }
}

/* =====================================================================
   Responsive (mobile-first structure preserved, desktop reference above)
   ===================================================================== */
/* Between the full desktop layout and the mobile nav, tighten the header
   spacing rather than letting the search box collapse. */
@media (max-width: 1200px) {
  .header__inner { gap: 18px; }
  .nav { gap: 16px; }
  .header__actions { gap: 16px; }
}

@media (max-width: 1080px) {
  .listing { grid-template-columns: 200px 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .nav a { font-size: 13px; }
  .icon-action span:not(.icon-action__badge) { display: none; }
}

@media (max-width: 900px) {
  /*
   * Mobile header: menu button on the left, logo dead centre,
   * account/wishlist/cart on the right.
   *
   * The logo is absolutely centred rather than balanced with flex spacers,
   * because the two side groups are different widths — the icons need more
   * room than the menu button, so equal flex bases would squeeze them. The
   * icon gap tightens here to keep the icons clear of the centred logo.
   */
  .nav-toggle { display: inline-flex; order: -2; }
  .header__actions { order: 2; margin-left: auto; gap: 10px; }

  /* Trim the logo so the centred wordmark clears the icons on a 375px screen. */
  .logo__img { height: 38px; }

  /* The logo is out of flow, so the side groups reserve the row's height. */
  .header__actions, .nav-toggle { min-height: var(--header-h); }

  .header__inner > .logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 0; height: var(--header-h); margin: 0;
  }
  .nav {
    /*
     * Below the whole header, not just its first row — the search sits on a
     * second row here, and a fixed --header-h offset put the drawer behind it,
     * hiding the first nav link.
     */
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 16px; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a.is-active::after { display: none; }

  .header__search { order: 3; flex-basis: 100%; max-width: none; margin: 0 0 12px; }
  .header__inner { flex-wrap: wrap; position: relative; gap: 12px; }

  .account, .listing { grid-template-columns: 1fr; }
  .filters { position: static; }
  .page-hero__inner { flex-direction: column; align-items: flex-start; }
  .page-hero__aside { max-width: 100%; width: 100%; justify-items: stretch; }
  .page-hero__media { max-width: 100%; }
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /*
   * Touch targets. The header icons drop their labels on mobile, leaving a
   * 21px glyph — under the 24px minimum. Grow the tappable area with an
   * overlay rather than the box itself, so the layout and the cart badge
   * stay exactly where they are.
   */
  .icon-action::after {
    content: ''; position: absolute; inset: -12px; border-radius: 8px;
  }
  .nav-toggle { padding: 12px; margin-left: -12px; }

  /* Footer link lists: 16px of text is not a comfortable target. */
  .footer__links li { margin-bottom: 0; }
  .footer__links a { display: inline-block; padding-block: 7px; }
}

/*
 * Very small phones: a centred logo, three icons and the menu button have to
 * share 320px, so the wordmark shrinks a step further.
 */
@media (max-width: 370px) {
  .logo__img { height: 30px; }
}

@media (max-width: 700px) {
  :root { --gutter: 16px; }
  .topbar__group:last-child { display: none; }
  .topbar { font-size: 11px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid.is-list .product-card { flex-direction: column; align-items: stretch; }
  .product-grid.is-list .product-card__media { width: 100%; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 26px; }
  .section { padding-block: 32px; }
  .listing__toolbar { flex-wrap: wrap; }
}

/* =====================================================================
   Phase 4 — homepage, listing and product detail sections
   ===================================================================== */

.section-head--center { justify-content: center; }
.section-head--center::after { display: none; }

/* ---------- Hero ---------- */
.hero { background: var(--bg-sand); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  min-height: 460px;
}
.hero__eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.hero__heading { font-size: 56px; line-height: 1.05; letter-spacing: -.02em; }
.hero__heading span { display: block; color: var(--accent); }
.hero__sub { margin: 20px 0 28px; max-width: 44ch; color: var(--ink-2); font-size: 15px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px;
  font-size: 12px; color: var(--muted);
}
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.hero__trust strong { color: var(--ink); font-size: 12px; }
.hero__trust--inline { margin-top: 24px; gap: 32px; }
.hero__media { justify-self: end; }
.hero__media img { border-radius: var(--radius-lg); object-fit: cover; }

/* ---------- Category tiles ---------- */
.category-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; transition: box-shadow .18s ease, transform .18s ease;
}
.category-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.category-tile__media { display: block; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.category-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.category-tile__body { display: block; padding: 16px; }
.category-tile__title {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.category-tile__sub { display: block; margin: 6px 0 12px; font-size: 13px; color: var(--muted); }

/* ---------- Value strip ---------- */
.value-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 26px 32px; border-radius: var(--radius);
  background: var(--navy); color: rgba(255, 255, 255, .7); font-size: 12px;
}
.value-strip li {
  display: flex; align-items: center; gap: 14px;
  padding-inline: 20px;
}
.value-strip li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.value-strip strong {
  color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Promo tiles ---------- */
.promo-tile {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 150px; padding: 24px; overflow: hidden;
  border-radius: var(--radius);
}
.promo-tile--blue { background: #D8E2EA; }
.promo-tile--sand { background: #E8DCD0; }
.promo-tile--ice  { background: #D6E0EC; }
.promo-tile__copy { position: relative; z-index: 1; max-width: 60%; }
.promo-tile__eyebrow {
  display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.promo-tile__heading { display: block; font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.promo-tile img {
  width: 130px; height: 110px; object-fit: contain; flex-shrink: 0;
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.carousel__item { scroll-snap-align: start; border-right: 1px solid var(--line); }
.carousel__item:last-child { border-right: 0; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.carousel__nav:hover { border-color: var(--navy); }
.carousel__nav--prev { left: -16px; transform: translateY(-50%) rotate(90deg); }
.carousel__nav--next { right: -16px; transform: translateY(-50%) rotate(-90deg); }

/* ---------- Brand strip ---------- */
/* ---------- Top brands carousel ---------- */
.brand-rail {
  position: relative;
  padding: 28px 30px;
  background: var(--bg-soft);
  border-radius: 26px;
}
.brand-rail__track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* The tiles carry the visible edge, so hide the scrollbar itself. */
  scrollbar-width: none;
}
.brand-rail__track::-webkit-scrollbar { display: none; }
.brand-rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.brand-rail__item { flex: 0 0 auto; scroll-snap-align: start; }

.brand-tile {
  display: grid; place-items: center;
  width: 168px; height: 128px; padding: 18px;
  background: #fff; border-radius: 16px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.brand-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.brand-tile img {
  max-width: 100%; max-height: 56px; width: auto; object-fit: contain;
}
/* Placeholder until a brand's own logo is uploaded. */
.brand-tile__name {
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); text-align: center; text-transform: uppercase;
}

.brand-rail__nav {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: -22px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 50%;
  color: var(--ink); box-shadow: var(--shadow);
  transition: opacity .18s ease;
}
.brand-rail__nav:hover { background: var(--bg-soft); }
.brand-rail__nav--prev { left: -6px; }
.brand-rail__nav--next { right: -6px; }
/* Hidden rather than removed, so the track keeps its width when at an end. */
.brand-rail__nav[data-rail-disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 700px) {
  .brand-rail { padding: 20px 16px; border-radius: 20px; }
  .brand-tile { width: 132px; height: 104px; padding: 14px; }
  .brand-tile img { max-height: 44px; }
  .brand-tile__name { font-size: 14px; }
  .brand-rail__nav { display: none; }
}

/* ---------- Service tiles ---------- */
.service-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding: 28px 0; background: var(--bg-soft); border-radius: var(--radius);
}
.service-tiles li { display: flex; gap: 16px; padding-inline: 28px; }
.service-tiles li + li { border-left: 1px solid var(--line); }
.service-tiles strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.service-tiles p { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }

/* ---------- Category promo card ---------- */
.promo-card {
  display: flex; align-items: center; gap: 16px;
  max-width: 460px; padding: 16px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  /* The photo bleeds to the card's edges, so clip it to the rounded corners. */
  overflow: hidden;
}
.promo-card__icon { color: var(--accent); flex-shrink: 0; }
.promo-card__copy { flex: 1; }
.promo-card__eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.promo-card__heading { display: block; margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
/*
 * The promo photo fills the right side of the card edge to edge, as in the
 * design. Negative margins cancel the card's own padding on three sides so it
 * reaches the border; align-self stretches it to the full card height, which
 * the copy on the left determines.
 */
.promo-card img {
  width: 44%; flex-shrink: 0;   /* ~40% of the card once padding is counted */
  align-self: stretch; height: auto;
  object-fit: cover; object-position: center;
  margin: -16px -20px -16px 0;
}

.chip__icon--fallback { display: grid; place-items: center; color: var(--muted); }
.select--inline { width: auto; padding: 7px 28px 7px 10px; font-size: 13px; }
.facet--submit { display: none; }
.no-js .facet--submit { display: block; }

/* =====================================================================
   Product detail
   ===================================================================== */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }

.pdp__gallery { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.pdp__thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp__thumb {
  padding: 4px; background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pdp__thumb.is-active { border-color: var(--navy); }
.pdp__thumb img { width: 100%; height: 58px; object-fit: contain; }
.pdp__thumb--more {
  display: grid; place-items: center; height: 70px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: center;
}
.pdp__thumb--more small { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.pdp__stage {
  display: grid; place-items: center; min-height: 380px;
  background: #fff; border-radius: var(--radius);
}
.pdp__stage img { max-height: 380px; width: auto; object-fit: contain; }
.pdp__gallery-actions {
  grid-column: 2; display: flex; gap: 12px; justify-content: center; margin-top: 12px;
}

.pdp__title-row { display: flex; align-items: flex-start; gap: 16px; }
.pdp__title-row h1 { font-size: 26px; line-height: 1.25; }
.pdp__title-row .product-card__wish { position: static; flex-shrink: 0; }
.pdp__sku { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.pdp__price { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 10px; }
.pdp__price-now { font-size: 28px; font-weight: 700; }
.pdp__price-was { font-size: 16px; color: var(--muted-2); text-decoration: line-through; }
.pdp__price-off { font-size: 15px; font-weight: 600; color: var(--success); }

.pdp__delivery {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--success-bg); color: var(--success); font-size: 13px; font-weight: 600;
}
.pdp__delivery--out { background: var(--danger-bg); color: var(--danger); }

.pdp__emi {
  padding: 14px 16px; margin-bottom: 24px;
  background: var(--bg-ice); border: 1px solid #cfe0f4; border-radius: var(--radius-sm);
  font-size: 13px;
}
.pdp__emi strong { display: block; color: var(--link); margin-bottom: 4px; }
.pdp__emi span { color: var(--muted); }

.pdp__option { margin-bottom: 22px; }
.pdp__option h2 { font-size: 14px; margin-bottom: 10px; }
.pdp__swatches { display: flex; gap: 12px; }
.pdp__swatch {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: var(--c, #ccc); border: 1px solid var(--line);
}
.pdp__swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.pdp__size {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px;
  padding: 0 14px; border: 1px solid var(--navy); border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}

.pdp__ctas { display: grid; gap: 12px; margin: 28px 0 22px; }
.pdp__trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.pdp__trust li { display: flex; align-items: center; gap: 8px; }

/* How to buy */
.how-to-buy {
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.how-to-buy h2 { font-size: 17px; margin-bottom: 22px; }
.how-to-buy ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.how-to-buy li { text-align: center; }
.how-to-buy__num {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px;
}
.how-to-buy strong { display: block; font-size: 13px; margin-bottom: 6px; }
.how-to-buy li span:last-child { font-size: 12px; color: var(--muted); }

/* Tabs */
.tabs { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.tabs__nav {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 0 20px; border-bottom: 1px solid var(--line);
}
.tabs__tab {
  padding: 16px 14px; background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-active { color: var(--ink); border-bottom-color: var(--navy); }
.tabs__panel { padding: 26px 20px; }
.tabs__split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.tabs__split h3 { font-size: 15px; margin-bottom: 18px; }

.feature-list { display: grid; gap: 8px; margin-top: 14px; }
.feature-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.feature-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2);
}

/* ---- Frame measurement diagrams ---- */
/*
 * Two-tone by design: the frame outline stays quiet so the arrow is what
 * tells the five diagrams apart. Both inherit from the page's palette rather
 * than being baked into the SVG, so they follow the theme.
 */
.mdiag { flex-shrink: 0; }
.mdiag__frame { stroke: var(--line); stroke-width: 2; }
.mdiag__arrow { stroke: var(--ink); stroke-width: 1.7; }

/* The measurements panel on the product page (replaces the old frame size). */
.measure { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.measure__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 0 4px; background: none; border: 0; text-align: left;
}
.measure__head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
/* Minus when open, plus when collapsed. */
.measure__sign { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.measure__sign::before, .measure__sign::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px;
  background: var(--muted); transition: transform .18s ease;
}
.measure__sign::after { transform: rotate(90deg); opacity: 0; }
.measure.is-collapsed .measure__sign::after { opacity: 1; }
.measure.is-collapsed .measure__body { display: none; }

.measure__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px; margin-top: 14px;
}
.measure__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.measure__text { min-width: 0; }
.measure__label { display: block; font-size: 12px; color: var(--muted); }
.measure__value { font-size: 14px; }
.measure__guide {
  margin-top: 18px; padding: 0; background: none; border: 0;
  font-size: 13px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.measure__guide:hover { color: var(--ink); }

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

/* The same data inside the Details and Size Guide tabs, laid out in a row. */
.measurements {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px 16px; text-align: center;
}
.measurements li { display: grid; justify-items: center; gap: 6px; }
.measurements__label { font-size: 11px; color: var(--muted); }
.measurements strong { font-size: 13px; }

.spec-table th {
  width: 200px; text-align: left; padding: 11px 0;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.spec-table td { padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }

.reviews-head { margin-bottom: 20px; }
.reviews-score { font-size: 34px; font-weight: 700; margin-right: 12px; }
.review-list { display: grid; gap: 20px; }
.review-list li { padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.review-list strong { display: block; margin: 8px 0 4px; }
.review-list p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }

/* =====================================================================
   Brands, offers, search
   ===================================================================== */
.brand-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .18s ease;
}
.brand-card:hover { box-shadow: var(--shadow); }
.brand-card__logo { display: grid; place-items: center; height: 46px; }
.brand-card__logo img { max-height: 40px; width: auto; }
.brand-card__wordmark { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.brand-card__tagline { margin: 0; font-size: 13px; color: var(--muted); }
.brand-card__media { display: grid; place-items: center; height: 110px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.brand-card__media img { max-height: 100px; width: auto; object-fit: contain; }
.brand-card .btn { margin-top: auto; }

.cta-blocks { margin-top: 32px; }
.cta-block {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; background: var(--bg-soft); border-radius: var(--radius);
}
.cta-block > svg { color: var(--ink-2); flex-shrink: 0; }
.cta-block div { flex: 1; }
.cta-block strong { display: block; font-size: 14px; }
.cta-block p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.offer-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.offer-card:hover { box-shadow: var(--shadow); }
.offer-card img { width: 100%; height: 160px; object-fit: cover; background: var(--bg-soft); }
.offer-card__body { padding: 18px; }
.offer-card__body strong { display: block; font-size: 15px; margin-bottom: 6px; }
.offer-card__body p { font-size: 13px; color: var(--muted); }

.coupon-card {
  padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff;
}
.coupon-card__code {
  display: inline-block; margin-bottom: 12px; padding: 6px 14px;
  background: var(--navy); color: #fff; border-radius: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em;
}
.coupon-card p { margin: 0 0 6px; font-size: 14px; }
.coupon-card .muted { display: block; font-size: 12px; color: var(--muted); }
.coupon-card__expiry { display: block; margin-top: 10px; font-size: 12px; color: var(--muted-2); }

.search-heading { font-size: 24px; margin-bottom: 24px; }

/* ---------- Phase 4 responsive ---------- */
@media (max-width: 1080px) {
  .hero__heading { font-size: 42px; }
  .value-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .value-strip li + li { border-left: 0; }
  .service-tiles { grid-template-columns: 1fr; gap: 24px; }
  .service-tiles li + li { border-left: 0; }
  .measurements { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: 32px; min-height: 0; }
  .hero__media { justify-self: stretch; order: -1; }
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .tabs__split { grid-template-columns: 1fr; gap: 24px; }
  .how-to-buy ol { grid-template-columns: repeat(2, 1fr); }
  .carousel__nav { display: none; }
}

@media (max-width: 700px) {
  .hero__heading { font-size: 32px; }
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; overflow-x: auto; order: 2; }
  .pdp__thumb { flex-shrink: 0; width: 70px; }
  .pdp__gallery-actions { grid-column: 1; flex-wrap: wrap; }
  .measurements { grid-template-columns: repeat(2, 1fr); }
  .how-to-buy ol { grid-template-columns: 1fr; }
  .value-strip { grid-template-columns: 1fr; }
  .pdp__trust { grid-template-columns: 1fr; }
}

/* =====================================================================
   Phase 5 — customer auth and account
   ===================================================================== */

/* Auth cards (login, signup, password reset) */
.auth-card {
  max-width: 460px; margin-inline: auto; padding: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.auth-card h1 { font-size: 24px; text-align: center; margin-bottom: 8px; }
.auth-card__sub {
  margin-bottom: 26px; text-align: center;
  font-size: 14px; color: var(--muted);
}
.auth-card__foot {
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 14px; color: var(--muted);
}
.auth-card__foot a { color: var(--link); font-weight: 600; }
.auth-card .hint a { color: var(--link); }

/* Account layout */
.account__main { display: grid; gap: 20px; min-width: 0; }

.stat-card {
  display: grid; gap: 2px; align-content: start;
  transition: box-shadow .18s ease;
}
.stat-card:hover { box-shadow: var(--shadow); }
.stat-card__icon { color: var(--ink-2); margin-bottom: 6px; }
.stat-card--blue   .stat-card__icon { color: #1a6fd4; }
.stat-card--green  .stat-card__icon { color: #1f8a4c; }
.stat-card--amber  .stat-card__icon { color: #d0342c; }
.stat-card--violet .stat-card__icon { color: #6b4fc9; }

.card__head a { font-size: 13px; color: var(--link); font-weight: 600; white-space: nowrap; }

/* Detail list (name / email / phone / password rows) */
.detail-list { display: grid; }
.detail-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.detail-list li:last-child { border-bottom: 0; }
.detail-list li > svg { color: var(--muted); flex-shrink: 0; }
.detail-list li > span { flex: 1; font-size: 14px; word-break: break-word; }
.detail-list__label { display: block; font-size: 12px; color: var(--muted); }
.detail-list a { font-size: 13px; color: var(--link); font-weight: 600; }

/* Address cards */
.address-card {
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff;
}
.address-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.address-card__head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.address-card__head svg { color: var(--muted); }
.address-card__actions { display: inline-flex; align-items: center; gap: 14px; }
.address-card__actions a, .address-card__actions .link-button { font-size: 13px; color: var(--link); }
.address-card p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }

.link-button {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--link); cursor: pointer;
}
.link-button--danger { color: var(--danger); }
.link-button:hover { text-decoration: underline; }

/* Tables inside account cards */
.order-item-cell { display: inline-flex; align-items: center; gap: 10px; }
.order-item-cell img { width: 44px; height: 34px; object-fit: contain; border-radius: 4px; }
.row-actions { display: inline-flex; align-items: center; gap: 12px; }
.row-actions a, .row-actions button { color: var(--muted); line-height: 0; }
.row-actions a:hover { color: var(--link); }
.row-actions .link-button--danger:hover { color: var(--danger); }

.empty-state--inline { padding: 32px 20px; border: 0; }
.empty-state--inline h3 { font-size: 16px; }

/* Prescription entry mode toggle */
.mode-toggle { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.mode-toggle__option { flex: 1; min-width: 180px; cursor: pointer; }
.mode-toggle__option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-toggle__option span {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2); background: #fff;
}
.mode-toggle__option input:checked + span {
  border-color: var(--navy); background: var(--bg-soft); color: var(--ink);
}
.mode-toggle__option input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

.power-table th { font-size: 12px; }
.power-table td { padding: 8px; }
.input--narrow { width: 100%; min-width: 70px; padding: 8px 10px; font-size: 13px; }

.privacy-note {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-soft); font-size: 13px; color: var(--muted);
}
.privacy-note svg { flex-shrink: 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .account__main .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .account__main .grid--4, .account__main .grid--2 { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 20px; }
}

/* =====================================================================
   Phase 6 — cart and lens configurator
   ===================================================================== */

.page-title { font-size: 28px; margin-bottom: 24px; }

/* ---------- Cart ---------- */
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.cart__items { display: grid; gap: 16px; }

.cart-item {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 20px;
  padding: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cart-item__media {
  display: grid; place-items: center; height: 110px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
}
.cart-item__media img { max-height: 100px; width: auto; object-fit: contain; }
.cart-item__brand { font-size: 12px; color: var(--muted); }
.cart-item__body h2 { font-size: 16px; margin: 2px 0 4px; }
.cart-item__sku { margin: 0 0 10px; font-size: 12px; color: var(--muted-2); }

.cart-item__config {
  display: grid; gap: 5px; margin: 10px 0;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-soft);
  font-size: 13px;
}
.cart-item__config li { display: flex; gap: 8px; align-items: baseline; }
.cart-item__config li > span:first-child { min-width: 110px; color: var(--muted); }
.cart-item__addon { margin-left: auto; color: var(--ink-2); }
.cart-item__breakdown { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cart-item__rx {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: 12px; color: var(--success);
}
.cart-item__stock { margin: 8px 0 0; font-size: 13px; color: var(--danger); }

.cart-item__side {
  display: grid; gap: 12px; justify-items: end; align-content: start; text-align: right;
}
.cart-item__price { font-size: 17px; font-weight: 700; }

.qty-control {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.qty-control button {
  width: 32px; height: 34px; border: 0; background: #fff;
  font-size: 16px; color: var(--ink-2);
}
.qty-control button:hover { background: var(--bg-soft); }
.qty-control input {
  width: 46px; height: 34px; border: 0; border-inline: 1px solid var(--line);
  text-align: center; font: inherit; font-size: 14px;
  -moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart__summary .card { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 16px); }
.cart__summary h2 { font-size: 17px; margin-bottom: 16px; }

.ship-nudge {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); font-size: 13px;
}
.ship-nudge--met { background: var(--success-bg); color: var(--success); }
.ship-nudge svg { flex-shrink: 0; }

.totals { display: grid; gap: 10px; margin-bottom: 18px; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; }
.totals__discount dd { color: var(--success); }
.totals__grand {
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 17px !important;
}
.totals__grand dt { color: var(--ink); font-weight: 700; }
.totals__grand dd { font-weight: 700; }

.coupon-form { margin-bottom: 18px; }
.coupon-form__row { display: flex; gap: 8px; }
.coupon-form__row .input { flex: 1; }
.coupon-applied {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--success-bg); color: var(--success); font-size: 13px;
}
.coupon-applied .link-button { margin-left: auto; color: var(--success); }

.cart__summary .btn { margin-bottom: 10px; }

/* ---------- Lens configurator modal ---------- */
.lens-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lens-modal[hidden] { display: none; }
.lens-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 18, .55); }
.lens-modal__panel {
  position: relative; z-index: 1;
  width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lens-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.lens-modal__head h2 { font-size: 19px; }
.lens-modal__close { background: none; border: 0; padding: 4px; color: var(--muted); }
.lens-modal__close:hover { color: var(--ink); }

.lens-steps {
  display: flex; gap: 8px; padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft); background: var(--bg-soft);
}
.lens-steps li {
  display: flex; align-items: center; gap: 8px; flex: 1;
  font-size: 13px; font-weight: 600; color: var(--muted-2);
}
.lens-steps li span {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--line); color: var(--muted);
  font-size: 12px;
}
.lens-steps li.is-active { color: var(--ink); }
.lens-steps li.is-active span { background: var(--navy); color: #fff; }
.lens-steps li.is-done span { background: var(--success); color: #fff; }

.lens-modal__body { padding: 24px; overflow-y: auto; flex: 1; }
.lens-modal__body h3 {
  font-size: 14px; margin: 22px 0 12px;
}
.lens-modal__body h3:first-child { margin-top: 0; }
.lens-optional { font-weight: 400; font-size: 12px; color: var(--muted); }
.lens-loading { color: var(--muted); font-size: 14px; }
.lens-none { color: var(--muted-2); font-size: 13px; }

.lens-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lens-cards--compact { grid-template-columns: repeat(3, 1fr); }
.lens-card {
  display: grid; gap: 4px; padding: 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.lens-card:hover { border-color: var(--muted-2); }
.lens-card.is-selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); background: var(--bg-soft); }
.lens-card__name { font-size: 14px; font-weight: 600; }
.lens-card__desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.lens-card__price { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }

/* ---- Power-type rows (step 1) ---- */
/* One per line, so the name, its badge and the description read as a sentence. */
/* The anti-reflective coating is included, so it reads as a panel rather than
   another thing to choose between. */
.lens-included {
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.lens-included__head { display: flex; align-items: center; gap: 10px; }
.lens-included__tag {
  padding: 2px 9px; border-radius: 999px;
  background: var(--success-bg, #e8f5ec); color: var(--success, #1c6b3a);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.lens-included__hint { margin: 8px 0 10px; font-size: 12px; color: var(--muted); }
.lens-included .lens-cards { background: transparent; }

.lens-subhead { margin-top: 18px; }

/* An add-on ruled out by the current choice stays visible but inert, so the
   constraint is legible instead of the click just doing nothing. */
.lens-card.is-blocked { opacity: .45; cursor: not-allowed; }
.lens-card.is-blocked:hover { border-color: var(--line); }

.lens-cards--rows { grid-template-columns: 1fr; gap: 10px; }
.lens-cards--rows .lens-card {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 14px; padding: 16px 18px; text-align: left;
}
.lens-card__icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; background: var(--bg-soft); overflow: hidden;
}
.lens-card__icon img { max-width: 34px; max-height: 34px; }
.lens-card__icon--blank::after {
  content: ''; width: 22px; height: 12px; border: 2px solid var(--line);
  border-radius: 6px;
}
.lens-card__text { min-width: 0; }
.lens-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lens-card__badge {
  padding: 2px 8px; border-radius: 999px; background: var(--bg-soft);
  font-size: 11px; font-style: italic; color: var(--muted);
}
.lens-card__chev {
  width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
.lens-cards--rows .lens-card.is-selected .lens-card__chev { border-color: var(--navy); }

@media (max-width: 620px) {
  .lens-cards--rows .lens-card { grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px; }
  .lens-cards--rows .lens-card__chev { display: none; }
}

.lens-note { font-size: 14px; color: var(--muted); }
.lens-note a { color: var(--link); font-weight: 600; }
.lens-rx-list { display: grid; gap: 10px; margin-top: 14px; }
.lens-rx {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 14px;
}
.lens-rx:hover { border-color: var(--muted-2); }
.lens-rx.is-expired { color: var(--muted); }
.lens-rx em { color: var(--danger); font-style: normal; font-size: 12px; }

.lens-summary {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center;
  padding: 16px 24px; border-top: 1px solid var(--line); background: var(--bg-soft);
}
.lens-summary__chips { font-size: 13px; color: var(--ink-2); }
.lens-summary__chips.is-warning { color: var(--danger); font-weight: 600; }
.lens-summary__empty { color: var(--muted-2); }
.lens-summary__price { text-align: right; font-size: 12px; color: var(--muted); }
.lens-summary__price strong { display: block; font-size: 19px; color: var(--ink); }
.lens-summary__actions {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
}
.lens-summary__actions .btn { margin-left: 0; }
.lens-summary__actions .btn--primary { margin-left: auto; }

@media (max-width: 900px) {
  .cart { grid-template-columns: 1fr; }
  .cart__summary .card { position: static; }
  .lens-cards, .lens-cards--compact { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cart-item { grid-template-columns: 90px 1fr; }
  .cart-item__side { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .lens-steps li span { margin-right: 0; }
  .lens-steps li { font-size: 12px; }
}

/* =====================================================================
   Phase 7 — wishlist
   ===================================================================== */

.page-wishlist .page-hero__copy h1 {
  display: inline-flex; align-items: center; gap: 12px;
}
.page-wishlist .page-hero__copy h1 svg { color: var(--danger); }

.wishlist-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wishlist-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.wishlist-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .18s ease;
}
.wishlist-card:hover { box-shadow: var(--shadow); }

.wishlist-card__remove { position: absolute; top: 10px; right: 10px; z-index: 2; }
.wishlist-card__remove button {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--muted);
}
.wishlist-card__remove button:hover { color: var(--danger); border-color: var(--danger); }

.wishlist-card__media {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
}
.wishlist-card__media img { max-height: 100%; object-fit: contain; }
.wishlist-card__body { display: grid; gap: 4px; }
.wishlist-card__actions { margin-top: auto; display: grid; gap: 8px; }

.wishlist-footer {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 4px;
}
.wishlist-footer .cta-block { background: var(--bg-ice); }

.wishlist-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 20px; background: var(--bg-soft); border-radius: var(--radius);
}
.wishlist-tiles li {
  display: flex; align-items: center; gap: 12px; padding-inline: 16px;
  font-size: 12px; color: var(--muted);
}
.wishlist-tiles li + li { border-left: 1px solid var(--line); }
.wishlist-tiles svg { color: var(--ink-2); flex-shrink: 0; }
.wishlist-tiles strong { font-size: 13px; color: var(--ink); }

@media (max-width: 1080px) {
  .wishlist-grid { grid-template-columns: repeat(3, 1fr); }
  .wishlist-footer { grid-template-columns: 1fr; }
  .wishlist-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .wishlist-tiles li + li { border-left: 0; }
}
@media (max-width: 700px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
  .wishlist-tiles { grid-template-columns: 1fr; }
  .wishlist-actions { width: 100%; }
}

/* =====================================================================
   Phase 8 — checkout, confirmation and orders
   ===================================================================== */

.checkout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.checkout__main { display: grid; gap: 20px; min-width: 0; }
.checkout__summary .card { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 16px); }
.checkout__summary h2 { font-size: 17px; margin-bottom: 16px; }

.address-choices { display: grid; gap: 12px; margin-bottom: 18px; }
.address-choice {
  display: flex; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 14px; line-height: 1.6;
}
.address-choice:hover { border-color: var(--muted-2); }
.address-choice:has(input:checked) { border-color: var(--navy); background: var(--bg-soft); }
.address-choice input { margin-top: 3px; accent-color: var(--navy); }
.address-choice__body strong { display: block; margin-bottom: 4px; }

.payment-choices { display: grid; gap: 10px; margin-bottom: 14px; }
.payment-choice {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.payment-choice:hover { border-color: var(--muted-2); }
.payment-choice:has(input:checked) { border-color: var(--navy); background: var(--bg-soft); }
.payment-choice input { accent-color: var(--navy); }
.payment-choice strong { display: block; font-size: 14px; }
.payment-choice span span { font-size: 12px; color: var(--muted); }

.payment-note {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-ice); font-size: 12px; color: var(--ink-2);
}
.payment-note svg { flex-shrink: 0; }

.review-items { display: grid; gap: 14px; margin-bottom: 18px; }
.review-items li { display: flex; gap: 12px; align-items: flex-start; }
.review-items img {
  width: 52px; height: 42px; object-fit: contain; flex-shrink: 0;
  background: var(--bg-soft); border-radius: 4px;
}
.review-items__body { flex: 1; display: grid; gap: 2px; font-size: 13px; }
.review-items__config { font-size: 12px; color: var(--muted); }
.review-items__price { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* Confirmation */
.confirmation { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.confirmation__mark {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--success-bg); color: var(--success);
}
.confirmation h1 { font-size: 26px; margin-bottom: 12px; }
.confirmation__note {
  display: inline-block; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--bg-soft); font-size: 14px;
}
.confirmation__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.confirmation__panels { align-items: start; }

.mini-heading {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.mini-heading:first-child { margin-top: 0; }
.address-block { font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* Order items list */
.order-items { display: grid; gap: 16px; }
.order-items li { display: flex; gap: 14px; align-items: flex-start; }
.order-items img {
  width: 64px; height: 52px; object-fit: contain; flex-shrink: 0;
  background: var(--bg-soft); border-radius: 4px;
}
.order-items__body { flex: 1; display: grid; gap: 3px; font-size: 14px; }
.order-items__body .muted { font-size: 12px; }
.order-items__config { font-size: 12px; color: var(--ink-2); }
.order-items__rx {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--success);
}
.order-items__meta { text-align: right; display: grid; gap: 4px; white-space: nowrap; }

/* Tracking timeline */
.track { display: flex; margin: 8px 0 4px; }
.track__step { flex: 1; position: relative; text-align: center; padding-top: 26px; }
.track__step::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px;
  background: var(--line);
}
.track__step:first-child::before { left: 50%; }
.track__step:last-child::before { right: 50%; }
.track__step.is-done::before, .track__step.is-current::before { background: var(--success); }
.track__dot {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
}
.track__step.is-done .track__dot { background: var(--success); border-color: var(--success); }
.track__step.is-current .track__dot { border-color: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }
.track__step.is-stopped .track__dot { background: var(--danger); border-color: var(--danger); }
.track__label { font-size: 12px; color: var(--muted); }
.track__step.is-done .track__label, .track__step.is-current .track__label {
  color: var(--ink); font-weight: 600;
}
.track__number {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 0;
  font-size: 13px; color: var(--muted);
}

.history-list { display: grid; gap: 16px; }
.history-list li { display: flex; gap: 14px; }
.history-list__dot {
  width: 10px; height: 10px; margin-top: 5px; border-radius: 50%;
  background: var(--navy); flex-shrink: 0;
}
.history-list strong { display: block; font-size: 14px; }
.history-list span { display: block; font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary .card { position: static; }
  .confirmation__panels { grid-template-columns: 1fr; }
  .track__label { font-size: 11px; }
}

/* Review submission form on the product page */
.review-form {
  padding: 20px; margin-bottom: 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.review-form h3 { font-size: 15px; margin-bottom: 14px; }

/* =====================================================================
   Virtual try-on
   ===================================================================== */
.tryon { position: fixed; inset: 0; z-index: 90; display: none; }
.tryon.is-open { display: block; }
.tryon__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 18, .6); }
.tryon__dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  margin: 24px auto; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.25)); overflow: hidden;
}
.tryon__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.tryon__title { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.tryon__close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); }
.tryon__close:hover { color: var(--ink); }

.tryon__body { display: grid; grid-template-columns: 1fr 260px; min-height: 0; }

.tryon__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--navy);
}
.tryon__video, .tryon__photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Mirror the live view so moving left moves left on screen. */
.tryon__video { transform: scaleX(-1); }
.tryon__frame { position: absolute; cursor: grab; touch-action: none; user-select: none; }
.tryon__frame:active { cursor: grabbing; }
.tryon__empty {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 8px;
  padding: 24px; text-align: center; color: #fff;
}
.tryon__note { font-size: 12px; color: rgba(255, 255, 255, .7); }

.tryon__panel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-left: 1px solid var(--line-soft); overflow-y: auto;
}
.tryon__sources { display: grid; gap: 8px; }
.tryon__file { text-align: center; cursor: pointer; }
.tryon__error {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--error-bg, #fdeaea); color: var(--error, #b3261e); font-size: 13px;
}
.tryon__controls { display: grid; gap: 14px; }
.tryon__hint { font-size: 13px; color: var(--muted); }
.tryon__slider { display: grid; gap: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tryon__slider input { width: 100%; }
.tryon__actions { display: grid; gap: 8px; }

body.has-modal { overflow: hidden; }

@media (max-width: 760px) {
  .tryon__dialog { width: 100vw; height: 100vh; max-height: none; margin: 0; border-radius: 0; }
  .tryon__body { grid-template-columns: 1fr; overflow-y: auto; }
  .tryon__stage { aspect-ratio: 1 / 1; }
  .tryon__panel { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* =====================================================================
   Bulk product import
   ===================================================================== */
.import-stats {
  display: flex; flex-wrap: wrap; gap: 12px; list-style: none;
  margin: 0 0 24px; padding: 0;
}
.import-stats li {
  flex: 1 1 140px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
}
.import-stats strong { display: block; font-size: 24px; line-height: 1.1; }
.import-stats span { font-size: 12px; color: var(--muted); }

/* Progress is worth showing: 500 rows take several round trips. */
.import-bar {
  height: 8px; margin: 14px 0 10px; overflow: hidden;
  border-radius: 999px; background: var(--line-soft);
}
.import-bar span {
  display: block; width: 0; height: 100%;
  background: var(--navy); transition: width .25s ease;
}

/* =====================================================================
   Step 3 — Add Power
   ===================================================================== */
.power-head { margin: 20px 0 10px; font-size: 15px; }
.power-head:first-child { margin-top: 0; }

.power-option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-bottom: 10px; padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.power-option:hover { border-color: var(--muted-2); }
.power-option__text { flex: 1; min-width: 0; }
.power-option__text strong { display: block; font-size: 15px; }
.power-option__text span { font-size: 13px; color: var(--muted); }
.power-option__chev {
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}

.power-back {
  margin-bottom: 16px; padding: 0; background: none; border: 0;
  font-size: 13px; color: var(--link);
}
.power-back:hover { text-decoration: underline; }

.power-note { padding: 16px 18px; border-radius: var(--radius); background: var(--bg-soft); }
.power-note h4 { margin-bottom: 6px; }
.power-note p { font-size: 14px; color: var(--ink-2); }

.power-table { width: 100%; margin: 16px 0; border-collapse: collapse; }
.power-table th, .power-table td { padding: 8px 8px 8px 0; text-align: left; }
.power-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.power-table tbody th { width: 70px; font-size: 13px; font-weight: 600; }
.power-table .select { width: 100%; }

.power-fields { display: grid; gap: 10px; margin-top: 10px; }
.power-help { margin-top: 14px; font-size: 13px; color: var(--link); }

@media (min-width: 560px) {
  .power-fields { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Contact lens power picker (product page)
   ===================================================================== */
.cpower { margin: 20px 0; }
.cpower__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cpower__label { font-size: 13px; color: var(--muted); }
.cpower__pill {
  padding: 8px 20px; border: 1px solid var(--navy); border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
}

.cpower__colours { margin: 0 0 14px; }
.cpower__colours h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.cpower__swatches { display: flex; flex-wrap: wrap; gap: 10px; }

/* Wide enough to stay a comfortable tap target on a phone. */
.cswatch {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 13px; text-align: left;
}
.cswatch:hover { border-color: var(--navy); }
.cswatch.is-active { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.cswatch__dot {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.cswatch__name { white-space: nowrap; }
.cpower__body {
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}
.cpower__mode { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.cpower__mode input { flex-shrink: 0; }

.cpower__table { width: 100%; margin: 12px 0; border-collapse: collapse; }
.cpower__table th, .cpower__table td { padding: 8px 6px; text-align: left; vertical-align: middle; }
.cpower__table thead th { text-align: center; }
.cpower__table tbody th {
  width: 42%; font-size: 14px; font-weight: 600;
}
/* The abbreviation sits under the name, the way a prescription is laid out. */
.cpower__table tbody th small {
  display: block; font-size: 11px; font-weight: 400; color: var(--muted);
}
.cpower__table .select { width: 100%; }
/* An eye that is not being ordered for stays visible but clearly inactive. */
.cpower__table td.is-off { opacity: .4; }

/* Sits inside .cpower__body, which is already soft, so this one goes white. */
.cpower__upload {
  margin: 4px 0 10px 26px; padding: 12px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; line-height: 1.5;
}
.cpower__upload p { margin: 0; color: var(--muted); }
.cpower__upload .select { width: 100%; max-width: 320px; }

.cpower__total { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cpower__error {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--error-bg, #fdeaea); color: var(--error, #b3261e); font-size: 13px;
}

@media (max-width: 520px) {
  /* Fixed layout so the two eyes stay the same width; without it the browser
     hands the wider column to whichever side has the longer option text. */
  .cpower__table { table-layout: fixed; }
  .cpower__table tbody th { width: 34%; font-size: 13px; }
  .cpower__table th, .cpower__table td { padding: 6px 4px; }
  .cpower__table .select { padding-left: 8px; padding-right: 22px; }
  .cpower__upload { margin-left: 0; }
}

/* Shown only to a signed-in admin while Coming soon mode hides the shop. */
.preview-bar {
  padding: 8px 16px; background: #f5c46b; color: #3d2a00;
  font-size: 13px; text-align: center;
}
.preview-bar a { margin-left: 8px; color: inherit; font-weight: 700; text-decoration: underline; }

/* Content pages: About, FAQs, Contact, policies (/page/{slug}) */
.content-page { padding-block: 24px 64px; }
.content-page__body { max-width: 760px; }
.content-page__body h1 { margin: 0 0 24px; font-size: 32px; }
.content-page__body h2 { margin: 32px 0 10px; font-size: 20px; }
.content-page__body h3 { margin: 22px 0 8px; font-size: 16px; }
.content-page__body p, .content-page__body li { color: var(--ink-2, #344054); line-height: 1.7; }
.content-page__body ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.content-page__body li { margin-bottom: 4px; }
.content-page__body a { color: var(--navy); text-decoration: underline; }
.content-page__updated { margin-top: 40px; font-size: 13px; color: var(--muted); }
.contact-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
                list-style: none; padding: 0; margin: 0 0 28px; }
.contact-card li { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.contact-card span { display: block; font-size: 13px; color: var(--muted); }
.contact-card a { font-weight: 600; text-decoration: none; }
.contact-card small { display: block; color: var(--muted); }
@media (max-width: 520px) { .content-page__body h1 { font-size: 26px; } }

/* Lens configurator: power too strong for the chosen lens */
.power-limit { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.power-limit--info  { background: #eef4fb; color: #1d4f86; }
.power-limit--error { background: #fdecec; color: #a32020; }

/* Prescription upload (lens pop-up and contact lens form) */
.rx-upload { display: block; position: relative; margin: 8px 0 16px; cursor: pointer; }
.rx-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.rx-upload__box {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 18px 14px; border: 1.5px dashed #c9cfd8; border-radius: 10px; background: #fafbfc;
  font-size: 13px; color: #5b6472;
}
.rx-upload__box strong { color: #12141c; font-size: 14px; word-break: break-all; }
.rx-upload:hover .rx-upload__box, .rx-upload input:focus-visible + .rx-upload__box { border-color: #12141c; }
.rx-upload.has-file .rx-upload__box { border-style: solid; border-color: #2e7d4f; background: #eef8f1; }
.power-limit--choose { background: #fff7e8; color: #6b4a00; }
.power-limit--choose p { margin: 0 0 8px; }
.power-limit__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.power-limit__choice {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px; border: 1px solid #e3c98a; border-radius: 8px; background: #fff;
  font: inherit; font-size: 13px; color: #12141c; cursor: pointer; text-align: left;
}
.power-limit__choice span { color: #5b6472; font-size: 12px; }
.power-limit__choice:hover, .power-limit__choice:focus-visible { border-color: #12141c; }

/* Homepage sections added in the Homepage Builder */
.home-banner { position: relative; border-radius: var(--radius-lg, 16px); overflow: hidden; min-height: 260px; display: flex; align-items: center; background: #f1f3f6; }
.home-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-banner__copy { position: relative; max-width: 520px; padding: 32px; }
.home-banner:not(.home-banner--plain) .home-banner__copy { background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.7) 70%, rgba(255,255,255,0)); border-radius: 0 12px 12px 0; }
.home-banner h2, .home-text h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.home-banner p, .home-text p { margin: 0 0 16px; color: #4b5563; line-height: 1.6; }
.home-text { padding: 32px; border-radius: var(--radius-lg, 16px); text-align: center; }
.home-text p { max-width: 680px; margin-left: auto; margin-right: auto; }
.home-text--light { background: #f5f6f8; }
.home-text--dark { background: var(--navy, #0A0A12); color: #fff; }
.home-text--dark p { color: rgba(255,255,255,.8); }
.home-text--dark .btn--light { background: #fff; color: var(--navy, #0A0A12); border-color: #fff; }
.home-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.home-card { display: flex; flex-direction: column; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; background: #fff; }
.home-card__media { aspect-ratio: 4 / 3; background: #f5f6f8; }
.home-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card__body { padding: 12px 14px; display: grid; gap: 2px; }
.home-card__body span { color: #6b7280; font-size: 13px; }
a.home-card:hover { border-color: var(--navy, #0A0A12); }
@media (max-width: 640px) {
  .home-banner__copy, .home-text { padding: 22px; }
  .home-banner:not(.home-banner--plain) .home-banner__copy { background: rgba(255,255,255,.9); }
}


/* ---------------------------------------------------------------------
   Scrolling strips (top bar messages, trust badges above the footer).
   The set is drawn twice and the track slides by half its width, so the
   loop has no jump. Pauses on hover; still for reduced-motion users.
   --------------------------------------------------------------------- */
.marquee { overflow: hidden; min-width: 0; flex: 1; position: relative; }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee--slow .marquee__track { animation-duration: 40s; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; flex-shrink: 0; }
.topbar .marquee__set { gap: 40px; padding-right: 40px; }
.topbar__group.marquee { flex-wrap: nowrap; gap: 0; }
.trust-strip .marquee__set.trust-strip__inner {
  display: flex; grid-template-columns: none; gap: 56px; padding: 22px 28px 22px 0; width: auto; max-width: none; margin: 0;
}
.trust-strip .trust-item { flex-shrink: 0; }
/* soft fade at both edges */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 1; pointer-events: none; }
.topbar .marquee::before { left: 0; background: linear-gradient(90deg, var(--navy), transparent); }
.topbar .marquee::after  { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.trust-strip .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), transparent); }
.trust-strip .marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee__set[aria-hidden="true"] { display: none; }
}