/*==========================================================================
  WIDMOvr — main stylesheet
  ---------------------------------------------------------------------------
  No framework, no build step. Organised as: fonts → tokens → reset → base →
  layout → components → WooCommerce → utilities.

  Deliberately NOT wrapped in @layer: unlayered CSS outranks layered CSS, and
  this sheet has to win against plugin styles (TM Extra Product Options,
  Contact Form 7) that ship unlayered.
==========================================================================*/

/*--------------------------------------------------------------------------
  1. Fonts — self-hosted Inter (SIL OFL). latin-ext carries the Polish
     diacritics; the browser only fetches it when the page needs them.
--------------------------------------------------------------------------*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*--------------------------------------------------------------------------
  2. Design tokens
--------------------------------------------------------------------------*/
:root {
  /* Surfaces */
  --ink-950: #0a0c10;
  --ink-900: #0f131a;
  --ink-800: #141821;
  --ink-700: #1c212c;
  --paper: #ffffff;
  --paper-2: #f5f6f8;
  --paper-3: #eceef2;

  /* Text */
  --text: #11141a;
  --text-mut: #5b6470;
  --text-on-dark: #f2f4f7;
  --text-on-dark-mut: #9aa4b2;

  /* Accent — one variable drives every call to action on the site. */
  --accent: #2b59ff;
  --accent-hover: #1f47d8;
  --accent-light: #5b82ff;
  --accent-wash: #eef2ff;

  /* The signature: WIDMO means spectrum. Used as a hairline, never behind text. */
  --spectrum: linear-gradient(90deg, #6c3bff 0%, #00c2d1 50%, #ffb020 100%);

  /* Status */
  --ok: #157f4b;
  --warn: #b26b00;
  --err: #c42b2b;
  --err-wash: #fdecec;

  /* Lines */
  --line: #e3e6eb;
  --line-strong: #cbd1da;
  --line-on-dark: #262d3a;

  /* Type scale — fluid, 1.200 ratio at the small end. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.2vw + 1rem, 1.125rem);
  --fs-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  --fs-xl: clamp(1.5rem, 1vw + 1.2rem, 2rem);
  --fs-2xl: clamp(1.875rem, 2vw + 1.3rem, 2.75rem);
  --fs-3xl: clamp(2.25rem, 3.5vw + 1.3rem, 4rem);

  /* Spacing — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(16, 20, 27, 0.06), 0 2px 8px rgba(16, 20, 27, 0.05);
  --shadow-2: 0 4px 12px rgba(16, 20, 27, 0.08), 0 16px 32px rgba(16, 20, 27, 0.08);

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 180ms;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky headers must not cover the target of an in-page link. */
  scroll-padding-top: 6rem;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  /* Short pages (empty cart, login) left the footer floating mid-screen with
     white below it. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main { flex: 1 0 auto; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*--------------------------------------------------------------------------
  4. Base typography
--------------------------------------------------------------------------*/
h1, h2, h3, h4 {
  line-height: 1.12;
  font-weight: 640;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.032em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

.lede {
  font-size: var(--fs-md);
  color: var(--text-mut);
  line-height: 1.55;
  max-width: 60ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut);
}

/* The spectrum hairline — the theme's one decorative signature. */
.spectrum-rule {
  display: block;
  width: 56px;
  height: 3px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--spectrum);
}

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

.skip-link:focus {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 999;
  width: auto; height: auto;
  clip: auto;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-950);
  color: #fff;
  border-radius: var(--r-sm);
}

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

.container--narrow { max-width: 760px; }
.container--wide { max-width: 1440px; }

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Full-bleed dark bands. */
.section--dark {
  background: var(--ink-950);
  color: var(--text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark .lede,
.section--dark .eyebrow { color: var(--text-on-dark-mut); }
.section--dark a { color: var(--accent-light); }

.section--muted { background: var(--paper-2); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  max-width: 68ch;
}

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/*--------------------------------------------------------------------------
  6. Buttons
--------------------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* 44px minimum touch target. */
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Inline icons carry no width of their own; in a full-width button on a phone
   the arrow stretched to fill the spare space. */
.btn svg { width: 1.125em; height: 1.125em; flex: 0 0 auto; }

.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--paper-3);
  color: var(--text-mut);
  cursor: not-allowed;
}

.btn--lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { background: var(--paper-2); border-color: var(--text-mut); color: var(--text); }

.btn--on-dark {
  background: #fff;
  color: var(--ink-950);
}
.btn--on-dark:hover { background: var(--paper-2); color: var(--ink-950); }

.btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/*--------------------------------------------------------------------------
  7. Header
--------------------------------------------------------------------------*/
.topbar {
  background: var(--ink-950);
  color: var(--text-on-dark-mut);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 36px;
  text-align: center;
}
.topbar a { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Nearly opaque: at 0.86 the bar turned muddy grey over the dark hero,
     steps section and footer. */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 68px;
}

.site-brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-brand img,
.site-brand svg { height: 30px; width: auto; }
.site-brand__text {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}

.primary-nav { margin-inline-start: auto; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
}
.primary-nav a {
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  position: relative;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--spectrum);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.icon-btn:hover { background: var(--paper-2); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.cart-count[hidden] { display: none; }

/* Language switcher */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-mut);
  text-decoration: none;
}
.lang-switch a[aria-current='true'] { background: var(--paper-3); color: var(--text); }
.lang-switch a:hover { background: var(--paper-2); }

/* Mobile drawer */
.nav-toggle { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  padding: var(--sp-5) var(--gutter) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  visibility: hidden;
}
.drawer[data-open='true'] { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.drawer ul { list-style: none; }
.drawer > nav > ul > li + li { border-top: 1px solid var(--line); }
.drawer > nav a {
  display: block;
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 900px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; margin-inline-start: auto; }
  .header-actions { margin-inline-start: 0; }
}

/*--------------------------------------------------------------------------
  8. Hero — static markup, no slider, no layout shift
--------------------------------------------------------------------------*/
.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--text-on-dark);
  overflow: hidden;
}

/* Product photo, full-bleed on the right 68%, fading into the ink background
   under the copy. The box is absolutely positioned and the image fills it with
   object-fit, so nothing shifts on load. */
.hero {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 44vw, 700px);
}
.hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 68%;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink-950) 0%, rgba(10, 12, 16, 0.82) 18%, rgba(10, 12, 16, 0.25) 48%, rgba(10, 12, 16, 0) 70%),
    linear-gradient(0deg, rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0) 28%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__copy { max-width: 520px; }

.hero h1 { color: #fff; max-width: 16ch; }
.hero__lede {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--text-on-dark-mut);
  max-width: 48ch;
}
.hero__cta { margin-top: var(--sp-6); }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-mut);
}
.hero__proof li { list-style: none; display: flex; align-items: center; gap: var(--sp-2); }
.hero__proof svg { width: 16px; height: 16px; color: var(--accent-light); flex: 0 0 auto; }

/* Narrow screens: the photo sits on top at 16:10 and fades into the copy,
   which rides up over its lower edge. */
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; }
  .hero__photo { position: relative; width: 100%; aspect-ratio: 16 / 10; }
  .hero__photo::after { background: linear-gradient(0deg, var(--ink-950) 0%, rgba(10, 12, 16, 0) 45%); }
  .hero__inner { margin-top: -3rem; padding-top: 0; }
}

/*--------------------------------------------------------------------------
  9. Headset picker — the primary path to purchase
--------------------------------------------------------------------------*/
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.headset-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.headset-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
  color: var(--text);
}
/* The image is pinned to the box rather than sized by it: a percentage height
   does not resolve against an aspect-ratio box in a grid, so a square
   thumbnail rendered at its full height and was clipped at the bottom. */
.headset-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  overflow: hidden;
}
.headset-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur) var(--ease);
}
.headset-card:hover .headset-card__media img { transform: scale(1.04); }
.headset-card__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.headset-card__meta { font-size: var(--fs-xs); color: var(--text-mut); }

/*--------------------------------------------------------------------------
  10. Feature / step / trust blocks
--------------------------------------------------------------------------*/
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-lg); }
.feature p { color: var(--text-mut); }

.section--dark .feature__icon { background: rgba(91, 130, 255, 0.14); color: var(--accent-light); }
.section--dark .feature p { color: var(--text-on-dark-mut); }

.steps { counter-reset: step; }
/* The number sits in a badge on the rule, like stops on a line. As bare 14px
   text above the rule it read as a stray label. */
.step { position: relative; padding-top: var(--sp-7); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(91, 130, 255, 0.45);
  border-radius: var(--r-full);
  background: var(--ink-950);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: '';
  position: absolute;
  top: 17px; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line-on-dark);
}
.step h3 { margin-bottom: var(--sp-2); }

.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.trust-bar__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust-bar__item svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.trust-bar__item strong { display: block; font-size: var(--fs-sm); }
.trust-bar__item span { font-size: var(--fs-sm); color: var(--text-mut); }

/* Rodenstock — the strongest unused trust signal on the old site. */
.partner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.partner__logo {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.partner__logo img { max-width: 260px; }

/*--------------------------------------------------------------------------
  11. FAQ — native <details>, zero JavaScript
--------------------------------------------------------------------------*/
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-mut);
  border-bottom: 2px solid var(--text-mut);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__answer { padding-bottom: var(--sp-5); color: var(--text-mut); max-width: 72ch; }
.faq__answer > * + * { margin-top: var(--sp-3); }
.faq__answer ul { padding-left: 1.15em; }
.faq__answer li + li { margin-top: var(--sp-1); }
.faq__answer img {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* FAQ page: the section stack, and anything typed into the page in the admin. */
.faq-group { margin-bottom: var(--sp-8); }
.faq-group > h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.faq-intro { margin-bottom: var(--sp-7); }
.faq-more { margin-top: var(--sp-6); }

/*--------------------------------------------------------------------------
  12. Forms
--------------------------------------------------------------------------*/
label, .form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.form-hint { font-size: var(--fs-xs); color: var(--text-mut); font-weight: 400; }

input[type='text'], input[type='email'], input[type='tel'], input[type='url'],
input[type='password'], input[type='number'], input[type='search'], input[type='date'],
textarea, select {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  /* 16px minimum stops iOS Safari zooming the page on focus. */
}
textarea { min-height: 140px; padding-block: var(--sp-3); resize: vertical; }

select {
  appearance: none;
  padding-inline-end: var(--sp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 89, 255, 0.18);
}

input[aria-invalid='true'], select[aria-invalid='true'] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(196, 43, 43, 0.14);
}

.field-error { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--err); font-weight: 500; }

.checkbox-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checkbox-row input[type='checkbox'],
.checkbox-row input[type='radio'] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.checkbox-row label { margin-bottom: 0; font-weight: 400; font-size: var(--fs-sm); }

/* Segmented control — used for lens type and pair/single choices. */
.segmented { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.segmented__option { flex: 1 1 auto; min-width: 110px; }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.segmented__option input:checked + span {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-hover);
}
.segmented__option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/*--------------------------------------------------------------------------
  13. Notices
--------------------------------------------------------------------------*/
.notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: var(--fs-sm);
}
.notice svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.notice--info { background: var(--accent-wash); border-color: #cdd8ff; }
.notice--info svg { color: var(--accent); }
.notice--warn { background: #fff8ec; border-color: #f3dfb8; }
.notice--warn svg { color: var(--warn); }
.notice--error { background: var(--err-wash); border-color: #f5c9c9; }
.notice--error svg { color: var(--err); }

/*--------------------------------------------------------------------------
  14. Footer
--------------------------------------------------------------------------*/
.site-footer {
  background: var(--ink-950);
  color: var(--text-on-dark-mut);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--text-on-dark-mut); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; max-width: 280px; } }
.footer__brand img, .footer__brand svg { height: 28px; width: auto; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: var(--sp-2); }
/* The legal menu is a horizontal row: a top margin there lifted every link
   after the first. */
.site-footer .cluster > li + li { margin-top: 0; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-xs);
}
.footer__company { font-style: normal; line-height: 1.7; }

/*==========================================================================
  15. WooCommerce
  The three WooCommerce stylesheets are dequeued in inc/assets.php, so
  everything below is the complete storefront styling, not a set of overrides.
==========================================================================*/

/*-- 15.1 Messages ---------------------------------------------------------*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  list-style: none;
  font-size: var(--fs-sm);
}
.woocommerce-message { background: #ecfaf1; border-color: #bfe6cf; }
.woocommerce-info { background: var(--accent-wash); border-color: #cdd8ff; }
.woocommerce-error { background: var(--err-wash); border-color: #f5c9c9; }
.woocommerce-error li + li { margin-top: var(--sp-2); }
.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/*-- 15.2 Product cards ----------------------------------------------------*/
/* ul only: WooCommerce also puts .products on the related-products <section>,
   which turned the heading and the whole list into two 240px grid cells and
   stacked the cards in a single column. */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 560px) {
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: var(--paper-2);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-4);
  /* Some catalogue photos are JPEGs on white; multiply lets the tile's grey
     show through instead of a white box inside a grey box. Alpha PNGs are
     unaffected. */
  mix-blend-mode: multiply;
  transition: transform 260ms var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--ink-950);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.product-card__badge--oos { background: var(--warn); }

.product-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.product-card__meta { font-size: var(--fs-xs); color: var(--text-mut); }

.product-card__price {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.product-card__price del { color: var(--text-mut); font-weight: 400; font-size: var(--fs-sm); margin-inline-end: var(--sp-2); }
.product-card__price ins { text-decoration: none; }

.product-card__cta { margin-top: var(--sp-3); }

/*-- 15.3 Shop toolbar and filters ----------------------------------------*/
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.shop-toolbar__count { font-size: var(--fs-sm); color: var(--text-mut); }
.shop-toolbar form { margin-inline-start: auto; }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--text-mut); color: var(--text); }
.filter-chip[aria-current='true'] {
  background: var(--ink-950);
  border-color: var(--ink-950);
  color: #fff;
}

/*-- 15.4 Single product ---------------------------------------------------*/
.product-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr); }
}

/* Gallery: CSS scroll-snap, replacing flexslider + photoswipe + zoom. */
.gallery__main {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-lg);
}
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  overflow: hidden;
}
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-5); }

.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
/* On a phone five or more thumbnails wrapped to a second row with one orphan;
   one scrolling row keeps the gallery compact. */
@media (max-width: 959px) {
  /* min-width: a grid item defaults to its content width, so the unwrapped
     row would widen the column past the viewport. */
  .product-gallery { min-width: 0; }
  .gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: var(--sp-3) -3px 0; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
}
.gallery__thumb {
  /* Contains the absolutely positioned screen-reader label, which otherwise
     escaped the scrolling row and widened the page on a phone. */
  position: relative;
  flex: 0 0 auto;
  width: 72px; height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  cursor: pointer;
  overflow: hidden;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gallery__thumb[aria-current='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43, 89, 255, 0.2); }

/* Buy column */
.buy-col { position: relative; }
@media (min-width: 960px) {
  .buy-col__sticky { position: sticky; top: 92px; }
  /* The prescription form is several screens tall; without this the gallery
     scrolled away and left a blank half-page beside the form. */
  .product-gallery { position: sticky; top: 92px; }
}

.product-title { margin-bottom: var(--sp-3); }

.buy-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-2xl);
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.buy-price .price { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; }
.buy-price del { font-size: var(--fs-lg); font-weight: 400; color: var(--text-mut); }
.buy-price ins { text-decoration: none; }
.buy-price__note { font-size: var(--fs-sm); font-weight: 400; color: var(--text-mut); letter-spacing: 0; }

.buy-panel {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}

.buy-panel__section + .buy-panel__section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* Out of stock. WooCommerce prints p.stock.out-of-stock where the add-to-cart
   form would be and then prints no form, so this one line is the whole buy
   panel. Left unstyled it looked like a stray sentence rather than an answer
   to "can I buy this?" (20.09.2026: replaced the theme's own "coming soon"
   panel, which was driven by the words in one product's description). */
.buy-panel .stock.out-of-stock,
.buy-panel .stock.coming-soon {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-weight: 650;
  color: var(--text);
}
.buy-panel .stock.out-of-stock::before,
.buy-panel .stock.coming-soon::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warn);
}
.buy-panel .stock.coming-soon::before { background: var(--accent); }

/* "Email me when it is back", from WooCommerce Product Stock Alert. The plugin
   prints an h6, a bare text input and a bare button, and its own stylesheet
   only sets a couple of margins, so without this the form looks like a 2013
   contact form sitting inside the buy panel. The button carries inline colours
   from the plugin settings, which is why the two declarations that fight them
   are !important; nothing else here needs to be. */
.buy-panel .alert_container { margin: var(--sp-4) 0 0; }
.buy-panel h6.subscribe_for_interest_text {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-mut);
  letter-spacing: 0;
  text-transform: none;
}
.buy-panel input.stock_alert_email {
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  color: var(--text);
}
.buy-panel input.stock_alert_email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.buy-panel button.stock_alert_button,
.buy-panel button.unsubscribe_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-md);
  background: var(--accent) !important;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff !important;
  cursor: pointer;
}
.buy-panel button.stock_alert_button:hover,
.buy-panel button.unsubscribe_button:hover { background: var(--accent-hover) !important; }
.buy-panel .alert_container p {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 400;
  color: var(--text-mut);
}

/* Purchase-critical disclosure, shown next to the CTA rather than in the FAQ. */
.made-to-order {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--fs-xs);
  color: var(--text-mut);
  line-height: 1.5;
}
.made-to-order svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

.product-trust { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.product-trust li { display: flex; gap: var(--sp-3); align-items: flex-start; list-style: none; font-size: var(--fs-sm); }
.product-trust svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* Mobile sticky buy bar */
.buy-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.buy-bar__price { font-weight: 650; font-size: var(--fs-md); letter-spacing: -0.02em; }
.buy-bar .btn { margin-inline-start: auto; }

@media (max-width: 959px) {
  .buy-bar { display: flex; }
  body.single-product { padding-bottom: 76px; }
}

/*-- 15.5 Product info sections -------------------------------------------*/
.product-sections { margin-top: clamp(3rem, 7vw, 5rem); }
.product-section + .product-section { margin-top: var(--sp-7); }
.product-section h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.product-section .entry-content > * + * { margin-top: var(--sp-4); }
.product-section .entry-content ul { padding-inline-start: var(--sp-5); }
.product-section .entry-content li + li { margin-top: var(--sp-2); }

/*==========================================================================
  16. Prescription configurator
  --------------------------------------------------------------------------
  The fields themselves are rendered by TM Extra Product Options. Its markup
  and, critically, its field NAMES and VALUES must not change: the widmotrello
  plugin reads `_tmcartepo_data` and matches on the literal English strings
  "SPH-R", "Lenses type" == "prescription", "High index" === "yes" and so on.
  Renaming a field silently strips the prescription off the Trello card.

  So this section is styling only. The visual goal is to make six loose
  dropdowns read like the prescription slip an optician hands you: rows for the
  right and left eye, columns for SPH / CYL / AXIS.
==========================================================================*/

.configurator { margin-top: var(--sp-5); }

.configurator__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.configurator__head h2 { font-size: var(--fs-md); font-weight: 650; }

/* Progress: how much of the prescription is still missing. */
.configurator__progress {
  position: relative;
  height: 3px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--paper-3);
  overflow: hidden;
}
.configurator__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--spectrum);
  border-radius: var(--r-full);
  transition: width 260ms var(--ease);
}

/* TM EPO container */
.tm-extra-product-options,
.tc-extra-product-options {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-sm);
}

.tm-extra-product-options .tmcp-field-wrap,
.tc-extra-product-options .tmcp-field-wrap { margin-bottom: var(--sp-4); }

.tm-extra-product-options label,
.tc-extra-product-options label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.tm-extra-product-options .tm-epo-field-label small,
.tc-extra-product-options .tm-epo-field-label small {
  display: block;
  font-weight: 400;
  color: var(--text-mut);
  font-size: var(--fs-xs);
}

.tm-extra-product-options select,
.tm-extra-product-options input[type='text'],
.tm-extra-product-options input[type='number'],
.tc-extra-product-options select,
.tc-extra-product-options input[type='text'],
.tc-extra-product-options input[type='number'] {
  width: 100%;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}

/* Section headings TM EPO emits between field groups. */
.tm-extra-product-options .tm-epo-element-label,
.tc-extra-product-options .tm-epo-element-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mut);
}

/*
  The prescription grid. The theme wraps the SPH/CYL/AXS fields in
  .rx-grid via a small DOM pass in assets/js/product.js — it only moves
  existing nodes, it never rewrites names or values.
*/
.rx-grid {
  display: grid;
  grid-template-columns: 3.25rem repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.rx-grid__corner { grid-column: 1; }

.rx-grid__col-head,
.rx-grid__row-head {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mut);
  text-align: center;
}
.rx-grid__row-head {
  text-align: left;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.rx-grid__row-head small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-mut); }

.rx-grid select { min-height: 44px; padding-inline: var(--sp-3); text-align: center; }

@media (max-width: 420px) {
  .rx-grid { grid-template-columns: 2.75rem repeat(3, minmax(0, 1fr)); gap: 6px; padding: var(--sp-3); }
  .rx-grid select { padding-inline: var(--sp-2); font-size: var(--fs-sm); }
}

/*
  Real TM EPO markup (19.09.2026). The grid is built from whole TM EPO
  elements (.cpf-element), each with its own label, tooltip text and price
  wrap; the grid's column and row heads replace them visually. TM EPO sizes
  elements with tcwidth-NN classes and spaces rows and cells with --tcgap
  (15px, negative margins on rows). That pushed the grid 15px past the card
  on staging. Zero the gap and the widths, so the form follows the theme's
  column instead of TM EPO's 45% / 33% widths.
*/
.configurator { --tcgap: 0px; }
/* TM EPO's own width rules are `.tm-extra-product-options .tc-cell.tcwidth-NN`. */
.configurator .tm-extra-product-options .tc-cell.cpf-element,
.configurator .tm-extra-product-options .tc-cell.cpf-section,
.configurator .tm-extra-product-options .tc-cell.tc-col {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
.configurator .cpf-section.tc-cell { margin: 0; }
.configurator .tm-epo-field-label.fullwidth { display: block; width: 100%; }
.configurator .tmcp-field-wrap select.tmcp-select { width: 100%; max-width: none; }
.configurator .tm-extra-product-options .tc-cell.cpf-element { margin-bottom: var(--sp-4); }
.configurator .tm-extra-product-options .tc-cell.cpf-type-divider { margin-bottom: var(--sp-3); }
/* TM EPO's "?" tooltip icons (after selects, next to the High index and Blue
   Light labels) do not match the theme. The same help is in the "Where do I
   find these numbers?" panel and the product FAQ. */
.configurator .tc-tooltip,
.configurator .tcfa-question-circle { display: none; }
/* TM EPO also pops its own bubble (#tm-tooltip, appended to <body>) when a
   label with the tm-tooltip class is hovered; the theme has its own. */
#tm-tooltip { display: none !important; }

/* Help bubbles (product.js, "Help bubbles"). */
.configurator { position: relative; }
.rx-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -4px 0 -4px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-mut);
  vertical-align: middle;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.rx-tip svg { width: 16px; height: 16px; }
.rx-tip:hover,
.rx-tip[aria-expanded='true'] { color: var(--accent); background: var(--accent-wash); }
.rx-tip-bubble {
  position: absolute;
  z-index: 20;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 8px 24px rgb(17 20 26 / 0.12);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  text-align: left;
}
.rx-tip-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(var(--arrow, 50%) - 6px);
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--paper);
  transform: rotate(45deg);
}
.rx-tip-bubble[hidden] { display: none; }
/* Links in TM EPO descriptions follow the theme's link colour: the Custom
   Order Inquiry Form link carries an inline #ff6666 from the mystile palette. */
.configurator a [style*='color'] { color: inherit !important; }
.configurator .tc-row > .rx-grid { flex: 0 0 100%; width: 100%; margin-bottom: var(--sp-4); }
.configurator .tmcp-ul-wrap { margin: 0; padding: 0; list-style: none; }
.configurator .tmcp-ul-wrap > .tmcp-field-wrap { margin: 0; }

.rx-grid > [hidden] { display: none; }
.rx-grid .cpf-element,
.rx-grid .tc-element-inner-wrap,
.rx-grid .tc-row,
.rx-grid .tc-cell { margin: 0; padding: 0; width: 100%; }
.rx-grid .tm-epo-element-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* TM EPO's tcwidth-100 widens the hidden label to the cell, and a sliver of
   "SPH-R" showed between the [− | +] buttons. */
.configurator .rx-grid .tm-epo-element-label { width: 1px; max-width: 1px; }
.rx-grid .tm-description,
.rx-grid .tc-price-wrap,
.rx-grid .tc-tooltip { display: none; }
/* TM EPO's "field required" message, under the select. */
.rx-grid .tm-error,
.rx-grid label.error { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 500; color: var(--err); }

/*
  Sign first, then number (product.js, "Sign first"). Each SPH/CYL cell holds
  a [− | +] switch above a stand-in list; minus and plus have their own colour
  so a wrong sign stands out at a glance. The TM EPO select stays in the
  layout, invisible, so its validator still sees and checks it
  (jquery.validate skips :hidden fields).
*/
.rx-grid {
  --rx-minus: #1d4ed8;
  --rx-minus-wash: #e8eefe;
  --rx-plus: #c2410c;
  --rx-plus-wash: #fdeee6;
}
/* Cells with a sign switch are taller; keep the selects on one line. */
.rx-grid__cell { align-self: end; }
.rx-grid .cpf-element { position: relative; }
.rx-grid select.rx-native {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.rx-grid .cpf-element:has(select.rx-native.tm-error) .rx-proxy { border-color: var(--err); }

.rx-sign { display: flex; gap: 4px; margin-bottom: 4px; }
.rx-sign__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rx-sign__btn--minus { color: var(--rx-minus); }
.rx-sign__btn--plus { color: var(--rx-plus); }
.rx-sign__btn--minus:hover { border-color: var(--rx-minus); background: var(--rx-minus-wash); }
.rx-sign__btn--plus:hover { border-color: var(--rx-plus); background: var(--rx-plus-wash); }
.rx-sign__btn--minus[aria-pressed='true'] { border-color: var(--rx-minus); background: var(--rx-minus); color: #fff; }
.rx-sign__btn--plus[aria-pressed='true'] { border-color: var(--rx-plus); background: var(--rx-plus); color: #fff; }
.rx-sign__btn:disabled { cursor: default; opacity: 0.5; }

/* The chosen value carries its sign's colour too. */
.rx-grid .rx-proxy[data-sign='-'] { color: var(--rx-minus); border-color: var(--rx-minus); font-weight: 600; }
.rx-grid .rx-proxy[data-sign='+'] { color: var(--rx-plus); border-color: var(--rx-plus); font-weight: 600; }
/* "+3.25" must fit next to the chevron in a phone-width cell. */
@media (max-width: 420px) {
  .rx-grid select.rx-proxy { padding-inline: 6px 18px; background-position: right 4px center; font-size: 0.8125rem; }
}

/* Header elements: section titles, their notes, the divider, the logo. */
.configurator .cpf-type-header .tm-description {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-mut);
}
.configurator .cpf-type-header .tm-description em { font-style: normal; }
.configurator .cpf-type-header .tm-description p { margin: 0; }
.configurator .cpf-type-header .tm-epo-element-label + .tm-description { margin-top: var(--sp-1); }
.configurator .cpf-type-header img { display: block; width: 150px; height: auto; }
.configurator .cpf-type-divider hr { margin: 0; border: 0; border-top: 1px solid var(--line); }

/* Tooltip text TM EPO turns into a "?" popup — never inline. */
.configurator .tm-tip-html { display: none; }

/* The opposite-sign warnings are TM EPO header elements with inline red. */
.znikamoSPH-div .tm-description,
.znikamoCYL-div .tm-description {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--err-wash);
}
.znikamoSPH-div .tm-description span,
.znikamoCYL-div .tm-description span { color: var(--err) !important; }
.znikamoSPH-div hr,
.znikamoCYL-div hr { display: none; }

/* PSVR2 limit: the note that replaces mystile's alert() (product.js). Same
   red wash as the opposite-sign warnings above it. */
.rx-limit-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--err-wash);
  color: var(--err);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* High index / Blue Light: TM EPO radios shown as a two-button switch. The
   input stays in the DOM, checked and posted exactly as before. */
.configurator .tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio,
.configurator .cpf-type-radio .tmcp-ul-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.configurator .cpf-type-radio .tmcp-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  width: auto;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* TM EPO prints per-product inline CSS for its "items per row" setting
   (.tm-product-id-NNN .element_N li { flex: 0 0 50% !important;
   max-width: 50% !important }), which left each button at half of its grid
   column on staging. Only !important can beat it. */
.configurator .tm-extra-product-options .cpf-type-radio ul.tmcp-ul-wrap li.tmcp-field-wrap {
  flex: none !important;
  width: auto;
  max-width: none !important;
  margin: 0;
}
.configurator .cpf-type-radio .tmcp-field-wrap label { margin: 0; cursor: pointer; }
/* The whole tile is the click target. */
.configurator .cpf-type-radio .tmcp-field-wrap label::after { content: ''; position: absolute; inset: 0; }
.configurator .cpf-type-radio input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.configurator .cpf-type-radio .tc-label { font-weight: 600; text-transform: capitalize; }
.configurator .cpf-type-radio .tc-price-wrap { font-size: var(--fs-xs); color: var(--text-mut); }
.configurator .cpf-type-radio .tmcp-field-wrap:hover { border-color: var(--accent); }
.configurator .cpf-type-radio .tmcp-field-wrap:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.configurator .cpf-type-radio .tmcp-field-wrap:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Prescription | Plano: links to the other product, drawn like the switch
   above. Replaces TM EPO's "Product options" note (hidden in product.js). */
.lens-type { margin-bottom: var(--sp-4); }
.lens-type__label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.lens-type__switch {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.lens-type__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lens-type__opt:hover { border-color: var(--accent); color: var(--text); }
.lens-type__opt[aria-current='page'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
  cursor: default;
}
.lens-type__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The coatings line is a one-option radio with no label: show it as a note. */
.configurator .tm-extra-product-options .cpf-type-radio:not(:has(.tm-epo-element-label)) ul.tmcp-ul-wrap.tm-element-ul-radio { display: block; margin: 0; }
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) .tmcp-field-wrap,
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) .tmcp-field-wrap:has(input:checked) {
  display: block;
  min-height: 0;
  padding: 0 0 0 1.5rem;
  border: 0;
  background: none;
  box-shadow: none;
}
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) label { cursor: default; }
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) label::after { content: none; }
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) .tc-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: none;
  color: var(--text-mut);
}
.configurator .tm-extra-product-options .cpf-type-radio:not(:has(.tm-epo-element-label)) li.tmcp-field-wrap::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1rem;
  height: 1rem;
  /* Stroke is --ok (#157f4b). */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157f4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.configurator .cpf-type-radio:not(:has(.tm-epo-element-label)) .tc-price-wrap { display: none; }

/*
  Opposite-sign warnings from the TM EPO form. Hidden until product.js
  finds SPH (or CYL) values of opposite signs for the two eyes.
*/
.znikamoSPH-div,
.znikamoCYL-div { display: none; }

/* Helper link that opens the prescription explainer panel. */
.rx-help {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.rx-help svg { width: 16px; height: 16px; }

/* Slide-over explainer — keeps the customer inside the purchase flow. */
.panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr min(520px, 100%);
  visibility: hidden;
}
.panel[data-open='true'] { visibility: visible; }
.panel__scrim {
  grid-area: 1 / 1 / 2 / 3;
  background: rgba(10, 12, 16, 0.5);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  border: 0;
  cursor: pointer;
}
.panel[data-open='true'] .panel__scrim { opacity: 1; }
.panel__body {
  grid-area: 1 / 2 / 2 / 3;
  background: var(--paper);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
}
.panel[data-open='true'] .panel__body { transform: none; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.panel__body > * + * { margin-top: var(--sp-4); }
.panel__body dl { display: grid; gap: var(--sp-3); }
.panel__body dt { font-weight: 650; font-size: var(--fs-sm); }
.panel__body dd { margin: 0; color: var(--text-mut); font-size: var(--fs-sm); }

/*==========================================================================
  17. Cart, checkout, account
==========================================================================*/
.wc-page { padding-block: clamp(2rem, 5vw, 4rem); }
.wc-page__title { margin-bottom: var(--sp-6); }

.cart-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); } }

.cart-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cart-item__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  overflow: hidden;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.cart-item__name { font-weight: 600; font-size: var(--fs-sm); }
.cart-item__name a { color: var(--text); text-decoration: none; }
.cart-item__price { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
  The prescription, restated at cart and checkout. This is the cheapest place
  to catch a typo in a SPH value — far cheaper than after the lenses are cut.
*/
.rx-summary {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--fs-xs);
}
.rx-summary dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
}
.rx-summary dt { color: var(--text-mut); }
.rx-summary dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 550; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.qty button {
  width: 40px; height: 42px;
  border: 0;
  background: var(--paper);
  color: var(--text);
  font-size: 1.125rem;
  cursor: pointer;
}
.qty button:hover { background: var(--paper-2); }
.qty input {
  width: 48px;
  min-height: 42px;
  border: 0;
  border-inline: 1px solid var(--line-strong);
  border-radius: 0;
  text-align: center;
  padding-inline: 0;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.order-summary {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
@media (min-width: 900px) { .order-summary { position: sticky; top: 92px; } }
.order-summary h2 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.order-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}
.order-summary__row--total {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-md);
  font-weight: 680;
  letter-spacing: -0.02em;
}
.order-summary .btn { margin-top: var(--sp-5); }

/* Checkout */
.checkout-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); } }

.form-row { margin-bottom: var(--sp-4); }
.form-row-first, .form-row-last { width: 100%; }
@media (min-width: 620px) {
  .checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
  .form-row-wide, .checkout-fields > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

.wc_payment_methods { list-style: none; display: grid; gap: var(--sp-3); }
.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 550;
  margin: 0;
}
.wc_payment_method input:checked + label { border-color: var(--accent); background: var(--accent-wash); }
.payment_box { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--text-mut); }

/* Account
   Menu beside the content. Until 0.2.10 this grid sat on an .account-layout
   class that nothing printed: WooCommerce's my-account.php puts the nav and the
   content straight into the shortcode wrapper, so the menu ran full width
   above the page. :has() picks that wrapper only when the menu is in it, i.e.
   logged in; the login form is left alone. */
.woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; gap: var(--sp-5) var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 220px minmax(0, 1fr); } }
.woocommerce-MyAccount-content { min-width: 0; }
/* "nav." and "li + li" outrank the generic .entry-content list rules in
   section 18, which indented the menu and pushed every item 8px down. */
nav.woocommerce-MyAccount-navigation ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
nav.woocommerce-MyAccount-navigation li + li { margin-top: 0; }
/* On a phone seven stacked rows pushed the content off the screen: chips. */
@media (max-width: 819px) {
  nav.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .woocommerce-MyAccount-navigation a { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); }
}
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 550;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--paper-2); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ink-950); color: #fff; }

/*
  Account extras from the widmovr-sklep plugin (formerly mystile templates):
  the delivery warning above the orders and the three-step order status.
  Class names are mystile's; the content comes from ACF options.
*/
.alert {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.alert p { margin: 0; }
.alert p + p { margin-top: var(--sp-2); }
.alert-danger { background: var(--err-wash); border-color: #f5c9c9; color: var(--text); }

.order-status-wrapper {
  margin: var(--sp-4) 0 var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.order-status-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.order-status-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.order-status-item img { width: 64px; height: 64px; border-radius: 50%; }
.order-status-item:not(.order-status-item-active) { filter: grayscale(100%); opacity: 0.45; }
.order-status-item-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.order-status-item-active .order-status-item-title { color: var(--accent); }
.order-status-desc h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.order-status-desc p { margin: 0; font-size: var(--fs-sm); color: var(--text-mut); }
@media (max-width: 520px) {
  .order-status-item img { width: 48px; height: 48px; }
}

/* Order pages: My Account → View order, Addresses, and "order received".
   WooCommerce's h2s ("Order details", "Billing address") came out at the
   page-heading size, one step below the h1. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-order h2 { font-size: var(--fs-lg); letter-spacing: -0.01em; margin: var(--sp-7) 0 var(--sp-3); }
.woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }
/* "Order #… was placed on … and is currently …": <mark> is browser yellow. */
.woocommerce-MyAccount-content mark,
.woocommerce-order mark { background: none; color: inherit; font-weight: 650; }
/* <address> is italic by default. */
.woocommerce-MyAccount-content address,
.woocommerce-order address { font-style: normal; line-height: 1.6; }
.col2-set.addresses { gap: var(--sp-5); }
@media (min-width: 640px) { .col2-set.addresses { grid-template-columns: 1fr 1fr; } }
.col2-set.addresses h2 { margin-top: 0; }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.woocommerce-Address-title .edit { font-size: var(--fs-sm); }
/* Order totals: amounts under "Total", not in the middle of the table. */
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details td.product-total { text-align: right; font-variant-numeric: tabular-nums; }
/* Lens parameters under an order line: the same two columns as in the cart
   (dl.variation), instead of a bulleted list. */
/* ".woocommerce" outranks .entry-content ul / li + li (section 18). */
.woocommerce ul.wc-item-meta {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--sp-3);
  font-size: var(--fs-sm);
}
.woocommerce ul.wc-item-meta li { display: contents; }
.woocommerce ul.wc-item-meta .wc-item-meta-label { color: var(--text-mut); font-weight: 500; white-space: nowrap; }
.woocommerce ul.wc-item-meta li p { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* A line without a label (the coatings note, see inc/woocommerce.php). */
.woocommerce ul.wc-item-meta li > p:first-child { grid-column: 1 / -1; font-weight: 400; color: var(--text-mut); }
/* On a phone "Lens Selection (Pair/Single):" took the whole cell and left the
   value 18px: one line per parameter instead. */
@media (max-width: 559px) {
  .woocommerce ul.wc-item-meta { display: block; }
  .woocommerce ul.wc-item-meta li { display: block; margin: 0; }
  .woocommerce ul.wc-item-meta li p { display: inline; }
  .woocommerce ul.wc-item-meta .wc-item-meta-label { white-space: normal; }
}

/* My Account → VAT number (theme copy of the EU VAT Number template). */
.widmovr-vat-form { max-width: 420px; }
.widmovr-vat-form label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.widmovr-vat-form .description { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-mut); }

/* IPD preset (Quest 2 / 3S): the value the theme computes from PD, shown as text. */
.configurator .ipd-preset-value { font-weight: 700; }

/* Generic WooCommerce tables */
.shop_table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.shop_table th, .shop_table td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); }
.shop_table th { font-weight: 650; }
.shop_table td.product-total, .shop_table th.product-total,
.shop_table td.woocommerce-Price-amount { text-align: right; font-variant-numeric: tabular-nums; }

/* WooCommerce's own button class, kept working wherever core markup emits it. */
.woocommerce .button,
.wc-block-components-button,
button.button,
a.button,
input.button,
#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.woocommerce .button:hover,
button.button:hover,
a.button:hover,
input.button:hover,
#place_order:hover { background: var(--accent-hover); color: #fff; }

.button.alt, #place_order { width: 100%; min-height: 52px; font-size: var(--fs-base); }

/*==========================================================================
  18. Pagination, breadcrumbs, utilities
==========================================================================*/
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-mut);
}
.breadcrumb a { color: var(--text-mut); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

/* Two markups, one look. the_posts_pagination() emits .pagination > .nav-links
   > a; WooCommerce emits .woocommerce-pagination > ul.page-numbers > li > a, and
   the ul carries .page-numbers too, so rules target the links, never the list.
   Styled like the filter chips at the top of the same page. */
.pagination,
.woocommerce-pagination {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination li { list-style: none; }

.pagination a.page-numbers,
.pagination span.page-numbers,
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover { border-color: var(--text-mut); background: var(--paper-2); color: var(--text); }
.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots { min-width: 0; padding-inline: var(--sp-1); border-color: transparent; background: none; color: var(--text-mut); }
.pagination .prev,
.pagination .next,
.woocommerce-pagination .prev,
.woocommerce-pagination .next { padding-inline: var(--sp-4); }
.page-numbers svg { width: 16px; height: 16px; flex: 0 0 auto; }
.page-numbers .icon-flip { transform: scaleX(-1); }

/* On a phone the labels go; the arrows and a 44px target stay. */
@media (max-width: 480px) {
  .page-numbers__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pagination .prev, .pagination .next,
  .woocommerce-pagination .prev, .woocommerce-pagination .next { padding-inline: var(--sp-3); }
}

.entry-content > * + * { margin-top: var(--sp-4); }
.entry-content h2 { margin-top: var(--sp-7); }
.entry-content h3 { margin-top: var(--sp-6); }
.entry-content ul, .entry-content ol { padding-inline-start: var(--sp-5); }
.entry-content li + li { margin-top: var(--sp-2); }
.entry-content img { border-radius: var(--r-md); }

/* Term and definition, as on the prescription guide: a browser renders these
   flat and indented, which reads as neither a list nor a table. Same treatment
   as the "Reading your prescription" panel (.panel__body dl) so the two say
   the same thing in the same shape. */
.entry-content dl { display: grid; gap: var(--sp-3); }
.entry-content dt { font-weight: 650; }
.entry-content dd { margin: 0; color: var(--text-mut); }
@media (min-width: 720px) {
  .entry-content dl { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); align-items: baseline; gap: var(--sp-3) var(--sp-5); }
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content th, .entry-content td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
.entry-content td code { font-size: var(--fs-xs); overflow-wrap: anywhere; }

/* Terms, privacy and cookie policy: fifteen numbered sections with
   subsections, where the page-scale headings of a short page (44 / 32 px)
   would turn the document into a column of titles. */
.entry-content--legal h2 { font-size: var(--fs-xl); }
.entry-content--legal h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }

/* Model withdrawal form in the terms: a box to copy, lines tight like a form. */
.legal-form { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); }
.legal-form > p + p { margin-top: var(--sp-2); }

/* Wide content must scroll inside its own box, never the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.text-center { text-align: center; }
.text-mut { color: var(--text-mut); }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/*--------------------------------------------------------------------------
  19. Fixes found while testing in the browser
--------------------------------------------------------------------------*/

/* The logo is an <svg fill="currentColor"> inside an <a>, so without this it
   inherits the link colour and renders in accent blue. */
.site-brand__link { display: block; color: var(--text); }
.site-brand__link:hover { color: var(--text); }
.site-brand__link svg { height: 26px; width: auto; }
.site-footer .site-brand__link { color: #fff; }
/* The drawer is a white panel; a white logo there was invisible. */
.drawer .site-brand__link { color: var(--text); }

/* Buttons in a flex cluster were shrinking below their label and wrapping to
   three lines. Labels are short by design — keep them on one. */
.btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) {
  .hero__cta .btn { flex: 1 1 100%; white-space: normal; }
}

/* Product title: h1 scale is tuned for a full-width hero, not a 420px buy
   column, where it broke onto four lines. */
.product-title { font-size: var(--fs-xl); letter-spacing: -0.025em; }
@media (min-width: 1100px) { .product-title { font-size: var(--fs-2xl); } }

/* The default select chevron reserves 3rem, which is most of the width inside
   the prescription grid. */
.rx-grid select {
  padding-inline: var(--sp-2) var(--sp-5);
  background-position: right var(--sp-2) center;
  text-align: left;
}

/* Related products: WooCommerce emits .related with its own heading. */
.related, .up-sells {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}
.related > h2, .up-sells > h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-5);
}

/*--------------------------------------------------------------------------
  20. Add-to-cart row

  WooCommerce emits .quantity followed by the submit button as siblings inside
  form.cart. Left alone they stack as two full-width blocks; side by side reads
  as one decision.
--------------------------------------------------------------------------*/
form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: stretch;
  margin-top: var(--sp-5);
}
form.cart > .tm-extra-product-options,
form.cart > .tc-extra-product-options,
form.cart > .tm-epo-totals,
form.cart > .tc-totals-form { flex: 1 1 100%; }

form.cart .quantity { flex: 0 0 auto; }
form.cart .quantity input[type='number'] {
  width: 84px;
  min-height: 52px;
  text-align: center;
  padding-inline: var(--sp-2);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
form.cart .quantity input::-webkit-outer-spin-button,
form.cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

form.cart .single_add_to_cart_button { flex: 1 1 200px; min-height: 52px; }

/* TM EPO's own running total, when the plugin renders one. */
.tm-epo-totals, .tc-totals-form {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.tm-final-totals .amount, .tc-price-wrap .amount { font-weight: 680; font-size: var(--fs-md); }

/* Cards in a row have different title lengths; without this the price and the
   button sit at a different height in every column. */
ul.products > li { display: flex; }
ul.products > li.product { list-style: none; }
.product-card { flex: 1 1 auto; }
.product-card__link { flex: 1 1 auto; }

/*--------------------------------------------------------------------------
  21. Item options in cart / checkout / emails

  WooCommerce renders TM EPO's fields as <dl class="variation">. This is the
  prescription the workshop will cut, so it gets read like a spec sheet rather
  than a run-on line of small print.
--------------------------------------------------------------------------*/
dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--fs-xs);
}
dl.variation dt {
  margin: 0;
  color: var(--text-mut);
  font-weight: 500;
  white-space: nowrap;
}
dl.variation dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
dl.variation dd p { margin: 0; }
/* TM EPO prints the coatings note with a blank label (a lone &nbsp;, class
   tc-hidden-variation). In a two-column grid the note was forced into the
   value column; on a narrow checkout it broke one letter per line. */
dl.variation dt.tc-hidden-variation { display: none; }
dl.variation dt.tc-hidden-variation + dd { grid-column: 1 / -1; font-weight: 400; color: var(--text-mut); }

/* Cart and checkout tables need to scroll inside themselves on a phone, never
   push the page sideways. */
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.woocommerce-order-details { overflow-x: auto; }

.woocommerce-cart-form__contents { min-width: 520px; }

.cart_totals, .cross-sells { margin-top: var(--sp-6); }
.cart_totals h2, .woocommerce-checkout-review-order h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

.cart-collaterals {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
@media (min-width: 900px) { .cart-collaterals { max-width: 420px; margin-inline-start: auto; } }

.woocommerce-shipping-destination, .woocommerce-shipping-calculator { font-size: var(--fs-sm); }
#shipping_method { list-style: none; display: grid; gap: var(--sp-2); }
#shipping_method label { font-weight: 500; display: inline; }

.coupon { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.coupon input[type='text'] { flex: 1 1 180px; }

.woocommerce-form-login, .woocommerce-form-register {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  margin-bottom: var(--sp-6);
}

.woocommerce-order {
  max-width: 720px;
}
.woocommerce-thankyou-order-details {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  font-size: var(--fs-sm);
}
.woocommerce-thankyou-order-details li strong { display: block; font-size: var(--fs-md); }
/* A long e-mail address ran over the Total tile next to it. */
.woocommerce-thankyou-order-details li { min-width: 0; overflow-wrap: anywhere; }

/* The cart's product column has no width of its own, so a long label like
   "Blue Light Protection" claimed the whole cell and the values wrapped one
   character per line. Give the column room and let labels wrap instead. */
.shop_table.cart td.product-name,
.shop_table.cart th.product-name { min-width: 340px; }
.woocommerce-cart-form__contents { min-width: 700px; }
dl.variation { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
dl.variation dt { white-space: normal; }

.shop_table.cart td.product-thumbnail img { width: 72px; height: 72px; object-fit: contain; }
.shop_table.cart td.product-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.shop_table.cart td.product-name a:hover { text-decoration: underline; }
.shop_table.cart td.product-remove a {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--paper-2);
  color: var(--text-mut);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}
.shop_table.cart td.product-remove a:hover { background: var(--err-wash); color: var(--err); }

/*==========================================================================
  22. Checkout layout

  WooCommerce emits the checkout as one long column: #customer_details (itself
  a .col2-set) followed by #order_review. Left alone on a desktop that means a
  1200px-wide "First name" field and a total the customer has to scroll to find.

  Grid placement fixes both without touching the template, so PayPal, Flexible
  Shipping and any other gateway keep rendering exactly where they expect to.
==========================================================================*/
form.checkout.woocommerce-checkout {
  display: grid;
  gap: var(--sp-6) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, 1fr);
  }
  form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
  form.checkout #order_review { grid-column: 2; grid-row: 2; }
  form.checkout .woocommerce-checkout-payment { position: static; }
}

#customer_details .col2-set,
.col2-set { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }

/* Name fields sit side by side; everything else runs full width. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  gap: 0 var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
  .woocommerce-billing-fields__field-wrapper > p,
  .woocommerce-shipping-fields__field-wrapper > p { grid-column: 1 / -1; }
  .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
  .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
}

.woocommerce-checkout .form-row { margin-bottom: var(--sp-4); }
.woocommerce-checkout .form-row label { display: block; }
.woocommerce-checkout .required { color: var(--err); text-decoration: none; border: 0; }
.woocommerce-checkout abbr[title] { text-decoration: none; }

#order_review {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
@media (min-width: 900px) { #order_review { position: sticky; top: 92px; } }

#order_review_heading { font-size: var(--fs-lg); }

.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--sp-3) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }
/* Only the amounts stay on one line. Blocking wrapping for the whole column let
   a long cell — "There are no shipping options available…" or a tax note —
   widen it until the product column, and the prescription in it, collapsed. */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-checkout-review-order-table .tax_label,
.woocommerce-checkout-review-order-table .includes_tax { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-mut); }
/* Shipping: heading above, methods or notice below at full row width, instead
   of a paragraph squeezed into the narrow amounts column. */
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: grid; grid-template-columns: 1fr; }
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { border-bottom: 0; text-align: left; }
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { padding-top: 0; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0;
  padding-top: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 680;
}
.woocommerce-checkout-review-order-table .product-name { font-weight: 600; }
.woocommerce-checkout-review-order-table .product-quantity { font-weight: 400; color: var(--text-mut); }

/* Customs note for the US, printed by the widmovr-sklep plugin into the order
   review footer (that fragment is the one WooCommerce re-renders when the
   customer changes country). Amber, not red: it is information, not an error,
   and it must not read like the blocking UK limit. */
.woocommerce-checkout-review-order-table tr.widmovr-customs td {
  border-bottom: 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: #fff8ec;
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
}
.woocommerce-checkout-review-order-table tr.widmovr-customs strong {
  display: block;
  font-weight: 650;
  color: var(--text);
}
.woocommerce-checkout-review-order-table tr.widmovr-customs span {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-mut);
}

/* The prescription, restated one last time before payment. */
.woocommerce-checkout-review-order-table dl.variation {
  background: var(--paper);
  margin-top: var(--sp-2);
}

/* Auto table layout handed the spare width to the nowrap price column, which
   squeezed the prescription until "-2.75" broke as "-2.7 / 5" (seen on staging
   with the real TM EPO markup, 19.09). The product column takes the width; the
   price column shrinks to its content; the value column keeps enough room
   for "yes + $29.00" on one line. */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table th.product-name { width: 100%; }
.woocommerce-checkout-review-order-table dl.variation {
  grid-template-columns: minmax(5rem, 8.5rem) minmax(6rem, 1fr);
}

.woocommerce-checkout-payment { margin-top: var(--sp-5); }
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-xs); color: var(--text-mut); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sp-4); }

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info { margin-bottom: var(--sp-5); }

/* The coupon form WooCommerce hides behind "Click here to enter your code" is
   four children in a row: an intro <p>, the field in p.form-row-first, the
   button in p.form-row-last, and an empty div.clear left over from the days of
   floats. A two-column grid put the intro sentence next to the field, pushed
   the button onto a second row beside that empty div, and left the whole thing
   looking like a mistake. Each child is placed explicitly instead. */
.checkout_coupon {
  display: grid;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.checkout_coupon > p { margin: 0; }
.checkout_coupon > p:not(.form-row) { font-size: var(--fs-sm); color: var(--text-mut); }
.checkout_coupon .clear { display: none; }
.checkout_coupon input[type='text'] { width: 100%; }
.checkout_coupon button[name='apply_coupon'] { width: 100%; }

@media (min-width: 560px) {
  .checkout_coupon { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .checkout_coupon > p:not(.form-row) { grid-column: 1 / -1; }
  .checkout_coupon .form-row-first { grid-column: 1; }
  .checkout_coupon .form-row-last { grid-column: 2; }
  .checkout_coupon button[name='apply_coupon'] { width: auto; white-space: nowrap; }
}

/*--------------------------------------------------------------------------
  23. Small-screen header

  At 390px the brand plus five actions overflowed the viewport and clipped the
  cart badge. The language switcher moves into the drawer and the wordmark
  gives up some height.
--------------------------------------------------------------------------*/
.site-brand { min-width: 0; }

@media (max-width: 640px) {
  .site-header__inner { gap: var(--sp-2); min-height: 60px; }
  .site-brand__link svg { height: 20px; }
  .header-actions .lang-switch { display: none; }
  .icon-btn { min-width: 40px; }
  .topbar { font-size: 0.6875rem; }
  .topbar__inner { padding-block: var(--sp-2); }
}

.drawer__lang {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.drawer__lang .lang-switch a {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
}

/*--------------------------------------------------------------------------
  24. Contact page + Contact Form 7

  The CF7 stylesheet is dequeued in inc/assets.php; these rules cover the markup
  the plugin emits, including the drag-and-drop upload field used for
  prescription photos.
--------------------------------------------------------------------------*/
.contact-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } }
@media (min-width: 900px) { .contact-aside { position: sticky; top: 92px; } }

/* Leftovers from the mystile page content: a heading and an intro paragraph,
   both centred inline, above the form. The heading is demoted to <h2> in
   page-contact.php; here they get the column's rhythm back. */
.contact-form .entry-content > h2:first-child {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xl);
  text-align: start !important;
}
.contact-form .entry-content > h2:first-child + p {
  margin-bottom: var(--sp-5);
  color: var(--text-mut);
  font-size: var(--fs-sm);
  text-align: start !important;
}

.wpcf7 form > p, .wpcf7-form > p { margin-bottom: var(--sp-4); }
.wpcf7 label { display: block; font-size: var(--fs-sm); font-weight: 600; }
.wpcf7-form-control-wrap { display: block; margin-top: var(--sp-2); }
/* CF7 breaks the line between label and field with <br>; the blocks above do
   that already, so the empty line only widened the gaps. */
.wpcf7-form label > br,
.wpcf7-form p > br:first-child { display: none; }

/* Native file input: the browser's grey button and "no file selected" next to
   theme fields. The button gets the ghost-button look, the text the field's. */
.wpcf7 input[type='file'] {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: var(--fs-sm);
  color: var(--text-mut);
}
.wpcf7 input[type='file']::file-selector-button {
  margin-inline-end: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7 input[type='file']::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* Consent: a 13px native checkbox with the label glued to it, and the legal
   note under it. Same row as the checkout consent (.checkbox-row). */
.wpcf7 .form-consent > label { display: block; font-weight: 400; }
.wpcf7 .form-consent .wpcf7-form-control-wrap { margin-top: 0; }
/* CF7 wraps a checkbox in spans, with no label of its own around the text. */
.wpcf7 .form-consent .wpcf7-list-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.wpcf7 .form-consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.wpcf7 .form-consent small {
  display: block;
  margin-top: var(--sp-2);
  padding-inline-start: calc(18px + var(--sp-3));
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-mut);
}

/* The prescription grid (section 12) reused inside the custom order inquiry
   form, so the boxes there look like the ones on the product page. Two things
   CF7 adds have to be neutralised: a block wrapper around every control, and
   the <br> that wpautop sprinkles between them, which would otherwise open
   empty cells in the grid. Same trick as the label > br rule above. */
.wpcf7 .rx-grid { margin-bottom: var(--sp-4); }
.wpcf7 .rx-grid .wpcf7-form-control-wrap { margin-top: 0; }
.wpcf7 .rx-grid br { display: none; }
.wpcf7 .rx-grid p { margin: 0; }
.wpcf7 .rx-grid label { font-weight: 400; }
.wpcf7 .rx-grid input[type='text'] { padding-inline: var(--sp-2); text-align: center; }
@media (max-width: 420px) {
  .wpcf7 .rx-grid input[type='text'] { padding-inline: 6px; }
}
.wpcf7-not-valid-tip { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--err); font-weight: 500; }
.wpcf7-not-valid { border-color: var(--err) !important; }

/* CF7 prints the message box on every page load, empty — an empty framed bar
   under the button until something is submitted. */
.wpcf7 .wpcf7-response-output:empty { display: none; }
.wpcf7 .wpcf7-response-output {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: var(--fs-sm);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: var(--err-wash); border-color: #f5c9c9; }
.wpcf7 form.sent .wpcf7-response-output { background: #ecfaf1; border-color: #bfe6cf; }

.wpcf7 input[type='submit'],
.wpcf7 .wpcf7-submit {
  min-height: 48px;
  padding-inline: var(--sp-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7 input[type='submit']:hover { background: var(--accent-hover); }
@media (max-width: 599px) { .wpcf7 input[type='submit'] { width: 100%; } }

.wpcf7 .wpcf7-spinner { display: inline-block; margin-inline-start: var(--sp-3); vertical-align: middle; }
/* CF7 keeps the spinner in the flow at all times (visibility, not display). */
.wpcf7-form:not(.submitting) .wpcf7-spinner { display: none; }

/* Drag-and-drop upload (drag-and-drop-multiple-file-upload-contact-form-7) */
.codedropz-upload-handler {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-2);
  padding: var(--sp-5);
  text-align: center;
}
.codedropz-upload-container { padding: 0; }
.codedropz-upload-inner { font-size: var(--fs-sm); color: var(--text-mut); }
.codedropz-btn-wrap a { color: var(--accent); font-weight: 600; }
.dnd-upload-status { margin-top: var(--sp-3); font-size: var(--fs-sm); }

/*--------------------------------------------------------------------------
  25. Contrast fixes on dark surfaces

  .eyebrow and .text-mut default to --text-mut (#5b6470), which is tuned for
  white. The hero and the footer are near-black but are not .section--dark, so
  those two elements were landing at 3.26:1 — below WCAG AA. The on-dark token
  measures 7.76:1 on the same background.
--------------------------------------------------------------------------*/
.hero .eyebrow,
.site-footer .text-mut,
.site-footer .eyebrow,
.drawer__lang .eyebrow { color: var(--text-on-dark-mut); }

/* The drawer is a light surface, so its eyebrow keeps the light token. */
.drawer .drawer__lang .eyebrow { color: var(--text-mut); }

/*--------------------------------------------------------------------------
  26. Review pass, 15.09 — cart, checkout, account, select2, embeds

  WooCommerce pages are rendered through page.php, inside .entry-content, so
  the article rules (h2/h3 top margins) leaked into cart totals and billing
  headings. Resets here are scoped to those blocks, not to .entry-content.
--------------------------------------------------------------------------*/

/* Notices: WooCommerce prints the button before the text, so "View cart" sat
   on the left of the sentence it belongs to. */
.woocommerce-message .button,
.woocommerce-info .button { order: 2; }

/* Secondary WooCommerce actions read as secondary. The only filled button on
   the cart page should be "Proceed to checkout". */
.shop_table.cart button[name='apply_coupon'],
.shop_table.cart button[name='update_cart'],
.checkout_coupon button[name='apply_coupon'],
.woocommerce-message .button,
.woocommerce-info .button {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--text);
}
.shop_table.cart button[name='apply_coupon']:hover,
.shop_table.cart button[name='update_cart']:hover,
.checkout_coupon button[name='apply_coupon']:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { background: var(--paper-2); border-color: var(--text-mut); color: var(--text); }
.button:disabled,
.button[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Cart table */
.shop_table.cart td { vertical-align: middle; }
.shop_table.cart td.product-thumbnail img {
  padding: 6px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  mix-blend-mode: multiply;
}
/* WooCommerce's input carries .qty, which the theme also uses for its stepper
   wrapper — so the field inherited inline-flex and stretched across the cell. */
.shop_table.cart input.qty {
  display: block;
  width: 84px;
  min-height: 44px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shop_table.cart td.actions { padding-inline: 0; }
.shop_table.cart td.actions::after { content: ''; display: table; clear: both; }
.shop_table.cart td.actions .coupon { float: left; flex-wrap: nowrap; width: min(420px, 100%); margin: 0; }
.shop_table.cart td.actions .coupon input[type='text'] { min-width: 0; }
.shop_table.cart td.actions button[name='update_cart'] { float: right; }

.cart_totals h2,
.cart-collaterals .cart_totals { margin-top: 0; }
.cart_totals .shop_table th { padding-inline-start: 0; font-weight: 500; color: var(--text-mut); }
.cart_totals .shop_table td { padding-inline-end: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cart_totals .order-total th,
.cart_totals .order-total td { border-bottom: 0; color: var(--text); font-size: var(--fs-md); font-weight: 680; }
.wc-proceed-to-checkout { margin-top: var(--sp-4); }

/* On a phone the six-column table scrolled sideways, hid price and quantity
   off-screen and squeezed the thumbnail to a few pixels. Each row becomes a
   card instead; data-title labels come from WooCommerce's own markup. */
@media (max-width: 699px) {
  .woocommerce-cart-form { overflow: visible; }
  .woocommerce-cart-form__contents { min-width: 0; }
  .shop_table.cart,
  .shop_table.cart tbody,
  .shop_table.cart tr,
  .shop_table.cart td { display: block; }
  .shop_table.cart thead { display: none; }

  .shop_table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .shop_table.cart tr.cart_item td { padding: 0; border: 0; }
  .shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  .shop_table.cart tr.cart_item td.product-name { grid-column: 2; min-width: 0; padding-inline-end: 40px; }
  .shop_table.cart td.product-price,
  .shop_table.cart td.product-quantity,
  .shop_table.cart td.product-subtotal {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    text-align: right;
  }
  .shop_table.cart td.product-price::before,
  .shop_table.cart td.product-quantity::before,
  .shop_table.cart td.product-subtotal::before {
    content: attr(data-title);
    color: var(--text-mut);
    font-weight: 500;
  }
  .shop_table.cart td.product-subtotal { font-weight: 650; }
  .shop_table.cart td.product-remove { position: absolute; top: var(--sp-4); right: 0; }

  .shop_table.cart td.actions { padding-block: var(--sp-4); border-bottom: 0; }
  .shop_table.cart td.actions .coupon { float: none; width: 100%; margin-bottom: var(--sp-3); }
  .shop_table.cart td.actions button[name='update_cart'] { float: none; width: 100%; }
}

/* Checkout: #customer_details spans both grid rows, and its extra height was
   shared between them — a ~300px hole under "Your order". */
@media (min-width: 900px) {
  form.checkout.woocommerce-checkout { grid-template-rows: auto 1fr; }
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { margin-top: 0; }

/* select2 (country / state) — WooCommerce's stock look, blue #0073aa and a
   28px box, next to 51px theme inputs. */
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-7) var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: var(--sp-4);
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 89, 255, 0.18);
}
.select2-dropdown,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}
.select2-container--open .select2-dropdown--below { margin-top: 4px; }
.select2-container--open .select2-dropdown--above { margin-top: -4px; }
.select2-search--dropdown { padding: var(--sp-2); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
}
.select2-results__option { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[data-selected='true'] { background: var(--paper-2); color: var(--text); font-weight: 600; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--accent-wash); color: var(--accent-hover); }

/* Account: login and register forms ran the full 1120px container, and the
   form heading was the same scale as the page title above it. */
.woocommerce-account .entry-content .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 { margin-top: 0; margin-bottom: var(--sp-4); font-size: var(--fs-xl); }
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword { max-width: 480px; }
.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) 0 0;
  font-weight: 500;
}
.woocommerce-form__input-checkbox { width: 18px; height: 18px; accent-color: var(--accent); }
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.woocommerce-LostPassword { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }

/* A video embedded in a product description (native <video>, see
   widmovr_product_description()). */
.entry-content .wp-video { width: 100% !important; max-width: 100%; }
.entry-content video { width: 100%; height: auto; border-radius: var(--r-md); background: var(--ink-950); }

/*--------------------------------------------------------------------------
  27. Cookie consent and support button (inc/consent.php, inc/support.php)
--------------------------------------------------------------------------*/
.consent {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90;
  width: min(560px, calc(100% - 2 * var(--sp-4)));
}
.consent[hidden] { display: none; }
.consent__box {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  max-height: calc(100vh - 2 * var(--sp-4));
  overflow-y: auto;
}
.consent__title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.consent__text { margin: 0; font-size: var(--fs-sm); color: var(--text-mut); line-height: 1.55; }
.consent__text a { color: var(--accent); }
.consent__choices { margin: var(--sp-4) 0 0; padding: 0; border: 0; display: grid; gap: var(--sp-3); }
.consent__choices[hidden] { display: none; }
.consent__choice { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; }
.consent__choice input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.consent__choice strong { color: var(--text); }
.consent__choice span { color: var(--text-mut); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.consent__actions .btn { flex: 1 1 auto; }
.consent__actions [hidden] { display: none; }

@media (max-width: 599px) {
  .consent { left: 0; bottom: 0; width: 100%; }
  .consent__box {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    max-height: 100vh;
  }
  .consent__actions .btn { flex-basis: calc(50% - var(--sp-2)); }
}

/* Footer control: a button that reads as one of the legal links. */
.consent-open:not(.btn) {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer__consent { color: var(--text-on-dark-mut); text-decoration: none; }
.footer__consent:hover { color: #fff; text-decoration: underline; }

/* In the corner where Zendesk's own launcher used to sit, and where it
   appears after the click. */
.support-launcher {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.support-launcher:hover { background: var(--accent-hover); }
.support-launcher[hidden] { display: none; }
.support-launcher[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.support-launcher svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Above the sticky buy bar on product pages. */
@media (max-width: 959px) {
  body.single-product .support-launcher { bottom: calc(76px + var(--sp-3)); }
}