/* ==========================================================================
   LILLA - kategoorialehe teema (variant 1 "Lilla klassika")
   ==========================================================================
   Tehtud soe-theme.css pohjal: struktuur, moodud ja kaikide elementide
   asukohad on TAPSELT samad, vahetatud on ainult varvipalett ja fototaust.

     - palett jargib avalehte: lilla #5B0E8A, tume lilla #46076C
     - tootefoto taust on lame #F4F4F4 (varem soe radiaalgradient)
     - foto peal ei ole enam gradientloori (.pc-photo::after on valjas)

   Skoop on endiselt `body.soe`, sest klassi paneb peale soe-theme.js -
   nii ei ole vaja JS-i muuta. Vahetamiseks piisab <link> reast:

     <link rel="stylesheet" href="../lilla-theme.css">   (lilla)
     <link rel="stylesheet" href="../soe-theme.css">     (soe/terrakota)

   Laadida styles.css JAREL.
   ========================================================================== */

body.soe{
  --paper:#F6F3FA;
  --card:#FFFFFF;
  --ink:#1F1030;
  --mut:#6B5B7A;
  --line:#EDE5F4;
  --line-2:#DCCFE9;
  --acc:#5B0E8A;
  --acc-2:#46076C;
  --green:#2F7D4F;
  --photo-bg:#F4F4F4;
  --soe-shadow:0 14px 32px -22px rgba(45,15,70,.55);
}

/* -------------------------------------------------- lehe taust ja päis --- */
/* Lehe taust jääb saidi omaks (valge) - teema puudutab ainult tootenimekirja
   sisu, mitte headerit ega jalust. */
body.soe .page-header{background:#F1EAF8!important;border-bottom:1px solid var(--line)}
body.soe .page-header h1{
  font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;color:var(--ink)!important;
}
body.soe .breadcrumbs,body.soe .breadcrumbs a{color:var(--mut)!important}
body.soe .breadcrumbs a:hover{color:var(--acc)!important}
body.soe .crumb-current{color:var(--ink)!important}
body.soe .products-layout{background:#FFFFFF!important}

/* -------------------------------------------------- järjesta + vaade ----- */
body.soe .soe-controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
body.soe .sort-by{display:flex;flex-direction:column;gap:6px;margin:0!important}
body.soe .soe-ctl-lbl{
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
}
body.soe .sort-by select{
  appearance:none;-webkit-appearance:none;
  background-color:var(--card)!important;border:1.5px solid var(--line-2)!important;
  border-radius:9px!important;padding:10px 38px 10px 14px!important;min-height:42px;
  font-size:.88rem;font-weight:600;color:var(--ink)!important;box-shadow:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6759' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
body.soe .sort-by select:hover{border-color:var(--acc)!important}
body.soe .soe-view{display:flex;flex-direction:column;gap:6px}
body.soe .soe-toggle{
  display:flex;background:var(--card);border:1.5px solid var(--line-2);border-radius:9px;padding:3px;gap:3px;
}
body.soe .soe-vbtn{
  display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:6px;
  padding:8px 13px;font:inherit;font-size:.82rem;font-weight:700;color:var(--mut);cursor:pointer;
  transition:.18s;min-height:36px;
}
body.soe .soe-vbtn svg{width:16px;height:16px;flex:0 0 auto}
body.soe .soe-vbtn:hover{color:var(--acc)}
body.soe .soe-vbtn.is-on{background:var(--acc);color:#FFFFFF}

/* -------------------------------------------------- filtrite külgriba ---- */
body.soe .sidebar-filters{
  background:var(--card)!important;border:1px solid var(--line)!important;
  box-shadow:var(--soe-shadow)!important;border-radius:14px!important;
}
body.soe .sidebar-filters h3{color:var(--ink)!important;font-family:'Fraunces',Georgia,serif;font-weight:600}
body.soe .checkbox-label{color:var(--ink)!important}
body.soe .checkbox-label:hover{color:var(--acc)!important}
body.soe .sidebar-filters input[type="checkbox"]{accent-color:var(--acc)}
body.soe .slider{accent-color:var(--acc)}
body.soe .price-values{color:var(--mut)!important}
body.soe .products-header{background:transparent!important}
body.soe .mobile-filter-btn{
  background:var(--card)!important;border:1.5px solid var(--line-2)!important;color:var(--ink)!important;
  border-radius:9px!important;box-shadow:none!important;
}

/* ==========================================================================
   TOOTEKAART
   ========================================================================== */

/* Container query'd kuuluvad vana kaardi juurde - lülitame need välja, sest
   siin vastutab paigutuse eest ainult ruudustik ja meediapäringud. */
body.soe .pcard-wrap .pcard{
  container-type:normal;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  box-shadow:var(--soe-shadow);
  color:var(--ink);
  transition:box-shadow .25s ease;
}
body.soe .pcard-wrap .pcard:hover{box-shadow:0 18px 38px -20px rgba(45,15,70,.6)}
body.soe .products-grid.three-cols{gap:22px}

/* ---- foto ---- */
body.soe .pcard-wrap .pc-photo,
body.soe .pcard-wrap .pc-photo.product-card-image{
  aspect-ratio:16/11;min-height:0;max-height:none;border-radius:0;padding:26px 20px;
  background:var(--photo-bg);
}
body.soe .pcard-wrap .pc-photo::before{display:none}
body.soe .pcard-wrap .pc-photo::after{display:none}   /* lame taust - loori pole */
body.soe .pcard-wrap .pc-photo img,
body.soe .pcard-wrap .pc-photo .main-card-img{
  width:auto;max-width:100%;max-height:100%;margin-top:0;
  filter:drop-shadow(0 16px 22px rgba(40,35,55,.3));
}
body.soe .pcard-wrap .pc-photo-link{width:auto;max-width:90%;max-height:100%;margin-top:0}
body.soe .pcard-wrap .pcard:hover .pc-photo img{transform:translateY(-3px) scale(1.015)}

/* ---- hinnasilt: vasak ülanurk ---- */
body.soe .pcard-wrap .pc-price{
  top:16px;left:16px;right:auto;padding:9px 14px;border-radius:9px;
  background:var(--acc);box-shadow:none;text-align:left;line-height:1.25;
}
/* 24.08: sõna "Alates" on hinnasildilt eemaldatud - hind räägib enda eest. */
body.soe .pcard-wrap .pc-price::before{content:none}
body.soe .pcard-wrap .pc-price__num,
body.soe .pcard-wrap .pc-price .product-price-large{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:1.35rem;font-weight:800;letter-spacing:-.01em;text-shadow:none;margin:1px 0;
}
body.soe .pcard-wrap .pc-price__vat{
  font-size:.62rem;font-weight:500;letter-spacing:.02em;text-transform:none;
  color:rgba(255,255,255,.9);margin-top:1px;
}

/* ---- järelmaks ja võrdlus pildi alaservas ---- */
body.soe .pcard-wrap .pc-finance,
body.soe .pcard-wrap .pc-finance.product-finance{
  right:16px;bottom:12px;font-size:.72rem;color:#4E4A57;
  text-shadow:0 1px 2px rgba(255,255,255,.55);
}
body.soe .pcard-wrap .pc-finance b{color:var(--ink)}
body.soe .products-grid .product-card.pcard-wrap .compare-icon-btn{
  left:14px!important;right:auto!important;bottom:10px!important;top:auto!important;
  width:30px!important;height:30px!important;border-radius:7px!important;
  color:#4E4A57!important;background:rgba(255,255,255,.62)!important;border:0!important;
  box-shadow:0 1px 4px rgba(40,35,55,.14)!important;
}
body.soe .products-grid .product-card.pcard-wrap .compare-icon-btn:hover{
  color:var(--acc-2)!important;background:rgba(255,255,255,.92)!important;
}
body.soe .products-grid .product-card.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
body.soe .products-grid .product-card.pcard-wrap .compare-icon-btn.active{
  background:var(--acc)!important;color:#FFFFFF!important;box-shadow:none!important;
}

/* ---- alumine osa ---- */
body.soe .pcard-wrap .pc-panel{
  margin-top:0;padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;
}
body.soe .pcard-wrap .pc-main{display:flex;flex-direction:column;gap:12px}

/* logo + värvivalik ühel real */
body.soe .soe-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.soe .pcard-wrap .pc-brand{margin:0;letter-spacing:normal}
body.soe .soe-logo{
  max-height:24px;max-width:112px;width:auto;height:auto;
  object-fit:contain;object-position:left center;display:block;
}
body.soe .pcard-wrap .pc-brand.soe-brand-text{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
}

body.soe .pcard-wrap .pc-name{
  font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);line-height:1.15;
  /* 28.08: veidi suurem vahe pealkirja järel (.pc-main gap 12px + 6px = 18px). */
  margin:0 0 6px;
}
body.soe .pcard-wrap .pc-name a{color:inherit}
body.soe .pcard-wrap .pc-name a:hover{color:var(--acc)}
/* Tootja nimi on nüüd nime sees, seega mõni pealkiri on pikk. Tasakaalustatud
   reamurdmine + väiksem kiri hoiab kaardi kolmerealiseks minemast.
   Klassi .soe-name--long paneb peale soe-theme.js (>26 tähemärki). */
body.soe .pcard-wrap .pc-name{text-wrap:balance}
body.soe .pcard-wrap .pc-name.soe-name--long{font-size:1.2rem;line-height:1.2}

/* --------------------------------------------------------------------------
   24.08.2026 - pealkirjaploki uus järjekord (naidis-tootekaart-zt.html)

       Õhksoojuspump              .soe-sub   (tootenime KOHAL, ilma tootjata)
       Mitsubishi Heavy ZT        .pc-name   (tootja nimi on nime sees)
       VALI VÕIMSUSKLASS   [A++]  .soe-optrow (silt + energiaklassi sakk)

   Elemendid tõstab paika soe-theme.js; siin on ainult mõõdud.
   -------------------------------------------------------------------------- */
body.soe .soe-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 -8px}
body.soe .soe-kind{font-size:.82rem;color:var(--mut)}

/* Silt ja energiaklassi sakk ühel real; sakk jääb paremale serva. */
body.soe .soe-optrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 -4px;
}
body.soe .soe-optrow .pc-opt-label{margin:0}
body.soe .soe-optrow .pc-tab{margin-left:auto}
body.soe .pcard-wrap .pc-tab{
  /* 24.08: sakk vertikaalselt madalam - polster 4px -> 2px, rea kõrgus 1. */
  position:static;padding:2px 10px;line-height:1.25;border-radius:5px;background:var(--green);
  color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:none;
  gap:0;white-space:nowrap;flex:0 0 auto;
}
body.soe .pcard-wrap .pc-tab::before,
body.soe .pcard-wrap .pc-tab::after{display:none}
body.soe .pcard-wrap .pc-tab .pc-tab__lbl{display:none}
body.soe .pcard-wrap .pc-tab b{color:#fff;font-size:.72rem;font-weight:800;letter-spacing:0}

/* ---- värvivalik ---- */
body.soe .pcard-wrap .pc-colorbox{display:flex;align-items:center;gap:9px;margin:0}
body.soe .pcard-wrap .pc-color-name{
  font-size:.72rem;font-weight:700;color:var(--mut);margin:0;white-space:nowrap;
}
body.soe .pcard-wrap .pc-colors,
body.soe .pcard-wrap .pc-colors.cat-color-selector{margin:0;gap:7px}
body.soe .pcard-wrap .pc-swatch,
body.soe .pcard-wrap .cat-color-btn.pc-swatch{
  width:22px!important;height:22px!important;
  border:2px solid var(--card)!important;
  box-shadow:0 0 0 1px var(--line-2),0 2px 5px rgba(40,35,55,.18)!important;
}
body.soe .pcard-wrap .pc-swatch.active{
  transform:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc),0 2px 6px rgba(40,35,55,.24)!important;
}

/* ---- võimsusklassid ---- */
body.soe .pcard-wrap .pc-opt-label{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  /* 24.08: heledam - sama toon nagu specide vahemikul "(0,9 - 4,6 kW)". */
  color:var(--mut);margin:0 0 -4px;
}
body.soe .pcard-wrap .pc-classes,
body.soe .pcard-wrap .pc-classes.variant-selector{gap:8px;margin:0}
body.soe .pcard-wrap .pc-classes .variant-btn{
  flex:1 1 0!important;max-width:none!important;min-width:64px!important;
  background:transparent!important;border:1.5px solid var(--line-2)!important;
  border-radius:9px!important;padding:9px 5px 8px!important;box-shadow:none!important;
  transform:none!important;
}
body.soe .pcard-wrap .pc-classes .variant-btn .var-title{
  font-size:.9rem!important;font-weight:700!important;color:var(--ink)!important;
}
body.soe .pcard-wrap .pc-classes .variant-btn .var-power{
  font-size:.66rem!important;font-weight:600!important;color:var(--mut)!important;
}
body.soe .pcard-wrap .pc-classes .variant-btn:hover{border-color:var(--acc)!important;background:transparent!important}
body.soe .pcard-wrap .pc-classes .variant-btn.active{
  background:transparent!important;border-color:var(--acc)!important;box-shadow:none!important;
}
body.soe .pcard-wrap .pc-classes .variant-btn.active .var-title,
body.soe .pcard-wrap .pc-classes .variant-btn.active .var-power{color:var(--acc)!important}

/* ---- tehnilised andmed ---- */
body.soe .pcard-wrap .pc-specs{
  border-top:1px solid var(--line);padding-top:2px;margin-top:0;gap:0;
}
body.soe .pcard-wrap .pc-spec{padding:10px 0;border-bottom:1px dotted var(--line)}
body.soe .pcard-wrap .pc-spec:last-child{border-bottom:0}
body.soe .pcard-wrap .pc-spec__t{
  font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);
}
body.soe .pcard-wrap .pc-spec__v{font-size:.88rem;font-weight:700;color:var(--ink)}
body.soe .pcard-wrap .pc-spec__v .rng{font-size:.82rem;font-weight:600;color:var(--mut)}

/* ---- nupud: hover nagu tootekaardil, aga soojas paletis ------------------
   "Tutvu tootega": hele täide pühib clip-path ringina vasakust ülanurgast,
   tekst läheb terrakotaks ja ääris tuleb ringiga koos kaasa.
   "Saada päring": muutub ainult õhuke ääris, mis pühib paremast ülanurgast. */
body.soe .pcard-wrap .pc-actions{
  display:flex!important;flex-direction:column;gap:10px;margin-top:auto;
  grid-template-columns:none;align-self:stretch;   /* vanas kaardis oli align-self:end */
}
body.soe .pcard-wrap .pc-btn{
  border-radius:9px!important;padding:14px 12px!important;
  font-size:.84rem!important;font-weight:800!important;letter-spacing:.05em!important;
  text-transform:uppercase!important;white-space:normal!important;
  position:relative;overflow:hidden;z-index:1;border:0!important;
}
body.soe .pcard-wrap .pc-btn--primary,
body.soe .pcard-wrap .pc-btn.btn-order{
  background:var(--acc)!important;color:#FFFFFF!important;box-shadow:none!important;
  transition:color .3s ease-out,box-shadow .3s ease-out,transform .22s cubic-bezier(.4,0,.2,1);
}
body.soe .pcard-wrap .pc-btn--primary::before,
body.soe .pcard-wrap .pc-btn.btn-order::before{
  content:"";position:absolute;inset:0;background:var(--card);border:1px solid var(--acc);
  border-radius:inherit;z-index:-1;clip-path:circle(0% at 0% 0%);
  transition:clip-path .35s ease-out;pointer-events:none;
}
body.soe .pcard-wrap .pc-btn--primary:hover,
body.soe .pcard-wrap .pc-btn.btn-order:hover,
body.soe .pcard-wrap .pc-btn.btn-order:focus-visible{
  color:var(--acc)!important;transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(70,12,110,.6)!important;
}
body.soe .pcard-wrap .pc-btn--primary:hover::before,
body.soe .pcard-wrap .pc-btn.btn-order:hover::before,
body.soe .pcard-wrap .pc-btn.btn-order:focus-visible::before{clip-path:circle(150% at 0% 0%)}

body.soe .pcard-wrap .pc-btn--ghost,
body.soe .pcard-wrap .pc-btn.btn-ask-info{
  background:var(--card)!important;color:var(--ink)!important;
  box-shadow:inset 0 0 0 1.5px var(--line-2)!important;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
body.soe .pcard-wrap .pc-btn--ghost::after,
body.soe .pcard-wrap .pc-btn.btn-ask-info::after{
  content:"";position:absolute;inset:0;border:1.5px solid var(--acc-2);border-radius:inherit;
  clip-path:circle(0% at 100% 0%);transition:clip-path .35s ease-out;pointer-events:none;z-index:2;
}
body.soe .pcard-wrap .pc-btn--ghost:hover,
body.soe .pcard-wrap .pc-btn.btn-ask-info:hover{
  color:var(--ink)!important;background:var(--card)!important;transform:translateY(-2px);
}
body.soe .pcard-wrap .pc-btn--ghost:hover::after,
body.soe .pcard-wrap .pc-btn.btn-ask-info:hover::after,
body.soe .pcard-wrap .pc-btn.btn-ask-info:focus-visible::after{clip-path:circle(150% at 100% 0%)}

/* ---- võrdlusriba ---- */
body.soe .compare-bar{background:var(--ink)!important;color:#FFFFFF!important}
body.soe .compare-bar .btn,body.soe .compare-bar button{border-radius:999px}

/* ==========================================================================
   REAVAADE
   ========================================================================== */
body.soe.soe-rows .products-grid.three-cols{
  display:flex!important;flex-direction:column;gap:14px;
}
body.soe.soe-rows .pcard-wrap .pcard{
  display:grid;grid-template-columns:250px minmax(0,1fr) 250px;grid-template-rows:1fr auto;
  box-shadow:none;
}
body.soe.soe-rows .pcard-wrap .pcard:hover{box-shadow:var(--soe-shadow)}
body.soe.soe-rows .pcard-wrap .pc-photo{grid-column:1;grid-row:1/3;aspect-ratio:auto;padding:22px 18px}
body.soe.soe-rows .pcard-wrap .pc-photo img{max-height:150px}
body.soe.soe-rows .pcard-wrap .pc-panel{display:contents}
body.soe.soe-rows .pcard-wrap .pc-main{grid-column:2;grid-row:1;padding:18px 22px 0;gap:10px}
body.soe.soe-rows .pcard-wrap .pc-div{display:none}
body.soe.soe-rows .pcard-wrap .pc-name{font-size:1.32rem}

/* sildid ühte ritta, väärtused teise - nii joonduvad ka mitmerealised sildid */
body.soe.soe-rows .pcard-wrap .pc-specs{
  grid-column:2;grid-row:2;margin:0 22px 18px;align-self:end;
  display:grid;grid-template-rows:auto auto;grid-auto-flow:column;
  /* Neli näitajat, aga mitte võrdselt: küttevõimsuse veerg on laiem, et
     nimivõimsus ja vahemik mahuksid ÜHELE reale ("2,7 kW (0,9 - 7,6 kW)"). */
  grid-template-columns:1.5fr 1fr .75fr 1.15fr;
  grid-auto-columns:minmax(0,1fr);gap:3px 16px;
  border-top:1px solid var(--line);padding-top:11px;
}
body.soe.soe-rows .pcard-wrap .pc-spec{display:contents}
body.soe.soe-rows .pcard-wrap .pc-spec__t{font-size:.64rem;letter-spacing:.06em;line-height:1.35}
body.soe.soe-rows .pcard-wrap .pc-spec__v{
  text-align:left;margin-left:0;white-space:normal;align-self:start;font-size:.86rem;
}
/* Vahemik jääb nimivõimsusega samale reale, mitte selle alla. */
body.soe.soe-rows .pcard-wrap .pc-spec__v .rng{display:inline;font-size:.8rem;white-space:nowrap}
body.soe.soe-rows .pcard-wrap .pc-spec__v{white-space:nowrap}

body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn{
  flex:0 0 auto!important;min-width:0!important;
  flex-direction:row!important;align-items:baseline!important;gap:6px;padding:7px 12px!important;
}
body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn .var-title{font-size:.86rem!important}
body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn .var-power{font-size:.68rem!important}

/* ost paremas veerus - hind ja järelmaks tõstab sinna soe-theme.js */
body.soe.soe-rows .pcard-wrap .pc-actions{
  grid-column:3;grid-row:1/3;background:#F8F5FC;border-left:1px solid var(--line);
  padding:18px 20px;justify-content:space-between;gap:16px;
  /* Ruudustikuvaates lükkab `margin-top:auto` nupud kaardi alla. Reavaates
     on .pc-actions ISE ruudustiku lahter: auto-veeris tühistab siin
     `align-self:stretch` mõju, kast tõmbub sisu kõrgusesse ja lilla taust
     algas alles kuskilt kaardi keskelt. Reavaates veerist ei ole vaja -
     taust peab ulatuma kaardi ülaservast alaservani nagu fotol. */
  margin-top:0;align-self:stretch;height:100%;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price{
  position:static;background:none;padding:0;border-radius:0;box-shadow:none;text-align:left;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price__num,
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price .product-price-large{
  color:var(--ink)!important;font-size:1.7rem;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price__vat{color:var(--mut)!important}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-finance{
  position:static;font-size:.72rem;color:var(--mut);text-shadow:none;margin-top:-12px;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-finance b{color:var(--mut);font-weight:600}
body.soe.soe-rows .pcard-wrap .pc-actions .soe-buy-btns{display:flex;flex-direction:column;gap:10px}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-btn{padding:12px 10px!important;font-size:.78rem!important}

/* ==========================================================================
   MEEDIAPÄRINGUD
   ========================================================================== */
@media (max-width:1100px){
  body.soe.soe-rows .pcard-wrap .pcard{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto auto}
  body.soe.soe-rows .pcard-wrap .pc-photo{grid-column:1;grid-row:1/3}
  body.soe.soe-rows .pcard-wrap .pc-main{grid-column:2;grid-row:1}
  body.soe.soe-rows .pcard-wrap .pc-specs{
    grid-column:2;grid-row:2;grid-template-rows:auto;grid-auto-flow:row;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;
  }
  body.soe.soe-rows .pcard-wrap .pc-spec{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border-bottom:0;
  }
  body.soe.soe-rows .pcard-wrap .pc-actions{
    grid-column:1/-1;grid-row:3;border-left:0;border-top:1px solid var(--line);
    flex-direction:row!important;align-items:center;flex-wrap:wrap;gap:12px 18px;
  }
  body.soe.soe-rows .pcard-wrap .pc-actions .pc-price{flex:1 1 180px}
  body.soe.soe-rows .pcard-wrap .pc-actions .pc-finance{flex:1 1 100%;order:3;margin-top:-8px}
  body.soe.soe-rows .pcard-wrap .pc-actions .soe-buy-btns{flex:1 1 320px;flex-direction:row;order:4}
  body.soe.soe-rows .pcard-wrap .pc-actions .soe-buy-btns .pc-btn{flex:1}
}

@media (max-width:600px){
  body.soe .soe-controls{width:100%;gap:10px}
  body.soe .sort-by,body.soe .soe-view{flex:1 1 100%}
  body.soe .sort-by select,body.soe .soe-toggle{width:100%}
  /* AUDIT 25.08.2026 - MOBIILI MENÜÜNUPP OLI KÄTTESAAMATU.
     Ülemine rida andis width:100% ka sellele <select id="sort-select">-ile,
     mille common.js peidab ära (.sort-select-hidden = 1x1px, clip-path)
     pärast oma .sort-control vidina ehitamist. Peidetud select on
     position:absolute, seega 360px lai element venitas dokumendi 440px-ni:
     #menu-toggle sattus x=384..428 ehk täiesti ekraanist välja, ja kuna
     html/body on overflow-x:clip, ei saanud sinna ka kerida. Menüüsse EI
     OLNUD ühtegi teed. Taastame peidu - nähtav vidin on .sort-control,
     mitte see select, seega kujundus ei muutu piksligi. */
  body.soe .sort-by select.sort-select-hidden{
    width:1px;height:1px;min-height:0;padding:0;border:0;
  }
  body.soe .soe-vbtn{flex:1;justify-content:center}
  body.soe .pcard-wrap .pc-panel{padding:16px}
  body.soe .pcard-wrap .pc-name{font-size:1.35rem}

  /* Reakaart mobiilis: vasakul väike foto, paremal nimi ja võimsusklassid,
     specid ja ost kogu laiuses all. Värvivalik läheb pildi vasakusse
     alanurka (selle tõstab kohale soe-theme.js). */
  body.soe.soe-rows .pcard-wrap .pcard{
    grid-template-columns:126px minmax(0,1fr);grid-template-rows:auto auto auto;
  }
  body.soe.soe-rows .pcard-wrap .pc-photo{grid-column:1;grid-row:1;padding:10px;min-height:126px}
  body.soe.soe-rows .pcard-wrap .pc-photo img{max-height:104px}
  body.soe.soe-rows .pcard-wrap .pc-photo::after{display:none}
  body.soe.soe-rows .pcard-wrap .pc-photo .pc-price{display:none}
  body.soe.soe-rows .products-grid .product-card.pcard-wrap .compare-icon-btn{
    left:auto!important;right:5px!important;top:5px!important;bottom:auto!important;
    width:26px!important;height:26px!important;
  }
  body.soe.soe-rows .pcard-wrap .pc-photo > .pc-colorbox{
    position:absolute;left:8px;bottom:8px;z-index:4;gap:6px;padding:4px 6px;border-radius:999px;
    background:rgba(255,255,255,.82);box-shadow:0 1px 5px rgba(40,35,55,.18);
  }
  body.soe.soe-rows .pcard-wrap .pc-photo > .pc-colorbox .pc-color-name{display:none}
  body.soe.soe-rows .pcard-wrap .pc-photo > .pc-colorbox .pc-swatch{
    width:15px!important;height:15px!important;border-width:1.5px!important;
  }
  body.soe.soe-rows .pcard-wrap .pc-main{grid-column:2;grid-row:1;padding:12px 12px 12px 14px;gap:8px}
  body.soe.soe-rows .pcard-wrap .pc-name{font-size:1.12rem}
  body.soe.soe-rows .soe-logo{max-height:18px;max-width:84px}
  body.soe.soe-rows .soe-kind{display:none}
  body.soe.soe-rows .soe-sub{margin-top:-2px}
  body.soe.soe-rows .soe-sub:has(.soe-kind:only-child){display:none}
  body.soe.soe-rows .pcard-wrap .pc-tab{margin-left:auto;font-size:.62rem;padding:3px 7px}
  body.soe.soe-rows .pcard-wrap .pc-opt-label{display:none}
  /* Sakk on siin logo kõrval ja silt peidus, seega rida ise jääks tühjaks -
     ilma selleta jätaks ta .pc-main gap'i võrra tühja vahe. */
  body.soe.soe-rows .soe-optrow{display:none}

  /* specid ühes veerus: silt vasakul, väärtus paremal */
  body.soe.soe-rows .pcard-wrap .pc-specs{
    grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;
    margin:0;padding:4px 14px 10px;border-top:1px solid var(--line);
  }
  body.soe.soe-rows .pcard-wrap .pc-spec{
    display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:10px;padding:8px 0;border-bottom:1px dotted var(--line);
  }
  body.soe.soe-rows .pcard-wrap .pc-spec:last-child{border-bottom:0}
  body.soe.soe-rows .pcard-wrap .pc-spec__t{font-size:.68rem}
  body.soe.soe-rows .pcard-wrap .pc-spec__v{text-align:right;font-size:.85rem;white-space:nowrap}
  body.soe.soe-rows .pcard-wrap .pc-spec__v .rng{display:block;font-size:.79rem}
  body.soe.soe-rows .pcard-wrap .pc-actions{grid-column:1/-1;grid-row:3;padding:12px 14px 14px;gap:10px}
  body.soe.soe-rows .pcard-wrap .pc-actions .pc-price{flex:1 1 100%}
  body.soe.soe-rows .pcard-wrap .pc-actions .soe-buy-btns{flex:1 1 100%;flex-direction:column}
}

@media (max-width:370px){
  body.soe.soe-rows .pcard-wrap .pcard{grid-template-columns:1fr}
  body.soe.soe-rows .pcard-wrap .pc-photo{grid-column:1;aspect-ratio:16/9;min-height:0;padding:16px}
  body.soe.soe-rows .pcard-wrap .pc-photo img{max-height:110px}
  body.soe.soe-rows .pcard-wrap .pc-main{grid-column:1}
}

@media (prefers-reduced-motion: reduce){
  body.soe *,body.soe *::before,body.soe *::after{transition-duration:.01ms!important}
}

/* ==========================================================================
   OLEMASOLEVA KAARDI ERIJUHTUDE NEUTRALISEERIMINE
   ==========================================================================
   Need reeglid ei kustuta midagi - nad lihtsalt tühistavad soojas teemas
   kaks vana kaardi mehhanismi, mis siin paigutust segaksid.
   ========================================================================== */

/* 1. Liuguv lilla tooniriba võimsusnuppude taga. Soojas kaardis on aktiivne
      klass ääristatud, mitte täidetud, seega riba ei ole vaja.
      NB: skript loob riba ikka - me ainult peidame selle. */
body.soe .pcard-wrap .pc-classes .pc-class-ind{display:none!important}
body.soe .pcard-wrap .pc-classes.has-ind .variant-btn.active{
  background:transparent!important;border-color:var(--acc)!important;box-shadow:none!important;
}
body.soe .pcard-wrap .pc-classes.has-ind .variant-btn.active .var-title,
body.soe .pcard-wrap .pc-classes.has-ind .variant-btn.active .var-power{color:var(--acc)!important}

/* 2. .pc-layout-2 paneb .pc-main ruudustikku ja värvivaliku püsti tulpa
      (vana kaardi paremas servas). Soojas kaardis istub värvivalik logo
      kõrval, seega taastame tavalise voo. */
body.soe .pcard-wrap.pc-layout-2 .pc-main{display:flex;grid-template-columns:none;column-gap:0}
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  height:auto;min-height:0;gap:9px;line-height:normal;
}
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .pc-color-name{
  font-size:.72rem;font-weight:700;color:var(--mut);
}
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors,
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors.cat-color-selector{
  flex-direction:row;gap:7px;align-self:auto;
}
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .pc-swatch,
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .cat-color-btn.pc-swatch{
  width:22px!important;height:22px!important;
}
body.soe.soe-rows .pcard-wrap.pc-layout-2 .pc-main{flex-direction:column}

/* 3. Ostunuppude kast (loob soe-theme.js), et hind saaks reavaates
      nende kohale tõusta. */
body.soe .soe-buy-btns{display:flex;flex-direction:column;gap:10px;width:100%}

/* 4. Külgriba loendurid soojaks */
body.soe .sidebar-filters .checkbox-label span:last-child,
body.soe .filter-count,
body.soe .sidebar-filters .count{background:#F0E9F7!important;color:var(--mut)!important}

@media (max-width:600px){
  body.soe.soe-rows .pcard-wrap.pc-layout-2 .pc-photo > .pc-colorbox .pc-swatch,
  body.soe.soe-rows .pcard-wrap.pc-layout-2 .pc-photo > .pc-colorbox .cat-color-btn.pc-swatch{
    width:15px!important;height:15px!important;
  }
}

/* 5. Tootenimel on lillа gradienttäide (background-clip:text). Soojas teemas
      on nimi ühevärviline, seega täide tuleb korralikult maha võtta -
      ainult `color` ei aita, sest teksti värvi annab -webkit-text-fill-color. */
body.soe .pcard-wrap .pc-name a,
body.soe .pcard-wrap .pc-name .card-title-link{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--ink)!important;
}
body.soe .pcard-wrap .pc-name a:hover,
body.soe .pcard-wrap .pc-name .card-title-link:hover{color:var(--acc)!important}

/* 6. Värvi nimi oli .pc-layout-2 kaardil suurtähtedes valikusildi moodi -
      soojas kaardis on ta tavaline väike silt logo kõrval. */
body.soe .pcard-wrap.pc-layout-2 .pc-colorbox .pc-color-name{
  text-transform:none;letter-spacing:normal;line-height:1.3;
}

/* 7. Reavaates on spetsisilt oma veerus ja tohib murduda kahele reale.
      Vanas kaardis oli ta ühel real ellipsiga (.pc-spec__t nowrap+ellipsis),
      mis lõikas siin "GARANTEERITUD KÜTMINE" pooleli. */
body.soe.soe-rows .pcard-wrap .pc-spec__t{
  white-space:normal;overflow:visible;text-overflow:clip;
}

/* 8. Mobiili reavaates on sisuveerg ~190 px lai. Kaks võimsusnuppu kõrvuti
      mahuvad ainult tihedama polstri ja väiksema kirjaga - muidu läheb iga
      nupp omaette reale ja kaart venib pikaks. */
@media (max-width:600px){
  body.soe.soe-rows .pcard-wrap .pc-classes,
  body.soe.soe-rows .pcard-wrap .pc-classes.variant-selector{gap:6px}
  body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn{padding:6px 9px!important;gap:5px}
  body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn .var-title{font-size:.8rem!important}
  body.soe.soe-rows .pcard-wrap .pc-classes .variant-btn .var-power{font-size:.64rem!important}
}


/* 9. Järelmaksurida ostuveerus: pildi peal oli tal varjund ja taust, siin
      on ta tavaline tekstirida. */
body.soe.soe-rows .pcard-wrap .pc-actions .pc-finance,
body.soe.soe-rows .pcard-wrap .pc-actions .pc-finance.product-finance{
  background:none!important;border-radius:0!important;padding:0!important;
  box-shadow:none!important;text-shadow:none!important;
}

/* 10. Mobiili reavaates istub energiaklass logo kõrval (tõstab soe-theme.js). */
@media (max-width:600px){
  body.soe.soe-rows .soe-top{gap:8px 10px}
  body.soe.soe-rows .soe-top .pc-tab{margin-left:auto}
}

/* ==========================================================================
   11. "Toodete vaade" sorteerimise kõrvale
   ==========================================================================
   .page-header .sort-by on absoluutselt paigutatud (right:24px; bottom:0)
   .page-header .container sisse. Selleks et vaatelüliti seisaks tema kõrval,
   võtab absoluutse koha üle ümbris .soe-controls ja .sort-by ise läheb
   tagasi tavavoogu.
   ========================================================================== */
body.soe .page-header .soe-controls{
  position:absolute;right:24px;bottom:0;z-index:2;
  display:flex;align-items:flex-end;gap:16px;
}
body.soe .page-header .soe-controls .sort-by{position:static;right:auto;bottom:auto;transform:none}

@media (max-width:900px){
  body.soe .page-header .soe-controls{position:static;margin-top:16px;justify-content:flex-end}
}
@media (max-width:600px){
  body.soe .page-header .soe-controls{
    flex-direction:column;align-items:stretch;gap:12px;margin-top:14px;
  }
  body.soe .page-header .soe-controls .sort-by{display:block;width:100%}
}

/* 12. Sorteerimisvidin (.sort-control ehitab js/common.js) soojaks. */
body.soe .sort-control__label{color:var(--mut)!important}
body.soe .sort-control__value{color:var(--acc)!important}
body.soe .sort-control__current{color:var(--acc)!important}
body.soe .sort-control__current:hover .sort-control__value{color:var(--acc-2)!important}
body.soe .sort-control__caret{border-top-color:var(--acc)!important;color:var(--acc)!important}
body.soe .sort-control__menu{
  background:var(--card)!important;border:1px solid var(--line-2)!important;
  box-shadow:0 14px 32px -18px rgba(45,15,70,.7)!important;border-radius:10px!important;
}
body.soe .sort-control__option{color:var(--ink)!important}
body.soe .sort-control__option:hover,
body.soe .sort-control__option.is-active,
body.soe .sort-control__option[aria-selected="true"]{
  background:#F3ECFA!important;color:var(--acc)!important;
}

/* 13. Hinnaliugur soojaks (nupp oli lilla, riba jahedalt hall). */
body.soe .slider{background:#E4D9F0}
body.soe .slider::-webkit-slider-thumb{
  background:var(--acc);border-color:var(--card);box-shadow:0 2px 6px rgba(40,35,55,.28);
}
body.soe .slider::-moz-range-thumb{
  background:var(--acc);border-color:var(--card);box-shadow:0 2px 6px rgba(40,35,55,.28);
}
body.soe .price-range .track-fill,
body.soe .price-slider .track-fill{background:var(--acc)!important}


/* ==========================================================================
   14. Mobiilis vaate valikut ei ole
   ==========================================================================
   Telefonis on reavaade ja tavavaade nagunii peaaegu sama kõrged, seega
   lüliti ainult võtaks ekraaniruumi. soe-theme.js hoiab mobiilis alati
   tavavaadet (eelistus jääb meelde ja tuleb tagasi laiemal ekraanil).
   ========================================================================== */
@media (max-width:600px){
  body.soe .soe-view{display:none}
  body.soe .page-header .soe-controls{flex-direction:row;align-items:flex-end}
}

/* ==========================================================================
   15. Modaalaknad (tellimus, päring, võrdlus)
   ==========================================================================
   Vana aken oli ääristeta valge kast lillal taustal. Soojas teemas on tal
   pehme kreemjas korpus, õhuke soe ääris ja terrakota rõhuvärv.
   ========================================================================== */
body.soe .modal-overlay{background:rgba(45,15,70,.52)!important;backdrop-filter:blur(3px)}
body.soe .modal-content{
  background-color:var(--card)!important;
  border:1px solid var(--line-2)!important;
  border-radius:18px!important;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset,
             0 28px 60px -24px rgba(45,15,70,.65)!important;
  overflow:hidden;
}
/* sisemistel plokkidel on reasisene background:#fff */
body.soe .modal-content > div{background:var(--card)!important}

body.soe .modal-content h2{
  font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink)!important;
}
body.soe .modal-content label,
body.soe .modal-content .form-group label{color:var(--mut)!important;font-weight:600}
body.soe .modal-content p{color:var(--mut)!important}

body.soe .modal-content input[type="text"],
body.soe .modal-content input[type="email"],
body.soe .modal-content input[type="tel"],
body.soe .modal-content input[type="number"],
body.soe .modal-content select,
body.soe .modal-content textarea{
  background:#FFFFFF!important;
  border:1.5px solid var(--line-2)!important;
  border-radius:9px!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
body.soe .modal-content input:focus,
body.soe .modal-content select:focus,
body.soe .modal-content textarea:focus{
  border-color:var(--acc)!important;
  box-shadow:0 0 0 3px rgba(91,14,138,.16)!important;
  outline:none!important;
}
body.soe .modal-content input[readonly],
body.soe .modal-content input:disabled{background:#F5F0FA!important;color:var(--ink)!important}

body.soe .modal-content .btn,
body.soe .modal-content button[type="submit"]{
  background:var(--acc)!important;border-color:var(--acc)!important;color:#FFFFFF!important;
  border-radius:9px!important;box-shadow:none!important;
  letter-spacing:.04em;text-transform:uppercase;font-weight:800;
}
body.soe .modal-content .btn:hover,
body.soe .modal-content button[type="submit"]:hover{
  background:var(--acc-2)!important;border-color:var(--acc-2)!important;
  transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(70,12,110,.6)!important;
}

body.soe .modal-close{
  width:36px;height:36px;border-radius:50%;
  background:#F5F0FA!important;border:1px solid var(--line-2)!important;
  color:var(--mut)!important;line-height:1;
}
body.soe .modal-close:hover{
  background:var(--acc)!important;border-color:var(--acc)!important;color:#FFFFFF!important;
}
body.soe .modal-close:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px}

/* märkeruudud ja lisateenused tellimusaknas */
body.soe .modal-content input[type="checkbox"],
body.soe .modal-content input[type="radio"]{accent-color:var(--acc)}

/* 16. Võrdlusaken.
   ------------------------------------------------------------------------
   24.08 (2): võrdluskaardi kuju - fototaust, hinnasilt foto nurgas,
   Fraunces-nimi, võimsusklassid, "Lae veel andmeid +" ja "TUTVU JA OSTA" -
   on nüüd styles.css'i lõpus ("MUUDATUSED 24.08 (2) - TOODETE VÕRDLUS").
   Põhjus: võrdlusaken avaneb ka lehtedelt, kus seda teemafaili ei laadita,
   ja !important-reeglid siin võtsid uuelt kujundelt värvid ära (hinnasilt
   jäi lillaks tekstiks halli tausta peale, näitajate read said lilla kasti).

   Siia jäävad ainult need osad, mida styles.css ei kata: võrdlusakna otsing.
*/
body.soe .compare-search-input{
  background:#FFFFFF!important;border:1.5px solid var(--line-2)!important;border-radius:9px!important;color:var(--ink)!important;
}
body.soe .compare-search-input:focus{border-color:var(--acc)!important;box-shadow:0 0 0 3px rgba(91,14,138,.16)!important}
body.soe .compare-search-dropdown{
  background:var(--card)!important;border:1px solid var(--line-2)!important;border-radius:10px!important;
}
/* võimsusnuppudel ei ole siin kaardil lilla tooniriba */
body.soe .compare-item .pc-classes .pc-class-ind{display:none!important}

/* ==========================================================================
   17. Uus kategooria-header (.cat-hero + .cat-sortbar)
   ==========================================================================
   Uuel headeril on juba kreemjas toon, seega teema puudutab ainult lillat
   rõhuvärvi ja paneb vaatelüliti sorteerimise kõrvale. Foto, pealkirja
   suurus ja loor jäävad täpselt nagu on.
   ========================================================================== */
/* .cat-hero jääb täielikult puutumata - siin ei ole ühtegi reeglit. */

/* .cat-sortbar on tavavoos (flex, paremale joondatud) - erinevalt vanast
   .page-header .sort-by'st, mis oli absoluutne. Siin ümbrist ei positsioneeri. */
body.soe .cat-sortbar .soe-controls{
  position:static;right:auto;bottom:auto;
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;justify-content:flex-end;
}
body.soe .cat-sortbar .soe-controls .sort-by{position:static;width:auto}

@media (max-width:700px){
  body.soe .cat-sortbar{justify-content:flex-end}
  body.soe .cat-sortbar .soe-controls{width:100%;justify-content:flex-end;margin-top:0}
  body.soe .cat-sortbar .soe-controls .sort-by,
  body.soe .cat-sortbar .soe-controls .sort-by select{width:auto}
}


/* ==========================================================================
   18. Tootenimekirja taust valge
   ==========================================================================
   Sektsioon .products-layout on valge, seega kreemjas kaart ja filtrikast
   vajavad veidi selgemat äärist ja varju - muidu kaovad nad valgel taustal
   ära. Lehe ülemine osa (.cat-hero) ja jalus jäävad puutumata.
   ========================================================================== */
body.soe .products-layout{background:#FFFFFF!important}
body.soe .pcard-wrap .pcard{
  border-color:#DCCFE9;
  box-shadow:0 12px 28px -20px rgba(45,15,70,.5);
}
body.soe .pcard-wrap .pcard:hover{box-shadow:0 18px 34px -18px rgba(45,15,70,.55)}
body.soe .sidebar-filters{border-color:#DCCFE9!important}
body.soe.soe-rows .pcard-wrap .pcard{border-color:#DCCFE9;box-shadow:none}
body.soe.soe-rows .pcard-wrap .pcard:hover{box-shadow:0 14px 30px -20px rgba(45,15,70,.5)}


/* ==========================================================================
   19. Sorteerimisvidin sama suur kui vaatelüliti; "Toodete vaade" silt ära
   ==========================================================================
   .sort-control oli 0,8rem tekstirida ilma kastita - vaatelüliti kõrval
   nägi see väikese ja poolikuna välja. Nüüd on tal sama korpus, kõrgus ja
   kirjasuurus. Sildi "Toodete vaade" võtab ära soe-theme.js.
   ========================================================================== */
body.soe .sort-control{
  gap:8px;
  background:var(--card);
  border:1.5px solid var(--line-2);
  border-radius:9px;
  padding:0 14px;
  min-height:46px;
  font-size:.92rem;
}
body.soe .sort-control__label{font-size:.88rem;color:var(--mut)!important}
body.soe .sort-control__current{
  padding:0;min-height:46px;font-size:.92rem;font-weight:600;gap:8px;
}
body.soe .sort-control__value{font-weight:700}
body.soe .sort-control__caret{border-top-width:6px;border-left-width:5px;border-right-width:5px}
body.soe .sort-control:hover,
body.soe .sort-control:focus-within{border-color:var(--acc)}
body.soe .sort-control__menu{min-width:100%}
body.soe .sort-control__option{font-size:.9rem}

/* lüliti sama kõrge */
body.soe .soe-toggle{min-height:46px;align-items:center}
body.soe .soe-vbtn{min-height:38px;font-size:.86rem;padding:8px 15px}
body.soe .soe-vbtn svg{width:17px;height:17px}

/* sildita lüliti joondub sorteerimisvidinaga keskelt */
body.soe .cat-sortbar .soe-controls,
body.soe .page-header .soe-controls{align-items:center}
body.soe .soe-view{gap:0}

@media (max-width:700px){
  body.soe .sort-control{padding:0 12px;min-height:44px;font-size:.88rem}
  body.soe .sort-control__current{min-height:44px;font-size:.88rem}
}

/* 20. Sorteerimise rippmenüü: päris paneel, mitte hõljuvad valged ribad.
      styles.css teeb menüü läbipaistvaks ja valikud paremale joondatud
      valgeteks tükkideks - kreemjal kaardil paistaks see katki. */
body.soe .sort-control__menu{
  min-width:100%;
  padding:6px;
  gap:2px;
  align-items:stretch;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 14px 32px -18px rgba(45,15,70,.7);
}
body.soe .sort-control__option{
  width:100%;
  padding:9px 12px;
  border-radius:7px;
  background:transparent;
  text-align:right;
  font-size:.88rem;
  color:var(--ink);
  text-decoration:none;
}
body.soe .sort-control__option:hover,
body.soe .sort-control__option:focus-visible{
  background:#F3ECFA;
  color:var(--acc);
  border-radius:7px;
  text-decoration:none;
}

/* ==========================================================================
   21. Sorteerimine ja vaatevalik madalamaks ning allapoole
   ==========================================================================
   Juhtnupud olid 46 px kõrged ja seisid kohe hero all. Nüüd on nad 38 px
   ja riba on nihkunud allapoole, tootenimekirja lähedale: .cat-sortbar
   ülemine vahe kasvab, .products-layout oma kahaneb sama palju, seega
   lehe kogupikkus ei muutu. (.products-layout polster on reasisene stiil,
   seetõttu !important.)
   ========================================================================== */
body.soe .cat-sortbar{padding-top:52px}
body.soe .products-layout{padding-top:12px!important}

body.soe .sort-control{min-height:34px;padding:0 12px;font-size:.84rem}
body.soe .sort-control__label{font-size:.81rem}
body.soe .sort-control__current{min-height:34px;font-size:.84rem;gap:7px}
body.soe .sort-control__caret{border-top-width:5px;border-left-width:4.5px;border-right-width:4.5px}

body.soe .soe-toggle{min-height:34px;padding:2px}
body.soe .soe-vbtn{min-height:28px;font-size:.78rem;padding:5px 11px;gap:6px;border-radius:5px}
body.soe .soe-vbtn svg{width:14px;height:14px}
body.soe .cat-sortbar .soe-controls{gap:12px}

@media (max-width:700px){
  body.soe .cat-sortbar{padding-top:34px}
  body.soe .products-layout{padding-top:10px!important}
  body.soe .sort-control{min-height:34px;padding:0 11px}
}

/* ==========================================================================
   22. MUUDATUSED 24.08.2026 (Egerti soovid)
   --------------------------------------------------------------------------
   a) kategooriat vahetades ei tohi vilksatada vana (ümber tõstmata) kaart
   b) reavaates: väike vahe võimsusklasside ja specide joone vahele,
      tootja logo toote pildi vasakusse ülanurka, kitsam vahe kasti ülaservas
   c) mobiilis: sorteerimine filtrinupu alla, paremale, ilma kastita
   d) mobiilis: tihedamad filtriread
   ========================================================================== */

/* -- a) Vana kaardi vilksatus ---------------------------------------------
      soe-theme.js tõstab kaardil elemendid ümber alles DOMContentLoaded
      järel. Kuni selleni joonistab brauser markupi nii, nagu see HTML-is on -
      ja just see vilksatas kategooriat vahetades taustal. Nüüd on nimekiri
      läbipaistev, kuni skript on töö lõpetanud (body.soe-ready).

      Kui skript mingil põhjusel ei jookse (JS välja lülitatud, viga), toob
      animatsioon nimekirja 1,2 s pärast ikkagi nähtavale - leht ei jää
      kunagi tühjaks. Klass `soe` on HTML-is <body> küljes juba enne skripti,
      seega ka teema värvid on paigas esimesest joonistusest. */
body.soe:not(.soe-ready) .products-grid{opacity:0}
body.soe .products-grid{animation:soeReveal .01s linear 1.2s forwards}
body.soe.soe-ready .products-grid{opacity:1;transition:opacity .18s ease}
@keyframes soeReveal{to{opacity:1}}

/* -- b1) vahe võimsusklasside ja specide eraldusjoone vahele --------------- */
body.soe.soe-rows .pcard-wrap .pc-specs{margin-top:12px}

/* -- b2) tootja logo toote pildi ülanurka ---------------------------------
      Elemendi tõstab kohale soe-theme.js. TAVAVAATES on ta pildi PAREMAS
      ülanurgas (Egert 24.08.2026) - hinnasilt on vasakus ülanurgas,
      järelmaks ja võrdlusnupp all, seega parem nurk on vaba. REAVAATES
      (arvutis) jääb ta vasakusse ülanurka, nagu 24.08 hommikul kokku
      lepitud. Mobiili reavaates ei tõsteta teda üldse.
      NB: reavaate read peavad tulema PÄRAST tavavaate omi, muidu jääb
      `left:auto` peale. */
body.soe .pcard-wrap .pc-photo{position:relative}
body.soe .pcard-wrap .pc-photo > .pc-brand{
  position:absolute;top:12px;right:14px;left:auto;z-index:3;margin:0;
  display:flex;align-items:center;pointer-events:none;
}
body.soe .pcard-wrap .pc-photo > .pc-brand .soe-logo{
  max-height:20px;max-width:96px;object-position:right center;
}
body.soe .pcard-wrap .pc-photo > .pc-brand.soe-brand-text{font-size:.7rem}

body.soe.soe-rows .pcard-wrap .pc-photo > .pc-brand{left:14px;right:auto}
body.soe.soe-rows .pcard-wrap .pc-photo > .pc-brand .soe-logo{object-position:left center}

/* Logo lahkus pealkirjaplokist - kui ridagi ei jää järele, ei tohi ta
   .pc-main gap'i võrra tühja vahet ülaserva jätta. */
body.soe .pcard-wrap .soe-top:empty{display:none}

/* Logota jääb ritta ainult värvivalik - see peab jääma paremasse serva,
   nagu ta logo kõrval oli (space-between tõstaks ta üksi vasakule). */
body.soe.soe-rows .pcard-wrap .pc-main > .soe-top{justify-content:flex-end}

/* -- b3) väiksem tühimik kasti ülaservas ---------------------------------- */
body.soe.soe-rows .pcard-wrap .pc-main{padding-top:12px}

/* -- c) mobiilis sorteerimine filtrinupu alla ------------------------------
      Ümbrise .soe-controls tõstab .products-header sisse soe-theme.js
      (klass .products-header--sorted tuleb sealtsamast). */
@media (max-width:600px){
  /* Riba ise (koos filtrinupuga) kleepub edasi. Sorteerimine seisab nüüd
     RIBAST VÄLJASPOOL, kohe tema all, tavalises voos - nii ei kleepu ta
     kaasa (Egert 24.08.2026: "sort by ei tohi olla sticky").
     Alumine polster ja väline vahe võetakse ribalt maha, sest need jäid
     sorteerimisrea ja tootekaartide VAHELE. */
  .products-header.products-header--sorted{
    display:flex;align-items:center;
    padding-bottom:0;margin-bottom:0;
  }
  .products-header--sorted .mobile-filter-btn{margin-right:0;margin-bottom:0}

  /* Vahe filtrinupust (üleval) on suurem kui vahe tootekaartidest (all). */
  body.soe .soe-controls--under{
    display:flex;width:100%;margin:14px 0 6px;gap:0;flex-wrap:nowrap;
    justify-content:flex-end;align-items:center;
  }
  /* styles.css ~2958 peidab .products-header .sort-by kuni 992px - see reegel
     kirjutati ajal, mil sorteerimine oli headeris. Nuud on ta mujal, aga
     hoiame ulekirjutuse alles, et ta kindlasti nahtav oleks. */
  body.soe .soe-controls--under .sort-by{
    flex:0 0 auto;width:auto;display:block!important;
  }
  /* Ilma kastita: ei äärist, ei tausta, ei polstrit - lihtsalt tekstirida
     rea paremas servas. */
  body.soe .soe-controls--under .sort-control{
    border:0;background:transparent;padding:0;min-height:0;justify-content:flex-end;
  }
  body.soe .soe-controls--under .sort-control__current{min-height:0}

  /* Ripploendi kast on täpselt oma sisu laiune ja seisab valiku all -
     silt "Sorteeri" ei venita teda enam laiaks (Egert 24.08.2026).
     min-width:100% (rida ~857) tuleb siin maha võtta. */
  body.soe .soe-controls--under .sort-control__menu{
    min-width:0;width:max-content;max-width:calc(100vw - 40px);
    right:0;left:auto;
  }

  /* Loend avaneb nüüd filtrinupu ALL, mitte selle peal - nuppu ei ole vaja
     enam kokku tõmmata (vt styles.css "MUUDATUSED 20.08.2026 (2)" p 4). */
  .products-header.products-header--sorted.has-open-sort .mobile-filter-btn{
    width:100%;padding:0 18px;gap:8px;
  }
  .products-header.products-header--sorted.has-open-sort .mobile-filter-btn__text{
    max-width:160px;opacity:1;margin-left:0;
  }
}

/* ==========================================================================
   MUUDATUSED 24.08.2026 (3. ring) - REAVAADE
   ==========================================================================
   Egerti soov: reakaardi sisu peab tõusma ülespoole ka neil toodetel, millel
   on värvivalik; "Sisaldab km" käib hinna lõppu; energiaklassi sakk läheb
   toote pildi paremasse ülanurka ja näitab valitud võimsusklassi klassi.
   Kõik kolm PUUDUTAVAD AINULT REAVAADET - tavavaade jääb endiseks.
   Elemendid tõstab paika soe-theme.js.
   ========================================================================== */

/* -- d1) värvivalik liigireale ("Õhksoojuspump" kõrvale) ------------------
      Varem seisis värvivalik omaette real (.soe-top) logo kohal. Reavaates
      läks logo pildile, nii et sinna jäi ainult värvivalik - terve rida ühe
      elemendi pärast. Nüüd istub ta liigireal paremas servas ja .soe-top
      jääb tühjaks (peidab `.soe-top:empty`), seega sisu tõuseb rea võrra. */
body.soe.soe-rows .pcard-wrap .soe-sub{margin-bottom:0}
body.soe.soe-rows .pcard-wrap .soe-sub > .pc-colorbox{margin-left:auto;flex:0 0 auto}

/* -- d2) "Sisaldab km" hinna lõppu ---------------------------------------
      Ostuveerus oli hind kahel real (number, all "Sisaldab km"). Nüüd on nad
      ühel real, alusjoone järgi joondatult; kitsal ekraanil murrab ta ise. */
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price__num,
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price .product-price-large{margin:0}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price__vat{margin-top:0}

/* -- d3) energiaklassi sakk toote pildi paremasse ülanurka ----------------
      Vasakus ülanurgas on tootja logo, all vasakul võrdlusnupp - parem
      ülanurk on vaba. Sakk läheb sinna ainult reavaates (tõstab
      soe-theme.js); tavavaates jääb ta "Vali võimsusklass" reale. */
body.soe.soe-rows .pcard-wrap .pc-photo > .pc-tab{
  /* styles.css annab sakile venitatud riba (left/right 0) - siin peab ta
     olema sisu laiune kast paremas nurgas, seega left ja width tagasi. */
  position:absolute;top:12px;right:14px;left:auto;bottom:auto;
  width:auto;max-width:none;z-index:4;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ===========================================================================
   AUDIT 25.08.2026 - SORTEERIMISNUPU PUUTEPIND
   ---------------------------------------------------------------------------
   Rida ~1003 "body.soe .soe-controls--under .sort-control__current{min-height:0}"
   on spetsiifilisusega (0,2,1) ja tühistab styles.css real 9117 oleva
   @media (pointer: coarse){ .sort-control__current{min-height:44px} }
   reegli (0,1,0), mis 18.08 auditiga TEADLIKULT lisati. Tulemus: nupp
   "Populaarsemad eespool" oli mobiilis 18,8px kõrge - saidi väikseim
   juhtelement, alla ka WCAG 2.5.8 miinimumi (24px).

   Kastita tekstirea kujundus on teadlik valik ja seda EI muudeta: kasvab
   ainult nähtamatu puutepind ::after-iga. Nupp ise ei liigu piksligi.
   =========================================================================== */
@media (pointer: coarse) {
  body.soe .soe-controls--under .sort-control__current {
    position: relative;
  }

  body.soe .soe-controls--under .sort-control__current::after {
    content: "";
    position: absolute;
    inset: -13px 0;
  }
}

/* ===========================================================================
   25.08.2026 - KAARDI LAIUS VENE LEHEL + VÄRVIVALIKU KOHT
   ---------------------------------------------------------------------------
   Egert 25.08: "konditsioneeride all vene keeles tootekaardid liiga laiaks
   venitatud" ja "värvivalik peab olema igal pool kasti paremas servas".
   =========================================================================== */

/* -- a) ruudustik ei tohi kaardist laiemaks venida ------------------------
      Ruudustiku lapse min-width on vaikimisi "auto" ehk min-content, seega
      `repeat(3,1fr)` rada EI SAA kaardi sisust kitsamaks minna. Eesti lehel
      mahtus sisu ära; vene tõlkes on samad read pikemad ("Мощность
      охлаждения", "2,5 кВт (0,50 – 3,25 кВт)" - kirillitsa kBt on laiem kui
      kW) ja seepärast venisid rajad üle konteineri: kaardid läksid laiaks ja
      lehele tuli rõhtkerimine.

      Sama parandus oli juba olemas mobiilile (styles.css @media max-width:699px,
      audit 25.08.2026) - siin on ta lihtsalt KÕIGILE ekraanilaiustele. Sisu,
      mis rajasse ei mahu, kahaneb (sildid murduvad, vt punkt b) selle asemel,
      et rada laiaks lükata. Eesti lehel ei muutu midagi - seal mahtus kõik
      niigi ära.                                                             */
body.soe .products-grid > .product-card.pcard-wrap{min-width:0}

/* -- b) tehniliste andmete silt tohib murduda kahele reale ----------------
      styles.css real ~9394 on sildil `white-space:nowrap` + ellips. Eesti
      sildid ("JAHUTUSE TÖÖPIIRID") mahuvad ühele reale, vene omad mitte -
      "РАБОЧИЙ ДИАПАЗОН ОХЛАЖДЕНИЯ" jäi kolme punkti taha poolikuks.

      Reavaates oli murdmine juba lubatud (punkt 7 ülalpool) - nüüd ka
      tavavaates. Väärtus jääb endiselt sildiga SAMALE reale, sest
      `.pc-spec{flex-wrap:nowrap}` puutumata: murdub ainult silt ise.        */
body.soe .pcard-wrap .pc-spec__t{
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
}

/* -- c) värvivalik alati kasti paremas servas -----------------------------
      Tavavaates läheb tootja logo pildi ülanurka, nii et pealkirjaploki
      esimesele reale (.soe-top) jääb ainult värvivalik. `space-between`
      tõstab üksiku lapse VASAKULE - reavaates oli see juba parandatud
      (`.pc-main > .soe-top{justify-content:flex-end}`), tavavaates mitte.
      `margin-left:auto` töötab mõlemal juhul: logoga jääb logo vasakule ja
      värvivalik paremale, logota läheb värvivalik üksi paremasse serva.     */
body.soe .pcard-wrap .soe-top > .pc-colorbox{margin-left:auto}

/* -- d) värvivalik tihedamalt tootenime kohale ----------------------------
      Egert 28.08.2026: "toote nimi jääb samamoodi värvivaliku alla, aga peab
      nihkuma üles poole - jääb lihtsalt väiksem tühimik värvi ja tootenime
      vahele."

      .pc-main gap on 12px, seega värvivaliku rida (.soe-top) lükkas kogu
      ülejäänud teksti 34 px allapoole (22 px värvinupud + 12 px vahe).
      Negatiivne alumine veeris võtab selle vahe tagasi - värvivalik jääb
      omaette reale tootenime kohale, aga tekst tõuseb 12 px võrra.

      AINULT TAVAVAADE. Reavaates istub värvivalik juba liigireal (plokk d1)
      ja mobiili reavaates toote pildi nurgas - seal ei ole midagi võtta.    */
body.soe:not(.soe-rows) .pcard-wrap .soe-top{margin-bottom:-12px}

/* ==========================================================================
   28.08.2026 - VÄRVIVALIK PILDILE, JÄRELMAKS HINNASILDI SISSE (Egert)
   „Värvivalik viia järelmaksu info asemele pildile" +
   „järelmaks hinnasildi sisse, „Sisaldab km" asemele: või al. .../kuus".
   Elemendid tõstab paika soe-theme.js reflow(); siin on ainult välimus.
   ========================================================================== */

/* -- e1) hinnasilt: number + järelmaks -----------------------------------
      "Sisaldab km" asemel seisab nüüd järelmaksu rida. Vana silditekst
      jääb HTML-i alles (otsing, võrdlus, vanad vaated), aga kaardil on ta
      peidus - kaks lisarida hinnasildil oleks liig.                        */
body.soe .pcard-wrap .pc-price__vat{display:none}
body.soe .pcard-wrap .pc-price > .pc-finance,
body.soe .pcard-wrap .pc-price > .pc-finance.product-finance{
  position:static;right:auto;bottom:auto;left:auto;top:auto;
  display:block;margin:1px 0 0;padding:0;background:none;box-shadow:none;
  font-size:.64rem;font-weight:500;letter-spacing:.02em;line-height:1.3;
  color:rgba(255,255,255,.9);text-shadow:none;white-space:nowrap;
}
body.soe .pcard-wrap .pc-price > .pc-finance b{color:#fff;font-weight:700}

/* Reavaates on hinnasilt ostuveerus tavaline tekst (lilla taust puudub),
   seega järelmaks peab olema tume. Vana `margin-top:-12px` tõmbas teda
   hinna alla - nüüd on ta hinnasildi enda sees ja veerist ei ole vaja. */
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price > .pc-finance,
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price > .pc-finance.product-finance{
  margin:0;font-size:.72rem;color:var(--mut);white-space:nowrap;
}
body.soe.soe-rows .pcard-wrap .pc-actions .pc-price > .pc-finance b{
  color:var(--mut);font-weight:600;
}

/* -- e2) värvivalik toote pildi paremas alanurgas -------------------------
      Täpselt seal, kus enne oli järelmaksu rida (parem serv 16 px, all
      12 px). Vasakus alanurgas on võrdlusnupp, vasakus ülanurgas hinnasilt
      ja paremas ülanurgas tootja logo - alumine parem nurk on nüüd vaba.
      Valge poolläbipaistev pill hoiab nupud fotol loetavana.               */
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox{
  position:absolute;right:14px;bottom:10px;left:auto;top:auto;z-index:4;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:8px;padding:5px 10px;margin:0;height:auto;min-height:0;line-height:normal;
  border-radius:999px;background:rgba(255,255,255,.86);
  box-shadow:0 1px 6px rgba(40,35,55,.16);
}
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox .pc-color-name{
  font-size:.68rem;font-weight:700;letter-spacing:normal;text-transform:none;
  color:var(--mut);margin:0;padding:0;line-height:1.2;white-space:nowrap;
}
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox .pc-colors,
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox .pc-colors.cat-color-selector{
  display:flex;flex-direction:row;align-items:center;gap:6px;margin:0!important;padding:0;
}
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox .pc-swatch,
body.soe:not(.soe-rows) .pcard-wrap .pc-photo > .pc-colorbox .cat-color-btn.pc-swatch{
  width:18px!important;height:18px!important;border-width:2px!important;
}