:root {
  color-scheme: light;
  --char: #171717;
  --char-2: #232323;
  --green: #1e9e63;
  --green-dk: #177a4d;
  --page: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f1f1ed;
  --tile: #f4f4f2;
  --ink: #171717;
  --ink-2: #55554f;
  --muted: #8b8b84;
  --grid: #e8e7e2;
  --axis: #d2d1cb;
  --ring: rgba(23, 23, 23, 0.09);
  --good: #1e9e63;
  --good-bg: rgba(30, 158, 99, 0.09);
  --warn: #b57e00;
  --crit: #c0392b;
  --crit-bg: rgba(192, 57, 43, 0.08);
  --shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 8px 24px rgba(23, 23, 23, 0.05);
  --ray: #b08900;
  --iclear: #f8fbff;
  --iuv: #4a4a4a;
  --ipol: #2b2b2b;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0e0e0e;
    --surface: #181818;
    --surface-2: #212121;
    --tile: #232323;
    --ink: #fff;
    --ink-2: #c6c5bd;
    --muted: #8b8b84;
    --grid: #292928;
    --axis: #3a3a37;
    --ring: rgba(255, 255, 255, 0.1);
    --green: #2fbf7b;
    --green-dk: #1e9e63;
    --good: #2fbf7b;
    --good-bg: rgba(47, 191, 123, 0.12);
    --warn: #e0a020;
    --crit: #e06559;
    --crit-bg: rgba(224, 101, 89, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --ray: #e0a020;
    --iclear: #dfe6ee;
    --iuv: #5a5a5a;
    --ipol: #3a3a3a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e0e0e;
  --surface: #181818;
  --surface-2: #212121;
  --tile: #232323;
  --ink: #fff;
  --ink-2: #c6c5bd;
  --muted: #8b8b84;
  --grid: #292928;
  --axis: #3a3a37;
  --ring: rgba(255, 255, 255, 0.1);
  --green: #2fbf7b;
  --green-dk: #1e9e63;
  --good: #2fbf7b;
  --good-bg: rgba(47, 191, 123, 0.12);
  --warn: #e0a020;
  --crit: #e06559;
  --crit-bg: rgba(224, 101, 89, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --ray: #e0a020;
  --iclear: #dfe6ee;
  --iuv: #5a5a5a;
  --ipol: #3a3a3a;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--page);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--green-dk);
}
:root[data-theme="dark"] a {
  color: var(--green);
}
.wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 22px;
}
.pad {
  padding-bottom: 250px;
}

.logo {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: middle;
}

/* ---------- gate ---------- */
#gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--char);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
#gate .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0.32;
  filter: grayscale(0.2);
}
#gate .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(23, 23, 23, 0.72),
    rgba(23, 23, 23, 0.94)
  );
}
.gatebox {
  position: relative;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.gatebox .logo {
  height: 122px;
  margin-bottom: 9px;
}
.gatebox .tag {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 30px;
  font-style: italic;
}
.gatebox h1 {
  margin: 0 0 7px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gatebox p {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}
.gatebox input {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gatebox input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.gatebox button {
  width: 100%;
  margin-top: 11px;
  padding: 14px;
  border-radius: 8px;
  border: 0;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.gatebox button:hover {
  background: var(--green-dk);
}
.gateerr {
  margin-top: 12px;
  font-size: 13px;
  color: #ff9d94;
  min-height: 19px;
}
.gatefoot {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.8;
}
.gatefoot a {
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--char);
  color: #fff;
  overflow: hidden;
}
.hero .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  opacity: 0.46;
}
.hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(23, 23, 23, 0.94) 0%,
    rgba(23, 23, 23, 0.8) 46%,
    rgba(23, 23, 23, 0.4) 100%
  );
}
.heroin {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  padding: 18px 22px 56px;
  min-height: 430px;
}
.herotop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hero .logo {
  height: 50px;
}
.hero h1 {
  margin: 34px 0 10px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 11ch;
}
.hero .lede {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.74);
  max-width: 46ch;
  line-height: 1.6;
}
.hero .lede em {
  color: #fff;
  font-style: italic;
}
.certs {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chipdark {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.8);
}
.themebtn {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- section headings ---------- */
.sec {
  margin: 36px 0 16px;
}
.sec h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.sec p {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.6;
}
.card {
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}

/* ---------- lens cards ---------- */
.lenscards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.lc {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  box-shadow: var(--shadow);
  transition:
    transform 0.14s,
    border-color 0.14s;
}
.lc:hover {
  transform: translateY(-2px);
  border-color: var(--axis);
}
.lc[aria-pressed="true"] {
  border-color: var(--green);
  box-shadow:
    0 0 0 2px var(--green),
    var(--shadow);
}
.lc .ph {
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--grid);
}
.lc .ph svg {
  width: 100%;
  height: 100%;
  max-height: 94px;
  overflow: visible;
}
.ph-A {
  background: linear-gradient(160deg, #f4f7fa, #e9eef4);
}
.ph-B {
  background: linear-gradient(160deg, #f2f2f0, #e4e4e1);
}
.ph-C {
  background: linear-gradient(160deg, #eeeeec, #dedede);
}
.ph-D {
  background: linear-gradient(160deg, #eaf0fa, #f7ece6);
}
:root[data-theme="dark"] .ph-A {
  background: linear-gradient(160deg, #1f2429, #191d21);
}
:root[data-theme="dark"] .ph-B {
  background: linear-gradient(160deg, #212120, #191918);
}
:root[data-theme="dark"] .ph-C {
  background: linear-gradient(160deg, #1e1e1e, #171717);
}
:root[data-theme="dark"] .ph-D {
  background: linear-gradient(160deg, #1b2030, #2a1f1a);
}
.lc .bd {
  padding: 13px 15px 15px;
}
.lc .nm {
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lc .ds {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}
.lc .pr {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 650;
  color: var(--green-dk);
}
:root[data-theme="dark"] .lc .pr {
  color: var(--green);
}
.lc .pr span {
  color: var(--muted);
  font-weight: 400;
}
.lensdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--ring);
}
.lensreset {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.chip:hover {
  border-color: var(--axis);
}
.chip[aria-pressed="true"] {
  background: var(--char);
  color: #fff;
  border-color: var(--char);
}
:root[data-theme="dark"] .chip[aria-pressed="true"] {
  background: #fff;
  color: var(--char);
  border-color: #fff;
}
.chiplbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- price matrix ---------- */
.pm {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.pm th,
.pm td {
  padding: 11px 10px;
  text-align: right;
  border-bottom: 1px solid var(--grid);
}
.pm th:first-child,
.pm td:first-child {
  text-align: left;
}
.pm thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--axis);
  white-space: nowrap;
}
.pm thead th.on {
  background: var(--char);
  color: #fff;
  border-radius: 9px 9px 0 0;
}
.pm td.on {
  background: var(--surface-2);
  font-weight: 700;
}
.pm tbody tr:last-child td {
  border-bottom: 0;
}
.pm .lens {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}
.pm .rrp {
  color: var(--muted);
  font-size: 12.5px;
}
.bandnote {
  margin-top: 13px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 9px;
  padding: 10px 13px;
}

/* ---------- rules ---------- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.rule .n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.rule b {
  color: var(--ink);
}

/* ---------- catalogue ---------- */
.modelhead {
  font-size: 19px;
  font-weight: 650;
  margin: 30px 0 12px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}
.modelhead .sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.grp {
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 16px;
  margin-bottom: 13px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.grphd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ring);
}
.grphd .nm {
  font-size: 15.5px;
  font-weight: 650;
}
.grphd .st {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.grphd .st b {
  color: var(--ink);
}
.grphd.bad {
  background: var(--crit-bg);
}
.grphd.ok {
  background: var(--good-bg);
}
table.cat {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
table.cat th,
table.cat td {
  padding: 11px 16px;
  text-align: right;
  border-bottom: 1px solid var(--grid);
  vertical-align: middle;
}
table.cat th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--axis);
}
table.cat th:first-child,
table.cat td:first-child,
table.cat th:nth-child(2),
table.cat td:nth-child(2) {
  text-align: left;
}
table.cat tbody tr:last-child td {
  border-bottom: 0;
}
table.cat tbody tr:hover {
  background: var(--surface-2);
}
table.cat tbody tr.hide {
  display: none;
}
.thumb {
  width: 78px;
  height: 54px;
  border-radius: 9px;
  background: var(--tile);
  object-fit: cover;
  display: block;
  border: 1px solid var(--ring);
  cursor: zoom-in;
}
.thumb.noimg {
  position: relative;
}
.thumb.noimg::after {
  content: "SALUS";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: var(--tile);
  border-radius: 8px;
}
.skucell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.skucell .s {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 14px;
}
.skucell .l {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
input.qty {
  width: 110px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--axis);
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
input.qty:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
input.qty.bad {
  border-color: var(--crit);
  background: var(--crit-bg);
}
.line {
  font-weight: 700;
}
.msg {
  font-size: 11.5px;
  margin-top: 4px;
}
.msg.bad {
  color: var(--crit);
}

/* ---------- quote + certs ---------- */
.quote {
  background: var(--char);
  color: #fff;
  border-radius: 16px;
  padding: 30px 34px;
  margin: 30px 0;
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}
.quote .q {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  max-width: 62ch;
  letter-spacing: -0.01em;
}
.quote .who {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 12px;
  letter-spacing: 0.03em;
}
.certstrip {
  text-align: center;
  padding: 26px 0 6px;
}
.certstrip img {
  max-width: min(760px, 100%);
  height: auto;
  opacity: 0.85;
}
:root[data-theme="dark"] .certstrip img {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}
.certstrip .cap {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- bar ---------- */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--char);
  color: #fff;
  box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.24);
}
.barin {
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.stat .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.stat .v {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.stat .v.sm {
  font-size: 16px;
  font-weight: 650;
}
.cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  padding: 13px 24px;
  border-radius: 10px;
  border: 0;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  background: var(--green-dk);
}
.btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nudge {
  font-size: 12.5px;
  color: #ffdc9b;
  background: rgba(250, 178, 25, 0.15);
  padding: 8px 13px;
  border-radius: 8px;
}
.blockers {
  font-size: 12.5px;
  color: #ffb4ab;
  background: rgba(255, 120, 110, 0.13);
  padding: 8px 13px;
  border-radius: 8px;
}

/* ---------- form + footer ---------- */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 15px;
}
label.f {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.fgrid input,
.fgrid select,
textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--axis);
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}
textarea {
  min-height: 88px;
  resize: vertical;
}
.req::after {
  content: " *";
  color: var(--crit);
}
.ok-panel {
  background: var(--good-bg);
  border: 1px solid var(--good);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
}
.ok-panel h2 {
  margin: 0 0 8px;
}
.sitefoot {
  background: var(--char);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 44px;
  padding: 34px 0 40px;
}
.sitefoot .in {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.9;
}
.sitefoot .logo {
  height: 17px;
}
.sitefoot a {
  color: rgba(255, 255, 255, 0.82);
}
@media print {
  .bar,
  .themebtn,
  #gate,
  .lenscards,
  .lensreset,
  .quote,
  .sitefoot .logo {
    display: none;
  }
  .pad {
    padding-bottom: 20px;
  }
  .hero {
    background: #fff;
    color: #000;
  }
  .hero .bg,
  .hero .veil,
  .hero .logo {
    display: none;
  }
  .hero h1 {
    color: #000;
  }
}
@media (max-width: 640px) {
  .hero h1 {
    font-size: 31px;
    max-width: none;
  }
  .quote {
    padding: 24px;
  }
  .quote .q {
    font-size: 16.5px;
  }
  table.cat th,
  table.cat td {
    padding: 10px;
  }
  .thumb {
    width: 60px;
    height: 42px;
  }
}