/* public/assets/css/site.css */
@charset "UTF-8";
/* Fasteyeglasses.com — site styles */
:root {
  color-scheme: dark;
  --paper: #0A0A0A;
  --mist: #141414;
  --mist-2: #232323;
  --ink: #F4F1EA;
  --on-ink: #0A0A0A;
  --muted: #A7A39B;
  --line: #2B2B2B;
  --deep: #000000;
  --deep-2: #1F1F1F;
  --on-deep: #F4F1EA;
  --on-deep-muted: #9C988F;
  --accent: #E0453B;
  --accent-dark: #FF7B70;
  --ok: #43C27F;
  --focus: #7DB0FF;
  --field: #121212;
  --field-line: #3A3A3A;
  --display: "Playfair Display", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; z-index: 100; border-radius: var(--radius); }
.skip:focus { top: 12px; }

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

/* type */
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 6.2vw, 76px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: 24px; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 36em; }
.eyebrow, .mono-label {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.eyebrow .dot { color: var(--accent); }
.prose { max-width: 68ch; display: grid; gap: 16px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 20px; }
.prose h3 { font-size: 22px; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.prose a { color: var(--accent-dark); }

/* announcement */
.announce { background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.announce .wrap { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding-block: 8px; text-align: center; }
.announce b { color: #fff; font-weight: 600; }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(10,10,10,0.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { text-decoration: none; display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--display); font-size: 27px; line-height: 1; white-space: nowrap; }
.logo b { font-weight: 700; font-style: italic; }
.logo span { font-weight: 500; }
.logo small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); margin-left: 2px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 500; font-size: 15.5px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--mist); }
.cart-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 999px; }
.cart-link:hover { background: var(--ink); color: var(--on-ink); }
.cart-count { font-family: var(--mono); font-size: 12px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff; display: inline-grid; place-items: center; padding-inline: 5px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; gap: 2px; }
  .nav.open { display: flex; }
  .nav a { border-radius: var(--radius); padding: 12px; font-size: 17px; }
  .site-header .wrap { gap: 12px; }
  .cart-link { padding: 7px 12px; }
}
@media (max-width: 420px) { .logo { font-size: 23px; } .logo small { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); text-decoration: none; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 48px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 24px; }
.hero h1 .price { color: var(--accent); font-style: italic; }
.hero-chart { position: relative; display: grid; gap: 6px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.hero-chart figure { margin: 0; display: grid; gap: 2px; }
.hero-chart figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; }
.hero-chart .chart-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--muted); padding: 0; margin: 0; list-style: none; }
.hero-points li::before { content: "\2713  "; color: var(--ok); font-weight: 700; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

/* marquee banner */
.reel { border-block: 1px solid var(--line); overflow: hidden; background: var(--paper); }
.reel-track { display: flex; gap: 40px; width: max-content; padding-block: 18px; animation: reel 60s linear infinite; }
.reel-track img { height: 86px; width: auto; }
.reel:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .reel-track { animation: none; } html { scroll-behavior: auto; } }

/* sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.mist { background: var(--mist); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head > div { display: grid; gap: 12px; max-width: 40em; }
.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover { color: var(--accent); }

/* shop-by tiles */
.shop-by { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: var(--paper); transition: border-color .15s, transform .2s; }
.tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.tile h3 { font-size: 30px; }
.tile .count { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile .go { font-weight: 600; font-size: 15px; }
.tile .go::after { content: " \2192"; }
@media (max-width: 960px) { .shop-by { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shop-by { gap: 10px; } .tile { padding: 14px; gap: 8px; } .tile h3 { font-size: 24px; } }

/* product grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1060px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 400px) { .grid { grid-template-columns: 1fr; } }
.card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); overflow: hidden; transition: border-color .15s; }
.card:hover { border-color: var(--ink); }
.card-img { padding: 18px 10px 8px; background: #fff; }
.card-body { display: grid; gap: 6px; padding: 12px 16px 16px; border-top: 1px solid var(--mist-2); align-content: start; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h2, .card h3 { font-size: 22px; }
.card .price { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.card .meta { font-size: 14px; color: var(--muted); }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); display: block; }
.dots span { font-size: 12.5px; color: var(--muted); margin-left: 2px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-group .mono-label { margin-right: 6px; }
.chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.result-count { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-left: auto; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: step; border-top: 2px solid var(--ink); }
.step { padding: 24px 24px 8px 0; display: grid; gap: 10px; align-content: start; }
.step + .step { padding-left: 24px; border-left: 1px solid var(--line); }
.step .num { font-family: var(--display); font-style: italic; font-size: 54px; line-height: 1; color: var(--accent); }
.step h3 { font-size: 26px; }
.step p { color: var(--muted); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* deep band (rx) */
.band { background: var(--deep); color: var(--on-deep); }
.band .lede, .band .eyebrow { color: var(--on-deep-muted); }
.band .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .band .wrap { grid-template-columns: 1fr; } }
.rx-card { background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.rx-table-wrap { overflow-x: auto; }
.rx-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.rx-table th, .rx-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rx-table thead th { font-size: 12px; letter-spacing: .1em; color: var(--muted); font-weight: 500; border-bottom: 2px solid var(--ink); }
.rx-table .na { color: #5E5E5E; text-decoration: line-through; }
.rx-note { font-size: 14px; color: var(--muted); }

/* states */
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.state { padding: 20px 16px 16px 0; display: grid; gap: 4px; }
.state + .state { padding-left: 16px; border-left: 1px solid var(--line); }
.state .abbr { font-family: var(--display); font-size: 52px; line-height: 1; }
.state .name { font-weight: 600; }
.state .sub { font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .states { grid-template-columns: repeat(2, 1fr); } .state:nth-child(3) { padding-left: 0; border-left: 0; } .state:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* faq */
.faq { display: grid; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; color: var(--accent); }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 22px; color: var(--muted); max-width: 68ch; display: grid; gap: 10px; }

/* breadcrumbs */
.crumbs { font-size: 14px; color: var(--muted); padding-block: 18px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.page-head { padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 32px); display: grid; gap: 14px; }

/* product page */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 64px); padding-block: 24px clamp(48px, 7vw, 88px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp-media { position: sticky; top: 100px; display: grid; gap: 12px; }
@media (max-width: 900px) { .pdp-media { position: static; } }
.pdp-stage { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: clamp(16px, 4vw, 48px) clamp(8px, 2vw, 24px); }
.pdp-caption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.pdp-info { display: grid; gap: 22px; }
.pdp-info h1 { font-size: clamp(44px, 5vw, 64px); }
.pdp-info h1 small { display: block; font-family: var(--body); font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 10px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price b { font-family: var(--display); font-size: 40px; font-weight: 500; }
.pdp-price span { color: var(--muted); font-size: 15px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px; }
legend .mono-label { margin-right: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: 14.5px; cursor: pointer; }
.swatch label i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); }
.swatch input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.size-opt { position: relative; }
.size-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size-opt label { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 4px; padding: 10px 16px; cursor: pointer; font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.size-opt label small { font-family: var(--body); font-size: 12.5px; color: var(--muted); }
.size-opt input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.size-opt input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.lens-line { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--mist); border-radius: 4px; font-size: 15px; }
.lens-line b { font-weight: 600; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; border-top: 2px solid var(--ink); padding-top: 16px; font-size: 15.5px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.note { font-size: 14.5px; color: var(--muted); }
.note a { color: var(--ink); }

/* cart + checkout */
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: clamp(48px, 7vw, 88px); }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; } }
.cart-list { display: grid; border-top: 2px solid var(--ink); }
.cart-item { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 150px; }
.cart-item h3 { font-size: 22px; }
.cart-item .meta { font-size: 14.5px; color: var(--muted); font-family: var(--mono); }
.cart-item .right { display: grid; gap: 6px; justify-items: end; }
.remove { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 14px; padding: 4px; }
@media (max-width: 560px) { .cart-item { grid-template-columns: 96px 1fr; } .cart-item img { width: 96px; } .cart-item .right { grid-column: 2; justify-items: start; } }
.summary { border: 1px solid var(--line); border-radius: 4px; padding: 22px; display: grid; gap: 14px; position: sticky; top: 100px; background: var(--paper); }
.summary h2 { font-size: 28px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15.5px; }
.sum-row.total { border-top: 2px solid var(--ink); padding-top: 12px; font-weight: 700; font-size: 18px; }
.sum-row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sum-lines { display: grid; gap: 8px; font-size: 14.5px; }
.sum-lines div { display: flex; justify-content: space-between; gap: 12px; }
.sum-lines span:last-child { font-family: var(--mono); }
.empty { padding: 32px 0; display: grid; gap: 16px; justify-items: start; }

.form-section { border-top: 2px solid var(--ink); padding-block: 22px 30px; display: grid; gap: 18px; }
.form-section > header { display: grid; gap: 6px; }
.form-section h2 { font-size: clamp(26px, 3vw, 32px); display: flex; gap: 12px; align-items: baseline; }
.form-section h2 .n { font-style: italic; color: var(--accent); }
.form-section header p { color: var(--muted); font-size: 15px; max-width: 60ch; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: 14.5px; }
.field .hint { font-size: 13.5px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 4px; background: var(--field); font-size: 16px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.invalid input, .invalid select, input.invalid, select.invalid { border-color: var(--accent); background: #2A1413; }
.err { color: var(--accent-dark); font-size: 13.5px; font-weight: 600; }
.rx-grid { overflow-x: auto; }
.rx-grid table { border-collapse: collapse; width: 100%; min-width: 460px; }
.rx-grid th { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 8px 8px 0; font-weight: 500; }
.rx-grid td { padding: 6px 8px 6px 0; }
.rx-grid td:first-child { font-family: var(--mono); font-size: 14px; white-space: nowrap; padding-right: 14px; }
.rx-grid td:first-child b { font-size: 17px; display: block; }
.rx-grid select, .rx-grid input { min-width: 96px; font-family: var(--mono); }
.sv-badge { display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--deep); color: var(--on-deep); padding: 6px 10px; border-radius: 3px; width: fit-content; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-pill label { display: block; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-size: 15px; }
.radio-pill input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.radio-pill input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--ink); }
.drop { border: 1.5px dashed #555; border-radius: 4px; padding: 20px; display: grid; gap: 8px; background: var(--mist); }
.drop input[type="file"] { font-size: 15px; max-width: 100%; }
.file-ok { font-family: var(--mono); font-size: 13.5px; color: var(--ok); }
.pd-use { display: grid; gap: 10px; padding-bottom: 6px; }
.pd-near { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: var(--mist); font-size: 15px; }
.pd-near p { margin: 0; }
.pd-near-note { color: var(--ink); font-weight: 600; }
.pd-help { display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); background: var(--mist); padding: 14px 16px; border-radius: 4px; }
.pd-help ol { margin: 0; padding-left: 1.2em; }
.pay-box { display: grid; gap: 14px; }
.paypal-wrap { min-height: 60px; }
.pay-msg { font-size: 14.5px; padding: 12px 14px; border-radius: 4px; background: var(--mist); }
.pay-msg.error { background: #2A1413; color: var(--accent-dark); font-weight: 600; }
.preview-pay { border: 1.5px dashed #555; border-radius: 4px; padding: 18px; font-size: 14.5px; color: var(--muted); display: grid; gap: 8px; text-align: center; }
.secure-line { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); }
.secure-line svg { flex: none; }
.form-errors { border: 1px solid var(--accent); background: #2A1413; color: var(--accent-dark); padding: 14px 16px; border-radius: 4px; font-size: 15px; }
.form-errors ul { margin: 6px 0 0; padding-left: 1.2em; }

/* footer */
.site-footer { background: var(--deep); color: var(--on-deep); padding-block: 56px 32px; margin-top: 0; }
.site-footer a { color: var(--on-deep); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h2 { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep-muted); font-weight: 500; margin-bottom: 12px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.foot-brand { display: grid; gap: 14px; }
.foot-brand .logo { color: #fff; }
.foot-brand p { color: var(--on-deep-muted); font-size: 15px; max-width: 34ch; }
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--deep-2); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--on-deep-muted); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* state popup */
.sp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); z-index: 90; display: grid; place-items: center; padding: 16px; animation: fade .2s ease-out; }
.sp-dialog { background: var(--mist); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; max-width: 520px; width: 100%; padding: clamp(24px, 5vw, 40px); text-align: center; display: grid; gap: 16px; justify-items: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .25s ease-out; }
.sp-dialog h2 { font-size: clamp(26px, 4vw, 34px); }
.sp-dialog p { font-size: 17px; line-height: 1.55; }
.sp-states { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sp-states span { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; border: 1px solid var(--ink); border-radius: 999px; padding: 4px 12px; }
.sp-mail { font-weight: 600; color: var(--focus); user-select: all; }
.sp-dialog .btn { min-width: 160px; }
@media (max-width: 560px) {
  .sp-backdrop { place-items: end center; padding: 0; }
  .sp-dialog { border-radius: 16px 16px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-backdrop, .sp-dialog { animation: none; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 999px; font-size: 15px; z-index: 80; }

@media (max-width: 640px) { .announce .wrap > span:nth-child(n+2) { display: none; } .announce .wrap { padding-block: 7px; } }

/* ================= upgrade pass ================= */
[data-card][hidden] { display: none !important; }
.card-img { display: grid; }
.card-img img { grid-area: 1 / 1; transition: opacity .35s ease; }
.card-img img.alt { opacity: 0; }
@media (hover: hover) { .card:hover .card-img img.alt { opacity: 1; } .card:hover .card-img img:not(.alt):not(:only-child) { opacity: 0; } }
.card { transition: border-color .15s, transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }

/* filters */
.filters { display: grid; gap: 14px; }
.filter-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--field-line); border-radius: 999px; padding: 0 16px; background: var(--field); min-height: 48px; }
.search:focus-within { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 1px; }
.search svg { color: var(--muted); flex: none; }
.search input { border: 0; outline: 0; min-height: 44px; padding: 0; background: transparent; width: 100%; }
.sort { display: flex; align-items: center; gap: 10px; }
.sort select { width: auto; min-height: 44px; border-radius: 999px; padding: 8px 14px; }
.chip-sw { display: inline-flex; align-items: center; gap: 7px; }
.chip-sw i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); display: block; }
.filter-foot { display: flex; align-items: center; gap: 14px; }
.filter-foot .result-count { margin-left: 0; }
.reset, .link-btn { background: none; border: 0; padding: 4px 0; color: var(--accent-dark); text-decoration: underline; font-weight: 600; cursor: pointer; font-size: 14.5px; }
.no-results { padding: 40px 0; font-size: 18px; color: var(--muted); }
@media (max-width: 700px) { .filter-group { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .filter-group::-webkit-scrollbar { display: none; } .chip { white-space: nowrap; } }

/* hero upgrade */
.hero-chart figure { animation: frameIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 140ms + 120ms); }
@keyframes frameIn { from { opacity: 0; transform: translateY(14px); } }
.hero-chart figcaption { align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-chart figcaption a { text-decoration: none; font-weight: 500; color: var(--ink); }
.hero-chart figcaption a:hover { color: var(--accent); }
.hero-dots { display: inline-flex; gap: 6px; margin-right: auto; }
.hero-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); padding: 0; cursor: pointer; }
.hero-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.hero-chart img { transition: opacity .2s; }
.hero h1 { animation: frameIn .7s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .hero-chart figure, .hero h1 { animation: none; } }

/* trust bar */
.trust { border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-grid > div { display: flex; gap: 14px; align-items: center; padding: 22px 18px 22px 0; }
.trust-grid > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.trust svg { width: 30px; height: 30px; flex: none; color: var(--accent); }
.trust p { display: grid; line-height: 1.3; }
.trust b { font-weight: 600; font-size: 15.5px; }
.trust span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid > div:nth-child(3) { padding-left: 0; border-left: 0; } .trust-grid > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 420px) { .trust-grid > div { gap: 10px; padding-block: 16px; } .trust svg { width: 24px; height: 24px; } }

/* product page upgrade */
#pdp-img { transition: opacity .18s ease; }
#pdp-img.swap { opacity: .35; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb { flex: 1 1 110px; max-width: 170px; display: grid; gap: 4px; padding: 8px 8px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; font-size: 12.5px; color: var(--muted); text-align: center; }
.thumb:hover { border-color: var(--ink); }
.thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.fit { margin: 8px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); display: grid; gap: 8px; }
.fit svg { width: 100%; height: auto; }
.fit figcaption { font-size: 13px; color: var(--muted); }
.included { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; }
.included li { position: relative; padding-left: 26px; }
.included li::before { content: "\2713"; color: var(--ok); font-weight: 700; position: absolute; left: 2px; top: 0; }
.pdp-faq summary { font-size: 19px; padding: 16px 0; }
.pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 12px; background: rgba(10,10,10,.96); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(0,0,0,.5); transform: translateY(110%); transition: transform .25s ease; }
.pdp-bar div { display: grid; line-height: 1.25; min-width: 0; }
.pdp-bar b { font-family: var(--display); font-size: 20px; font-weight: 500; }
.pdp-bar span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-bar .btn { min-height: 44px; padding: 10px 18px; white-space: nowrap; }
@media (max-width: 900px) { .pdp-bar { display: flex; } .pdp-bar.show { transform: none; } }

/* cart drawer */
.drawer-bg { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.65); display: flex; justify-content: flex-end; animation: fade .2s ease-out; }
.drawer { width: min(420px, 100%); height: 100%; background: var(--mist); border-left: 1px solid var(--line); padding: calc(22px + env(safe-area-inset-top, 0px)) 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; animation: slideIn .28s cubic-bezier(.2,.7,.2,1); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.drawer-head h2 { font-size: 26px; }
.drawer-x { background: none; border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; font-size: 22px; line-height: 1; cursor: pointer; }
.drawer-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.drawer-item div { display: grid; font-size: 14px; color: var(--muted); }
.drawer-item b { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--ink); }
.drawer-item .price { font-family: var(--mono); }
.drawer-sum { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; }
.drawer-sum span:last-child { font-family: var(--mono); }
.drawer .link-btn { align-self: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .drawer-bg, .drawer { animation: none; } }

/* checkout upgrade */
.stepper { position: sticky; top: calc(69px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--paper); display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper a { flex: 1 0 auto; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 0; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.stepper a + a { padding-left: 12px; }
.stepper a i { font-style: normal; font-family: var(--mono); font-size: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: inline-grid; place-items: center; }
.stepper a.done { color: var(--ok); }
.stepper a.done i { background: var(--ok); color: #fff; border-color: var(--ok); }
.stepper a.current { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.form-section { scroll-margin-top: 140px; }
.rx-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.warn { border: 1px solid #8A6A22; background: #211A0B; color: #F2C76B; border-radius: 4px; padding: 12px 14px; font-size: 14.5px; display: grid; gap: 4px; }
.warn ul { margin: 0; padding-left: 1.2em; }
.rx-preview { display: flex; gap: 12px; align-items: center; }
.rx-preview img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.rx-preview button { background: none; border: 0; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* guides */
.shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .shape-grid { grid-template-columns: 1fr; } }
.shape-card { border: 1px solid var(--line); border-radius: 4px; padding: 22px; display: grid; gap: 12px; align-content: start; background: var(--mist); }
.shape-card h3 { font-size: 28px; }
.shape-card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shape-card svg { width: 64px; height: 76px; color: var(--ink); }
.shape-head { display: flex; gap: 16px; align-items: center; }
.city-list { columns: 2; gap: 24px; padding-left: 1.2em; }
.contact-ok { border: 1px solid var(--ok); background: #0F2419; color: var(--ok); padding: 12px 14px; border-radius: 4px; font-weight: 600; }

/* state sorry popup */
#state-sorry { z-index: 95; }
.notify { width: 100%; display: grid; gap: 8px; text-align: left; border-top: 1px solid var(--line); padding-top: 16px; }
.notify label { font-weight: 600; font-size: 15px; }
.notify-row { display: flex; gap: 8px; }
.notify-row input { flex: 1; min-width: 0; }
.notify-row .btn { min-height: 48px; padding: 10px 18px; }
.notify-msg { font-size: 14px; color: var(--ok); min-height: 1.2em; }
@media (max-width: 420px) { .notify-row { flex-direction: column; } }

/* SEO + blog */
.h1-brand { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; font-style: normal; }
.seo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; border-top: 2px solid var(--ink); padding-top: 28px; }
.seo-cols > div { display: grid; gap: 10px; align-content: start; }
.seo-cols h3 { font-size: 22px; }
.seo-cols p { color: var(--muted); font-size: 16px; }
.seo-cols a { color: var(--ink); }
@media (max-width: 960px) { .seo-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .seo-cols { grid-template-columns: 1fr; } }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: var(--mist); overflow: hidden; transition: border-color .15s, transform .2s; }
.post-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.post-art { padding: 22px 18px 10px; background: #fff; border-bottom: 1px solid var(--mist-2); }
.post-body { display: grid; gap: 10px; padding: 18px 20px 20px; align-content: start; }
.post-body h3 { font-size: 23px; }
.post-body p:not(.eyebrow) { color: var(--muted); font-size: 15.5px; }
.post-body .go { font-weight: 600; font-size: 15px; }
.post-body .go::after { content: " \2192"; }
.post { padding-bottom: clamp(48px, 7vw, 80px); }
.post-head { display: grid; gap: 14px; padding-block: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 32px); max-width: 900px; }
.post-head h1 { font-size: clamp(38px, 5vw, 62px); }
.post-meta { font-size: 14.5px; color: var(--muted); }
.post-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; border-top: 2px solid var(--ink); padding-top: 28px; }
.toc { position: sticky; top: 100px; display: grid; gap: 10px; font-size: 14.5px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--muted); }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) { .post-layout { grid-template-columns: 1fr; } .toc { position: static; border: 1px solid var(--line); border-radius: 4px; padding: 16px; } }
.post-body-text { font-size: 18px; line-height: 1.7; }
.post-body-text h2 { scroll-margin-top: 100px; }
.post-body-text .rx-card { margin-block: 6px; }
.post-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; background: var(--deep); color: var(--on-deep); border-radius: 4px; padding: 20px 22px; }
.post-cta div { display: grid; gap: 4px; }
.post-cta b { font-family: var(--display); font-size: 24px; font-weight: 500; color: #fff; }
.post-cta span { font-size: 15px; color: var(--on-deep-muted); }
.post-cta .btn { background: #fff; color: #0A0A0A; border-color: #fff; }
.post-cta .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* search everywhere */
.head-search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 4px 0 12px; height: 40px; background: var(--field); }
.head-search:focus-within { border-color: var(--ink); }
.head-search input { border: 0; outline: 0; width: 130px; min-height: 36px; padding: 0; font-size: 14.5px; background: transparent; }
.head-search button { border: 0; background: none; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
@media (max-width: 1240px) { .head-search input { width: 90px; } }
@media (max-width: 1080px) { .head-search { order: 3; } }
@media (max-width: 560px) { .head-search { display: none; } }
.chip small { color: inherit; opacity: .7; font-size: 12px; margin-left: 2px; }
.size-meta { font-family: var(--mono); font-size: 12.5px !important; }
.nav-search { display: none; }
@media (max-width: 1080px) {
  .nav-search { display: flex; gap: 8px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); }
  .nav-search input { flex: 1; min-width: 0; }
  .nav-search .btn { min-height: 48px; padding: 10px 18px; }
}

/* ================= black edition ================= */
/* product photos sit on white "gallery" panels; everything else is black */
.card-img, .pdp-stage, .post-art { background: #fff; }
.thumb { background: var(--mist); }
.thumb img, .tile img, .cart-item img, .drawer-item img, .reel-track img { background: #fff; border-radius: 3px; }
.tile img { padding: 6px; }
.thumb[aria-pressed="true"] { color: var(--ink); }
.reel { background: #fff; border-color: #fff; }
.reel-track img { border-radius: 0; }
.hero-chart { background: #fff; color: #0A0A0A; --ink: #0A0A0A; --muted: #5C5C5C; --line: #DEDEDE; --paper: #fff; border-color: #fff; }
.hero-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0A0A0A; }
.rx-card { background: #fff; color: #0A0A0A; --ink: #0A0A0A; --muted: #5C5C5C; --line: #DEDEDE; }
.rx-card .rx-table .na { color: #B5B5B5; }
.band, .announce, .site-footer, .post-cta { background: #000; }
.band { border-block: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); }
.post-cta { border: 1px solid var(--line); }
.section.mist { background: var(--mist); border-block: 1px solid #1C1C1C; }
.sv-badge { background: var(--ink); color: var(--on-ink); }
.sp-mail { color: var(--accent-dark); }
.announce { letter-spacing: .16em; font-weight: 500; }
select option { background: #121212; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #77736C; }
::selection { background: var(--accent); color: #fff; }

/* magazine type */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 { font-weight: 700; letter-spacing: -0.02em; }
h1 em, h2 em { font-weight: 500; }
.hero h1 { font-size: clamp(44px, 6.6vw, 84px); line-height: 1.02; }
.logo { font-size: 28px; }
.logo b { font-weight: 800; }
.logo span { font-weight: 400; font-style: italic; }
.logo small { font-family: var(--mono); letter-spacing: .12em; }
.eyebrow, .mono-label { font-size: 13px; letter-spacing: .18em; font-weight: 600; }
.card h2, .card h3 { font-size: 23px; font-weight: 600; }
.card .price, .specs dd, .size-opt label, .rx-table, .sum-row span:last-child, .sum-lines span:last-child,
.drawer-item .price, .drawer-sum span:last-child, .cart-item .meta, .size-meta, .rx-grid select, .rx-grid input { font-variant-numeric: tabular-nums lining-nums; }
.card .price { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.size-meta { letter-spacing: .06em; }
.step .num, .state .abbr { font-weight: 700; }
.pdp-price b { font-weight: 700; }
.faq summary { font-weight: 600; }
.nav a { font-weight: 500; letter-spacing: .01em; }
.btn { letter-spacing: .02em; }
.foot-brand { align-content: start; }

/* ================= search upgrade ================= */
.head-search, .nav-search, .hero-search { position: relative; }
.suggest { position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: #111; color: var(--ink); border: 1px solid #333; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.65); z-index: 60; padding: 8px; text-align: left; }
.hero-search .suggest, .nav-search .suggest { left: 0; right: auto; width: 100%; }
.sug-head { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; font-weight: 600; }
.sug-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; text-decoration: none; }
.sug-item img { width: 96px; height: 42px; object-fit: contain; background: #fff; border-radius: 4px; }
.sug-dots { display: flex; gap: 4px; justify-content: center; }
.sug-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.sug-txt { display: grid; min-width: 0; line-height: 1.25; }
.sug-txt b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.sug-txt span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.sug-item:hover, .sug-item.on, .sug-all:hover, .sug-all.on { background: #1E1E1E; }
.sug-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid #262626; text-decoration: none; font-weight: 600; color: var(--accent-dark); border-radius: 0 0 6px 6px; }
.sug-pop { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.sug-pop a { text-decoration: none; border: 1px solid #333; border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.sug-pop a:hover, .sug-pop a.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sug-none { padding: 4px 10px 8px; font-size: 14px; color: var(--muted); }

/* home hero search */
.hero-search { display: flex; align-items: center; gap: 10px; border: 1px solid #3A3A3A; background: var(--field); border-radius: 999px; padding: 6px 6px 6px 18px; max-width: 580px; }
.hero-search:focus-within { border-color: var(--ink); }
.hero-search svg { color: var(--muted); flex: none; }
.hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; min-height: 44px; font-size: 17px; }
.hero-search .btn { min-height: 44px; padding: 8px 20px; }
.hero-pop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14.5px; margin-top: -8px; }
.hero-pop .mono-label { margin-right: 2px; }
.hero-pop a { color: var(--ink); text-decoration: none; border-bottom: 1px solid #555; }
.hero-pop a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 480px) { .hero-search .btn { display: none; } .hero-search { padding-right: 12px; } }

/* header search button (phones) */
.search-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 999px; width: 40px; height: 40px; place-items: center; cursor: pointer; color: var(--ink); }
@media (max-width: 560px) { .search-btn { display: inline-grid; } .menu-btn { margin-left: auto; } }
@media (max-width: 1080px) { .nav .nav-search { order: -1; margin-top: 0; padding-top: 4px; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--line); margin-bottom: 6px; } }

/* shop filters */
.filter-top { position: sticky; top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 15; background: rgba(10,10,10,.96); padding-block: 12px; margin-bottom: 12px; border-bottom: 1px solid transparent; }
.popular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.popular .mono-label { margin-right: 4px; }
.pop { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 14px; font-size: 14px; display: inline-flex; gap: 8px; align-items: baseline; background: var(--mist); }
.pop small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop:hover, .pop.on { border-color: var(--ink); }
.pop.on { background: var(--ink); color: var(--on-ink); }
.pop.on small { color: inherit; opacity: .7; }
.chip .n { font-size: 12px; color: var(--muted); margin-left: 7px; font-variant-numeric: tabular-nums; }
.chip .n:empty { display: none; }
.chip[aria-pressed="true"] .n { color: inherit; opacity: .65; }
.chip-empty { opacity: .38; }
.chip:hover { border-color: #555; }
@media (max-width: 700px) { .popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .popular::-webkit-scrollbar { display: none; } .pop { white-space: nowrap; } }
@media (max-width: 560px) {
  .site-header .wrap { gap: 8px; }
  .menu-btn { padding: 7px 11px; }
  .cart-link { padding: 7px 10px; gap: 6px; }
  .search-btn { width: 38px; height: 38px; }
}
@media (max-width: 420px) { .logo { font-size: 21px; } }
@media (max-width: 360px) { .cart-link > span:first-child { display: none; } }
@media (max-width: 700px) {
  .filter-top { flex-wrap: nowrap; gap: 8px; padding-block: 8px; }
  .filter-top .search { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  .filter-top .sort .mono-label { display: none; }
  .filter-top .sort select { max-width: 124px; min-height: 44px; font-size: 14px; padding-inline: 10px; }
}

/* ================= lens options ================= */
.lens-group { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.lens-group legend { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; float: left; width: 100%; margin-bottom: 10px; }
.lens-group legend + * { clear: both; }
.lens-group .req { font-size: 13px; color: var(--muted); font-weight: 500; }
.lens-group.invalid .req { color: var(--accent-dark); font-weight: 600; }
.lo-list { display: grid; gap: 8px; }
.lo { position: relative; }
.lo > input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.lo > label { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px 12px 44px; cursor: pointer; background: var(--mist); position: relative; transition: border-color .15s; }
.lo > label::before { content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6A6A6A; }
.lo > input[type="checkbox"] + label::before { border-radius: 4px; }
.lo > input:checked + label { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lo > input:checked + label::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 5px, transparent 6px); }
.lo > input[type="checkbox"]:checked + label::before { background: var(--ink); box-shadow: inset 0 0 0 3px var(--mist); }
.lo > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.lo:hover > label { border-color: #555; }
.lo-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lo-top b { font-weight: 600; font-size: 15.5px; }
.lo-price { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lo label small { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.lo-colors, .lo-engrave-text { display: flex; gap: 16px; padding: 10px 14px 4px 44px; position: relative; z-index: 2; font-size: 15px; }
.lo-colors label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.lo-colors input { accent-color: var(--ink); width: 18px; height: 18px; }
.lo-engrave-text input { max-width: 280px; }
.lens-group.invalid .lo > label { border-color: rgba(224, 69, 59, .55); }
.price-build { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: grid; gap: 6px; font-size: 15px; background: var(--paper); }
.price-build div { display: flex; justify-content: space-between; gap: 12px; }
.price-build #pb-lines { display: grid; gap: 6px; color: var(--muted); }
.price-build span:last-child { font-variant-numeric: tabular-nums; }
.pb-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; font-weight: 700; font-size: 17px; }
.co-line { align-items: flex-start; }
.co-line small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
#rx-power { border-color: var(--line); background: var(--mist); color: var(--ink); }

/* hero: the whole frame picture opens the frame page */
.hero-link { position: relative; display: block; text-decoration: none; cursor: pointer; border-radius: 4px; }
.hero-link img { transition: transform .25s ease, opacity .2s; }
.hero-link:hover img, .hero-link:focus-visible img { transform: scale(1.03); }
.hero-go { position: absolute; right: 6px; bottom: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  background: #0A0A0A; color: #fff; padding: 5px 10px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.hero-link:hover .hero-go, .hero-link:focus-visible .hero-go { opacity: 1; transform: none; }
@media (hover: none) { .hero-go { opacity: .9; transform: none; } }

/* ================= matte black + heavy magazine headlines ================= */
:root {
  --paper: #131313;
  --mist: #1B1B1B;
  --mist-2: #262626;
  --line: #2E2E2E;
  --field: #181818;
  --field-line: #3C3C3C;
  --deep: #0E0E0E;
}
html { background: #131313; }
body { background: #131313; }
/* fine grain so the black reads as matte, not glossy */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band, .announce, .site-footer, .post-cta { background: #0E0E0E; }
.site-header { background: rgba(19,19,19,.94); }
.filter-top { background: rgba(19,19,19,.96); }
.pdp-bar { background: rgba(19,19,19,.97); }
.section.mist { background: #181818; border-block: 1px solid #222; }

/* heavy editorial headlines */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
h1 { font-weight: 900; letter-spacing: -0.03em; line-height: .98; }
h2 { font-weight: 900; letter-spacing: -0.025em; }
h1 em, h2 em { font-weight: 800; font-style: italic; }
.hero h1 { font-size: clamp(48px, 7.2vw, 96px); }
.page-head h1 { font-size: clamp(44px, 6.4vw, 88px); }
.pdp-info h1 { font-size: clamp(48px, 5.4vw, 72px); }
.post-head h1 { font-size: clamp(40px, 5.4vw, 68px); }
.card h2, .card h3 { font-weight: 800; letter-spacing: -0.015em; }
.tile h3 { font-size: 34px; font-weight: 900; }
.faq summary, .shape-card h3, .post-body h3, .seo-cols h3 { font-weight: 800; }
.step .num, .state .abbr { font-weight: 900; }
.pdp-price b, .drawer-item b, .pdp-bar b, .sug-txt b { font-weight: 800; }
.logo b { font-weight: 900; }
.eyebrow, .mono-label { font-weight: 700; letter-spacing: .2em; }
/* thin rule above section titles for a magazine feel */
.section-head > div > .eyebrow { display: flex; align-items: center; gap: 12px; }
.section-head > div > .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex: none; }

/* ================= photo banner (home) ================= */
.hero-photo { position: relative; z-index: 5; background: #D3CAB8; color: #141414; isolation: isolate;
  --ink: #141414; --on-ink: #F4F1EA; --muted: #4B463E; --line: #B9AF9C; --field: rgba(255,255,255,.62); --field-line: rgba(20,20,20,.28); --accent: #B3261E; --accent-dark: #8E1C16; }
.hero-photo picture, .hero-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo .hero-img { object-fit: cover; object-position: 0% 35%; z-index: -1; }
.hero-photo-inner { min-height: clamp(560px, 50vw, 820px); display: flex; align-items: center; justify-content: flex-end; padding-block: clamp(48px, 6vw, 88px); }
.hero-photo .hero-copy { width: min(600px, 54%); display: grid; gap: 22px; }
.hero-photo h1 { font-family: var(--display); font-weight: 900; font-size: clamp(52px, 6.4vw, 104px); line-height: .94; letter-spacing: -0.035em; color: #121212; animation: frameIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-photo h1 em { font-style: italic; font-weight: 800; color: var(--accent); }
.hero-photo .h1-brand { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .34em; color: #1E1E1E; margin-bottom: 22px; }
.hp-sub { font-size: clamp(18px, 1.6vw, 22px); color: #2A2621; }
.hero-photo .hero-search { background: rgba(255,255,255,.72); border-color: rgba(20,20,20,.22); box-shadow: 0 10px 30px rgba(60,45,20,.12); }
.hero-photo .hero-search input { color: #141414; }
.hero-photo .hero-search input::placeholder { color: #6E675C; }
.hero-photo .hero-search svg { color: #57514A; }
.hero-photo .hero-pop a { color: #141414; border-color: rgba(20,20,20,.35); }
.hero-photo .hero-pop a:hover { color: var(--accent); border-color: var(--accent); }
.hero-photo .mono-label { color: #4B463E; }
.hero-photo .btn.ghost { border-color: rgba(20,20,20,.55); }
.hp-domain { font-size: 18px; letter-spacing: .01em; color: #1E1E1E; justify-self: start; padding-bottom: 4px;
  background: linear-gradient(90deg, #D9A441, #E2B860) left bottom / 100% 2px no-repeat; }
.hero-photo .suggest { color: #F4F1EA; --ink: #F4F1EA; --muted: #A7A39B; --on-ink: #0A0A0A; --accent-dark: #FF7B70; }
.hero-photo picture { overflow: hidden; }
@media (max-width: 1100px) { .hero-photo .hero-copy { width: min(560px, 58%); } .hero-photo .hero-img { object-position: 8% 35%; } }
@media (max-width: 760px) {
  .hero-photo picture, .hero-photo .hero-img { position: static; height: auto; }
  .hero-photo .hero-img { display: block; aspect-ratio: 900 / 990; object-fit: cover; z-index: auto; }
  .hero-photo-inner { min-height: 0; padding-block: 28px 40px; }
  .hero-photo .hero-copy { width: 100%; gap: 18px; }
  .hero-photo h1 { font-size: clamp(46px, 13vw, 64px); }
}

/* three tap-a-color frames, now under the banner */
.hero-frames { padding-block: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 40px); }
.hero-frames .hero-chart { grid-template-columns: repeat(3, 1fr); column-gap: clamp(16px, 3vw, 40px); row-gap: 8px; }
.hero-frames .hero-chart .chart-top { grid-column: 1 / -1; }
@media (max-width: 760px) { .hero-frames .hero-chart { grid-template-columns: 1fr; } }
.hero-frames .hero-chart { align-items: end; }
.hero-frames .hero-chart figcaption { flex-wrap: wrap; row-gap: 4px; }

/* ================= brand logo (speeding glasses + wordmark) ================= */
.logo.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: inherit; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo.brand .brand-mark { height: 30px; width: auto; flex: none; transition: transform .25s ease; }
.logo.brand:hover .brand-mark { transform: translateX(3px); }
.logo.brand .brand-wm { display: grid; gap: 6px; }
.logo.brand b { font-family: "Archivo", var(--body); font-style: italic; font-weight: 700; font-size: 27px; letter-spacing: -0.025em; color: inherit; }
.logo.brand b span { font-family: inherit; font-weight: 300; font-style: italic; }
.logo.brand b small { font-family: "Archivo", var(--body); font-style: normal; font-weight: 400; font-size: .5em; letter-spacing: 0; color: inherit; opacity: .85; margin-left: 1px; }
.logo.brand .brand-tag { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .44em; text-transform: uppercase; opacity: .8; }
.foot-brand .logo.brand .brand-mark { height: 40px; }
.foot-brand .logo.brand b { font-size: 34px; }
@media (max-width: 560px) { .logo.brand { gap: 7px; } .logo.brand .brand-mark { height: 24px; } .logo.brand b { font-size: 22px; } .logo.brand b small { display: none; } }
@media (max-width: 360px) { .logo.brand .brand-mark { height: 20px; } .logo.brand b { font-size: 19px; } }
/* header fit with the new logo */
.nav a { white-space: nowrap; }
.site-header .logo.brand .brand-mark { height: 27px; }
.site-header .logo.brand b { font-size: 25px; }
@media (max-width: 1300px) { .nav { gap: 0; } .nav a { padding: 8px 9px; font-size: 15px; } .site-header .wrap { gap: 18px; } }
@media (max-width: 1180px) { .site-header .logo.brand b small { display: none; } }
.cart-ico, .menu-ico { display: none; }
.menu-btn { align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .menu-ico, .cart-ico { display: block; }
  .menu-word, .cart-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .cart-link { height: 40px; padding: 0 10px; gap: 5px; }
  .site-header .logo.brand .brand-mark { height: 21px; }
  .site-header .logo.brand b { font-size: 20px; }
  .site-header .wrap { gap: 8px; }
}
@media (max-width: 360px) { .site-header .logo.brand .brand-mark { height: 17px; } .site-header .logo.brand b { font-size: 17px; } .site-header .wrap { gap: 6px; } }
@media (max-width: 420px) { .foot-brand .logo.brand .brand-mark { height: 28px; } .foot-brand .logo.brand b { font-size: 25px; } .foot-brand .logo.brand .brand-tag { font-size: 10px; letter-spacing: .3em; } }

/* ================= banner slideshow (home) ================= */
.hero-show { position: relative; z-index: 5; display: grid; grid-template-columns: 56% 1fr; min-height: clamp(560px, 46vw, 780px); background: #131313; isolation: isolate; }
.show-media { position: relative; overflow: hidden; background: #0c0c0c; }
.show-slides { position: absolute; inset: 0; }
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
.show-slide.is-active { opacity: 1; z-index: 1; }
.show-slide picture, .show-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.show-slide img { object-fit: cover; transform: scale(1.07); transition: transform 8s cubic-bezier(.2, .6, .3, 1); will-change: transform; }
.show-slide.is-active img { transform: scale(1); }
/* soft fade from the photos into the black copy panel */
.show-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(19,19,19,0) 62%, rgba(19,19,19,.55) 86%, #131313 100%), linear-gradient(0deg, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 22%); }
.show-ui { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(16px, 6vw, 96px); bottom: clamp(16px, 2.4vw, 32px); z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 18px; color: #fff; }
.show-bar { grid-column: 1 / -1; height: 2px; background: rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; }
.show-bar i { display: block; height: 100%; width: 0; background: #fff; }
.show-bar i.run { animation: showbar var(--show-ms, 6000ms) linear forwards; }
.show-media.is-paused .show-bar i { animation-play-state: paused; }
@keyframes showbar { to { width: 100%; } }
.show-ctrl { display: flex; align-items: center; gap: 6px; }
.show-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
.show-btn:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.show-btn .i-play { display: none; }
.show-media.is-paused .show-btn .i-play { display: block; }
.show-media.is-paused .show-btn .i-pause { display: none; }
.show-count { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; padding: 0 6px; font-variant-numeric: tabular-nums; }
.show-count b { font-weight: 700; }
.show-dots { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.show-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: background .25s, transform .25s; }
.show-dot.is-active { background: #fff; transform: scale(1.35); }
.show-dot:hover { background: rgba(255,255,255,.8); }
.show-copy { display: flex; align-items: center; padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 72px) clamp(40px, 5vw, 80px) clamp(16px, 3vw, 40px); }
.hero-show .hero-copy { width: 100%; max-width: 580px; display: grid; gap: 22px; }
.hero-show h1 { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 5.4vw, 92px); line-height: .95; letter-spacing: -0.035em; color: #F4F1EA; animation: frameIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-show h1 em { font-style: italic; font-weight: 800; color: var(--accent); }
.hero-show .h1-brand { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .34em; color: #CFCAC0; margin-bottom: 20px; }
.hero-show .hp-sub { font-size: clamp(18px, 1.5vw, 21px); color: #CFCAC0; }
.hero-show .hp-domain { font-size: 18px; color: #F4F1EA; justify-self: start; padding-bottom: 4px; background: linear-gradient(90deg, #D9A441, #E2B860) left bottom / 100% 2px no-repeat; }
.hero-show .hero-search { box-shadow: 0 12px 34px rgba(0,0,0,.4); }
@media (max-width: 1100px) { .hero-show { grid-template-columns: 50% 1fr; } }
@media (max-width: 860px) {
  .hero-show { grid-template-columns: 1fr; min-height: 0; }
  .show-media { aspect-ratio: 1 / 1; }
  .show-media::after { background: linear-gradient(0deg, #131313 0, rgba(19,19,19,0) 30%); }
  .show-copy { padding: 8px 16px 44px; }
  .hero-show h1 { font-size: clamp(44px, 12vw, 64px); }
  .show-ui { right: 16px; }
}
@media (min-width: 761px) and (max-width: 860px) { .show-media { aspect-ratio: 1.15 / 1; } }
@media (prefers-reduced-motion: reduce) { .show-slide, .show-slide img { transition: none; } .show-slide img { transform: none; } }
@media (max-width: 860px) { .show-dots { display: none; } .show-ui { grid-template-columns: auto; } }

/* slideshow: no on-screen controls; framed banner slide skips the edge fade */
.show-media::after { transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
.show-media.show-nofade::after { opacity: 0; }

/* safety page banner (supplied artwork, logo intact) */
.page-banner { display: block; background: #0c0c0c; border-bottom: 1px solid var(--line); }
.page-banner img { display: block; width: 100%; height: auto; aspect-ratio: 2576 / 585; object-fit: cover; }

/* ---------- Logo glow: slowly cycles through two-tone gradients (never a rainbow) ---------- */
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #ff5a3c; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #ffb347; }
@keyframes logo-hues {
  0%, 100% { --g1: #ff5a3c; --g2: #ffb347; }   /* ember → amber */
  25%      { --g1: #ff4f8b; --g2: #ffb199; }   /* rose → peach */
  50%      { --g1: #8b6bff; --g2: #4fa3ff; }   /* violet → sky */
  75%      { --g1: #14c2b4; --g2: #a6f5cf; }   /* teal → mint */
}
.logo.brand { --g1: #ff5a3c; --g2: #ffb347; animation: logo-hues 18s ease-in-out infinite; }
.logo.brand .brand-mark .g1 { stop-color: var(--g1); }
.logo.brand .brand-mark .g2 { stop-color: var(--g2); }
.logo.brand .brand-mark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g1) 55%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--g2) 30%, transparent)); }
.logo.brand b { background: linear-gradient(90deg, var(--g1), var(--g2) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--g1) 40%, transparent)); padding-right: .08em; }
.logo.brand:hover .brand-mark { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--g1) 75%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--g2) 45%, transparent)); }
@media (prefers-reduced-motion: reduce) { .logo.brand { animation: none; } }

/* ---------- Hero "fast." — same slowly shifting two-tone gradient + glow as the logo ---------- */
.hero-show h1 em.glow-word { --g1: #ff5a3c; --g2: #ffb347; display: inline-block; padding: 0 .08em .04em 0;
  background: linear-gradient(90deg, var(--g1), var(--g2) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g1) 50%, transparent)) drop-shadow(0 0 24px color-mix(in srgb, var(--g2) 30%, transparent));
  animation: logo-hues 18s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-show h1 em.glow-word { animation: none; } }

@media (max-width: 900px) { .announce .ann-x { display: none; } }

/* ---------- Glows: cart (blue, light pulse), lens options + on-screen cards (slow random colors, slow pulse; hover = faster, brighter),
   and a barely-visible background logo that glows red / green / blue / yellow in turns. JS: initGlow() in site.js. ---------- */
@property --gc { syntax: "<color>"; inherits: false; initial-value: #ff5a3c; }
@property --gp { syntax: "<number>"; inherits: false; initial-value: .5; }
@keyframes rand-glow {
  0%, 100% { --gc: #ff5a3c; } 14% { --gc: #ffb347; } 28% { --gc: #ff4f8b; } 42% { --gc: #8b6bff; }
  57% { --gc: #4fa3ff; } 71% { --gc: #14c2b4; } 85% { --gc: #7ef2c0; }
}
@keyframes glow-pulse { 0%, 100% { --gp: .25; } 50% { --gp: .85; } }
@keyframes glow-pulse-hot { 0%, 100% { --gp: .75; } 50% { --gp: 1.35; } }

/* cart: steady blue, pulsing lightly */
.cart-link { --gc: #4fa3ff; animation: glow-pulse 4.5s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--gc) 70%, var(--ink));
  box-shadow: 0 0 calc(6px + 8px * var(--gp)) calc(1px * var(--gp)) color-mix(in srgb, var(--gc) calc(30% + 30% * var(--gp)), transparent),
              0 0 calc(18px + 14px * var(--gp)) calc(3px * var(--gp)) color-mix(in srgb, var(--gc) calc(10% + 20% * var(--gp)), transparent); }
.cart-link:hover { animation-name: glow-pulse-hot; animation-duration: 2s; }

/* lens options */
.lo { isolation: isolate; }
.lo::before { content: ""; position: absolute; inset: -9px -6px; z-index: -1; border-radius: 14px; pointer-events: none;
  background: radial-gradient(50% 95% at var(--gx, 30%) 50%, var(--gc), color-mix(in srgb, var(--gc) 35%, transparent) 45%, transparent 75%);
  filter: blur(11px); opacity: calc(.45 + .4 * var(--gp)); transition: inset .3s;
  animation: rand-glow var(--gdur, 24s) linear infinite var(--gdel, 0s), glow-pulse var(--pdur, 6s) ease-in-out infinite var(--pdel, 0s); }
.lo:hover::before { animation-name: rand-glow, glow-pulse-hot; animation-duration: var(--gdur, 24s), 2.4s; }
.lo:has(> input:checked)::before { inset: -12px -8px; }
.lo:has(> input:checked) > label { border-color: color-mix(in srgb, var(--gc) 75%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 75%, #fff); }
.lo:has(> input:checked) { animation: rand-glow var(--gdur, 24s) linear infinite var(--gdel, 0s); }

/* cards and FAQ items glow while they're on screen */
.card.glow-in, .post-card.glow-in, .faq details.glow-in {
  animation: rand-glow var(--gdur, 24s) linear infinite var(--gdel, 0s), glow-pulse var(--pdur, 6s) ease-in-out infinite var(--pdel, 0s);
  box-shadow: 0 0 calc(10px + 16px * var(--gp)) calc(1px * var(--gp)) color-mix(in srgb, var(--gc) calc(14% + 26% * var(--gp)), transparent); }
.card.glow-in:hover, .post-card.glow-in:hover, .faq details.glow-in:hover {
  animation-name: rand-glow, glow-pulse-hot; animation-duration: var(--gdur, 24s), 2.2s; }
.card.glow-in:hover { box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 calc(10px + 16px * var(--gp)) calc(1px * var(--gp)) color-mix(in srgb, var(--gc) calc(14% + 26% * var(--gp)), transparent); }
.faq details.glow-in { border-radius: 8px; padding: 0 14px; }

/* background: a pattern of small "fasteyeglasses.com" logos drifting together in one direction (never crossing).
   Each row starts the same color as the background, brightens slightly, then fades back; rows take turns.
   Every 30s the pattern glows (20s dark, 10s glow) red / green / blue / yellow in turns. */
@property --wg { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wc { syntax: "<color>"; inherits: true; initial-value: #ff3b30; }
@property --tf { syntax: "<number>"; inherits: false; initial-value: 0; }
.bg-tiles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 1 !important; animation: wm-glow 120s linear infinite; }
.bg-tiles i { position: absolute; inset: -220px -420px; background-size: 400px 200px; will-change: transform;
  opacity: min(1, calc(var(--tf) + var(--wg)));
  filter: drop-shadow(0 0 calc(2px * var(--wg)) color-mix(in srgb, var(--wc) calc(95% * var(--wg)), transparent))
          drop-shadow(0 0 calc(7px * var(--wg)) color-mix(in srgb, var(--wc) calc(45% * var(--wg)), transparent)); }
.bg-tiles i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%20fill%3D%22%232a2a2a%22%3E%3Cg%20transform%3D%22translate%2824%2040%29%20scale%28.36%29%22%3E%3Cpath%20d%3D%22M14%207.5%2052%203%2049%2011%2018%2010Z%22%2F%3E%3Cpath%20d%3D%22M0%2019%2066%2013.5%2066%2023%2040%2022.5Q30%2022%2022%2021Z%22%2F%3E%3Cpath%20d%3D%22M6%2038%2050%2035.5Q54%2035.5%2056%2031L60%2026%2058%2036Q55%2043%2049%2043L10%2041Z%22%2F%3E%3Cpath%20d%3D%22M18%2052%2046%2049.5%2042%2057%2022%2056Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M62%2014C78%2010%20104%209.5%20124%2012.5Q127%2013%20126.5%2016L125%2027Q124%2031%20120.5%2032.5C117%2047%20107%2058%2090%2058C74%2058%2067%2047%2064.5%2033Q63.5%2027%2062%2023ZM74%2020C86%2018%20102%2018%20112%2020Q116%2021%20115.5%2025C114%2038%20108%2050%2091%2050C77%2050%2072%2041%2071%2030Q70.5%2021.5%2074%2020Z%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2276%22%20y%3D%2257%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2215%22%20font-style%3D%22italic%22%3E%3Ctspan%20font-weight%3D%22700%22%3Efasteye%3C%2Ftspan%3E%3Ctspan%20font-weight%3D%22400%22%3Eglasses%3C%2Ftspan%3E%3Ctspan%20font-size%3D%2210%22%20font-style%3D%22normal%22%3E.com%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E"); animation: tiles-drift 110s linear infinite, tiles-breathe 16s ease-in-out infinite; }
.bg-tiles i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%20fill%3D%22%232a2a2a%22%3E%3Cg%20transform%3D%22translate%28224%20140%29%20scale%28.36%29%22%3E%3Cpath%20d%3D%22M14%207.5%2052%203%2049%2011%2018%2010Z%22%2F%3E%3Cpath%20d%3D%22M0%2019%2066%2013.5%2066%2023%2040%2022.5Q30%2022%2022%2021Z%22%2F%3E%3Cpath%20d%3D%22M6%2038%2050%2035.5Q54%2035.5%2056%2031L60%2026%2058%2036Q55%2043%2049%2043L10%2041Z%22%2F%3E%3Cpath%20d%3D%22M18%2052%2046%2049.5%2042%2057%2022%2056Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M62%2014C78%2010%20104%209.5%20124%2012.5Q127%2013%20126.5%2016L125%2027Q124%2031%20120.5%2032.5C117%2047%20107%2058%2090%2058C74%2058%2067%2047%2064.5%2033Q63.5%2027%2062%2023ZM74%2020C86%2018%20102%2018%20112%2020Q116%2021%20115.5%2025C114%2038%20108%2050%2091%2050C77%2050%2072%2041%2071%2030Q70.5%2021.5%2074%2020Z%22%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%22276%22%20y%3D%22157%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2215%22%20font-style%3D%22italic%22%3E%3Ctspan%20font-weight%3D%22700%22%3Efasteye%3C%2Ftspan%3E%3Ctspan%20font-weight%3D%22400%22%3Eglasses%3C%2Ftspan%3E%3Ctspan%20font-size%3D%2210%22%20font-style%3D%22normal%22%3E.com%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E"); animation: tiles-drift 110s linear infinite, tiles-breathe 16s ease-in-out -8s infinite; }
@keyframes tiles-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(400px, 200px, 0); } }
@keyframes tiles-breathe { 0%, 100% { --tf: 0; } 50% { --tf: .85; } }
@keyframes wm-glow {
  0%, 16.6% { --wg: 0; --wc: #ff3b30; } 18.5% { --wg: 1; --wc: #ff3b30; } 23.2% { --wg: 1; --wc: #ff3b30; } 25% { --wg: 0; --wc: #ff3b30; }
  25.01%, 41.6% { --wg: 0; --wc: #34d36b; } 43.5% { --wg: 1; --wc: #34d36b; } 48.2% { --wg: 1; --wc: #34d36b; } 50% { --wg: 0; --wc: #34d36b; }
  50.01%, 66.6% { --wg: 0; --wc: #3d8bff; } 68.5% { --wg: 1; --wc: #3d8bff; } 73.2% { --wg: 1; --wc: #3d8bff; } 75% { --wg: 0; --wc: #3d8bff; }
  75.01%, 91.6% { --wg: 0; --wc: #ffd23a; } 93.5% { --wg: 1; --wc: #ffd23a; } 98.2% { --wg: 1; --wc: #ffd23a; } 100% { --wg: 0; --wc: #ffd23a; }
}
body { background: transparent; }  /* html keeps the matte black, so the pattern sits behind all content */
@media (prefers-reduced-motion: reduce) {
  .cart-link, .lo::before, .lo:has(> input:checked), .card.glow-in, .post-card.glow-in, .faq details.glow-in, .bg-tiles, .bg-tiles i { animation: none; }
}

/* ---------- Footer layout: brand + 4 balanced link columns ---------- */
.site-footer { padding-block: 48px 26px; }
.foot-grid { grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.foot-grid nav h2 { margin-bottom: 14px; }
.foot-grid ul { gap: 9px; font-size: 14.5px; }
.foot-brand { gap: 12px; }
.foot-brand p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.foot-states span { color: var(--on-deep-muted); }
.foot-states a { color: var(--on-deep); }
.foot-bottom { margin-top: 36px; padding-top: 18px; align-items: center; }
@media (max-width: 1050px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; max-width: 560px; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .site-footer { padding-block: 40px 22px; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } }
.foot-grid { grid-template-columns: minmax(300px, 1.6fr) repeat(4, minmax(0, 1fr)); }
.foot-brand .logo.brand .brand-mark { height: 32px; }
.foot-brand .logo.brand b { font-size: 28px; }
.foot-brand .logo.brand .brand-tag { font-size: 10px; letter-spacing: .32em; }
.foot-brand { padding-right: 12px; }
@media (max-width: 1050px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* logo pattern: footer only gets a hint of it; never behind the homepage banner */
.hero-show { background: #131313; }
.site-footer { background: rgba(0, 0, 0, .3); }

/* ---------- Fast Cash ---------- */
.fc-box { display: grid; gap: 6px; border-top: 1px dashed var(--line); padding-top: 12px; }
.fc-box label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fc-entry { display: flex; gap: 8px; }
.fc-entry input { flex: 1; min-width: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.fc-msg { font-size: 13.5px; margin: 0; min-height: 0; }
.fc-msg:empty { display: none; }
.fc-msg.err { color: var(--accent-dark); font-weight: 600; }
.fc-row span:first-child { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fc-row b { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: #7CE0A0; }
.fc-row span:last-child { color: #7CE0A0; }
.fc-row .link-btn { font-size: 13px; padding: 0; }
.fc-hint { font-size: 13.5px; color: var(--muted); margin: 0; }
.fc-card { margin: 26px 0; padding: 22px 24px; border: 1px solid #3a5f48; border-radius: 6px; background: linear-gradient(135deg, rgba(60,170,110,.14), rgba(80,140,230,.10)); display: grid; gap: 8px; }
.fc-card p { margin: 0; }
.fc-card-k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7CE0A0; }
.fc-card-h { font-family: var(--display); font-size: 26px; line-height: 1.15; }
.fc-card-code { font-size: 18px; }
.fc-card-code b { font-family: var(--mono); font-size: 22px; letter-spacing: .06em; color: #7CE0A0; }
.fc-card-give { border-top: 1px dashed #3a5f48; padding-top: 12px; margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* background logo pattern: barely visible, soft glow */
.bg-tiles { opacity: .3 !important; }
.bg-tiles i { opacity: min(1, calc(var(--tf) + var(--wg) * .6));
  filter: drop-shadow(0 0 calc(2px * var(--wg)) color-mix(in srgb, var(--wc) calc(35% * var(--wg)), transparent))
          drop-shadow(0 0 calc(6px * var(--wg)) color-mix(in srgb, var(--wc) calc(15% * var(--wg)), transparent)); }

/* search bars: warm two-tone glow behind on hover / while typing */
.hero-search, .head-search, .search, .nav-search input { transition: box-shadow .35s ease, border-color .35s ease; }
.hero-search:hover, .hero-search:focus-within, .head-search:hover, .head-search:focus-within, .search:hover, .nav-search input:hover {
  border-color: #6a4a3a;
  box-shadow: 0 0 14px 1px rgba(255, 106, 61, .45), 0 0 34px 8px rgba(255, 183, 77, .18);
  animation: search-glow 3.2s ease-in-out infinite;
}
@keyframes search-glow {
  0%, 100% { box-shadow: 0 0 14px 1px rgba(255, 106, 61, .45), 0 0 34px 8px rgba(255, 183, 77, .18); }
  50% { box-shadow: 0 0 20px 3px rgba(255, 140, 70, .6), 0 0 46px 12px rgba(255, 183, 77, .26); }
}
@media (prefers-reduced-motion: reduce) { .hero-search, .head-search, .search, .nav-search input { animation: none !important; } }

/* tables inside articles and policies */
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 15px; display: block; overflow-x: auto; }
.prose thead th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); padding: 10px 14px; }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .025); }
.prose td:first-child { font-weight: 600; color: var(--ink); }
@media (min-width: 700px) { .prose table { display: table; } }

/* footer social icons */
.foot-social { display: flex; gap: 10px; margin: 2px 0 0; }
.foot-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--on-deep-muted); transition: color .2s, border-color .2s, box-shadow .3s; }
.foot-social a:hover { color: var(--on-deep); border-color: #6a4a3a; box-shadow: 0 0 12px rgba(255, 106, 61, .4); }


/* Rounded retail typography and polished brand; retain the existing glow palette. */
:root { --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1,h2,h3 { font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.logo.brand .brand-mark { width: 64px; height: 32px; color: #9aece2; filter: drop-shadow(0 0 9px #5de2d755); }
.logo.brand b { font-style: normal; font-weight: 800; letter-spacing: -.055em; }
.logo.brand b span { font-style: normal; font-weight: 500; }
.logo.brand .brand-tag { letter-spacing: .18em; line-height: 1.4; }
.lo > label { border-radius: 14px; padding-block: 16px; transition: border-color .2s, background .2s, box-shadow .2s; }
.lo > input:checked + label { background: linear-gradient(120deg,#123438,#23253c); border-color: #92e6dc; box-shadow: 0 0 18px #76d9dd22; }
.form-section { border-top: 1px solid var(--line); padding-block: 28px; }
.form-section h2 .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #153337; color: #a1eee6; font: 700 17px var(--body); flex: none; }
.lens-recommendation { padding: 16px 18px; border: 1px solid #41676c; border-radius: 14px; background: linear-gradient(120deg,#143135,#24263b); color: #e1f9f5; font-size: 15px; line-height: 1.6; }
.lens-recommendation[hidden] { display: none; }
@media(max-width:560px) { .logo.brand .brand-mark { width: 46px; height: 26px; } .logo.brand b { font-size: 21px; } }

/* public/assets/css/retail-cellophane.css */
.feature-rail{--rail-ink:#f5fbff;position:relative;max-width:1240px;margin:20px auto 34px;padding:16px clamp(16px,4vw,40px);color:var(--rail-ink);overflow:hidden}
.feature-rail:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 10% 30%,rgba(0,224,200,.15),transparent 45%),radial-gradient(ellipse at 80% 65%,rgba(102,113,255,.14),transparent 45%);pointer-events:none}
.rail-heading{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:700 11px var(--mono);letter-spacing:.14em;color:#b5c9cc}
.rail-heading button{min-height:36px;padding:6px 12px;border:1px solid #29484b;border-radius:999px;background:#0b1b20;color:#eafafa;font:600 12px var(--body);letter-spacing:0;cursor:pointer}
.rail-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.rail-track{display:flex;width:max-content;animation:rail-glide 38s linear infinite}
.feature-rail:hover .rail-track,.feature-rail:focus-within .rail-track,.feature-rail.is-paused .rail-track{animation-play-state:paused}
.rail-group{display:flex;gap:20px;padding-right:20px}
.rail-item{display:flex;flex:0 0 106px;flex-direction:column;align-items:center;gap:7px;padding:5px 4px;color:#f4fbfd;text-decoration:none;text-align:center;font:600 13px/1.2 var(--body)}
.rail-icon{display:grid;place-items:center;width:62px;height:62px;border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);border-radius:50%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--glow) 25%,#173438),#f7faf8 76%);color:#073b3d;box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 10%,transparent),0 0 24px color-mix(in srgb,var(--glow) 32%,transparent);transition:box-shadow .2s,transform .2s}
.rail-item:hover .rail-icon{transform:scale(1.06);box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 14%,transparent),0 0 34px color-mix(in srgb,var(--glow) 60%,transparent)}
.rail-icon svg{width:35px;height:35px}
@keyframes rail-glide{to{transform:translateX(-50%)}}
.filter-open{min-height:46px;padding:8px 16px;border:1px solid var(--field-line);border-radius:999px;background:var(--field);color:var(--ink);font-weight:700;cursor:pointer}
.filter-panel{--panel:#f4f8f7;--text:#102a2c;--muted:#637879;--line:#c8d6d5;--accent:#087f80;position:fixed;inset:0 0 0 auto;width:min(500px,100vw);height:100dvh;max-height:none;margin:0;padding:0;border:1px solid var(--line);border-right:0;border-radius:22px 0 0 22px;background:var(--panel);color:var(--text);box-shadow:-24px 0 70px #0006;overflow:hidden}
.filter-panel::backdrop{background:#000b;backdrop-filter:blur(4px)}
.filter-panel .filters{height:100%;display:flex;flex-direction:column;gap:0;overflow-y:auto;padding:24px 26px}
.filter-panel-head{position:sticky;top:-24px;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:-24px -26px 8px;padding:24px 26px 15px;background:var(--panel);border-bottom:1px solid var(--line)}
.filter-panel-head .eyebrow{margin:0;color:var(--muted);font:700 11px var(--mono);letter-spacing:.12em}.filter-panel-head h2{margin:0;color:var(--text);font:600 32px/1.2 var(--display)}
.filter-close{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);font-size:28px;cursor:pointer}
.filter-panel .popular{padding:16px 0;border-bottom:1px solid var(--line)}.filter-panel .popular .mono-label{display:block;margin-bottom:9px;color:var(--muted)}.filter-panel .pop{border-color:var(--line);background:white;color:var(--text)}
.filter-panel .filter-group{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:15px 0;border-bottom:1px solid var(--line)}
.filter-panel .filter-group>.mono-label{display:block;margin:0 0 8px;color:var(--text);font:700 17px/1.35 var(--body);letter-spacing:0}
.filter-panel .chip{display:flex;align-items:center;gap:10px;width:100%;min-height:45px;padding:9px 4px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;white-space:normal}
.filter-panel .chip:hover{background:#e8f0ef}.filter-panel .chip:before{content:"";display:block;flex:0 0 20px;width:20px;height:20px;border:1.5px solid #93a7a7;border-radius:5px;background:white;order:-1}
.filter-panel .chip[aria-pressed=true]:before{border-color:var(--accent);background:#d8f2ef;box-shadow:inset 0 0 0 4px var(--panel)}
.filter-panel .chip[aria-pressed=true]{font-weight:700}.filter-panel .chip .n{margin-left:auto;color:var(--muted);font:500 13px var(--mono)}
.filter-panel .filter-foot{position:sticky;bottom:-24px;z-index:3;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:auto -26px -24px;padding:16px 26px;background:var(--panel);border-top:1px solid var(--line)}
.filter-panel .result-count{font-weight:700;color:var(--text)}.filter-panel .filter-apply{grid-column:2;grid-row:1;min-height:48px;padding:10px 20px;border:0;border-radius:999px;background:#0b5155;color:white;font-weight:700;cursor:pointer}.filter-panel .reset{grid-column:1;grid-row:1;justify-self:start}
@media(max-width:700px){.feature-rail{margin:10px auto 24px}.rail-item{flex-basis:94px;font-size:12px}.rail-icon{width:56px;height:56px}.filter-panel{width:100vw;border:0;border-radius:0}.filter-panel .filters{padding-inline:20px}.filter-panel-head{margin-inline:-20px;padding-inline:20px}.filter-panel .filter-foot{margin-inline:-20px;padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.rail-track{animation:none}.rail-window{overflow-x:auto}.rail-group[aria-hidden=true]{display:none}}


/* One continuous illuminated bar, with the light revealed through eyewear cutouts. */
.feature-rail { margin-block:24px 42px; padding-block:24px; }
.rail-heading { margin-bottom:18px; padding-inline:6px; }
.rail-heading b { font:700 12px var(--body); letter-spacing:.16em; }
.rail-heading button { background:#ffffff08; border-color:#ffffff22; color:#d7e4e7; padding:8px 14px; }
.rail-window { position:relative; border-block:1px solid #83d9db20; border-radius:18px; background:linear-gradient(180deg,#101d23,#0b1117); isolation:isolate; }
.rail-window:before { content:""; position:absolute; top:55px; left:0; right:0; height:2px; background:linear-gradient(90deg,#ff8ab8,#6dbdff,#ffd45c,#62f0b1,#b49bff,#ff8c72,#62e9e0); background-size:200% 100%; box-shadow:0 0 22px #62e9e075; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; opacity:.65; }
.rail-window:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#62e9e01a,transparent,#ff8ab81a,transparent); background-size:200% 100%; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; z-index:-1; }
.rail-group { gap:0; padding-right:0; }
.rail-item { flex-basis:162px; padding:10px 10px 20px; gap:8px; font:600 15px/1.2 var(--body); position:relative; }
.rail-icon,.rail-item:hover .rail-icon,.rail-item:focus-visible .rail-icon { position:relative; width:142px; height:86px; border:0; border-radius:0; overflow:visible; background:none; box-shadow:none; color:var(--glow); transform:none; transition:filter .25s; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--glow) 50%,transparent)); }
.rail-icon svg { visibility:hidden; width:142px; height:86px; }
.rail-icon:before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--glow) 10%,#fff 40%,var(--glow) 60%,#62e9e0 80%,var(--glow)); background-size:250% 100%; -webkit-mask:var(--frame-mask) center / contain no-repeat; mask:var(--frame-mask) center / contain no-repeat; animation:rail-light 9s ease-in-out infinite alternate; pointer-events:none; }
.rail-label { color:#e7f0f2; letter-spacing:-.015em; }
.rail-item:hover .rail-label,.rail-item:focus-visible .rail-label { color:var(--glow); }
.rail-item:hover .rail-icon { filter:drop-shadow(0 0 12px var(--glow)); }
.rail-item:focus-visible { outline:2px solid var(--glow); outline-offset:-4px; border-radius:12px; }
.feature-rail.is-paused .rail-icon:before,.feature-rail.is-paused .rail-window:before,.feature-rail.is-paused .rail-window:after { animation-play-state:paused; }
@keyframes rail-light { from { background-position:0% 50%; } to { background-position:100% 50%; } }
/* The white frame ticker links directly to each product, including repeated copies. */
.reel-track { gap:0; }
.reel-link { display:flex; flex:0 0 240px; flex-direction:column; align-items:center; gap:8px; padding-inline:20px; text-decoration:none; color:#243b40; font:600 12px var(--body); }
.reel-link img { width:200px; height:86px; object-fit:contain; }
.reel-link span { opacity:.7; transition:opacity .2s; }
.reel-link:hover span,.reel-link:focus-visible span { opacity:1; }
.reel-link:focus-visible { outline:2px solid #0b777e; outline-offset:-3px; border-radius:8px; }
.reel:focus-within .reel-track { animation-play-state:paused; }
@media(max-width:700px) { .rail-item { flex-basis:136px; padding-inline:8px; font-size:14px; } .rail-icon,.rail-item:hover .rail-icon,.rail-item:focus-visible .rail-icon,.rail-icon svg { width:120px; height:76px; } .rail-window:before { top:50px; } .reel-link { flex-basis:200px; padding-inline:14px; } .reel-link img { width:172px; height:74px; } }
@media(prefers-reduced-motion:reduce) { .rail-icon:before,.rail-window:before,.rail-window:after { animation:none; } .rail-icon { transition:none; } .reel { overflow-x:auto; } .reel-link[tabindex="-1"] { display:none; } }

/* Editorial homepage hero: balanced columns, condensed capitals and even navigation. */
.hero-show { grid-template-columns:1fr 1fr; }
.show-copy { padding:clamp(30px,4vw,64px); justify-content:center; }
.hero-show .hero-copy { max-width:560px; gap:24px; text-align:center; }
.hero-kicker { margin:0; font:600 11px/1.5 var(--body); letter-spacing:.24em; text-transform:uppercase; color:#c6d4d3; }
.hero-show h1 { margin:0; font-family:"Archivo Narrow", "Archivo",sans-serif; font-size:clamp(46px,5.8vw,88px); font-weight:700; line-height:.97; letter-spacing:-.025em; text-transform:uppercase; }
.hero-show .hero-title-line { display:block; }
.hero-show h1 em.glow-word { display:block; font-family:inherit; font-weight:700; font-style:normal; padding:0 0 .06em; letter-spacing:.035em; margin-top:8px; }
.hero-show .hp-sub { margin:0; display:grid; gap:5px; font:400 clamp(14px,1.25vw,18px)/1.5 var(--body); color:#cbd3d1; }
.hero-show .hp-sub strong { font-size:22px; font-weight:600; color:#f4f1ea; }
.hero-show .hero-search { width:100%; max-width:none; border-radius:12px; padding:7px 7px 7px 16px; box-shadow:0 8px 28px #0003; }
.hero-show .hero-search input { font:400 15px var(--body); min-height:44px; }
.hero-show .hero-search .btn { display:block; border-radius:7px; font:700 12px var(--body); text-transform:uppercase; letter-spacing:.1em; padding:12px 18px; }
.hero-show .hero-pop { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; font:500 11px/1.4 var(--body); text-transform:uppercase; letter-spacing:.035em; }
.hero-pop .mono-label { grid-column:1/-1; margin:0 0 2px; font:600 10px var(--body); color:#99adad; letter-spacing:.18em; }
.hero-show .hero-pop a { display:flex; align-items:center; justify-content:center; min-height:38px; padding:6px 4px; border:1px solid #ffffff20; border-radius:6px; color:#d8e0df; background:#ffffff03; }
.hero-show .hero-pop a:hover { border-color:#8cd6d2; color:#b7f1e9; background:#84d2cf0a; }
.hero-show .btn-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; }
.hero-show .btn-row .btn { width:100%; min-height:46px; border-radius:8px; display:flex; justify-content:center; align-items:center; padding:12px 8px; font:600 12px/1.4 var(--body); text-transform:uppercase; letter-spacing:.1em; }
@media(max-width:1100px) and (min-width:761px) { .show-copy { padding:30px 24px; } .hero-show .hero-copy { gap:20px; } .hero-show .hero-pop { font-size:10px; } }
@media(max-width:760px) { .hero-show { grid-template-columns:1fr; } .show-copy { padding:32px 22px 40px; } .hero-show .hero-copy { max-width:520px; gap:22px; } .hero-show h1 { font-size:clamp(48px,12vw,76px); } .hero-show .hero-pop { font-size:11px; } }

/* Transparent category portraits, illuminated behind their silhouettes. */
.rail-window:before { top:170px; opacity:.4; }
.rail-item { flex-basis:186px; padding:12px 9px 20px; gap:10px; }
.rail-icon.portrait-cutout,.rail-item:hover .rail-icon.portrait-cutout,.rail-item:focus-visible .rail-icon.portrait-cutout { width:168px; height:190px; display:grid; place-items:end center; overflow:visible; filter:none; transform:none; }
.rail-icon.portrait-cutout:before { inset:15px -6px 0; -webkit-mask:none; mask:none; border-radius:50%; background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--glow) 35%,transparent),transparent 68%); background-size:100% 100%; filter:blur(14px); animation:portrait-light 5s ease-in-out infinite alternate; z-index:0; }
.portrait-cutout img { position:relative; z-index:1; width:168px; height:190px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--glow) 70%,transparent)); transition:filter .25s,transform .25s; }
.rail-item:hover .portrait-cutout img,.rail-item:focus-visible .portrait-cutout img { transform:translateY(-3px); filter:drop-shadow(0 0 10px var(--glow)); }
.feature-rail.is-paused .portrait-cutout:before { animation-play-state:paused; }
@keyframes portrait-light { from { opacity:.5; transform:scale(.94); } to { opacity:1; transform:scale(1.06); } }
@media(max-width:700px) { .rail-item { flex-basis:152px; padding-inline:6px; } .rail-icon.portrait-cutout,.rail-item:hover .rail-icon.portrait-cutout,.rail-item:focus-visible .rail-icon.portrait-cutout { width:140px; height:164px; } .portrait-cutout img { width:140px; height:164px; } .rail-window:before { top:148px; } }
@media(prefers-reduced-motion:reduce) { .rail-icon.portrait-cutout:before { animation:none; } .portrait-cutout img { transition:none; } }

/* Bright cellophane mosaic moving beneath raised cutout lettering. */
.hero-show .hero-impact { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; margin-top:22px; text-transform:uppercase; }
.hero-show h1 .impact-fast,.hero-price { position:relative; display:flex; justify-content:center; align-items:center; min-width:0; min-height:148px; overflow:hidden; border:1px solid #ffffff65; isolation:isolate; background:linear-gradient(125deg,#ff46b0,#6949ff 43%,#16dfda); box-shadow:inset 0 1px 0 #ffffff80,0 10px 30px #7a39ef25; }
.hero-show h1 .impact-fast { margin:0; padding:10px 8px; font:700 clamp(74px,8.8vw,132px)/.95 "Archivo Narrow",sans-serif; letter-spacing:-.035em; font-style:normal; color:#fff; -webkit-text-fill-color:#fff; }
.hero-price { flex-direction:column; padding:14px 8px; color:#fff; background:linear-gradient(125deg,#25f2cf,#367bff 42%,#ff4dbe); }
.impact-word,.hero-price b { position:relative; z-index:2; color:#fff; -webkit-text-fill-color:#fff; text-shadow:0 1px 0 #ffffffaa,0 3px 0 #26365c65,2px 7px 0 #1b163e75,3px 12px 12px #20133785; }
.hero-price small { position:relative; z-index:2; font:700 11px/1.3 "Archivo",sans-serif; letter-spacing:.22em; margin-bottom:4px; text-shadow:0 2px 5px #16254f; }
.hero-price b { font:700 clamp(66px,7.8vw,112px)/.95 "Archivo Narrow",sans-serif; letter-spacing:-.045em; }
.pixel-layer { position:absolute; inset:-25% -12%; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(6,1fr); pointer-events:none; opacity:.85; animation:cellophane-drift 15s ease-in-out infinite alternate; z-index:0; }
.pixel-layer i { background:#ff65d1; box-shadow:inset 1px 1px 0 #ffffff35; animation:hero-pixels 18s steps(1,end) infinite; animation-delay:var(--pixel-delay); }
.hero-price .pixel-layer { animation-direction:alternate-reverse; }
.hero-price .pixel-layer i { animation-direction:reverse; }
.impact-fast:after,.hero-price:after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(125deg,transparent 12%,#ffffff50 28%,transparent 43%,#ffffff30 67%,transparent 82%); background-size:240% 100%; mix-blend-mode:screen; animation:cellophane-sheen 12s ease-in-out infinite alternate; }
@keyframes hero-pixels { 0%,100% { background:#ff45b9; opacity:.55; } 20% { background:#b789ff; opacity:.8; } 40% { background:#43cfff; opacity:.65; } 60% { background:#49ffcc; opacity:.75; } 80% { background:#ffda73; opacity:.6; } }
@keyframes cellophane-drift { from { transform:translate(-3%, -5%); } to { transform:translate(3%, 5%); } }
@keyframes cellophane-sheen { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.hero-show .hero-search,.hero-show .hero-search .btn,.hero-show .hero-pop a,.hero-show .btn-row .btn { border-radius:0; }
.hero-show .hero-copy { gap:22px; }
.hero-show .hp-sub { font-size:15px; }
@media(max-width:1100px) and (min-width:761px) { .hero-show h1 .impact-fast { font-size:76px; min-height:126px; } .hero-price { min-height:126px; } .hero-price b { font-size:72px; } }
@media(max-width:760px) { .hero-show h1 .impact-fast { font-size:clamp(70px,18vw,116px); min-height:130px; } .hero-price { min-height:130px; } .hero-price b { font-size:clamp(66px,16vw,102px); } .hero-show .hero-impact { gap:8px; margin-top:18px; } }
@media(prefers-reduced-motion:reduce) { .pixel-layer,.pixel-layer i,.impact-fast:after,.hero-price:after { animation:none; } .pixel-layer i:nth-child(3n) { background:#49ffcc; } .pixel-layer i:nth-child(3n + 1) { background:#43cfff; } }

/* public/assets/css/transparent-header.css */
.site-header,.announce{background:transparent;background-image:none;border:0;box-shadow:none}.site-header{-webkit-backdrop-filter:none;backdrop-filter:none}.site-header .wrap{background:transparent}
/* public/assets/css/shopping-premium.css */
/* Fast Eyeglasses: a calm product canvas with crisp editorial controls. */
.fe-size-helper { scroll-margin-top:150px; margin:24px 0 30px; padding:28px; color:#f8f7f2; background:linear-gradient(125deg,#171b20,#101213); border:1px solid #ffffff30; box-shadow:inset 3px 0 #72dace; }
.fe-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.fe-eyebrow { margin:0 0 8px; font:700 10px/1.4 var(--body); letter-spacing:.16em; color:#9ddfd7; }
.fe-size-helper h2 { font:700 clamp(24px,2.7vw,36px)/1.08 "Archivo Narrow",sans-serif; text-transform:uppercase; margin:0; }
.fe-size-example { white-space:nowrap; padding:12px 16px; border:1px solid #7b9f9b66; font:700 23px/1 "Archivo Narrow",sans-serif; letter-spacing:.03em; color:#b4ebe3; }
.fe-size-helper>p,.fe-fit-note p { font:400 14px/1.6 var(--body); max-width:850px; }
.fe-fit-input-row { display:flex; gap:10px; margin-top:8px; max-width:650px; }
.fe-size-helper label { display:block; font:600 12px/1.5 var(--body); color:#e0e8e6; }
.fe-size-helper input,.fe-size-helper select { border:1px solid #ffffff45; border-radius:0; padding:12px 14px; color:#fff; background:#090b0c; min-width:0; font:400 16px/1.4 var(--body); }
.fe-size-helper input { flex:1; width:100%; }
.fe-size-helper input[aria-invalid=true] { border-color:#ff9cac; }
.fe-primary,.fe-secondary { border:1px solid #ffffff50; border-radius:0; padding:12px 16px; font:700 11px/1.3 var(--body); letter-spacing:.055em; text-transform:uppercase; cursor:pointer; }
.fe-primary { background:#a7e9dd; color:#102a29; border-color:#a7e9dd; }
.fe-primary:hover { background:#d5fff5; }
.fe-primary:disabled { opacity:.45; cursor:default; }
.fe-secondary { background:#ffffff05; color:#f3f4f1; }
.fe-secondary:hover,.fe-secondary[aria-pressed=true] { border-color:#a7e9dd; color:#a7e9dd; }
.fe-fit-tools { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.fe-fit-tools select { display:block; margin-top:5px; font-size:13px; }
.fe-muted,.fe-price-note { color:#abbab8; font:400 12px/1.6 var(--body); }
#fe-fit-message { min-height:1.4em; font:500 13px/1.5 var(--body); color:#b8e8df; margin:9px 0 14px; }
.fe-fit-note { margin-top:16px; border-top:1px solid #ffffff24; padding-top:12px; }
.fe-fit-note summary { cursor:pointer; font:600 13px/1.4 var(--body); color:#e0e9e7; }
.fe-card { position:relative; background:#171a1c; border:1px solid #ffffff24; min-width:0; display:flex; flex-direction:column; }
.fe-card[hidden] { display:none !important; }
.fe-card .card { border:0; border-radius:0; box-shadow:none; display:block; background:transparent; overflow:hidden; }
.fe-card .card-img { background:#f1f3f2; padding:16px 10px; min-height:150px; border-radius:0; }
.fe-card .card-img img { object-fit:contain; width:100%; height:auto; mix-blend-mode:multiply; }
.fe-card .card-body { padding:17px 17px 8px; }
.fe-card h2 { font:700 22px/1.2 "Archivo Narrow",sans-serif; text-transform:uppercase; letter-spacing:.01em; }
.fe-card .price { font:600 16px/1.3 var(--body); white-space:nowrap; }
.fe-card .meta { font:400 12px/1.5 var(--body); color:#bac6c5; }
.fe-included { font:500 11px/1.4 var(--body); margin:8px 0 0; color:#99cfc6; }
.fe-card-actions { padding:0 17px 16px; margin-top:auto; display:grid; gap:10px; }
.fe-card-buttons { display:flex; gap:8px; }
.fe-card-buttons button { flex:1; min-height:36px; border:1px solid #ffffff35; background:transparent; color:#edf1ee; border-radius:0; font:600 10px/1.3 var(--body); letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
.fe-card-buttons button:hover,.fe-card-buttons button[aria-pressed=true] { color:#ace7da; border-color:#ace7da; background:#ace7da0c; }
.fe-swatches { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.fe-swatches button { display:grid; place-items:center; width:32px; height:32px; border:1px solid transparent; padding:4px; background:transparent; border-radius:0; cursor:pointer; }
.fe-swatches button[aria-pressed=true] { border-color:#9fddd1; }
.fe-swatches button span { width:20px; height:20px; border:1px solid #ffffff60; border-radius:0; }
.fe-chosen-color { font:400 11px/1.4 var(--body); color:#b3c1bf; }
.fe-save { position:absolute; top:8px; right:8px; z-index:2; background:#fff; color:#162b30; border:1px solid #d4ddda; border-radius:0; width:38px; height:38px; font-size:27px; line-height:1; cursor:pointer; }
.fe-save[aria-pressed=true] { color:#a62870; }
.fe-color-selected .card-img img.alt { display:none !important; }
.fe-color-selected .card:hover .card-img img:first-child { opacity:1; }
.fe-live-status { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); max-width:90vw; padding:10px 18px; background:#d6f7ee; color:#173330; z-index:140; font:600 13px var(--body); box-shadow:0 6px 20px #0006; pointer-events:none; }
.fe-live-status:empty { display:none; }
.fe-compare-tray { position:fixed; bottom:0; inset-inline:0; z-index:130; border-top:1px solid #96d8c7; background:#111719f5; padding:15px max(20px,calc((100vw - 1200px)/2)); display:flex; align-items:center; gap:12px; box-shadow:0 -6px 30px #0006; backdrop-filter:blur(12px); }
.fe-compare-tray[hidden] { display:none; }
.fe-compare-tray>div { flex:1; min-width:0; font:600 13px/1.5 var(--body); }
.fe-compare-tray span { display:block; font-weight:400; font-size:12px; color:#b1c3be; }
.fe-dialog { width:min(940px,calc(100vw - 32px)); max-height:85dvh; padding:26px; color:#f5f7f4; background:#111719; border:1px solid #93cbbb; box-shadow:0 22px 80px #000a; border-radius:0; }
.fe-dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
.fe-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.fe-dialog h2 { font:700 29px/1.15 "Archivo Narrow",sans-serif; text-transform:uppercase; margin:0; }
.fe-dialog-head button { background:transparent; color:#fff; border:1px solid #ffffff40; font-size:26px; width:40px; height:40px; cursor:pointer; flex-shrink:0; }
.fe-size-option { padding:15px 0; border-top:1px solid #ffffff24; }
.fe-measurement { font:700 38px/1.1 "Archivo Narrow",sans-serif; margin:0 0 20px; color:#d5f8ed; }
.fe-measurement span { color:#7faaa1; }.fe-measurement small { font:400 13px var(--body); }
.fe-measure-key { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.fe-measure-key span { border:1px solid #ffffff30; padding:12px; font:400 12px/1.5 var(--body); color:#becac7; }
.fe-measure-key b { display:block; color:#fff; font-size:18px; }
.fe-differences { list-style:none; padding:0; display:grid; gap:7px; font:500 14px/1.5 var(--body); color:#cef0e7; }
.fe-compare-scroll { overflow-x:auto; }
.fe-compare-table { width:100%; min-width:540px; border-collapse:collapse; font:400 13px/1.5 var(--body); }
.fe-compare-table th,.fe-compare-table td { border:1px solid #ffffff25; padding:14px; text-align:left; vertical-align:top; }
.fe-compare-table th[scope=row] { width:140px; color:#a2c8bc; }
.fe-compare-table thead th { width:25%; }
.fe-compare-table img { display:block; width:100%; max-width:230px; margin-bottom:12px; background:#eff3f0; }
.fe-compare-table small { display:block; margin-top:5px; color:#a7bbb4; }
.fe-link { display:inline-block; margin-top:15px; color:#b6f2df; }
.fe-pdp-fit { border:1px solid #ffffff25; padding:22px; background:#13191b; }
.fe-pdp-fit h2 { font:700 24px "Archivo Narrow",sans-serif; text-transform:uppercase; margin:0 0 20px; }
.fe-pdp-helper { border:1px solid #ffffff25; padding:16px; }
.fe-pdp-helper>summary { color:#bee9de; cursor:pointer; font:600 13px var(--body); }
.fe-pdp-helper .fe-size-helper { padding:18px 0 0; margin:0; border:0; box-shadow:none; background:transparent; }
.fe-pdp-helper .fe-size-example { display:none; }
.fe-pdp-helper .fe-size-helper h2 { font-size:25px; }
.fe-lens-step legend { display:flex; align-items:center; gap:10px; width:100%; }
.fe-step-number { color:#9ee1cd; border:1px solid #598a7b; padding:5px 7px; font:700 12px var(--body); }
.fe-lens-step .lo-list { display:grid; gap:10px; }
.fe-lens-step .lo label { border-radius:0; border:1px solid #ffffff35; background:#161b1d; padding:17px; }
.fe-lens-step .lo input:checked+label { border-color:#a8e7d2; background:#a8e7d20c; box-shadow:inset 3px 0 #a8e7d2; }
.fe-lens-step .lo label small { color:#b5c5bf; line-height:1.6; }
.fe-lens-step .lo-price { color:#b8ecdc; }
.price-build { border-radius:0 !important; border:1px solid #81bfa94d; background:#12201b; }
.fe-price-note { margin-top:12px; }
.fe-saved-nav { white-space:nowrap; }
.fe-saved-nav span { color:#9ce0cd; }
.nav:not(.open) .fe-saved-nav { display:none; }
.fe-expertise { padding:38px; margin-block:40px; border:1px solid #ffffff30; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; background:#121719; }
.fe-expertise h2 { font:700 clamp(30px,3vw,46px)/1.1 "Archivo Narrow",sans-serif; text-transform:uppercase; margin:6px 0 15px; }
.fe-expertise p { color:#bbc9c5; font:400 15px/1.7 var(--body); }
.fe-expertise a { color:#b8ead9; }
.fe-expertise ol { list-style:none; counter-reset:fe-process; padding:0; margin:0; display:grid; gap:15px; }
.fe-expertise li { counter-increment:fe-process; display:grid; grid-template-columns:30px 1fr; gap:12px; border-bottom:1px solid #ffffff20; padding-bottom:15px; font:400 13px/1.6 var(--body); color:#b8c7c2; }
.fe-expertise li:before { content:"0" counter(fe-process); color:#9cd7c1; font:700 18px "Archivo Narrow",sans-serif; }
.fe-expertise li strong { display:block; color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:.06em; }
@media(max-width:760px) {
 .fe-size-helper { padding:20px; }.fe-panel-heading { display:block; }.fe-size-example { display:none; }
 .fe-fit-input-row { flex-direction:column; }.fe-fit-input-row button { min-height:44px; }
 .fe-card .card-body { padding:12px 10px 7px; }.fe-card-actions { padding:0 10px 12px; }
 .fe-card h2 { font-size:19px; }.fe-card .price { font-size:13px; }.fe-card .card-top { flex-wrap:wrap; gap:5px; }
 .fe-card .card-img { min-height:112px; padding:26px 6px 12px; }
 .fe-save { width:32px; height:32px; font-size:24px; }
 .fe-card-buttons { flex-direction:column; gap:5px; }.fe-card-buttons button { min-height:38px; }
 .fe-compare-tray { flex-wrap:wrap; padding:12px 16px; }.fe-compare-tray>div { flex-basis:100%; }
 .fe-dialog { padding:18px; }.fe-dialog h2 { font-size:25px; }.fe-measure-key span { padding:10px 6px; font-size:10px; }
 .fe-pdp-fit { padding:18px; }.fe-expertise { padding:24px; grid-template-columns:1fr; gap:25px; }
}
@media(prefers-reduced-motion:reduce) { .fe-card * { transition:none !important; } }

/* Luminous editorial finish: light belongs at the edges; the frames stay clear. */
:root { --paper:#0a0e13; --mist:#11171e; --mist-2:#1c2530; --muted:#b4c0c6; --line:#34434c; --accent:#8ddfd1; --accent-dark:#b6f1e5; --focus:#a5f4e2; --radius:0; --fe-mint:#a4eddb; --fe-blue:#87caff; --fe-pink:#efa9db; }
body { background:radial-gradient(ellipse at 0 25%,#183a4138,transparent 42%),radial-gradient(ellipse at 100% 60%,#3e234735,transparent 45%),#0a0e13; }
::selection { color:#102a2b; background:#a4eddb; }
html { scrollbar-color:#5f7e88 #0d1116; }
button,a,input,select,textarea { -webkit-tap-highlight-color:#9cedd92b; }
:focus-visible { outline:2px solid #b8f7e5; outline-offset:4px; box-shadow:0 0 0 5px #7edcca18; }
.site-header { background:transparent; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.site-header .wrap { border-bottom:1px solid #b8dcf11a; }
.nav a { border-radius:0; transition:color .2s,background .2s,box-shadow .2s; }
.nav a:hover,.nav a[aria-current=page] { color:#c8fff1; background:#b7eddd0b; box-shadow:inset 0 -2px #a7e4d2; }
.head-search,.cart-link,.menu-btn,.search-btn,.cart-count { border-radius:0; }
.head-search { background:#0d13182e; border-color:#b0d5e52c; }
.head-search:focus-within { border-color:#abe8df; box-shadow:0 0 20px #84dcca24; }
.cart-link { border-color:#83cce399; background:#131e2733; animation:none; box-shadow:0 0 16px #7ba6ff18; }
.cart-link:hover { color:#fff; background:#86b6e41a; box-shadow:0 0 22px #77bbf142; }
.cart-count { background:linear-gradient(135deg,#eba4d9,#9bbcff); color:#192235; font-weight:700; }
.crumbs { font-size:12px; letter-spacing:.02em; color:#a9bec6; }
.page-head { padding-block:clamp(28px,4vw,48px); }
.page-head h1,.pdp-info h1,.summary h2,.form-section h2,.drawer h2,.prose h2,.prose h3,.section h2 { font-family:"Archivo Narrow",var(--body); font-weight:700; text-transform:uppercase; letter-spacing:-.015em; }
.page-head h1 { font-size:clamp(38px,5.4vw,72px); max-width:24ch; }
.page-head .eyebrow { color:#a9d3d3; letter-spacing:.16em; }
.page-head .lede { color:#bfccd0; font-size:clamp(16px,1.45vw,19px); line-height:1.65; }
.pdp-info h1 small { text-transform:none; letter-spacing:0; color:#bacbd0; font-family:var(--body); font-weight:400; }
.pdp-info h1 { font-size:clamp(46px,5.2vw,72px); }
.pdp-price b { font-family:"Archivo Narrow",var(--body); font-size:48px; letter-spacing:-.025em; color:#ecfff8; text-shadow:0 0 25px #91e2d222; }
.pdp-price>span { color:#b8c8ce; font-size:13px; }
.btn,.fe-primary,.fe-secondary,.catalog-filter-toggle,.catalog-close { border-radius:0; min-height:44px; transition:box-shadow .2s,border-color .2s,background .2s,transform .2s; }
.btn { font:700 12px/1.4 var(--body); letter-spacing:.09em; text-transform:uppercase; }
.btn:not(.ghost),.fe-primary { color:#11282b; background:linear-gradient(115deg,#a7e8d4,#c5e9f5 70%,#e5c6ec); border-color:#c9f4e7; box-shadow:inset 0 1px #ffffffb3,0 5px 18px #7dd8cc16; }
.btn:not(.ghost):not([disabled]):hover,.fe-primary:not([disabled]):hover { color:#0d2526; background:linear-gradient(115deg,#c1ffe9,#e0f5ff 70%,#f5d7f1); box-shadow:0 0 22px #9de6d83b,0 5px 20px #89b8f325; border-color:#e5fff6; transform:translateY(-1px); }
.btn.ghost,.fe-secondary { color:#e3f5f1; background:#0b13184d; border-color:#9ecbd14d; }
.btn.ghost:hover,.fe-secondary:hover { color:#d8fff4; background:#9de2d211; border-color:#bcebdd; box-shadow:0 0 16px #93dfd422; }
.btn:active,.fe-primary:active,.fe-secondary:active { transform:translateY(1px); }
.btn[disabled],.fe-primary[disabled] { transform:none; box-shadow:none; }
.hero-show .btn-row .btn { min-height:48px; }
.hero-show .hero-pop a { border-color:#94bccd36; background:#14202940; }
.hero-show .hero-pop a:hover { color:#dafef4; box-shadow:inset 0 -2px #a6eddb,0 0 12px #93dfd41a; }
.filter-top { border-bottom:1px solid #a4cce524; }
.filter-top .search,.sort select,.catalog-filter-toggle { border-radius:0; background:#111922; border-color:#7798a34d; box-shadow:inset 0 1px #ffffff08; }
.filter-top .search:focus-within { border-color:#b3f0dc; box-shadow:0 0 18px #8fd7c62b; }
.sort select { font-size:13px; }
.catalog-sidebar { border-radius:0; background:linear-gradient(155deg,#0f151b,#080c10); border-color:#83b9c34d; box-shadow:-7px 0 28px #77c8d30a; }
.catalog-sidebar-head h2 { font-family:"Archivo Narrow",sans-serif; letter-spacing:.025em; text-transform:uppercase; }
.catalog-sidebar summary { color:#deecee; letter-spacing:.07em; }
.catalog-sidebar .chip { border-radius:0; transition:background .2s,color .2s; }
.catalog-sidebar .chip[aria-pressed=true] { background:#b4ebe910; box-shadow:inset 2px 0 #bce9de; color:#f4fffa; }
.catalog-sidebar .chip:hover { background:#a1cbdf0d; }
.catalog-sidebar .chip:before { border-radius:0; }
.catalog-sidebar .n { color:#a0bac5; }
.fe-size-helper,.fe-pdp-fit,.fe-expertise { border:1px solid transparent; background:linear-gradient(120deg,#121e26,#151720) padding-box,linear-gradient(120deg,#96dfcf9c,#8abcea50,#d797ca75) border-box; box-shadow:0 12px 32px #0003,inset 0 1px #ffffff06; }
.fe-size-helper { padding:28px 30px; }
.fe-size-helper h2,.fe-pdp-fit h2,.fe-expertise h2 { color:#f0fcf8; }
.fe-panel-heading { margin-bottom:12px; }
.fe-size-helper>p { margin-bottom:15px; color:#c5d2d5; }
.fe-size-example { background:#9edfd508; border-color:#9bcdcc4d; box-shadow:0 0 22px #83cabb12; color:#c1f5e3; }
.fe-size-helper input,.fe-size-helper select { background:#0a1219; border-color:#88afbd59; color:#f0fcf8; }
.fe-size-helper input:focus,.fe-size-helper select:focus { border-color:#b9f2df; box-shadow:0 0 18px #8fd7c629; }
.fe-size-helper .fe-fit-note { margin-top:18px; }
.fe-muted,.fe-price-note { color:#b3c7ce; }
.fe-fit-note summary { padding:4px 0; color:#c2e5dc; }
.fe-fit-note p { margin-top:12px; color:#bfccd2; }
.catalog-results>.grid { gap:24px; }
.fe-card { border:1px solid transparent; background:linear-gradient(145deg,#16202a,#12171e 62%,#1b1823) padding-box,linear-gradient(130deg,#9fe5d672,#8fbaf140,#daa3d95c) border-box; box-shadow:0 8px 24px #0003; transition:transform .25s,box-shadow .25s; }
.fe-card .card:hover { transform:none; box-shadow:none; }
.fe-card:hover,.fe-card:focus-within { transform:translateY(-3px); box-shadow:0 0 0 1px #b6e6e354,-8px 3px 25px #86d7ce16,8px 4px 25px #c98bcc18,0 16px 28px #0005; }
.fe-card .card-img { background:linear-gradient(135deg,#f7faf9,#e9f0f2); padding:22px 12px; border-bottom:1px solid #cce4eb44; }
.fe-card .card-img img { transition:opacity .3s,filter .3s; }
.fe-card:hover .card-img img { filter:drop-shadow(0 4px 3px #162a3424); }
.fe-card .card-body { padding-top:20px; }
.fe-card h2 { font-size:24px; color:#f0f8f4; }
.fe-card .price { color:#daf6eb; font-size:18px; }
.fe-card .meta { color:#bacbd3; }
.fe-included { color:#ace0cd; letter-spacing:.01em; }
.fe-save { color:#395864; border-color:#91b1bd66; box-shadow:0 3px 12px #15313d12; transition:background .2s,color .2s,box-shadow .2s; }
.fe-save:hover,.fe-save[aria-pressed=true] { background:#fff4fc; color:#ae4387; border-color:#d998c6; box-shadow:0 0 14px #df9ccd32; }
.fe-card-buttons { gap:7px; }
.fe-card-buttons button { border-color:#80aab459; background:#0a121833; min-height:40px; color:#d3ece6; transition:background .2s,border-color .2s,box-shadow .2s; }
.fe-card-buttons button:hover,.fe-card-buttons button[aria-pressed=true] { border-color:#b7ecd8; color:#dcfff2; background:#91d7c514; box-shadow:0 0 14px #8fd7c61c; }
.fe-swatches { gap:6px; }
.fe-swatches button { width:34px; height:34px; transition:border-color .2s,box-shadow .2s; }
.fe-swatches button[aria-pressed=true] { border-color:#bfecdd; box-shadow:0 0 12px #9cdfcf28; }
.fe-swatches button:hover { border-color:#8baec0; }
.fe-chosen-color { color:#adc4ce; }
.fe-pdp-helper { border-color:#8baeb842; background:#0f192036; }
.fe-pdp-helper>summary { padding:4px 0; color:#c8eddf; }
.fe-measurement { color:#cff8e9; text-shadow:0 0 20px #8ed5c018; }
.fe-measure-key span { background:#a3d7df06; border-color:#7fa8b345; }
.fe-measure-key b { color:#dff8ec; }
.pdp-stage { border:1px solid #b6dbe69c; border-radius:0; box-shadow:-10px 3px 30px #8bd8cc18,10px 4px 32px #bb8bdd1c,0 16px 40px #0004; }
.thumb { border-radius:0; border-color:#809dac45; background:#151e25; }
.thumb[aria-pressed=true] { border-color:#b8ebda; box-shadow:0 0 16px #9de2d322; }
.swatch label,.size label,.size-pick label,.lo label,.radio-pill label { border-radius:0; }
.swatch input:checked+label,.size input:checked+label,.size-pick input:checked+label,.radio-pill input:checked+label { border-color:#b6e9d8; background:#8cd2c610; box-shadow:inset 0 -2px #addccc,0 0 12px #8fd7c614; }
.fe-lens-step { border-top-color:#94b7c34d; }
.fe-lens-step .lo label { background:linear-gradient(135deg,#18242c,#171c26); border-color:#86a7ba45; transition:box-shadow .25s,border-color .25s; }
.fe-lens-step .lo label:hover { border-color:#badbdb; box-shadow:0 0 17px #91d6c91a; }
.fe-lens-step .lo input:checked+label { background:linear-gradient(135deg,#203730,#202432); border-color:#b5ebd8; box-shadow:inset 3px 0 #b5ebd8,0 0 24px #8cccbf1b; }
.fe-step-number { color:#c5f7e5; background:#9bd7c50c; border-color:#85bbaa; }
.price-build,.summary { border:1px solid #9dd2c36b; border-radius:0; background:linear-gradient(125deg,#172b28,#151d28); box-shadow:0 0 24px #8ec9bd10,0 10px 28px #0003; }
.sum-row.total,#pb-total,#co-total { color:#d4fbed; font-weight:700; }
.sum-row.total { font-size:23px; border-top-color:#88b9ab66; }
.form-section { border-top-color:#83b9c766; }
.form-section h2 .n { font-family:"Archivo Narrow",sans-serif; font-style:normal; color:#a7e6d2; }
.field .hint,.form-section header p { color:#b8cbd1; }
.fields input,.fields select,.fields textarea,.rx-grid input,.rx-grid select { border-radius:0; background:#111b24; border-color:#85a6b454; }
.fields input:focus,.fields select:focus,.fields textarea:focus,.rx-grid input:focus,.rx-grid select:focus { border-color:#b9ecd9; box-shadow:0 0 18px #8fd7c629; }
.invalid input,.invalid select,input.invalid,select.invalid { border-color:#ff9eaf; background:#2e1823; }
.err { color:#ffb0c0; }
.cart-item { padding-block:24px; border-color:#83a6b53d; }
.cart-item img { border:1px solid #a8cadf7d; border-radius:0; box-shadow:0 0 18px #83cbb819; }
.cart-item h3 { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:26px; }
.remove { color:#b5c8ce; text-underline-offset:4px; }.remove:hover { color:#f5b9d8; }
.drawer,.sp-dialog { border:1px solid #a1cbd874; border-radius:0; background:linear-gradient(130deg,#17252c,#151923); box-shadow:0 0 28px #92d5c82b,0 24px 80px #0009; }
.fe-dialog { border-color:#b0dbd9; background:linear-gradient(130deg,#16252c,#171923 70%,#231d2a); box-shadow:-12px 0 40px #88cbd222,12px 0 40px #c38dcc24,0 28px 90px #000a; }
.fe-dialog-head { padding-bottom:17px; border-bottom:1px solid #a3c7d13b; }
.fe-dialog-head button:hover { border-color:#bfecd9; background:#a5dac70c; }
.fe-compare-table thead th { background:#94cce208; }
.fe-compare-table tbody tr:nth-child(even) { background:#95bed808; }
.fe-compare-table th,.fe-compare-table td { border-color:#8eb2c53d; padding:17px 14px; }
.fe-compare-table th[scope=row] { color:#b4e3d2; }
.fe-compare-table img { border:1px solid #bad3db; }
.fe-compare-tray { border-top:1px solid #a7d4cfa6; background:linear-gradient(100deg,#122c29ed,#1b2331f5,#271d2cf5); box-shadow:0 -8px 30px #80c3b51c; padding-bottom:calc(15px + env(safe-area-inset-bottom,0px)); }
.fe-live-status { background:linear-gradient(115deg,#c5f6df,#d2e8ff); border:1px solid #e1fff1; }
.feature-rail { border-block:1px solid #9fd9dc30; background:linear-gradient(115deg,#14302b44,#14203380,#30203544); }
.rail-label { letter-spacing:.045em; text-transform:uppercase; font-family:"Archivo Narrow",sans-serif; font-weight:700; }
.section.mist { background:linear-gradient(125deg,#14242988,#1b1c2a88); border-block:1px solid #92b9cb20; }
.foot { border-top:1px solid #94c6cd5c; background:linear-gradient(125deg,#0c1c22,#12131c); }
.faq details,.pdp-faq details { border-radius:0; border-color:#86a9b33d; }
.faq summary:hover,.pdp-faq summary:hover { color:#b8efdc; }
@media(max-width:760px) {
 .fe-size-helper { padding:22px 20px; }.fe-size-helper h2 { font-size:28px; }
 .fe-card .card-img { padding:26px 7px 15px; }.fe-card h2 { font-size:21px; }.fe-card .price { font-size:15px; }
 .fe-card .card-body { padding-top:14px; }.catalog-results>.grid { gap:12px; }
 .fe-card-buttons button { min-height:42px; }.fe-compare-table th,.fe-compare-table td { padding:13px; }
 .fe-dialog { max-height:88dvh; }.fe-compare-tray { padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
 .pdp-price b { font-size:42px; }.page-head h1 { font-size:clamp(38px,10vw,60px); }
}
@media(prefers-reduced-motion:reduce) {
 .fe-card:hover,.fe-card:focus-within,.btn:hover,.fe-primary:hover { transform:none; }
 .fe-card,.fe-card *,button,a,input,select,textarea { transition:none !important; }
 html { scroll-behavior:auto; }
}

/* Finishing details: steady selected-color photos and room for long names. */
.fe-card .card-img img.alt { display:none !important; }
.fe-card .card:hover .card-img img:first-child { opacity:1; }
.fe-card .card-top { flex-wrap:wrap; gap:7px 12px; align-items:baseline; }
.fe-card .card-top h2 { min-width:0; overflow-wrap:anywhere; }
.fe-card .card-top .price { flex-shrink:0; }
.fe-card-buttons button { font-size:11px; }
.fe-swatches button { width:40px; height:40px; }
.fe-save { width:40px; height:40px; }

/* public/assets/css/storefront-finish-v1.css */
/* Consistent editorial finish for storefront, frame pages and checkout. */
.site-header{background:linear-gradient(110deg,#06101bd9,#111320d9)!important;backdrop-filter:blur(22px) saturate(1.35);border-bottom:1px solid #a9d7ed50;box-shadow:0 5px 22px #0005}
.site-header .nav>a{color:#f1f6ff;text-shadow:0 1px 7px #000;padding-block:14px;min-height:44px}
.site-header .nav>a:hover,.site-header .nav>a[aria-current]{color:#b7fff0;background:#91ecdf10;border-bottom-color:#9af8e0}
.site-header .head-search{background:#060d18c9;border-color:#a1b9cf65}
.site-header .head-search input{color:#fff}.site-header .head-search input::placeholder{color:#c1ccdd}
.site-header .brand{filter:drop-shadow(0 2px 6px #000)}
.site-header .cart-link{background:#0b1429d6;border-color:#b1cbdd7a;color:#fff}
.site-header .search-btn,.site-header .menu-btn{color:#fff}
.reel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 8px}
.reel-heading h2{font:700 clamp(24px,3vw,36px)/1.05 "Archivo Narrow",sans-serif;letter-spacing:.025em;text-transform:uppercase;color:#fff;margin:0}
.reel-heading p{color:#bfcede;font-size:13px;margin:8px 0 0}
.reel-heading>div:last-child{display:flex;align-items:center;gap:18px;font-size:13px}
.reel-heading a{color:#c8fff3;text-underline-offset:5px}
.reel-heading button{background:#0c1628;color:#fff;border:1px solid #9fc8e2;padding:12px 16px;min-height:44px;border-radius:0}
.reel{background:transparent;border:0;position:relative;isolation:isolate;padding:12px 0 24px}
.reel:before{content:"";position:absolute;z-index:-1;inset:20px 0;background:linear-gradient(95deg,#29e6be33,#7f57f740,#ee60c735);filter:blur(28px)}
.reel .reel-track{gap:20px;padding-block:20px;animation-duration:72s}
.reel .reel-link{display:flex;flex:0 0 226px;padding:0;gap:0;border:1px solid #abcfea85;background:linear-gradient(130deg,#132c32d9,#171c33e8);box-shadow:0 0 18px #73cedb40;border-radius:0;overflow:hidden;color:#fff}
.reel .reel-link:nth-child(3n+2){border-color:#cbb2f0;box-shadow:0 0 18px #b172df45}.reel .reel-link:nth-child(3n){border-color:#aaf3db;box-shadow:0 0 18px #64e8ba40}
.reel .reel-link img{display:block;background:#f9fbfc;width:224px;height:104px;object-fit:contain;padding:12px;border-radius:0}
.reel .reel-link span{width:100%;padding:14px 18px;text-transform:uppercase;font:700 16px/1.2 "Archivo Narrow",sans-serif;letter-spacing:.05em;opacity:1;text-align:left}
.reel .reel-link span b{float:right}
.reel .reel-link:hover,.reel .reel-link:focus-visible{outline:2px solid #fff;outline-offset:-2px;box-shadow:0 0 28px #9df5e7}
.reel.is-paused .reel-track{animation-play-state:paused}
.pdp{gap:clamp(28px,4vw,56px)}
.pdp-media{gap:18px}.pdp-stage{padding:clamp(22px,3vw,38px) 16px;background:#fff;border:2px solid #befbf2;box-shadow:-9px 0 30px #1fe0c13b,9px 0 30px #ac64ef40,0 20px 44px #0006}
.pdp-stage img{width:100%;height:auto}
.pdp-caption{font:500 12px/1.6 var(--body);letter-spacing:.035em;color:#d8e6f7}
.thumbs{gap:12px}.thumb{min-width:70px;min-height:54px;border-color:#b4c6e385}.thumb[aria-pressed=true]{border:2px solid #b4fff0;box-shadow:0 0 20px #46efd74a}
.pdp-info{gap:26px}.pdp-info h1{margin-bottom:0;line-height:1.02}
.pdp-price{padding:22px 24px;border:1px solid transparent;background:linear-gradient(110deg,#122b30,#241f3e) padding-box,linear-gradient(110deg,#70ffe0,#9381ff,#ff9bd7) border-box;box-shadow:0 0 28px #64dfd832}
.pdp-price b{font-size:clamp(48px,5vw,66px);line-height:1;color:#fff;text-shadow:0 0 20px #98fff060}
.pdp-price>span{font-size:13px;line-height:1.6;max-width:24ch;color:#d6e6f3}
.swatches{gap:10px}.swatch label{min-height:48px;padding:9px 15px 9px 9px;gap:10px;background:#101b2c;border:1px solid #8294b2;color:#eef6ff;font-size:13px}.swatch label i{width:26px;height:26px}
.swatch input:checked+label{background:#173a37;border:2px solid #a5ffe7;padding:8px 14px 8px 8px;box-shadow:0 0 19px #5fefc938}
.size-opt label{min-height:44px}
.fe-lens-step{padding-top:24px;margin-top:22px;border-top:1px solid #849ac26b}
.fe-lens-step .lo-list{gap:10px}
.fe-lens-step .lo label{padding-block:16px;border-color:#8193b063;box-shadow:none;background:#111c2b}
.fe-lens-step .lo input:checked+label{background:linear-gradient(110deg,#173a33,#242840);border-color:#a5ffe7;box-shadow:inset 3px 0 #a5ffe7,0 0 20px #6df4d02b}
.lo-top{gap:12px}.lo-price{white-space:nowrap;font-weight:700;color:#c6ffed}
.price-build{padding:24px;background:linear-gradient(115deg,#10332e,#1c2640);border-color:#9cffe4;box-shadow:0 0 25px #46efce33}
.price-build .pb-total{padding-top:16px;margin-top:14px;border-top:1px solid #acdabd70}
#pb-total{font:700 38px/1.1 "Archivo Narrow",sans-serif;color:#fff}
.pdp-info .btn.block{min-height:54px;font-size:14px;box-shadow:0 0 24px #70f4d844}
.catalog-sidebar{background:#06090f;border:1px solid #b0c5db6e;box-shadow:-6px 0 26px #64d5e828}
.catalog-sidebar-head{padding-bottom:18px;border-bottom:1px solid #fff3}.catalog-sidebar-head h2{font-size:28px;color:#fff}
.catalog-filter-group{border-bottom:1px solid #fff2;padding-block:6px}.catalog-filter-group summary{min-height:46px;display:flex;align-items:center;font-size:13px;letter-spacing:.1em;line-height:1.4;color:#fff}
.catalog-sidebar .chip{min-height:44px;padding-block:11px;font-size:13px;color:#e5edf7}
.catalog-sidebar .chip[aria-pressed=true]{color:#080d18;background:#f6faff;box-shadow:none;font-weight:700}
.catalog-sidebar .chip[aria-pressed=true]:before{background:#080d18;border-color:#080d18}
.catalog-sidebar .chip[aria-pressed=true] .n{color:#34465b}.catalog-sidebar .n{font-size:11px}
.catalog-sidebar .filter-foot{padding-top:18px;background:#06090f;border-top:1px solid #fff3}
.catalog-sidebar .reset{display:block;width:100%;min-height:44px;color:#fff;text-align:center;border:1px solid #c5d6e6;padding:11px 14px;text-decoration:none;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.catalog-sidebar .reset:hover{color:#08141a;background:#e9fff8;border-color:#a5ffe7}
.filter-top .search{border-color:#a1c2e66b}.filter-top .sort{color:#e0eaff}.filter-top{background:#09111de8}
#order-form{min-width:0}
#order-form .stepper{background:#091321f5;border:1px solid #8daece5e;box-shadow:0 5px 24px #0003;padding-inline:10px;margin-bottom:28px}
#order-form .stepper a{font-size:12px;gap:7px;color:#cfdbef;min-height:54px}
#order-form .stepper a i{border-radius:0;width:25px;height:25px}
#order-form .stepper a.current{color:#bdffee;border-bottom-color:#90ffe0}
#order-form .stepper a.done{color:#91f4d1}
#order-form .form-section{border:0;border-bottom:1px solid #96b1d146;background:transparent;padding:0 0 30px;margin:0 0 30px;scroll-margin-top:148px}
#order-form .form-section h2{font-size:28px;line-height:1.2}
#order-form .form-section header{margin-bottom:20px}
#order-form .form-section header p{font-size:14px;line-height:1.7;color:#c0d1e4}
#order-form .form-section .n{color:#b7fff0}
#order-form .fields{gap:18px}
#order-form .field>label{font-weight:600;color:#eff5ff;font-size:13px}
#order-form .field input,#order-form .field select,#order-form .rx-grid input,#order-form .rx-grid select{min-height:48px;border-color:#9db5d069;background:#0c1625;color:#fff}
#order-form input:focus,#order-form select:focus,#order-form textarea:focus{outline-color:#96ffe4}
#order-form .radio-pill label{min-height:46px;border-color:#8ea9c36b;padding:12px 15px}
#order-form .radio-pill input:checked+label{background:#163a32;color:#d5fff2;border-color:#a2ffe3}
#order-form .pay-box{border:1px solid #a5ffe382;background:linear-gradient(120deg,#11312bd9,#16223be6);padding:26px}
#co-summary{padding:28px;border:1px solid transparent;background:linear-gradient(125deg,#112e2c,#1c2140) padding-box,linear-gradient(115deg,#77ffe0,#af98ff,#ed8dcb) border-box;box-shadow:0 0 28px #56e0c336;gap:20px}
#co-summary h2{font-size:32px;color:#fff;margin:0}
#co-summary .sum-row{font-size:14px;gap:20px;padding-block:5px}
#co-summary .sum-row.total{padding-top:23px;border-top:1px solid #b4e0d86b;font-size:20px;color:#e7fff5;align-items:baseline}
#co-total{font:700 46px/1.1 "Archivo Narrow",sans-serif;color:#fff}
#co-summary .fc-box{border-top:1px solid #adc8e63d;padding-top:20px}
.site-footer{position:relative;background:linear-gradient(130deg,#071c22,#101625 55%,#211526);border-top:1px solid #a3eadf82;padding-top:52px;box-shadow:0 -14px 50px #5ae4d016}
.site-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#52efc7,#728bff,#ed83d1,#52efc7);background-size:200% 100%;animation:footer-spectrum 12s linear infinite}
.site-footer .foot-grid{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:30px}
.site-footer .foot-brand{padding-right:20px;gap:16px}
.site-footer .foot-brand p{color:#c7d6e6;font-size:13px;line-height:1.8}
.site-footer .foot-grid nav h2{font:700 20px/1.1 "Archivo Narrow",sans-serif;color:#c0ffec;letter-spacing:.055em;margin-bottom:20px}
.site-footer .foot-grid ul{gap:11px;font-size:13px;line-height:1.5}
.site-footer .foot-grid nav a{color:#dce7f6;display:inline-block;min-height:28px;text-underline-offset:5px}
.site-footer .foot-grid nav a:hover{color:#b2ffe9}
.site-footer .foot-bottom{color:#b8cce2;border-top-color:#8cb2cf3d;font-size:12px;margin-top:38px;padding-block:22px}
@keyframes footer-spectrum{to{background-position:200% 0}}
@media(min-width:1100px){.pdp{grid-template-columns:1.42fr 1fr}.pdp-media{top:94px}}
@media(max-width:1100px){.site-footer .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.site-footer .foot-brand{grid-column:1/-1;max-width:650px;padding:0}}
@media(max-width:760px){.reel-heading{align-items:start;flex-direction:column;padding-top:24px}.reel-heading h2{font-size:28px}.reel .reel-link{flex-basis:194px}.reel .reel-link img{width:192px;height:94px}.pdp-price{padding:20px}.pdp-media{position:static}.pdp-stage{padding:25px 12px}.swatch label{font-size:12px}.site-footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.site-footer .foot-grid nav h2{font-size:22px}.site-footer .foot-grid nav a{min-height:36px}#co-summary{position:static;padding:24px}#order-form .stepper{top:68px}#order-form .stepper a{font-size:11px;padding-inline:8px}.site-header .wrap{min-height:68px}}
@media(prefers-reduced-motion:reduce){.site-footer:before{animation:none}.reel .reel-track{animation:none}.reel{overflow-x:auto}.reel-heading button{display:none}.reel .reel-link{transition:none}}

/* public/assets/css/photo-theme.css */
/* Photo-driven colors, with the existing storefront layout and animations. */
:root,[data-photo-theme="purple"]{--photo-bg:#190a26;--photo-surface:#271338;--photo-header:#13081eee;--photo-accent:#b8c9d6;--photo-deep:#7840b4;--photo-glow:#60788e26;--photo-text:#f9f1ff}
[data-photo-theme="green"]{--photo-bg:#061b13;--photo-surface:#103326;--photo-header:#04160fee;--photo-accent:#b8c9d6;--photo-deep:#168557;--photo-glow:#60788e26;--photo-text:#f0fff5}
[data-photo-theme="blue"]{--photo-bg:#061627;--photo-surface:#102d4a;--photo-header:#041120ee;--photo-accent:#b8c9d6;--photo-deep:#246fb8;--photo-glow:#60788e26;--photo-text:#f0f8ff}
[data-photo-theme="black"]{--photo-bg:#060708;--photo-surface:#181b20;--photo-header:#050608ee;--photo-accent:#b8c9d6;--photo-deep:#525e70;--photo-glow:#60788e26;--photo-text:#f6f8fc}
:root{--paper:var(--photo-bg);--mist:var(--photo-surface);--accent:var(--photo-accent);--accent-dark:var(--photo-accent);--focus:var(--photo-accent)}
body{background:var(--photo-bg)!important;color:var(--photo-text);transition:background-color 1.2s ease,color 1.2s ease}
.page,.hero-show,.show-copy{background:var(--photo-bg)!important;transition:background-color 1.2s ease}
.bg-tiles{opacity:0!important}
.site-header{background:var(--photo-header)!important;border-bottom-color:var(--photo-deep)!important;box-shadow:0 6px 26px var(--photo-glow)!important;transition:background-color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}
.announce{background:var(--photo-surface)!important;border-color:var(--photo-deep);color:var(--photo-text)!important;transition:background-color 1.2s ease}.announce b{color:var(--photo-accent)!important}
.brand .brand-mark{height:30px!important;width:64px!important;flex:none;color:var(--photo-text)!important;filter:none!important}.brand-mark .logo-speed,.brand-mark .logo-bridge{color:var(--photo-accent);transition:color 1.2s ease}
.brand-wm b{font-family:var(--body)!important;background:none!important;-webkit-text-fill-color:var(--photo-text)!important;color:var(--photo-text)!important;animation:none!important;text-shadow:none!important;font-size:23px!important;font-weight:450!important;letter-spacing:-.055em!important;white-space:nowrap}
.brand-wm b em{font-weight:750;font-style:italic;color:var(--photo-text)!important}.brand-wm b small{font-size:10px;letter-spacing:0;margin-left:2px;color:var(--photo-accent)!important;-webkit-text-fill-color:var(--photo-accent)!important}
.brand-tag{color:var(--photo-accent)!important}.site-header .brand{filter:none!important}
.site-header .nav>a[aria-current],.site-header .nav>a:hover{color:var(--photo-accent)!important;border-color:var(--photo-accent)!important;background:color-mix(in srgb,var(--photo-accent) 8%,transparent)!important}
.head-search,.cart-link,.catalog-filter-toggle{background:var(--photo-surface)!important;border-color:var(--photo-deep)!important;transition:background-color 1.2s ease,border-color 1.2s ease}
.cart-count{background:var(--photo-accent)!important;color:#10151d!important}
.show-media::after{background:linear-gradient(90deg,transparent 64%,var(--photo-bg) 100%),linear-gradient(0deg,#0008,transparent 26%)!important}
.hero-kicker,.hero-pop .mono-label{color:var(--photo-accent)!important}
.hero-show h1 .impact-fast,.hero-show .hero-price{background:linear-gradient(125deg,var(--photo-accent),var(--photo-deep) 62%,var(--photo-bg))!important;border-color:var(--photo-accent)!important;box-shadow:0 0 32px var(--photo-glow)!important;transition:box-shadow 1.2s ease,border-color 1.2s ease}
.hero-show .pixel-layer i{animation:photo-pixels 7s ease-in-out infinite alternate!important;animation-delay:var(--pixel-delay)!important;background:var(--photo-accent)!important}
@keyframes photo-pixels{0%{background:var(--photo-accent);opacity:.25}50%{background:var(--photo-deep);opacity:.65}100%{background:var(--photo-bg);opacity:.4}}
.btn:not(.ghost),.fe-primary{background:linear-gradient(115deg,var(--photo-accent),color-mix(in srgb,var(--photo-accent) 60%,white))!important;color:#111923!important;border-color:var(--photo-accent)!important;box-shadow:0 0 20px var(--photo-glow)!important}
.btn.ghost,.fe-secondary{background:var(--photo-surface)!important;color:var(--photo-text)!important;border-color:var(--photo-deep)!important}
.card,.fe-card,.post-card,.tile,.hero-chart figure,.fe-size-helper,.pdp-price,.price-build,.catalog-sidebar,#co-summary,#cart-summary,.reel .reel-link{background:var(--photo-surface)!important;border-color:var(--photo-deep)!important;box-shadow:0 0 22px var(--photo-glow)!important;transition:background-color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease}
.catalog-sidebar-head,.catalog-sidebar .filter-foot,#order-form .stepper,#order-form .pay-box{background:var(--photo-surface)!important}
.swatch label,.fe-lens-step .lo label,#order-form .field input,#order-form .field select,#order-form .rx-grid input,#order-form .rx-grid select{background:var(--photo-surface)!important}
.swatch input:checked+label,.fe-lens-step .lo input:checked+label{border-color:var(--photo-accent)!important;box-shadow:inset 3px 0 var(--photo-accent),0 0 20px var(--photo-glow)!important}
.site-footer{background:linear-gradient(130deg,var(--photo-bg),var(--photo-surface))!important;border-color:var(--photo-deep)!important;transition:background-color 1.2s ease}.site-footer:before{background:linear-gradient(90deg,var(--photo-accent),var(--photo-deep),var(--photo-accent))!important}
.photo-controls{position:absolute;z-index:4;top:20px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.photo-controls>div{display:flex;gap:8px;align-items:center}.photo-controls button{min-height:42px;min-width:42px;padding:8px 13px;background:#05080ccc;border:1px solid #ffffff70;color:#fff;backdrop-filter:blur(8px);font:600 12px var(--body);cursor:pointer}.photo-controls button:hover{background:var(--photo-deep);border-color:var(--photo-accent)}
.photo-count{font:600 11px var(--body);letter-spacing:.08em;background:#05080ccc;padding:12px 14px;border:1px solid #ffffff50;white-space:nowrap}
.photo-controls button:focus-visible{outline:3px solid var(--photo-accent);outline-offset:3px}
#stripe-card{background:#f5f6f1;padding:16px;border-radius:4px}
@media(max-width:760px){.site-header .brand .brand-mark{height:22px!important;width:46px!important}.site-header .brand-wm b{font-size:18px!important}.site-header .brand-wm small{display:none!important}.site-header .wrap{gap:8px}.site-header .logo{gap:8px}.photo-controls{top:16px;left:16px;right:16px}.photo-controls button{padding-inline:11px}.photo-count{font-size:10px;padding:12px 10px}.show-media{min-width:0}.site-footer .brand-wm b{font-size:22px!important}}
@media(prefers-reduced-motion:reduce){body,.page,.hero-show,.show-copy,.site-header,*{transition:none!important}.hero-show .pixel-layer i{animation:none!important}}

/* public/assets/css/calm-motion-v2.css */
@property --photo-bg{syntax:"<color>";inherits:true;initial-value:#190a26;}
@property --photo-surface{syntax:"<color>";inherits:true;initial-value:#271338;}
@property --photo-header{syntax:"<color>";inherits:true;initial-value:#13081eee;}
@property --photo-accent{syntax:"<color>";inherits:true;initial-value:#d7a0ff;}
@property --photo-deep{syntax:"<color>";inherits:true;initial-value:#7840b4;}
@property --photo-glow{syntax:"<color>";inherits:true;initial-value:#ac58e84d;}
@property --photo-text{syntax:"<color>";inherits:true;initial-value:#f9f1ff;}
:root{transition:--photo-bg 10s ease-in-out,--photo-surface 10s ease-in-out,--photo-header 10s ease-in-out,--photo-accent 10s ease-in-out,--photo-deep 10s ease-in-out,--photo-glow 10s ease-in-out,--photo-text 10s ease-in-out;}
.show-slide{transition:opacity 6s ease-in-out!important}.show-slide img{transition:transform 24s ease-in-out!important;transform:scale(1.025)}.show-slide.is-active img{transform:scale(1)}
body,.page,.hero-show,.show-copy,.site-header,.announce,.head-search,.cart-link,.catalog-filter-toggle,.card,.fe-card,.post-card,.tile,.hero-chart figure,.fe-size-helper,.pdp-price,.price-build,.catalog-sidebar,#co-summary,#cart-summary,.reel .reel-link{transition:background-color 8s ease-in-out,color 8s ease-in-out,border-color 8s ease-in-out,box-shadow 8s ease-in-out}
.hero-show .pixel-layer{opacity:.4!important;animation-duration:45s!important}.hero-show .pixel-layer i{animation-duration:32s!important}
.impact-fast:after,.hero-price:after{animation-duration:40s!important;opacity:.45}
.collection-squares .rail-item:before{animation-duration:45s!important;filter:saturate(1.05)}
.lens-ribbon:before{animation-duration:45s!important;opacity:.6}
.site-footer:before{animation-duration:45s!important}
.card,.post-card,.faq details,.lo{--gdur:60s!important;--pdur:30s!important}
@media(prefers-reduced-motion:reduce){:root{transition:none!important}.show-slide,.show-slide img{transition:none!important}.show-slide img{transform:none}.hero-show .pixel-layer,.hero-show .pixel-layer i,.collection-squares .rail-item:before,.lens-ribbon:before,.site-footer:before{animation:none!important}}

body .hero-show .pixel-layer i{animation-duration:32s!important}body .hero-show .pixel-layer{animation-duration:45s!important;opacity:.4!important}
:root body,:root .page,:root .hero-show,:root .show-copy,:root .site-header,:root .announce,:root .head-search,:root .cart-link,:root .card,:root .fe-card,:root .hero-chart figure,:root .reel .reel-link{transition-duration:8s!important}
@media(prefers-reduced-motion:reduce){:root body,:root .page,:root .hero-show,:root .show-copy,:root .site-header,:root .announce,:root .head-search,:root .cart-link,:root .card,:root .fe-card,:root .hero-chart figure,:root .reel .reel-link{transition:none!important}}

/* public/assets/css/glitter-cutout-v3.css */
body .hero-show .impact-word,body .hero-show .hero-price b{display:block;width:94%;position:relative;z-index:2;animation:none!important;background:none!important;text-shadow:none!important;line-height:0}
body .hero-show .impact-word .glitter-cutout,body .hero-show .hero-price b .glitter-cutout{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 -1px 0 #ffffffaa) drop-shadow(0 3px 2px #111a364d)}
body .hero-show .impact-fast:before,body .hero-show .hero-price:before{display:none!important}
.silver-specks{animation:recessed-silver 30s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes recessed-silver{from{transform:translate(-2px,-1px)}50%{transform:translate(3px,2px)}to{transform:translate(-2px,-1px)}}
body .hero-show .hero-price .silver-specks{animation-direction:reverse;animation-delay:-9s}
@media(prefers-reduced-motion:reduce){.silver-specks{animation:none!important}}

body .hero-show .glitter-cutout text{font-style:normal!important;font-weight:700}body .hero-show .impact-word .glitter-cutout,body .hero-show .hero-price b .glitter-cutout{filter:drop-shadow(0 -1px 0 #ffffffaa) drop-shadow(0 3px 2px #111a364d)}

/* The recessed glitter follows the softly changing page palette. */
body .hero-show .glitter-cutout pattern>rect{fill:color-mix(in srgb,var(--photo-bg) 76%,var(--photo-accent) 24%)}
body .hero-show .silver-specks{opacity:.7}
body .hero-show .silver-specks circle[fill="#fff"],body .hero-show .silver-specks circle[fill="#f4f8ff"],body .hero-show .silver-specks circle[fill="#eff8ff"]{fill:var(--photo-accent)}
body .hero-show .silver-specks path{stroke:var(--photo-accent)}

/* public/assets/css/second-pair-v1.css */
.hero-show .hp-sub{display:grid;gap:8px}.hero-show .hp-shipping{color:var(--photo-accent);font-size:12px;font-weight:600;letter-spacing:.025em;line-height:1.5}
.second-pair{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding:36px;margin-block:38px 46px;border:1px solid #aadfdb74;background:linear-gradient(120deg,#102e2c77,#1e244377);box-shadow:0 0 28px #5ccdc017}
.second-pair-copy .eyebrow{color:#c4f9e7;font-size:11px;letter-spacing:.14em}
.second-pair h2{font:700 clamp(30px,3.5vw,46px)/1.05 "Archivo Narrow",sans-serif;letter-spacing:-.01em;color:#fff;margin:12px 0 20px}
.second-pair-copy>p:not(.eyebrow){font-size:14px;line-height:1.65;color:#dce8f2;max-width:46ch}
.second-pair-copy .second-pair-price{font-size:13px;margin-block:18px 24px}.second-pair-price strong{color:#c6fff0}
.second-pair .btn{display:inline-flex;width:auto;min-height:48px;align-items:center}
.second-pair-frames{display:grid;gap:20px}
.second-pair-frame{display:block;text-decoration:none;overflow:hidden;border:1px solid #a4cadf8f;background:#0c1729;box-shadow:0 0 22px #769ddb25}
.second-pair-frame img{display:block;width:100%;height:auto;max-height:150px;object-fit:contain;background:#f8fbfd;padding:15px}
.second-pair-frame>span{display:flex;justify-content:space-between;padding:12px 18px;color:#eef8ff;font:700 15px var(--body);letter-spacing:.05em}
.second-pair-frame:hover,.second-pair-frame:focus-visible{outline:2px solid #b8ffe7;outline-offset:3px}
@media(max-width:760px){.second-pair{grid-template-columns:1fr;padding:25px;gap:28px}.second-pair-frames{grid-template-columns:1fr 1fr;gap:12px}.second-pair-frame img{padding:12px 4px}.second-pair-frame>span{font-size:12px;padding:12px}.second-pair h2{font-size:36px}}

/* public/assets/css/winged-brand-v1.css */
:root{--brand-contrast:#16324f}
body .site-header .logo.brand .brand-mark{width:72px!important;height:24px!important;color:var(--brand-contrast)!important;filter:none!important;transition:none!important;flex-shrink:0}
body .site-footer .logo.brand .brand-mark{width:108px!important;height:28px!important;color:var(--brand-contrast)!important;filter:none!important;transition:none!important;flex-shrink:0}
body .site-header .brand-wm b,body .site-footer .brand-wm b{font-family:"Archivo",sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.015em!important;color:var(--brand-contrast)!important;-webkit-text-fill-color:currentColor!important;background:none!important;text-shadow:none!important;transition:none!important;white-space:nowrap;text-transform:uppercase}
body .site-header .brand-wm b{font-size:20px!important}body .site-footer .brand-wm b{font-size:25px!important}
body .site-header .brand-wm b small,body .site-footer .brand-wm b small{color:inherit!important;-webkit-text-fill-color:currentColor!important;font:500 9px var(--body)!important;letter-spacing:0!important;margin-left:2px;text-transform:none}
body .site-header .logo.brand,body .site-footer .logo.brand{gap:10px!important}
.brand-tag{display:none!important}
@media(max-width:1100px){body .site-header .logo.brand .brand-mark{width:72px!important;height:21px!important}body .site-header .brand-wm b{font-size:20px!important}}
@media(max-width:760px){body .site-header .logo.brand .brand-mark{width:58px!important;height:18px!important}body .site-header .brand-wm b{font-size:16px!important}body .site-header .logo.brand{gap:7px!important}body .site-header .brand-wm b small{display:none!important}body .site-footer .logo.brand{flex-wrap:wrap}body .site-footer .brand-wm b{font-size:24px!important}}
@media(max-width:390px){body .site-header .logo.brand .brand-mark{width:46px!important;height:16px!important}body .site-header .brand-wm b{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){body .site-header .brand-mark,body .site-footer .brand-mark,body .site-header .brand-wm b,body .site-footer .brand-wm b{transition:none!important}}

/* A consistent navy mark on a light backing keeps contrast on every photo palette. */
body .site-header .logo.brand,body .site-footer .logo.brand{align-items:center!important;background:#f5f7fa!important;border:1px solid #dbe3eb!important;border-radius:6px!important;padding:8px 10px!important;box-shadow:none!important}
body .site-header .brand-mark,body .site-footer .brand-mark{object-fit:contain;overflow:visible}
@media(max-width:760px){body .site-header .logo.brand{padding:6px!important}body .site-footer .logo.brand{flex-wrap:nowrap!important}}

/* Keep the bold wordmark and shopping controls within the header. */
body .site-header .wrap{gap:12px!important}
body .site-header .nav>a{padding-inline:8px}
@media(max-width:1280px){body .site-header .menu-btn{display:inline-flex}body .site-header .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 16px;gap:2px}body .site-header .nav.open{display:flex}body .site-header .nav>a{border-radius:var(--radius);padding:12px 20px}}
@media(max-width:760px){body .site-header .wrap{gap:8px!important}}

/* public/assets/css/hero-jewel-pixels-v1.css */
@property --hero-jewel{syntax:"<color>";inherits:false;initial-value:#0b4698}
/* Saturated pixels move independently behind the two hero labels. */
body .hero-show h1 .impact-fast,body .hero-show .hero-price{background:linear-gradient(125deg,#064a3a,#123b85 45%,#762048 78%,#80500d)!important;border-color:#456680!important;box-shadow:inset 0 1px #ffffff40,0 8px 26px #00000045!important}
body .hero-show .impact-fast .pixel-layer,body .hero-show .hero-price .pixel-layer{opacity:1!important;animation:premium-pixel-drift 24s ease-in-out infinite alternate!important}
body .hero-show .impact-fast .pixel-layer i,body .hero-show .hero-price .pixel-layer i{background:var(--hero-jewel)!important;opacity:1!important;animation:jewel-pixel-colors 18s ease-in-out infinite,pixel-soft-shuffle 16s ease-in-out infinite alternate!important;animation-delay:var(--pixel-delay),var(--pixel-delay)!important;box-shadow:inset 1px 1px #ffffff26,inset -1px -1px #00000035!important}
body .hero-show .hero-price .pixel-layer i{animation-direction:reverse,alternate-reverse!important}
@keyframes jewel-pixel-colors{0%,100%{--hero-jewel:#0b4698}25%{--hero-jewel:#007458}50%{--hero-jewel:#982347}75%{--hero-jewel:#91600a}}
body .hero-show .hero-price small{color:#f6f8fc!important;-webkit-text-fill-color:#f6f8fc!important;text-shadow:0 2px 3px #0009!important}
body .hero-show .glitter-cutout pattern>rect{fill:#e8eef5!important}
body .hero-show .silver-specks circle{fill:#71869e!important}
body .hero-show .silver-specks path{stroke:#fff!important}
body .hero-show .impact-fast:after,body .hero-show .hero-price:after{opacity:.1!important}
@media(prefers-reduced-motion:reduce){body .hero-show .impact-fast .pixel-layer,body .hero-show .hero-price .pixel-layer,body .hero-show .impact-fast .pixel-layer i,body .hero-show .hero-price .pixel-layer i{animation:none!important;transform:none!important}body .hero-show .pixel-layer i:nth-child(4n+1){--hero-jewel:#0b4698}body .hero-show .pixel-layer i:nth-child(4n+2){--hero-jewel:#007458}body .hero-show .pixel-layer i:nth-child(4n+3){--hero-jewel:#982347}body .hero-show .pixel-layer i:nth-child(4n){--hero-jewel:#91600a}}

.fe-home main{--home-ink:#142f49;--home-paper:#fffefa;--home-line:#dbe3ea}
.fe-home .hero-show{min-height:0}
.fe-home .show-copy{padding-block:clamp(28px,4vw,52px)}
.fe-home .hero-copy{gap:20px}
.fe-home .hero-copy .hp-sub{font-size:17px;line-height:1.55;margin:0}
.fe-home .hero-copy .hp-shipping{font-size:14px;margin-top:5px}
.fe-home .hero-copy .btn-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin:2px 0 0}
.fe-home .hero-copy .btn-row .btn{min-height:48px}
.fe-home .hero-copy .hero-pop{display:flex;gap:8px;flex-wrap:wrap;margin-top:0}
.fe-home .hero-pop .mono-label{width:100%;margin-bottom:0}
.fe-home .hero-pop a{padding:8px 12px;min-height:36px;border-radius:7px}
.fe-home .hero-copy .hero-search{margin:0}
.fe-home .hero-show .pixel-layer{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.fe-home .hero-show.is-motion-paused .pixel-layer,.fe-home .hero-show.is-motion-paused .pixel-layer i,.fe-home .hero-show.is-motion-paused .silver-specks{animation-play-state:paused!important}
.fe-home .hero-show .photo-controls{display:flex!important;position:absolute;left:20px;right:20px;top:auto!important;bottom:18px;transform:none!important;align-items:center;justify-content:space-between;gap:10px;z-index:5;padding:0;background:none;border:0}
.fe-home .photo-controls>div{display:flex;gap:7px}
.fe-home .photo-controls button{min-width:42px;min-height:42px;padding:8px 12px;border:1px solid #ffffff66;border-radius:8px;background:#112438d9;color:#fff;font-size:12px;cursor:pointer}
.fe-home .photo-controls .photo-count{background:#112438d9;color:#fff;border-radius:8px;padding:9px 12px;font-size:11px;letter-spacing:.08em}
.fe-home .home-section{padding-block:clamp(36px,5vw,66px)}
.fe-home .home-section h2,.fe-home .home-section h3{font-family:Archivo,sans-serif;text-transform:none;letter-spacing:-.025em}
.fe-home .home-section h2{font-size:clamp(29px,3.5vw,42px);line-height:1.13;text-wrap:balance}
.fe-home .home-section h3{font-size:22px;line-height:1.25}
.fe-home .section-head{align-items:end;gap:20px}
.fe-home .section-head .lede{max-width:58ch;font-size:17px;line-height:1.6;margin-top:12px}
.fe-home .home-answer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fe-home .home-answer{display:flex;flex-direction:column;gap:13px;padding:24px;background:var(--home-paper);border:1px solid var(--home-line);border-radius:16px;color:var(--home-ink);box-shadow:0 6px 24px #00000012}
.fe-home .home-answer .eyebrow{font-size:11px;color:#557086;margin:0}
.fe-home .home-answer h3{font-size:21px;margin:0}
.fe-home .home-answer p{font-size:15px;line-height:1.7;margin:0}
.fe-home .home-answer>a{margin-top:auto;padding-top:7px;color:#16517e;text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:700}
.fe-home .home-collections .cat-grid{gap:18px}
.fe-home .home-collections .tile{border-radius:16px;overflow:hidden;box-shadow:none!important}
.fe-home .home-collections .tile h3{font-family:Archivo,sans-serif}
.fe-home .home-featured .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fe-home .home-featured .card,.fe-home .home-featured .fe-card{border-radius:16px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.fe-home .home-featured .card:hover,.fe-home .home-featured .fe-card:hover{transform:translateY(-3px)}
.fe-home .home-featured .card-body{padding:20px}
.fe-home .home-featured .card-top h3{font-family:Archivo,sans-serif}
.fe-home .home-fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center;padding:clamp(24px,4vw,44px);background:var(--home-paper);border:1px solid var(--home-line);border-radius:20px;color:var(--home-ink)}
.fe-home .home-fit h2{font-family:Archivo,sans-serif;font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.035em;margin:12px 0 18px;text-transform:none}
.fe-home .home-fit p{line-height:1.7;margin:14px 0;font-size:16px;max-width:53ch}
.fe-home .home-fit .eyebrow{color:#557086}
.fe-home .home-fit a{color:#16517e;text-underline-offset:3px;font-weight:600}
.fe-home .home-fit-graphic{margin:0;padding:24px;border-radius:16px;background:#edf3f6;min-width:0}
.fe-home .home-fit-graphic svg{display:block;width:100%;height:auto;max-width:440px;margin:auto}
.fe-home .home-fit-graphic figcaption{text-align:center;color:#36536b;font-size:13px;line-height:1.55;margin-top:12px}
.fe-home .home-lens-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fe-home .home-lens{padding:26px;border:1px solid var(--home-line);border-radius:16px;background:var(--home-paper);color:var(--home-ink)}
.fe-home .home-lens svg{width:46px;height:46px;color:#21646e;margin-bottom:16px}
.fe-home .home-lens h3{margin:0 0 12px}
.fe-home .home-lens p{font-size:15px;line-height:1.65;margin:0}
.fe-home .home-lens b{display:block;font-size:14px;color:#21646e;margin-top:16px}
.fe-home .home-order .steps{gap:20px}
.fe-home .home-order .step{padding:26px;border:1px solid var(--home-line);border-radius:16px;background:var(--home-paper);color:var(--home-ink)}
.fe-home .home-order .step p{line-height:1.65;font-size:15px}
.fe-home .home-order .step-no{background:#142f49;color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;border:0}
.fe-home .home-rx-note{margin-top:24px;padding:18px 22px;border:1px solid #ffffff44;border-radius:12px;line-height:1.7;font-size:15px}
.fe-home .home-rx-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fe-home .home-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.fe-home .home-state{display:flex;gap:14px;align-items:center;padding:20px;border:1px solid var(--home-line);background:var(--home-paper);border-radius:14px;text-decoration:none;color:var(--home-ink);transition:transform .2s}
.fe-home .home-state:hover{transform:translateY(-3px)}
.fe-home .home-state b{display:grid;place-items:center;font-size:17px;width:44px;height:44px;background:#edf3f6;border-radius:10px}
.fe-home .home-state strong{display:block;font-size:17px}
.fe-home .home-state small{display:block;font-size:12px;color:#557086;margin-top:3px}
.fe-home .home-guides .post-card{border-radius:16px;box-shadow:none!important;overflow:hidden}
.fe-home .home-guides .post-body h3{font-family:Archivo,sans-serif;font-size:22px;line-height:1.25}
.fe-home .home-guides .post-body p{line-height:1.6}
.fe-home .home-faq .faq{border-radius:16px;overflow:hidden}
.fe-home .home-faq details{background:var(--home-paper)!important;color:var(--home-ink);animation:none!important;box-shadow:none!important;border-color:var(--home-line)!important}
.fe-home .home-faq summary{font-size:18px;padding:23px;min-height:64px}
.fe-home .home-faq .answer{padding:0 23px 23px;font-size:16px;line-height:1.75}
.fe-home .home-faq .answer a{color:#16517e;text-underline-offset:3px}
.fe-home .home-primary{background:#eaf0f5!important;color:#142f49!important;border-color:#eaf0f5!important}
.fe-home :focus-visible{outline:3px solid #c98d35;outline-offset:4px}
@media(max-width:1100px){.fe-home .home-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fe-home .hero-copy .hp-sub{font-size:15px}.fe-home .hero-copy .btn-row{grid-template-columns:1fr}.fe-home .hero-copy .btn-row .btn{min-height:44px}}
@media(max-width:760px){.fe-home .show-copy{padding:28px 22px 34px}.fe-home .hero-copy .btn-row{grid-template-columns:1fr 1fr}.fe-home .hero-copy .btn-row .btn{font-size:12px;padding:12px 9px}.fe-home .hero-copy .hp-sub{font-size:16px}.fe-home .hero-copy .hp-shipping{font-size:13px}.fe-home .home-featured .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fe-home .home-featured .card-body{padding:16px 12px}.fe-home .home-answer-grid,.fe-home .home-lens-grid{grid-template-columns:1fr}.fe-home .home-fit{grid-template-columns:1fr;gap:24px}.fe-home .home-states{grid-template-columns:repeat(2,minmax(0,1fr))}.fe-home .home-order .steps{grid-template-columns:1fr}.fe-home .section-head{align-items:start;flex-direction:column}.fe-home .home-state{padding:14px;gap:10px}.fe-home .home-state strong{font-size:15px}.fe-home .home-state b{width:36px;height:36px}.fe-home .photo-controls .photo-count{display:none}.fe-home .photo-controls{left:14px!important;bottom:12px!important}.fe-home .photo-controls button{min-height:40px;padding:7px 10px}.fe-home .home-fit-graphic{padding:16px}}
@media(max-width:360px){.fe-home .home-featured .grid,.fe-home .home-states{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fe-home .card,.fe-home .home-state{transition:none!important;transform:none!important}.fe-home .show-slide,.fe-home .show-slide img{transition:none!important}.fe-home .hero-show .pixel-layer,.fe-home .hero-show .pixel-layer i,.fe-home .silver-specks{animation:none!important}}


/* Focused shopping pages for prescription type and complete-pair budget. */
.home-intent-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.home-intent-nav a{display:inline-flex;align-items:center;min-height:44px;padding:12px 18px;border:1px solid #ffffff66;border-radius:999px;color:inherit;text-decoration:none;font-size:14px;font-weight:600}.home-intent-nav a:hover{background:#ffffff12}
.fe-intent main{--intent-ink:#142f49;--intent-paper:#fffefa;--intent-line:#dbe3ea;padding-bottom:44px}.fe-intent .intent-hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px;border-radius:22px;background:#142f49;color:#fff;padding:clamp(24px,4vw,48px);margin:22px 0 32px}.fe-intent .intent-hero h1{font-family:Archivo,sans-serif;font-size:clamp(34px,4.1vw,56px);line-height:1.1;letter-spacing:-.035em;color:#fff;text-transform:none;margin:16px 0 22px;text-wrap:balance}.fe-intent .intent-hero .lede{font-size:19px;line-height:1.65;color:#e0eaf2;max-width:52ch}.fe-intent .intent-hero .eyebrow{color:#cbd9e5}.fe-intent .intent-hero .btn-row{margin-top:24px;gap:12px}.fe-intent .intent-hero .btn{background:#eaf0f5!important;color:#142f49!important;border-color:#eaf0f5!important}.fe-intent .intent-hero .btn.ghost{background:transparent!important;color:#fff!important;border-color:#ffffff66!important}.fe-intent .intent-hero img{display:block;width:100%;height:auto;border-radius:16px;background:#fff}.fe-intent .intent-section{margin:44px 0}.fe-intent .intent-section h2{font-family:Archivo,sans-serif;font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-.025em;text-transform:none}.fe-intent .intent-section h3{font-family:Archivo,sans-serif;font-size:22px;line-height:1.25;text-transform:none}.fe-intent .intent-section .lede{font-size:17px;line-height:1.65;max-width:65ch}.fe-intent .intent-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.fe-intent .intent-grid .card,.fe-intent .intent-grid .fe-card{border-radius:16px;overflow:hidden}.fe-intent .intent-paper{padding:clamp(22px,4vw,40px);border-radius:18px;background:var(--intent-paper);color:var(--intent-ink);border:1px solid var(--intent-line)}.fe-intent .intent-paper p{font-size:17px;line-height:1.75;max-width:75ch;margin:16px 0}.fe-intent .intent-paper a{color:#16517e;text-underline-offset:3px}.fe-intent .intent-paper h2{color:var(--intent-ink);margin-bottom:18px}.fe-intent .intent-paper ul,.fe-intent .intent-paper ol{line-height:1.75;padding-left:1.3em;display:grid;gap:10px}.fe-intent .intent-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.fe-intent .intent-price{padding:24px;border:1px solid var(--intent-line);border-radius:16px;background:var(--intent-paper);color:var(--intent-ink)}.fe-intent .intent-price>strong{display:block;font-family:Archivo,sans-serif;font-size:40px;line-height:1.1;letter-spacing:-.035em}.fe-intent .intent-price h3{margin:16px 0 12px}.fe-intent .intent-price p{font-size:15px;line-height:1.65}.fe-intent .intent-note{font-size:15px;line-height:1.7;max-width:80ch}.fe-intent .intent-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fe-intent .intent-duo .intent-paper{height:100%}.fe-intent .intent-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.fe-intent .intent-links a{padding:12px 16px;border:1px solid #ffffff55;border-radius:10px;color:inherit;text-decoration:none;min-height:44px}.fe-intent .faq details{background:var(--intent-paper)!important;color:var(--intent-ink);box-shadow:none!important;animation:none!important;border-color:var(--intent-line)!important}.fe-intent .faq{border-radius:16px;overflow:hidden}.fe-intent .faq summary{font-size:18px;padding:22px}.fe-intent .faq .answer{padding:0 22px 22px;line-height:1.75}.fe-intent .faq a{color:#16517e}.fe-intent :focus-visible{outline:3px solid #c98d35;outline-offset:4px}@media(max-width:760px){.fe-intent .intent-hero{grid-template-columns:1fr;gap:24px}.fe-intent .intent-hero img{max-width:500px}.fe-intent .intent-prices,.fe-intent .intent-duo{grid-template-columns:1fr}.fe-intent .intent-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fe-intent .intent-section .section-head{flex-direction:column;align-items:start;gap:16px}.home-intent-nav a{font-size:13px}}@media(max-width:360px){.fe-intent .intent-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.fe-intent .fe-card{transition:none!important}}