/* =============================================================================
   Komponendid.
   Iga komponent on üks .pd-* juurklass. Sisemised osad on selle alamklassid,
   nii et spetsiifilisus jääb ühetasandiliseks ega hakka baasi üle kirjutama.
   ========================================================================== */

/* --- Nupud --------------------------------------------------------------- */

.pd-nupp {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-s-2);
  padding: .75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--pd-raadius-p);
  background: var(--pd-mark-tekst);
  color: #fff;
  font-family: var(--pd-f-tekst);
  font-size: var(--pd-t-sm);
  font-weight: 650;
  letter-spacing: .005em;
  text-decoration: none;
  transition: background var(--pd-kiire), border-color var(--pd-kiire);
}
.pd-nupp:hover { background: var(--pd-mark-tume); color: #fff; }

.pd-nupp--teine {
  background: transparent;
  color: var(--pd-tint);
  border-color: var(--pd-joon);
}
.pd-nupp--teine:hover { background: var(--pd-pind); border-color: var(--pd-tint); color: var(--pd-tint); }

.pd-nupp--tume { background: var(--pd-tint); }
.pd-nupp--tume:hover { background: #000; }

/*
 * Teisene nupp TUMEDAL põhjal. `--teine` on mõeldud paberile ja jääks CTA
 * sees loetamatuks: tume tekst tumedal.
 */
.pd-nupp--vastu {
  background: transparent;
  color: var(--pd-tint-vastu);
  border-color: rgba(242, 244, 246, .45);
}
.pd-nupp--vastu:hover {
  background: rgba(242, 244, 246, .1);
  border-color: var(--pd-tint-vastu);
  color: var(--pd-tint-vastu);
}

.pd-nupp__nool { transition: transform var(--pd-kiire); }
.pd-nupp:hover .pd-nupp__nool { transform: translateX(2px); }

/* --- Päis ---------------------------------------------------------------- */

.pd-pais {
  position: sticky;
  top: 0;
  z-index: var(--pd-z-pais);
  background: var(--pd-pind);
  border-bottom: var(--pd-piir);
}

.pd-pais__riba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-s-6);
  min-height: 4.25rem;
}

.pd-logo {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-lg);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--pd-tint);
  text-decoration: none;
  white-space: nowrap;
}
.pd-logo:hover { color: var(--pd-tint); }
.pd-logo b { color: var(--pd-mark-tekst); font-weight: inherit; }

/*
 * Logo on 500x310 PNG. Päises anname kõrguse ja laseme laiusel järgneda —
 * `width: auto` koos fikseeritud kõrgusega hoiab proportsiooni ka siis, kui
 * klient laeb Kohandajas teistsuguse kujuga faili.
 */
.pd-logo__pilt {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 11rem;
}
@media (min-width: 48rem) { .pd-logo__pilt { height: 3rem; max-width: 13rem; } }

.pd-nav { display: none; }
@media (min-width: 60rem) {
  .pd-nav { display: block; }
  .pd-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: var(--pd-s-6);
  }
  .pd-nav a {
    color: var(--pd-tint-2);
    text-decoration: none;
    font-size: var(--pd-t-sm);
    font-weight: 550;
    padding-block: var(--pd-s-2);
    border-bottom: 2px solid transparent;
    transition: color var(--pd-kiire), border-color var(--pd-kiire);
  }
  .pd-nav a:hover { color: var(--pd-tint); border-bottom-color: var(--pd-joon); }
  .pd-nav .current-menu-item > a,
  .pd-nav .current_page_item > a { color: var(--pd-tint); border-bottom-color: var(--pd-mark); }
}

.pd-pais__abi { display: flex; align-items: center; gap: var(--pd-s-4); }

.pd-tel {
  display: none;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-xs);
  color: var(--pd-tint-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pd-tel:hover { color: var(--pd-mark-tekst); }
/* Telefon on olemas kitsal ekraanil ja laual; vahepealses aknas annab ta
   ruumi otsingukastile. Number on ka jaluses ja kontaktiplokis. */
@media (min-width: 48rem) and (max-width: 59.999rem) { .pd-tel { display: inline-block; } }
@media (min-width: 80rem) { .pd-tel { display: inline-block; } }

/* Mobiilimenüü — detailide baasil, ilma JS-ita */
.pd-mobiil { margin-left: auto; }
@media (min-width: 60rem) { .pd-mobiil { display: none; } }
.pd-mobiil summary {
  list-style: none; cursor: pointer;
  padding: var(--pd-s-2) var(--pd-s-3);
  border: var(--pd-piir-tugev); border-radius: var(--pd-raadius);
  font-size: var(--pd-t-xs); font-family: var(--pd-f-andmed);
  letter-spacing: var(--pd-ls-lai); text-transform: uppercase;
}
.pd-mobiil summary::-webkit-details-marker { display: none; }
.pd-mobiil[open] summary { background: var(--pd-tint); color: var(--pd-tint-vastu); border-color: var(--pd-tint); }
.pd-mobiil__panel {
  position: absolute; left: 0; right: 0;
  background: var(--pd-pind);
  border-bottom: var(--pd-piir);
  box-shadow: var(--pd-vari-2);
  padding: var(--pd-s-4) 0 var(--pd-s-6);
}
.pd-mobiil__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pd-mobiil__panel a {
  display: block; padding: var(--pd-s-3) 0;
  border-bottom: var(--pd-piir);
  color: var(--pd-tint); text-decoration: none; font-weight: 550;
}

/* --- Usaldusriba (Google arvustused) ------------------------------------- */

/*
 * Ülemine riba oli must. Live lehel on ta tirkiis ja see annab lehe kõige
 * esimesele ribale värvi. Valge tekst annab siin 6.33:1.
 */
.pd-usaldus {
  background: var(--pd-c2-tekst);
  color: #FFF;
  font-size: var(--pd-t-xs);
}
.pd-usaldus__riba {
  display: flex; align-items: center; justify-content: center;
  gap: var(--pd-s-3); flex-wrap: wrap;
  padding-block: var(--pd-s-2);
  text-align: center;
}
.pd-usaldus a { color: #FFF; text-decoration-color: rgba(255,255,255,.55); }
/* Merevaik on siin graafika (tähed), mitte tekst — 3.88:1 ületab 3:1 nõude. */
.pd-usaldus__tarnid { color: var(--pd-c4-ere); letter-spacing: .12em; }
.pd-usaldus__hinne { font-family: var(--pd-f-andmed); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Tootekaart ---------------------------------------------------------- */

.pd-kaart {
  display: flex; flex-direction: column;
  background: var(--pd-pind);
  box-shadow: var(--pd-vari-kaart);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  overflow: hidden;
  transition: border-color var(--pd-kiire), box-shadow var(--pd-kiire);
}
.pd-kaart:hover { border-color: var(--pd-joon); box-shadow: var(--pd-vari-2); }

.pd-kaart__pilt {
  aspect-ratio: 4 / 5;
  background: var(--pd-pind-2);
  overflow: hidden;
  position: relative;
}
.pd-kaart__pilt img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--pd-keskm);
}
.pd-kaart:hover .pd-kaart__pilt img { transform: scale(1.03); }

.pd-kaart__tyhi {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--pd-tint-3);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
}

.pd-kaart__sisu {
  display: flex; flex-direction: column; gap: var(--pd-s-2);
  padding: var(--pd-s-4);
  flex: 1;
}

.pd-kaart__bränd {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
}

.pd-kaart__nimi {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-md);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.008em;
}
.pd-kaart__nimi a { color: var(--pd-tint); text-decoration: none; }
.pd-kaart__nimi a::after { content: ""; position: absolute; inset: 0; }

.pd-kaart { position: relative; }

.pd-kaart__spec {
  margin-top: auto;
  padding-top: var(--pd-s-3);
  border-top: var(--pd-piir);
  display: flex; flex-wrap: wrap; gap: var(--pd-s-1) var(--pd-s-3);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  color: var(--pd-tint-2);
  font-variant-numeric: tabular-nums;
}

/* --- Kataloogi ruudustik ------------------------------------------------- */

.pd-ruudustik {
  display: grid;
  gap: var(--pd-s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) { .pd-ruudustik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pd-ruudustik { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pd-s-6); } }

/* --- Filtririba ---------------------------------------------------------- */

.pd-filter {
  display: flex; flex-wrap: wrap; gap: var(--pd-s-2);
  padding-block: var(--pd-s-4);
  border-block: var(--pd-piir);
  margin-bottom: var(--pd-s-8);
}
.pd-filter__nupp {
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  padding: .35rem .75rem;
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  background: transparent;
  color: var(--pd-tint-2);
  font-size: var(--pd-t-xs);
  font-weight: 550;
  text-decoration: none;
  transition: all var(--pd-kiire);
}
.pd-filter__nupp:hover { border-color: var(--pd-tint); color: var(--pd-tint); }
.pd-filter__nupp[aria-current="true"] {
  background: var(--pd-tint); border-color: var(--pd-tint); color: var(--pd-tint-vastu);
}
.pd-filter__arv {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  /*
   * `opacity: .65` andis 2.43:1 — läbipaistvus sööb kontrasti ka siis, kui
   * alusvärv ise on korras. Vaigistus tuleb nüüd värvist, mitte hägusest
   * kihist.
   */
  color: var(--pd-tint-3);
  font-variant-numeric: tabular-nums;
}
/*
 * Aktiivsel nupul on põhi tume. Vaigistatud hall andis seal 3.31:1 —
 * vaigistus peab tulema heleduse teisest otsast, mitte samast toonist.
 */
.pd-filter__nupp[aria-current="true"] .pd-filter__arv { color: var(--pd-joon-2); }

/* --- Lehe päis (arhiiv, sisuleht) ---------------------------------------- */

/*
 * Lehepäis on omaette riba, mitte lihtsalt tühik pealkirja ümber. Valge pind
 * paberi peal ja piir all — sama võte, mis avalehe hero's, nii et lehe algus
 * näeb kõikjal ühtemoodi välja. Ilma selleta seisis pealkiri samal taustal
 * kui sisu ja klient luges seda „liiga kokku sulanduvaks" (#398).
 */
.pd-lehepais {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, var(--pd-soe-1) 0%, var(--pd-soe-2) 65%, var(--pd-soe-3) 100%);
  margin-bottom: var(--pd-s-12);
  padding-block: var(--pd-s-8) var(--pd-s-10);
}
/*
 * Samad kujundid, mis avalehe hero's — klient soovis, et iga lehe algus
 * näeks ühtemoodi välja. Riba on hero'st madalam, seega ringid on väiksemad
 * ja punktivõrk on paremas servas, kus teksti ei ole.
 */
.pd-lehepais::before,
.pd-lehepais::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.pd-lehepais::before {
  width: 22rem; height: 22rem;
  right: -5rem; top: -9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 55%, rgba(255, 112, 0, .22), rgba(255, 112, 0, 0) 70%);
}
.pd-lehepais::after {
  width: 9rem; height: 4.5rem;
  right: 6%; bottom: 1rem;
  background-image: radial-gradient(rgba(20, 24, 29, .18) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
}
@media (max-width: 62rem) { .pd-lehepais::after { display: none; } }

.pd-lehepais > .pd-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  align-items: start;
}

/*
 * Soojal taustal annab `--pd-tint-3` gradiendi tumedaimal toonil 3.86 —
 * teerada ja kokkuvõtterida lähevad seetõttu ühe astme tumedamaks.
 */
.pd-lehepais .pd-teerada,
.pd-lehepais .pd-teerada a { color: var(--pd-tint-2); }
.pd-lehepais .pd-teerada a:hover { color: var(--pd-mark-tume); }
.pd-lehepais h1 { max-width: 20ch; }
.pd-lehepais .pd-juhtlause { max-width: 58ch; }

/*
 * Silt on värviline pill, nagu live lehel. Varem oli siin punane mõõtjoon ja
 * paljas tekst — korrektne, aga kliendi sõnul „liiga stoiline".
 */
.pd-lehepais__eyebrow {
  display: inline-flex; align-items: center;
  padding: .3rem .8rem;
  border-radius: var(--pd-raadius-p);
  background: var(--pd-c3-tekst);
  color: #FFF;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
}

/* Blogi päises: teema, kuupäev ja lugemisaeg pealkirja kohal ühel real. */
.pd-lehepais__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-s-2) var(--pd-s-4);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-2);
}
.pd-lehepais__meta a { color: var(--pd-mark-tekst); text-decoration: none; }
.pd-lehepais__meta a:hover { text-decoration: underline; }

/* Väike kokkuvõtterida päise lõpus, nt „84 toodet". */
.pd-lehepais__arv {
  margin-top: var(--pd-s-2);
  padding-top: var(--pd-s-3);
  border-top: 1px solid rgba(20, 24, 29, .16);
  align-self: stretch;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-2);
}

/* --- Jalus --------------------------------------------------------------- */

.pd-jalus {
  background: var(--pd-pind-tume);
  color: var(--pd-tint-vastu);
  margin-top: var(--pd-s-24);
  padding-block: var(--pd-s-16) var(--pd-s-8);
}
/*
 * Enamik lehti lõpeb tumeda CTA-plokiga. Jaluse ülemine välisvahe jättis
 * kahe tumeda ala vahele heleda triibu, mis nägi välja nagu viga. Kui viimane
 * sektsioon on CTA, langeb vahe ära ja tumedad alad lähevad kokku.
 *
 * Sama probleem on lisaküsimuste plokiga: tema pind on valge ja jaluse
 * välisvahe jättis valge ploki ja tumeda jaluse vahele halli triibu, millel
 * ei olnud mingit tähendust.
 */
main:has(> .pd-cta:last-child) + .pd-jalus,
main:has(> .pd-lisakysimused:last-child) + .pd-jalus { margin-top: 0; }
.pd-jalus a { color: var(--pd-tint-vastu); text-decoration-color: rgba(242,244,246,.35); }
.pd-jalus a:hover { color: #fff; text-decoration-color: currentColor; }

.pd-jalus__ruudustik {
  display: grid; gap: var(--pd-s-10);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .pd-jalus__ruudustik { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--pd-s-8); } }

.pd-jalus__pealkiri {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  /* Live lehe tirkiisi hele variant — tumedal 11.1:1. */
  color: #7FCFCB;
  margin-bottom: var(--pd-s-4);
}
.pd-jalus ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--pd-s-2); }
.pd-jalus__kontakt {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-sm);
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: var(--pd-s-2);
}
.pd-jalus__alumine {
  margin-top: var(--pd-s-12);
  padding-top: var(--pd-s-5);
  border-top: 1px solid #2A313B;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pd-s-4);
  font-size: var(--pd-t-xs);
  color: #8A94A3;
}

/* --- Jaluse toetuseplokk -------------------------------------------------- */

/*
 * Logoriba on valgel taustal olev fail, seepärast on tal jaluses oma valge
 * alus — muidu jääks pilt tumedasse jalusesse valge kastina, mille servad
 * ei ole kavatsetud.
 */
.pd-toetus {
  margin-top: var(--pd-s-12);
  padding-top: var(--pd-s-8);
  border-top: 1px solid #2A313B;
  display: grid; gap: var(--pd-s-5);
  align-items: center;
}
@media (min-width: 48rem) {
  .pd-toetus { grid-template-columns: auto 1fr; gap: var(--pd-s-8); }
}

.pd-toetus__logo {
  margin: 0;
  width: fit-content;
  background: #fff;
  border-radius: var(--pd-raadius);
  padding: var(--pd-s-4) var(--pd-s-5);
}
.pd-toetus__pilt { display: block; width: 18rem; max-width: 100%; height: auto; }

/* Hall tumedal jalusel — 11.0:1. */
.pd-toetus__projekt {
  margin: 0 0 var(--pd-s-3);
  max-width: 54ch;
  font-size: var(--pd-t-sm);
  color: #C6CCD4;
}

/*
 * Sama kujundus nii serveri <summary>-le kui ka nupule, mille skript selle
 * asemele paneb — CSS ei tohi teada, kumb parasjagu ekraanil on.
 */
.pd-toetus__nupp {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer;
  list-style: none;
  border: 0; background: transparent; padding: 0;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-vastu);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: rgba(242, 244, 246, .35);
}
.pd-toetus__nupp::-webkit-details-marker { display: none; }
.pd-toetus__nupp::after { content: "\2192"; }
.pd-toetus__nupp:hover { color: #fff; text-decoration-color: currentColor; }

/* Ilma skriptita avaneb tekst kohapeal — siis peab ta jaluses loetav olema. */
.pd-toetus__sisu {
  margin-top: var(--pd-s-4);
  max-width: 70ch;
  font-size: var(--pd-t-sm);
  color: #C6CCD4;
}
.pd-toetus__sisu p + p { margin-top: var(--pd-s-3); }

.pd-toetus__dialoog {
  width: min(44rem, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: var(--pd-s-6);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  background: var(--pd-paber);
  color: var(--pd-tint);
}
.pd-toetus__dialoog::backdrop { background: rgba(20, 24, 29, .55); }
.pd-toetus__dialoog .pd-toetus__sisu {
  margin-top: 0;
  color: var(--pd-tint-2);
  font-size: var(--pd-t-md);
}
.pd-toetus__dialoog-pais {
  display: flex; align-items: start; justify-content: space-between;
  gap: var(--pd-s-4);
  margin-bottom: var(--pd-s-4);
}
.pd-toetus__dialoog-pais h2 { font-size: var(--pd-t-lg); }
.pd-toetus__sulge {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--pd-t-2xl); line-height: 1; padding: 0 .3rem;
  color: var(--pd-tint-2);
}
.pd-toetus__sulge:hover { color: var(--pd-tint); }

/* --- 404 ----------------------------------------------------------------- */

.pd-404 { padding-block: var(--pd-s-8) var(--pd-s-12); }
.pd-404__nupud { display: flex; gap: var(--pd-s-3); flex-wrap: wrap; }

.pd-404__otsing { margin-top: var(--pd-s-10); max-width: 30rem; }
.pd-404__otsing .pd-silt { display: block; margin-bottom: var(--pd-s-2); }
/* Päises on otsing mobiilis peidus; 404-lehel on ta peamine väljapääs. */
.pd-404 .pd-otsing { display: block; max-width: none; }

.pd-404__lingid { margin-top: var(--pd-s-10); }
.pd-404__lingid ul {
  list-style: none; margin: var(--pd-s-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--pd-s-2);
}
.pd-404__lingid a {
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  padding: .5rem var(--pd-s-4);
  border: var(--pd-piir); border-radius: var(--pd-raadius-p);
  background: var(--pd-pind);
  font-size: var(--pd-t-sm);
  color: var(--pd-tint);
  text-decoration: none;
}
.pd-404__lingid a:hover { border-color: var(--pd-joon); background: var(--pd-pind-2); }
.pd-404__arv {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  color: var(--pd-tint-3);
  font-variant-numeric: tabular-nums;
}

/* --- Lehitsemine --------------------------------------------------------- */

.pd-lehitse {
  margin-top: var(--pd-s-12);
  display: flex; justify-content: center;
}
.pd-lehitse .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem;
  border: var(--pd-piir); border-radius: var(--pd-raadius);
  font-family: var(--pd-f-andmed); font-size: var(--pd-t-xs);
  color: var(--pd-tint-2); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pd-lehitse .page-numbers:hover { border-color: var(--pd-tint); color: var(--pd-tint); }
.pd-lehitse .page-numbers.current {
  background: var(--pd-tint); border-color: var(--pd-tint); color: var(--pd-tint-vastu);
}
.pd-lehitse .nav-links { display: flex; gap: var(--pd-s-2); flex-wrap: wrap; }

/* =============================================================================
   Tooteleht
   ========================================================================== */

.pd-toode { padding-block: var(--pd-s-8) var(--pd-s-16); }

.pd-teerada {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--pd-s-2);
  padding-top: var(--pd-s-6);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  margin-bottom: var(--pd-s-8);
}
.pd-teerada a { color: var(--pd-tint-3); text-decoration: none; }
.pd-teerada a:hover { color: var(--pd-mark-tekst); }
.pd-teerada [aria-current="page"] { color: var(--pd-tint); }

/* Tootelehel on juba oma ülemine õhk, teerada ei pea seda lisama. */
.pd-toode .pd-teerada { padding-top: 0; }
/* Lehepäise sees on riba enda ülemine vahe juba olemas. */
.pd-lehepais .pd-teerada { padding-top: 0; margin-bottom: var(--pd-s-5); }

.pd-toode__ruudustik {
  display: grid; gap: var(--pd-s-10);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  /*
   * Pilt oli varem laiem kui infoveerg (1.15fr) ja 4:5 kõrgusega tähendas
   * see ligi 750 px kõrgust plokki — toode ise kadus foto sisse ära.
   * Võrdsed veerud ja ülempiir hoiavad pildi hero'na, aga lasevad
   * spetsifikatsioonil ja hinnapäringu nupul samuti ekraanile mahtuda.
   */
  .pd-toode__ruudustik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pd-s-12); }
  .pd-toode__meedia { position: sticky; top: 6rem; max-width: 28rem; }
}

.pd-toode__pilt {
  margin: 0;
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.pd-toode__pilt img { width: 100%; height: 100%; object-fit: cover; }

.pd-toode__lint {
  display: flex; gap: var(--pd-s-2);
  margin-top: var(--pd-s-3);
  overflow-x: auto;
  padding-bottom: var(--pd-s-2);
  scrollbar-width: thin;
}
.pd-toode__pisi {
  flex: 0 0 auto;
  width: 4.25rem;
  padding: 0;
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  overflow: hidden;
  transition: border-color var(--pd-kiire);
}
.pd-toode__pisi img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.pd-toode__pisi:hover { border-color: var(--pd-joon); }
.pd-toode__pisi[aria-current="true"] { border-color: var(--pd-mark); border-width: 2px; }

.pd-toode__info { display: flex; flex-direction: column; gap: var(--pd-s-5); }

.pd-toode__bränd {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  text-decoration: none;
  align-self: flex-start;
}
.pd-toode__bränd:hover { color: var(--pd-mark-tekst); }

.pd-toode__info h1 { font-size: var(--pd-t-3xl); }

/* --- Spetsifikatsioon --- */

.pd-spec {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--pd-teine);
}
.pd-spec__rida {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--pd-s-4);
  padding-block: var(--pd-s-3);
  border-bottom: var(--pd-piir);
}
.pd-spec__rida dt {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  padding-top: .15rem;
}
.pd-spec__rida dd {
  margin: 0;
  font-size: var(--pd-t-sm);
  color: var(--pd-tint);
  font-variant-numeric: tabular-nums;
}

/* --- Trükitehnikad --- */

.pd-tehnikad { display: flex; flex-direction: column; gap: var(--pd-s-2); }
.pd-tehnikad__loend { display: flex; flex-wrap: wrap; gap: var(--pd-s-2); }
/*
 * Trükitehnika silt on INFO, mitte tegevus — seepärast tirkiis, mitte punane.
 * Punasega nägi ta välja nagu klõpsatav nupp, mida ta ei ole.
 */
.pd-mark-silt {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem;
  background: var(--pd-teine-hell);
  color: var(--pd-teine-tume);
  border: 1px solid rgba(16, 161, 157, .3);
  border-radius: var(--pd-raadius);
  font-size: var(--pd-t-xs);
  font-weight: 600;
}

/* --- Tegevus + lubadus --- */

.pd-toode__tegevus { display: flex; flex-direction: column; gap: var(--pd-s-3); align-items: flex-start; }

.pd-lubadus {
  display: flex; gap: var(--pd-s-2); align-items: flex-start;
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-2);
  max-width: 46ch;
}
.pd-lubadus__ok { color: var(--pd-ok); font-weight: 700; line-height: 1.5; }

/* --- Failid --- */

.pd-failid {
  display: flex; flex-direction: column; gap: var(--pd-s-2);
  padding-top: var(--pd-s-5);
  border-top: var(--pd-piir);
}
.pd-fail {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-s-4);
  padding: var(--pd-s-3);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  color: var(--pd-tint);
  text-decoration: none;
  font-size: var(--pd-t-sm);
  font-weight: 550;
  transition: border-color var(--pd-kiire);
}
.pd-fail:hover { border-color: var(--pd-teine-tekst); color: var(--pd-teine-tekst); }
.pd-fail__meta {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  color: var(--pd-tint-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-toode__kirjeldus { margin-top: var(--pd-s-16); }

/* --- Nimekirja rida (blogi, otsing) --- */

.pd-rida { display: flex; flex-direction: column; gap: var(--pd-s-2); padding-bottom: var(--pd-s-8); border-bottom: var(--pd-piir); }
.pd-rida__nimi { font-size: var(--pd-t-xl); }
.pd-rida__nimi a { color: var(--pd-tint); text-decoration: none; }
.pd-rida__nimi a:hover { color: var(--pd-mark-tekst); }

/* =============================================================================
   Jagatud sektsioonikomponendid.
   Kasutuses nii avalehel kui ACF sektsioonides — sellepärast siin, mitte
   kummaski eraldi failis.
   ========================================================================== */

/* --- Silt pealkirja kohal ------------------------------------------------- */

/*
 * Elas varem avaleht.css-is, aga see fail laeb ainult avalehel. Sama silti
 * kasutab ka tootelehe „Kas Teil on lisaküsimusi?" plokk, seega peab reegel
 * olema komponentides.
 */
.pd-hero__eyebrow,
.pd-eyebrow {
  display: inline-flex; align-items: center;
  align-self: start;
  padding: .3rem .8rem;
  border-radius: var(--pd-raadius-p);
  background: var(--pd-c3-tint);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-c3-tekst);
}

/* --- Sektsiooni päis ----------------------------------------------------- */

.pd-sektsioon__pais {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-s-4);
  margin-bottom: var(--pd-s-8);
  padding-bottom: var(--pd-s-4);
  border-bottom: var(--pd-piir);
}
.pd-sektsioon__pais h2 { font-size: var(--pd-t-2xl); }

.pd-link-nool {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-2);
  text-decoration: none;
  white-space: nowrap;
}
.pd-link-nool:hover { color: var(--pd-mark-tekst); }

/* --- Sammud -------------------------------------------------------------- */

/*
 * Sammude riba oli valge nagu enamik muudki. Õrn tirkiis eristab ta ümbrusest
 * ja annab lehele veidi värvi, ilma et miski hakkaks tekstiga võistlema —
 * #E3F1F0 peal on põhitekst 15.4:1.
 *
 * Taga on kolm kujundit, sama keel mis hero's: pehme oranž ring, punktivõrk
 * ja õhuke tirkiisrõngas. Kõik on `::before`/`::after`, ilma märgendita, ja
 * `z-index: -1` all — tekst käib neist üle ega kaota kontrasti. `isolation`
 * hoiab negatiivse z-indeksi selle sektsiooni sees.
 */
.pd-sammud-taust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pd-teine-hell);
  border-block: 1px solid rgba(16, 161, 157, .25);
}
.pd-sammud-taust::before,
.pd-sammud-taust::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Pehme oranž ring paremal üleval. */
.pd-sammud-taust::before {
  width: 26rem; height: 26rem;
  right: -8rem; top: -10rem;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 55%, rgba(255, 112, 0, .16), rgba(255, 112, 0, 0) 70%);
}
/*
 * Punktivõrk paremal all. Vasakus servas jookseks ta „Vajad personaalset
 * printimislahendust?" rea alla ja näeks välja nagu viga; paremal on tühi.
 */
.pd-sammud-taust::after {
  width: 10rem; height: 5rem;
  right: 3%; bottom: 1.75rem;
  background-image: radial-gradient(rgba(10, 107, 105, .3) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
}
/* Õhuke rõngas vasakul üleval — ainus joonega kujund, nagu live lehe ketas. */
.pd-sammud-taust > .pd-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -7rem; top: -3.5rem;
  width: 13rem; height: 13rem;
  border: 1.5px solid rgba(16, 161, 157, .35);
  border-radius: 50%;
  pointer-events: none;
}
.pd-sammud-taust > .pd-wrap { position: relative; }

/* Kitsal ekraanil jäävad kujundid teksti alla — seal ei ole neile ruumi. */
@media (max-width: 56rem) {
  .pd-sammud-taust::before,
  .pd-sammud-taust::after,
  .pd-sammud-taust > .pd-wrap::before { display: none; }
}

.pd-sammud {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--pd-s-8);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  counter-reset: none;
}

.pd-samm { display: flex; flex-direction: column; gap: var(--pd-s-2); }

/*
 * Number on siin päris info — tellimus KÄIB selles järjekorras. Varem oli ta
 * punase joone kohal; nüüd on ta värviring, iga samm oma tooniga, nagu live
 * lehe ikoonid.
 */
.pd-samm__nr {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: #FFF;
  background: var(--pd-c2-tekst);
}
.pd-samm:nth-child(3n + 1) .pd-samm__nr { background: var(--pd-c1-tekst); }
.pd-samm:nth-child(3n + 2) .pd-samm__nr { background: var(--pd-c2-tekst); }
.pd-samm:nth-child(3n)     .pd-samm__nr { background: var(--pd-c3-tekst); }
.pd-samm__nimi { font-size: var(--pd-t-lg); margin-top: var(--pd-s-2); }
.pd-samm p { font-size: var(--pd-t-sm); color: var(--pd-tint-2); }

.pd-sammud__sisse {
  max-width: 60ch;
  margin-top: calc(var(--pd-s-4) * -1);
  margin-bottom: var(--pd-s-8);
}
.pd-sammud__sisse p { color: var(--pd-tint-2); }
.pd-sammud__sisse p + p { margin-top: var(--pd-s-3); }

.pd-sammud__lopp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-s-3);
  margin-top: var(--pd-s-10);
  padding-top: var(--pd-s-5);
  border-top: var(--pd-piir);
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-2);
}

/*
 * Sammu vihjepilt.
 *
 * Live lehel on iga sammu all suur foto. Siin on foto infonupu taga, nagu
 * klient palus. Paan tuleb nähtavale, kui hiir on vihje kohal VÕI kui fookus
 * on selle sees — `:focus-within` katab nii klaviatuuri kui puuteekraani,
 * sest puudutus annab nupule fookuse. JS-i seega vaja ei ole.
 *
 * Paan on `visibility: hidden`, mitte `display: none`, et üleminek töötaks;
 * mõlemad hoiavad pildi seni ka ligipääsetavuspuust väljas.
 */
/*
 * Vihje elab pealkirja sees ja on ainult ikoon. Varem oli ta pill kirjaga
 * „VAATA PILTI" sammu lõpus; klient nimetas seda koledaks ja soovis ikooni
 * pealkirja kõrvale.
 */
.pd-samm__nimi {
  display: flex; align-items: center; gap: var(--pd-s-2);
}
.pd-samm__vihje { position: relative; display: inline-flex; }

.pd-vihje__nupp {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  padding: 0;
  background: var(--pd-teine-hell);
  border: 1px solid rgba(16, 161, 157, .35);
  border-radius: 50%;
  color: var(--pd-teine-tekst);
  cursor: pointer;
  transition: background var(--pd-kiire), border-color var(--pd-kiire), color var(--pd-kiire);
}
.pd-vihje__nupp:hover {
  background: var(--pd-teine-tekst);
  border-color: var(--pd-teine-tekst);
  color: #FFF;
}
.pd-vihje__nupp svg { display: block; }

.pd-vihje__paan {
  position: absolute;
  bottom: calc(100% + var(--pd-s-2));
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: min(20rem, 76vw);
  padding: var(--pd-s-2);
  background: var(--pd-pind);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  box-shadow: var(--pd-vari-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--pd-s-2));
  transition: opacity var(--pd-kiire), transform var(--pd-kiire), visibility var(--pd-kiire);
}
.pd-samm__vihje:hover .pd-vihje__paan,
.pd-samm__vihje:focus-within .pd-vihje__paan {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Kitsal ekraanil ei mahu 20rem paan nupu keskele — joonda vasakusse serva. */
@media (max-width: 40rem) {
  .pd-vihje__paan { left: 0; translate: none; }
}
.pd-vihje__paan img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--pd-raadius);
}

/* --- CTA ----------------------------------------------------------------- */

/*
 * CTA ja jalus olid täpselt sama värvi — `--pd-tint` ja `--pd-pind-tume` on
 * mõlemad #14181D — ja sulandusid seetõttu üheks tumedaks plokiks. Varem oli
 * nende vahel jaluse välisvahest tekkinud hele triip, mis nägi samuti vale
 * välja; lahendus ei ole kumbki äärmus, vaid nähtav värviaste.
 *
 * Kui live'i palett sisse tuleb (#399), tasub see toon sealt üle vaadata.
 */
/*
 * CTA oli ühtlane tumehall plokk. Nüüd on tal sügav gradient ja taga kolm
 * kujundit: tirkiis- ja oranžilaik ning punktivõrk — sama keel, mis hero's ja
 * sammude ribal, lihtsalt tumedal põhjal.
 *
 * Laigud teevad tausta HELEDAMAKS ja söövad seega kontrasti. Kõige tugevama
 * laigu peal on valge pealkiri 9.9:1 ja vaigistatud lõik 4.62:1 — mõlemad
 * üle nõude, aga tugevamaks neid ajada ei tohi.
 */
.pd-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /*
   * Tume hall ei sobinud kujunditega kokku — kujundid nõuavad värvi, mille
   * peale nad üldse paistavad. Sügav tirkiis on live lehe põhivärvi tume
   * variant ja seob CTA ülemise usaldusribaga.
   */
  background: linear-gradient(115deg, #0B5B57 0%, #0E5C58 45%, #124B55 100%);
  color: #FFF;
  padding-block: var(--pd-s-16);
}
.pd-cta::before,
.pd-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.pd-cta::before {
  width: 30rem; height: 30rem;
  right: -7rem; top: -12rem;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 55%, rgba(255, 191, 0, .18), rgba(255, 191, 0, 0) 68%);
}
.pd-cta::after {
  width: 24rem; height: 24rem;
  left: -8rem; bottom: -12rem;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(255, 112, 0, .20), rgba(255, 112, 0, 0) 68%);
}
/* Punktivõrk paremal all, kus teksti ei ole. */
.pd-cta__sisu::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0; bottom: -1rem;
  width: 10rem; height: 5rem;
  background-image: radial-gradient(rgba(255, 255, 255, .3) 1.5px, transparent 1.6px);
  background-size: 13px 13px;
  pointer-events: none;
}
@media (max-width: 56rem) { .pd-cta__sisu::after { display: none; } }
.pd-cta__sisu {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--pd-s-6);
}
.pd-cta h2 { color: #FFF; font-size: var(--pd-t-2xl); }
/* Tirkiisil ja laikude peal annab #D5E4E3 halvimas kohas 4.58:1. */
.pd-cta p { color: #D5E4E3; margin-top: var(--pd-s-2); }

/* Live lehel on CTA pealkirja kohal väike rida („Paindlikud lahendused…"). */
.pd-cta__silt {
  display: inline-flex; align-items: center;
  padding: .3rem .8rem;
  border-radius: var(--pd-raadius-p);
  background: rgba(255, 255, 255, .16);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: #EAF3F2;
  margin: 0 0 var(--pd-s-3);
}
.pd-cta__nupud { display: flex; flex-wrap: wrap; gap: var(--pd-s-3); }

/*
 * Punane nupp annab tirkiisil 1.4:1 ehk kaob põhja sisse. CTA sees on nupp
 * seetõttu valge tumeda tirkiisi kirjaga: 7.1:1 põhja vastu ja 8.7:1 kirja
 * vastu.
 */
.pd-cta .pd-nupp {
  background: #FFF;
  color: var(--pd-teine-tume);
}
.pd-cta .pd-nupp:hover { background: #EAF3F2; color: var(--pd-teine-tume); }
.pd-cta .pd-nupp--vastu {
  background: transparent;
  color: #FFF;
  border-color: rgba(255, 255, 255, .5);
}
.pd-cta .pd-nupp--vastu:hover { background: rgba(255, 255, 255, .12); color: #FFF; }

/* =============================================================================
   Paigutusdiagramm — üks rõivas iga trükikoha kohta.

   Kaheteistkümne koha juures ei tööta kõigi alade kuvamine ühel rõival:
   E1, E2 ja E3 istuvad üksteise sees. Iga kood saab oma rõiva — nagu
   kliendi enda skeemil — ja on seetõttu eraldi klõbistatav sihtmärk.
   ========================================================================== */

.pd-paigutus {
  display: grid;
  gap: var(--pd-s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  /*
   * Kaks veergu on pärand ajast, mil paremal seisis kõrvalpaneel valitud
   * koodi kirjeldusega. Paneel kadus juba varem ära ja 17rem veerg jäi
   * tühjaks — ruudustik on nüüd täislaiuses.
   */
  .pd-paigutus--info {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pd-s-8);
    align-items: start;
  }
}

.pd-pk-ruudustik {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--pd-s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 30rem) { .pd-pk-ruudustik { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .pd-pk-ruudustik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Täislaiuses konteineris mahub kuus lahtrit kõrvuti ega jää tühja ruumi. */
@media (min-width: 72rem) { .pd-pk-ruudustik { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- Üks lahter ---------------------------------------------------------- */

.pd-pk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-s-2);
  width: 100%;
  padding: var(--pd-s-3) var(--pd-s-2);
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: border-color var(--pd-kiire), box-shadow var(--pd-kiire), background var(--pd-kiire);
}
.pd-pk:hover { border-color: var(--pd-joon); box-shadow: var(--pd-vari); }

/*
 * Pilt on kliendi mockup, kuhu trükiala on juba märgitud. Kõik lõiked on
 * ühesugusel lõuendil (440x600), seega `aspect-ratio` hoiab ruudustiku
 * ühtlasena ka enne piltide laadimist.
 */
.pd-pk__pilt {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 600;
  object-fit: contain;
  background: #fff;
}

.pd-pk__silt { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.pd-pk__nimi { font-size: var(--pd-t-xs); color: var(--pd-tint-2); line-height: 1.3; }

/* --- Valikurežiim (hinnapäringu vorm) ------------------------------------ */

.pd-pk__ruut { position: absolute; opacity: 0; pointer-events: none; }

.pd-pk--valik:has(.pd-pk__ruut:checked) {
  border-color: var(--pd-mark);
  background: var(--pd-mark-hell);
  box-shadow: inset 0 0 0 1px var(--pd-mark);
}
.pd-pk--valik:has(.pd-pk__ruut:focus-visible) {
  outline: 2px solid var(--pd-teine-tekst);
  outline-offset: 2px;
}
/*
 * Valimata lahtri trükiala on vaigistatud, et valitud kohad hüppaksid
 * silma. `:has()` puudumisel jäävad kõik alad punaseks — see on halvem,
 * aga mitte katki.
 */
.pd-pk--valik:not(:has(.pd-pk__ruut:checked)) /* --- Inforežiim (standardpaigutuste leht) -------------------------------- */

.pd-pk--info { -webkit-appearance: none; appearance: none; }
.pd-pk--info:focus-visible { outline: 2px solid var(--pd-teine-tekst); outline-offset: 2px; }
.pd-pk--info[aria-current="true"] {
  border-color: var(--pd-mark);
  box-shadow: inset 0 0 0 1px var(--pd-mark);
}

/* --- Paigutusdiagramm: kompaktrežiim (avalehe hero) ---------------------- */

.pd-pk--kompakt { cursor: default; }
.pd-pk--kompakt:hover { border-color: var(--pd-joon-2); box-shadow: none; }
.pd-paigutus__link { margin-top: var(--pd-s-1); }

/* Kapuutsi, tasku ja varruka servad — kontuur ilma täiteta. */
/* --- Rõivatüübi pealkiri diagrammil -------------------------------------- */

/*
 * Rõivatüübid on üksteise all, mitte vahekaartidena: sama kood tähendab
 * igal rõival eri kohta ja neid võrreldakse omavahel. Vahekaart peidaks
 * kaks kolmandikku ja sunniks klõpsima, et üldse teada saada, mis seal on.
 */
.pd-paigutus__sisu { display: flex; flex-direction: column; gap: var(--pd-s-4); }
.pd-paigutus__ruhm { display: flex; flex-direction: column; gap: var(--pd-s-4); }
.pd-paigutus__ruhm[hidden] { display: none; }
.pd-paigutus__tyyp {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  font-weight: 500;
  padding-bottom: var(--pd-s-2);
  border-bottom: var(--pd-piir);
  margin-top: var(--pd-s-6);
}
.pd-paigutus__sisu > .pd-paigutus__tyyp:first-child { margin-top: 0; }

/*
 * Inforežiimis on lahter link sama koodi tabelireale — seega ta peab
 * käituma nagu link: kursor, hover ja fookus.
 */
.pd-pk--info { text-decoration: none; color: inherit; }
.pd-pk--info:hover { border-color: var(--pd-mark); }
.pd-pk--info:hover .pd-kood { color: var(--pd-mark-tume); }
.pd-pk--info:focus-visible { outline: 2px solid var(--pd-teine-tekst); outline-offset: 2px; }

/* --- Päringukorvi loendur päises ----------------------------------------- */

/*
 * Nähtaval ainult siis, kui korvis midagi on — JS võtab `hidden` maha.
 * Ilma JS-ita korvi ei ole ja loendur jääb peitu.
 */
.pd-korv-link {
  display: inline-flex; align-items: center; gap: var(--pd-s-2);
  padding: .35rem .6rem;
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  text-decoration: none;
  color: var(--pd-tint);
  font-size: var(--pd-t-sm);
  line-height: 1;
}
.pd-korv-link:hover { border-color: var(--pd-tint); color: var(--pd-tint); }
.pd-korv-link[hidden] { display: none; }
.pd-korv-link__arv {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pd-mark-tekst);
}

/* Korvis olev toode — nupp tootelehel muudab ilmet. */
.pd-nupp.on-korvis { background: var(--pd-ok); }
.pd-nupp.on-korvis:hover { background: #17663A; }

/* --- Korduvad küsimused --------------------------------------------------- */

/*
 * KKK oli varem sektsioonid.css failis, sest teda kasutati ainult ACF
 * sisulehtedel. Nüüd on ta ka avalehel (#389), mis seda faili ei lae —
 * seega on ta jagatud komponent ja kuulub siia.
 */
/* --- KKK ------------------------------------------------------------------ */

/*
 * Loend on sama lai kui ülejäänud sisu. `max-width: 46rem` jättis read
 * sektsiooni päisejoonest oluliselt lühemaks ja see luges paigutusveana.
 * Pikk küsimusetekst ei ole siin probleem — küsimused on ühe rea pikkused ja
 * vastus on omaette lõigus, mille laiust piirab `.pd-kkk__vastus`.
 */
.pd-kkk {
  display: flex; flex-direction: column;
}
/*
 * Ülemist joont ei ole: sektsiooni päisel on juba oma `border-bottom` ja
 * täislaiuses loendi kohal seisaksid nad kaks kõrvuti.
 */
.pd-sektsioon__pais + .pd-kkk { border-top: 0; }
.pd-kkk__rida { border-bottom: var(--pd-piir); }
.pd-kkk__rida summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-s-4);
  padding: var(--pd-s-4) 0;
  cursor: pointer;
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-md);
  font-weight: 650;
  letter-spacing: -.01em;
}
.pd-kkk__rida summary::after {
  content: "+";
  font-family: var(--pd-f-andmed);
  color: var(--pd-mark-tekst);
  font-size: var(--pd-t-lg);
  line-height: 1;
  flex: 0 0 auto;
}
.pd-kkk__rida[open] summary::after { content: "−"; }
.pd-kkk__vastus { padding-bottom: var(--pd-s-5); }
/* Vastus jääb loetava reapikkuse juurde, ka kui loend ise on lehelaiune. */
.pd-kkk__vastus p { font-size: var(--pd-t-sm); color: var(--pd-tint-2); max-width: 70ch; }

/* --- „Kas Teil on lisaküsimusi?" ----------------------------------------- */

/*
 * Jaluse kohal olev plokk: vasakul lühivorm, paremal tekst ja kontaktid.
 * Live lehel on sama järjekord. Tume taust eristab teda tootelehe sisust ja
 * hoiab jaluse küljest lahus — sama probleem, mis CTA-l oli (#401).
 */
/*
 * Sama soe gradient ja kujundid, mis hero's ja lehepäises — tuim valge pind
 * ei sobinud siia. Vorm jääb tirkiisipaneeliks: jahe kast sooja tausta peal
 * eristab vormi selgelt kõrvalolevast tekstist.
 */
.pd-lisakysimused {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, var(--pd-soe-1) 0%, var(--pd-soe-2) 60%, var(--pd-soe-3) 100%);
  border-top: 1px solid rgba(20, 24, 29, .1);
}
.pd-lisakysimused::before,
.pd-lisakysimused::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.pd-lisakysimused::before {
  width: 26rem; height: 26rem;
  right: -7rem; top: -11rem;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 55%, rgba(255, 112, 0, .22), rgba(255, 112, 0, 0) 70%);
}
.pd-lisakysimused::after {
  width: 16rem; height: 16rem;
  left: -6rem; bottom: -7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(16, 161, 157, .18), rgba(16, 161, 157, 0) 70%);
}

.pd-lisakysimused__ruudustik {
  display: grid;
  gap: var(--pd-s-10);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .pd-lisakysimused__ruudustik {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pd-s-16);
  }
}

.pd-lisakysimused__vorm {
  padding: var(--pd-s-6);
  background: var(--pd-teine-hell);
  border: 1px solid rgba(16, 161, 157, .3);
  border-radius: var(--pd-raadius);
  box-shadow: var(--pd-vari-2);
}

.pd-lisakysimused__tekst {
  display: flex; flex-direction: column; gap: var(--pd-s-4);
  max-width: 46ch;
}
.pd-lisakysimused__tekst h2 { font-size: var(--pd-t-2xl); }
.pd-lisakysimused__tekst p { color: var(--pd-tint-2); }
.pd-lisakysimused__tekst .pd-nupp { margin-top: var(--pd-s-2); }

.pd-kontaktread {
  list-style: none; margin: var(--pd-s-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  font-size: var(--pd-t-sm);
}
.pd-kontaktread li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  gap: var(--pd-s-3);
}
/*
 * Ikoonid on SVG, mitte Unicode'i märgid (☎ ✉ ⌖). Neid märke ei ole igas
 * fondis olemas ja osa süsteeme asendab nad emojiga — kirjatüüpi ja värvi
 * me siis enam ei kontrolli.
 */
.pd-kontaktread__ikoon {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--pd-mark-hell);
  color: var(--pd-mark-tekst);
  line-height: 1;
}
.pd-kontaktread__ikoon svg { display: block; }
.pd-kontaktread a { color: var(--pd-tint); }
.pd-kontaktread a:hover { color: var(--pd-mark-tekst); }

/* --- Jagamisriba (#400, #397) -------------------------------------------- */

.pd-jagamine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-s-4);
  max-width: var(--pd-laius-kitsas);
  margin-top: var(--pd-s-6);
  padding-block: var(--pd-s-5);
  border-top: var(--pd-piir);
  border-bottom: var(--pd-piir);
}

.pd-jagamine__silt {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  margin-right: auto;
}

.pd-jagamine__loend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--pd-s-2);
}

/*
 * Nupud on 2.5rem — WCAG 2.5.5 soovitab vähemalt 44 px puutesihtmärki ja
 * 2.5rem = 40 px koos 8 px vahega annab sama tulemuse.
 */
.pd-jaga {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  background: var(--pd-pind);
  border: var(--pd-piir);
  border-radius: 50%;
  color: var(--pd-tint-2);
  cursor: pointer;
  transition: border-color var(--pd-kiire), color var(--pd-kiire), background var(--pd-kiire);
}
.pd-jaga:hover {
  border-color: var(--pd-mark);
  color: var(--pd-mark-tekst);
  background: var(--pd-mark-hell);
}
.pd-jaga.on-tehtud {
  border-color: var(--pd-ok);
  color: var(--pd-ok);
}

.pd-jagamine__teade {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--pd-t-sm);
  color: var(--pd-ok);
}
.pd-jagamine__teade:empty { display: none; }

/*
 * Tootelehel istub riba info-veerus, mitte lehe laiuses. Veerg on kitsam kui
 * 42rem, seega mõõt tuleb maha ja alumine piir samuti — riba on veeru viimane
 * asi ja topeltjoon jaluse ees näeks välja nagu viga.
 */
.pd-toode__info .pd-jagamine {
  max-width: none;
  margin-top: var(--pd-s-2);
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- Otsing päises (#391) ------------------------------------------------- */

/*
 * Päiseriba on juba täis: logo, menüü, korv, telefon, nupp. Otsing mahub
 * sinna alles laial ekraanil; kitsamal elab ta mobiilimenüü sees, kus on
 * ruumi ja kus ta on täislaiuses.
 */
/*
 * Otsing tuleb päiseribale samal hetkel, kui mobiilimenüü ära kaob (60rem) —
 * muidu jääks vahemik 60–80rem otsinguta: menüünuppu enam ei ole ja
 * päiseribal ei olnud teda veel. Kast tohib kokku tõmbuda, sest riba on
 * seal juba tihe; telefon annab talle ruumi ja tuleb tagasi 80rem juures.
 */
.pd-otsing { position: relative; display: none; }
@media (min-width: 60rem) {
  .pd-otsing { display: block; flex: 1 1 8rem; max-width: 15rem; }
}
.pd-mobiil__panel .pd-otsing { display: block; margin-top: var(--pd-s-4); }

.pd-otsing__vali {
  display: flex; align-items: center; gap: var(--pd-s-2);
  padding: .4rem var(--pd-s-3);
  background: var(--pd-pind-2);
  border: var(--pd-piir);
  border-radius: var(--pd-raadius);
}
.pd-otsing__vali:focus-within { border-color: var(--pd-mark); background: var(--pd-pind); }
.pd-otsing__ikoon { display: grid; place-items: center; color: var(--pd-tint-3); flex: none; }

.pd-otsing input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; background: none; padding: 0;
  font-family: var(--pd-f-tekst);
  font-size: var(--pd-t-sm);
  color: var(--pd-tint);
}
.pd-otsing input[type="search"]:focus { outline: none; }
/* Brauseri oma ristike dubleeriks meie oma tühjendusnuppu. */
.pd-otsing input[type="search"]::-webkit-search-cancel-button { display: none; }

.pd-otsing__tyhista {
  flex: none;
  border: 0; background: none; cursor: pointer;
  color: var(--pd-tint-3);
  font-size: var(--pd-t-lg);
  line-height: 1;
  padding: 0 var(--pd-s-1);
}
.pd-otsing__tyhista:hover { color: var(--pd-tint); }

.pd-otsing__loend {
  list-style: none; margin: 0; padding: var(--pd-s-2);
  position: absolute;
  top: calc(100% + var(--pd-s-2));
  right: 0;
  z-index: var(--pd-z-menuu);
  width: min(24rem, 92vw);
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  background: var(--pd-pind);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  box-shadow: var(--pd-vari-2);
}
/* Mobiilimenüüs on paneel niikuinii lahti — hõljumine tekitaks ainult segadust. */
.pd-mobiil__panel .pd-otsing__loend { position: static; width: auto; box-shadow: none; margin-top: var(--pd-s-2); }

.pd-otsing__rida a {
  display: flex; align-items: center; gap: var(--pd-s-3);
  padding: var(--pd-s-2);
  border-radius: var(--pd-raadius);
  text-decoration: none;
}
.pd-otsing__rida img {
  flex: none; width: 2.5rem; height: 3.125rem;
  object-fit: cover;
  background: var(--pd-pind-2);
  border-radius: var(--pd-raadius);
}
.pd-otsing__sisu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-otsing__nimi {
  font-size: var(--pd-t-sm);
  font-weight: 600;
  color: var(--pd-tint);
  line-height: 1.3;
}
.pd-otsing__meta {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
}
.pd-otsing__rida:hover a,
.pd-otsing__rida.on-aktiivne a { background: var(--pd-mark-hell); }

.pd-otsing__tyhi {
  padding: var(--pd-s-3) var(--pd-s-2);
  font-size: var(--pd-t-sm);
  color: var(--pd-tint-3);
}

.pd-otsing__koik {
  margin-top: var(--pd-s-2);
  padding-top: var(--pd-s-2);
  border-top: var(--pd-piir);
}
.pd-otsing__koik a {
  display: block;
  padding: var(--pd-s-2);
  border-radius: var(--pd-raadius);
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-mark-tekst);
  text-decoration: none;
}
.pd-otsing__koik:hover a,
.pd-otsing__koik.on-aktiivne a { background: var(--pd-mark-hell); }

/* --- Otsingutulemuste leht ----------------------------------------------- */

.pd-otsing-ruhm + .pd-otsing-ruhm { margin-top: var(--pd-s-16); }
.pd-otsing__tegevus { margin-top: var(--pd-s-6); }

.pd-otsing-read {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  max-width: 52rem;
}
.pd-otsing-read li {
  padding-block: var(--pd-s-4);
  border-bottom: var(--pd-piir);
}
.pd-otsing-read li:last-child { border-bottom: 0; }
.pd-otsing-read a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-s-3);
  text-decoration: none;
}
.pd-otsing-read__nimi {
  font-family: var(--pd-f-pealkiri);
  font-size: var(--pd-t-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pd-tint);
}
.pd-otsing-read a:hover .pd-otsing-read__nimi { color: var(--pd-mark-tekst); }
.pd-otsing-read__tyyp {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
}
.pd-otsing-read p { margin-top: var(--pd-s-2); font-size: var(--pd-t-sm); color: var(--pd-tint-2); }

/* --- Väikesed pinnad hoiavad väiksemat raadiust --------------------------- */

/*
 * `--pd-raadius` tõusis 2px pealt 10px peale. Suurtel kaartidel on see õige,
 * aga pisikestel siltidel ja pisipiltidel läheks nurk kogu elemendi peale
 * laiali — need saavad `-s`.
 */
.pd-silt,
.pd-mark-silt,
.pd-filter__nupp,
.pd-toode__pisi,
.pd-otsing__rida img,
.pd-postinav__pilt { border-radius: var(--pd-raadius-s); }

/* Pillid: kõik, mis on nupu või märgise kujuline. */
.pd-mark-silt,
.pd-filter__nupp,
.pd-jaga,
.pd-vihje__nupp,
.pd-korv-link { border-radius: var(--pd-raadius-p); }

/* --- Tootelehe valikud (#435) --------------------------------------------- */

.pd-toote-valikud {
  display: flex; flex-direction: column; gap: var(--pd-s-3);
  padding: var(--pd-s-4);
  background: var(--pd-teine-hell);
  border: 1px solid rgba(16, 161, 157, .3);
  border-radius: var(--pd-raadius);
}
.pd-toote-valikud__rida {
  display: grid;
  gap: var(--pd-s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) {
  .pd-toote-valikud__rida { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-toote-valikud__vali--lai { grid-column: 1 / -1; }
}
.pd-toote-valikud__vali { display: flex; flex-direction: column; gap: var(--pd-s-1); }
.pd-toote-valikud__vali > span {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-2);
}
.pd-toote-valikud__vali :is(select, input) {
  width: 100%;
  padding: .5rem .6rem;
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius-s);
  background: var(--pd-pind);
  font-family: var(--pd-f-tekst);
  font-size: var(--pd-t-sm);
  color: var(--pd-tint);
}
.pd-toote-valikud__kiibid { display: flex; flex-wrap: wrap; gap: var(--pd-s-2); }
.pd-toote-valikud__kiibid:empty { display: none; }