/* ==========================================================================
   Servest — e-pood
   Direction: .build/DIRECTION.md. Every hex traces to .build/proov-palett.py (2026-09-16).
   ========================================================================== */

:root {
  /* Logo system (2026-09-16). Navy measured off the owner's banner logo (avg #162231) and icon sheet (#112843).
     2026-10-05: the owner found the near-black navy too dark; surfaces are now a dark blue-grey. The old navy
     stays available as the "Tumesinine" palette in template.json. */
  --ink: #2B3746;        /* dark blue-grey — white 12.1:1, --steel 6.2:1, --signaal 4.5:1 on it */
  --ink-hi: #1F2934;     /* pressed / hover on dark fills */
  --paper: #FFFFFF;
  --muted: #4A5668;      /* navy hue, lifted — 7.4:1 on white */
  --steel: #AEBBCB;      /* secondary text on dark fills — 6.2:1 on --ink */
  --chromate: #FFFFFF;   /* emphasis on navy surfaces (was the yellow accent; the logo is monochrome) */
  --chromate-hi: #E6EBF1;
  --viga: #8A3B32;       /* error — 7.6:1 on white */

  --sw-zn: #99A29F;      /* material swatches, sampled from fastener photos */
  --sw-hdg: #8C9AAD;     /* (also muted text on navy) */
  --sw-a2: #B4BBC4;
  --sw-a4: #A8ACB8;
  --sw-must: #2F332F;
  --sw-nailon: #DCD4C7;
  --sw-alu: #C4C9CC;

  /* font pairing B (default): Saira Semi Condensed + Sofia Sans. --mono is the body face with tabular figures. */
  --display: "Saira Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --sans: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--sans);

  --wrap: 85rem;
  --gut: 1rem;
  --r: 0px;              /* the logo has no rounded corners — cuts instead */
  --cut: .625rem;        /* 45° chamfer on filled shapes */
  --cut-l: 1rem;
  --tab-h: 4rem;
  --pais-h: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pais-h) + 1rem); }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
main { flex: 1 0 auto; }
h1, h2, h3, p, fieldset, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
table { border-collapse: collapse; }
.mono { font-family: var(--mono); }
small { display: block; font-size: .8125rem; color: var(--muted); font-weight: 400; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loks { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hyppa {
  position: absolute; left: .5rem; top: -4rem; z-index: 60;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; font-weight: 700;
}
.hyppa:focus { top: .5rem; }
:focus-visible { outline: none; }
.jalus :focus-visible, .alariba :focus-visible, .kokkuvote :focus-visible, .teade :focus-visible { outline-color: var(--chromate); }

/* ---- buttons -------------------------------------------------------------- */

.nupp {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.25rem;
  border: 0; border-radius: var(--r);
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, transform .15s var(--ease);
}
.nupp:active { transform: translateY(1px); }
.nupp--must { background: var(--ink); color: var(--paper); }
.nupp--must:hover { background: var(--ink-hi); }
.nupp--kroom { background: var(--chromate); color: var(--ink); }
.nupp--kroom:hover { background: var(--chromate-hi); }
.nupp--lai { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
.nupp--vaike { min-height: 2.75rem; padding: 0 .875rem; }
.tekstinupp {
  background: none; border: 0; padding: .625rem 0; min-height: 2.75rem;
  font-weight: 500; text-decoration: underline; text-underline-offset: .25em; color: var(--muted);
}
.tekstinupp:hover { color: var(--ink); }
.tagasi-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 500; text-decoration: none; }
.tagasi-link:hover { text-decoration: underline; }

/* ---- the notice line ----------------------------------------------------------- */

.markus {
  display: flex; gap: .5rem; align-items: flex-start;
  font: 400 .8125rem/1.5 var(--mono); color: var(--muted);
}
.markus svg { margin-top: .125rem; }
.markus--tugev { font-size: .875rem; color: var(--ink); }
.markus--ink { color: var(--steel); }

/* ==========================================================================
   Header — white band, the logo, the search, a navy rule
   ========================================================================== */

.pais { background: var(--paper); color: var(--ink); box-shadow: none; }
.pais-rida {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "mark km korv" "otsing otsing otsing";
  align-items: center;
  gap: .625rem 1rem;
  padding-block: .625rem .75rem;
}
.mark { grid-area: mark; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.mark img { display: block; width: auto; height: 1.625rem; }

.otsing { grid-area: otsing; display: flex; min-width: 0; }
.otsing input {
  flex: 1; min-width: 0; height: 3.25rem;
  padding: 0 1rem;
  border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink);
  box-shadow: none;
  font-size: 1.0625rem;
}
.otsing input::placeholder { color: var(--muted); opacity: 1; }
.otsing input::-webkit-search-cancel-button { cursor: pointer; }
.otsing input:focus-visible { outline: none; box-shadow: none; }
.otsing button {
  width: 3.75rem; height: 3.25rem; border: 0;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.otsing button:hover { background: var(--ink-hi); }

.km { grid-area: km; justify-self: end; display: flex; gap: .125rem; font: 600 .875rem/1 var(--display); letter-spacing: .02em; }
.km a {
  display: grid; place-items: center; min-height: 2.75rem; padding: 0 .75rem;
  color: var(--muted); text-decoration: none;
}
.km a[aria-current] { background: var(--ink); color: var(--paper); }
.km a:not([aria-current]):hover { color: var(--ink); text-decoration: underline; }

.korv {
  grid-area: korv; display: flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 .25rem; color: var(--ink); text-decoration: none;
}
.korv-arv {
  display: grid; place-items: center; min-width: 2rem; height: 1.75rem; padding: 0 .5rem;
  background: var(--ink); color: var(--paper);
  font: 700 .875rem/1 var(--display);
}
.korv-summa { display: none; font: 600 1rem/1 var(--display); }
.korv:hover .korv-summa { text-decoration: underline; }

.vahemikud-rida {
  display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
}
.vahemikud-rida::-webkit-scrollbar { display: none; }
.vahemikud a {
  display: flex; align-items: center; gap: .5rem; flex: none;
  padding: .625rem .875rem .875rem;
  color: var(--muted); text-decoration: none; font: 600 1rem/1.1 var(--display); letter-spacing: .01em;
  box-shadow: none;
  transition: color .15s, box-shadow .2s var(--ease);
}
.vahemikud-rida > a:first-child { padding-left: 0; }
.vahemikud a span { font: 500 .8125rem/1 var(--display); color: var(--sw-hdg); }
.vahemikud a:hover { color: var(--ink); }
.vahemikud a[aria-current] { color: var(--ink); box-shadow: none; }
.vahemikud a[aria-current] span { color: var(--ink); }
.vahemikud-info { display: none; }

/* ==========================================================================
   The label block — signature
   ========================================================================== */

.silt {
  container-type: inline-size;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 4.5rem; aspect-ratio: 1;
  padding: .5rem;
  border-radius: var(--r);
  background: var(--ink); color: var(--chromate);
  text-decoration: none; overflow: hidden;
}
.silt-nr {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font: 600 min(24cqi, 4.5rem)/1 var(--mono); letter-spacing: -.03em;
  text-align: center; white-space: nowrap;
}
.silt-nr--pikk { font-size: min(16cqi, 3.25rem); }
.silt-ryhm {
  font: 500 .5625rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.silt { transition: background-color .2s; }
a.silt:hover { background: var(--ink-hi); }
.silt--vaike { width: 3.5rem; padding: .25rem; }
.silt--vaike .silt-nr { font-size: min(21cqi, 1rem); }
.silt--suur { width: 100%; aspect-ratio: 5 / 2; padding: .875rem 1.25rem; }
.silt--suur .silt-nr { font-size: min(14cqi, 8rem); }
.silt--suur .silt-ryhm { font-size: .75rem; }
.silt--suur .silt-nr { font-size: min(22cqi, 8rem); }
.silt--suur .silt-nr--pikk { font-size: min(15cqi, 6rem); }

/* ---- materials -------------------------------------------------------------- */

.materjal { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink); font-weight: 500; }
.sw { width: .75rem; height: .75rem; border-radius: 2px; flex: none; background: var(--sw-zn); }
.sw--hdg { background: var(--sw-hdg); }
.sw--a2 { background: var(--sw-a2); }
.sw--a4 { background: var(--sw-a4); }
.sw--must { background: var(--sw-must); }
.sw--nailon { background: var(--sw-nailon); }
.sw--alu { background: var(--sw-alu); }

/* ==========================================================================
   Shop layout + sidebar / mobile sheet
   ========================================================================== */

.pood { padding-block: 1.25rem 3rem; }

.filtrid {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--paper);
  visibility: hidden; transform: translateY(100%);
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.filtrid:target, .filtrid.lahti {
  visibility: visible; transform: none;
  transition: transform .3s var(--ease), visibility 0s;
}
.filtrid-pea {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem var(--gut);
  background: var(--ink); color: var(--paper);
}
.filtrid-pealkiri { font-size: 1.25rem; font-weight: 700; }
.filtrid-sulge { display: grid; place-items: center; width: 3rem; height: 3rem; margin-right: -.75rem; color: var(--paper); border-radius: var(--r); }
.filtrid-vorm { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 1rem var(--gut) 0; overscroll-behavior: contain; }
.filtrid fieldset { padding-bottom: 1.5rem; }
.filtrid legend, .valik-telg, .vali-silt, .sisukord-pea {
  font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.filtrid legend { margin-bottom: .375rem; }

.filter {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  min-height: 2.75rem; cursor: pointer; text-decoration: none;
}
.filter--link { grid-template-columns: 1fr auto; font-weight: 500; font-size: 1.0625rem; }
.filter--link:hover span:first-child { text-decoration: underline; }
.filter--tagasi { grid-template-columns: auto 1fr; gap: .5rem; font-size: .9375rem; color: var(--muted); }
.filter .arv { font: 400 .875rem/1 var(--mono); color: var(--muted); }

/* custom checkbox — a control, 20 px ink square */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.25rem; height: 1.25rem; margin: 0; flex: none;
  border-radius: 0; box-shadow: none;
  background: var(--paper) center / 14px no-repeat;
  cursor: pointer; transition: background-color .12s;
}
input[type="checkbox"]:checked {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.filtrid-jalus {
  position: sticky; bottom: 0; margin: auto calc(var(--gut) * -1) 0;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem var(--gut) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--paper);
  box-shadow: 0 -12px 24px -12px rgba(43, 55, 70, .35);
}
.filtrid-jalus .nupp { flex: 1; }
.tyhista { font-weight: 500; min-height: 2.75rem; display: grid; place-items: center; }

/* ---- result head + controls ------------------------------------------------ */

.tulem { min-width: 0; }
.tulem-pea h1 {
  font-size: 1.875rem; line-height: 1.12; letter-spacing: -.025em; font-weight: 700;
}
.otsiti { font-weight: 400; color: var(--muted); }
.tulem-arv { margin-top: .25rem; font: 400 .875rem/1.4 var(--mono); color: var(--muted); }

.alamad {
  display: flex; gap: .25rem; margin: 1rem calc(var(--gut) * -1) 0; padding-inline: var(--gut);
  overflow-x: auto; scrollbar-width: none;
}
.alamad::-webkit-scrollbar { display: none; }
.alamad a {
  flex: none; display: flex; align-items: baseline; gap: .375rem;
  min-height: 2.75rem; padding: .6875rem .875rem; border-radius: var(--r);
  font-weight: 500; text-decoration: none;
}
.alamad a:first-child { padding-left: 0; }
.alamad a span { font: 400 .8125rem/1 var(--mono); color: var(--muted); }
.alamad a:hover { text-decoration: underline; }
.alamad a[aria-current] { background: var(--ink); color: var(--paper); padding-left: .875rem; text-decoration: none; }
.alamad a[aria-current] span { color: var(--chromate); }

.tulem-riba {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: center;
  margin-top: 1rem;
}
.filtrid-ava { justify-self: start; }
.mitu {
  display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .25rem; margin-left: .125rem;
  background: var(--paper); color: var(--ink); font: 700 .8125rem/1 var(--display);
}
.juhtimine { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 1rem; min-width: 0; }
.vali { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.vali select {
  appearance: none; -webkit-appearance: none;
  height: 2.75rem; padding: 0 1.75rem 0 0; margin-top: .125rem;
  border: 0; background: none; color: var(--ink);
  font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: transparent;
}
.vali select:hover { text-decoration-color: var(--ink); }
.vali svg { position: absolute; right: 0; bottom: .8125rem; pointer-events: none; }
.vaade { grid-column: 2; grid-row: 1; display: flex; gap: .25rem; }
.vaade a { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r); color: var(--muted); }
.vaade a:hover { color: var(--ink); }
.vaade a[aria-current] { background: var(--ink); color: var(--chromate); }
.markus:where(.tulem > .markus) { margin-top: 1rem; }

/* ==========================================================================
   Product list — photo cards (grid, default) and compact rows (list)
   ========================================================================== */

.rida-meta { display: flex; flex-wrap: wrap; gap: .125rem .875rem; margin-top: .25rem; font-size: .875rem; color: var(--muted); }
.kood { margin-top: .5rem; font: 400 .75rem/1 var(--mono); color: var(--muted); }

.valikud { display: flex; flex-wrap: wrap; gap: .125rem; margin: .625rem -.625rem 0; }
.valik {
  display: grid; place-items: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .625rem;
  border-radius: var(--r);
  font: 500 .9375rem/1 var(--mono); text-decoration: none; color: var(--ink);
  transition: background-color .15s, color .15s;
}
.valik:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.valik--tellimisel { color: var(--muted); }
.valik[aria-current] { background: var(--ink); color: var(--chromate); text-decoration: none; }

.hind { font: 600 1.625rem/1 var(--mono); letter-spacing: -.03em; }
.hind-km { font: 500 .8125rem/1 var(--mono); color: var(--muted); letter-spacing: 0; }
.pakk { font-size: .875rem; }
.uhik { font: 400 .8125rem/1.6 var(--mono); color: var(--muted); white-space: nowrap; }
.uhik:empty { display: none; }
.saadavus { font-size: .8125rem; font-weight: 500; }
.saadavus::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem; border-radius: 1px; background: var(--ink); vertical-align: .08em; }
.saadavus--ei { color: var(--muted); font-weight: 400; }
.saadavus--ei::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.tellimisel { color: var(--muted); }
.uus { animation: vilgu .35s var(--ease) backwards; }
@keyframes vilgu { from { opacity: .2; transform: translateY(4px); } }

/* ---- form controls shared by cards, product page and cart --------------------- */

.kogus, .samm, .kaart-valik select {
  background: var(--paper); color: var(--ink);
  border: 0; border-radius: var(--r);
  box-shadow: none;
  transition: box-shadow .12s;
}
.kogus:hover, .samm:hover, .kaart-valik select:hover { box-shadow: none; }
.kogus:focus-visible, .kaart-valik select:focus-visible { outline: none; box-shadow: none; }
.kogus {
  width: 3.25rem; height: 2.75rem; padding: 0; text-align: center;
  font: 600 1rem/1 var(--mono); appearance: textfield; -moz-appearance: textfield;
}
.kogus::-webkit-inner-spin-button, .kogus::-webkit-outer-spin-button,
.samm input::-webkit-inner-spin-button, .samm input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.samm { display: inline-flex; align-items: center; }
.samm button {
  width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--ink);
  display: grid; place-items: center; border-radius: var(--r);
}
.samm button:hover { background: var(--ink); color: var(--chromate); }
.samm input {
  width: 2.75rem; height: 2.75rem; border: 0; background: none; text-align: center;
  font: 600 1rem/1 var(--mono); appearance: textfield; -moz-appearance: textfield;
}
.samm input:focus-visible { outline: none; border-radius: var(--r); }

.lisa-nupp {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: var(--r);
  background: var(--ink); color: var(--paper); font-weight: 700; white-space: nowrap;
  transition: background-color .15s, transform .15s var(--ease);
}
.lisa-nupp svg { color: var(--chromate); }
.lisa-nupp:hover { background: var(--ink-hi); }
.lisa-nupp:active { transform: translateY(1px); }
.lisa-nupp.tehtud { background: var(--muted); }
.lisa-nupp--suur { min-height: 3.25rem; padding: 0 1.75rem; font-size: 1.0625rem; }

/* ---- the card ------------------------------------------------------------------ */

.read { margin-top: 1.25rem; }
.kaart { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--pais-h) + 1rem); }

.kaart-foto {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r); background: var(--ink);
}
.kaart-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.kaart:hover .kaart-foto img { transform: scale(1.04); }
.kaart-silt {
  position: absolute; left: .5rem; top: .5rem;
  padding: .375rem .5rem; border-radius: 0;
  background: var(--ink); color: var(--chromate);
  font: 600 .875rem/1 var(--mono); letter-spacing: -.02em; white-space: nowrap;
}
.kaart-silt .silt-nr { font: inherit; }
.kaart-naidis {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .25rem .375rem; border-radius: 0;
  background: rgba(43, 55, 70, .82); color: var(--paper);
  font: 500 .625rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}

.kaart-sisu { padding-top: .75rem; min-width: 0; }
.kaart-ryhm { display: flex; flex-wrap: wrap; gap: 0 .625rem; font-size: .8125rem; color: var(--muted); }
.kaart-ryhm .materjal { font-weight: 400; color: var(--muted); }
.kaart-nimi { margin-top: .25rem; font-size: 1rem; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; }
.kaart-nimi a { text-decoration: none; display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.kaart-nimi a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.kaart-spets { display: none; margin-top: .25rem; font-size: .875rem; color: var(--muted); }

.kaart-ost { margin-top: auto; padding-top: .625rem; display: grid; gap: .625rem; }
.kaart-hind { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .25rem .5rem; }
.kaart-hind .hind { font-size: 1.375rem; }
.kaart-hind .saadavus { justify-self: end; }
.kaart-hind .pakk { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 .5rem; font-size: .8125rem; }

.kaart-valik { position: relative; display: block; }
.kaart-valik select {
  width: 100%; height: 2.75rem; padding: 0 2.25rem 0 .75rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: 500 .9375rem/1 var(--sans); text-overflow: ellipsis;
}
.kaart-valik--yks { display: flex; align-items: center; height: 2.75rem; font-size: .9375rem; color: var(--muted); }
.kaart-valik svg { position: absolute; right: .625rem; top: .8125rem; pointer-events: none; }

.kaart-lisa { display: flex; gap: .375rem; }
.kaart-lisa .lisa-nupp { flex: 1; padding: 0 .75rem; }
.lisa-pikk { display: none; }

/* grid (default) */
.read--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .75rem; }

/* list: compact rows for trade buyers */
.read--list { display: grid; gap: 0; }
.read--list .kaart {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas: "foto sisu" "ost ost";
  column-gap: 1rem; padding-block: 1rem;
}
.read--list .kaart-foto { grid-area: foto; align-self: start; }
.read--list .kaart-silt { left: .25rem; top: .25rem; padding: .25rem .3125rem; font-size: .6875rem; }
.read--list .kaart-naidis { display: none; }
.read--list .kaart-sisu { grid-area: sisu; padding-top: 0; }
.read--list .kaart-spets { display: block; }
.read--list .kaart-ost {
  grid-area: ost; padding-top: .75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "valik valik" "hind lisa";
  align-items: center;
}
.read--list .kaart-valik { grid-area: valik; }
.read--list .kaart-hind { grid-area: hind; }
.read--list .kaart-lisa { grid-area: lisa; }
.read--list .kaart-ost:not(:has(.kaart-valik)) { grid-template-areas: "hind lisa"; }

.tyhi { padding: 3rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 36rem; }
.tyhi-suur { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

.lehed { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 2.5rem; }
.lehed a {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-width: 3rem; height: 3rem; padding: 0 .875rem;
  border-radius: var(--r); font: 500 .9375rem/1 var(--mono); text-decoration: none;
}
.lehed a:hover { text-decoration: underline; }
.lehed a[aria-current] { background: var(--ink); color: var(--chromate); text-decoration: none; }
.lehed-suund { font-family: var(--sans) !important; font-weight: 700 !important; }

/* ==========================================================================
   Product page
   ========================================================================== */

.toode, .korvileht, .kassa, .tellimus, .sisuleht { padding-block: 1rem 3.5rem; }
.murupuru { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; font-size: .875rem; color: var(--muted); }
.murupuru a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.murupuru a:hover { color: var(--ink); }

.toode-pea { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: .5rem 0 0; }
.toode-info h1 { font-size: 1.875rem; line-height: 1.12; letter-spacing: -.025em; }
.toode-info .rida-meta { font-size: .9375rem; margin-top: .5rem; }
.toode-valik { margin-top: 1.5rem; }
.toode-valik .valikud { margin-top: .375rem; }
.toode-ost { margin-top: 1.5rem; display: grid; gap: 1rem; }
.toode-ost .rida-hind { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; }
.toode-ost .hind { font-size: 2.25rem; }
.osta-suur { display: flex; flex-wrap: wrap; gap: .5rem; }
.osta-suur .samm button, .osta-suur .samm input { height: 3.25rem; }
.toode-foto { margin: 0; }
.kaart-foto--suur .kaart-silt { left: .75rem; top: .75rem; padding: .5rem .75rem; font-size: 1.25rem; }
.toode-foto figcaption { margin-top: .5rem; font: 400 .75rem/1.4 var(--mono); color: var(--muted); }
.toode-ost .kood { margin: 0; }
.toode-info > .markus { margin-top: 1.25rem; }

.toode-sisu { display: grid; gap: 2.5rem; margin-top: 3rem; }
.toode-sisu h2, .sarnased h2, .tellimus-sisu h2 { font-size: 1.375rem; letter-spacing: -.015em; margin-bottom: .75rem; }
.tabel-kerimine { overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.mootabel { width: 100%; min-width: 34rem; font-size: .9375rem; }
.mootabel th, .mootabel td { padding: .75rem .75rem; text-align: left; vertical-align: middle; }
.mootabel th:first-child, .mootabel td:first-child { padding-left: 0; }
.mootabel thead th { font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-block: .5rem; }
.mootabel .nr { text-align: right; }
.mootabel tbody th a { display: inline-grid; place-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .625rem; margin-left: -.625rem; border-radius: var(--r); font: 600 1rem/1 var(--mono); text-decoration: none; }
.mootabel tbody th a:hover { text-decoration: underline; }
.mootabel tbody tr[aria-current] th a { background: var(--ink); color: var(--chromate); }
.mootabel tbody tr[aria-current] { font-weight: 600; }

.andmed dl, .faktid, .tellimus-andmed dl, .tekst-loend { display: grid; gap: .875rem; }
.andmed dl div, .faktid div, .tellimus-andmed dl div, .tekst-loend div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.andmed dt, .faktid dt, .tellimus-andmed dt, .tekst-loend dt { font: 500 .8125rem/1.6 var(--mono); color: var(--muted); }

.sarnased { margin-top: 3.5rem; }

/* ==========================================================================
   Cart
   ========================================================================== */

.korv-paigutus, .kassa-paigutus { display: grid; gap: 2rem; }
.korv-pea { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.korv-pea h1, .kassa-vorm h1 { font-size: 1.875rem; letter-spacing: -.025em; line-height: 1.12; }
.korvirida-list { margin-top: 1rem; }
.korvirida {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  grid-template-areas: "silt info eemalda" "kogus kogus summa";
  gap: .75rem 1rem; align-items: center;
  padding-block: 1.25rem;
}
.korvirida-foto { grid-area: silt; align-self: start; display: block; width: 3.5rem; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.korvirida-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.korvirida-info { grid-area: info; min-width: 0; }
.korvirida-info h2 { font-size: 1.0625rem; line-height: 1.3; }
.korvirida-info h2 a { text-decoration: none; }
.korvirida-info h2 a:hover { text-decoration: underline; }
.korvirida-kogus { grid-area: kogus; justify-self: start; display: flex; gap: .5rem; align-items: center; }
.korvirida-summa { grid-area: summa; justify-self: end; font-size: 1.25rem; font-weight: 600; }
.korvirida-eemalda { grid-area: eemalda; align-self: start; }
.korvirida-eemalda button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; background: none; border-radius: var(--r); color: var(--muted);
}
.korvirida-eemalda button:hover { background: var(--ink); color: var(--chromate); }
.korv-alumine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }

.kokkuvote {
  align-self: start;
  background: var(--ink); color: var(--paper);
  border-radius: 0;
  padding: 1.5rem;
  display: grid; gap: 1.25rem;
}
.kokkuvote h2 { font-size: 1.25rem; }
.kokkuvote dl { display: grid; gap: .625rem; }
.kokkuvote dl div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.kokkuvote dt { color: var(--steel); font-size: .9375rem; }
.kokkuvote dd { font-weight: 500; }
.kokkuvote-summa { margin-top: .5rem; padding-top: .75rem; box-shadow: none; }
.kokkuvote-summa dt { color: var(--paper); font-weight: 700; font-size: 1.0625rem; }
.kokkuvote-summa dd { color: var(--chromate); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.kokkuvote-read { display: grid; gap: .75rem; }
.kokkuvote-read li { display: grid; grid-template-columns: auto 1fr auto; gap: .625rem; align-items: baseline; font-size: .9375rem; }
.kokkuvote-kogus { color: var(--chromate); }
.kokkuvote-nimi small { color: var(--steel); }

.korv-tyhi { max-width: 40rem; padding-block: 2rem; }
.korv-tyhi h1 { font-size: 2rem; letter-spacing: -.025em; }
.korv-tyhi > p { margin-top: .5rem; color: var(--muted); }
.korv-tyhi-ryhmad { margin-top: 2rem; display: grid; }
.korv-tyhi-ryhmad a, .ryhm {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; padding: .75rem 1rem; margin-inline: -1rem; border-radius: var(--r);
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; text-decoration: none;
  transition: background-color .18s, color .18s;
}
.korv-tyhi-ryhmad a:hover, .ryhm:hover { background: var(--ink); color: var(--paper); }
.korv-tyhi-ryhmad a:hover svg, .ryhm:hover .ryhm-nool { color: var(--chromate); transform: translateX(4px); }
.korv-tyhi-ryhmad svg, .ryhm-nool { transition: transform .2s var(--ease); }

/* ==========================================================================
   Checkout
   ========================================================================== */

.kassa-vorm { display: grid; gap: 2rem; min-width: 0; }
.kassa-vorm > .markus { margin-top: -1rem; }
.kassa-osa { display: grid; gap: 1rem; }
.kassa-osa > legend:not(.sr) { font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 1rem; }

.valjad { display: grid; gap: 1rem; }

.vali-rida { display: grid; gap: .375rem; }
.vali-rida > label:not(.noustun) { font-weight: 500; font-size: .9375rem; }
.valikuline { color: var(--muted); font-weight: 400; }
.vali-rida input:not([type="checkbox"]), .vali-rida textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem .875rem;
  border: 0; border-radius: var(--r);
  background: var(--paper); box-shadow: none;
  font-size: 1.0625rem;
  transition: box-shadow .12s;
}
.vali-rida textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
.vali-rida input:hover, .vali-rida textarea:hover { box-shadow: none; }
.vali-rida input:focus-visible, .vali-rida textarea:focus-visible { outline: none; box-shadow: none; }
.on-viga input:not([type="checkbox"]), .on-viga textarea { box-shadow: none; }
.vali-abi { font-size: .8125rem; color: var(--muted); }
.vali-viga { font-size: .875rem; font-weight: 500; color: var(--viga); }
.vali-viga[hidden] { display: none; }

.vead { background: var(--viga); color: var(--paper); border-radius: var(--r); padding: 1rem 1.25rem; }
.vead[hidden] { display: none; }
.vead-pea { font-weight: 700; }
.vead ul { margin-top: .5rem; display: grid; gap: .25rem; }
.vead a { color: var(--paper); }

/* option rows: radio glyph + text; the chosen one becomes an ink block */
.valikrida { display: flex; flex-wrap: wrap; gap: .25rem; }
.valikud-suur { display: grid; gap: .25rem; }
.valikkast { position: relative; display: flex; cursor: pointer; }
.valikkast input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valikkast > span {
  display: flex; align-items: center; gap: .75rem;
  min-height: 3rem; padding: .625rem 1rem .625rem .75rem; border-radius: var(--r);
  transition: background-color .15s, color .15s;
}
.valikkast > span::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  box-shadow: none; background: var(--paper);
}
.valikkast--suur > span::before { align-self: flex-start; margin-top: .125rem; }
.valikkast:hover > span { text-decoration: underline; }
.valikkast input:checked + span { background: var(--ink); color: var(--paper); text-decoration: none; }
.valikkast input:checked + span::before { box-shadow: none; background: var(--chromate); }
.valikkast input:focus-visible + span { outline: none; }
.valikkast-sisu { flex: 1; display: grid !important; grid-template-columns: auto 1fr auto; column-gap: .75rem; row-gap: .125rem; }
.valikkast-nimi { grid-column: 2; display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.valikkast-hind { grid-column: 3; font-weight: 600; }
.valikkast-abi { grid-column: 2 / -1; font-size: .875rem; color: var(--muted); }
.valikkast input:checked + span .valikkast-abi { color: var(--steel); }
.valikkast input:checked + span .valikkast-hind, .valikkast input:checked + span .valikkast-nimi svg { color: var(--chromate); }

.tingimuslik { display: none; }
.kassa-paigutus:has(#ostja-firma:checked) [data-kui="ostja-firma"],
.kassa-paigutus:has(#tarne-pakiautomaat:checked) [data-kui="tarne-pakiautomaat"],
.kassa-paigutus:has(#tarne-kuller:checked) [data-kui="tarne-kuller"] { display: block; }
@supports not selector(:has(a)) { .tingimuslik { display: block; } }

.noustun { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.noustun input { margin-top: .125rem; }

.kokkuvote--kassa .nupp { margin-top: .25rem; }

/* ==========================================================================
   Order confirmation
   ========================================================================== */

.tellimus-pea { display: grid; gap: 1.5rem; padding-top: 1rem; }
.tellimus-pea h1 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -.025em; }
.tellimus-juht { margin-top: .75rem; font-size: 1.0625rem; max-width: 40rem; }
.tellimus-pea .markus { margin-top: 1rem; }
.silt--kinnitus { aspect-ratio: 3 / 1; max-width: 28rem; }
.silt--kinnitus .silt-nr { font-size: min(11cqi, 3rem); }
.tellimus-sisu { display: grid; gap: 2.5rem; margin-top: 3rem; }
.tellimus-tabel { min-width: 30rem; }
.tellimus-tabel tbody th { font-family: var(--sans); font-weight: 600; }
.tellimus-tabel tfoot th { text-align: right; font-weight: 500; color: var(--muted); }
.tellimus-tabel tfoot tr:first-child > * { padding-top: 1.25rem; }
.tellimus-kokku th, .tellimus-kokku td { font-size: 1.25rem; font-weight: 700 !important; color: var(--ink) !important; }
.tellimus-andmed dl { margin-bottom: 2rem; }

/* ==========================================================================
   Content pages
   ========================================================================== */

.meist-pea { display: grid; gap: 2.5rem; padding-top: 1.5rem; }
.meist-juht h1 { font-size: 2.125rem; line-height: 1.1; letter-spacing: -.03em; max-width: 20ch; }
.meist-juht p { margin-top: 1.25rem; font-size: 1.125rem; max-width: 38rem; }
.faktid dd { font-weight: 500; }

.meist-ryhmad { display: grid; margin-top: 3.5rem; }
.ryhm { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nimi nool" "kirj nool" "arv nool"; gap: .125rem 1rem; padding-block: 1.25rem; font-size: 1rem; }
.ryhm-nimi { grid-area: nimi; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; }
.ryhm-kirjeldus { grid-area: kirj; font-weight: 400; color: var(--muted); }
.ryhm-arv { grid-area: arv; font-size: .8125rem; font-weight: 400; color: var(--muted); margin-top: .25rem; }
.ryhm:hover .ryhm-kirjeldus, .ryhm:hover .ryhm-arv { color: var(--steel); }
.ryhm-nool { grid-area: nool; align-self: center; }

.meist-kuidas { margin-top: 4rem; display: grid; gap: 1.5rem; }
.meist-kuidas h2 { font-size: 1.625rem; letter-spacing: -.02em; }
.kuidas { display: grid; gap: 1.75rem; }
.kuidas dt { display: flex; align-items: center; gap: .625rem; font-size: 1.125rem; font-weight: 700; }
.kuidas dd { margin-top: .375rem; color: var(--muted); max-width: 32rem; }
.kuidas .mono { color: var(--ink); font-weight: 500; }

.kontakt-paigutus { display: grid; gap: 3rem; padding-top: 1.5rem; }
.kontakt-otse h1 { font-size: 2.125rem; line-height: 1.1; letter-spacing: -.03em; max-width: 18ch; }
.kontakt-otse > p { margin-top: 1rem; font-size: 1.0625rem; max-width: 34rem; }
.otse-lingid { display: grid; margin-top: 2rem; margin-bottom: 1rem; }
.otse {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ikoon silt" "ikoon vaartus";
  column-gap: 1rem; align-items: center;
  padding: 1rem; margin-inline: -1rem; border-radius: var(--r); text-decoration: none;
  transition: background-color .18s, color .18s;
}
.otse svg { grid-area: ikoon; }
.otse-silt { grid-area: silt; font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.otse-vaartus { grid-area: vaartus; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.otse:hover { background: var(--ink); color: var(--paper); }
.otse:hover svg { color: var(--chromate); }
.otse:hover .otse-silt { color: var(--steel); }
.kontakt-vorm form { display: grid; gap: 1.125rem; }
.kontakt-vorm h2 { font-size: 1.375rem; letter-spacing: -.015em; }
.kontakt-vorm .nupp { justify-self: start; }
.saadetud { display: flex; gap: 1rem; align-items: flex-start; background: var(--ink); color: var(--paper); border-radius: 0; padding: 1.5rem; }
.saadetud svg { color: var(--chromate); }
.saadetud h2 { font-size: 1.375rem; }
.saadetud p { margin-top: .375rem; }
.saadetud .tekstinupp { color: var(--steel); }

.tekstileht { display: grid; gap: 2rem; padding-top: 1.5rem; }
.tekst-sisukord ul { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .5rem; }
.tekst-sisukord a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }
.tekst { max-width: 44rem; }
.tekst h1 { font-size: 2.125rem; letter-spacing: -.03em; line-height: 1.1; }
.tekst > .markus { margin-top: 1rem; }
.tekst section { margin-top: 2.5rem; scroll-margin-top: calc(var(--pais-h) + 1rem); }
.tekst h2 { font-size: 1.375rem; letter-spacing: -.015em; }
.tekst p { margin-top: .75rem; }
.tekst-loend { margin-top: 1rem; }

.leht404 { display: grid; gap: 2rem; align-content: start; padding-top: 2rem; }
.leht404 .silt--suur { max-width: 24rem; }
.leht404 h1 { font-size: 2rem; letter-spacing: -.025em; line-height: 1.12; }
.leht404 p { margin-top: .75rem; max-width: 34rem; }
.otsing--suur { margin: 1.5rem 0 .5rem; max-width: 36rem; }
.otsing--suur input { box-shadow: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.jalus { background: var(--ink); color: var(--steel); margin-top: auto; }
.jalus-sisu { display: grid; gap: 2rem; padding-block: 2.5rem 2rem; }
.jalus-brand p { margin-top: .5rem; max-width: 18rem; }
.jalus h2 { font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--sw-hdg); margin-bottom: .5rem; }
.jalus ul a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--paper); text-decoration: none; }
.jalus ul a:hover { text-decoration: underline; }
.jalus-andmed { display: grid; gap: .375rem; font-size: .9375rem; }
.jalus-andmed div { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; }
.jalus-andmed dt { font: 400 .75rem/1.9 var(--mono); color: var(--sw-hdg); }
.jalus-andmed dd a { display: inline-block; color: var(--paper); padding-block: .625rem; margin-block: -.625rem; }
.jalus-alus {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-block: 1.25rem 2rem; font: 400 .75rem/1.5 var(--mono); color: var(--sw-hdg);
}
.footer-credit { min-height: 2.75rem; justify-content: center; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-decoration: none; text-align: right; }
.footer-credit-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%), linear-gradient(90deg, var(--steel), #FFFFFF);
  background-size: 200% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-credit:hover .footer-credit-name { animation: kiir 1.1s var(--ease) 1; }
@keyframes kiir { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
.footer-credit-sub { font: 400 .6875rem/1.4 var(--sans); letter-spacing: .04em; color: var(--sw-hdg); }

/* ---- mobile tab bar + toast -------------------------------------------------- */

.alariba {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); color: var(--steel);
  box-shadow: 0 -1px 0 var(--ink-hi);
}
.alariba > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
  font-size: .75rem; font-weight: 500; text-decoration: none; min-width: 0;
}
.alariba [aria-current] { color: var(--chromate); }
.alariba-korv { color: var(--paper); }
.alariba-korv > span { font: 500 .75rem/1 var(--mono); white-space: nowrap; }

.teade {
  position: fixed; left: var(--gut); right: var(--gut); z-index: 55;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + .625rem);
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .875rem 1rem; border-radius: var(--r);
  background: var(--ink); color: var(--paper); font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(31, 41, 52, .55);
  animation: ules .28s var(--ease) backwards;
}
.teade svg { color: var(--chromate); }
.teade span { flex: 1; min-width: 12rem; }
.teade a { color: var(--chromate); font-weight: 700; min-height: 2.75rem; display: inline-flex; align-items: center; }
.teade[hidden] { display: none; }
@keyframes ules { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================================================
   641 px +
   ========================================================================== */

@media (min-width: 641px) {
  :root { --gut: 1.5rem; }

  .tulem-pea h1, .toode-info h1, .korv-pea h1, .kassa-vorm h1, .tellimus-pea h1 { font-size: 2.375rem; }
  .tulem-riba { grid-template-columns: auto 1fr auto; }
  .juhtimine { grid-column: 2; grid-row: 1; justify-self: end; gap: 1.5rem; }
  .vaade { grid-column: 3; }

  .read--grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2.5rem 1.25rem; }
  .lisa-pikk { display: inline; }
  .read--list .kaart {
    grid-template-columns: 6rem minmax(0, 1fr);
    grid-template-areas: "foto sisu" "foto ost";
    column-gap: 1.25rem;
  }
  .read--list .kaart-ost { grid-template-columns: minmax(0, 15rem) 1fr auto; grid-template-areas: "valik hind lisa"; column-gap: 1rem; }
  .read--list .kaart-ost:not(:has(.kaart-valik)) { grid-template-columns: 1fr auto; grid-template-areas: "hind lisa"; }

  .teade { left: auto; right: var(--gut); max-width: 28rem; }

  .valjad--kaks { grid-template-columns: 1fr 1fr; }
  .valjad--kaks > :nth-child(3) { grid-column: 1 / -1; }
  .valjad--aadress { grid-template-columns: 2fr 1fr 1fr; }
  .valikud-suur--kolm { grid-template-columns: repeat(3, 1fr); }
  .valikud-suur--kolm .valikkast-sisu { grid-template-columns: auto 1fr; }

  .korvirida {
    grid-template-columns: 4rem minmax(0, 1fr) auto 8rem auto;
    grid-template-areas: "silt info kogus summa eemalda";
    column-gap: 1.25rem;
  }
  .korvirida-foto { width: 4rem; align-self: center; }
  .korvirida-eemalda { align-self: center; }

  .tellimus-pea { grid-template-columns: 18rem 1fr; align-items: start; }
  .silt--kinnitus { aspect-ratio: 1; }
  .silt--kinnitus .silt-nr { font-size: min(13cqi, 2.5rem); }

  .jalus-sisu { grid-template-columns: 1fr 1fr; }
  .toode-pea { grid-template-columns: minmax(16rem, 2fr) 3fr; gap: 2.5rem; align-items: start; }
  .leht404 { grid-template-columns: 18rem 1fr; }
  .leht404 .silt--suur { aspect-ratio: 1; }
  .kuidas { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ryhm { grid-template-columns: 16rem 1fr auto; grid-template-areas: "nimi kirj nool" "nimi arv nool"; align-items: baseline; }
}

/* ==========================================================================
   1024 px + : sticky header, sidebar, no tab bar
   ========================================================================== */

@media (min-width: 1024px) {
  :root { --gut: 2rem; --pais-h: 7.5rem; }
  body { padding-bottom: 0; }
  .alariba { display: none; }
  .teade { bottom: 1.5rem; }

  .pais { position: sticky; top: 0; z-index: 40; }
  .pais-rida {
    grid-template-columns: auto minmax(0, 46rem) 1fr auto auto;
    grid-template-areas: "mark otsing . km korv";
    gap: 1.5rem; padding-block: .875rem;
  }
  .mark { font-size: 1.875rem; }
  .korv-summa { display: inline; }
  .vahemikud-info { display: flex; margin-left: auto; }
  .vahemikud-info a { padding-inline: .75rem; }
  .vahemikud-info a:last-child { padding-right: 0; }

  .pood {
    display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 3.5rem;
    padding-top: 0;
  }
  .filtrid {
    inset: auto; position: sticky; top: var(--pais-h); z-index: auto;
    align-self: start; max-height: calc(100vh - var(--pais-h));
    visibility: visible; transform: none; transition: none;
    padding-top: 1.75rem;
  }
  .filtrid-pea { display: none; }
  .filtrid-vorm { padding: 0; overflow-y: auto; scrollbar-width: thin; }
  .filtrid-jalus { position: static; margin: 0; padding: 0 0 1.5rem; box-shadow: none; }
  .js .filtrid-jalus .nupp { display: none; }
  .filtrid-ava { display: none; }
  .tulem { padding-top: 1.75rem; }
  .tulem-riba { grid-template-columns: 1fr auto; }
  .juhtimine { grid-column: 1; justify-self: start; }
  .vaade { grid-column: 2; }
  .tulem-pea h1 { font-size: 2.875rem; }

  .read--grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 3rem 1.5rem; }
  .read--neli { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .read--list .kaart { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "foto sisu ost"; align-items: center; column-gap: 1.75rem; }
  .read--list .kaart-ost { padding-top: 0; grid-template-columns: 14rem 9.5rem auto; }
  .read--list .kaart-ost:not(:has(.kaart-valik)) { grid-template-columns: 9.5rem auto; }
  .read--list .kaart-hind { grid-template-columns: auto; }
  .read--list .kaart-hind .saadavus { justify-self: start; grid-row: 3; }

  .toode-pea { grid-template-columns: minmax(20rem, 5fr) 7fr; gap: 4rem; }
  .toode-info h1 { font-size: 2.75rem; }
  .toode-sisu { grid-template-columns: 3fr 2fr; gap: 4rem; }

  .korv-paigutus, .kassa-paigutus { grid-template-columns: minmax(0, 1fr) 24rem; gap: 4rem; align-items: start; }
  .kokkuvote { position: sticky; top: calc(var(--pais-h) + 1.5rem); padding: 2rem; }
  .korv-paigutus, .kassa-paigutus { padding-top: .5rem; }
  .korv-pea h1, .kassa-vorm h1 { font-size: 2.75rem; }

  .tellimus-sisu { grid-template-columns: 3fr 2fr; gap: 4rem; }
  .meist-pea { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: end; }
  .meist-juht h1, .kontakt-otse h1 { font-size: 3.25rem; }
  .ryhm { grid-template-columns: 22rem 1fr auto; padding-inline: 1.5rem; margin-inline: -1.5rem; }
  .kontakt-paigutus { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .tekstileht { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .tekst-sisukord { position: sticky; top: calc(var(--pais-h) + 1.5rem); padding-top: .5rem; }
  .tekst-sisukord ul { flex-direction: column; }
  .tekst h1 { font-size: 2.75rem; }
  .leht404 { grid-template-columns: 22rem 1fr; gap: 4rem; padding-top: 3rem; }

  .jalus-sisu { grid-template-columns: 1.2fr 1fr 1fr 2fr; gap: 3rem; padding-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.toode-sisu > *, .tellimus-sisu > *, .korv-paigutus > *, .kassa-paigutus > * { min-width: 0; }

/* product page reuses row pieces outside the row grid — reset their row placement */
.toode-ost > * { grid-area: auto; }
.toode-ost .pakk { align-items: flex-start; flex-direction: row; }

/* tap targets: name links keep their line box but gain a 44 px hit area */
.korvirida-info h2 a { display: inline-block; padding-block: .6875rem; margin-block: -.6875rem; }
.jalus-andmed dd a { padding-block: .75rem; margin-block: -.75rem; }

/* ==========================================================================
   Logo system — display type, 45° chamfers, hexagon badges, icon masks
   (derived from the Servest.ee wordmark: cut corners, a bolt through the S, a nut for the dot)
   ========================================================================== */

/* display type: everything the eye scans — headings, nav, prices, sizes, buttons */
h1, h2, .rida-nimi, .kaart-nimi, .hind, .kaart-silt, .valik, .alamad a, .lehed a,
.nupp, .lisa-nupp, .tyhi-suur, .ryhm-nimi, .otse-vaartus, .kokkuvote-summa dd, .korvirida-summa,
.filtrid-pealkiri, .filter--link, .valikkast-nimi, .kassa-osa > legend, .silt-nr, .footer-credit-name,
.alariba > a, .vali select, .kaart-valik select {
  font-family: var(--display);
}
h1, h2 { letter-spacing: -.01em; }
.tulem-pea h1, .toode-info h1, .korv-pea h1, .kassa-vorm h1, .tellimus-pea h1, .meist-juht h1,
.kontakt-otse h1, .tekst h1, .leht404 h1, .korv-tyhi h1 { font-weight: 700; line-height: 1.06; letter-spacing: -.015em; }
.kaart-nimi { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.hind { font-weight: 600; letter-spacing: -.01em; }
.valik, .kaart-silt { font-weight: 600; letter-spacing: 0; }
.nupp, .lisa-nupp { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: .9375rem; }
.lisa-nupp--suur { font-size: 1rem; }
.filtrid legend, .valik-telg, .vali-silt, .sisukord-pea, .jalus h2, .otse-silt, .kaart-naidis {
  font-family: var(--display); font-weight: 600; letter-spacing: .1em;
}
.vali select { font-weight: 600; }
.kaart-valik select { font-weight: 500; }

/* chamfer: top-left and bottom-right cut, like the terminals of the S */
.nupp, .lisa-nupp, .kaart-silt, .km a[aria-current], .valik[aria-current], .alamad a[aria-current],
.vaade a[aria-current], .lehed a[aria-current], .mootabel tbody tr[aria-current] th a,
.valikkast input:checked + span, .samm button:hover, .korvirida-eemalda button:hover,
.teade, .vead, .hyppa, .filtrid-sulge:hover {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.kaart-foto, .korvirida-foto, .kokkuvote, .saadetud, .silt, .toode-foto .kaart-foto {
  clip-path: polygon(var(--cut-l) 0, 100% 0, 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%, 0 var(--cut-l));
}
.korvirida-foto { --cut-l: .5rem; }
.kaart-silt { --cut: .375rem; }

/* hexagon: the nut in "Servest.ee" — counts and the stock marker */
.korv-arv, .mitu {
  clip-path: polygon(.5rem 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, .5rem 100%, 0 50%);
  padding-inline: .5rem;
}
.saadavus::before {
  width: .625rem; height: .5625rem; border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.saadavus--ei::before { box-shadow: none; background: var(--sw-hdg); }

/* focus rings drawn inside clipped shapes (an outside outline would be clipped away) */
.nupp:focus-visible, .lisa-nupp:focus-visible, .otsing button:focus-visible, .km a:focus-visible,
.valik:focus-visible, .alamad a:focus-visible, .vaade a:focus-visible, .lehed a:focus-visible {
  outline: 2px solid currentColor; outline-offset: -6px;
}
.valik:not([aria-current]):focus-visible, .alamad a:not([aria-current]):focus-visible,
.vaade a:not([aria-current]):focus-visible, .lehed a:not([aria-current]):focus-visible { outline-offset: 0; }
.kokkuvote :focus-visible, .teade :focus-visible, .alariba :focus-visible, .jalus :focus-visible { outline-color: var(--paper); }
.nupp--kroom:focus-visible { outline-color: var(--ink); }

/* selected states: navy fill, white type */
.valik[aria-current], .alamad a[aria-current], .vaade a[aria-current], .lehed a[aria-current],
.mootabel tbody tr[aria-current] th a { color: var(--paper); }
.alamad a[aria-current] span { color: var(--steel); }
.samm button:hover, .korvirida-eemalda button:hover { color: var(--paper); }
.lisa-nupp svg { color: var(--paper); }
.lisa-nupp.tehtud { background: var(--muted); }
.vahemikud a[aria-current] .ikoon { background: var(--ink); }

/* the white-logo footer, header logo sizes */
.jalus .mark img { height: 1.875rem; }
.jalus-brand p { margin-top: .75rem; }

/* owner-supplied icon sheet, cut out and used as masks so they take the text colour */
.ikoon {
  display: inline-block; flex: none; width: 1.25rem; height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.ikoon--suur { width: 2.5rem; height: 2.5rem; }
.ikoon--mutter { --i: url("/templates/servest/assets/img/ikoonid/mutter.png"); }
.ikoon--polt { --i: url("/templates/servest/assets/img/ikoonid/polt.png"); }
.ikoon--kruvikeeraja { --i: url("/templates/servest/assets/img/ikoonid/kruvikeeraja.png"); }
.ikoon--mutrivoti { --i: url("/templates/servest/assets/img/ikoonid/mutrivoti.png"); }
.ikoon--tangid { --i: url("/templates/servest/assets/img/ikoonid/tangid.png"); }
.ikoon--joonlaud { --i: url("/templates/servest/assets/img/ikoonid/joonlaud.png"); }
.ikoon--keemia { --i: url("/templates/servest/assets/img/ikoonid/keemia.png"); }
.ikoon--kodu { --i: url("/templates/servest/assets/img/ikoonid/kodu.png"); }
.ikoon--auto { --i: url("/templates/servest/assets/img/ikoonid/auto.png"); }
.ikoon--pitskruvi { --i: url("/templates/servest/assets/img/ikoonid/pitskruvi.png"); }
.ikoon--hooaeg { --i: url("/templates/servest/assets/img/ikoonid/hooaeg.svg"); }
.filter--link { grid-template-columns: auto 1fr auto; }
.filter--link .ikoon { color: var(--ink); }
.ryhm { grid-template-areas: "nimi nool" "kirj nool" "arv nool"; }
.ryhm-nimi { display: flex; align-items: center; gap: .75rem; }
.korv-tyhi-ryhmad a > span:first-child { display: inline-flex; align-items: center; gap: .75rem; }

@media (min-width: 641px) {
  .mark img { height: 1.875rem; }
  .ryhm { grid-template-areas: "nimi kirj nool" "nimi arv nool"; }
}
@media (min-width: 1024px) {
  .pais-rida { padding-block: .875rem .5rem; }
  .mark img { height: 2.125rem; }
  .vahemikud-info a { font-family: var(--display); }
}

/* phone header: keep the VAT toggle on one line beside the logo */
.km a { white-space: nowrap; }
@media (max-width: 400px) {
  .mark img { height: 1.375rem; }
  .km a { padding: 0 .5rem; }
  .pais-rida { column-gap: .5rem; }
}

/* ==========================================================================
   Font pairings — ?fondid=a|b|c (config.php FONDID). B is the default in :root.
   ========================================================================== */

html[data-fondid="a"] {
  --display: "Oxanium", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-fondid="c"] {
  --display: "Tomorrow", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* codes, counts and notices now share the body face: keep figures aligned */
.tulem-arv, .markus, .kood, .uhik, .arv, .mootabel, .mono, .jalus-alus, .jalus-andmed dt { font-variant-numeric: tabular-nums; }
/* the condensed default runs narrow: give display type a touch more size and air */
html[data-fondid="b"] .kaart-nimi { font-size: 1.125rem; }
html[data-fondid="b"] .hind { letter-spacing: 0; }
html[data-fondid="b"] .nupp, html[data-fondid="b"] .lisa-nupp { letter-spacing: .04em; }

.toode-ost .pakk { display: flex; flex-wrap: wrap; gap: 0 .5rem; }

/* ==========================================================================
   Two tones, no borders (owner 2026-09-16: "Move away from the border design to a 2-tone design with background
   design ontop"). Tone 1 = logo navy band on top, carrying the owner's line-and-hex motif (assets/img/muster.svg,
   redrawn from servest_background.jpg), plus the navy footer. Tone 2 = light steel for everything between.
   Controls are filled shapes (white on tone 2, white/navy on tone 1): no rings, no underlines, no rules.
   ========================================================================== */

:root { --tone: #DDE3EA; }   /* tone 2: muted text 5.9:1, ink 12.6:1 on it */
body { background: var(--tone); }

/* ---- tone 1: the band ------------------------------------------------------------ */
.ylaosa {
  position: relative; color: var(--paper);
  background: var(--ink) url("/templates/servest/assets/img/pais-muster.png") left -80px top -40px / 1760px auto no-repeat;
}
@media (min-width: 1024px) { .ylaosa { background-position: center top -20px; } }
.ylaosa :focus-visible { outline-color: var(--paper); }
.hyppa { background: var(--paper); color: var(--ink); }

.pais { background: none; color: var(--paper); box-shadow: none; }
@media (min-width: 1024px) { .pais { position: static; } }
.otsing input { box-shadow: none; background: var(--paper); }
.otsing input:focus-visible { box-shadow: none; outline: none; }
.otsing button { background: var(--tone); color: var(--ink); }
.otsing button:hover { background: var(--paper); }
.km a { color: var(--steel); }
.km a:not([aria-current]):hover { color: var(--paper); }
.km a[aria-current] { background: var(--paper); color: var(--ink); }
.korv { color: var(--paper); }
.korv-arv { background: var(--paper); color: var(--ink); }

.vahemikud-rida { gap: .25rem; padding-bottom: .875rem; margin-left: -.75rem; }
.vahemikud a, .vahemikud-rida > a:first-child { padding: .5rem .75rem; box-shadow: none; color: var(--steel); }
.vahemikud a span { color: var(--sw-hdg); }
.vahemikud a:hover { color: var(--paper); }
.vahemikud a[aria-current] {
  background: var(--paper); color: var(--ink); box-shadow: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.vahemikud a[aria-current] span { color: var(--muted); }
.vahemikud-info a { padding: .5rem .75rem; }

/* page head inside the band */
.lehe-pea { padding-block: .75rem 2.5rem; }
.lehe-pea h1 { color: var(--paper); }
.lehe-pea .tulem-arv, .lehe-pea .markus, .lehe-pea .otsiti, .lehe-pea .vali-silt, .lehe-pea .lehe-juht,
.lehe-pea .murupuru, .lehe-pea .rida-meta, .lehe-pea .vali-abi, .lehe-pea .faktid dt, .lehe-pea .otse-silt,
.lehe-pea .materjal { color: var(--steel); }
.lehe-pea .markus--tugev { color: var(--paper); }
.lehe-pea .murupuru a:hover { color: var(--paper); }
.lehe-juht { margin-top: .5rem; font-size: 1.0625rem; }
.lehe-pea .vali select { color: var(--paper); }
.lehe-pea .vali select option { color: var(--ink); }
.lehe-pea .vali select:hover { text-decoration-color: var(--paper); }
.lehe-pea .vaade a { color: var(--steel); }
.lehe-pea .vaade a:hover { color: var(--paper); }
.lehe-pea .vaade a[aria-current] { background: var(--paper); color: var(--ink); }
.lehe-pea .nupp--must { background: var(--paper); color: var(--ink); }
.lehe-pea .mitu { background: var(--ink); color: var(--paper); }
.lehe-pea .alamad a { color: var(--steel); }
.lehe-pea .alamad a:hover { color: var(--paper); }
.lehe-pea .alamad a span { color: var(--sw-hdg); }
.lehe-pea .alamad a[aria-current] { background: var(--paper); color: var(--ink); }
.lehe-pea .alamad a[aria-current] span { color: var(--muted); }
.lehe-pea .silt { background: var(--paper); color: var(--ink); }
.lehe-pea .silt-ryhm { color: var(--muted); }
.lehe-pea .faktid dd { color: var(--paper); }
.lehe-pea .otse:hover { background: var(--paper); color: var(--ink); }
.lehe-pea .otse:hover svg { color: var(--ink); }
.lehe-pea .otse:hover .otse-silt { color: var(--muted); }
.lehe-pea .tagasi-link { color: var(--paper); }
.lehe-pea > h1 + .rida-meta, .lehe-pea > h1 + .markus, .lehe-pea > h1 + p { margin-top: .75rem; }
.lehe-pea .murupuru + h1 { margin-top: .25rem; }

/* shop head: title + controls on one line on wide screens */
.lehe-pea--pood { display: grid; gap: .75rem 2rem; }
.lehe-pea--pood .tulem-riba, .lehe-pea--pood .alamad { margin-top: 0; }
@media (min-width: 1024px) {
  .lehe-pea--pood { grid-template-columns: 1fr auto; align-items: end; }
  .lehe-pea--pood .tulem-pea { grid-column: 1; }
  .lehe-pea--pood .tulem-riba { grid-column: 2; }
  .lehe-pea--pood .alamad, .lehe-pea--pood .markus { grid-column: 1 / -1; }
  .lehe-pea--pood .alamad { margin-left: -.875rem; }
  .lehe-pea { padding-top: 1.25rem; }
}
.lehe-pea--tellimus .tellimus-pea { padding-top: 0; }
.lehe-pea--meist .meist-pea, .lehe-pea--kontakt .kontakt-otse { padding-top: .5rem; }
.lehe-pea--404 { display: grid; gap: 2rem; }
@media (min-width: 641px) {
  .lehe-pea--404 { grid-template-columns: 16rem 1fr; align-items: center; }
  .lehe-pea--404 .silt--suur { aspect-ratio: 1; }
}

/* ---- tone 2: filled controls, no rings ---------------------------------------------- */
.pood, .toode, .korvileht, .kassa, .tellimus, .sisuleht { padding-top: 2rem; }
.filtrid, .filtrid-jalus { background: var(--tone); box-shadow: none; }
@media (min-width: 1024px) {
  .pood { padding-top: 0; }
  .filtrid { top: 0; padding-top: 2rem; background: none; }
  .filtrid-jalus { background: none; }
  .tulem { padding-top: 2rem; }
}

input[type="checkbox"] { box-shadow: none; background-color: var(--paper); }
input[type="checkbox"]:checked { background-color: var(--ink); }

.kogus, .samm, .kaart-valik select { box-shadow: none; background: var(--paper); }
.kogus:hover, .samm:hover, .kaart-valik select:hover { box-shadow: none; }
.kogus:focus-visible, .kaart-valik select:focus-visible { box-shadow: none; outline: none; }

.vali-rida input:not([type="checkbox"]), .vali-rida textarea { box-shadow: none; background: var(--paper); }
.vali-rida input:hover, .vali-rida textarea:hover { box-shadow: none; }
.vali-rida input:focus-visible, .vali-rida textarea:focus-visible { box-shadow: none; outline: none; }
.on-viga input:not([type="checkbox"]), .on-viga textarea { box-shadow: none; background: #F6E3E0; }

.valikkast > span { background: var(--paper); }
.valikkast > span::before { box-shadow: none; background: var(--tone); }
.valikkast input:checked + span { background: var(--ink); }
.valikkast input:checked + span::before { box-shadow: inset 0 0 0 .3125rem var(--paper); background: var(--ink); }
.valikud-suur, .valikrida { gap: .375rem; }
.valikkast { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

.kokkuvote-summa { box-shadow: none; padding-top: .5rem; }
.alariba { box-shadow: none; }
.otsing--suur input { box-shadow: none; }

.vahemikud a { min-height: 2.75rem; }

/* band pattern as its own layer: visible at the edges, fading out toward the centre like the owner's banner,
   so the hairlines never run through navigation or headings */
.ylaosa { background: var(--ink); isolation: isolate; }
.ylaosa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/templates/servest/assets/img/pais-muster.png") center top 110px / 1760px auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 8%, transparent 26%, transparent 74%, #000 92%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 8%, transparent 26%, transparent 74%, #000 92%, #000 100%);
}
@media (max-width: 1023px) {
  .ylaosa::before { background-position: right -560px top 150px; background-size: 1400px auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000 100%); mask-image: linear-gradient(90deg, transparent 55%, #000 100%); }
}
.vahemikud-rida { margin-left: auto; padding-left: calc(var(--gut) - .75rem); }

@media (min-width: 1024px) { .lehe-pea--pood .alamad { margin-inline: 0; padding-inline: 0; } }

/* ==========================================================================
   Blue / white industrial (owner 2026-09-16: "change the lightblue to white. Go for the blue/white industrial look,
   change button design here to perhaps all corners cut slightly")
   - page tone is white; navy band + navy footer stay
   - form fields need a shape without borders on white: a near-white neutral fill (--valja)
   - every clipped shape now has all four corners cut: small cut on buttons/chips/fields, larger on photos/panels
   ========================================================================== */

:root {
  --tone: #FFFFFF;
  --valja: #EEF0F3;      /* field fill on white — ink 14.2:1, muted 6.9:1 on it */
  --valja-hi: #E3E7EC;   /* field hover */
  --cut: .375rem;        /* buttons, chips, fields */
  --cut-l: .625rem;      /* photos, panels */
}
body, .filtrid, .filtrid-jalus { background: var(--paper); }

/* four-corner chamfer */
.nupp, .lisa-nupp, .kaart-silt, .km a[aria-current], .valik[aria-current], .alamad a[aria-current],
.vaade a[aria-current], .lehed a[aria-current], .mootabel tbody tr[aria-current] th a,
.valikkast, .valikkast input:checked + span, .samm, .samm button:hover, .korvirida-eemalda button:hover,
.teade, .vead, .hyppa, .filtrid-sulge:hover, .vahemikud a[aria-current], .otsing input, .otsing button,
.kogus, .kaart-valik select, .vali-rida input:not([type="checkbox"]), .vali-rida textarea,
.korv-tyhi-ryhmad a:hover, .ryhm:hover, .otse:hover {
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.kaart-foto, .korvirida-foto, .kokkuvote, .saadetud, .silt, .toode-foto .kaart-foto {
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)),
    calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l));
}
.kaart-silt { --cut: .25rem; }
.korvirida-foto { --cut-l: .375rem; }

/* search in the band: white field and white button, split by a gap */
.otsing { gap: .25rem; }
.otsing input { border-radius: 0; }
.otsing button { background: var(--paper); color: var(--ink); }
.otsing button:hover { background: var(--valja-hi); }
.otsing input:focus-visible { outline: none; box-shadow: none; }

/* fields on white */
.kogus, .samm, .kaart-valik select, .vali-rida input:not([type="checkbox"]), .vali-rida textarea,
input[type="checkbox"] { background-color: var(--valja); }
.kogus:hover, .samm:hover, .kaart-valik select:hover, .vali-rida input:not([type="checkbox"]):hover, .vali-rida textarea:hover { background-color: var(--valja-hi); }
input[type="checkbox"]:checked { background-color: var(--ink); }
.kogus:focus-visible, .kaart-valik select:focus-visible, .vali-rida input:focus-visible, .vali-rida textarea:focus-visible {
  outline: none; box-shadow: none;
}
.on-viga input:not([type="checkbox"]), .on-viga textarea { background: #F6E3E0; }
.lehe-pea .otsing--suur input { background: var(--paper); }

/* option blocks (delivery, payment, buyer type) */
.valikkast > span { background: var(--valja); }
.valikkast:hover > span { background: var(--valja-hi); text-decoration: none; }
.valikkast > span::before { background: var(--paper); }
.valikkast input:checked + span { background: var(--ink); }
.valikkast input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 .3125rem var(--paper); }

/* hover fills for row links now that the ground is white */
.korv-tyhi-ryhmad a:hover, .ryhm:hover { background: var(--ink); color: var(--paper); }

/* primary buttons: navy block, all corners cut; on navy surfaces they invert to white */
.nupp--must, .lisa-nupp { background: var(--ink); color: var(--paper); }
.nupp--must:hover, .lisa-nupp:hover { background: var(--ink-hi); }
.nupp, .lisa-nupp { min-height: 3rem; }
.kaart-lisa .lisa-nupp, .kogus { min-height: 2.75rem; }

/* ==========================================================================
   White header, navy page head (owner 2026-09-16: "Change header to white bg, page header keep blue").
   The page-head overlay is the owner's own banner art (assets/img/pais-muster.png, extracted by
   .build/banner-overlay.py: logo removed, white made transparent) — replaces the redrawn SVG.
   ========================================================================== */

/* the navy band now shows only below the header; the overlay sits on its own layer */
.ylaosa { background: var(--ink); isolation: isolate; }
.ylaosa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/templates/servest/assets/img/pais-muster.png") center bottom / cover no-repeat;
  opacity: .38;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 1023px) {
  .ylaosa::before { background-position: left bottom; background-size: auto 100%; opacity: .32; }
}

/* ---- the header: white ------------------------------------------------------------- */
.pais { position: relative; background: var(--paper); color: var(--ink); }
.pais :focus-visible { outline-color: var(--ink); }
.otsing input { background: var(--valja); }
.otsing input:hover { background: var(--valja-hi); }
.otsing input:focus-visible { box-shadow: none; }
.otsing button { background: var(--ink); color: var(--paper); }
.otsing button:hover { background: var(--ink-hi); }
.km a { color: var(--muted); }
.km a:not([aria-current]):hover { color: var(--ink); }
.km a[aria-current] { background: var(--ink); color: var(--paper); }
.korv { color: var(--ink); }
.korv-arv { background: var(--ink); color: var(--paper); }

.vahemikud a, .vahemikud-rida > a:first-child { color: var(--muted); }
.vahemikud a span { color: #7C8898; }
.vahemikud a:hover { color: var(--ink); }
.vahemikud a[aria-current] { background: var(--ink); color: var(--paper); }
.vahemikud a[aria-current] span { color: var(--steel); }
.vahemikud a[aria-current] .ikoon { background: var(--paper); }
.vahemikud-rida { padding-bottom: .625rem; }

/* page head: a little more height now that it carries the banner art */
.lehe-pea { padding-block: 2.25rem 2.75rem; }
@media (min-width: 1024px) { .lehe-pea { padding-block: 2.75rem 3.25rem; } }

/* overlay placement: natural size, anchored to the band's bottom-right, faded out behind the text column */
.ylaosa::before {
  background: url("/templates/servest/assets/img/pais-muster.png") right -160px bottom -30px / 1760px auto no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0, transparent 7%, transparent 50%, #000 78%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0, transparent 7%, transparent 50%, #000 78%);
}
@media (max-width: 1023px) {
  .ylaosa::before {
    background-position: right -420px bottom -40px; background-size: 1400px auto; opacity: .4;
    -webkit-mask-image: linear-gradient(90deg, transparent 62%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 62%, #000 100%);
  }
}

/* ==========================================================================
   Header categories as solid tabs (owner 2026-09-16: "change the header categories backgrounds to solid buttons,
   let the color merge with the page header"). Every tab is a filled block standing on the bottom edge of the
   white header; the active one is navy and runs straight into the navy page head below — one shape.
   Top corners cut, bottom corners square so the join is seamless.
   ========================================================================== */

.vahemikud-rida { gap: .25rem; padding-bottom: 0; padding-left: var(--gut); align-items: flex-end; margin-top: .25rem; }
.vahemikud a, .vahemikud-rida > a:first-child {
  min-height: 2.875rem; padding: .625rem 1rem .625rem .875rem;
  background: var(--valja); color: var(--ink);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
  transition: background-color .15s, color .15s;
}
.vahemikud a span { color: var(--muted); }
.vahemikud a .ikoon { background: var(--ink); }
.vahemikud a:hover { background: var(--valja-hi); color: var(--ink); }
.vahemikud a[aria-current] {
  background: var(--ink); color: var(--paper);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.vahemikud a[aria-current] span { color: var(--steel); }
.vahemikud a[aria-current] .ikoon { background: var(--paper); }
.vahemikud a:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.vahemikud-info { gap: .25rem; align-items: flex-end; }
.vahemikud-info a:last-child { padding-right: 1rem; }
/* the active tab and the band are one surface: no gap above the page head */
.lehe-pea { margin-top: 0; }

/* ==========================================================================
   Third colour: signal yellow (owner 2026-09-16: "Bring in a third color to bring the website design to life,
   otherwise it looks too similar to tööriistad24"). #EFCA0B, measured off the bit bands in the catalogue photo
   (otsik-tx). Navy on it 10:1. Only ever a fill carrying navy type, or type/marks on navy — never text on white.
   Used for: buy actions, the cart counter, size tags, active chips in the page head, totals on navy.
   ========================================================================== */

:root { --signaal: #EFCA0B; --signaal-hi: #F7D93A; }

/* header without the VAT toggle */
.pais-rida { grid-template-areas: "mark . korv" "otsing otsing otsing"; }
@media (min-width: 1024px) { .pais-rida { grid-template-columns: auto minmax(0, 46rem) 1fr auto; grid-template-areas: "mark otsing . korv"; } }

/* buy actions */
.lisa-nupp, .nupp--kroom, .kokkuvote .nupp--kroom { background: var(--signaal); color: var(--ink); }
.lisa-nupp svg { color: var(--ink); }
.lisa-nupp:hover, .nupp--kroom:hover { background: var(--signaal-hi); color: var(--ink); }
.lisa-nupp.tehtud { background: var(--ink); color: var(--paper); }
.lisa-nupp.tehtud svg { color: var(--signaal); }
.lisa-nupp:focus-visible, .nupp--kroom:focus-visible { outline-color: var(--ink); }

/* counters and tags */
.korv-arv { background: var(--signaal); color: var(--ink); }
.kaart-silt { background: var(--signaal); color: var(--ink); }
.lehe-pea .mitu { background: var(--signaal); color: var(--ink); }

/* page head (navy): active chips and the grid/list toggle take the signal */
.lehe-pea .alamad a[aria-current], .lehe-pea .vaade a[aria-current] { background: var(--signaal); color: var(--ink); }
.lehe-pea .alamad a[aria-current] span { color: var(--ink); }
.ylaosa .lehe-pea :focus-visible { outline-color: var(--signaal); }

/* marks on navy */
.valik[aria-current], .mootabel tbody tr[aria-current] th a { color: var(--signaal); }
.kokkuvote-summa dd, .kokkuvote-kogus { color: var(--signaal); }
.teade svg, .teade a { color: var(--signaal); }
.alariba [aria-current] { color: var(--signaal); }
.valikkast input:checked + span::before { box-shadow: inset 0 0 0 .3125rem var(--signaal); }
.vahemikud a[aria-current] .ikoon { background: var(--signaal); }
.saadetud svg { color: var(--signaal); }
.footer-credit-name { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%), linear-gradient(90deg, var(--signaal), #FFFFFF); }

/* ==========================================================================
   Shop: toolbar on the bottom edge of the page head + sidebar category accordion (owner, 2026-09-16)
   ========================================================================== */

/* ---- toolbar: a white strip standing on the band's bottom edge, merging into the page ---------- */
.lehe-pea--pood { display: block; padding-bottom: 0; }
.lehe-pea--pood .markus { margin-top: 1rem; }
.lehe-pea--pood .alamad { margin-top: 1rem; }
.tooriba {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1.75rem; padding: .625rem 1rem .5rem;
  background: var(--paper); color: var(--ink);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.lehe-pea .tooriba .tulem-arv { color: var(--muted); margin: 0; flex: 1 1 100%; }
.lehe-pea .tooriba .vali-silt { color: var(--muted); }
.lehe-pea .tooriba .vali select { color: var(--ink); }
.lehe-pea .tooriba .vali select:hover { text-decoration-color: var(--ink); }
.lehe-pea .tooriba .vaade a { color: var(--muted); }
.lehe-pea .tooriba .vaade a:hover { color: var(--ink); }
.lehe-pea .tooriba .vaade a[aria-current] { background: var(--signaal); color: var(--ink); }
.lehe-pea .tooriba .nupp--must { background: var(--ink); color: var(--paper); }
.lehe-pea .tooriba :focus-visible { outline-color: var(--ink); }
.tooriba .juhtimine { display: flex; gap: 1.25rem; }
.tooriba .vaade { margin-left: auto; }
@media (min-width: 641px) {
  .lehe-pea .tooriba .tulem-arv { flex: 1 1 auto; }
  .tooriba { padding-inline: 1.25rem; }
}
@media (min-width: 1024px) {
  /* stands over the product column, so it reads as the grid's own header */
  .tooriba { margin-left: calc(15.5rem + 3.5rem); padding: .5rem 1rem .375rem 1.5rem; }
  .tooriba .vaade { margin-left: 0; }
  .lehe-pea--pood .tulem-riba { display: none; }
  .tulem { padding-top: 1rem; }
  .filtrid { padding-top: 1.5rem; }
}

/* ---- sidebar category accordion ------------------------------------------------------------ */
.ryhmad { display: grid; gap: .125rem; }
.ryhmad legend { margin-bottom: .5rem; }
.ryhmad-koik, .ryhm-lahti > summary {
  display: grid; grid-template-columns: auto 1fr auto 1.125rem; align-items: center; gap: .75rem;
  min-height: 2.875rem; padding: .375rem .625rem;
  font: 600 1.0625rem/1.2 var(--display); color: var(--ink); text-decoration: none;
  cursor: pointer; list-style: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: background-color .15s, color .15s;
}
.ryhmad-koik { grid-template-columns: auto 1fr auto; padding-right: 2.5rem; }
.ryhm-lahti > summary::-webkit-details-marker { display: none; }
.ryhmad-koik:hover, .ryhm-lahti > summary:hover { background: var(--valja); }
.ryhmad-koik[aria-current] { background: var(--ink); color: var(--paper); }
.ryhmad-koik[aria-current] .arv { color: var(--steel); }
.ryhmad-koik[aria-current] .ikoon { background: var(--signaal); }
.ryhmad .arv { font: 500 .875rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.ryhm-nool { transition: transform .2s var(--ease); color: var(--muted); }
.ryhm-lahti[open] > summary { background: var(--ink); color: var(--paper); }
.ryhm-lahti[open] > summary .arv, .ryhm-lahti[open] > summary .ryhm-nool { color: var(--steel); }
.ryhm-lahti[open] > summary .ikoon { background: var(--signaal); }
.ryhm-lahti[open] > summary .ryhm-nool { transform: rotate(180deg); }
.ryhm-lahti > summary:focus-visible, .ryhmad-koik:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

.ryhm-lahti ul { display: grid; gap: .0625rem; padding: .375rem 0 .75rem 2.625rem; }
.ryhm-lahti ul a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
  min-height: 2.75rem; padding: 0 .625rem;
  color: var(--ink); text-decoration: none; font-weight: 500;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.ryhm-lahti ul a:hover { background: var(--valja); }
.ryhm-lahti ul a[aria-current] { background: var(--signaal); color: var(--ink); font-weight: 700; }
.ryhm-lahti ul a[aria-current] .arv { color: var(--ink); }
.ryhm-lahti[open] ul { animation: ryhm-ava .22s var(--ease) backwards; }
@keyframes ryhm-ava { from { opacity: 0; transform: translateY(-4px); } }

/* accordion fixes: the About page's .ryhm-nool grid-area leaked into the summary; the list overflowed the
   sidebar's scroll box and clipped the counts */
.ryhm-lahti .ryhm-nool { grid-area: auto; align-self: center; }
.ryhmad, .ryhmad > *, .ryhm-lahti ul, .ryhm-lahti ul li { min-width: 0; }
.ryhm-lahti ul { padding: .375rem .125rem .75rem 2.125rem; }
.ryhmad-koik, .ryhm-lahti > summary { padding-right: .625rem; }
.ryhmad-koik { padding-right: 2.375rem; }

/* phone toolbar: count / Filtrid + view toggle / sort + per page */
@media (max-width: 1023px) {
  .tooriba { padding: .75rem 1rem; gap: .625rem 1rem; }
  .tooriba .tooriba-arv { order: 0; flex: 1 1 100%; }
  .tooriba .filtrid-ava { order: 1; min-height: 2.75rem; }
  .tooriba .vaade { order: 2; margin-left: auto; }
  .tooriba .juhtimine { order: 3; flex: 1 1 100%; }
  .tooriba .vali { flex: 1; }
  .tooriba .vali select { width: 100%; }
}

/* Saira caps: give Ü/Õ/Ä room — the dots were being clipped at line-height 1.2 (known-issues §14) */
.filtrid legend, .valik-telg, .vali-silt, .sisukord-pea, .jalus h2, .otse-silt { line-height: 1.6; }
.ryhmad { display: block; }
.ryhmad > * + * { margin-top: .125rem; }

/* ==========================================================================
   Owner 2026-09-16: "the yellow you brought in is good but you used it wrong. the website itself is a bit too
   plain, specially the background, a nice slight background ground bring a lot of benefit with minimal intrusion"

   Yellow, re-placed. Rule: navy is the working colour on white; yellow is the signal that lives ON navy.
   - on white: buttons, selected sidebar items, the grid toggle and page numbers are navy; yellow appears only
     as the mark inside them (icon, count, digits)
   - on navy: yellow may fill (active chips in the page head, the CTA inside the navy order panel) or mark
     (active tab's top edge, open-category icon, totals, checked dots)

   Ground: the owner's banner is itself the reference — near-white centre falling to light grey at the edges, with
   faint technical lines. The page body gets exactly that: a fixed radial ground + the banner's lines in navy at
   ~14% strength (assets/img/maa-muster.png, derived from pais-muster.png).
   ========================================================================== */

:root { --valja: #E9ECF0; --valja-hi: #DEE3E9; }

/* ---- ground ---------------------------------------------------------------------------- */
body {
  background-color: #F6F8FA;
  background-image:
    url("/templates/servest/assets/img/maa-muster.png"),
    radial-gradient(120% 85% at 50% 0%, #FFFFFF 0%, #FFFFFF 38%, #EEF1F5 100%);
  background-position: center 7rem, center;
  background-size: 1760px auto, 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
}
@media (max-width: 1023px) {
  body { background-position: right -520px top 9rem, center; background-size: 1400px auto, 100% 100%; }
}
.filtrid { background: var(--paper); }
@media (min-width: 1024px) { .filtrid { background: none; } }

/* ---- yellow off the big white-ground fills --------------------------------------------------- */
.lisa-nupp { background: var(--ink); color: var(--paper); }
.lisa-nupp svg { color: var(--signaal); }
.lisa-nupp:hover { background: var(--ink-hi); color: var(--signaal); }
.lisa-nupp.tehtud { background: var(--signaal); color: var(--ink); }
.lisa-nupp.tehtud svg { color: var(--ink); }
.lisa-nupp:focus-visible { outline-color: var(--signaal); }
.nupp--must svg { color: var(--signaal); }
.nupp--must:hover { color: var(--signaal); }

/* counters and tags: navy blocks with yellow figures */
.korv-arv { background: var(--ink); color: var(--signaal); }
.kaart-silt { background: var(--ink); color: var(--signaal); }

/* toolbar (white): grid/list toggle */
.lehe-pea .tooriba .vaade a[aria-current] { background: var(--ink); color: var(--signaal); }
.lehe-pea .tooriba .nupp--must { background: var(--ink); color: var(--paper); }

/* sidebar: navy selection, yellow marks */
.ryhm-lahti ul a[aria-current] { background: var(--ink); color: var(--paper); }
.ryhm-lahti ul a[aria-current] .arv { color: var(--signaal); }
.ryhmad-koik[aria-current] .arv, .ryhm-lahti[open] > summary .arv { color: var(--signaal); }
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFCA0B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* page numbers and size chips on white: navy with yellow type */
.lehed a[aria-current], .valik[aria-current], .mootabel tbody tr[aria-current] th a { background: var(--ink); color: var(--signaal); }

/* ---- yellow where it belongs: on navy ------------------------------------------------------ */
/* active header tab: a yellow top edge, the one accent bar on the page */
.vahemikud a[aria-current] { box-shadow: none; }
.vahemikud a[aria-current] span { color: var(--signaal); }
/* page head: active chip fills yellow, links hover to yellow */
.lehe-pea .alamad a[aria-current] { background: var(--signaal); color: var(--ink); }
.lehe-pea .murupuru a:hover, .lehe-pea .alamad a:hover { color: var(--signaal); }
/* footer links hover */
.jalus ul a:hover, .jalus-andmed dd a:hover { color: var(--signaal); }

/* ==========================================================================
   Page head takes the light ground (owner 2026-09-16: "Set the page content background you used as the page
   header background"). The band now looks like the owner's banner: pale steel falling to grey at the edges, a lit
   centre, the banner's own lines in navy (assets/img/lehe-muster.png, 32%). Content below is clean white.
   The active header tab takes the band's top tone so it still runs into the band.
   ========================================================================== */

:root { --lehe-maa: #F1F4F7; }

body { background: var(--paper); }

.ylaosa {
  color: var(--ink);
  background:
    radial-gradient(60% 120% at 50% 45%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--lehe-maa) 0%, #E6EAF0 100%);
}
.ylaosa::before {
  background: url("/templates/servest/assets/img/lehe-muster.png") center bottom -20px / 1760px auto no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 12%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.25) 70%, #000 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 12%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.25) 70%, #000 88%, #000 100%);
}
@media (max-width: 1023px) {
  .ylaosa::before { background-position: right -420px bottom -40px; background-size: 1400px auto;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 40%, #000 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 40%, #000 100%); }
}
.ylaosa :focus-visible, .ylaosa .lehe-pea :focus-visible { outline-color: var(--ink); }

/* header tabs: the active one is the band's colour, so it opens into it */
.vahemikud a, .vahemikud-rida > a:first-child { background: #E2E7ED; }
.vahemikud a:hover { background: #D7DDE5; }
.vahemikud a[aria-current] { background: var(--lehe-maa); color: var(--ink); box-shadow: none; }
.vahemikud a[aria-current] span { color: var(--muted); }
.vahemikud a[aria-current] .ikoon { background: var(--ink); }

/* page head type and controls on the light ground */
.lehe-pea h1, .lehe-pea .markus--tugev, .lehe-pea .faktid dd, .lehe-pea .lehe-juht, .lehe-pea .tagasi-link,
.lehe-pea .materjal, .lehe-pea .otse-vaartus, .lehe-pea p { color: var(--ink); }
.lehe-pea .tulem-arv, .lehe-pea .markus, .lehe-pea .otsiti, .lehe-pea .vali-silt, .lehe-pea .murupuru,
.lehe-pea .rida-meta, .lehe-pea .vali-abi, .lehe-pea .faktid dt, .lehe-pea .otse-silt { color: var(--muted); }
.lehe-pea .murupuru a:hover, .lehe-pea .alamad a:hover { color: var(--ink); }
.lehe-pea .vali select { color: var(--ink); }
.lehe-pea .vali select:hover { text-decoration-color: var(--ink); }
.lehe-pea .alamad a { color: var(--muted); }
.lehe-pea .alamad a span { color: #7C8898; }
.lehe-pea .alamad a[aria-current] { background: var(--ink); color: var(--paper); }
.lehe-pea .alamad a[aria-current] span { color: var(--signaal); }
.lehe-pea .nupp--must { background: var(--ink); color: var(--paper); }
.lehe-pea .silt { background: var(--ink); color: var(--signaal); }
.lehe-pea .silt-ryhm { color: var(--steel); }
.lehe-pea .otse:hover { background: var(--ink); color: var(--paper); }
.lehe-pea .otse:hover svg { color: var(--signaal); }
.lehe-pea .otse:hover .otse-silt { color: var(--steel); }
.lehe-pea .otse:hover .otse-vaartus { color: var(--paper); }
.lehe-pea .otsing--suur input { background: var(--paper); }
.lehe-pea .sw--must { box-shadow: none; }

/* left edge runs under titles and contact icons: keep it faint there, full strength on the open right side */
@media (min-width: 1024px) {
  .ylaosa::before {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.2) 6%, rgba(0,0,0,.2) 62%, #000 86%, #000 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.2) 6%, rgba(0,0,0,.2) 62%, #000 86%, #000 100%);
  }
}

/* ==========================================================================
   No borders anywhere (owner 2026-09-16: "Remove the fat borders from everywhere") + content background
   (owner: "try background.png in source as page content background").
   Every ring, rule and 3 px outline was stripped above. Focus stays visible without a border:
   fields brighten to white and lift with a soft shadow; buttons/links show a thin 2 px inner outline only for
   keyboard focus. The radio dot is a filled dot, not a ring.
   ========================================================================== */

body {
  background: #F4F5F7 url("/templates/servest/assets/img/sisu-taust.jpg") center top / cover no-repeat fixed;
}
@media (max-width: 1023px) { body { background-attachment: scroll; background-size: auto 100vh; background-position: right top; } }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kogus:focus, .kaart-valik select:focus, .vali-rida input:not([type="checkbox"]):focus, .vali-rida textarea:focus,
.otsing input:focus, .otsing--suur input:focus {
  outline: none; background: var(--paper);
  box-shadow: 0 6px 18px -8px rgba(43, 55, 70, .45);
}
.samm:focus-within { background: var(--paper); box-shadow: 0 6px 18px -8px rgba(43, 55, 70, .45); }
.valikkast input:focus-visible + span { outline: 2px solid currentColor; outline-offset: -5px; }
.valikkast input:checked + span::before { box-shadow: none; background: radial-gradient(circle, var(--signaal) 0 36%, var(--paper) 40%); }
.valikkast > span::before { background: var(--paper); }
.on-viga input:not([type="checkbox"]), .on-viga textarea { box-shadow: none; background: #F6E3E0; }
.vahemikud a[aria-current] { box-shadow: none; }
.kokkuvote-summa { box-shadow: none; }

/* ==========================================================================
   Owner 2026-09-16: "change page header / nav active back to blue" + "flip search bar static/active bg color"
   ========================================================================== */

/* ---- page head band: navy again, the owner's banner lines in light strokes ------------------ */
.ylaosa { color: var(--paper); background: var(--ink); }
.ylaosa::before {
  background: url("/templates/servest/assets/img/pais-muster.png") right -160px bottom -30px / 1760px auto no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0, transparent 7%, transparent 50%, #000 78%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5) 0, transparent 7%, transparent 50%, #000 78%);
}
@media (max-width: 1023px) {
  .ylaosa::before {
    background-position: right -420px bottom -40px; background-size: 1400px auto; opacity: .4;
    -webkit-mask-image: linear-gradient(90deg, transparent 62%, #000 100%); mask-image: linear-gradient(90deg, transparent 62%, #000 100%);
  }
}
.ylaosa .lehe-pea :focus-visible { outline-color: var(--signaal); }

.lehe-pea h1, .lehe-pea .markus--tugev, .lehe-pea .faktid dd, .lehe-pea .lehe-juht, .lehe-pea .tagasi-link,
.lehe-pea .otse-vaartus, .lehe-pea p { color: var(--paper); }
.lehe-pea .tulem-arv, .lehe-pea .markus, .lehe-pea .otsiti, .lehe-pea .vali-silt, .lehe-pea .murupuru,
.lehe-pea .rida-meta, .lehe-pea .vali-abi, .lehe-pea .faktid dt, .lehe-pea .otse-silt, .lehe-pea .materjal { color: var(--steel); }
.lehe-pea .murupuru a:hover, .lehe-pea .alamad a:hover { color: var(--signaal); }
.lehe-pea .alamad a { color: var(--steel); }
.lehe-pea .alamad a span { color: var(--sw-hdg); }
.lehe-pea .alamad a[aria-current] { background: var(--signaal); color: var(--ink); }
.lehe-pea .alamad a[aria-current] span { color: var(--ink); }
.lehe-pea .silt { background: var(--paper); color: var(--ink); }
.lehe-pea .silt-ryhm { color: var(--muted); }
.lehe-pea .otse:hover { background: var(--paper); color: var(--ink); }
.lehe-pea .otse:hover .otse-vaartus { color: var(--ink); }
.lehe-pea .otse:hover svg { color: var(--ink); }
.lehe-pea .otse:hover .otse-silt { color: var(--muted); }
/* the toolbar strip stays white with navy type */
.lehe-pea .tooriba .tulem-arv, .lehe-pea .tooriba .vali-silt { color: var(--muted); }
.lehe-pea .tooriba .vali select { color: var(--ink); }

/* ---- active header tab: navy, running into the navy band ------------------------------------ */
.vahemikud a[aria-current] { background: var(--ink); color: var(--paper); box-shadow: none; }
.vahemikud a[aria-current] span { color: var(--signaal); }
.vahemikud a[aria-current] .ikoon { background: var(--signaal); }

/* ---- search: white at rest, light grey when active ------------------------------------------- */
.pais .otsing input { background: var(--paper); box-shadow: 0 4px 16px -6px rgba(43, 55, 70, .28); }
.pais .otsing input:hover { background: var(--paper); box-shadow: 0 6px 18px -6px rgba(43, 55, 70, .34); }
.pais .otsing input:focus { background: var(--valja); box-shadow: none; outline: none; }

/* header cart, WooCommerce style (owner 2026-09-16): the count is a numbered circle sitting on the cart icon */
.korv { gap: .625rem; padding: 0 .375rem; }
.korv-ikoon { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.korv .korv-arv {
  position: absolute; top: .125rem; right: -.125rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem;
  border-radius: 999px; clip-path: none;
  background: var(--ink); color: var(--signaal);
  font: 700 .75rem/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--paper);   /* a hairline of the header colour so the circle reads cut out of the icon */
  pointer-events: none;
}
.korv:hover .korv-ikoon svg { color: var(--ink-hi); }

/* search at rest: the field is clipped, so its lift shadow goes on the wrapper as a drop-shadow */
.pais .otsing input, .pais .otsing input:hover { box-shadow: none; }
.pais .otsing { filter: drop-shadow(0 3px 10px rgba(43, 55, 70, .16)); }
.pais .otsing:focus-within { filter: none; }

/* compact toolbar (owner: "compress the 1–16 / 18 toodet · 67 mõõtu ja varianti section"):
   labels inline with their selects, one control high */
.tooriba { gap: .25rem 1.25rem; margin-top: 1.5rem; padding: .25rem .5rem .25rem 1rem; }
.tooriba .tulem-arv { font-size: .875rem; }
.tooriba .tulem-arv strong { color: var(--ink); font-weight: 600; }
.tooriba .juhtimine { gap: 1rem; align-items: center; }
.tooriba .vali { flex-direction: row; align-items: center; gap: .375rem; }
.tooriba .vali-silt { font-size: .6875rem; line-height: 1.6; }
.tooriba .vali select { height: 2.5rem; margin: 0; padding-right: 1.5rem; font-size: .9375rem; }
.tooriba .vali svg { top: 50%; bottom: auto; transform: translateY(-50%); }
.tooriba .vaade { gap: .125rem; }
.tooriba .vaade a { width: 2.5rem; height: 2.5rem; }
@media (min-width: 1024px) {
  .tooriba { padding: .25rem .375rem .25rem 1.25rem; }
}
@media (max-width: 1023px) {
  .tooriba { padding: .5rem .625rem .5rem .875rem; gap: .375rem .75rem; }
  .tooriba .tooriba-arv { flex: 1 1 auto; order: 0; }
  .tooriba .vaade { order: 1; margin-left: 0; }
  .tooriba .filtrid-ava { order: 2; min-height: 2.5rem; padding: 0 .875rem; }
  .tooriba .juhtimine { order: 3; flex: 1 1 auto; justify-content: flex-end; }
  .tooriba .vali { flex: none; }
  .tooriba .vali select { width: auto; }
  .tooriba-lisa { display: none; }
}

/* sidebar scrolls with the page (owner: "Sidebar remove scroll overlaps products") — no sticky box, no inner scroll */
@media (min-width: 1024px) {
  .filtrid { position: static; max-height: none; overflow: visible; align-self: start; }
  .filtrid-vorm { overflow: visible; }
}

/* collapsible filter sections (owner: "collapse all sidebar filters, only when activated by user do they open") */
.filtri-osa { margin-top: 1rem; }
.filtri-osa > summary {
  display: grid; grid-template-columns: 1fr auto 1.125rem; align-items: center; gap: .625rem;
  min-height: 2.75rem; padding: .25rem .625rem;
  font: 600 .8125rem/1.6 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  cursor: pointer; list-style: none;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.filtri-osa > summary::-webkit-details-marker { display: none; }
.filtri-osa > summary:hover { background: var(--valja); color: var(--ink); }
.filtri-osa[open] > summary { color: var(--ink); }
.filtri-osa[open] > summary .ryhm-nool { transform: rotate(180deg); }
.filtri-osa .ryhm-nool { grid-area: auto; }
.filtri-osa > fieldset { padding: .25rem .625rem 1rem; }
.filtri-arv {
  display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem;
  border-radius: 999px; background: var(--ink); color: var(--signaal);
  font: 700 .75rem/1 var(--display); letter-spacing: 0;
}
.filtri-osa > summary:not(:has(.filtri-arv)) { grid-template-columns: 1fr 1.125rem; }
.filtri-osa > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.filtri-osa[open] > fieldset { animation: ryhm-ava .22s var(--ease) backwards; }

/* product cards: larger titles, no text tags on the photos */
.kaart-nimi { font-size: 1.1875rem; line-height: 1.2; margin-top: .375rem; }
@media (min-width: 1024px) { .kaart-nimi { font-size: 1.3125rem; } }
.read--list .kaart-nimi { font-size: 1.25rem; }

/* titles: beat the older font-pairing size rule; empty filter footer shows nothing on desktop */
html[data-fondid] .kaart-nimi { font-size: 1.1875rem; line-height: 1.2; }
@media (min-width: 1024px) { html[data-fondid] .kaart-nimi { font-size: 1.3125rem; } .filtrid-jalus { background: none; padding: 0; } .js .filtrid-jalus:not(:has(.tyhista)) { display: none; } }
html[data-fondid] .read--list .kaart-nimi { font-size: 1.25rem; }

/* page head: no background art, tighter (owner 2026-09-16) */
.ylaosa::before { content: none; background: none; }
.lehe-pea { padding-block: 1.5rem 1.75rem; }
@media (min-width: 1024px) { .lehe-pea { padding-block: 1.75rem 2rem; } }
.lehe-pea--pood { padding-bottom: 0; }
.lehe-pea--pood .tooriba { margin-top: 1.25rem; }

/* grid/list toggle: active icon white on navy (owner) */
.lehe-pea .tooriba .vaade a[aria-current] { color: var(--paper); }

/* ==========================================================================
   Accent colour replaces the yellow (owner 2026-09-16: "Change the yellow to something else").
   Same role as before — the signal on navy (marks, active chips, counts, the order-panel CTA) — so only the token
   changes. Three candidates, previewed with ?aktsent=a|b|c; default A. Chosen to stay clear of the Estonian
   hardware market's own colours (Bauhof orange, Würth red, Tööriist24 blue).
   ========================================================================== */
:root, html[data-aktsent="a"] { --signaal: #1FC8B8; --signaal-hi: #4FD8CB; }   /* signal teal — 7.7:1 on navy */
html[data-aktsent="b"] { --signaal: #E0894F; --signaal-hi: #EAA274; }            /* copper — 6.0:1 on navy */
html[data-aktsent="c"] { --signaal: #FF6B5B; --signaal-hi: #FF8C80; }            /* coral — 5.7:1 on navy */
/* checkmark was a hard-coded yellow data-URI: white now, works with every accent */
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* copper is the default accent now (owner: "Try a copper color") */
:root { --signaal: #E0894F; --signaal-hi: #EAA274; }
html[data-aktsent="a"] { --signaal: #1FC8B8; --signaal-hi: #4FD8CB; }
html[data-aktsent="b"] { --signaal: #E0894F; --signaal-hi: #EAA274; }
html[data-aktsent="c"] { --signaal: #FF6B5B; --signaal-hi: #FF8C80; }

/* sidebar: no reveal animation — it replayed on every reload after a selection and read as a jump */
.ryhm-lahti[open] ul, .filtri-osa[open] > fieldset { animation: none; }
.ryhm-nool { transition: none; }

/* ==========================================================================
   PROTOTYPE — category menu for 40 main categories (proto-kategooriad.php only; the live shop header is unchanged)
   ========================================================================== */

.pais { position: relative; }

/* "Kõik kategooriad": the first tab, always navy */
.vahemikud--menyy .kat-nupp {
  display: flex; align-items: center; gap: .625rem; flex: none;
  min-height: 2.875rem; padding: .625rem 1rem .625rem .875rem;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font: 600 1rem/1.1 var(--display); letter-spacing: .01em;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.kat-nupp-ikoon { display: grid; gap: 3px; width: 1rem; }
.kat-nupp-ikoon span { display: block; height: 2px; background: var(--signaal); }
.kat-nupp:hover { background: var(--ink-hi); }
.kat-nupp[aria-expanded="true"] .kat-nupp-ikoon span:nth-child(2) { opacity: 0; }
.kat-nupp:focus-visible { outline: 2px solid var(--paper); outline-offset: -5px; }
/* a category that isn't pinned but is open right now */
.vahemikud--menyy a.ajutine { font-style: normal; }
.vahemikud--menyy a.ajutine:not([aria-current]) { display: none; }

/* the panel */
.kat-paneel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 65;
  display: none;
  background: var(--paper);
  box-shadow: 0 24px 48px -24px rgba(43, 55, 70, .45);
  max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain;
}
.kat-paneel:target, .kat-paneel.lahti { display: block; }
.kat-paneel-sisu { padding-block: 1.25rem 2rem; }
.kat-paneel-pea { display: grid; grid-template-columns: minmax(0, 28rem) 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.kat-otsi {
  width: 100%; height: 2.75rem; padding: 0 .875rem; border: 0; background: var(--valja); color: var(--ink); font-size: 1rem;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.kat-otsi:focus { outline: none; background: var(--valja-hi); }
.kat-tulem { color: var(--muted); font-size: .875rem; }
.kat-sulge { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink); }
.kat-sulge:hover { background: var(--valja); }

.kat-grupid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.5rem 2rem; align-items: start; }
.kat-grupp h2 {
  font: 600 .75rem/1.6 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin-bottom: .375rem;
}
.kat-grupp ul { display: grid; gap: .25rem; }
.kat-pea {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .625rem;
  min-height: 2.5rem; padding: .25rem .5rem; margin-inline: -.5rem;
  color: var(--ink); text-decoration: none; font: 600 1.0625rem/1.2 var(--display);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.kat-pea:hover { background: var(--valja); }
.kat-pea[aria-current] { background: var(--ink); color: var(--paper); }
.kat-pea[aria-current] .ikoon { background: var(--signaal); }
.kat-pea .arv { font: 500 .8125rem/1 var(--sans); color: var(--muted); }
.kat-pea[aria-current] .arv { color: var(--signaal); }
.kat-alamad { display: flex; flex-wrap: wrap; gap: 0 .625rem; padding: 0 0 .5rem 1.875rem; font-size: .875rem; line-height: 1.7; }
.kat-alamad a { color: var(--muted); text-decoration: none; }
.kat-alamad a:hover { color: var(--ink); text-decoration: underline; }
.kat-alamad .kat-koik { color: var(--ink); font-weight: 600; }
.kat-tyhi { grid-column: 1 / -1; color: var(--muted); }
.kat-tyhi[hidden], [data-kat-grupp][hidden], [data-kat-nimi][hidden] { display: none; }

/* sidebar: current branch + other categories + show all */
.teised-pea { margin: 1rem 0 .25rem; padding: 0 .625rem; font: 600 .75rem/1.6 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.teised { display: grid; gap: .0625rem; }
.teised a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  min-height: 2.625rem; padding: .25rem .625rem; color: var(--ink); text-decoration: none; font-weight: 500;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.teised a:hover { background: var(--valja); }
.teised .arv { font-size: .8125rem; color: var(--muted); }
.teised-koik > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0 .625rem;
  cursor: pointer; list-style: none; font: 600 .9375rem/1 var(--display); color: var(--ink);
}
.teised-koik > summary::-webkit-details-marker { display: none; }
.teised-koik > summary:hover { background: var(--valja); }
.teised-koik[open] > summary .ryhm-nool { transform: rotate(180deg); }
.teised-koik .ryhm-nool { grid-area: auto; }
.teised-koik[open] > summary { color: var(--muted); }

/* phones: the tab strip goes; the bottom bar opens a full-screen browser */
@media (max-width: 1023px) {
  .vahemikud--menyy { display: none; }
  .kat-paneel { display: none !important; }
}
.kat-leht {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: var(--paper); visibility: hidden; transform: translateY(100%);
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.kat-leht:target, .kat-leht.lahti { visibility: visible; transform: none; transition: transform .28s var(--ease), visibility 0s; }
@media (min-width: 1024px) { .kat-leht { display: none; } }
.kat-leht-pea { display: flex; align-items: center; justify-content: space-between; padding: .5rem var(--gut); background: var(--ink); color: var(--paper); }
.kat-leht-pealkiri { font: 700 1.25rem/1 var(--display); }
.kat-leht-sulge { display: grid; place-items: center; width: 3rem; height: 3rem; margin-right: -.75rem; color: var(--paper); }
.kat-leht-otsi { padding: .75rem var(--gut); }
.kat-leht-keha { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) 2rem; }
.kat-leht-grupp h2 { margin: 1rem 0 .25rem; font: 600 .75rem/1.6 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.kat-leht-kat > summary {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .75rem;
  min-height: 3rem; padding: 0 .25rem; list-style: none; cursor: pointer;
  font: 600 1.0625rem/1.2 var(--display); color: var(--ink);
}
.kat-leht-kat > summary::-webkit-details-marker { display: none; }
.kat-leht-kat .arv { font: 500 .8125rem/1 var(--sans); color: var(--muted); }
.kat-nool { color: var(--muted); }
.kat-leht-alam ul { display: grid; gap: .125rem; padding: .25rem 0 .75rem 2rem; }
.kat-leht-alam a { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; color: var(--ink); text-decoration: none; font-weight: 500; }
.kat-leht-alam a svg { color: var(--muted); }
.kat-tagasi, .kat-leht-alam-pealkiri { display: none; }

/* with JS: drill-down — an opened category slides over the list */
.js .kat-leht-kat[open] > .kat-leht-alam {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto;
  background: var(--paper); padding: .25rem var(--gut) 2rem;
  animation: kat-sisse .24s var(--ease) backwards;
}
.js .kat-leht-kat[open] > .kat-leht-alam ul { padding-left: 0; }
.js .kat-tagasi {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-left: -.25rem;
  border: 0; background: none; color: var(--ink); font: 600 1rem/1 var(--display); cursor: pointer;
}
.js .kat-leht-alam-pealkiri { display: flex; align-items: center; gap: .625rem; margin: .5rem 0 .75rem; font: 700 1.5rem/1.1 var(--display); color: var(--ink); }
.js .kat-leht-kat .kat-nool { transform: none; }
@keyframes kat-sisse { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .kat-leht-kat[open] > .kat-leht-alam { animation: none; } }

/* prototype fixes: the header stack must sit above positioned product cards; the menu button beats the generic tab style */
.ylaosa { position: relative; z-index: 30; }
.vahemikud--menyy .vahemikud-rida > a.kat-nupp { background: var(--ink); color: var(--paper); }
.vahemikud--menyy .vahemikud-rida > a.kat-nupp:hover { background: var(--ink-hi); }

/* ==========================================================================
   Sidebar selection, minimal (owner 2026-09-16: "instead of solid background try something more minimalistic,
   perhaps a left side dash where there is currently empty tabbing and a hover/active animation of bold text with
   dashed line, copper color").
   No fills. A copper dash grows in the empty indent to the left of the item; the text turns bold.
   Hover: the dash draws in and the text bolds. Active/open: the dash stays drawn, the text stays bold.
   ========================================================================== */

.ryhmad-koik, .ryhm-lahti > summary, .ryhm-lahti ul a, .filtri-osa > summary, .teised a, .teised-koik > summary {
  position: relative;
  clip-path: none;
  background: none;
  transition: color .18s var(--ease);
}
/* the dash */
.ryhmad-koik::before, .ryhm-lahti > summary::before, .ryhm-lahti ul a::before, .filtri-osa > summary::before,
.teised a::before, .teised-koik > summary::before {
  content: ""; position: absolute; top: 50%; left: -1rem;
  width: .75rem; height: 2px; margin-top: -1px;
  background: var(--signaal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s var(--ease);
}
/* sub-links sit in an indent: the dash lives there, right before the text */
.ryhm-lahti ul a::before { left: -1.125rem; width: .875rem; }

/* hover: draw the dash, bold the text */
.ryhmad-koik:hover, .ryhm-lahti > summary:hover, .ryhm-lahti ul a:hover, .filtri-osa > summary:hover,
.teised a:hover, .teised-koik > summary:hover { background: none; color: var(--ink); }
.ryhmad-koik:hover::before, .ryhm-lahti > summary:hover::before, .ryhm-lahti ul a:hover::before, .filtri-osa > summary:hover::before,
.teised a:hover::before, .teised-koik > summary:hover::before { transform: scaleX(1); }
.ryhmad-koik:hover > span:not(.arv), .ryhm-lahti > summary:hover > span:not(.arv), .ryhm-lahti ul a:hover > span:not(.arv),
.filtri-osa > summary:hover > span:first-child, .teised a:hover > span:not(.arv), .teised-koik > summary:hover > span { font-weight: 700; }

/* active / open: dash stays, text stays bold, no fill */
.ryhmad-koik[aria-current], .ryhm-lahti[open] > summary, .ryhm-lahti ul a[aria-current], .filtri-osa[open] > summary {
  background: none; color: var(--ink);
}
.ryhmad-koik[aria-current]::before, .ryhm-lahti[open] > summary::before, .ryhm-lahti ul a[aria-current]::before,
.filtri-osa[open] > summary::before { transform: scaleX(1); }
.ryhmad-koik[aria-current] > span:not(.arv), .ryhm-lahti[open] > summary > span:not(.arv),
.ryhm-lahti ul a[aria-current] > span:not(.arv), .filtri-osa[open] > summary > span:first-child { font-weight: 700; }

/* marks follow the calm version: icons ink, the active one copper; counts muted, active count copper */
.ryhmad-koik .ikoon, .ryhm-lahti > summary .ikoon { background: var(--ink); transition: background-color .18s; }
.ryhmad-koik[aria-current] .ikoon, .ryhm-lahti[open] > summary .ikoon,
.ryhmad-koik:hover .ikoon, .ryhm-lahti > summary:hover .ikoon { background: var(--signaal); }
.ryhmad-koik[aria-current] .arv, .ryhm-lahti[open] > summary .arv, .ryhm-lahti ul a[aria-current] .arv { color: var(--signaal); }
.ryhm-lahti[open] > summary .ryhm-nool { color: var(--ink); }
.ryhm-lahti ul a { font-weight: 500; }
.ryhmad-koik, .ryhm-lahti > summary { font-weight: 600; }

/* focus: a quiet outline, no fill */
.ryhmad-koik:focus-visible, .ryhm-lahti > summary:focus-visible, .ryhm-lahti ul a:focus-visible,
.filtri-osa > summary:focus-visible, .teised a:focus-visible, .teised-koik > summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.ryhmad-koik:focus-visible::before, .ryhm-lahti > summary:focus-visible::before, .ryhm-lahti ul a:focus-visible::before { transform: scaleX(1); }

/* the phone sheet has a narrower gutter: keep the dash inside it */
@media (max-width: 1023px) {
  .ryhmad-koik::before, .ryhm-lahti > summary::before, .filtri-osa > summary::before, .teised a::before, .teised-koik > summary::before { left: -.75rem; width: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ryhmad-koik::before, .ryhm-lahti > summary::before, .ryhm-lahti ul a::before, .filtri-osa > summary::before,
  .teised a::before, .teised-koik > summary::before { transition: none; }
}

/* ==========================================================================
   "Meie valikus" partner strip (owner 2026-09-16): one row, content width, fixed label + logo marquee
   ========================================================================== */
.partnerid { margin-block: 0 3.5rem; }
.partnerid-sisu {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem;
  min-height: 5rem; padding: .75rem 0 .75rem 1.5rem;
  background: var(--valja);
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l));
}
.partnerid-silt {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .625rem;
  font: 700 1.125rem/1.1 var(--display); color: var(--ink); white-space: nowrap;
}
.partnerid-silt::before { content: ""; width: .75rem; height: 2px; background: var(--signaal); }

.partnerid-aken {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
.partnerid-rada { display: flex; width: max-content; animation: partnerid-liigu 38s linear infinite; }
.partnerid-list { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; }
.partnerid-aken:hover .partnerid-rada, .partnerid-aken:focus-within .partnerid-rada { animation-play-state: paused; }
@keyframes partnerid-liigu { to { transform: translateX(-50%); } }

.partner { display: flex; align-items: center; height: 3rem; color: var(--muted); text-decoration: none; }
.partner img { display: block; max-height: 2.5rem; width: auto; max-width: 9rem; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
a.partner:hover img, a.partner:focus-visible img { filter: none; opacity: 1; }
.partner-kohataide {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.5rem; padding: 0 1rem;
  background: var(--paper); color: #7C8898;
  font: 600 .9375rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

@media (max-width: 640px) {
  .partnerid-sisu { grid-template-columns: 1fr; gap: .5rem; padding: .875rem 0 .875rem 1rem; }
  .partnerid { margin-bottom: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .partnerid-rada { animation: none; }
  .partnerid-aken { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .partnerid-list[aria-hidden="true"] { display: none; }
}

/* sidebar refinement (owner: "Remove dash line from headcategories, only keep for subcategories. change subcategory
   text color to bold copper too"). Head rows (Kõik tooted, main categories, Materjal, Saadavus, prototype lists) lose
   the dash; they keep bold text + copper icon/count when open. Sub-links keep the dash and turn bold copper.
   Copper as text uses a deeper shade of the same hue so it stays readable: #A3582A is 5.3:1 on white
   (the bright accent #E0894F is only 2.7:1). */
:root { --signaal-tekst: #A3582A; }
html[data-aktsent="a"] { --signaal-tekst: #0F8076; }
html[data-aktsent="c"] { --signaal-tekst: #C23A2C; }

.ryhmad-koik::before, .ryhm-lahti > summary::before, .filtri-osa > summary::before,
.teised a::before, .teised-koik > summary::before { content: none; }

.ryhm-lahti ul a:hover, .ryhm-lahti ul a[aria-current], .ryhm-lahti ul a:focus-visible { color: var(--signaal-tekst); }
.ryhm-lahti ul a:hover > span:not(.arv), .ryhm-lahti ul a[aria-current] > span:not(.arv) { font-weight: 700; }
.ryhm-lahti ul a[aria-current] .arv { color: var(--signaal-tekst); }

/* body text: the visitor's own system font (owner: "use something neutral and default not this ai looking one").
   Segoe UI on Windows, San Francisco on Apple, Roboto on Android — nothing to download. Display face unchanged. */
:root, html[data-fondid="b"] {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: var(--sans);
}

/* "Meie valikus": no dash (owner) */
.partnerid-silt::before { content: none; }

/* ==========================================================================
   Ideearendus CMS template (2026-09-29). The approved demo styles above stay as they are; these rules cover
   what the CMS adds: block wrappers, the editor preview, API-driven cart/checkout states and the pages the
   demo did not have (payment return, order status).
   ========================================================================== */

[hidden] { display: none !important; }

/* The CMS may wrap each block in <div class="cms-block">: keep the wrappers layout-neutral on the public site so
   the sticky header and the full-width bands behave exactly as in the demo. */
body:not(.cms-edit-mode) .cms-block { display: contents; }

/* editor preview: the catalogue block is a picture, not a working shop; site chrome stays out of the way */
.cms-edit-mode .plokk-kataloog :is(a, button, form, select, input) { pointer-events: none; }
.cms-edit-mode .pais { position: relative; }

/* skip-link target sits right under the header */
#sisu { display: block; height: 0; outline: none; }

/* content blocks on the Meist page */
.plokk { padding-bottom: 3rem; }
.plokk > .meist-ryhmad { margin-top: 2.5rem; }
.plokk > .meist-kuidas { margin-top: .5rem; }
.plokk-pealkiri { font-size: 1.625rem; letter-spacing: -.02em; margin-top: 2.5rem; }
.plokk-pealkiri + .meist-ryhmad { margin-top: 1.25rem; }

/* compare-at price and "from" */
.hind .vord { margin-left: .5rem; font-size: .8125em; font-weight: 500; color: var(--muted); text-decoration: line-through; }
.hind .alates { font-size: .75em; font-weight: 500; color: var(--muted); }

/* not in stock: the CMS cart refuses stock 0, so the visitor asks for the lead time instead */
.lisa-nupp--kysi { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); text-decoration: none; }
.lisa-nupp--kysi:hover { background: var(--ink); color: var(--paper); }
.kaart-lisa .lisa-nupp--kysi, .kaart-lisa .lisa-nupp--lai { flex: 1 1 auto; justify-content: center; text-decoration: none; }

/* product gallery thumbnails */
.toode-pisid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.toode-pisid button { padding: 0; border: 0; background: var(--paper); width: 4.5rem; aspect-ratio: 1; cursor: pointer; opacity: .75; }
.toode-pisid button[aria-current], .toode-pisid button:hover { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
.toode-pisid img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* product description (admin HTML) */
.toode-sisu .kirjeldus .tekst-sisu > * + * { margin-top: .75rem; }
.toode-sisu .kirjeldus :is(ul, ol) { padding-left: 1.25rem; }

/* a category image (product_categories.image) instead of an icon mask */
.ikoon-pilt { flex: none; width: 1.25rem; height: 1.25rem; object-fit: contain; }

/* long pagination */
.lehed-vahe { display: inline-grid; place-items: center; min-width: 2.75rem; color: var(--muted); }

/* checkout: which delivery fields show depends on the chosen method's type (set by app.js from the API) */
.kassa-paigutus[data-tarne-tyyp="automaat"] [data-kui="tarne-automaat"],
.kassa-paigutus[data-tarne-tyyp="aadress"] [data-kui="tarne-aadress"] { display: block; }
@supports not selector(:has(a)) {
  .kassa-paigutus [data-kui^="tarne-"] { display: none; }
  .kassa-paigutus[data-tarne-tyyp="automaat"] [data-kui="tarne-automaat"],
  .kassa-paigutus[data-tarne-tyyp="aadress"] [data-kui="tarne-aadress"] { display: block; }
}
.laadimine { padding: .75rem 0; color: var(--muted); }
.valikkast-nimi img { width: 1.25rem; height: 1.25rem; object-fit: contain; }

/* Maksekeskus bank link / card buttons returned by the checkout API */
.mk-maksed { display: grid; gap: 1rem; margin-top: 1rem; }
.mk-pealkiri { font-weight: 700; }
.mk-grupp-nimi { margin-bottom: .375rem; font-size: .8125rem; opacity: .8; }
.mk-nupud { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.mk-nupp { display: grid; place-items: center; min-height: 3rem; padding: .5rem; background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; }
.mk-nupp img { max-width: 100%; max-height: 2rem; object-fit: contain; }
.mk-nupp:hover, .mk-nupp:focus-visible { box-shadow: inset 0 0 0 2px var(--signaal); }

/* payment return + order status */
.tellimus-sisu--tagasi { grid-template-columns: 1fr !important; gap: 1.5rem; }
.makse-juhis { max-width: 44rem; padding: 1.25rem 1.5rem; background: var(--paper); }
.makse-juhis h2 { font-size: 1.25rem; }
.makse-juhis p { margin-top: .5rem; white-space: pre-line; }
.tellimus-lingid { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.olek-vorm { display: grid; gap: 1rem; max-width: 44rem; margin-top: 1rem; }
.olek-vorm .nupp { justify-self: start; }
.olek-vorm ~ .vead { max-width: 44rem; margin-top: 1.5rem; }
.lisa-nupp--kysi svg { color: inherit; }

/* parcel machine picker (pickup_points from the shipping method) */
.pp { display: grid; gap: .5rem; }
.pp-valitud { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem 1rem; background: var(--ink); color: var(--paper); }
.pp-valitud svg { flex: none; margin-top: .125rem; color: var(--signaal); }
.pp-valitud > span { display: grid; gap: .125rem; }
.pp-valitud-silt { font-size: .75rem; color: var(--steel); }
.pp-list { display: grid; max-height: 16rem; overflow-y: auto; background: var(--paper); }
.pp-valik { display: grid; gap: .125rem; padding: .625rem .875rem; border: 0; border-bottom: 1px solid #E2E7ED; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pp-valik span { font-size: .8125rem; color: var(--muted); }
.pp-valik:hover, .pp-valik:focus-visible { background: #E2E7ED; outline: none; }
.pp-valik[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pp-valik[aria-selected="true"] span { color: var(--steel); }
.pp-tyhi, .pp-arv { padding: .25rem 0; font-size: .8125rem; color: var(--muted); }

/* Maksekeskus channels chosen before the order */
.mk-eelvalik { display: grid; gap: .75rem; margin-top: .75rem; }
.mk-eelvalik .mk-grupp-nimi { color: var(--muted); opacity: 1; }
.mk-eelvalik .mk-nupp { border: 0; box-shadow: inset 0 0 0 1px #E2E7ED; cursor: pointer; }
.mk-eelvalik .mk-nupp[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--signaal); }

/* terms consent: in the order panel right above the order button ("Telli koos maksekohustusega"), impossible to miss (Ideearendus review 2026-09-29) */
.kokkuvote .noustun-rida { display: grid; gap: .5rem; }
.kokkuvote .noustun { align-items: center; gap: .875rem; padding: .875rem 1rem; background: rgba(255, 255, 255, .08); box-shadow: inset 4px 0 0 var(--signaal); color: var(--paper); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.kokkuvote .noustun a { color: var(--signaal-hi); text-decoration: underline; text-underline-offset: 2px; }
.kokkuvote .noustun input[type="checkbox"] { width: 1.625rem; height: 1.625rem; margin: 0; background-color: var(--paper); background-size: 18px; box-shadow: 0 0 0 2px var(--signaal); }
.kokkuvote .noustun input[type="checkbox"]:checked { background-color: var(--signaal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3746' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.kokkuvote .on-viga .noustun { background: rgba(242, 139, 130, .16); box-shadow: inset 4px 0 0 #F28B82, 0 0 0 2px #F28B82; }
.kokkuvote .vali-viga { color: #FFB4A9; font-weight: 600; }

/* Maksekeskus channels — the same visual language as the other checkout choices (review 2026-09-29):
   filled chamfered tiles on a white panel, no rings; picked = navy with a copper dot. MK logos are opaque
   176x62 PNGs, so a picked logo tile shows a navy frame instead of a fill. */
.mk-eelvalik { gap: 1rem; margin-top: .75rem; padding: 1rem 1.25rem 1.25rem; background: var(--paper);
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l)); }
.mk-eelvalik > .vali-abi { margin: 0; }
.mk-grupp { display: grid; gap: .5rem; }
.mk-grupp-nimi, .mk-eelvalik .mk-grupp-nimi { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; opacity: 1;
  font: 600 .75rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mk-min { font: 500 .8125rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mk-min:empty { display: none; }
.mk-nupud { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .375rem; }
.mk-nupp { position: relative; display: grid; place-items: center; height: 3.5rem; min-height: 0; padding: .375rem .75rem; border: 0; box-shadow: none;
  background: var(--valja); color: var(--ink); font: 700 .9375rem/1.15 var(--display); letter-spacing: .02em; text-align: center; text-decoration: none; cursor: pointer;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: background-color .12s; }
.mk-nupp span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-nupp img { display: block; max-width: 100%; max-height: 2.25rem; object-fit: contain; }
.mk-nupp:hover { background: var(--valja-hi); }
.mk-nupp:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.mk-eelvalik .mk-nupp, .mk-eelvalik .mk-nupp:hover { box-shadow: none; }
.mk-nupp[aria-pressed="true"], .mk-nupp[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }
.mk-nupp--logo[aria-pressed="true"] { padding: .3125rem; }
.mk-nupp[aria-pressed="true"]::after { content: ""; position: absolute; top: .375rem; right: .375rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signaal); }
/* after the order the same tiles sit on the navy summary panel */
.kokkuvote .mk-nupp { background: var(--paper); }
.kokkuvote .mk-nupp:hover { background: var(--chromate-hi); box-shadow: none; }
.kokkuvote .mk-grupp-nimi { color: var(--steel); }
.kokkuvote .mk-pealkiri { color: var(--paper); }
.mk-eelvalik .mk-nupp[aria-pressed="true"] { box-shadow: none; }
.mk-nupud { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.mk-nupp { font-size: .875rem; }
/* carrier logo from admin → Transport → "Logo URL" */
.valikkast-nimi img.tarne-logo { width: auto; max-width: 4.5rem; height: 1.25rem; object-fit: contain; }

/* thank-you on the order status page (manual payment methods) */
.olek-pealkiri { margin-top: 2.5rem; font-size: 1.375rem; letter-spacing: -.015em; }
.olek-juht { margin-top: .375rem; color: var(--muted); }
.tellimus .makse-juhis { margin-top: 1.5rem; }

/* ==========================================================================
   Customer accounts (platform flag customer_accounts): the header's "Minu konto" / "Logi sisse" entry, the
   platform's /account pages (shop-shared/account.php, .cacc-*) and its checkout box (.cms-acct*) in the
   Servest look — two tones, no borders, chamfered controls, the navy button.
   ========================================================================== */
.pais .konto, .pais .konto:hover { text-decoration: none; }
.konto {
  grid-area: km; justify-self: end; display: flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: 0 .25rem;
  color: var(--ink); text-decoration: none; font: 600 1rem/1 var(--display); letter-spacing: .02em;
}
.konto svg { flex: none; }
.konto-silt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.konto:hover .konto-silt, .konto[aria-current] .konto-silt { text-decoration: underline; text-underline-offset: .25em; }
.konto--sees svg { color: var(--signaal-tekst, var(--ink)); }
.pais-rida { grid-template-columns: auto 1fr auto auto; grid-template-areas: "mark . km korv" "otsing otsing otsing otsing"; }
@media (min-width: 1024px) {
  .pais-rida { grid-template-columns: auto minmax(0, 46rem) 1fr auto auto; grid-template-areas: "mark otsing . km korv"; }
  .konto { padding: 0 .5rem; }
  .konto-silt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* the account pages */
.leht-konto .cacc {
  --shop-ink: var(--ink); --shop-accent: var(--ink); --shop-bg: var(--paper); --shop-radius: 0px;
  --c-line: transparent; --c-soft: var(--valja, #EEF1F5); --c-mute: var(--muted);
  font-family: var(--sans); max-width: var(--wrap); padding-inline: var(--gut);
}
.leht-konto .cacc h1 { font: 700 clamp(1.875rem, 4vw, 2.75rem)/1.06 var(--display); letter-spacing: -.015em; }
.leht-konto .cacc h2, .leht-konto .cacc h3 { font-family: var(--display); letter-spacing: -.01em; }
.leht-konto .cacc a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; }
.leht-konto .cacc-narrow { max-width: 34rem; }
.leht-konto .cacc-card, .leht-konto .cacc-tile, .leht-konto .cacc-nav, .leht-konto .cacc-addr .cacc-tile {
  border: 0; background: var(--paper); box-shadow: 0 10px 30px -18px rgba(43, 55, 70, .35);
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)),
    calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l));
}
.leht-konto .cacc-nav { padding: .5rem; }
.leht-konto .cacc-nav a, .leht-konto .cacc-nav button { font: 600 1rem/1.2 var(--display); letter-spacing: .02em; border-radius: 0; }
.leht-konto .cacc-nav a[aria-current=page] { background: var(--ink); color: var(--paper); }
.leht-konto .cacc-nav form { border-top: 0; }
.leht-konto .cacc input[type=text], .leht-konto .cacc input[type=email], .leht-konto .cacc input[type=password],
.leht-konto .cacc input[type=tel], .leht-konto .cacc select {
  border: 0; border-radius: 0; background: var(--valja, #EEF1F5); min-height: 3rem;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.leht-konto .cacc input:focus, .leht-konto .cacc select:focus { background: var(--paper); box-shadow: 0 6px 18px -8px rgba(43, 55, 70, .45); }
.leht-konto .cacc-btn {
  min-height: 3rem; border-radius: 0; background: var(--ink); color: var(--paper) !important;
  font: 700 .9375rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.leht-konto .cacc-btn:hover { filter: none; background: var(--ink-hi); }
.leht-konto .cacc-btn-quiet { background: var(--valja, #EEF1F5); color: var(--ink) !important; border: 0; }
.leht-konto .cacc-btn-quiet:hover { background: var(--valja-hi, #E2E7EE); }
.leht-konto .cacc-btn-danger { background: var(--viga); }
.leht-konto .cacc-radio label { border: 0; background: var(--valja, #EEF1F5); border-radius: 0; }
.leht-konto .cacc-radio label:has(input:checked) { background: var(--ink); color: var(--paper); }
.leht-konto .cacc-check input { accent-color: var(--ink); }
.leht-konto .cacc-table th { font-family: var(--display); }
.leht-konto .cacc-table td { border-bottom-color: var(--valja, #EEF1F5); }
.leht-konto .cacc-flash { border: 0; border-radius: 0; }
.leht-konto .cacc-attach { background: var(--paper); }

/* Width: body is a flex column and .cacc centres itself with auto margins, so without a width it shrank to its
   content and every account page sat in a narrow strip (owner 2026-10-15). It now spans the site's --wrap. */
.leht-konto .cacc { display: block; width: 100%; padding-block: 2.5rem 4.5rem; }

/* signed in: a navy side menu beside a wide content column */
@media (min-width: 861px) {
  .leht-konto .cacc-grid { grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; }
}
.leht-konto .cacc-nav { background: var(--ink); padding: .625rem; top: calc(var(--pais-h) + 1.5rem); }
.leht-konto .cacc-nav a, .leht-konto .cacc-nav button { color: var(--chromate-hi); padding: .8125rem 1rem; }
.leht-konto .cacc-nav a:hover, .leht-konto .cacc-nav button:hover { background: rgba(255, 255, 255, .08); color: var(--paper); }
.leht-konto .cacc-nav a[aria-current=page] { background: var(--paper); color: var(--ink); }
.leht-konto .cacc-nav button { color: var(--steel); }
.leht-konto .cacc-nav form { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid rgba(255, 255, 255, .14); }
@media (max-width: 860px) {
  .leht-konto .cacc-nav form { margin: 0 0 0 auto; padding: 0 0 0 .375rem; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
}
.leht-konto .cacc-main > h1 { margin-bottom: .5rem; }
.leht-konto .cacc-tiles { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }

/* signed out: the form and the account panel side by side (templates/servest/account.php adds .cacc--kylaline
   and the panel). One block on desktop — panel left in navy, form right in white; stacked on phones, form first. */
.leht-konto .cacc--kylaline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 76rem; }
.leht-konto .cacc--kylaline .cacc-narrow {
  max-width: none; margin: 0; background: var(--paper); padding: 2rem 1.25rem 2.25rem;
  box-shadow: 0 10px 30px -18px rgba(43, 55, 70, .35);
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)),
    calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l));
}
.leht-konto .cacc--kylaline .cacc-narrow .cacc-card { background: none; box-shadow: none; clip-path: none; padding: 0; margin: 1.5rem 0 0; }
.leht-konto .cacc--kylaline .cacc-narrow .cacc-flash + h1 { margin-top: .25rem; }

.leht-konto .konto-paneel {
  position: relative; display: flex; flex-direction: column; gap: 1.125rem; padding: 2rem 1.25rem;
  background:
    linear-gradient(135deg, transparent 58%, rgba(255, 255, 255, .045) 58% 70%, transparent 70%),
    linear-gradient(135deg, transparent 76%, rgba(255, 255, 255, .035) 76% 84%, transparent 84%),
    var(--ink);
  color: var(--chromate-hi);
  clip-path: polygon(var(--cut-l) 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)),
    calc(100% - var(--cut-l)) 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l));
}
.leht-konto .konto-paneel-silt { margin: 0; font: 600 .8125rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.leht-konto .konto-paneel-pk { margin: 0 0 .5rem; max-width: 22ch; font: 700 clamp(1.625rem, 2.6vw, 2.25rem)/1.08 var(--display); letter-spacing: -.01em; color: var(--paper); }
.leht-konto .konto-eelised { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.leht-konto .konto-eelised li { display: flex; gap: .875rem; align-items: center; line-height: 1.4; font-size: 1.0625rem; }
.leht-konto .konto-eelised svg {
  flex: none; box-sizing: content-box; padding: .5625rem; color: var(--paper); background: rgba(255, 255, 255, .09);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.leht-konto .konto-ilma { margin: auto 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--steel); font-size: .9375rem; }
.leht-konto .konto-paneel a { display: inline-flex; align-items: center; gap: .375rem; color: var(--paper); font-weight: 600; }
.leht-konto .konto-paneel a svg { transition: transform .2s var(--ease); }
.leht-konto .konto-paneel a:hover svg { transform: translateX(3px); }

@media (min-width: 60rem) {
  .leht-konto .cacc--kylaline { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; padding-block: 3rem 5rem;
    filter: drop-shadow(0 22px 34px rgba(43, 55, 70, .16)); }
  .leht-konto .konto-paneel { grid-column: 1; grid-row: 1; padding: 3.5rem 3rem 3rem; gap: 1.5rem;
    clip-path: polygon(var(--cut-l) 0, 100% 0, 100% 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l)), 0 var(--cut-l)); }
  .leht-konto .cacc--kylaline .cacc-narrow { grid-column: 2; grid-row: 1; padding: 3.5rem 3.5rem 3rem; box-shadow: none;
    clip-path: polygon(0 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% calc(100% - var(--cut-l)), calc(100% - var(--cut-l)) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) { .leht-konto .konto-paneel a svg { transition: none; } }

/* the checkout box (signed in as … / log in / create an account with this order) */
.kassa .cms-acct { border: 0; border-radius: 0; background: var(--paper); color: var(--ink); padding: .875rem 1.125rem; margin-bottom: 1.25rem;
  box-shadow: 0 10px 30px -18px rgba(43, 55, 70, .35); }
.kassa .cms-acct a { font-weight: 700; }
.kassa .cms-acct select { border: 0; border-radius: 0; background: var(--valja, #EEF1F5); }
/* "create an account with this order": in the contact section next to the e-mail it uses (data-cust-slot in
   shop-checkout.php), a white card like the log-in box above the form; ticked = the copper edge of the consent row.
   The global small colour stays (--muted on white); the platform's sr-only password label is shown like every
   other field label here. The slot is empty for signed-in customers and invite-only shops. */
.kassa-konto:empty { display: none; }
.kassa-konto .cms-acct-new { margin: 0; padding: 1rem 1.125rem; border: 0; border-radius: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 10px 30px -18px rgba(43, 55, 70, .35); transition: box-shadow .12s; }
.kassa-konto .cms-acct-new:has([data-cust-create]:checked) { box-shadow: inset 4px 0 0 var(--signaal), 0 10px 30px -18px rgba(43, 55, 70, .35); }
.kassa-konto .cms-acct-new > label { display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: start; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.kassa-konto .cms-acct-new input[type="checkbox"] { width: 1.375rem; height: 1.375rem; background-size: 16px; }
.kassa-konto .cms-acct-new input[type="checkbox"]:not(:checked) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 55%, transparent); }
.kassa-konto .cms-acct-new small { margin-top: .25rem; color: var(--muted); opacity: 1; font-size: .9375rem; font-weight: 400; line-height: 1.45; }
.kassa-konto [data-cust-pw] { display: grid; gap: .375rem; margin: 1rem 0 .125rem 2.25rem; max-width: 26rem; }
.kassa-konto [data-cust-pw][hidden] { display: none; }
.kassa-konto [data-cust-pw] label { position: static !important; font-weight: 500; font-size: .9375rem; }
.kassa-konto .cms-acct-new input[type="password"] { width: 100%; min-height: 3.25rem; margin: 0; padding: .75rem .875rem; border: 0; border-radius: 0;
  background: var(--valja); color: var(--ink); font-size: 1.0625rem;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.kassa-konto .cms-acct-new input[type="password"]:hover { background: var(--valja-hi); }
.kassa-konto .cms-acct-new input[type="password"]:focus { outline: none; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 479px) { .kassa-konto [data-cust-pw] { margin-left: 0; } }
.tellimus-konto { margin-top: 1rem; }
.makse-yks { margin: 0; color: var(--ink); }
.leht-konto .cacc-num { white-space: nowrap; }