/*
  SmartShift · Liquid Glass design system
  Layout: one centered 1200px column; ambient blue blobs sit behind every glass
  surface so the blur has something to refract. RTL first.
*/
:root {
  /* palette – cool white & brand blue (from the logo's water drop); dark mode below: deep graphite-black base, muted blue glow */
  --bg: #eef4fb;
  --bg-2: #f8fbff;
  --ink: #0a1a2f;
  --ink-2: #44566e;
  --ink-3: #52607a;   /* ≥4.5:1 on the light background and glass (WCAG AA) */
  --accent: #1259b0;  /* ≥4.5:1 for small accent text on light backgrounds */
  --accent-ink: #ffffff;
  --accent-2: #4cc3f0;
  --accent-soft: rgba(18, 89, 176, 0.1);
  --sale: #0f9d6b;
  --danger: #d33a4a;

  /* glass */
  --glass: rgba(255, 255, 255, 0.2);
  --glass-strong: rgba(255, 255, 255, 0.62);
  --glass-solid: rgba(255, 255, 255, 0.82);
  --edge-hi: rgba(255, 255, 255, 0.35);
  --edge-lo: rgba(255, 255, 255, 0.08);
  --edge-line: rgba(10, 26, 47, 0.08);
  --inset: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  --shadow: 0 25px 50px -12px rgba(16, 42, 84, 0.25);
  --shadow-sm: 0 10px 24px -10px rgba(16, 42, 84, 0.22);
  --blur: blur(24px) saturate(190%);

  --blob-1: #5aa9ff;
  --blob-2: #7fdcff;
  --blob-3: #a9b8ff;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Hebrew", "Heebo", Inter, system-ui, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.3rem;
  --fs-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  --fs-hero: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);

  /* shape & motion */
  --r: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.35s var(--spring);
  --wrap: 1200px;
  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070c12;
    --bg-2: #0c141e;
    --ink: #f5f7fa;
    --ink-2: #a7b3c2;
    --ink-3: #7b8796;
    --accent: #4aa8ff;
    --accent-ink: #0b1620;
    --accent-2: #6cc4ff;
    --accent-soft: rgba(74, 168, 255, 0.14);
    --sale: #3fd39b;
    --danger: #ff6b7a;
    --glass: rgba(24, 32, 43, 0.6);
    --glass-strong: rgba(19, 26, 35, 0.72);
    --glass-solid: rgba(17, 24, 33, 0.92);
    --edge-hi: rgba(255, 255, 255, 0.18);
    --edge-lo: rgba(255, 255, 255, 0.04);
    --edge-line: rgba(255, 255, 255, 0.08);
    --inset: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
    --blob-1: #1b4f9c;
    --blob-2: #13597a;
    --blob-3: #2a3375;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070c12;
  --bg-2: #0c141e;
  --ink: #f5f7fa;
  --ink-2: #a7b3c2;
  --ink-3: #7b8796;
  --accent: #4aa8ff;
  --accent-ink: #0b1620;
  --accent-2: #6cc4ff;
  --accent-soft: rgba(74, 168, 255, 0.14);
  --sale: #3fd39b;
  --danger: #ff6b7a;
  --glass: rgba(24, 32, 43, 0.6);
  --glass-strong: rgba(19, 26, 35, 0.72);
  --glass-solid: rgba(17, 24, 33, 0.92);
  --edge-hi: rgba(255, 255, 255, 0.18);
  --edge-lo: rgba(255, 255, 255, 0.04);
  --edge-line: rgba(255, 255, 255, 0.08);
  --inset: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  --blob-1: #1b4f9c;
  --blob-2: #13597a;
  --blob-3: #2a3375;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "skip to content": hidden until it gets keyboard focus, then shown as a glass pill at the top */
.skip-link { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 1000; padding: 10px 18px; border-radius: 999px;
  background: var(--glass-solid); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transform: translateY(-160%); transition: transform var(--t); }
.skip-link:focus { transform: none; }
#app:focus, #app h1:focus { outline: none; }

/* ambient refraction field */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.ambient i { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.4; animation: drift 28s var(--spring) infinite alternate; }
.ambient i:nth-child(1) { width: 52vw; height: 52vw; background: var(--blob-1); top: -18vw; inset-inline-end: -10vw; }
.ambient i:nth-child(2) { width: 40vw; height: 40vw; background: var(--blob-2); top: 40vh; inset-inline-start: -14vw; animation-delay: -9s; }
.ambient i:nth-child(3) { width: 34vw; height: 34vw; background: var(--blob-3); bottom: -12vw; inset-inline-end: 20vw; animation-delay: -17s; }
@keyframes drift { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }

/* ---------------------------------------------------------------- glass primitives */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--r);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--shadow), var(--inset);
  isolation: isolate;
}
/* specular 1px gradient rim: bright top/left → faint bottom/right */
.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--edge-hi), var(--edge-lo) 55%, var(--edge-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* dynamic glare that follows the pointer (set by JS on .glare) */
.glare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.28), transparent 45%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
  z-index: 1;
}
.glare:hover::after { opacity: 1; }
.glass-strong { background: var(--glass-strong); }
.lift { transition: transform var(--t), box-shadow var(--t), background var(--t); }
.lift:hover { transform: translateY(-3px); }

/* ---------------------------------------------------------------- buttons & chips */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
/* hover: a 1px lift and a little more light – calm, not bouncy (only where there is a real pointer) */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-primary:hover { box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.5); filter: brightness(1.04); }
  .btn-glass:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge-hi)); }
  a.chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
  .socials a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--edge-hi)); }
  .faq summary:hover, .pd-acc summary:hover { color: var(--accent); }
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.btn-glass {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-color: var(--edge-hi);
  box-shadow: var(--shadow-sm), var(--inset);
}
.btn-sm { min-height: 38px; font-size: var(--fs-sm); padding: 0 1em; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge-hi);
  box-shadow: var(--inset);
  color: var(--ink);
  transition: background var(--t), color var(--t), transform var(--t);
}
a.chip:hover, button.chip:hover { transform: translateY(-1px); }
.chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); letter-spacing: 0.02em; }
.muted { color: var(--ink-2); }

/* ---------------------------------------------------------------- top message bar */
.topbar { position: relative; z-index: 51; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.topbar-list { display: flex; justify-content: center; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 5px 16px; }
.topbar-list li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-list li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; margin-inline-end: 23px; background: var(--accent); opacity: 0.55; }
.topbar svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--ink); }
.topbar a:hover span:not(.sr-only), .topbar a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  /* one line at a time, cross-fading in place */
  .topbar-list { display: grid; justify-items: center; padding: 6px 16px; min-height: 30px; }
  .topbar-list li { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; }
  .topbar-list li.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; }
  .topbar-list li + li::before { display: none; }
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  padding-block: 12px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 10px;
  padding-inline: 12px 18px;
  border-radius: 999px;
  background: var(--glass-strong);
}
/* Icons sit on the right (RTL start), the English logo on the left (end). */
.nav-actions { order: 0; }
.nav-links { order: 1; }
.brand { order: 2; margin-inline-start: auto; }
.brand img { height: 34px; width: auto; }
/* light/dark logo artwork follows the active theme (saved choice or system);
   the theme button shows the mode a click switches TO: moon in light mode, sun in dark mode */
.logo-dark, #theme-btn .ico-sun, #mm-theme .ico-sun { display: none; }
:root[data-theme="dark"] .logo-light, :root[data-theme="dark"] #theme-btn .ico-moon, :root[data-theme="dark"] #mm-theme .ico-moon { display: none; }
:root[data-theme="dark"] .logo-dark, :root[data-theme="dark"] #theme-btn .ico-sun, :root[data-theme="dark"] #mm-theme .ico-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light, :root:not([data-theme="light"]) #theme-btn .ico-moon, :root:not([data-theme="light"]) #mm-theme .ico-moon { display: none; }
  :root:not([data-theme="light"]) .logo-dark, :root:not([data-theme="light"]) #theme-btn .ico-sun, :root:not([data-theme="light"]) #mm-theme .ico-sun { display: block; }
}
.nav-links { display: flex; gap: 4px; list-style: none; padding: 0; margin-block: 0; }
.nav-links a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--ink-2); transition: background var(--t), color var(--t); }
.nav-links a:hover { color: var(--ink); background: var(--accent-soft); }
.nav-links a.is-active { color: var(--ink); background: var(--glass-solid); box-shadow: var(--shadow-sm), var(--inset); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--edge-hi);
  background: var(--glass-solid);
  box-shadow: var(--inset);
  cursor: pointer;
  transition: transform var(--t);
}
@media (hover: hover) { .icon-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--edge-hi)); } }
.icon-btn svg { width: 20px; height: 20px; }
.badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav .call-btn { display: none; }
}
/* phone menu: a glass drawer from the right */
.mm { position: fixed; inset: 0; z-index: 80; }
.mm[hidden] { display: none; }
.mm-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 14, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; }
/* the panel is only as tall as its content (no empty band above the buttons); it scrolls when the screen is short */
.mm-panel { position: absolute; top: 0; inset-inline-start: 0; width: min(88vw, 400px); max-height: 100dvh; display: flex; flex-direction: column;
  border-end-end-radius: 26px; border-bottom: 1px solid var(--edge-line);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border-inline-end: 1px solid var(--edge-line); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.6);
  transform: translateX(104%); transition: transform 0.36s var(--spring); }
.mm.is-open .mm-backdrop { opacity: 1; }
.mm.is-open .mm-panel { transform: none; }
.mm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px; border-bottom: 1px solid var(--edge-line); }
.mm-logo { order: 2; }                 /* buttons on the right (where the thumb is), the logo on the left */
.mm-logo img { height: 32px; width: auto; }
.mm-top-btns { display: flex; gap: 8px; }
.mm-top-btns .icon-btn { width: 44px; height: 44px; }
.mm-top-btns svg { width: 20px; height: 20px; }
.mm-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: grid; gap: 20px; align-content: start; }
.mm-label { margin: 0 4px 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.mm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; border: 1px solid var(--edge-line); }
.mm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--spring); }
.mm-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 8, 14, 0.82), rgba(4, 8, 14, 0.05) 60%); }
.mm-tile span { position: absolute; inset-inline: 12px; bottom: 10px; z-index: 1; font-weight: 800; font-size: 0.98rem; }
.mm-tile:hover img { transform: scale(1.05); }
.mm-shop { padding-top: 16px; border-top: 1px solid var(--edge-line); }
.mm-shop .mm-label { text-align: center; }
.mm-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-chip { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 12px; border-radius: 14px; font-size: var(--fs-sm); font-weight: 600; text-align: center;
  color: var(--ink); text-decoration: none; background: var(--glass); border: 1px solid var(--edge-line); }
.mm-chip:hover { border-color: var(--accent); }
.mm-chip.is-soon { color: var(--ink-3); }
.mm-chip small { padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; color: #b26b00; background: rgba(255, 176, 32, 0.16); }
:root[data-theme="dark"] .mm-chip small { color: #ffc861; }
.mm-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* page links: quiet line icons, a hairline between rows; the current page gets a thin accent bar */
.mm-nav ul { gap: 0; }
.mm-nav li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.mm-nav a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 6px 12px; border-radius: 12px; color: var(--ink); text-decoration: none;
  font-size: 1.02rem; font-weight: 500; letter-spacing: 0.005em; transition: background var(--t), color var(--t); }
.mm-nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mm-ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-3); transition: color var(--t); }
.mm-ico svg { width: 19px; height: 19px; stroke-width: 1.5; }
.mm-chev { width: 15px; height: 15px; margin-inline-start: auto; color: var(--ink-3); opacity: 0.6; }
.mm-nav a.is-active { font-weight: 700; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mm-nav a.is-active::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--accent); }
.mm-nav a.is-active .mm-ico, .mm-nav a:hover .mm-ico { color: var(--accent); }
.mm-foot { padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--edge-line); display: grid; gap: 10px; justify-items: center; }
.mm-cta { width: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.mm-cta .btn { min-height: 50px; justify-content: center; gap: 8px; }
.mm-cta .btn svg { width: 19px; height: 19px; }
.mm-hours { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }
.mm-foot .socials { justify-content: center; }
.mm a:focus-visible, .mm button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mm-panel, .mm-backdrop, .mm-tile img { transition: none; } }
:root.a11y-still .mm-panel, :root.a11y-still .mm-backdrop { transition: none; }

/* ---------------------------------------------------------------- sections */
main { display: block; min-height: 60vh; }
.section { padding-block: clamp(48px, 7vw, 96px); }
.section-tight { padding-block: clamp(28px, 4vw, 48px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { font-size: var(--fs-xl); font-weight: 750; }
.section-head p { color: var(--ink-2); max-width: 60ch; margin-top: 8px; }
.stack { display: grid; gap: 16px; }

/* hero */
.hero { padding-block: 14px 20px; }
.hero-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(8px, 2vw, 28px); }
.hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.035em; }
.hero h1 .accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 40ch; line-height: 1.5; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-media { position: relative; border-radius: calc(var(--r) - 8px); overflow: hidden; min-height: 380px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-chips { position: absolute; inset-inline-start: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 2; }
.hero-chips .chip { background: rgba(255, 255, 255, 0.28); color: #fff; border-color: rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); font-weight: 600; }
@media (max-width: 860px) {
  .hero-card { grid-template-columns: 1fr; }
  .hero-media { min-height: 280px; order: -1; }
}

/* hero slider – stacked slides crossfade; the box keeps the photos' 16:9 so nothing is cropped or jumps */
.hero-media.hero-slider { min-height: 0; aspect-ratio: 16 / 9; align-self: center; isolation: isolate; touch-action: pan-y; background: var(--bg-2); }
.hero-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hs-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(0.45, 0, 0.55, 1), visibility 0s linear 1s; }
.hs-slide.is-on { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1s cubic-bezier(0.45, 0, 0.55, 1); }
.hs-slide.was-on { opacity: 1; visibility: visible; z-index: 1; transition: none; } /* stays under the incoming slide – no dark dip */
/* slide labels: each chip fades itself (never its parent), so the glass blur stays live the whole time */
.hs-labels .hero-chips { z-index: 3; pointer-events: none; }
.hs-labels .chip { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.5s var(--spring); }
.hs-labels .is-on .chip { opacity: 1; transform: none; transition-delay: 0.35s; }
.hs-labels .is-on .chip + .chip { transition-delay: 0.45s; }
.hs-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 14, 20, 0.42), transparent 42%); pointer-events: none; }
.hs-controls { position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 4; display: flex; align-items: center; gap: 10px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
/* slide indicators: thin lines; the active one fills over --hs-ms (stays full while paused) */
.hs-dots { display: flex; align-items: center; gap: 6px; }
.hs-dot { position: relative; width: 22px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.38); cursor: pointer; overflow: visible; }
.hs-dot::before { content: ""; position: absolute; inset: -12px -3px; } /* bigger tap target */
.hs-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: right; }
.hs-dot[aria-current]::after { transform: scaleX(1); }
.hs-dot.run::after { animation: hs-fill var(--hs-ms, 3300ms) linear both; }
@keyframes hs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hs-pause { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #fff; opacity: 0.6; cursor: pointer; transition: opacity var(--t); }
.hs-pause svg { width: 11px; height: 11px; }
.hs-pause:hover { opacity: 1; }
.hs-dot:focus-visible, .hs-pause:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 860px) { .hero-media.hero-slider { align-self: stretch; } }
/* wide screens: fill the copy column's height; each slide's --focus keeps its key products in frame */
@media (min-width: 1100px) {
  .hero-media.hero-slider { aspect-ratio: auto; align-self: stretch; min-height: 420px; }
  .hs-slide img { object-position: var(--focus, 50%) 50%; }
}
@media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide.is-on, .hs-labels .chip, .hs-labels .is-on .chip { transition: none; } }

/* trust strip under the home hero – quiet facts, one thin row */
.trust-strip { list-style: none; margin: 14px 0 0; padding: 12px 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; border-radius: 999px; }
.trust-strip li { display: flex; align-items: center; padding-inline: clamp(14px, 2.2vw, 28px); }
.trust-strip li + li { border-inline-start: 1px solid var(--edge-line); }
.trust-strip li > a, .trust-strip li { gap: 10px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
/* the one link in the strip reads as a link, in the site's link language: blue text + a small chevron */
.trust-strip li > a { display: flex; align-items: center; text-decoration: none; color: var(--accent); font-weight: 600; transition: color var(--t); }
.trust-strip li > a:hover { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.ts-end { white-space: nowrap; }
.ts-go { display: inline-block; vertical-align: -2px; margin-inline-start: 4px; transition: transform var(--t); }
.ts-go svg { display: block; width: 14px; height: 14px; }
.trust-strip a:hover .ts-go { transform: translateX(-3px); }
.ts-ico { display: inline-grid; flex: none; width: 20px; height: 20px; color: var(--accent); }
.ts-ico svg { width: 100%; height: 100%; }
#reviews { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 560px) {
  .trust-strip { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; align-items: stretch; gap: 0; padding: 6px; border-radius: var(--r-md); } /* cells fill equal rows, so the dividers line up */
  /* phone: 2×2 tiles, each centred – icon above, label below – so the cells line up even when a label wraps */
  .trust-strip li, .trust-strip li > a { flex-direction: column; justify-content: center; text-align: center; gap: 6px; font-size: var(--fs-xs); }
  .trust-strip li { padding: 14px 8px; }
  .trust-strip li + li { border-inline-start: 0; }
  .trust-strip li:nth-child(even) { border-inline-start: 1px solid var(--edge-line); }
  .trust-strip li:nth-child(n+3) { border-top: 1px solid var(--edge-line); }
  .ts-ico { width: 18px; height: 18px; }
}

/* departments */
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .dept-grid { grid-template-columns: 1fr; } }
.dept { position: relative; overflow: hidden; display: flex; flex-direction: column; }
/* the title link stretches over the whole card; the sub-category tags sit above it as their own links */
.dept-link { color: inherit; text-decoration: none; outline: none; }
.dept-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dept:has(.dept-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@supports not selector(:has(*)) { .dept-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } }
.dept-go { display: inline-grid; color: var(--accent); }
.dept-go svg { width: 18px; height: 18px; }
.dept-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r) - 10px); margin: 10px 10px 0; }
.dept-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--spring); }
.dept:hover .dept-img img { transform: scale(1.05); }
.dept-body { padding: 18px 22px 22px; display: grid; gap: 14px; flex: 1; align-content: start; }
.dept-body h3 { font-size: var(--fs-lg); font-weight: 700; }
.dept-items { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dept-items a.chip { text-decoration: none; }
.dept-items a.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dept-items .chip { transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); }
.dept-items .chip:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px var(--accent), var(--inset);
  transform: translateY(-1px) scale(1.04);
}
.dept .more { margin-top: auto; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.dept.soon .more { color: var(--accent); font-size: var(--fs-sm); } /* "the next SmartShift flagship" */
.dept-img .soon-badge { font-size: var(--fs-xs); padding: 5px 12px; }
/* phones: every category card is the same height, and each card's three tags fit on one row.
   Lower photo (cropped so the products stay whole), title + chevron instead of a "see all" line, tighter spacing. */
@media (max-width: 640px) {
  .home .dept-grid { grid-auto-rows: 1fr; }
  .dept-img { aspect-ratio: 2.3 / 1; margin: 8px 8px 0; }
  .dept-img img { object-position: 50% 40%; }
  .dept-body { padding: 12px 14px 14px; gap: 8px; }
  .dept-body h3 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 1.15rem; }
  .dept-items { gap: 6px; flex-wrap: nowrap; }
  .dept-items .chip { padding: 0.4em 0.75em; font-size: 0.8rem; white-space: nowrap; }
}

/* ---------------------------------------------------------------- home categories, wide screens (≥641px)
   Two shop categories side by side + the coming smart-home flagship as a wide card. Phones keep .dept-grid. */
.cats2 { display: none; }
@media (min-width: 641px) {
  .cats2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .home .dept-grid { display: none; }
}

/* ---------------------------------------------------------------- card */
.cat2 { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; isolation: isolate;
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--spring); }
.cat2-media { position: relative; aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: calc(var(--r) - 10px); overflow: hidden; background: #fff; }
.cat2-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--spring); }
.cat2-body { display: grid; gap: 12px; padding: 20px 24px 24px; align-content: start; flex: 1; }
.cat2-title { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); font-weight: 750; letter-spacing: -0.02em; }
.cat2-desc { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; max-width: 46ch; }

/* the title link stretches over the whole card, so the card is one click target */
.cat2-link { color: inherit; text-decoration: none; outline: none; }
.cat2-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cat2:has(.cat2-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@supports not selector(:has(*)) { .cat2-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } }

/* sub-category tags: real links that sit above the stretched link */
.cat2-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 2px 0 0; padding: 0; }
.cat2-tags a.chip { min-height: 36px; text-decoration: none; font-size: var(--fs-sm); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.cat2-tags a.chip:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cat2-tags a.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* coming-soon items are plain text, so they never look clickable */
.cat2-coming { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.01em; }

.cat2-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }
.cat2-more svg { width: 16px; height: 16px; transition: transform 0.4s var(--spring); }

@media (hover: hover) {
  .cat2.is-link:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.55), var(--inset); }
  .cat2.is-link:hover .cat2-media img { transform: scale(1.045); }
  .cat2.is-link:hover .cat2-more svg { transform: translateX(-4px); }
}

/* ---------------------------------------------------------------- smart home: the coming flagship */
.cat2-soon { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, transparent), transparent 38%, transparent 62%, color-mix(in srgb, var(--accent) 35%, transparent)) border-box; }
.cat2-soon::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.cat2-soon .cat2-media { aspect-ratio: auto; min-height: 320px; margin: 10px; background: #0b1118; }
.cat2-soon .cat2-media img { object-position: var(--focus, 50%) 50%; }
.cat2-soon .cat2-body { align-content: center; padding: clamp(24px, 3vw, 44px); gap: 14px; }
.cat2-soon .cat2-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.cat2-soon .eyebrow { justify-self: start; }

.soon-badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: #fff; letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.soon-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: soon-pulse 2.4s ease-out infinite; }
@keyframes soon-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

/* reserved slot for a future "notify me at launch" button */
.cat2-notify { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cat2-notify[hidden] { display: none; }

/* ---------------------------------------------------------------- tablet: the flagship card stacks */
@media (max-width: 900px) {
  .cat2-soon { grid-template-columns: 1fr; }
  .cat2-soon .cat2-media { min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cat2, .cat2-media img, .cat2-more svg { transition: none; }
  .soon-badge i { animation: none; }
}

/* ---------------------------------------------------------------- home: "המוצרים המובילים שלנו"
   3 per row on desktop, 2 on tablet and phone. Square image (no product cropped), short title, one line,
   price incl. VAT, WhatsApp order. The title link stretches over the card; the WhatsApp button sits on top. */
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tp-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; isolation: isolate;
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--spring); }
.tp-media { position: relative; aspect-ratio: 1; margin: 10px 10px 0; border-radius: calc(var(--r) - 10px); overflow: hidden; background: #fff; }
.tp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--spring); }
.tp-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; flex: 1; }
.tp-title { font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.tp-link { color: inherit; text-decoration: none; outline: none; }
.tp-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tp-card:has(.tp-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@supports not selector(:has(*)) { .tp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } }
.tp-sub { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.tp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; margin-bottom: 12px; }
.tp-price b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tp-price small { width: 100%; color: var(--ink-3); font-size: var(--fs-xs); }
/* product cards site-wide: text centred */
.tp-body { text-align: center; }
.tp-price { justify-content: center; }
/* the order button always sits at the bottom, so buttons line up across a row */
.tp-wa { position: relative; z-index: 2; margin-top: auto; min-height: 46px; width: 100%; justify-content: center; gap: 8px; }
/* cards in one row line up: title, line, price and button share the row's tracks (every card has all four,
   the line may be empty), so a two-line title or description in one card moves its neighbours' prices too */
@supports (grid-template-rows: subgrid) {
  .tp-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .tp-body { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-items: start; }
  .tp-price { margin-bottom: 6px; }
  .tp-wa { align-self: end; margin-top: 6px; }
}
.tp-wa svg { width: 19px; height: 19px; flex: none; }
.tp-wa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 561px) { .tp-wa-short { display: none; } }
@media (hover: hover) {
  .tp-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.55), var(--inset); }
  .tp-card:hover .tp-media img { transform: scale(1.04); }
}
@media (max-width: 900px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) {
  .tp-grid { gap: 10px; }
  .tp-card { border-radius: 20px; }
  .tp-media { margin: 6px 6px 0; border-radius: 15px; }
  .tp-body { padding: 10px; gap: 3px; }
  .tp-title { font-size: 0.88rem; }
  .tp-sub { font-size: 0.74rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tp-price { margin-top: 4px; margin-bottom: 8px; }
  .tp-price b { font-size: 1.02rem; }
  .tp-price small { font-size: 0.66rem; }
  .tp-wa { min-height: 42px; font-size: 0.82rem; padding: 0 8px; gap: 6px; }
  .tp-wa svg { width: 16px; height: 16px; }
  .tp-wa-long { display: none; }
}

/* ---------------------------------------------------------------- water-systems category: "איזו מערכת מים מתאימה לכם?" */
.wc { display: grid; gap: 22px; }
.wc-head { text-align: center; display: grid; gap: 8px; justify-items: center; }
.wc-head h2 { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; }
.wc-head p { color: var(--ink-2); max-width: 56ch; }
.wc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.wc-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; width: 100%; } /* e.g. while the package is a draft */
.wc-card { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; }
.wc-media { position: relative; aspect-ratio: 4 / 3; margin: 10px 10px 0; border-radius: calc(var(--r) - 10px); overflow: hidden; background: #fff; }
.wc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wc-kind { position: absolute; top: 12px; inset-inline-start: 12px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: #fff;
  background: rgba(10, 16, 24, 0.45); border: 1px solid rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wc-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; flex: 1; }
.wc-body h3 { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.015em; }
.wc-desc { color: var(--ink-2); line-height: 1.55; }
.wc-for { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); font-weight: 600; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); }
.wc-for svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }
.wc-inc { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.wc-inc li { display: flex; gap: 8px; align-items: flex-start; }
.wc-inc li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2L6.6 12l1.4-1.4 2.8 2.8 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2L6.6 12l1.4-1.4 2.8 2.8 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wc-inc-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 4px; }
.wc-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; }
.wc-price b { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wc-price small { color: var(--ink-3); font-size: var(--fs-xs); }
.wc-actions { display: grid; gap: 8px; }
.wc-actions .btn { width: 100%; justify-content: center; min-height: 48px; gap: 8px; }
.wc-actions .btn svg { width: 19px; height: 19px; }
.wc-more { justify-self: center; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.wc-more svg { width: 16px; height: 16px; }
.wc-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--r-md); }
.wc-help p { font-weight: 600; max-width: 60ch; }
.wc-help .btn { gap: 8px; }
.wc-help .btn svg { width: 19px; height: 19px; }
@media (max-width: 900px) { .wc-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; width: 100%; } }
@media (max-width: 560px) {
  .wc-body { padding: 16px; }
  .wc-help { flex-direction: column; align-items: stretch; text-align: center; }
  .wc-help .btn { justify-content: center; }
}

/* ---------------------------------------------------------------- product page: model picker + WhatsApp order */
.pdp-models { display: grid; gap: 10px; }
.pdp-models > b { font-size: var(--fs-sm); }
.model-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.model-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 14px 5px 6px; border-radius: 14px; border: 1px solid var(--edge-line);
  background: var(--glass-solid); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--t), background var(--t); }
.model-opt img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background: #fff; }
.model-opt:hover { border-color: var(--accent); }
.model-opt[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.model-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdp-wa { width: 100%; justify-content: center; min-height: 52px; gap: 8px; }
.pdp-wa svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- product listings (/shop, /shop/<category>) */
.lst-hero { padding-bottom: 6px; }
.lst-head { display: grid; grid-template-columns: 1fr minmax(220px, 340px); gap: 24px; align-items: center; padding: 10px; }
.lst-head-copy { display: grid; gap: 10px; padding: clamp(14px, 2.4vw, 30px); align-content: center; }
.lst-head-copy h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.lst-head-copy p { max-width: 62ch; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lst-count { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.lst-head-img { aspect-ratio: 4 / 3; border-radius: calc(var(--r) - 10px); overflow: hidden; background: #fff; }
.lst-head-img img { width: 100%; height: 100%; object-fit: cover; }

/* two-level navigation: departments (tabs) → sections (pills) → sub-sections (pills) */
.lst-nav { display: grid; gap: 10px; margin-block: 14px 6px; }
.lst-tabs, .lst-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lst-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink-2); background: var(--glass); border: 1px solid var(--edge-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background var(--t), color var(--t), border-color var(--t); }
.lst-tab:hover { color: var(--ink); border-color: var(--accent); }
.lst-tab.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 20px -12px var(--accent), var(--inset); }
.lst-tab.is-soon { color: var(--ink-3); }
.soon-tag { padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.lst-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2); border: 1px solid var(--edge-line); background: var(--glass-solid); transition: background var(--t), color var(--t), border-color var(--t); }
.lst-pill:hover { color: var(--ink); border-color: var(--accent); }
.lst-pill.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.lst-pill .n { font-size: 0.72rem; font-variant-numeric: tabular-nums; opacity: 0.65; }
.lst-tab:focus-visible, .lst-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lst-toolbar { margin-bottom: 16px; }
.lst-sort .input, .lst-type .input { min-height: 46px; border-radius: 999px; padding-inline: 16px 36px; width: auto; }
.lst-type { display: none; }                 /* phones only – desktop shows the section pills */
/* glass drop-down (replaces the browser's select menu) */
.fsel { position: relative; min-width: 0; }
.fsel.is-open { z-index: 30; }
.fsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: start; color: var(--ink);
  font: inherit; font-weight: 600; font-size: var(--fs-sm); }
.lst-sort .fsel-btn, .lst-type .fsel-btn { padding-inline: 18px 14px; }
.fsel-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-btn svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); transition: transform var(--t); }
.fsel.is-open .fsel-btn { border-color: var(--accent); }
.fsel.is-open .fsel-btn svg { transform: rotate(180deg); color: var(--accent); }
.fsel-list { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 100%; width: max-content; max-width: min(88vw, 340px);
  max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none;
  border-radius: 22px; border: 1px solid var(--edge-line); background: color-mix(in srgb, var(--glass-solid) 94%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--inset); outline: none; animation: fsel-in 0.18s ease-out; transform-origin: top; }
.lst-sort .fsel-list { inset-inline: auto 0; }      /* the sort menu sits at the far side – open toward the middle */
@keyframes fsel-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.fsel-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 8px 14px;
  border-radius: 14px; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.fsel-list [role="option"].sub { padding-inline-start: 28px; }
.fsel-list [role="option"].is-active { background: var(--accent-soft); color: var(--ink); }
.fsel-list [role="option"][aria-selected="true"] { color: var(--ink); font-weight: 700; }
.fsel-list [role="option"] svg { width: 16px; height: 16px; flex: none; color: var(--accent); visibility: hidden; }
.fsel-list [role="option"][aria-selected="true"] svg { visibility: visible; }
.fsel-list:focus-visible { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
.lst-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lst-grid > [hidden] { display: none; }
.lst-empty { padding: 22px; text-align: center; border-radius: var(--r-md); }
.lst-empty a { color: var(--accent); font-weight: 600; }
/* the photo fills the whole frame (the owner's choice); no blurred copy behind it – that blur on every card made
   scrolling the shop heavy on phones */
.lc-media img { object-fit: cover; }
.lc .tp-title { font-size: 1.02rem; }
.lc .tp-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lc-go { pointer-events: none; }            /* visual cue only – the whole card already opens the product page */
.lc-go svg { width: 16px; height: 16px; }
.tp-card:hover .lc-go { border-color: var(--accent); color: var(--accent); }
@media (max-width: 1100px) { .lst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .lst-head { grid-template-columns: 1fr; gap: 0; }
  .lst-head-img { order: -1; aspect-ratio: 21 / 9; }   /* lower on phones so products appear sooner */
  .lst-head-copy { padding: 14px 10px 10px; gap: 8px; }
  .lst-head-copy p { -webkit-line-clamp: 3; font-size: var(--fs-sm); }
  /* phones: departments as one switch that fits the screen; sections move into the "product type" menu */
  .lst-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge-line); }
  .lst-tab { justify-content: center; min-height: 42px; padding: 0 8px; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lst-pills { display: none; }
  .lst-tabs-sub { display: none; }
  .lst-nav:has(.lst-tabs-sub) { margin-block: 0; }                     /* nothing left to show in it on phones */
  .lst-toolbar:not(:has(.search)) #shop-count { display: none; }       /* no search: the count is already in the header */
  .lst-type { display: block; }
  .toolbar.lst-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }  /* search on its own row; type + sort side by side */
  .lst-toolbar .search, .lst-toolbar #shop-count { grid-column: 1 / -1; }
  .lst-toolbar:not(:has(.lst-sort)) .lst-type { grid-column: 1 / -1; }   /* no sort menu (5 products or fewer) */
  .lst-type .input, .lst-sort .input { width: 100%; min-width: 0; }
  .lst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) { .lc .tp-title { font-size: 0.88rem; } }

/* product grid & card */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.p-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); }
.p-media { position: relative; aspect-ratio: 1; margin: 8px; border-radius: calc(var(--r) - 8px); overflow: hidden; background: #fff; }
.p-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--spring), transform 0.8s var(--spring); }
.p-media img.alt { opacity: 0; }
.p-card:hover .p-media img.alt { opacity: 1; }
.p-card:hover .p-media img { transform: scale(1.04); }
.p-flag { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--sale); color: #fff; font-variant-numeric: tabular-nums; }
.p-body { padding: 6px 16px 16px; display: grid; gap: 8px; flex: 1; align-content: space-between; }
.p-name { font-weight: 600; font-size: 0.98rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.p-body { text-align: center; justify-items: center; }   /* product cards site-wide: text centred */
.p-body .price { justify-content: center; }
.price .now { font-weight: 750; font-size: 1.1rem; }
.price .was { color: var(--ink-3); text-decoration: line-through; font-size: var(--fs-sm); }
@media (max-width: 560px) { .p-body { padding: 4px 12px 12px; } .p-name { font-size: 0.88rem; } .price .now { font-size: 1rem; } }

/* values */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } }
.value { padding: 22px; display: grid; gap: 6px; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.value .ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.value .ico svg { width: 22px; height: 22px; }
.value h3 { font-size: var(--fs-md); font-weight: 700; }
.value p { color: var(--ink-2); font-size: var(--fs-sm); }

/* about split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3.4; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: grid; gap: 14px; color: var(--ink-2); font-size: var(--fs-md); max-width: 62ch; }
.prose strong { color: var(--ink); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 8px; }
.stat { padding: 22px 16px; text-align: center; }
.stat + .stat { border-inline-start: 1px solid var(--edge-line); }
.stat b { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--accent) 70%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.stat span { color: var(--ink-2); font-size: var(--fs-sm); }
/* key figures, still and understated */
.stats-pro { margin: 0; padding: 6px; }
.stats-pro .stat { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; padding: 22px 10px; text-align: center; }
.stats-pro dd { order: -1; }                 /* figure first, label under it – figures line up even when a label wraps */
.stats-pro dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.stats-pro dd { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats-pro dd::after { content: ""; display: block; width: 28px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: var(--accent); opacity: 0.7; }

/* reviews rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 16px; overflow-x: auto; padding: 8px 4px 28px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.review { padding: 22px; display: grid; gap: 12px; align-content: start; }
.review .stars { color: #f5b301; letter-spacing: 2px; font-size: 0.95rem; }
.review p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }
.review .who { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); }
.review .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; }
.review .src { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.rating-summary { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; }
.rating-summary b { font-size: var(--fs-lg); }

/* brands */
.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.brand-tile { display: grid; place-items: center; width: 160px; height: 84px; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.85); border: 1px solid var(--edge-line); }
.brand-tile img { max-height: 48px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

/* posts */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
@media (max-width: 400px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { overflow: hidden; display: flex; flex-direction: column; }
.post-card .img { aspect-ratio: 3 / 2; margin: 8px; border-radius: calc(var(--r) - 8px); overflow: hidden; }
.post-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--spring); }
.post-card:hover .img img { transform: scale(1.05); }
.post-card .body { padding: 8px 20px 22px; display: grid; gap: 10px; }
.post-card h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }
.post-card p { color: var(--ink-2); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* faq */
.faq { display: grid; gap: 12px; }
.faq details { padding: 0; border-radius: var(--r-md); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: transform var(--t); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .a { padding: 0 22px 20px; color: var(--ink-2); max-width: 75ch; }

/* install prep */
.prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .prep-grid { grid-template-columns: 1fr; } }
.prep { padding: 22px; display: grid; gap: 14px; align-content: start; }
.prep h3 { font-size: var(--fs-md); font-weight: 700; }
.prep h4 { font-size: var(--fs-sm); font-weight: 650; color: var(--accent); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: start; font-size: var(--fs-sm); }
.checklist li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231259b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.note { font-size: var(--fs-xs); color: var(--ink-3); }

/* forms */
.contact-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; overflow: hidden; }
@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; } }
.contact-info { padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; align-content: start; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent-2) 70%, var(--accent))); color: #fff; border-radius: calc(var(--r) - 8px); margin: 8px; }
.contact-info h2 { font-size: var(--fs-xl); }
.contact-info .line { display: grid; gap: 2px; }
.contact-info .line small { opacity: 0.8; }
.contact-info .line b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.contact-info .socials a { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.form { padding: clamp(20px, 3vw, 36px); display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge-line);
  background: var(--glass-solid);
  box-shadow: var(--inset);
  transition: border-color var(--t), box-shadow var(--t);
}
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.has-error .input { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: var(--fs-xs); }
.check { display: flex; gap: 10px; align-items: start; font-size: var(--fs-sm); color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.check a { color: var(--accent); text-decoration: underline; }
.form-status { padding: 14px 16px; border-radius: var(--r-sm); font-weight: 600; }
.form-status.ok { background: color-mix(in srgb, var(--sale) 14%, transparent); color: var(--sale); }
.form-status.bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.hp { position: absolute; inset-inline-start: -9999px; }

/* page hero (inner pages) */
.page-hero { padding-block: 24px 8px; }
.page-hero .glass { padding: clamp(24px, 4vw, 48px); display: grid; gap: 10px; }
.page-hero h1 { font-size: var(--fs-xl); font-weight: 800; }
.crumbs { display: flex; gap: 8px; font-size: var(--fs-sm); color: var(--ink-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; } /* tap target (WCAG 2.5.8) */
/* "back one level" – a clear button on phones (desktop has the full breadcrumb path), and again at the end of product pages */
.back-link { display: none; }
.back-link, .pdp-back .btn { align-items: center; gap: 6px; }
.pdp-back { display: flex; justify-content: center; padding-block: 8px 4px; }
.pdp-back .btn svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .back-link { display: inline-flex; min-height: 44px; padding: 0 16px 0 12px; margin-bottom: 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700;
    color: var(--ink); background: var(--glass-strong); border: 1px solid var(--edge-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
  .back-link svg { color: var(--accent); flex: none; }
  .back-link span { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pdp-top .crumbs { font-size: var(--fs-xs); }
}

/* shop layout */
.shop { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; } }
.shop-side { position: sticky; top: calc(var(--header-h) + 36px); padding: 16px; display: grid; gap: 4px; }
.shop-side a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.shop-side a:hover { background: var(--accent-soft); color: var(--ink); }
.shop-side a.is-active { background: var(--accent); color: var(--accent-ink); }
.shop-side a.child { padding-inline-start: 26px; }
.shop-side .count { font-variant-numeric: tabular-nums; opacity: 0.7; }
.shop-side h3 { font-size: var(--fs-sm); color: var(--ink-3); padding: 6px 12px; font-weight: 600; }
@media (max-width: 900px) {
  .shop-side { position: static; display: flex; overflow-x: auto; gap: 8px; padding: 10px; border-radius: 999px; }
  .shop-side h3 { display: none; }
  .shop-side a { white-space: nowrap; flex: none; border-radius: 999px; }
  .shop-side a.child { padding-inline-start: 12px; }
}
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.search { position: relative; flex: 1; max-width: 360px; min-width: 200px; }
.search .input { padding-inline-start: 44px; border-radius: 999px; min-height: 46px; }
.search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }

/* product page */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.gallery { padding: 10px; display: grid; gap: 10px; position: sticky; top: calc(var(--header-h) + 36px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery .main { aspect-ratio: 1; border-radius: calc(var(--r) - 10px); overflow: hidden; background: #fff; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: #fff; cursor: pointer; transition: border-color var(--t), transform var(--t); }
.thumbs button:hover { transform: scale(1.05); }
.thumbs button.is-active { border-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.pdp-info h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 750; line-height: 1.25; }
.pdp-info .price .now { font-size: 1.8rem; }
.pdp-info .price .save { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sale) 14%, transparent); color: var(--sale); font-weight: 700; font-size: var(--fs-sm); }
.rich { color: var(--ink-2); display: grid; gap: 12px; line-height: 1.75; }
.rich strong { color: var(--ink); }
.rich h2 { font-size: var(--fs-lg); color: var(--ink); margin-top: 12px; }
.rich h3 { font-size: var(--fs-md); color: var(--ink); margin-top: 8px; }
.rich ul, .rich ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.rich img { border-radius: var(--r-md); margin-block: 8px; }
.rich a { color: var(--accent); text-decoration: underline; }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rich td, .rich th { border: 1px solid var(--edge-line); padding: 8px 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { cursor: pointer; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--edge-line); background: var(--glass-solid); }
.qty button { width: 44px; height: 46px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; }
.qty span { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.buy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px) { .perks { grid-template-columns: 1fr; } }
.perk { padding: 12px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: var(--fs-xs); display: grid; gap: 2px; }
.perk b { font-size: var(--fs-sm); color: var(--ink); }
.tabs-body { padding: clamp(20px, 3vw, 36px); }

/* article */
.article { max-width: 780px; margin-inline: auto; }
.article .cover { border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 24px; }
.article .cover img { width: 100%; height: 100%; object-fit: cover; }
.article .rich { font-size: 1.06rem; padding: clamp(20px, 4vw, 44px); }

/* videos */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .video-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .wk-videos .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wk-videos .video .play { width: 46px; height: 46px; } }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; cursor: pointer; border: 0; padding: 0; width: 100%; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--t), transform 0.8s var(--spring); }
.video:hover img { opacity: 1; transform: scale(1.03); }
.video .play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-grid { columns: 3 240px; column-gap: 14px; }
.gallery-grid img { width: 100%; border-radius: var(--r-md); margin-bottom: 14px; break-inside: avoid; }

/* cart drawer */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(5, 12, 24, 0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t); }
.drawer-backdrop.open { opacity: 1; }
.drawer {
  position: fixed;
  z-index: 71;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  inset-inline-end: max(12px, env(safe-area-inset-left, 0px));
  width: min(420px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  transform: translateX(-110%);
  transition: transform 0.5s var(--spring);
}
.drawer.open { transform: none; }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--edge-line); }
.drawer .items { flex: 1; overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.drawer footer { padding: 16px 20px 20px; border-top: 1px solid var(--edge-line); display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); background: var(--glass-solid); }
.cart-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.cart-item .n { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.cart-item .o { font-size: var(--fs-xs); color: var(--ink-3); }
.cart-item .rm { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; }
.total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 10px; display: grid; gap: 14px; justify-items: center; }

/* footer */
.site-footer { padding-block: 40px 28px; }
.footer-card { padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .footer-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-card { grid-template-columns: 1fr; } }
.footer-card h4, .footer-card .f-h { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: 12px; font-weight: 600; }
.footer-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.footer-card a:hover { color: var(--accent); }
.footer-card li a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-card .brand { order: 0; margin-inline-start: 0; justify-self: start; }
.footer-card .brand img { height: 40px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--edge-hi); background: var(--glass-solid); transition: transform var(--t); }
.socials a:hover { transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.legal { margin-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xs); color: var(--ink-3); }

/* floating whatsapp */
.fab {
  position: fixed;
  z-index: 40;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  inset-inline-start: max(20px, env(safe-area-inset-left, 0px));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 16px 32px -10px rgba(37, 211, 102, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: transform var(--t);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; }
.fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* floating call button – stacked right above WhatsApp */
.fab.fab-call { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px + 58px + 12px); background: var(--accent); color: #fff;
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 1px rgba(255, 255, 255, 0.45); }
.fab.fab-call svg { width: 24px; height: 24px; }

/* accessibility button – bottom corner opposite WhatsApp, quiet glass */
.fab.fab-a11y { inset-inline-start: auto; inset-inline-end: max(20px, env(safe-area-inset-right, 0px)); width: 50px; height: 50px; padding: 0; border: 1px solid var(--edge-hi); cursor: pointer;
  background: var(--glass-strong); color: var(--accent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-sm), var(--inset); }
.fab.fab-a11y svg { width: 26px; height: 26px; }
.fab.fab-a11y.is-set::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }

.a11y-panel { position: fixed; z-index: 41; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); inset-inline-end: max(20px, env(safe-area-inset-right, 0px));
  width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto; padding: 16px; border-radius: var(--r-md); display: grid; gap: 14px; box-shadow: var(--shadow); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; }
.a11y-head h2 { font-size: var(--fs-md); font-weight: 700; }
.a11y-head .icon-btn { width: 36px; height: 36px; }
.a11y-text { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); font-weight: 600; }
.a11y-step { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--accent-soft); }
.a11y-step button { width: 40px; height: 36px; border: 0; border-radius: 999px; background: var(--glass-solid); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.a11y-step output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt { display: grid; justify-items: center; gap: 6px; min-height: 78px; padding: 12px 8px; border-radius: var(--r-sm); border: 1px solid var(--edge-line);
  background: var(--glass-solid); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.a11y-opt svg { width: 24px; height: 24px; color: var(--accent); }
.a11y-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.a11y-opt[aria-pressed="true"] svg { color: currentColor; }
.a11y-reset { min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.a11y-panel button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* accessibility modes (set on <html> by the menu) */
:root[data-a11y-text="1"] { font-size: 112.5%; }
:root[data-a11y-text="2"] { font-size: 125%; }
:root[data-a11y-text="3"] { font-size: 137.5%; }
:root.a11y-contrast { --ink-2: var(--ink) !important; --ink-3: var(--ink) !important; --glass: var(--glass-solid) !important; --glass-strong: var(--glass-solid) !important; --edge-line: color-mix(in srgb, var(--ink) 45%, transparent) !important; }
:root.a11y-contrast .ambient { display: none; }
:root.a11y-contrast body { background: var(--bg); }
:root.a11y-links a:not(.btn):not(.fab) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
:root.a11y-links a:not(.fab):focus-visible, :root.a11y-links a:not(.fab):hover { outline: 2px solid var(--accent); outline-offset: 2px; }
:root.a11y-still *, :root.a11y-still *::before, :root.a11y-still *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
:root.a11y-font body, :root.a11y-font button, :root.a11y-font input, :root.a11y-font select, :root.a11y-font textarea { font-family: Arial, "Helvetica Neue", system-ui, sans-serif !important; letter-spacing: 0.01em; word-spacing: 0.06em; }

/* categories directory */
.cat-cta { display: flex; justify-content: center; margin-top: 28px; }
.cat-jump { position: sticky; top: calc(var(--header-h) + 28px); z-index: 20; margin-block: 16px 4px; }
.cat-jump .glass { display: flex; gap: 6px; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: var(--glass-strong); box-shadow: var(--shadow-sm), var(--inset); }
.cat-jump a { flex: none; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); transition: background var(--t), color var(--t); }
.cat-jump a:hover { background: var(--accent-soft); color: var(--accent); }
.cat-jump a.all { margin-inline-start: auto; color: var(--accent); }
.cat-group { scroll-margin-top: calc(var(--header-h) + 96px); }
.cat-head { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; padding: 10px; margin-bottom: 20px; }
.cat-head-img { aspect-ratio: 16 / 10; border-radius: calc(var(--r) - 10px); overflow: hidden; }
.cat-head-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-head-copy { display: grid; gap: 8px; padding: 10px 6px 10px 16px; }
.cat-head-copy h2 { font-size: var(--fs-xl); font-weight: 800; }
.cat-head-copy p { max-width: 60ch; }
.cat-head.soon .cat-head-img img { filter: saturate(0.6); }
@media (max-width: 720px) { .cat-head { grid-template-columns: 1fr; gap: 6px; } .cat-head-copy { padding: 8px 10px 12px; } }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-grid > :first-child { grid-column: span 2; grid-row: span 2; }
.cat-grid > :first-child .cat-media { aspect-ratio: auto; flex: 1; min-height: 260px; }
.cat-grid > :first-child h3 { font-size: var(--fs-lg); }
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .cat-grid > :first-child { grid-row: auto; } }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 560px) {
  .cat-grid > :first-child .cat-media { min-height: 0; aspect-ratio: 16 / 10; }
  .cat-body { padding: 10px 12px 14px; gap: 6px; }
  .cat-body h3 { font-size: 0.95rem; }
  .cat-body p { font-size: var(--fs-xs); }
}
.cat-grid-soon { grid-template-columns: repeat(3, 1fr); }
.cat-grid-soon > :first-child { grid-column: auto; grid-row: auto; }
@media (max-width: 560px) { .cat-grid-soon { grid-template-columns: 1fr; } }

.cat-card { display: flex; flex-direction: column; overflow: hidden; }
.cat-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.cat-card .cat-link:focus-visible { outline: none; }
.cat-media { position: relative; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: calc(var(--r) - 8px); overflow: hidden; background: #fff; }
.cat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--spring); }
.cat-card:hover .cat-media img { transform: scale(1.05); }
.cat-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.cat-body { padding: 14px 18px 18px; display: grid; gap: 8px; flex: 1; align-content: start; }
.cat-body h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.cat-body p { color: var(--ink-2); font-size: var(--fs-sm); }
/* the whole card is clickable through the title link; sub-category chips sit above it */
.cat-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.cat-subs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 3; padding: 0; margin: 2px 0 0; }
.cat-subs .chip { font-size: var(--fs-xs); }
.cat-subs .chip:hover { background: var(--accent); color: var(--accent-ink); }
.cat-subs .n { font-variant-numeric: tabular-nums; opacity: 0.6; }
.cat-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.cat-card:hover .cat-foot svg { transform: translateX(-4px); }
.cat-foot svg { transition: transform var(--t); }
.cat-card.soon { min-height: 120px; justify-content: center; opacity: 0.85; }
.cat-card.soon .cat-body { align-content: center; justify-items: start; }
.cat-card.soon .cat-badge { position: static; }
.muted-badge { background: var(--accent-soft) !important; color: var(--accent) !important; }
/* phones: a compact shop directory, so products are reached in about two screens instead of five.
   Departments are plain text dividers (title + count, no image); categories are tiles, two per row, centred,
   with the department's most-requested category across the full width; "smart home – coming soon" is one line. */
.ph-top, .cat-badge-m { display: none; }
@media (max-width: 720px) {
  /* shop root on phones: "back to home" and "all products" share one row in place of the breadcrumb */
  .ph-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  .ph-top .back-link { margin-bottom: 0; }
  .page-hero .glass:has(.ph-top) .crumbs { display: none; }
  .page-hero .glass:has(.ph-top) :is(h1, p) { text-align: center; margin-inline: auto; }
  .shop-skip { gap: 6px; min-height: 44px; flex: none; }
  #all-products { scroll-margin-top: calc(var(--header-h) + 24px); }
  .cat-jump { display: none; }
  .cat-group { padding-block: 16px 8px; }
  /* department: a text divider */
  .cat-head, .cat-head.glass { display: block; padding: 0 4px 10px; margin-bottom: 12px; text-align: center; border: 0; border-bottom: 1px solid var(--edge-line);
    border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cat-head.glass::before, .cat-head.glass::after { display: none; }   /* no glass edge – just the line below */
  .cat-head-img { display: none; }
  .cat-head-copy { padding: 0; gap: 2px; justify-items: center; }
  .cat-head-copy h2 { font-size: 1.3rem; }
  .cat-head-copy p, .cat-head-copy .btn { display: none; }
  /* categories: centred tiles */
  .cat-grid, .cat-grid-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-grid > :first-child { grid-column: 1 / -1; grid-row: auto; }
  .cat-card { flex-direction: column; text-align: center; }
  .cat-media, .cat-grid > :first-child .cat-media { flex: none; width: auto; min-height: 0; aspect-ratio: 4 / 3; margin: 6px 6px 0; border-radius: 14px; }
  .cat-grid > :first-child .cat-media { aspect-ratio: 16 / 8; }
  .cat-body { padding: 8px 8px 12px; gap: 2px; justify-items: center; align-content: start; }
  .cat-body h3, .cat-grid > :first-child h3 { font-size: 0.92rem; line-height: 1.3; }
  .cat-grid > :first-child h3 { font-size: 1.02rem; }
  .cat-body p, .cat-subs { display: none; }
  .cat-media .cat-badge { display: none; }                  /* the badge moves above the title */
  .cat-badge-m { display: inline-block; position: static; margin-bottom: 2px; padding: 1px 8px; font-size: 0.66rem; color: var(--accent); background: var(--accent-soft); }
  .cat-foot { justify-content: center; padding-top: 2px; font-size: var(--fs-xs); }
  .cat-foot svg { display: none; }
  .cat-group:has(.cat-grid-soon) .cat-grid-soon { display: none; }
  .cat-head.soon h2::after { content: "בקרוב"; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; vertical-align: middle; color: var(--accent); background: var(--accent-soft); }
}

.cat-help { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(22px, 4vw, 40px); }
.cat-help h2 { font-size: var(--fs-lg); font-weight: 750; margin-bottom: 6px; }

/* toast */
.toast { position: fixed; z-index: 90; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); left: 50%; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 999px; background: var(--glass-solid); font-weight: 600; opacity: 0; transition: opacity var(--t), transform var(--t); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* skeleton */
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--glass) 0%, var(--glass-strong) 50%, var(--glass) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; min-height: 280px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* entrance */
.reveal { animation: rise 0.7s var(--spring) both; }
/* home entrances (set by revealSections): sections slide, the value cards fade and rise in turn */
.rv { transform: translate3d(0, 18px, 0); will-change: transform; }
.rv.rv-in { transform: none; transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1); }
.vc { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); will-change: opacity, transform; }
.vc.vc-in { opacity: 1; transform: none; transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.18, 0.8, 0.22, 1); }
@keyframes rise { from { transform: translateY(14px); opacity: 0.001; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.86); --glass-strong: rgba(255, 255, 255, 0.92); }
}

/* Phones and tablets: smooth scrolling. A live background blur on every card, chip and button (100+ on the shop page)
   over background blobs that never stop moving made the phone redraw all of them on every frame. Here the content
   panels become plain frosted colour (the look stays – the blobs behind are soft anyway), the blobs stand still, and
   only the floating header and the menus keep a real blur. Sections off-screen are skipped until scrolled near. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  :root { --blur: none; --glass: rgba(255, 255, 255, 0.78); --glass-strong: rgba(255, 255, 255, 0.88); }
  :root[data-theme="dark"] { --glass: rgba(24, 32, 43, 0.82); --glass-strong: rgba(19, 26, 35, 0.9); }
  .ambient i { animation: none; }
  .nav.glass, .mm-panel { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
  .home > section:not(.hero), .site-footer, .cat-info { content-visibility: auto; contain-intrinsic-size: auto 600px; }
}
@media (prefers-color-scheme: dark) and ((hover: none) and (pointer: coarse)), (prefers-color-scheme: dark) and (max-width: 900px) {
  :root:not([data-theme="light"]) { --glass: rgba(24, 32, 43, 0.82); --glass-strong: rgba(19, 26, 35, 0.9); }
}

/* ---------------------------------------------------------------- home page sections */
/* one even rhythm between every home section */
.home > section:not(.hero) { padding-block: clamp(32px, 4.5vw, 56px); }
.home > .hero + section { padding-top: clamp(16px, 2vw, 24px); }   /* departments peek in above the fold on laptops */

/* about + service video */
.about-video { grid-template-columns: 1fr 1.1fr; }
.video-card { padding: 8px; border-radius: var(--r); }
.video-card .video { display: block; border-radius: calc(var(--r) - 8px); }
.video .video-tag { position: absolute; inset-inline-start: 14px; bottom: 14px; z-index: 1; background: rgba(255, 255, 255, 0.28); color: #fff; border-color: rgba(255, 255, 255, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); font-weight: 600; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* customers say: tabs + carousel */
.carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-strong); }
.seg-btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background var(--t), color var(--t); }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -8px var(--accent), var(--inset); }
.carousel-nav { display: flex; gap: 8px; }
.carousel-nav .icon-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.carousel-bar ~ .rail { scrollbar-width: none; padding-bottom: 48px; margin-bottom: -24px; }
.carousel-bar ~ .rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; }
/* pause / play for the self-moving reviews and chats */
.rail-auto-wrap { display: flex; justify-content: center; margin-top: 4px; }
/* the pause button stays for keyboard / screen-reader users only; mouse and touch already pause the rail */
.rail-auto-wrap:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
/* WhatsApp call-out between home sections */
.wa-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; text-align: center; }
.wa-cta p { color: var(--ink-2); font-weight: 500; }
.wa-cta-btn { gap: 8px; min-height: 42px; padding: 0 20px; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, #25d366 12%, var(--glass-solid)); border: 1px solid color-mix(in srgb, #25d366 45%, transparent);
  box-shadow: 0 8px 20px -14px rgba(37, 211, 102, 0.7), var(--inset); }
.wa-cta-btn:hover { background: color-mix(in srgb, #25d366 20%, var(--glass-solid)); border-color: #25d366; }
.wa-cta-btn svg { width: 18px; height: 18px; flex: none; color: #25d366; }
:root[data-theme="light"] .wa-cta-btn svg { color: #1a9e4b; }
#reviews .wa-cta { margin-top: 36px; }
@media (max-width: 560px) { .wa-cta { flex-direction: column; gap: 10px; margin-top: 22px; } .wa-cta p { font-size: var(--fs-sm); } }
.rail-auto { width: 40px; height: 40px; }
.rail-auto svg, .posts-auto svg { width: 14px; height: 14px; }
.posts-auto, .pd-rev-auto, .pd-rel-auto { width: 40px; height: 40px; }
@media (min-width: 561px) { .posts-auto-wrap { display: none; } }   /* the guides only form a moving row on phones */
.chat-rail { grid-auto-columns: minmax(240px, 290px); align-items: start; }
.chat-card { display: block; padding: 0; border: 0; background: none; border-radius: 24px; cursor: zoom-in; transition: transform var(--t); }
.chat-card:hover { transform: translateY(-2px); }
.chat-card img { width: 100%; height: auto; }
.lightbox { padding: 0; border: 0; background: none; overflow: visible; width: min(92vw, 520px); max-height: 92vh; }
.lightbox::backdrop { background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
.lightbox img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; }
.lightbox .lb-close { position: absolute; top: -10px; inset-inline-end: -6px; z-index: 1; }

/* contact: quick actions on the blue panel */
.quick-actions { display: grid; gap: 10px; }
.quick-actions .btn { width: 100%; min-height: 52px; gap: 10px; }
.contact-card > * { min-width: 0; }
.qa-ico { display: inline-grid; width: 22px; height: 22px; flex: none; }
.qa-ico svg { width: 100%; height: 100%; }
.qa-wa { background: #fff; color: var(--accent); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6); }
.qa-wa .qa-ico { color: #25d366; }
.qa-call { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.qa-call:hover { background: rgba(255, 255, 255, 0.26); }
.qa-num { font-weight: 500; opacity: 0.9; font-variant-numeric: tabular-nums; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.45); }

@media (max-width: 860px) { .about-video { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .carousel-nav { display: none; }
  .seg { display: flex; width: 100%; }
  .seg-btn { flex: 1; }
}

/* ---------------------------------------------------------------- home: centred marketing copy
   Headings, sub-headings and short marketing lines are centred (text-align only – direction stays RTL).
   Long reading text (reviews, guide excerpts, FAQ answers), product names & prices, forms and navigation keep their natural alignment. */
.home .section-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.home .section-head p { margin-inline: auto; }

.home .hero-copy { align-items: center; text-align: center; }
.home .hero p.lead { margin-inline: auto; }
.home .hero-ctas { justify-content: center; }

.home .dept-body { justify-items: center; text-align: center; }
.home .dept-items { justify-content: center; }

.home .value { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.home .value .ico { grid-row: auto; }

.home .about-video .stack { justify-items: center; text-align: center; }
.home .about-video .prose { margin-inline: auto; }

.home .carousel-bar { justify-content: center; }

.home .contact-info { justify-items: center; text-align: center; }
.home .contact-info .line b { text-align: center; }
.home .contact-info .socials { justify-content: center; }
.home .contact-info .quick-actions { justify-self: stretch; }

/* ---------------------------------------------------------------- phone polish (≤560px only – desktop untouched) */
@media (max-width: 560px) {
  /* 1. hero: shorter photo and tighter copy so the main button sits above the fold */
  .hero { padding-block: 10px 18px; }
  .hero-card { gap: 14px; padding: 12px; }
  .hero-copy { gap: 14px; padding: 4px 8px 10px; }
  .hero-media { min-height: 0; aspect-ratio: 16 / 10; }
  .hero-chips { inset-inline-start: 10px; bottom: 10px; gap: 6px; }
  .hero-chips .chip { font-size: var(--fs-xs); padding: 4px 10px; }
  .hero p.lead { font-size: var(--fs-md); }
  .hero-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-ctas .btn { justify-content: center; width: 100%; }
  .home .hero-ctas { align-self: stretch; }

  /* 2. WhatsApp button: a little smaller, and the page ends clear of it */
  .fab { width: 52px; height: 52px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); inset-inline-start: max(16px, env(safe-area-inset-left, 0px)); }
  .fab svg { width: 26px; height: 26px; }
  .fab.fab-call { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + 52px + 10px); }
  .fab.fab-call svg { width: 22px; height: 22px; }
  .fab.fab-a11y { width: 46px; height: 46px; inset-inline-start: auto; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 19px); }
  .fab.fab-a11y svg { width: 24px; height: 24px; }
  .a11y-panel { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); inset-inline-end: 16px; }
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); }

  /* 3. product cards: full names on three lines, prices lined up */
  .p-name { -webkit-line-clamp: 3; font-size: 0.86rem; line-height: 1.35; }
  .p-media { margin: 6px; }

  /* 4. "why us" values: two compact columns instead of six tall rows */
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .value { grid-template-columns: 1fr; padding: 16px 14px; row-gap: 6px; }
  .value .ico { grid-row: auto; width: 38px; height: 38px; border-radius: 12px; }
  .value .ico svg { width: 20px; height: 20px; }
  .value p { font-size: var(--fs-xs); line-height: 1.5; }

  /* 5. department cards: see "phones: every category card…" above */
  .dept-grid { gap: 14px; }
  .dept-items { gap: 6px; }
  .dept-items .chip { font-size: var(--fs-xs); padding: 5px 12px; }

  /* 6. home guides: swipeable row like the reviews */
  .home-posts { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; scrollbar-width: none; }
  .home-posts::-webkit-scrollbar { display: none; }   /* moves on its own + swipe – no drag bar */
  .home-posts > * { scroll-snap-align: start; }

  /* 7. footer: link groups side by side */
  .footer-card { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 22px 18px; }
  .footer-card > :first-child, .footer-card > :last-child { grid-column: 1 / -1; }
  .footer-card > :first-child { justify-items: center; text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--edge-line); }
  .footer-card > :first-child .brand { justify-self: center; }
  .footer-card > :first-child .socials { justify-content: center; }
  .legal { justify-content: center; text-align: center; }

  /* new home pieces */
  .video .play { width: 58px; height: 58px; }
  .video .video-tag { font-size: var(--fs-xs); padding: 4px 10px; inset-inline-start: 10px; bottom: 10px; }
  .chat-rail { grid-auto-columns: 78%; }
  .rail:not(.chat-rail) { grid-auto-columns: 84%; }
  .qa-num { display: none; }
}

/* ================================================================ product page (gallery, buy box, details) */
/* ---------- page frame */
.pdp2 { padding-block: 8px 24px; }
.pdp2 .pdp-back { margin-top: clamp(28px, 4vw, 48px); }
.pdp2 .pdp-back .btn { max-width: 100%; }
.pdp2 .pdp-back .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-crumbs { padding: 0 6px 14px; }
.pdp2 .pd-back { display: none; }
.pd-back svg { width: 18px; height: 18px; flex: none; }
.pdp2-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 28px; align-items: start; }

/* ---------- gallery */
.pg { position: sticky; top: calc(var(--header-h) + 36px); display: grid; gap: 12px; min-width: 0; }
.pg-stage { position: relative; padding: 10px; border-radius: var(--r); overflow: hidden; }
.pg-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: calc(var(--r) - 10px); outline: none; }
.pg-track::-webkit-scrollbar { display: none; }
.pg-track:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.pg-slide { margin: 0; scroll-snap-align: start; aspect-ratio: 1; background: #fff; }
.pg-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pg-zoom img { width: 100%; height: 100%; object-fit: cover; }   /* fills the frame; the zoom (lightbox) shows the whole photo */
.pg-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; min-height: 0; padding: 0; transition: opacity var(--t), transform var(--t);
  color: #fff; background: rgba(10, 16, 24, 0.42); border: 1px solid rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-nav:hover { background: rgba(10, 16, 24, 0.6); transform: translateY(-50%) scale(1.06); }
.pg-nav svg { width: 17px; height: 17px; }
/* a bigger invisible hit area around the small arrow (44px for touch) */
.pg-nav::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.pg-next { inset-inline-start: 22px; }   /* right side in RTL */
.pg-prev { inset-inline-end: 22px; }
.pg-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-count { position: absolute; bottom: 22px; right: 22px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(10, 16, 24, 0.45); border: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; }
.pg-hint { position: absolute; bottom: 22px; left: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: rgba(10, 16, 24, 0.45); border: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; }
.pg-hint svg { width: 17px; height: 17px; }
.pg-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-thumb { flex: none; width: 68px; aspect-ratio: 1; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff;
  border: 2px solid transparent; opacity: 0.6; transition: opacity var(--t), border-color var(--t); }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-thumb:hover { opacity: 0.9; }
.pg-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.pg-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* lightbox */
.pg-lb { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: 24px; background: #fff; overflow: hidden; }
.pg-lb::backdrop { background: rgba(4, 8, 14, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pg-lb img { display: block; width: 100%; max-height: 94vh; object-fit: contain; }
.pg-lb .icon-btn { position: absolute; z-index: 2; background: rgba(10, 16, 24, 0.55); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.pg-lb-close { top: 12px; inset-inline-end: 12px; }
.pg-lb-prev, .pg-lb-next { top: 50%; transform: translateY(-50%); }
.pg-lb-next { inset-inline-start: 12px; }
.pg-lb-prev { inset-inline-end: 12px; }
.pg-lb-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; color: #fff; background: rgba(10, 16, 24, 0.55); font-size: var(--fs-xs); }
.pg-lb-count:empty { display: none; }

/* ---------- buy box */
.pb { display: grid; gap: 20px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r); min-width: 0; }
.pb-head { display: grid; gap: 10px; }
.pb-cat { justify-self: start; text-decoration: none; }
.pb-title { display: grid; gap: 6px; margin: 0; }
.pb-kicker { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.pb-name { font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.pb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.pb-badge svg { width: 15px; height: 15px; }
.pb-war { text-decoration: none; color: #0f8a4a; background: rgba(31, 170, 83, 0.13); }
:root[data-theme="dark"] .pb-war { color: #5fe39a; background: rgba(46, 204, 113, 0.14); }
.pb-war:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-war-link { justify-self: start; gap: 8px; }
.pd-war-link svg { width: 17px; height: 17px; color: var(--accent); }
.pb-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink); text-decoration: none; min-height: 32px; }
.pb-rating .stars { color: #f5b301; letter-spacing: 1px; }
.pb-rating:hover b { text-decoration: underline; text-underline-offset: 3px; }

.pb-price { display: grid; gap: 4px; padding-block: 2px; }
.pb-price b { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pb-price small { color: var(--ink-3); font-size: var(--fs-xs); }

.pb-label { display: block; width: 100%; margin: 0 0 12px; padding: 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.pb-picked { font-weight: 500; color: var(--ink-2); }
/* "the system includes" and the key facts share one look: equal tiles, two per row, content centred */
.pb-inc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
.pb-inc-list li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; text-align: center;
  border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--edge-line);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.35; }
.pb-inc-list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; padding: 3px; border-radius: 6px; color: var(--accent); background: var(--accent-soft); box-sizing: content-box; }
.pb-facts { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; margin: 0; }
.pb-facts div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--edge-line); }
.pb-facts dt { font-size: 0.72rem; color: var(--ink-3); }
.pb .nw { white-space: nowrap; }
.pb-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 700; }

.pb-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.pb-sw { display: grid; }
.pb-sw { position: relative; }
.pb-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pb-sw span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 42px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-2); border: 1px solid var(--edge-line); background: var(--glass); transition: border-color var(--t), background var(--t), color var(--t); }
.pb-sw:hover span { border-color: var(--accent); color: var(--ink); }
.pb-sw input:checked + span { color: var(--accent-ink); background: var(--accent); border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent); }
.pb-sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.pb-addons { display: grid; gap: 8px; }
.pb-addons .pb-label { margin-bottom: 4px; }
/* finish name, and under it – on every button that has one – its extra price, so all buttons line up */
.pb-sw > span { flex-direction: column; gap: 1px; line-height: 1.25; }
.pb-sw-x { display: block; font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.pb-sw input:checked + span .pb-sw-x { color: inherit; opacity: 0.85; }
.pb-hint { margin-top: 8px; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.pb-add { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--edge-line); background: var(--glass); transition: border-color var(--t), background var(--t); }
.pb-add:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pb-add input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pb-add-box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); transition: background var(--t), border-color var(--t); }
.pb-add-box svg { width: 14px; height: 14px; color: var(--accent-ink); opacity: 0; transform: scale(0.6); transition: opacity var(--t), transform var(--t); }
.pb-add-text { display: grid; gap: 2px; min-width: 0; }
.pb-add-text b { font-size: var(--fs-sm); }
.pb-add-text small { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.35; }
.pb-add-price { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-add:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--glass)); }
.pb-add:has(input:checked) .pb-add-box { background: var(--accent); border-color: var(--accent); }
.pb-add:has(input:checked) .pb-add-box svg { opacity: 1; transform: none; }
.pb-add:has(input:checked) .pb-add-price { color: var(--accent); }
.pb-add:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-add[hidden] { display: none; }
.pb-more-adds { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); cursor: pointer; }
.pb-more-adds svg { width: 16px; height: 16px; transition: transform var(--t); }
.pb-more-adds[aria-expanded="true"] svg { transform: rotate(180deg); }
.pb-more-adds:hover { background: var(--accent-soft); }
.pb-more-adds:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* phones: tighter add-on rows */
@media (max-width: 720px) {
  .pb-add { min-height: 54px; padding: 10px 12px; gap: 10px; }
  .pb-add-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.pb-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 16px; border-top: 1px solid var(--edge-line); }
.pb-total span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.pb-total b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.pb-total small { width: 100%; text-align: end; font-size: var(--fs-xs); color: var(--ink-3); }
.pb-total small:empty { display: none; }

.pb-cta { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.pb-wa { min-height: 54px; justify-content: center; gap: 10px; font-size: 1.02rem; }
.pb-wa svg { width: 21px; height: 21px; flex: none; }
.pb-share { width: 54px; height: 54px; }
.pb-share svg { width: 21px; height: 21px; }
.pb-ask { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: -8px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.pb-ask svg { width: 18px; height: 18px; }
.pb-ask:hover { text-decoration: underline; text-underline-offset: 3px; }

.pb-assure { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--edge-line); }
.pb-assure li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font-size: 0.74rem; line-height: 1.35; color: var(--ink-2); }
.pb-assure svg { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }

/* ---------- about + accordions */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.pd-about { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r); }
.pd-about h2, .pd-section h2 { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.01em; margin: 0 0 12px; }
.pd-clamp { position: relative; max-height: 13.5em; overflow: hidden; }
.pd-clamp::after { content: ""; position: absolute; inset: auto 0 0; height: 4.5em; background: linear-gradient(to bottom, transparent, var(--pd-fade, var(--bg))); pointer-events: none; }
.pd-about { --pd-fade: color-mix(in srgb, var(--bg-2) 92%, transparent); }
.pd-clamp.is-open { max-height: none; }
.pd-clamp.is-open::after { display: none; }
.pd-clamp .rich { color: var(--ink-2); line-height: 1.75; font-size: var(--fs-sm); }
.pd-clamp .rich p + p { margin-top: 10px; }
.pd-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.pd-more svg { width: 18px; height: 18px; transition: transform var(--t); }
.pd-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.pd-accs { display: grid; gap: 10px; }
.pd-acc { border-radius: 22px; overflow: hidden; }
.pd-acc summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; }
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 22px; }
.pd-acc-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.pd-acc-ico svg { width: 20px; height: 20px; }
.pd-acc-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.pd-acc-t b { font-size: var(--fs-md, 1rem); }
.pd-acc-t small { font-size: var(--fs-xs); color: var(--ink-3); }
.pd-acc-chev { flex: none; color: var(--ink-3); transition: transform var(--t); }
.pd-acc-chev svg { width: 20px; height: 20px; display: block; }
.pd-acc[open] .pd-acc-chev { transform: rotate(180deg); color: var(--accent); }
.pd-acc-body { padding: 4px 18px 20px; display: grid; gap: 16px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; animation: pd-in 0.25s ease-out; }
@keyframes pd-in { from { opacity: 0; transform: translateY(-4px); } }

.pd-specs { display: grid; gap: 18px; }
.pd-spec h3 { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.pd-spec dl { margin: 0; display: grid; }
.pd-spec dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--edge-line); }
.pd-spec dl div:last-child { border-bottom: 0; }
.pd-spec dt { color: var(--ink-3); }
.pd-spec dd { margin: 0; color: var(--ink); font-weight: 600; }
.pd-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
.pd-notes { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--ink-2); }
.pd-notes li::marker { color: var(--accent); }
.pb-stock { display: block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.pb .model-opts { margin-top: 2px; }

.pd-war { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-war-card { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; border: 1px solid var(--edge-line); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pd-war-k { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.pd-war-card b { color: var(--ink); font-size: 1.02rem; }
.pd-war-card p { font-size: var(--fs-xs); color: var(--ink-3); }
.pd-prep { display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--edge-line); }
.pd-prep h3 { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.pd-prep h4 { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.pd-prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pd-usage { margin: 0; padding-inline-start: 18px; display: grid; gap: 10px; }
.pd-usage li::marker { color: var(--accent); }
.pd-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--accent); text-decoration: none; }
.pd-link svg { width: 16px; height: 16px; }

/* ---------- reviews + related */
.pd-section { margin-top: clamp(36px, 5vw, 64px); }
.pd-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 18px; }   /* centred: eyebrow, title, rating */
.pd-section-head h2 { margin: 4px 0 0; }
.pd-rev-sum { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: var(--fs-sm); }
.pd-rev-sum .stars { color: #f5b301; }
.pd-rail { display: grid; align-items: start; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd-rail::-webkit-scrollbar { display: none; }
.pd-rail > * { scroll-snap-align: start; }
.pd-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
.pd-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pd-rel-card { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 10px; border-radius: 22px; transition: transform 0.4s var(--spring); }
.pd-rel-card:hover { transform: translateY(-3px); }
.pd-rel-img { aspect-ratio: 1; border-radius: 15px; overflow: hidden; background: #fff; }
.pd-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-rel-body { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0 4px 6px; text-align: center; }
.pd-rel-body h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }
.pd-rel-body p { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.35; }
.pd-rel-body b { margin-top: 4px; }
.pd-rel-link { color: inherit; text-decoration: none; }
.pd-rel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pd-rel-link:focus-visible { outline: none; }
.pd-rel-card:has(.pd-rel-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.pd-rel-body b { font-variant-numeric: tabular-nums; }

/* ---------- sticky order bar (phones) */
.pb-sticky { display: none; }

/* ---------- tablet / phone */
@media (max-width: 980px) {
  .pdp2-top, .pd { grid-template-columns: 1fr; }
  .pg { position: static; }
  .pd-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pdp2 { padding-block: 4px 24px; }
  .pd-crumbs { display: none; }
  .pdp2 .pd-back { display: inline-flex; }
  .pdp2-top { gap: 14px; }
  .pg { gap: 8px; }
  .pg-stage { padding: 6px; border-radius: 26px; }
  .pg-track { border-radius: 20px; }
  .pg-slide { aspect-ratio: 4 / 3; }            /* a shorter picture: the name and price show on the first screen */
  .pg-nav { width: 32px; height: 32px; }
  .pg-nav svg { width: 15px; height: 15px; }
  .pg-nav::after { inset: -6px; }
  .pg-next { inset-inline-start: 12px; }
  .pg-prev { inset-inline-end: 12px; }
  .pg-count { bottom: 14px; right: 14px; }
  .pg-hint { bottom: 14px; left: 14px; }
  .pg-thumbs { display: none; }                 /* swipe + the 1/N counter instead */
  .pb { gap: 16px; padding: 20px 16px; border-radius: 26px; }
  .pb-inc-list li, .pb-facts dd { font-size: 0.82rem; }
  .pd-clamp { max-height: 9.6em; }
  .pd { margin-top: 20px; gap: 14px; }
  .pd-section { margin-top: 32px; }
  .pd-rel { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: none; }
  .pd-rel::-webkit-scrollbar { display: none; }
  .pd-rel-card { scroll-snap-align: start; }
  .pb-assure li { font-size: 0.7rem; }
  .pd-war { grid-template-columns: 1fr; }
  .pd-acc summary { padding: 12px 14px; gap: 12px; }
  .pd-acc-body { padding: 2px 14px 18px; }
  .pd-spec dl div { grid-template-columns: 1fr 1.1fr; }
  .pd-rail { grid-auto-columns: 84%; }

  .pb-sticky { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 55; padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
    transform: translateY(120%); transition: transform 0.35s var(--spring); pointer-events: none; }
  .pb-sticky.is-on { transform: none; pointer-events: auto; }
  .pb-sticky-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 8px; padding-inline-start: 18px; border-radius: 999px; }
  .pb-sticky-p { display: grid; line-height: 1.1; }
  .pb-sticky-p small { font-size: 0.68rem; color: var(--ink-3); }
  .pb-sticky-p b { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
  .pb-sticky .btn { min-height: 48px; gap: 8px; padding-inline: 20px; }
  .pb-sticky .btn svg { width: 19px; height: 19px; }
}
/* while the order bar shows, the round WhatsApp / call buttons step aside and the accessibility button moves up */
@media (max-width: 720px) {
  body.pdp-bar-on #wa-fab, body.pdp-bar-on #call-fab { opacity: 0; pointer-events: none; transform: scale(0.8); }
  body.pdp-bar-on .fab.fab-a11y { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-sticky, .pd-acc-body, .pd-rel-card, .pb-add-box svg { transition: none; animation: none; }
}

/* ================================================================ works page */
.wk-head { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: 20px; }
.wk-head h2 { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; }
.wk-head p { max-width: 62ch; color: var(--ink-2); }
/* featured stories: the before/after large on one side, four more beside it (their titles are part of the photos, at the top) */
.wk-feat { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.wk-tile { position: relative; display: block; width: 100%; padding: 6px; border: 0; border-radius: var(--r); cursor: zoom-in; overflow: hidden; }
.wk-tile.is-wide { grid-row: span 2; display: grid; }
.wk-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 0; border-radius: calc(var(--r) - 6px); transition: transform 0.6s var(--spring); }
.wk-tile.is-wide img { aspect-ratio: auto; height: 100%; min-height: 100%; }
.wk-tile:hover img { transform: scale(1.02); }
.wk-tile:focus-visible, .wk-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* gallery */
.wk-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wk-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2); background: var(--glass); border: 1px solid var(--edge-line); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.wk-filter .n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; background: var(--accent-soft); color: var(--accent); }
.wk-filter:hover { color: var(--ink); border-color: var(--accent); }
.wk-filter[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; box-shadow: 0 8px 20px -12px var(--accent); }
.wk-filter[aria-pressed="true"] .n { background: rgba(255, 255, 255, 0.25); color: inherit; }
.wk-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wk-grid li[hidden] { display: none; }
.wk-photo { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--bg-2); }
.wk-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s var(--spring); }
.wk-photo:hover img { transform: scale(1.04); }
.wk-count { margin-top: 12px; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.wk-more-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wk-more-wrap .btn[hidden] { display: none; }
/* follow us */
.wk-social { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.wk-social a { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 16px; border-radius: 22px; color: var(--ink); text-decoration: none;
  transition: transform 0.4s var(--spring), border-color var(--t); }
.wk-social a:hover { transform: translateY(-3px); }
.wk-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wk-soc-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: var(--net, var(--accent)); box-shadow: 0 10px 22px -12px var(--net, var(--accent)); }
.wk-soc-ico svg { width: 22px; height: 22px; }
.wk-soc-t { display: grid; gap: 2px; min-width: 0; }
.wk-soc-t b { font-size: var(--fs-sm); }
.wk-soc-t small { font-size: var(--fs-xs); color: var(--ink-2); }
.wk-social [data-net="WhatsApp"] { --net: #25d366; }
.wk-social [data-net="Instagram"] { --net: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.wk-social [data-net="Facebook"] { --net: #1877f2; }
.wk-social [data-net="YouTube"] { --net: #ff0000; }
.wk-social [data-net="TikTok"] { --net: #111; }
:root[data-theme="dark"] .wk-social [data-net="TikTok"] .wk-soc-ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.wk-social [data-net="Instagram"] .wk-soc-ico { box-shadow: 0 10px 22px -12px #dd2a7b; }
/* how an installation goes */
.wk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.wk-steps li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px; border-radius: var(--r); text-align: center; }
.wk-step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 22px -12px var(--accent); }
.wk-steps h3 { font-size: 1.05rem; font-weight: 700; }
.wk-steps p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
/* lightbox caption */
.wk-lb figure { margin: 0; }
.wk-lb .wk-cap { padding: 12px 56px 14px; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: #1d2733; background: #fff; }
.wk-lb img { max-height: calc(94vh - 52px); }
.wk-lb .pg-lb-count { bottom: 58px; }

@media (max-width: 900px) {
  .wk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-tile.is-wide { grid-column: 1 / -1; grid-row: auto; }
  .wk-tile.is-wide img { aspect-ratio: 3 / 2; height: auto; }
}
@media (max-width: 720px) {
  /* stories on phones: no sideways scrolling – the before/after across, the other four two by two */
  .wk-feat { gap: 8px; }
  .wk-tile { padding: 4px; border-radius: 18px; }
  .wk-tile img { border-radius: 14px; aspect-ratio: 4 / 3; }
  .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wk-photo img { aspect-ratio: 4 / 5; }
  .wk-social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wk-social li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wk-social li:last-child:nth-child(odd) a { justify-content: center; }
  .wk-social a { min-height: 64px; padding: 12px; gap: 10px; }
  .wk-steps { gap: 10px; }
  .wk-steps li { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) { .wk-tile img, .wk-photo img { transition: none; } }

/* ---- works page v3: hero with a photo collage, before/after, magazine-style gallery, process timeline */
.wk-hero-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(20px, 4vw, 48px);
  padding: clamp(22px, 4vw, 48px); border-radius: var(--r); overflow: hidden; }
.wk-hero-copy { display: grid; gap: 14px; justify-items: start; }
.wk-hero-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.wk-hero-copy .lead { color: var(--ink-2); font-size: var(--fs-md, 1.05rem); max-width: 46ch; }
.wk-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.wk-hero-ctas .btn { min-height: 50px; gap: 8px; }
.wk-hero-ctas .btn svg { width: 20px; height: 20px; }
.wk-trust { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wk-trust li { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--edge-line); }
.wk-trust b { font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-trust .stars { color: #f5b301; letter-spacing: 1px; margin-inline-end: 4px; }
.wk-hero-media { position: relative; height: clamp(320px, 34vw, 440px); }
.wk-hero-media img { position: absolute; object-fit: cover; border-radius: 22px; border: 4px solid color-mix(in srgb, #fff 80%, transparent);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6); }
.wk-hero-media .p0 { inset-inline-end: 0; top: 0; width: 56%; height: 86%; z-index: 2; }
.wk-hero-media .p1 { inset-inline-start: 0; top: 8%; width: 46%; height: 56%; transform: rotate(-3deg); }
.wk-hero-media .p2 { inset-inline-start: 10%; bottom: 0; width: 44%; height: 42%; z-index: 3; transform: rotate(2deg); }
.wk-head h2 { scroll-margin-top: calc(var(--header-h) + 40px); }
/* before / after */
.wk-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.wk-pair { margin: 0; padding: 8px; border-radius: var(--r); display: grid; gap: 10px; }
.wk-pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wk-ba-img { position: relative; display: block; padding: 0; border: 0; border-radius: calc(var(--r) - 10px); overflow: hidden; cursor: zoom-in; background: var(--bg-2); }
.wk-ba-img img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.6s var(--spring); }
.wk-ba-img:hover img { transform: scale(1.03); }
.wk-ba-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wk-tag { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: #fff;
  background: rgba(10, 16, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wk-tag.is-after { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.wk-pair figcaption { text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding-bottom: 4px; }
/* gallery: the first photo large (magazine look) */
/* gallery: the first two photos large, side by side; then three per row */
@media (min-width: 721px) {
  .wk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wk-grid li { grid-column: span 2; }
  .wk-grid li:nth-child(-n+2) { grid-column: span 3; }
  .wk-grid li:nth-child(-n+2) img { aspect-ratio: 4 / 3; }
  .wk-grid li.fill-half { grid-column: span 3; }
  .wk-grid li.fill-half img { aspect-ratio: 4 / 3; }
  .wk-grid li.fill-row img { aspect-ratio: 21 / 9; }
}
.wk-grid li.fill-row { grid-column: 1 / -1; }      /* the last photo widens so the last row has no hole */
@media (max-width: 720px) { .wk-grid li.fill-row img { aspect-ratio: 16 / 10; } }
/* process: a line joining the steps on wide screens */
@media (min-width: 901px) {
  .wk-steps { position: relative; }
  .wk-steps::before { content: ""; position: absolute; top: 44px; inset-inline: 12%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); }
  .wk-steps li { position: relative; }
}
@media (max-width: 900px) {
  .wk-hero-card { grid-template-columns: 1fr; }
  .wk-hero-media { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wk-hero-media img { position: static; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; transform: none !important; border-width: 2px; border-radius: 16px; }
}
@media (max-width: 720px) {
  .wk-hero-copy { justify-items: center; text-align: center; }
  .wk-hero-copy .crumbs { display: none; }
  .wk-hero-ctas { justify-content: center; width: 100%; }
  .wk-hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  /* the three trust points as one compact row */
  .wk-trust { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 4px; border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--edge-line); }
  .wk-trust li { display: grid; grid-template-rows: auto auto; justify-items: center; align-content: start; gap: 3px; padding: 2px 6px; border: 0; background: none; border-radius: 0; text-align: center; line-height: 1.3; }
  .wk-trust b { font-size: 0.95rem; white-space: nowrap; }
  .wk-trust li + li { border-inline-start: 1px solid var(--edge-line); }
  .wk-trust .stars { font-size: 0.7rem; }
  .wk-trust span { font-size: 0.7rem; }
  .wk-ba { grid-template-columns: 1fr; gap: 12px; }
  .wk-grid li:nth-child(-n+2) img { aspect-ratio: 3 / 4; }
}

/* ================================================================ guides */
.gd-hero-card, .ct-hero-card { display: grid; justify-items: center; gap: 12px; padding: clamp(24px, 4.5vw, 52px) clamp(18px, 4vw, 48px); border-radius: var(--r); text-align: center; }
.gd-hero-card h1, .ct-hero-card h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.gd-hero-card .lead, .ct-hero-card .lead { color: var(--ink-2); max-width: 54ch; }
.gd-tools { width: min(100%, 640px); display: grid; gap: 12px; margin-top: 6px; }
.gd-search .input { min-height: 52px; border-radius: 999px; }
.gd-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.gd-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2); background: var(--glass); border: 1px solid var(--edge-line); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.gd-chip .n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; background: var(--accent-soft); color: var(--accent); }
.gd-chip:hover { color: var(--ink); border-color: var(--accent); }
.gd-chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.gd-chip[aria-pressed="true"] .n { background: rgba(255, 255, 255, 0.25); color: inherit; }
.gd-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* cards */
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gd-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; transition: transform 0.4s var(--spring), box-shadow 0.4s var(--spring); }
.gd-card[hidden], .gd-feature-wrap[hidden] { display: none; }
.gd-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.55), var(--inset); }
.gd-img { position: relative; margin: 8px 8px 0; border-radius: calc(var(--r) - 8px); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
.gd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--spring); }
.gd-card:hover .gd-img img { transform: scale(1.04); }
.gd-topic { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff;
  background: rgba(10, 16, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gd-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; }
.gd-body h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; }
.gd-link { color: inherit; text-decoration: none; }
.gd-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gd-card:has(.gd-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.gd-link:focus-visible { outline: none; }
.gd-body p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gd-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.gd-meta svg { width: 15px; height: 15px; }
.gd-go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent); }
.gd-go svg { width: 15px; height: 15px; }
.gd-feature-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.gd-new { justify-self: center; }
.gd-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; }
.gd-feature .gd-img { margin: 8px; aspect-ratio: 16 / 10; }
.gd-feature .gd-body { padding: 18px clamp(18px, 3vw, 36px) 18px 18px; gap: 12px; }
.gd-feature .gd-body h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; }
.gd-feature .gd-body p { -webkit-line-clamp: 4; font-size: var(--fs-md, 1rem); }
.gd-empty { padding: 22px; text-align: center; color: var(--ink-2); border-radius: var(--r); }
/* help band */
.gd-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: clamp(20px, 3.5vw, 36px); border-radius: var(--r); }
.gd-cta h2, .gd-endcta h2 { font-size: var(--fs-lg); font-weight: 750; }
.gd-cta p, .gd-endcta p { color: var(--ink-2); margin-top: 4px; max-width: 52ch; }
.gd-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.gd-cta-btns .btn { min-height: 50px; gap: 8px; }
.gd-cta-btns .btn svg { width: 20px; height: 20px; }
/* article */
.gd-progress { position: fixed; top: 0; inset-inline: 0; z-index: 60; height: 3px; pointer-events: none; }
.gd-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: right; transform: scaleX(0); }
.gd-article { padding-block: 18px 8px; }
.gd-head { display: grid; justify-items: center; gap: 12px; max-width: 860px; margin: 0 auto 22px; text-align: center; }
.gd-head h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.gd-topic-link { padding: 4px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.gd-info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-sm); color: var(--ink-3); }
.gd-info span { display: inline-flex; align-items: center; gap: 6px; }
.gd-info svg { width: 16px; height: 16px; }
.gd-share { width: 40px; height: 40px; }
.gd-share svg { width: 18px; height: 18px; }
.gd-cover { max-width: 1000px; margin: 0 auto 22px; padding: 8px; border-radius: var(--r); }
.gd-cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: calc(var(--r) - 8px); }
.gd-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; gap: 24px; align-items: start; }
.gd-layout:not(:has(.gd-toc:not([hidden]))) { grid-template-columns: minmax(0, 820px); }
.gd-toc { position: sticky; top: calc(var(--header-h) + 34px); }
.gd-toc details { padding: 16px; border-radius: 20px; background: var(--glass); border: 1px solid var(--edge-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.gd-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.gd-toc summary::after { content: ""; width: 8px; height: 8px; margin-inline-end: 4px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t); }
.gd-toc details[open] summary::after { transform: rotate(-135deg); }
.gd-toc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.gd-toc summary::-webkit-details-marker { display: none; }
.gd-toc ol { margin: 10px 0 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: var(--fs-xs); }
.gd-toc li::marker { color: var(--accent); font-weight: 700; }
.gd-toc a { color: var(--ink-2); text-decoration: none; line-height: 1.45; }
.gd-toc a:hover { color: var(--accent); }
.gd-text { padding: clamp(20px, 4vw, 44px); border-radius: var(--r); }
.gd-rich { font-size: 1.04rem; line-height: 1.85; color: var(--ink-2); }
.gd-rich > * + * { margin-top: 14px; }
.gd-rich h2 { margin-top: 30px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 750; color: var(--ink); letter-spacing: -0.01em; scroll-margin-top: calc(var(--header-h) + 40px); }
.gd-rich h3 { margin-top: 26px; font-size: 1.15rem; font-weight: 750; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 40px); }
.gd-rich strong { color: var(--ink); }
.gd-rich ul, .gd-rich ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.gd-rich li::marker { color: var(--accent); }
.gd-rich img { border-radius: 16px; }
.gd-rich a { color: var(--accent); text-underline-offset: 3px; }
.gd-rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gd-rich th, .gd-rich td { padding: 10px; border-bottom: 1px solid var(--edge-line); text-align: start; }
.gd-endcta { max-width: 1034px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: clamp(20px, 3.5vw, 34px); border-radius: var(--r); }

/* ================================================================ about */
.ab-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ab-story-text { display: grid; gap: 12px; }
.ab-story-text h2 { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.02em; }
.ab-story-text .prose p { color: var(--ink-2); line-height: 1.8; }
.ab-story-text .prose p + p { margin-top: 12px; }
.ab-story-img { margin: 0; padding: 8px; border-radius: var(--r); }
.ab-story-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--r) - 8px); }
.ab-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-pillars li { display: grid; justify-items: center; gap: 10px; padding: 22px 18px; border-radius: var(--r); text-align: center; }
.ab-pillars p { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ab-commit { margin-top: 16px; text-align: center; color: var(--ink-2); }
.ab-commit b { color: var(--ink); }
.ab-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-value { display: grid; gap: 8px; padding: 20px; border-radius: var(--r); }
.ab-value .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.ab-value .ico svg { width: 22px; height: 22px; }
.ab-value h3 { font-size: 1.05rem; font-weight: 700; }
.ab-value p { font-size: var(--fs-sm); color: var(--ink-2); }
.ab-closing { display: grid; justify-items: center; gap: 8px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r); text-align: center; }
.ab-quote { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; max-width: 30ch; }
.ab-area { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ================================================================ contact */
.ct-cards { width: 100%; max-width: 920px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.ct-card, .page-hero .ct-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 20px 14px; border-radius: 22px; color: var(--ink); text-decoration: none; text-align: center;
  transition: transform 0.4s var(--spring), border-color var(--t); }
.ct-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.ct-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ct-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--accent); box-shadow: 0 10px 22px -12px var(--accent); }
.ct-card:first-child .ct-ico { background: #25d366; box-shadow: 0 10px 22px -12px #25d366; }
.ct-ico svg { width: 24px; height: 24px; }
.ct-t { display: grid; justify-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.ct-t b { font-size: var(--fs-sm); }
.ct-t > span { font-weight: 700; color: var(--accent); font-size: 0.98rem; max-width: 100%; overflow-wrap: anywhere; }
.ct-card[href^="mailto"] .ct-t > span { font-size: 0.86rem; }      /* the address shown whole, never cut */
.ct-t small { font-size: var(--fs-xs); color: var(--ink-3); }
.ct-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ct-facts li { display: inline-flex; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--edge-line); }
.ct-facts b { color: var(--ink); }
.ct-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-form { display: grid; gap: 6px; padding: clamp(20px, 3.5vw, 36px); border-radius: var(--r); }
.ct-form h2 { font-size: var(--fs-lg); font-weight: 750; margin-bottom: 8px; }
.ct-side { display: grid; gap: 12px; }
.ct-side-card { display: grid; gap: 12px; padding: 20px; border-radius: var(--r); }
.ct-side-card h3 { font-size: 1.02rem; font-weight: 700; }
.ct-social { justify-items: center; text-align: center; }
.ct-social .socials { justify-content: center; }
.ct-rating { justify-items: center; text-align: center; gap: 4px; }
.ct-rating .stars { color: #f5b301; font-size: 1.2rem; letter-spacing: 2px; }

@media (max-width: 980px) {
  .gd-grid, .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-feature { grid-template-columns: 1fr; }
  .gd-feature .gd-body { padding: 4px 18px 18px; }
  .gd-layout { grid-template-columns: minmax(0, 1fr); }
  .gd-toc { position: static; }
  .ab-story, .ct-main { grid-template-columns: 1fr; }
  .ct-cards { grid-template-columns: 1fr; max-width: 520px; }
  .ct-card, .page-hero .ct-card { flex-direction: row; justify-content: flex-start; min-height: 80px; text-align: start; gap: 14px; padding: 14px 16px; }
  .ct-t { justify-items: start; }
}
@media (max-width: 720px) {
  .gd-grid { grid-template-columns: 1fr; gap: 12px; }
  .gd-hero-card .crumbs, .ct-hero-card .crumbs, .gd-head .crumbs { display: none; }
  .gd-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: -8px; padding-inline: 8px; }
  .gd-chips::-webkit-scrollbar { display: none; }
  .gd-chip { flex: none; }
  .gd-cta, .gd-endcta { flex-direction: column; text-align: center; }
  .gd-cta-btns { width: 100%; }
  .gd-cta-btns .btn { flex: 1 1 100%; justify-content: center; }
  .gd-rich { font-size: 1rem; line-height: 1.8; }
  .ab-pillars, .ab-values { grid-template-columns: 1fr; gap: 10px; }
  .ab-value { grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
  .ab-value .ico { grid-row: span 2; }
  .ab-story-img img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .gd-card, .gd-img img, .ct-card { transition: none; } }

/* ---------------------------------------------------------------- category text + FAQ (SEO, visible to everyone) */
.cat-info .wrap { display: grid; gap: 28px; max-width: 900px; }
.cat-copy { position: relative; padding: clamp(20px, 4vw, 40px); }
.cat-copy .rich { line-height: 1.8; text-align: start; }
.cat-copy.is-long:not(.is-open) .rich { max-height: 15em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.cat-more { margin-top: 14px; }
.cat-faq-h { font-size: var(--fs-xl, 1.5rem); text-align: center; margin-bottom: 16px; }
.faq .a a, .cat-copy .rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pd-faq .wrap { max-width: 900px; }

.a11y-foot { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-2); text-align: center; line-height: 1.7; }
.a11y-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }