/* ===== CSS Custom Properties ===== */
:root {
  --purple-deep: #5B0E8A;
  --purple-primary: #7B1FA2;
  --purple-light: #9C27B0;
  --purple-lighter: #CE93D8;
  --purple-pale: #F3E5F5;
  --red-accent: #E53935;
  --red-hover: #C62828;
  --orange-accent: #FF6D00;
  --white: #FFFFFF;
  --off-white: #F8F6FA;
  --gray-light: #F5F5F5;
  --gray-medium: #9E9E9E;
  --gray-dark: #424242;
  --text-primary: #212121;
  --text-secondary: #616161;
  --footer-bg: #2D0845;
  --shadow-sm: 0 2px 8px rgba(91, 14, 138, 0.08);
  --shadow-md: 0 4px 16px rgba(91, 14, 138, 0.12);
  --shadow-lg: 0 8px 32px rgba(91, 14, 138, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
  hidden-atribuut peab võitma komponentide oma display-reeglid. Ilma selleta
  jäid nt peidetud filtrivalikud (.checkbox-label { display: flex }) endiselt
  nähtavaks, sest brauseri vaikereegel [hidden] { display: none } on nõrgem.
*/
[hidden] {
  display: none !important;
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.6;
  overflow-x: clip;
}

/* Lisatakse siis, kui kontaktivorm või navigeerimissahtel on avatud
   (js/common.js -> scrollLock).

   Ainult `overflow: hidden` siin ei tööta: body-l on `overflow-x: clip`,
   mistõttu brauser ei kanna seda enam aknale edasi - ja mobiilis eirab
   iOS Safari seda niikuinii. Seetõttu fikseerime body. `top` tuleb JS-ist,
   et leht püsiks avamise hetkel täpselt samas kohas. */
body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Lauaarvutis kaob kerimisriba - anname selle laiuse padinguna tagasi,
     muidu nihkub kogu leht avamise hetkel paremale. */
  padding-right: var(--scrollbar-gap, 0px);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

/* ===== Utility Classes ===== */
.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px;
}

.main-nav .container {
  max-width: 1220px;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--purple-deep);
  text-align: center;
  margin-bottom: 48px;
  line-height: 1.3;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--red-accent);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .btn-purple (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.btn-outline {
  background: transparent;
  color: var(--purple-primary);
  border: 2px solid var(--purple-primary);
}

.btn-outline:hover {
  background: var(--purple-primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.82rem;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .btn-arrow (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Top Bar ===== */
.top-bar {
  background: var(--purple-pale);
  padding: 6px 0;
  font-size: 0.82rem;
  color: var(--purple-deep);
  position: sticky;
  top: 0;
  z-index: 1002;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-bar-left a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--purple-deep);
  transition: color var(--transition), text-shadow var(--transition);
}

/* Ulemise riba paremad lingid (PAIGALDUS / JARELMAKS / KONTAKT).
   Hiirega ule minnes laheb kiri veidi paksemaks - vt :hover reeglit allpool. */
.top-bar-right > a {
  transition: color var(--transition), text-shadow var(--transition);
}

.top-bar-left a:hover {
  color: var(--purple-primary);
  /* Paksem kiri ILMA paigutuse nihketa: text-shadow paksendab glüüfe, aga
     ei muuda teksti laiust, seega naaberlingid ja otsingukast ei hüppa.
     font-weight: 600 annaks sama välimuse, aga nihutaks kogu riba. */
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-bar-right a:hover {
  color: var(--purple-primary);
  text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

.lang-dropdown {
  position: relative;
  border-left: 1px solid var(--purple-lighter);
  padding-left: 20px;
  margin-left: 4px;
}

.lang-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--purple-deep);
  cursor: pointer;
  padding: 2px 0;
  transition: color var(--transition);
}

.lang-dropdown-toggle:hover {
  color: var(--purple-primary);
}

.lang-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.lang-dropdown.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(91, 14, 138, 0.15);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  z-index: 100;
}

.lang-dropdown.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.lang-dropdown-menu li a {
  display: block;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--purple-deep);
  text-decoration: none;
  transition: background 0.15s ease;
  text-align: center;
}

.lang-dropdown-menu li a:hover {
  background: var(--purple-pale);
  color: var(--purple-primary);
}

/* ==========================================================================
   KEELEVALIK LIPPUDEGA (asendab EST/RUS rippmenuu 19.08.2026)
   --------------------------------------------------------------------------
   Kaks vaikest lippu korvuti: Eesti vasakul, Vene paremal. Lipud on lehe
   sees SVG-na, seega eraldi pildifaile ei laadita ja nad on teravad ka
   retina-ekraanil. Aktiivne keel on taisvarviline, teine tuhmim.
   Vana .lang-dropdown reeglistik jaab ulalpoole alles - kui moni leht veel
   vana margendust kasutab, nagib see endiselt oige valja.
   ========================================================================== */
.lang-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--purple-lighter);
  padding-left: 20px;
  margin-left: 4px;
}

.lang-flag {
  display: inline-flex;
  line-height: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(91, 14, 138, 0.28);
  opacity: 0.5;
  filter: saturate(0.55);
  transition: opacity var(--transition), filter var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.lang-flag svg {
  display: block;
  width: 21px;
  height: 15px;
}

.lang-flag:hover,
.lang-flag:focus-visible {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

.lang-flag.is-active {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px var(--purple-primary);
}

.lang-flag.is-active:hover {
  transform: none;
}

.top-bar-right .header-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--white);
  color: var(--purple-deep);
  border: 1px solid var(--purple-lighter);
  transition: all var(--transition);
}

.top-bar-right .header-cart-btn:hover {
  background: var(--purple-pale);
  color: var(--purple-primary);
  transform: translateY(-1px);
}

.top-bar-right .header-cart-btn svg {
  width: 15px;
  height: 15px;
}

.top-bar-right .header-cart-btn .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red-accent);
  color: var(--white);
  font-size: 0.55rem;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Header ===== */
.header {
  background: var(--white);
  padding: 16px 0;
  position: sticky;
  top: 40px;
  z-index: 1001;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple-deep);
  flex-shrink: 0;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .logo-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .badge-logo-img (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.search-bar {
  flex: 1;
  max-width: 320px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--purple-lighter);
  border-radius: 50px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar:focus-within {
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 3px rgba(91, 14, 138, 0.08);
}

.search-bar input {
  flex: 1;
  width: 100%;
  padding: 10px 16px;
  border: none !important;
  background: transparent !important;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none !important;
  border-radius: 0 !important;
}

.search-bar button {
  background: none;
  border: none;
  padding: 0 16px;
  color: var(--purple-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--purple-deep);
  font-size: 0.95rem;
}

.nav-list a:hover {
  color: var(--purple-primary);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-header-actions {
  display: none;
}

.nav-drawer {
  display: none;
}

@media (max-width: 991px) {
  .nav-list, .header-actions {
    display: none;
  }
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .search-bar.main-search-bar {
    display: none;
  }
}

/* ==========================================================================
   CATEGORY & PRODUCT PAGES CSS
   ========================================================================== */

/* EEMALDATUD 18.08.2026 - surnud kood: .page-category (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Breadcrumbs */
/* EEMALDATUD 18.08.2026 - surnud kood: .breadcrumbs-container (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.breadcrumbs {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.breadcrumbs li a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs li a:hover {
  color: var(--primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .separator (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.breadcrumbs .current {
  color: var(--text-primary);
  font-weight: 500;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .category-hero, .category-title, .category-desc, .category-content jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Sidebar Filters */
/* EEMALDATUD 18.08.2026 - surnud kood: .category-sidebar, .filter-widget, .filter-title (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.filter-group {
  margin-bottom: 25px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .filter-subtitle, .filter-list (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.filter-item label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.filter-item label:hover {
  color: var(--primary);
}

/* Products Toolbar */
/* EEMALDATUD 18.08.2026 - surnud kood: .products-toolbar, .products-count, .products-sort (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */
/* EEMALDATUD 20.08.2026 - .sort-select ja .sort-select:focus (~870 B, sisaldas
   ka sisseehitatud data:image SVG-noolt).
   POHJUS: margendus on <select id="sort-select"> - ID, mitte klass. Kontrollitud
   koigil 45 HTML-lehel: uhtegi class="sort-select" ei ole ja styles.css-is ei ole
   kunagi olnud ka #sort-select reeglit. Reegel ei ole seega KUNAGI midagi
   kujundanud. Lisaks peidab js/common.js (rida ~1375) selle natiivse valiku ara
   (.sort-select-hidden) ja ehitab asemele .sort-control vidina. Visuaalne mojug: null. */

/* FAQ Section */
.faq-section {
  padding: 60px 0;
  background-color: white;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .faq-container (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.faq-item {
  margin-bottom: 20px;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: #f4f5f7;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
  border-radius: 4px;
}

.faq-question:hover {
  background-color: #e9eaec;
}

.faq-question i {
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  font-size: 0.9rem;
}

.faq-question[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.faq-question[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.faq-answer {
  display: none;
  padding: 20px;
  background: white;
  border: 1px solid #f4f5f7;
  border-top: none;
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.faq-answer p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .financing-banner, .financing-box, .btn-outline-white, .features-section jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Sidebar Banners */
/* EEMALDATUD 18.08.2026 - surnud kood: .sidebar-banner, .bg-purple, .banner-title, .image-banner jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.search-bar input::placeholder {
  color: var(--gray-medium);
}

.search-bar button:not(.search-clear-btn) {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: 44px;
  height: 38px;
  min-height: 100%;
  border: none;
  background: var(--purple-primary);
  border-radius: 0 48px 48px 0 !important;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
  margin: -1px -1px -1px 0;
}

.search-bar button:not(.search-clear-btn):hover {
  background: var(--purple-deep);
}

.search-bar button.search-clear-btn {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: 32px !important;
  height: 38px !important;
  min-height: 100% !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--gray-medium) !important;
  cursor: pointer !important;
  display: none;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
}

.search-bar button.search-clear-btn.visible {
  display: flex !important;
}

.search-bar button.search-clear-btn:hover {
  color: var(--purple-primary) !important;
  background: transparent !important;
  transform: scale(1.1) !important;
}

.header-cta {
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .header-compare-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Compare Icon Button (for category pages) */
.compare-icon-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.compare-icon-btn:hover {
  color: var(--purple-primary);
}

.compare-icon-btn.active {
  background: rgba(243, 229, 245, 0.9);
  color: var(--purple-primary);
  border: 1px solid var(--purple-primary);
  box-shadow: 0 0 0 2px rgba(123, 31, 162, 0.2);
}

.compare-full-specs table, 
.compare-full-specs thead, 
.compare-full-specs tbody, 
.compare-full-specs th, 
.compare-full-specs td, 
.compare-full-specs tr { 
  display: block; 
}
.compare-full-specs thead { 
  display: none; 
}
.compare-full-specs tr { 
  margin-bottom: 12px; 
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.compare-full-specs tr:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.compare-full-specs th, 
.compare-full-specs td { 
  padding: 2px 0; 
  border: none; 
  text-align: left; 
}
.compare-full-specs th { 
  color: var(--text-secondary); 
  font-size: 0.75rem; 
  font-weight: 500;
  margin-bottom: 2px;
}
.compare-full-specs td { 
  font-size: 0.8rem; 
  font-weight: 400; 
  color: var(--text-primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .header-lang (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.header-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--purple-pale);
  color: var(--purple-deep);
  text-decoration: none;
  transition: all var(--transition);
}

.header-cart-btn:hover {
  background: var(--purple-lighter);
  color: var(--purple-primary);
  transform: translateY(-2px);
}

.header-cart-btn .cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--red-accent);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Navigation ===== */
.main-nav {
  background: var(--white);
  position: sticky;
  top: 112px;
  z-index: 1000;
  box-shadow: none;
}

.main-nav .container {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}

.nav-list li {
  position: relative;
}

.nav-list li:first-child a {
  padding-left: 0;
}

.nav-list li:last-child a {
  padding-right: 0;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  color: var(--purple-deep);
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
}

.nav-list a::before,
.nav-list a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 0;
  height: 3px;
  background-color: #94a3b8;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-list a::before {
  left: 0;
  border-radius: 2px 0 0 2px;
}

.nav-list a::after {
  right: 0;
  border-radius: 0 2px 2px 0;
}

.nav-list a:hover::before,
.nav-list a:hover::after,
.nav-list a.active::before,
.nav-list a.active::after {
  width: 50.1%;
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--purple-primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .nav-campaign (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.nav-list a .nav-icon,
.nav-drawer-list .nav-icon {
  display: none !important;
}

/* ===== Hero Section ===== */
.hero {
  position: relative;
  overflow: hidden;
  /* Tumendus vasakult paremale: veidi tugevam kui varem ja hajub kogu laiuse
     ulatuses, mitte ei lõpe 60% peal - nii jääb pealkiri vasakul loetav ja
     üleminek paremale pehmemaks. */
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.60) 30%,
      rgba(0, 0, 0, 0.38) 55%,
      rgba(0, 0, 0, 0.18) 78%,
      rgba(0, 0, 0, 0) 100%),
    url('images/hero-bg-summer-calm.png') no-repeat center center / cover;
  background-attachment: fixed;
  min-height: 420px;
  /* Hero alt on vari eemaldatud - hero lõpeb puhta servaga, ilma
     lilla "alumise piirjooneta" järgmise sektsiooni peal. */
  box-shadow: none;
  z-index: 10;
}

@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
  }
}

.hero-slider {
  position: relative;
  overflow: hidden;
}

.hero-slide {
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 40px 0;
}

.hero-slide .container {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  align-items: center;
}

.hero-content {
  color: var(--white);
  z-index: 2;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .hero-badge (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.hero-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.015em;
}

.hero-desc {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  opacity: 0.9;
  margin: 0 0 28px;
  max-width: 600px;
  line-height: 1.35;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .hero-image (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* EEMALDATUD 25.08.2026 - surnud kood: @keyframes heroFloat oli defineeritud,
   aga mitte ühelgi selektoril kasutusel (ainus vaste kogu projektis oli
   definitsioon ise). Kuulus koos 18.08 eemaldatud .hero-image'iga kokku. */

/* EEMALDATUD 18.08.2026 - surnud kood: .hero-partners, .partner-logo, .promo-banner-section, .promo-banner jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Product Categories Grid ===== */
.categories {
  padding: 72px 0 72px;
  /* Neutraalne hall #f6f6f6 kergelt läbipaistvana (valge tausta peal annab
     ~#f9f9f9) - piisab, et sektsioon eristuks, aga ei tõmba tähelepanu.
     Tugevuse muutmiseks piisab alfa-väärtuse muutmisest. */
  background-color: rgba(246, 246, 246, 0.75);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ===== Product Grid Card ===== */
.product-grid-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-grid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.card-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  z-index: 2;
}

.new-badge {
  background-color: var(--purple-deep);
}

.discount-badge {
  background-color: #e53935;
}

.card-image-wrap {
  height: 220px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-image-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.card-body {
  padding: 0 20px 20px;
  flex-grow: 1;
}

.card-brand {
  font-size: 0.85rem;
  color: var(--purple-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--text-primary);
  line-height: 1.2;
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover {
  color: var(--purple-deep);
}

.card-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.spec-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-item i {
  color: var(--purple-primary);
  width: 14px;
  text-align: center;
}

.card-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.price-section {
  display: flex;
  flex-direction: column;
}

.old-price {
  font-size: 0.85rem;
  color: #e53935;
  text-decoration: line-through;
  margin-bottom: 2px;
  font-weight: 600;
}

.new-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .installment-text, .btn-cart (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Modern Category Card System (Homepage) ===== */
.category-card.cat-card-modern {
  background: linear-gradient(145deg, #FFFFFF 0%, #FAF8FC 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(91, 14, 138, 0.07);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(91, 14, 138, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 380px;
}

.category-card.cat-card-modern:hover {
  box-shadow: 0 20px 36px rgba(91, 14, 138, 0.16);
  border-color: rgba(91, 14, 138, 0.22);
}

.cat-card-content {
  padding: 26px 22px 14px;
  z-index: 3;
  position: relative;
  flex: 1 1 auto;
}

.cat-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--purple-deep);
  margin-bottom: 12px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.category-card.cat-card-modern:hover .cat-card-title {
  color: #7B1FA2;
}

.cat-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 90%;
}

.cat-card-footer {
  padding: 0;
  z-index: 3;
  display: flex;
  width: 100%;
}

.btn-cat-action {
  background: var(--red-accent);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 0 18px 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(229, 57, 53, 0.32);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  z-index: 3;
  align-self: flex-start;
  text-decoration: none;
  border: none;
}

.btn-cat-action .arrow-svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.btn-cat-action:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
}

/* Specific styling for the modern category cards on homepage */
.category-card.cat-card-modern .btn-cat-action {
  background: #F4F6F8;
  color: #002855 !important;
  border: 1px solid #002855;
  font-size: 0.85rem;
  padding: 14px 20px;
  border-radius: 0 0 14px 14px;
  justify-content: center;
  width: 100%;
  box-shadow: none;
  align-self: auto;
}

.category-card.cat-card-modern:hover .btn-cat-action {
  background: linear-gradient(135deg, #7B1FA2 0%, #2D0845 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: none;
  transform: translateY(0);
}

.category-card.cat-card-modern:hover .btn-cat-action .arrow-svg {
  transform: translateX(4px);
}

.cat-card-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  pointer-events: none;
}

/* Kategooriakaardi pilt on klikitav: läbipaistev link katab pildiala.
   .cat-card-visual on pointer-events: none, seega tuleb link eraldi lubada. */
.cat-card-img-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.cat-card-img-link:focus-visible {
  outline: 2px solid var(--purple-deep, #5b0e8a);
  outline-offset: -4px;
}

.cat-card-img {
  max-height: 150px;
  max-width: 85%;
  object-fit: contain;
  z-index: 2;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}

.category-card.cat-card-modern:hover .cat-card-img {
  transform: scale(1.06) translateY(-4px);
}

/* Custom styling for Õhk-vesi soojuspump (#card-heat-pump) */
#card-heat-pump .cat-card-visual {
  justify-content: flex-end;
}

#card-heat-pump .cat-card-img {
  max-height: 220px;
  max-width: 100%;
}

/* Custom styling for Ventilatsioon (#card-ventilation) */
#card-ventilation .cat-card-img {
  max-height: 180px;
  max-width: 95%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .cat-card-content {
    padding: 24px 24px 8px;
  }

  .cat-card-footer {
    padding: 12px 24px 24px;
  }

  .cat-card-title {
    font-size: 1.38rem;
  }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .category-card.cat-card-modern {
    min-height: auto;
  }

  .cat-card-visual {
    min-height: 150px;
    padding: 12px 16px;
  }

  #card-heat-pump .cat-card-visual {
    justify-content: center;
  }

  #card-heat-pump .cat-card-img {
    max-height: 165px;
  }
}

/* ===== Featured Banner (Purple) ===== */
.featured-banner {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%), url('images/talv.jpg') center/cover no-repeat;
  padding: 56px 0;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.featured-banner::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
  top: -200px;
  right: -100px;
  border-radius: 50%;
}

.featured-banner .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.featured-content h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.featured-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 500px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.featured-content .btn-cat-action,
.maintenance-content .btn-cat-action {
  background: #FFFFFF !important;
  color: var(--purple-primary) !important;
  border: 1px solid var(--purple-primary) !important;
  position: relative;
}

.featured-content .btn-cat-action:hover,
.maintenance-content .btn-cat-action:hover {
  background: #FFFFFF !important;
  color: var(--purple-primary) !important;
  box-shadow: inset 0 0 12px rgba(123, 31, 162, 0.25), 0 4px 12px rgba(91, 14, 138, 0.15) !important;
  transform: translateY(0) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.featured-image {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.featured-image img {
  max-height: 220px;
  width: auto;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3));
  transition: transform var(--transition);
}

.featured-image:hover img {
  transform: scale(1.03);
}

/* ===== Products Grid Section ===== */
/* EEMALDATUD 18.08.2026 - surnud kood: .products-section (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--off-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  border: 1px solid rgba(91, 14, 138, 0.06);
}

.product-card:hover {

  box-shadow: var(--shadow-md);
}

.product-card-image {
  height: 200px;
  overflow: hidden;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.product-card-image img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition);
}



#product-2 .product-card-image img {
  max-height: 190px;
  transform: scale(1.08);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .product-tag, .hot, .product-card-body, .dual-section jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Maintenance Section ===== */
.maintenance {
  padding: 80px 0;
  background: linear-gradient(90deg, rgba(28, 11, 48, 0.94) 0%, rgba(53, 19, 86, 0.8) 50%, rgba(28, 11, 48, 0.3) 100%), url('images/remonthooldus.jpg') right center / 80% no-repeat;
  position: relative;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.maintenance::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0) 0%, rgba(28, 11, 48, 0.35) 100%);
  z-index: 1;
}

.maintenance .container {
  position: relative;
  z-index: 2;
}

.maintenance-content {
  max-width: 780px;
}

.maintenance-content h2 {
  font-size: 2.3rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 18px;
}

.maintenance-content p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.85;
  margin-bottom: 34px;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .maintenance-features, .maintenance-feature, .feature-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Why Choose Us ===== */
.why-us {
  padding: 80px 0;
  background: var(--off-white);
}

.why-us .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
}

.why-us-image {
  position: relative;
  width: 100%;
}

.why-us-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .why-us-logo-badge, .badge-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.why-us-content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--purple-deep);
  margin-bottom: 16px;
}

.why-us-content>p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.why-us-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}

.why-us-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.why-us-point .point-icon {
  width: 28px;
  height: 28px;
  background: var(--purple-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-primary);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.why-us-point p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.why-us-point p strong {
  color: var(--text-primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .finance-partners, .finance-logos, .finance-logo (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Footer ===== */
.footer {
  background: var(--off-white);
  color: var(--text-secondary);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer-brand .logo {
  color: var(--purple-deep);
  margin-bottom: 16px;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .logo-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.7;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
  border: 1px solid rgba(91, 14, 138, 0.1);
  color: var(--purple-deep);
}

.footer-social a:hover {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--purple-primary);
  border-radius: 2px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul a {
  font-size: 0.88rem;
  opacity: 0.7;
  transition: all var(--transition);
}

.footer-col ul a:hover {
  opacity: 1;
  color: var(--purple-primary);
  padding-left: 4px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-contact .contact-icon {
  font-size: 1rem;
  color: var(--purple-primary);
  width: 20px;
  text-align: center;
}

.footer-bottom {
  border-top: 1px solid rgba(91, 14, 138, 0.1);
  padding: 20px 0;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.7;
}

/* ===== Mobile Menu Toggle ===== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 14px 20px;
}

/* ===== Animations ===== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero-slide .container {
    grid-template-columns: 1fr;
    text-align: left;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .hero-image (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .hero-desc {
    max-width: 100%;
    margin: 0 0 28px;
  }

  .hero-buttons {
    justify-content: flex-start;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .hero-partners (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .categories-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-banner {
    padding: 40px 0;
  }

  .featured-banner .container {
    grid-template-columns: 1.5fr 1fr;
    text-align: left;
    align-items: center;
    gap: 16px;
  }

  .featured-content h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    user-select: text;
  }

  .featured-image {
    text-align: right;
  }

  .featured-image img {
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }

  .featured-content p {
    max-width: 100%;
    margin: 0 auto 24px;
    line-height: 1.4;
  }

  .why-us .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why-us-image {
    order: -1;
    min-height: 250px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .header .container {
    flex-wrap: wrap;
    gap: 12px;
  }

  .search-bar {
    order: 3;
    max-width: 100%;
    flex-basis: 100%;
  }

  .header-cta,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .nav-list {
    display: none;
    flex-direction: column;
  }

  .nav-list li:first-child a,
  .nav-list li:last-child a {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav-list.open {
    display: flex;
  }

  .categories-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .dual-grid (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .hero-title {
    font-size: 2.1rem;
    font-weight: 700;
  }

  .hero-desc {
    font-size: 1.35rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .maintenance {
    padding: 240px 0 40px;
    background: linear-gradient(to bottom, rgba(28, 11, 48, 0) 0%, rgba(28, 11, 48, 0.7) 180px, rgba(28, 11, 48, 1) 240px, rgba(28, 11, 48, 1) 100%), url('images/remonthooldus.jpg') top center / 100% auto no-repeat;
    background-color: rgb(28, 11, 48);
  }

  .maintenance-content p {
    line-height: 1.4;
    font-size: 1.0rem;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .maintenance-features (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .finance-logos (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

}

/* ===== Modal Styles ===== */
.modal {
  display: flex;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .show-modal (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 40px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* Initial transformed state */
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .show-modal, .close-btn (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.modal-content h2 {
  color: var(--purple-deep);
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.modal-content p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--purple-primary);
}

/* ==========================================================================
   SEARCH MODAL CSS
   ========================================================================== */

/* EEMALDATUD 18.08.2026 - surnud kood: .search-modal, .search-modal-content, .close-modal, .search-container jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.search-result-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
  gap: 15px;
}

.search-result-item:hover {
  background-color: #f8f9fa;
}

.search-result-img {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 6px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.search-result-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.search-result-info {
  flex: 1;
}

.search-result-brand {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.search-result-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.search-result-price {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.search-no-results {
  padding: 30px 0;
  text-align: center;
  color: var(--text-secondary);
}

.search-result-more {
  display: block;
  text-align: center;
  padding: 12px;
  margin-top: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.search-result-more:hover {
  background-color: #eef0f2;
}

/* ==========================================================================
   PRODUCT DETAILS CSS
   ========================================================================== */

/* EEMALDATUD 18.08.2026 - surnud kood: .page-product, .product-details-hero, .product-details-grid (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.product-gallery {
  position: relative;
}

.product-gallery img {
  width: 100%;
  border-radius: 12px;
  background-color: #f8f9fa;
  object-fit: contain;
  padding: 20px;
}

.hinnainfo h1 {
  font-size: 2.5rem;
  margin-bottom: 24px;
  color: var(--purple-deep);
  font-weight: 800;
  line-height: 1.2;
}

.hinnainfo .brand {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: block;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .product-price, .product-features-list, .product-tabs, .tab-nav jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Category Page Header: white with a dim logo watermark ===== */
.page-header {
  position: relative;
  overflow: hidden;
  background: rgba(229, 57, 53, 0.04) !important;
  padding: 2rem 0 1.5rem !important;
  border-bottom: none;
}

.page-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Õhksoojus logo, washed out into the background */
.page-header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 290px;
  height: 290px;
  background-image: url('images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.07;
  filter: grayscale(1);
  pointer-events: none;
  z-index: 1;
}

.page-header .container {
  position: relative;
  z-index: 2;
}

.page-header .sort-by {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media (max-width: 576px) {
  .page-header .sort-by {
    position: relative;
    margin-top: 15px;
  }
}

.page-header .breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
  color: var(--text-secondary);
}

.page-header .breadcrumbs a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.page-header .breadcrumbs a:hover {
  opacity: 1;
}

.page-header .breadcrumbs .crumb-sep {
  margin: 0 0.5rem;
  opacity: 0.45;
}

.page-header .breadcrumbs .crumb-current {
  color: var(--purple-primary);
  font-weight: 500;
}

.page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--purple-deep);
}

@media (max-width: 768px) {
  .page-header {
    padding: 1.6rem 0 1.4rem !important;
  }

  .products-layout {
    padding-top: 1.2rem !important;
  }

  .page-header::before {
    width: 190px;
    height: 190px;
    opacity: 0.06;
  }
}

/* ===== Products Layout (Sidebar + Grid) ===== */
.layout-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

@media (max-width: 992px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Sidebar Filters ===== */
.sidebar-filters {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius-md);
  padding: 24px;
  height: fit-content;
}

.filter-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-group h3 {
  font-size: 1.1rem;
  color: var(--purple-deep);
  margin-bottom: 16px;
}

.price-slider .slider {
  width: 100%;
  margin-bottom: 12px;
}

.price-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.checkbox-label input {
  accent-color: var(--purple-primary);
  width: 16px;
  height: 16px;
}

.checkbox-label .count {
  color: #999;
  font-size: 0.85rem;
  margin-left: auto;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .color-options, .color-dot (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Product Card specific for list */
.products-grid.three-cols {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .products-grid.three-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid.three-cols {
    grid-template-columns: 1fr;
  }
}

/* EEMALDATUD 18.08.2026 - surnud kood: .product-features (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9rem;
  margin-right: 8px;
}

/* ===== Contact Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 8, 69, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  will-change: opacity;
  /* Sõrmega üle tumeda tausta tõmbamine ei tohi lehte liigutada. */
  overscroll-behavior: contain;
}

.modal-overlay.active {
  transition: opacity 0.15s ease, visibility 0s linear 0s;

  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 460px;
  position: relative;
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  will-change: transform, opacity;
  /* Vormi lõppu kerides ei tohi kerimine kanduda edasi taustale. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mobiilis muudab aadressiriba vh-i väärtust; dvh järgib tegelikku akent,
   nii et vorm ei jää klaviatuuri avanedes ekraanist välja. */
@supports (max-height: 90dvh) {
  .modal-content {
    max-height: 90dvh;
  }
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--red-accent);
}

.modal-content h2 {
  color: var(--purple-deep);
  margin-bottom: 6px;
  font-size: 1.3rem;
}

.modal-content p {
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-group input,
.form-group textarea {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.1);
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 0.95rem;
}

/* ===== Search Dropdown ===== */
.search-bar {
  position: relative;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  min-width: 300px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid #eee;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  display: none;
}

.search-dropdown.active {
  display: block;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.2s;
  cursor: pointer;
}

.search-item:last-child {
  border-bottom: none;
}

.search-item:hover {
  background: var(--purple-pale);
}

.search-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.search-item-info h4 {
  font-size: 0.9rem;
  color: var(--purple-deep);
  margin-bottom: 4px;
}

.search-item-info span {
  font-size: 0.85rem;
  color: var(--red-accent);
  font-weight: 600;
}

.search-empty {
  padding: 16px;
  color: #888;
  text-align: center;
}

/* ===== Product Variants ===== */
.variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.variant-btn {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1 1 calc(25% - 12px);
  min-width: 140px;
}

.variant-btn:hover {
  border-color: #bbb;
}

.variant-btn.active {
  background: #f3ebfa;
  /* Pale purple */
  border-color: #5B0E8A;
  color: #2D0845;
}

.var-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .var-divider, .var-subtitle, .topbar-cart (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Glassmorphism Sidebar ===== */
.sidebar-filters {
  background: #ffffff;
  border: 1px solid rgba(12, 40, 74, 0.08);
  border-radius: 16px;
  padding: 32px 26px;
  position: sticky;
  top: 160px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  box-shadow: 0 4px 24px rgba(12, 40, 74, 0.04);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar-filters:hover {
  scrollbar-color: rgba(12, 40, 74, 0.2) transparent;
}

/* Custom Sleek Scrollbar for Webkit browsers */
.sidebar-filters::-webkit-scrollbar {
  width: 5px;
}

.sidebar-filters::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-filters::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.sidebar-filters:hover::-webkit-scrollbar-thumb {
  background-color: rgba(12, 40, 74, 0.2);
}

.sidebar-filters:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--purple-deep, #0c284a);
}

.sidebar-filters .filter-group {
  margin-bottom: 32px;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-filters .filter-group:last-child {
  margin-bottom: 0;
}

.sidebar-filters .filter-group h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--purple-deep, #0c284a);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  display: block;
}

/* Enhanced custom checkbox labels (similar to screenshot) */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--purple-deep, #0c284a);
  padding: 4px 6px;
  border-radius: 8px;
  transition: all 0.15s ease;
  user-select: none;
}

.checkbox-label:hover {
  background: rgba(12, 40, 74, 0.03);
}

.checkbox-label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  background-color: #ECEAE4;
  border: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: grid;
  place-content: center;
}

.checkbox-label:hover input[type="checkbox"] {
  background-color: #E2DFD7;
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: var(--purple-deep, #0c284a);
  border-color: var(--purple-deep, #0c284a);
}

.checkbox-label input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -2px;
}

.checkbox-label input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

/* ===== Custom Range Slider (similar to screenshot) ===== */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #E5E2DC;
  border-radius: 3px;
  outline: none;
  margin-bottom: 14px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple-deep, #0c284a);
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(12, 40, 74, 0.25);
  transition: transform 0.15s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple-deep, #0c284a);
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(12, 40, 74, 0.25);
  transition: transform 0.15s;
}

.slider::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.price-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--purple-deep, #0c284a);
}

/* ===== Savings Calculator ===== */
/* EEMALDATUD 18.08.2026 - surnud kood: .savings-calc-header, .savings-calc-icon, .savings-calc-sub, .savings-chevron jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */
/* EEMALDATUD 20.08.2026 - .savings-calc ja .savings-bar-fill (~590 B).
   POHJUS: 18.08 kustutati saastukalkulaatori JS (vt js/common.js ~1836), kus
   seisab kirjas "Vastav CSS (.savings-*) oli samuti surnud ja on samuti
   eemaldatud" - aga TEGELIKULT jai see kaks reeglit alles. Uks perekonna
   liikmetest kustutati, kaks mitte. Kontrollitud koigil 45 HTML-lehel ja koigis
   JS-failides: uhtegi viidet ei ole. Visuaalne moju: null. */

/* ===== Compare Label ===== */
/* Hide compare on mobile */
@media (max-width: 768px) {

  .compare-bar {
    display: none !important;
  }
}

/* EEMALDATUD 18.08.2026 - surnud kood: .compare-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Floating Compare Bar ===== */
.compare-bar {
  position: fixed;
  /* AUDIT 25.08.2026 - varem "bottom: -150px" + transition: bottom.
     "bottom" on paigutusomadus -> 500ms jooksul arvutati riba paigutus ja
     joonistati vari iga kaadri jaoks uuesti. transform on komposiitne:
     lõppasend, kiirus ja kõver on identsed, liikumine on sile. */
  bottom: 0;
  transform: translateY(150px);
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-primary));
  color: #fff;
  padding: 14px 0;
  z-index: 9000;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, visibility 0s linear 0.5s;
  box-shadow: 0 -4px 20px rgba(91, 14, 138, 0.3);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.compare-bar.visible {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, visibility 0s linear 0s;

  transform: translateY(0);
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.compare-bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 0.95rem;
}

.compare-bar-inner #compare-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 800;
}

/* ===== Mobile Filter Button ===== */
.mobile-filter-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(91, 14, 138, 0.25);
  border-radius: var(--radius-md);
  color: var(--purple-deep);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(91, 14, 138, 0.08);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease,
    box-shadow 0.25s ease;
}

.mobile-filter-btn svg {
  flex: 0 0 auto;
}

.mobile-filter-btn__text {
  max-width: 160px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-filter-btn:hover {
  background: #F7F2FD;
}

/* Stuck state: shrinks into a square icon button pinned to the left edge */
.products-header.is-stuck .mobile-filter-btn {
  width: 42px !important;
  padding: 0;
  gap: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(91, 14, 138, 0.14);
}

.products-header.is-stuck .mobile-filter-btn__text {
  max-width: 0 !important;
  opacity: 0;
  margin-left: -2px;
}

/* ===== Mobile Filter Overlay ===== */
.filter-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8998;
  opacity: 0;
  transition: opacity 0.3s;
}

.filter-overlay.active {
  display: block;
  opacity: 1;
}

/* ===== Enhanced Responsive ===== */
@media (max-width: 992px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-filters {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    z-index: 8999;
    border-radius: 0;
    overflow-y: auto;
    padding: 24px;
    /* AUDIT 25.08.2026 - SUJUVUS. Varem: transition: left 0.35s + blur(20px).
       "left" on paigutusomadus: brauser arvutas 300x100vh paneeli paigutuse
       JA hägustas tausta uuesti iga kaadri jaoks -> sahtel hüppas sisse
       2-3 kaadriga. Nüüd liigub ta transformiga (komposiitne, GPU teeb),
       taust rasterdatakse üks kord. Lõppasend, kiirus ja kõver on täpselt
       samad - liikumine näeb välja identne, ainult ei haki enam.
       left:-320px asendus left:0 + translateX(-320px). */
    left: 0;
    transform: translateX(-320px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
  }

  .sidebar-filters.open {
    transform: translateX(0);
    left: 0;
  }

  .mobile-filter-btn {
    display: flex;
    width: 100%;
    background: #fff;
  }

  .products-header .sort-by {
    display: none !important;
  }

  /* The whole toolbar sticks, so the filter button stays reachable */
  .products-header {
    position: sticky;
    top: 120px;
    /* below the desktop-style sticky header on tablets */
    z-index: 100;
    padding: 8px 0;
    margin-bottom: 12px;
    /* AUDIT 25.08.2026 - "padding" eemaldatud üleminekust. See on
       position:sticky element: 0,3s polstrianimatsioon kerimise ajal
       paigutas kogu allpool oleva tooteruudustiku iga kaadri jaoks ümber
       (nimekiri jõnksatas). Polstri muutus 8px->x ei ole visuaalselt
       tajutav, jõnks oli. */
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .products-header.is-stuck {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .products-header.is-stuck .mobile-filter-btn {
    pointer-events: auto;
  }

  .products-header .sort-by select {
    height: 42px;
    padding: 0 12px;
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: flex;
    /* Keep visible on mobile */
    padding: 6px 0;
  }

  .top-bar-left {
    gap: 12px;
    font-size: 0.72rem;
  }

  .top-bar-left a span:first-child {
    display: none;
  }

  .header .container {
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-bar {
    order: 3;
    max-width: 100%;
    flex-basis: 100%;
  }

  .header-cta,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    display: block;
    color: var(--purple-deep);
    font-size: 1.3rem;
    padding: 10px 16px;
  }

  .nav-list {
    display: none;
    flex-direction: column;
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a,
  .nav-list li:first-child a,
  .nav-list li:last-child a {
    padding: 12px 16px;
    font-size: 0.88rem;
  }

  .products-grid.three-cols {
    grid-template-columns: 1fr;
  }

  /* EEMALDATUD 18.08.2026 - surnud kood: .savings-calc-header, .savings-calc-body, .savings-number (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .compare-bar-inner {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
    justify-content: center;
  }

  .compare-bar-buttons {
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
  }

  .page-header h1 {
    font-size: 1.5rem !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .products-grid.three-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-bar {
    display: flex;
  }
}



/* ===== Product toolbar: filter button + sort on one row ===== */
.toolbar-sentinel {
  height: 1px;
  margin: 0;
}

.products-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.products-header .mobile-filter-btn {
  margin-right: auto;
  margin-bottom: 0;
}

.sort-by select {
  padding: 9px 14px;
  border: 1px solid rgba(91, 14, 138, 0.15);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  background: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sort-by select:hover {
  border-color: var(--purple-primary);
  box-shadow: 0 4px 12px rgba(91, 14, 138, 0.08);
}

.products-grid {
  display: grid;
  gap: 24px;
}

.products-grid.three-cols {
  grid-template-columns: repeat(3, 1fr);
}

.product-card {
  background: var(--off-white);
  border-radius: 20px;
  padding: 0;
  text-align: center;
  box-shadow: 0 8px 24px rgba(91, 14, 138, 0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(91, 14, 138, 0.03);
}

.product-card:hover {
  box-shadow: 0 20px 40px rgba(91, 14, 138, 0.12);

  border-color: rgba(91, 14, 138, 0.1);
}

/* Image container with radial gradient */
.product-card-image {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #fdfcff 0%, #f3ebfa 100%);
  padding: 20px;
  border-bottom: 1px solid rgba(91, 14, 138, 0.05);
  overflow: hidden;
}

.product-card-image img {
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}


/* EEMALDATUD 18.08.2026 - surnud kood: .product-card-body (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.product-card h2 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.product-card h2 a {
  display: block;
  padding-top: 24px;
  margin-top: -24px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s;
}

.product-card h2 a:hover {
  opacity: 0.8;
}

/* Specs Area */
/* EEMALDATUD 18.08.2026 - surnud kood: .product-specs, .spec-row, .spec-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Võimsusvahemik sulgudes - sama värv mis nimivõimsusel, kergem kaal. */
/* EEMALDATUD 18.08.2026 - surnud kood: .spec-row, .spec-value-block, .spec-main, .spec-sub (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.badge-green {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(to right, #4CAF50, #357a38);
  color: white;
  padding: 2px 10px;
  font-weight: 800; font-size: 0.75rem;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(56, 160, 68, 0.25);
  border-radius: 8px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .spec-row (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Price & Buttons */
.product-price-large {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--purple-deep);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.product-finance {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  background: rgba(91, 14, 138, 0.04);
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  align-self: center;
}

.product-finance b {
  color: var(--purple-primary);
  font-weight: 800;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .btn-rounded (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.btn-ask-info {
  border: 2px solid rgba(91, 14, 138, 0.15) !important;
  color: var(--purple-deep) !important;
  background: transparent;
}

.btn-ask-info:hover {
  background: rgba(91, 14, 138, 0.04) !important;
  border-color: var(--purple-primary) !important;
  transform: translateY(-2px);
}

.btn-order {
  border: none !important;
  background: linear-gradient(135deg, var(--red-accent), #d32f2f) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3) !important;
}

.btn-order:hover {
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4) !important;
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* ===== Single Product Page ===== */
.product-detail {
  padding: 3rem 0;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 992px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    position: relative;
    top: auto;
    z-index: 1;
  }
}

.product-gallery {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid rgba(91, 14, 138, 0.05);
  box-shadow: 0 10px 40px rgba(91, 14, 138, 0.04);
  position: sticky;
  top: 182px;
  text-align: center;
}

.product-gallery .main-image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  margin-bottom: 24px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
}

.product-gallery .thumb-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.product-gallery .thumb-row img {
  width: 80px;
  height: 60px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px;
  background: #fdfcff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.product-gallery .thumb-row img:hover,
.product-gallery .thumb-row img.active {
  border-color: var(--purple-primary);
  background: #fff;
  box-shadow: 0 4px 12px rgba(91, 14, 138, 0.1);
}

.hinnainfo h1 {
  font-size: 2.5rem;
  margin-bottom: 24px;
  color: var(--purple-deep);
  font-weight: 800;
  line-height: 1.2;
}

/* EEMALDATUD 20.08.2026 - .hinnainfo .brand-line ja selle strong (~165 B).
   POHJUS: klassi "brand-line" ei esine mitte kusagil - ei uhelgi 45 HTML-lehest,
   ei uheski JS-failis, ka mitte dunaamiliselt kokku pandud klassinimena.
   Ainus jark koodis oli see reegel ise. Visuaalne moju: null. */

/* Big Price Box */
.hinnainfo .price-box {
  background: linear-gradient(145deg, #FDFBFF 0%, #F5EFFD 100%);
  border: 1px solid rgba(91, 14, 138, 0.12);
  border-radius: 20px 20px 0 0 !important;
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  box-shadow: 0 12px 36px rgba(91, 14, 138, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.hinnainfo .price-box::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(91, 14, 138, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.price-box .price-main {
  font-size: 2rem;
  font-weight: 800;
  color: var(--purple-deep);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.price-box .price-vat {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

.price-box .price-finance {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--text-secondary);
  background: #fff;
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.price-box .price-finance b {
  color: var(--purple-primary);
  font-weight: 800;
}

.price-box .availability {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2E7D32;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .dot (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Split Price Box with Addons ===== */
.hinnainfo .price-box--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 32px;
}

.price-box__col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-box__divider {
  width: 1px;
  align-self: stretch;
  min-height: 120px;
  background: linear-gradient(180deg, rgba(91, 14, 138, 0.04) 0%, rgba(91, 14, 138, 0.16) 50%, rgba(91, 14, 138, 0.04) 100%);
}

.price-box__col--right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Custom Addon Checkbox inside Right Column */
.custom-addon-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.2s ease;
  user-select: none;
}

.custom-addon-checkbox:hover {
  opacity: 0.85;
}

.custom-addon-checkbox.active,
.custom-addon-checkbox:has(input:checked) {
  background: transparent;
  border: none;
  box-shadow: none;
}

.custom-addon-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.addon-checkbox__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(91, 14, 138, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  color: transparent;
  flex-shrink: 0;
}

.custom-addon-checkbox:hover .addon-checkbox__box {
  border-color: var(--purple-primary);
}

.custom-addon-checkbox input:checked+.addon-checkbox__box,
.custom-addon-checkbox.active .addon-checkbox__box {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}

.addon-checkbox__text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  gap: 8px;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .addon-checkbox__info (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.addon-checkbox__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .addon-checkbox__sub (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.addon-checkbox__price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--purple-deep);
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}

/* Price Summary Box right under checkbox */
@keyframes summaryBoxSlideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 250px;
  }
}

.price-summary-box {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(91, 14, 138, 0.18);
  border-radius: 16px;
  padding: 16px 18px;
  animation: summaryBoxSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(91, 14, 138, 0.08);
  overflow: hidden;
}

.price-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(91, 14, 138, 0.16);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.price-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.price-summary__row span:first-child {
  font-weight: 600;
}

.price-summary__row span:last-child {
  font-weight: 700;
  color: var(--text-primary);
}

.price-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.price-summary__total-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.price-summary__total-value {
  font-weight: 900;
  font-size: 1.45rem;
  color: var(--purple-deep);
  letter-spacing: -0.02em;
}

/* Range formatting inside quick specs */
.qs-range {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin-left: 4px;
}

@media (max-width: 992px) {
  .hinnainfo .price-box--split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .price-box__divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    background: linear-gradient(90deg, rgba(91, 14, 138, 0.04) 0%, rgba(91, 14, 138, 0.16) 50%, rgba(91, 14, 138, 0.04) 100%);
  }
}

.variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  align-items: stretch;
}

.variant-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.variant-btn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1 1 0;
  min-width: 110px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.variant-btn:hover {
  background: #FFF8F8 !important;

  box-shadow: 0 8px 24px rgba(229, 57, 53, 0.28);
  border-color: rgba(229, 57, 53, 0.35) !important;
}

.variant-btn.active:hover {
  background: var(--purple-primary) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: #5B0E8A !important;
  border-bottom-color: #5B0E8A !important;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .var-model-hover (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.action-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 20px;
}

.action-buttons .btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 12px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0 18px 0 18px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-buttons .btn-order {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--red-accent) 0%, #d32f2f 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(229, 57, 53, 0.3);
  border: none;
  z-index: 1;
}

.action-buttons .btn-order::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  z-index: -1;
  transition: clip-path 0.35s ease-out;
  clip-path: circle(0% at 0% 0%);
  border-radius: inherit;
}

.action-buttons .btn-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(91, 14, 138, 0.45);
}

.action-buttons .btn-order:hover::before {
  clip-path: circle(150% at 0% 0%);
}

.action-buttons .btn-saada-paring {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 100%) !important;
  color: #002855 !important;
  border: 1.5px solid rgba(229, 57, 53, 0.35) !important;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.12);
  border-radius: 18px 0 18px 0 !important;
}

.action-buttons .btn-saada-paring:hover {
  background: #FFF8F8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229, 57, 53, 0.28);
  color: #002855 !important;
}

/* ===== Ultra-Modern Quick Specs Section ===== */
.product-quick-specs {
  background: linear-gradient(145deg, #FDFBFF 0%, #F5EFFD 100%);
  border: 1px solid rgba(91, 14, 138, 0.12);
  border-radius: 20px;
  padding: 24px 28px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 12px 36px rgba(91, 14, 138, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.product-quick-specs::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(91, 14, 138, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.qs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* qs-dot removed – no longer used */
.qs-header-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--purple-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qs-header-line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(91, 14, 138, 0.15) 0%, transparent 100%);
}

.quick-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Fallback for old layout without .quick-specs-grid wrapper if present */
.product-quick-specs>.quick-spec {
  margin-bottom: 12px;
}

.quick-spec {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(91, 14, 138, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-spec:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(91, 14, 138, 0.09);
  border-color: rgba(91, 14, 138, 0.22);
}

/*
  qs-hero = esimene kast ("Küttevõimsus"). Algselt oli see mõeldud üle kahe
  veeru laiuvaks rõhuasetuseks (grid-column: 1 / -1) ja seetõttu suurem kui
  ülejäänud. Tootelehtedel on aga inline style="grid-column: span 1", mis
  paneb ta tavalisse veergu - suurem polster ja ikoon jäid alles ning kast
  paistis teiste kõrval ebaproportsionaalne.

  Nüüd on mõõdud tavakastiga identsed ja esiletõst tuleb ainult taustast ja
  raamist. Kui tahad hero uuesti üle kogu laiuse, eemalda tootelehelt inline
  style="grid-column: span 1" - grid-column: 1 / -1 hoolitseb ülejäänu eest.
*/
.quick-spec.qs-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFF 100%);
  border: 1px solid rgba(91, 14, 138, 0.18);
  box-shadow: 0 4px 16px rgba(91, 14, 138, 0.06);
  padding: 14px 16px;
}

.quick-spec.qs-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 14, 138, 0.12);
  border-color: var(--purple-primary);
}

.quick-spec .qs-icon {
  width: 42px;
  height: 42px;
  /*
    Ikooni SVG mõõt tuleb siit, mitte HTML-i width/height atribuutidest -
    tootelehtedel on qs-hero SVG 22x22 ja ülejäänutel 18x18, mis tegi
    esimese ikooni teistest suuremaks. CSS ühtlustab kõik.
  */
  background: linear-gradient(135deg, rgba(91, 14, 138, 0.08) 0%, rgba(91, 14, 138, 0.02) 100%);
  color: var(--purple-primary);
  border-radius: 12px;
  border: 1px solid rgba(91, 14, 138, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.quick-spec .qs-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.quick-spec:hover .qs-icon {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  color: #FFFFFF;
  border-color: transparent;
  transform: scale(1.06) rotate(3deg);
  box-shadow: 0 4px 12px rgba(91, 14, 138, 0.25);
}

/*
  Ikoon on nüüd identne teiste kastidega: sama mõõt ja sama varjund
  (linear-gradient 135deg = ülalt vasakult alla paremale, tuleb .qs-icon
  reeglist). Hero eristub ainult kasti taustast ja raamist.
*/
.quick-spec.qs-hero .qs-icon {
  width: 42px;
  height: 42px;
}

.quick-spec.qs-hero:hover .qs-icon {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  color: #FFFFFF;
}

.quick-spec .qs-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.quick-spec .qs-text .qs-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  line-height: 1.25;
}

.quick-spec .qs-text .qs-value {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--purple-deep);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quick-spec.qs-hero .qs-text .qs-value {
  font-size: 1.08rem;
  color: var(--purple-deep);
  font-weight: 800;
}

@media (max-width: 576px) {
  .quick-specs-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .product-quick-specs {
    padding: 12px;
  }

  .quick-spec {
    padding: 8px 12px;
    gap: 12px;
    border-radius: 8px;
  }

  .quick-spec.qs-hero {
    padding: 8px 12px;
  }

  .quick-spec .qs-icon {
    display: none !important;
  }

  .quick-spec.qs-hero .qs-icon {
    display: none !important;
  }

  .quick-spec .qs-text {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .quick-spec .qs-text .qs-label {
    font-size: 0.75rem;
    margin-bottom: 0;
    color: #64748B;
  }

  .quick-spec .qs-text .qs-value {
    font-size: 0.9rem;
    text-align: right;
  }

  .quick-spec.qs-hero .qs-text .qs-value {
    font-size: 0.9rem;
  }
}

/* Description section */
.product-description {
  padding: 4rem 0;
  color: var(--text-primary);
  position: relative;
}

.product-description::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.20) 25%,
      rgba(0, 0, 0, 0.08) 50%,
      rgba(0, 0, 0, 0) 75%);
  z-index: 1;
}

.product-description .container {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  padding: 2.5rem 3rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 100%;
  margin-left: max(24px, calc(50% - 740px + 24px));
  margin-right: auto;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .product-description .container {
    padding: 2rem 1.5rem;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
  }
}

.product-description h1,
.product-description h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  font-weight: 800;
  color: var(--purple-deep);
}

.product-description p {
  line-height: 1.6;
  font-size: 1.05rem;
  color: #000;
  margin-bottom: 1rem;
}

.product-description .breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 16px;
  color: var(--text-secondary);
  opacity: 0.9;
}

.product-description .breadcrumbs a {
  color: var(--purple-primary);
  text-decoration: none;
  font-weight: 500;
}
.product-description .breadcrumbs a:hover {
  text-decoration: underline;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .features-section, .features-grid, .feature-card, .fc-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Specs table */
.specs-section {
  padding: 5rem 0;
  background: #fff;
}

.specs-section .section-title {
  margin-bottom: 24px;
}

.specs-table-wrap {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  /* Vähem kumerad nurgad kui var(--radius-lg) = 20px. */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(91, 14, 138, 0.08);
  box-shadow: 0 10px 30px rgba(91, 14, 138, 0.03);
}

.specs-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table-wrap th,
.specs-table-wrap td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(91, 14, 138, 0.04);
  font-size: 0.95rem;
}

.specs-table-wrap th {
  font-weight: 700;
  color: var(--purple-deep);
  width: 45%;
  background: #fdfcff;
}

.specs-table-wrap td {
  color: var(--text-primary);
  font-weight: 500;
}

.specs-table-wrap tr:last-child th,
.specs-table-wrap tr:last-child td {
  border-bottom: none;
}

.specs-table-wrap tr:hover th,
.specs-table-wrap tr:hover td {
  background: rgba(91, 14, 138, 0.02);
}

.specs-table-wrap.multi-col {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}

.specs-table-wrap.multi-col table {
  width: 100%;
}

.specs-table-wrap.multi-col th {
  width: auto;
  white-space: nowrap;
}

.specs-table-wrap.multi-col thead th {
  background: #4D2B61;
  color: #fff;
  font-size: 0.95rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}

.specs-table-wrap.multi-col thead th:first-child {
  text-align: left;
}

.specs-table-wrap.multi-col tbody th {
  background: #fdfcff;
  color: var(--purple-deep);
  font-weight: 600;
  white-space: normal;
  min-width: 220px;
}

.specs-table-wrap.multi-col td {
  text-align: center;
  white-space: nowrap;
  font-size: 0.95rem;
}

@media (max-width: 992px) {

  .specs-table-wrap.multi-col[class*="active-col-"] th:not(:first-child),
  .specs-table-wrap.multi-col[class*="active-col-"] td:not(:first-child) {
    display: none;
  }

  .specs-table-wrap.multi-col.active-col-1 th:nth-child(2),
  .specs-table-wrap.multi-col.active-col-1 td:nth-child(2) {
    display: table-cell;
  }

  .specs-table-wrap.multi-col.active-col-2 th:nth-child(3),
  .specs-table-wrap.multi-col.active-col-2 td:nth-child(3) {
    display: table-cell;
  }

  .specs-table-wrap.multi-col.active-col-3 th:nth-child(4),
  .specs-table-wrap.multi-col.active-col-3 td:nth-child(4) {
    display: table-cell;
  }

  .specs-table-wrap.multi-col.active-col-4 th:nth-child(5),
  .specs-table-wrap.multi-col.active-col-4 td:nth-child(5) {
    display: table-cell;
  }

  .specs-table-wrap.multi-col.active-col-5 th:nth-child(6),
  .specs-table-wrap.multi-col.active-col-5 td:nth-child(6) {
    display: table-cell;
  }

  .specs-table-wrap.multi-col.active-col-6 th:nth-child(7),
  .specs-table-wrap.multi-col.active-col-6 td:nth-child(7) {
    display: table-cell;
  }

  /* Always show colspan cells (SCOP, energy class etc.) on mobile */
  .specs-table-wrap.multi-col[class*="active-col-"] td[colspan] {
    display: table-cell;
  }
}

@media (max-width: 768px) {

  .specs-table-wrap th,
  .specs-table-wrap td {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  .specs-table-wrap.multi-col tbody th {
    min-width: 120px;
    width: 50%;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.2;
  }

  .specs-table-wrap.multi-col td {
    width: 50%;
    white-space: normal;
    word-break: break-word;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.2;
  }

  .specs-table-wrap.multi-col thead th {
    font-size: 0.85rem !important;
    padding: 8px 10px !important;
    line-height: 1.2;
    width: 50%;
  }
}

/* EEMALDATUD 18.08.2026 - surnud kood: .breadcrumb, .breadcrumb-box (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ===== Compare Modal ===== */
.compare-modal-content {
  max-width: 1100px !important;
  width: 95%;
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.compare-search-wrapper {
  position: relative;
  margin-bottom: 24px;
}

#compare-search-input {
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid rgba(91, 14, 138, 0.15);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  background: #fdfcff;
  transition: all 0.2s;
}

#compare-search-input:focus {
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 4px rgba(139, 41, 204, 0.1);
  background: #fff;
}

.compare-scroll-area {
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 10px;
}

.compare-grid {
  display: flex;
  gap: 20px;
  min-width: max-content;
}

.compare-item {
  width: 330px;
  background: #fff;
  border: 1px solid rgba(91, 14, 138, 0.08);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.compare-item-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
  z-index: 10;
}

.compare-item-remove:hover {
  background: #e53935;
  color: #fff;
}

.compare-item-image {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(91, 14, 138, 0.05);
}

.compare-item-image img {
  max-height: 100%;
  object-fit: contain;
}

.compare-item-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--purple-deep);
  margin-bottom: 12px;
  text-align: center;
}

.compare-item-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  flex-grow: 1;
}

.compare-item-spec {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  background: #fdfcff;
  padding: 6px 10px;
  border-radius: 6px;
}

.compare-item-spec .label {
  color: var(--text-secondary);
}

.compare-item-spec .value {
  font-weight: 700;
  color: var(--purple-deep);
}

.compare-item-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple-deep);
  text-align: center;
  margin-bottom: 16px;
}

.compare-empty {
  width: 100%;
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.search-result-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(91, 14, 138, 0.04);
  color: var(--purple-deep);
}

/* ===== Mobile Layout Fixes ===== */
@media (max-width: 992px) {
  .products-grid.three-cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {

  /* Fix Grid */
  .products-grid.three-cols {
    grid-template-columns: 1fr !important;
  }

  /* Fix Top Bar */
  .top-bar {
    height: auto !important;
    padding: 10px 0 !important;
  }

  .top-bar .container {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-bar-left {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-bar-right {
    width: 100%;
    justify-content: center !important;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 8px;
  }
}

/* ==========================================================================
   MOBILE HEADER OVERRIDES (≤768px only)
   Desktop layout (top-bar, header, main-nav) stays completely untouched.
   ========================================================================== */

/* Hide mobile-only elements on desktop */
.mobile-header-actions {
  display: none;
}

/* The brand word next to the logo image. Most pages render it as a bare
   <span> inside .logo, which this selector matches. */
.header .logo>span:not(.logo-icon) {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--purple-deep);
  white-space: nowrap;
  overflow: hidden;
}

/* Hide mobile top search bar on desktop */
.mobile-top-search {
  display: none !important;
}

/* Compact search toggle: mobile only, injected by common.js */
.mobile-search-toggle {
  display: none;
}

/* Keeps page content in place while the fixed mobile header changes height */
.header-spacer {
  display: none;
}

@media (max-width: 768px) {

  /* Hide desktop-only elements */
  .top-bar {
    display: none !important;
  }

  .header-cta,
  .header-actions {
    display: none !important;
  }

  .main-nav {
    display: none !important;
  }

  /* Header is FIXED on mobile: its height can change without ever reflowing
     the page below it, which is what made scrolling feel choppy before.
     A .header-spacer (injected by common.js) reserves the initial height. */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    padding: 12px 0 8px;
    transition: box-shadow 0.35s ease;
  }

  .header.mobile-scrolled {
    box-shadow: 0 4px 24px rgba(91, 14, 138, 0.10);
  }

  .header-spacer {
    display: block;
  }

  /* Used while measuring the expanded height so nothing animates */
  .header.no-anim,
  .header.no-anim * {
    transition: none !important;
  }

  /* Header layout on mobile: logo row */
  .header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0 12px;
  }

  /* Logo + brand text */
  .header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    order: 1;
  }

  .header .logo .logo-img {
    width: 36px;
    height: 36px;
  }

  .header .logo>span:not(.logo-icon) {
    font-size: 1.2rem;
    max-width: 180px;
    opacity: 1;
    margin-right: 4px;
    transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      margin-right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* "Õhksoojus" wipes away right-to-left exactly while the field opens */
  .header.search-open .logo>span:not(.logo-icon) {
    max-width: 0px;
    opacity: 0;
    margin-right: 0px;
  }

  /* Mobile actions: cart + menu */
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    order: 4;
    flex-shrink: 0;
  }

  /* Fallback for any page without the compact search bar */
  .header.no-top-search .mobile-header-actions {
    margin-left: auto;
  }

  /* Cart button (mobile) */
  .mobile-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--purple-deep);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .mobile-cart-btn:hover {
    background: var(--purple-pale);
  }

  .mobile-cart-btn .cart-badge {
    position: absolute;
    top: 2px;
    right: 0px;
    background: var(--red-accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu button (mobile) */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--purple-deep);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .mobile-menu-btn:hover {
    background: var(--purple-pale);
  }

  /* Compact search toggle (the "search logo") — only shown once scrolled */
  .mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 0;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--purple-deep);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s ease;
  }

  .mobile-search-toggle {
    width: 40px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  .mobile-search-toggle:active {
    background: var(--purple-pale);
  }

  .mobile-search-toggle .ms-ico {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .mobile-search-toggle .ms-ico-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }

  .header.search-open .mobile-search-toggle .ms-ico-search {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  .header.search-open .mobile-search-toggle .ms-ico-close {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

  /* Compact search field: grows out to the LEFT from the toggle button.
     margin-left:auto keeps its right edge pinned while max-width animates. */
  .header .mobile-top-search {
    display: flex !important;
    order: 2;
    /* flex-basis 0 so it can never force a wrap onto its own row */
    flex: 1 1 0;
    min-width: 0;
    margin-left: auto;
    margin-right: 0;
    max-width: 0px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    border-width: 0;
    transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      margin-right 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header.search-open .mobile-top-search {
    max-width: 420px;
    margin-right: 6px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    border-width: 2px;
  }

  /* Main search bar: full-width second row, collapses away on scroll.
     Safe to animate height now — the header is fixed, so nothing below moves. */
  .header .main-search-bar {
    order: 10;
    flex-basis: 100%;
    max-width: 100%;
    max-height: 60px;
    margin-top: 8px;
    margin-bottom: 0px;
    opacity: 1;
    border-width: 2px;
    pointer-events: auto;
    overflow: visible;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header.mobile-scrolled .main-search-bar {
    max-height: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    opacity: 0;
    border-width: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .header .search-bar input {
    padding: 8px 12px;
    font-size: 0.88rem;
  }

  /* Park the sticky toolbar just below the collapsed fixed header */
  .products-header {
    top: 68px;
  }
}

/* ==========================================================================
   NAV DRAWER (Mobile Side Menu)
   ========================================================================== */
.nav-drawer {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}

.nav-drawer.open {
  transition: opacity 0.3s ease, visibility 0s linear 0s;

  pointer-events: auto;
  visibility: visible;
}

.nav-drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 8, 69, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nav-drawer.open .nav-drawer-overlay {
  opacity: 1;
}

.nav-drawer-content {
  position: absolute;
  top: 12px;
  right: -320px;
  width: 296px;
  max-width: 88vw;
  height: auto;
  max-height: calc(100% - 24px);
  background: var(--white);
  border-radius: 14px 14px 0 14px;
  box-shadow: -8px 0 40px rgba(91, 14, 138, 0.15);
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 20px 18px 0;
  display: flex;
  flex-direction: column;
}

.nav-drawer.open .nav-drawer-content {
  right: 0;
}

.nav-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--purple-deep);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.nav-drawer-close:hover {
  background: var(--purple-pale);
}

.nav-drawer-list {
  list-style: none;
  padding: 0;
  margin: 48px 0 18px;
  font-size: 1rem;
}

.nav-drawer-list li {
  margin-bottom: 2px;
}

.nav-drawer-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -18px;
  padding: 11px 18px;
  color: var(--purple-deep);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.nav-drawer-list a:hover,
.nav-drawer-list a.active {
  background: var(--purple-pale);
  color: var(--purple-primary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .nav-campaign (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.nav-drawer-list .nav-icon {
  display: none;
}

/* CTA-nupp menüüs */
.nav-drawer-cta {
  width: 100%;
  justify-content: center;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 18px 18px 0 0;
}

/* Alumine sektsioon – eristuv taust, servast servani */
.nav-drawer-contact {
  flex: 0 0 auto;
  margin: 0 -18px;
  padding: 20px 18px 22px;
  background: #F4F6F8;
  border-top: 1px solid rgba(91, 14, 138, 0.10);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-drawer-phone {
  display: block;
  color: var(--purple-deep);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 4px 0 10px;
}

.nav-drawer-phone:hover {
  color: var(--purple-primary);
}

.nav-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer-links a {
  display: block;
  color: var(--purple-deep);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 0;
  border-radius: 6px;
  transition: color 0.2s;
}

.nav-drawer-links a:hover {
  color: var(--purple-primary);
}

/* --------------------------------------------------------------------------
   KEELEVALIK SAHTLIMENUUS (20.08.2026)
   Ulemine lipuriba on mobiilis peidetud, seega on see AINUS koht, kust
   telefonis keelt vahetada. Varem oli siin tekstilink "По-русски", mis
   naitas ainult teist keelt. Nuud on siin samad kaks lippu, mis lauaarvutis:
   aktiivne keel taisvarviline, teine tuhmim.
   Margenduse teeb js/common.js (initKeelevahetus, plokk 2).

   Lippude .lang-flag pohivorm on failis ulalpool ("KEELEVALIK LIPPUDEGA").
   Siin ainult suurus ja paigutus - nii jaab varv, vari ja aktiivse keele
   markimine molemas kohas kindlasti samaks.
   -------------------------------------------------------------------------- */
.nav-drawer-langs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(91, 14, 138, 0.10);
}

/* Sormega tabamiseks suurem lipp kui ulemises ribas (21x15). */
.nav-drawer-langs .lang-flag {
  position: relative;
  overflow: visible;          /* et 44px puutepind ::after ei jaaks lohki */
  box-shadow: none;
}

.nav-drawer-langs .lang-flag svg {
  width: 34px;
  height: 24px;
  border-radius: 3px;
  /* Vari kaib nuud SVG peale, sest lingil endal on overflow: visible. */
  box-shadow: 0 0 0 1px rgba(91, 14, 138, 0.28);
}

.nav-drawer-langs .lang-flag.is-active svg {
  box-shadow: 0 0 0 2px var(--purple-primary);
}

.nav-drawer-langs .lang-flag:hover {
  transform: none;            /* menuus ei ole hupet vaja */
}

/* Nahtav lipp jaab 34x24, puutepind on 44x44 - sama vote, mida fail juba
   mujal kasutab (vt "Nahtav suurus jaab, puutepind kasvab"). */
.nav-drawer-langs .lang-flag::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}




/* ==========================================================================
   NAV DRAWER (Side Menu)
   ========================================================================== */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}

.nav-drawer.open {
  pointer-events: auto;
  visibility: visible;
}

/* Scroll Reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ===== Variant Selector on Product Cards ===== */
.variant-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: stretch;
}

/* "Vali võimsusklass" — mobile only, always on two lines */
/* EEMALDATUD 18.08.2026 - surnud kood: .variant-select-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

@media (max-width: 768px) {
  /* EEMALDATUD 18.08.2026 - surnud kood: .variant-select-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  /* Sama kohtlemine tootelehe sildil */
  .variant-label {
    min-width: 0 !important;
    width: 100%;
    flex: 0 0 100%;
    font-size: 0.78rem;
    line-height: 1.15;
    padding-right: 0;
    margin-bottom: 2px;
    white-space: nowrap;
  }
}

.variant-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-btn:not(.active):hover {
  border-color: var(--purple-primary);
  color: var(--purple-primary);
  background: rgba(118, 53, 220, 0.04);
}

.variant-btn.active {
  background: var(--purple-primary);
  color: #fff;
  border-color: var(--purple-primary);
}

.variant-btn.active:hover {
  background: var(--purple-primary);
  color: #fff;
  border-color: var(--purple-primary);
}


/* ==========================================================================
   Quick-spec action buttons (Toote brožüür / Tehnilised andmed)
   ========================================================================== */
.qs-actions {
  margin-top: 26px;
  padding-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

/* Divider that fades out towards both edges */
.qs-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(91, 14, 138, 0) 0%,
      rgba(91, 14, 138, 0.18) 35%,
      rgba(91, 14, 138, 0.18) 65%,
      rgba(91, 14, 138, 0) 100%);
}

.qs-actions .btn {
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .qs-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .qs-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  .qs-actions .btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ==========================================================================
   Info Accordion (bottom of category pages)
   ========================================================================== */
/* EEMALDATUD 18.08.2026 - surnud kood: .info-accordion-section (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.info-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-acc-item {
  border: 1px solid rgba(91, 14, 138, 0.12);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 4px 18px -12px rgba(91, 14, 138, 0.35);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.info-acc-item:hover {
  border-color: rgba(91, 14, 138, 0.28);
}

.info-acc-item.open {
  border-color: rgba(91, 14, 138, 0.32);
  box-shadow: 0 14px 34px -20px rgba(91, 14, 138, 0.55);
}

.info-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--purple-deep);
  transition: background 0.2s ease;
}

.info-acc-head:hover {
  background: rgba(118, 53, 220, 0.035);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .info-acc-index (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.info-acc-title {
  flex: 1 1 auto;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

.info-acc-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--purple-primary);
  background: var(--purple-pale);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}

.info-acc-item.open .info-acc-icon {
  transform: rotate(180deg);
}

.info-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-acc-item.open .info-acc-panel {
  grid-template-rows: 1fr;
}

.info-acc-panel>.info-acc-body {
  overflow: hidden;
  min-height: 0;
}

.info-acc-body {
  padding: 0 20px;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 0.95rem;
}

.info-acc-item.open .info-acc-body {
  padding-bottom: 20px;
}

.info-acc-body>*:first-child {
  margin-top: 0;
}

.info-acc-body>*:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  /* EEMALDATUD 18.08.2026 - surnud kood: .info-accordion-section (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

  .info-acc-head {
    padding: 15px 14px;
    gap: 10px;
  }

  .info-acc-title {
    font-size: 0.94rem;
  }

  .info-acc-body {
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .info-acc-item.open .info-acc-body {
    padding-bottom: 16px;
  }
}

/* Marketing Features Section */
.marketing-features {
  padding: 30px 0 80px;
  background: #fff;
}

.feature-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 50px;
  margin-bottom: 80px;
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row.reverse {
  flex-direction: row-reverse;
}

.feature-content {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-image-box {
  flex: 1;
  min-width: 320px;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  background-color: #fdfdfd;
  border: 1px solid rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
}

.feature-image-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.feature-title {
  font-size: 2.2rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.feature-description {
  font-size: 1.1rem;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 24px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-grid-item strong {
  display: block;
  font-size: 1.8rem;
  color: var(--purple-primary);
  margin-bottom: 8px;
  line-height: 1;
}

.feature-grid-item span {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: block;
}

@media (max-width: 768px) {
  .feature-title {
    font-size: 1.8rem;
  }

  .feature-row {
    gap: 30px;
    margin-bottom: 60px;
  }

  .feature-image-box {
    min-height: 250px;
  }
}


@media (max-width: 992px) {
  .product-gallery {
    position: relative !important;
    top: auto !important;
    z-index: 1;
  }

  .sticky-variant-container {
    position: relative;
  }

  .sticky-variant-container #variant-grid {
    position: sticky;
    top: 54px;
    z-index: 990;
    background: rgba(255, 255, 255, 0.97);
    /* AUDIT 25.08.2026 - eemaldatud: backdrop-filter: blur(8px).
       position:sticky + backdrop-filter on kalleim kombinatsioon CSS-is:
       element liigub kerimisel, seega hägustatakse tema taga olev sisu
       IGA KERIMISKAADRI jaoks uuesti. Taust on juba 97% läbipaistmatu,
       seega 3% läbi paistvat hägu ei ole nagunii näha - visuaalselt
       eristamatu, aga tootelehe kerimine mobiilis muutub tuntavalt
       kergemaks. */
    padding: 10px 0;
    margin-top: -10px;
    /* Kleepuv element peatub siis, kui tema MARGIN-kast jõuab
       .sticky-variant-container'i põhja. Nupurida (TELLI / SAADA PÄRING)
       on 44px kõrge, seega 56px alumine veeris jätab riba seisma täpselt
       12px nuppude kohale - riba ei kata neid enam kunagi kinni.
       Järgnev plokk tõmmatakse negatiivse ülemise veerisega tagasi, nii et
       visuaalne paigutus jääb samaks: 56px + (-32px) = 24px nagu enne. */
    margin-bottom: 56px;
  }

  /* Kompensatsioon: järgmine plokk tõmmatakse 32px võrra tagasi, et
     nähtav vahe jääks täpselt endiseks. .color-grid'il oli juba -12px,
     seega sellele -12px - 32px. */
  .sticky-variant-container #variant-grid + * {
    margin-top: -32px;
  }

  .sticky-variant-container #variant-grid + .color-grid {
    margin-top: -44px;
  }
}

/* ==========================================================================
   Added during the accessibility / correctness pass
   ========================================================================== */

/* Keyboard users need a way past the header and nav that repeat on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #5b0e8a;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* A visible focus ring is a WCAG 2.4.7 requirement; :focus-visible keeps it
   off for mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 2px;
}

/* Form submission feedback, replacing the old blocking alert(). */
.form-result {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Compare search dropdown entries, previously styled with inline attributes. */
.search-result-add {
  font-size: 0.8rem;
  color: var(--purple-primary, #5b0e8a);
  float: right;
}
.search-result-empty {
  padding: 10px;
  color: #666;
  font-size: 0.9rem;
}

/* Wrapper for the injected brochure button. */
.brochure-wrap {
  text-align: center;
  margin-bottom: 24px;
}
.btn-brochure {
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Respect the visitor's reduced-motion preference (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* EEMALDATUD 18.08.2026 - surnud kood: .feature-row--wide (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Footnote under the technical specifications table. */
.specs-footnote {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #666);
}

/* Available to screen readers, removed from the visual layout. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Gallery thumbnails are keyboard-operable, so they need a focus ring. */
.thumb-row img:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 2px;
}


/* A stat grid followed by more prose needs breathing room; without this the
   paragraph butts straight up against the figures. */
.feature-grid + .feature-description {
  margin-top: 24px;
}

/* Feature rows that carry an image give the stat grid roughly half the width,
   so long Estonian compounds ("Hooldusküte", "Liikumisandur") no longer fit at
   the original 1.8rem. Shrink a little and hyphenate properly -- deliberately
   NOT overflow-wrap: break-word, which chops words at arbitrary points
   ("Hooldusküt|e") instead of at syllable boundaries. */
.feature-grid-item strong {
  font-size: 1.5rem;
  hyphens: auto;
}

/* Track floor of 170px so Estonian compounds ("Hooldusküte") never get
   squeezed, but capped at 100% so auto-fit can never make the grid wider than
   its container -- a bare minmax(170px, 1fr) overflows on narrow phones.
   min() handles both ends without a single media query. */
.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}


/* ==========================================================================
   Main navigation between the mobile drawer (<=768px) and full desktop width
   --------------------------------------------------------------------------
   Five items with icons and long Estonian labels ("Ventilatsiooniseadmed")
   need ~1200px. Below that they pushed the whole document wider than the
   viewport, so every page scrolled sideways on tablets and small laptops.
   Scaling the nav down keeps it on one row without touching desktop layout.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1260px) {
  .nav-list {
    gap: 2px;
  }

  .nav-list a {
    padding: 14px 8px;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
  }

  .nav-list a .nav-icon {
    margin-right: 2px;
  }
}

@media (min-width: 769px) and (max-width: 1040px) {
  /* Icons are decorative (aria-hidden); dropping them buys the ~135px needed
     to keep the labels themselves readable. */
  .nav-list a .nav-icon {
    display: none;
  }

  .nav-list a {
    padding: 14px 6px;
    font-size: 0.86rem;
  }
}

@media (min-width: 769px) and (max-width: 860px) {
  /* Tightest desktop-nav tier: at 769px the row still needed ~40px more than
     the container offered. */
  .nav-list a {
    padding: 14px 3px;
    font-size: 0.78rem;
    letter-spacing: 0;
  }

  .nav-list {
    gap: 0;
  }
}

/* Very narrow phones (<=360px, e.g. iPhone SE 1st gen). The variant selector
   carries inline min-width values from the original template, which forced the
   whole product column wider than the screen. !important is needed because the
   constraint lives in a style attribute. */
@media (max-width: 360px) {
  /* A "1fr" grid track still refuses to shrink below its content's min-content
     width, so the product column stayed 330px wide on a 320px screen.
     min-width: 0 releases that floor; the inline min-widths on the variant
     selector need !important because they live in style attributes. */
  .product-detail-grid > * {
    min-width: 0;
  }

  .variant-grid .variant-label,
  .variant-grid .variant-btn,
  .variant-grid > div {
    min-width: 0 !important;
  }

  .product-gallery,
  .hinnainfo,
  .sticky-variant-container,
  .price-box {
    max-width: 100%;
  }

  /* .feature-content and .feature-image-box both declare min-width: 320px,
     which is wider than the content box on a 320px screen. Dropping the floor
     alone would let them sit side by side at ~140px each, so pin the basis to
     100% and keep them stacked. */
  .feature-content,
  .feature-image-box {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* Final guard against sideways scrolling. The off-canvas mobile drawer sits at
   right: -340px, which widens the document on very narrow screens.
   `clip` rather than `hidden` on purpose: hidden would turn <body> into a
   scroll container and break every `position: sticky` element on the site
   (product toolbar, variant selector). clip has no such side effect. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Energy-class badge inside "Üldandmed".
   The default .badge-green is 31px tall while a plain value is 21px, so its
   grid row was pushed ~10px taller than the SCOP row beside it. Scoped to
   .quick-spec so product cards and spec tables keep the larger badge.
   Sized to land on the same 21px line box: 0.8rem x 1.2 line-height + 3px
   padding top/bottom. */
.quick-spec .qs-value .badge-green {
  align-self: stretch;
  padding: 0 10px;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(56, 160, 68, 0.22);
}

/* An inline-level badge sits in a line box that reserves room for descenders,
   which left the value taller than a plain text one. Making the wrapper a flex
   box removes that line box; min-height: 1.2em then reproduces exactly the line
   box a plain value would occupy, so the badge can never drive the row height
   no matter what font size the breakpoint sets. */
.quick-spec .qs-value:has(.badge-green) {
  display: flex;
  align-items: stretch;
  min-height: 1.2em;
}

@media (max-width: 576px) {
  /* .qs-value drops to 0.9rem here, so the badge follows it down. */
  .quick-spec .qs-value .badge-green {
    padding: 0 8px;
    font-size: 0.72rem;
  }
}

/* Tellimusvormi tagasiside ja robotilõks. */
.form-result--error {
  background: #fdecea;
  color: #8a1c11;
}

.field-error {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #b3261e;
  font-weight: 600;
}

[aria-invalid="true"] {
  border-color: #b3261e !important;
}

/* Honeypot: peidus ekraanilt, aga mitte display:none - osa botte oskab
   sellist välja vahele jätta. Päris kasutaja siia ei satu (tabindex="-1"). */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   Värvivalik - ringikujulised värviproovid (#color-grid)
   --------------------------------------------------------------------------
   Nupp NÄITAB värvi, mitte ei kirjuta selle nime. Nimi on title- ja
   aria-label-atribuudis, seega hiirega kohal hoides ja ekraanilugejaga on see
   ikka olemas; tellimuse kinnitusse jõuab nimi serveri hinnakirjast.
   ========================================================================== */

.color-grid {
  /* Tihedalt võimsusklassi rea alla, aga mitte selle alla peitu. */
  margin-top: -12px;
  align-items: center;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}

/* Ringi enda mõõt ja värv. Värv tuleb --swatch muutujast, mille lehe
   nupumärgend seab (nii jääb CSS tootest sõltumatuks). */
.color-swatch {
  --swatch: #ffffff;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: var(--swatch);
  background-clip: padding-box;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.color-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Valitud: valge vahe ja selle ümber saidi lilla ring. Vahe hoiab ringi
   nähtavana ka siis, kui värviproov ise on tume. */
.color-swatch.active {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--purple-deep);
}

.color-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--purple-primary);
}

/* Pärlmutter-toon: pehme diagonaalne läige, mitte terav pooleks jaotus. */
.color-swatch[data-swatch-2]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--swatch) 0%, var(--swatch-2) 48%, var(--swatch) 100%);
}

@media (max-width: 480px) {
  .color-swatch {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   Ankrulingid ja kleepuv päis
   --------------------------------------------------------------------------
   Päis ja peamenüü on position:sticky. Ilma scroll-margin-top'ita kerib
   brauser sihtmärgi täpselt ekraani ülaserva ehk päise ALLA peitu - kasutajale
   näib, nagu oleks leht liiga alla kerinud.
   ========================================================================== */

#tehnilised-andmed,
.specs-section,
.marketing-features {
  /* Lauaarvutis on kleepuvad päis (116px) ja peamenüü (52px) kokku 168px.
     152px + sektsiooni ülapolster viib pealkirja nende alla nähtavale. */
  scroll-margin-top: 152px;
}

@media (max-width: 992px) {
  /* Mobiilis on päis position:fixed ja katab ülemised ~62px. */
  #tehnilised-andmed,
  .specs-section,
  .marketing-features {
    scroll-margin-top: 64px;
  }
}

/* Võimsusklassi ja värvi sildid peavad olema TÄPSELT sama laiad, muidu algavad
   read eri kohast ja veerud ei joondu. Kitsamal ekraanil 145px (silt murdub
   kahele reale), laiemal 155px, mis hoiab "Vali võimsusklass" ühel real. */
@media (min-width: 481px) {
  .sticky-variant-container .variant-grid > .variant-label {
    flex: 0 0 145px;
    width: 145px;
    min-width: 145px;
  }
}



/* Alla 481px ei jää sildi kõrvale mõistlikku ruumi: 145px silt jätaks kahele
   värvinupule ~95px, kuhu "Rubiinpunane" enam ei mahu. Anname sildile oma rea
   MÕLEMAS ruudustikus - nii jäävad nupud suureks ja read joonduvad endiselt. */
@media (max-width: 480px) {
  .sticky-variant-container .variant-grid > .variant-label {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
    padding-right: 0;
    margin-bottom: -4px;
  }
}

/* Nähtamatu vahetäide võimsusklassi real: hoiab neljandat veergu, et värvirea
   neli nuppu joonduksid. Peab olema .variant-btn, et flex jagaks ruumi
   täpselt samamoodi - "flex: 1 1 0" üksi ei anna sama tulemust, sest ääris ja
   sisepolster mõjutavad jaotust. */
.variant-spacer {
  visibility: hidden;
  pointer-events: none;
}


/* ==========================================================================
   Järelmaksu leht (jarelmaks/)
   ========================================================================== */

.page-header-lead {
  margin: 10px 0 0;
  max-width: 640px;
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: 0.92;
}

.finance-section {
  padding: 3.5rem 0;
  background: var(--off-white);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .finance-grid, .finance-calc, .finance-form-box, .finance-heading jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* -- tulemus -------------------------------------------------------------- */

/* EEMALDATUD 18.08.2026 - surnud kood: .finance-output, .finance-output-row, .finance-output-row--sub, .finance-output-label jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.finance-note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* -- vorm ----------------------------------------------------------------- */

.finance-form-lead {
  margin: -6px 0 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .finance-submit (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   KKK <details> kujul
   --------------------------------------------------------------------------
   Olemasolev .faq-answer on display:none (JS-akordioni jaoks). Natiivne
   <details> avaneb ilma JS-ita, seega lubame avatud olekus sisu nähtavaks.
   ========================================================================== */

.faq-section {
  padding: 3.5rem 0 4.5rem;
  background: var(--white);
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

details.faq-item > summary.faq-question {
  list-style: none;
  border-radius: var(--radius-sm);
}

details.faq-item > summary.faq-question::-webkit-details-marker {
  display: none;
}

details.faq-item > summary.faq-question::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 16px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}

details.faq-item[open] > summary.faq-question::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

details.faq-item[open] > summary.faq-question {
  background: #ece7f2;
  color: var(--purple-deep);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details.faq-item[open] .faq-answer {
  display: block;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

summary.faq-question:focus-visible {
  outline: 2px solid var(--purple-primary);
  outline-offset: 2px;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .finance-grid, .finance-calc, .finance-form-box, .period-grid jt (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   Paigalduse leht (paigaldus/)
   ========================================================================== */

.install-section {
  padding: 3.5rem 0;
  background: var(--off-white);
}

.install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.install-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.install-card {
  position: relative;
  background: var(--white);
  border: 1px solid #ece7f2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  transition: transform 0.32s cubic-bezier(0.22, 0.7, 0.28, 1),
              box-shadow 0.32s cubic-bezier(0.22, 0.7, 0.28, 1),
              border-color 0.32s ease;
}

/* pehme lilla kuma kaardi serva ümber */
.install-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--purple-lighter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.install-card:hover,
.install-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--purple-lighter);
}

.install-card:hover::after,
.install-card:focus-within::after {
  opacity: 1;
}

.install-card--main {
  border-color: #d9cbe8;
  box-shadow: var(--shadow-md);
}

@media (hover: none) {
  .install-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .install-card:hover,
  .install-card:focus-within {
    transform: none;
  }
}

.install-price-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ece7f2;
}

.install-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin: 0;
}

.install-sub {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.install-price {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--purple-deep);
  line-height: 1.1;
  white-space: nowrap;
}

.install-subheading {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

/* -- "hinna sees on" nimekiri --------------------------------------------- */

.incl-list {
  columns: 2;
  column-gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-primary);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.incl-item:last-child {
  margin-bottom: 0;
}

.incl-tick {
  flex: none;
  margin-top: 2px;
  color: #2e7d32;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .install-note (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* -- lisatööd ------------------------------------------------------------- */

.extra-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.extra-item {
  padding: 14px 0;
  border-top: 1px solid #f0ecf5;
}

.extra-item:first-child {
  border-top: none;
  padding-top: 0;
}

.extra-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.extra-name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-primary);
}

.extra-price {
  flex: none;
  font-weight: 700;
  color: var(--purple-deep);
  white-space: nowrap;
}

.extra-price--ask {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.extra-desc {
  margin: 4px 0 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* -- kes paigaldab -------------------------------------------------------- */

/* EEMALDATUD 18.08.2026 - surnud kood: .installer-section, .installer-grid, .installer-card, .installer-icon (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.installer-lead {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* -- üleskutse ------------------------------------------------------------ */

.install-cta {
  padding: 0 0 4.5rem;
  background: var(--white);
}

.install-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 34px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #5b0e8a, #7b1fa2);
  color: var(--white);
}

.install-cta-inner h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
}

.install-cta-inner p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  opacity: 0.9;
}

.install-cta-btn {
  flex: none;
}

/* -- kitsamad ekraanid ---------------------------------------------------- */

@media (max-width: 992px) {
  .install-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .install-col {
    gap: 20px;
  }
  /* EEMALDATUD 18.08.2026 - surnud kood: .installer-grid (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

}

@media (max-width: 560px) {
  .install-card {
    padding: 22px 18px;
  }
  .incl-list {
    columns: 1;
  }
  .install-price {
    font-size: 1.8rem;
  }
  .install-cta-inner {
    padding: 24px 20px;
  }
  .install-cta-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  #order-modal .modal-content > div:nth-of-type(1) { order: 2; }
  #order-modal .modal-content > div:nth-of-type(2) { order: 1; }
}

.main-nav {
  transition: box-shadow 0.3s ease;
}
/* EEMALDATUD 18.08.2026 - surnud kood: .nav-scrolled (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* Hide cart buttons */
#cart-btn-desktop,
#cart-btn {
  display: none !important;
}

.variant-selector .variant-btn {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  flex: 0 0 60px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header separator line */

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1480px;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(91, 14, 138, 0.15) 8.8%, rgba(91, 14, 138, 0.15) 91.2%, transparent 100%);
  pointer-events: none;
}
/* (Vana reegel eemaldatud: otsinguriba kolis top-barisse, seetottu ei ole
   .main-search-bar'i margin-left:auto ja .header-actions margin-left:0 enam
   vajalikud - need lykkasid "Kusi pakkumist" nupu ekraanilt valja.
   Uus header'i paigutus on failis lopus, plokis "HEADER LAYOUT". ) */
/* Variant btn size override to fill 25% */
.variant-selector .variant-btn {
  width: calc((100% - 24px) / 4) !important;
  min-width: calc((100% - 24px) / 4) !important;
  max-width: calc((100% - 24px) / 4) !important;
  flex: 0 0 calc((100% - 24px) / 4) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Filter item spacing and font-weight */
/* EEMALDATUD 18.08.2026 - surnud kood: .filter-list (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.filter-item label { font-weight: 400 !important; font-size: 0.9rem !important; }

/* Page header bottom padding to reduce gap to sort button */
@media (min-width: 769px) {
  .products-layout {
    padding-top: 1.5rem !important;
  }
}

/* Footer dark theme */
.footer { background: linear-gradient(to bottom, rgba(28,11,48,1) 0%, rgba(53,24,92,1) 100%) !important; color: #fff !important; border-top: none; }
.footer-brand p, .footer-col ul a {
  color: #e0dced !important;
  opacity: 1 !important;
}
.footer-col h4, .footer-col ul a:hover, .footer-contact .contact-icon {
  color: #fff !important;
}

/* Homepage maintenance background fix */
@media (min-width: 993px) {
  .maintenance {
    background: linear-gradient(90deg, rgba(28, 11, 48, 0.94) 0%, rgba(53, 19, 86, 0.8) 50%, rgba(28, 11, 48, 0.3) 100%), url('images/remonthooldus.jpg') center center / cover no-repeat !important;
  }
}

/* Product price font weight */
.product-price-large {
  font-weight: 700 !important;
}
/* Final overrides for filters, maintenance, and footer */
/* EEMALDATUD 18.08.2026 - surnud kood: .filter-list (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.filter-item label {
  font-weight: 400 !important;
  font-size: 0.9rem !important;
}

.maintenance {
  border-bottom: none !important;
}

.footer {
  background: linear-gradient(to bottom, rgba(28,11,48,1) 0%, rgba(53,24,92,1) 100%) !important;
  border-top: none !important;
}


/* ===== Esilehe kategooriakaardid fotoga =====
   Foto asub kaardi ülaservas üle kogu laiuse, tekst ja nupp jäävad alla.
   Kaardi kõrgust see ei muuda - see tuleb endiselt .cat-card-modern
   min-height'ist ja grid'i ühtlustusest.

   Uue foto panekul piisab index.html-is vastava kaardi img src'i muutmisest.
   Kui foto kadreering on teine, sea ainult object-position ümber, et seade
   jääks kaadrisse - kõik muu on kõigil neljal kaardil ühine. */
#card-air-pump .cat-card-visual,
#card-conditioner .cat-card-visual,
#card-heat-pump .cat-card-visual,
#card-ventilation .cat-card-visual {
  order: -1;                 /* pilt kaardi ülaserva, teksti kohale */
  padding: 0;
  min-height: 0;
  flex: 0 0 auto;
  overflow: hidden;
  justify-content: center;   /* tühistab vanad kaardipõhised erandid */
}

#card-air-pump .cat-card-img,
#card-conditioner .cat-card-img,
#card-heat-pump .cat-card-img,
#card-ventilation .cat-card-img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: 250px;
  object-fit: cover;
  filter: none;
  display: block;            /* sirge alumine serv, hajutust ei ole */
}

/* Kadreering fotode kaupa - seade peab jääma nähtavale. */
#card-air-pump .cat-card-img    { object-position: center 30%; }
#card-conditioner .cat-card-img { object-position: center 28%; }
#card-heat-pump .cat-card-img   { object-position: center 45%; }
#card-ventilation .cat-card-img { object-position: center 50%; }

/* Tekst kaardi alaossa, nupu lähedale; pildi ja pealkirja vahele jääb õhku. */
#card-air-pump .cat-card-content,
#card-conditioner .cat-card-content,
#card-heat-pump .cat-card-content,
#card-ventilation .cat-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* pealkiri algab kohe pildi alt - kõigil ühel kõrgusel */
  padding: 22px 22px 10px;
}

#card-air-pump .cat-card-desc,
#card-conditioner .cat-card-desc,
#card-heat-pump .cat-card-desc,
#card-ventilation .cat-card-desc {
  margin-bottom: 4px;
}

/*
  Kirjelduse plokk hoiab kõigil kaartidel ühe kõrguse (pikima teksti järgi,
  8em = 5 rida), et pealkirjad oleksid täpselt ühel joonel ja nupu kohale ei
  jääks eri suurust tühja ala. Kehtib ainult neljaveerulises vaates - kitsamas
  murduvad read teisiti ja lukustatud kõrgus teeks rohkem kahju kui kasu.
*/
@media (min-width: 1025px) {
  #card-air-pump .cat-card-desc,
  #card-conditioner .cat-card-desc,
  #card-heat-pump .cat-card-desc,
  #card-ventilation .cat-card-desc {
    min-height: 8em;
  }
}

#card-air-pump:hover .cat-card-img,
#card-conditioner:hover .cat-card-img,
#card-heat-pump:hover .cat-card-img,
#card-ventilation:hover .cat-card-img {
  transform: scale(1.04);    /* õrnem kui vaikimisi, muidu nihkub seade servast */
}

@media (max-width: 576px) {
  #card-air-pump .cat-card-img,
  #card-conditioner .cat-card-img,
  #card-heat-pump .cat-card-img,
  #card-ventilation .cat-card-img {
    height: 200px;
  }
}

/* Tweak: Push category card text a bit downwards */
.category-card .cat-card-content {
  padding-top: 40px !important;
}
/* Typography tweaks */
.featured-content p {
  font-size: 1.1rem !important;
}

.footer {
  font-size: 1.1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer p, .footer a, .footer-col ul a {
  font-size: 1.1rem !important;
}

.maintenance {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Tweak: Category card subtext font size */
.cat-card-desc {
  font-size: 1rem !important;
}


/* ===== Esilehe järelmaksu üleskutse =====
   Sama markup mis paigalduse lehel (.install-cta), aga hele variant:
   valge taust kogu ekraani laiuses ja tume tekst. Lilla gradientkast
   jääks siin hoolduse tumeda ploki alla kahe raske pinna vahele. */
.install-cta--light {
  background: var(--white);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.install-cta--light::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  background-image: url('images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.04;
  pointer-events: none;
}

.install-cta--light .install-cta-inner {
  background: none;
  color: var(--text-primary);
  padding: 0;
  display: block;
  position: relative;
  z-index: 1;
}

.install-cta--light .install-cta-inner h2 {
  color: var(--purple-deep);
  font-size: 1.75rem;
  margin-bottom: 12px;
}

.install-cta--light .install-cta-inner p {
  color: var(--text-secondary);
  opacity: 1;
  font-size: 1.1rem;
  max-width: 60ch;
  margin-bottom: 24px;
}

.install-cta--light .install-cta-btn {
  display: inline-flex;
  margin-top: 4px;
}

/* Järelmaksu nupp – sama disain nagu hero "Vaata tooteid" */
.install-cta--light .install-cta-btn.btn-cat-action .arrow-svg {
  width: 14px;
  height: 14px;
}

.install-cta--light .install-cta-btn.btn-cat-action:hover .arrow-svg {
  transform: translateX(4px);
}

@media (max-width: 560px) {
  .install-cta--light {
    padding: 2.5rem 0;
  }
  .install-cta--light .install-cta-inner {
    padding: 0;
  }
}
/* ==========================================================================
   Compare Modal Tech Specs Column Filtering
   ========================================================================== */
.compare-full-specs .specs-table-wrap.multi-col[class*="active-col-"] th:not(:first-child),
.compare-full-specs .specs-table-wrap.multi-col[class*="active-col-"] td:not(:first-child) {
  display: none !important;
}

.compare-full-specs .specs-table-wrap.multi-col.active-col-1 th:nth-child(2),
.compare-full-specs .specs-table-wrap.multi-col.active-col-1 td:nth-child(2),
.compare-full-specs .specs-table-wrap.multi-col.active-col-2 th:nth-child(3),
.compare-full-specs .specs-table-wrap.multi-col.active-col-2 td:nth-child(3),
.compare-full-specs .specs-table-wrap.multi-col.active-col-3 th:nth-child(4),
.compare-full-specs .specs-table-wrap.multi-col.active-col-3 td:nth-child(4),
.compare-full-specs .specs-table-wrap.multi-col.active-col-4 th:nth-child(5),
.compare-full-specs .specs-table-wrap.multi-col.active-col-4 td:nth-child(5),
.compare-full-specs .specs-table-wrap.multi-col.active-col-5 th:nth-child(6),
.compare-full-specs .specs-table-wrap.multi-col.active-col-5 td:nth-child(6),
.compare-full-specs .specs-table-wrap.multi-col.active-col-6 th:nth-child(7),
.compare-full-specs .specs-table-wrap.multi-col.active-col-6 td:nth-child(7) {
  display: table-cell !important;
}

.compare-full-specs .specs-table-wrap.multi-col[class*="active-col-"] td[colspan] {
  display: table-cell !important;
}

/* ==========================================================================
   HEADER LAYOUT  (lisatud: header'i rea korrastus)
   --------------------------------------------------------------------------
   Ridade jarjekord desktopis:  LOGO -> MENUU -> "Kusi pakkumist" nupp.
   Otsinguriba jaab top-bari (ei tule header'isse tagasi).
   Koik reeglid on scope'itud >=993px, et mobiilivaade jaaks puutumata.
   ========================================================================== */

/* --- Top bar: madalam otsinguriba ---------------------------------------- */
.top-bar .search-bar {
  height: 32px;
  max-width: 250px;
  flex: 0 1 250px;
}

.top-bar .search-bar input {
  height: 100%;
  padding: 0 14px;
  font-size: 0.85rem;
}

.top-bar .search-bar button:not(.search-clear-btn) {
  width: 38px;
  height: calc(100% + 4px);
  min-height: 0;
  padding: 0;
  margin: -2px -2px -2px 0;
  flex: 0 0 38px;
}

.top-bar .search-bar button:not(.search-clear-btn) svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.top-bar .search-bar button.search-clear-btn {
  height: 100% !important;
  min-height: 0 !important;
  width: 26px !important;
}

.top-bar .search-dropdown {
  top: calc(100% + 8px);
}

@media (min-width: 993px) {

  /* Sticky-offset peab vastama top-bari uuele korgusele (6+32+6 = 44px),
     muidu jaab header'i ulaserv kerimisel top-bari alla. */
  .header {
    top: 44px;
  }

  /* --- Header'i rida ----------------------------------------------------- */
  .header .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .header .logo {
    flex: 0 0 auto;
  }

  /* Menuu asub logo ja CTA-nupu vahel ning votab ainult vaba ruumi. */
  .header .nav-list {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: center;
    gap: 0;
  }

  /* Vahed kategooriate vahel tunduvalt vaiksemad + tahevahe tagasi normi. */
  .header .nav-list a {
    padding: 10px 12px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* Uhtlane vahe ka esimese ja viimase punkti juures. */
  .header .nav-list li:first-child a {
    padding-left: 12px;
  }

  .header .nav-list li:last-child a {
    padding-right: 12px;
  }

  .header .header-actions {
    flex: 0 0 auto;
    margin-left: 0;
    gap: 12px;
  }

  .header .header-cta .btn {
    white-space: nowrap;
  }
}

/* --- Kitsamad desktop-ekraanid: menuu tommatakse kokku, mitte ule aare ---- */
@media (min-width: 993px) and (max-width: 1400px) {
  .header .container {
    gap: 14px;
  }

  .header .nav-list a {
    padding: 10px 8px;
    font-size: 0.9rem;
    letter-spacing: 0;
  }

  .header .nav-list li:first-child a {
    padding-left: 8px;
  }

  .header .nav-list li:last-child a {
    padding-right: 8px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .header .container {
    gap: 10px;
  }

  .header .nav-list a {
    padding: 8px 6px;
    font-size: 0.83rem;
  }

  .header .nav-list li:first-child a {
    padding-left: 6px;
  }

  .header .nav-list li:last-child a {
    padding-right: 6px;
  }

  .header .logo {
    font-size: 1.2rem;
  }

  .header .logo-img {
    width: 38px;
    height: 38px;
  }

  .header .header-cta .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 0.82rem;
  }
}

/* 993-1100px: logo tekst ara, et menuu ja CTA mahuksid tervikuna ritta. */
@media (min-width: 993px) and (max-width: 1100px) {
  .header .logo > span:not(.logo-icon) {
    display: none;
  }
}

/* --- Tahvel (769-992px): menuu laheb logo/CTA rea alla omaette ritta ------
   Nii jaavad logo, koik menuupunktid ja "Kusi pakkumist" nupp nahtavaks,
   ilma et miski jookseks ekraanist valja. Mobiili hamburger-menuu piir
   (<=768px) jaab muutmata. */
@media (min-width: 769px) and (max-width: 992px) {
  .header {
    top: 44px;
  }

  .header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 16px;
  }

  .header .logo {
    order: 1;
    flex: 0 0 auto;
  }

  .header .header-actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 12px;
  }

  .header .header-cta .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .header .nav-list {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(91, 14, 138, 0.10);
  }

  .header .nav-list a {
    padding: 7px 6px;
    font-size: 0.84rem;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .header .nav-list li:first-child a {
    padding-left: 0;
  }

  .header .nav-list li:last-child a {
    padding-right: 0;
  }

  /* Top-bar: otsing jaab ka siin top-barisse (vana reegel peitis selle
     alla 992px ara), lingid lihtsalt kitsamate vahedega. */
  .top-bar .search-bar.main-search-bar {
    display: flex;
    max-width: 200px;
    flex: 0 1 200px;
  }

  .top-bar-right {
    gap: 14px;
  }

  .top-bar-left {
    gap: 16px;
  }
}

@media (min-width: 769px) and (max-width: 880px) {
  .header .nav-list a {
    font-size: 0.78rem;
  }

  .header .logo > span:not(.logo-icon) {
    display: none;
  }
}

/* ==========================================================================
   PARANDUSED 12.08 — mobiilivaate tüpograafia, breadcrumbid, võrdlusnupp,
   töölaua peamenüü.

   Kõik siinsed reeglid on tahtlikult failis KÕIGE VIIMASED, et nad oleks
   ühe plokina leitavad ja vajadusel tervikuna eemaldatavad.
   ========================================================================== */

/* -- 1. Breadcrumbid tootelehel -------------------------------------------
   .breadcrumbs on globaalselt display:flex. Flex-konteineris muutuvad
   markupis olevad tekstisõlmed (" › ") anonüümseteks flex-elementideks ja
   nende ümbritsevad tühikud kaovad - sellest tekkiski "Avaleht›Õhksoojuspumbad".
   Tootelehel taastame tavalise tekstivoo, siis renderdatakse tühikud õigesti.
   Kategoorialehed kasutavad <span class="crumb-sep"> ja jäävad puutumata. */
.product-description .breadcrumbs {
  display: block;
}

.product-description .breadcrumbs a {
  white-space: nowrap;
}

/* -- 2. Võrdlusnupu aktiivne olek ------------------------------------------
   Nuppu ei märgitud kunagi aktiivseks: klassi .active ei lisanud ükski
   skript. Seome oleku otse märkeruudu külge, siis ei ole JS-i vaja. */
.compare-icon-btn:has(.compare-check:checked),
.compare-icon-btn.active {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(91, 14, 138, 0.18);
  color: var(--purple-primary);
}

/* -- 3. Töölaua peamenüü ---------------------------------------------------
   Menüü on paremal, "Küsi pakkumist" nupu kõrval.
   Hover jäeti tagasi endiseks (kahest servast kasvav joon nupu all), seega
   siin ainult paigutus ja nuppude vahe.                                    */
@media (min-width: 992px) {
  .header .container > .nav-list {
    margin-left: auto;
    width: auto;
    justify-content: flex-end;
    gap: 4px;
  }

  .nav-list a {
    padding: 9px 12px;
  }

  /* tühistab varasema reegli, mis võttis esimeselt nupult vasaku vahe ära */
  .nav-list li:first-child a {
    padding-left: 12px;
  }
}

/* -- 5. "Küsi pakkumist" & "Järelmaksu taotlus" hover = sama clip-path
        animatsioon mis TELLI nupul ----------------------------------------- */
#cta-quote,
#nav-drawer-cta,
#cta-jarelmaks {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#cta-quote::before,
#nav-drawer-cta::before,
#cta-jarelmaks::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  z-index: -1;
  transition: clip-path 0.35s ease-out;
  clip-path: circle(0% at 0% 0%);
  border-radius: inherit;
}

#cta-quote:hover,
#nav-drawer-cta:hover,
#cta-jarelmaks:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(91, 14, 138, 0.45);
}

#cta-quote:hover::before,
#nav-drawer-cta:hover::before,
#cta-jarelmaks:hover::before {
  clip-path: circle(150% at 0% 0%);
}

/* -- 6. Võimsusklassi nupud: joon kasvab kahest servast, nagu peamenüüs ----
   Sama muster mis .nav-list a::before/::after: kaks poolt kasvavad
   servadest keskele. Nupp on juba position: relative.                      */
.variant-btn::before,
.variant-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: #94a3b8;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.variant-btn::before {
  left: 0;
  border-radius: 2px 0 0 2px;
}

.variant-btn::after {
  right: 0;
  border-radius: 0 2px 2px 0;
}

.variant-btn:hover::before,
.variant-btn:hover::after {
  width: 50.1%;
}

/* aktiivsel nupul on juba lilla taust - joont sinna ei ole vaja */
.variant-btn.active::before,
.variant-btn.active::after {
  width: 0;
}

/* -- 4. Tootelehe mobiilivaate tüpograafia -------------------------------- */
@media (max-width: 768px) {
  .product-description {
    /* PARANDUS 20.08.2026 - plokk oli mobiilis liiga madalal.
       Tipptaseme reegel on `padding: 4rem 0` ja siin kirjutati ule AINULT
       alumine. Ulemine 4rem (64 px) jai alles, seega paise ja valge
       tekstikasti vahel seisis 64 px paljast taustapilti - mootsin
       brauseris 390 px laiusel: paise lopeb 62 px juures, kast algab
       alles 126 px juures. Poolel telefoniekraanil ei olnud sisu.
       1.5rem = sama, mis all -> plokk touseb 40 px vorra ules. */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .product-detail {
    padding-top: 1.5rem;
  }

  .product-detail-grid {
    gap: 20px;
  }

  .product-gallery {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .product-gallery .main-image {
    max-height: 450px;
  }

  .product-description h1 {
    font-size: 1.5rem;
  }

  .product-description p {
    font-size: 0.95rem;
  }

  .feature-title {
    font-size: 1.5rem;
  }

  .feature-description {
    font-size: 1.2rem;
  }

  .feature-grid-item span {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   PARANDUSED 13.08 - mobiiliotsing, esilehe vahed
   ========================================================================== */

/* -- 1. iOS ei tohi otsingule vajutades lehte sisse zoomida ----------------
   Safari suumib alati, kui fookuses oleva välja font-size on alla 16px.
   Seega kõik mobiilivaate sisestusväljad täpselt 16px.                     */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea,
  select,
  .form-group input,
  .form-group textarea,
  .form-group select,
  .search-bar input,
  .header .search-bar input,
  .top-bar .search-bar input,
  #compare-search-input {
    font-size: 16px;
  }

  /* suurem kiri vajab veidi väiksemat sisepolstrit, et riba kõrgus püsiks */
  .header .search-bar input {
    padding: 6px 12px;
  }
}

/* -- 2. Otsingutulemused mobiilis: paneel algas ekraani keskelt ----------- */
@media (max-width: 768px) {
  /* Logo jääb alles. Tulemuste paneel ei ripu enam otsinguriba küljes, vaid
     asetatakse päise alla üle kogu ekraani laiuse (position: fixed, ülemine
     serv arvutatakse JS-is, sest päise kõrgus muutub kerimisel). */
  .search-bar .search-dropdown {
    min-width: 0;
  }

  .search-bar .search-dropdown.dd-mobile {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: 62vh;
  }

  .search-dropdown .search-item {
    gap: 12px;
    padding: 10px 12px;
  }

  .search-dropdown .search-item img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}

/* -- 3. Esileht: väiksem tühimik hero ja kategooriate vahel ---------------- */
.categories {
  padding-top: 40px;
}

@media (max-width: 768px) {
  .categories {
    padding-top: 28px;
    padding-bottom: 48px;
  }
}

/* ==========================================================================
   PARANDUSED 13.08 (2) - tootelehe breadcrumbid ja üldandmete kastid
   ========================================================================== */

/* -- 1. Breadcrumbid: mudeli nimi eemaldatud, kategooria järel osutab nool
      alla h1 poole (sama nooleglüüf, keeratud 90 kraadi).                  */
.breadcrumbs .crumb-sep-down {
  display: inline-block;
  transform: rotate(90deg) translateY(1px);
  transform-origin: 50% 50%;
  margin-left: 7px;
  font-size: 1.15em;
  opacity: 0.6;
  line-height: 1;
}

/* -- 2. Üldandmed: nähtavad raamid kõigil kastidel ------------------------
      Varem oli raam ainult esimesel ("Küttevõimsus") kastil ja see nägi
      välja nagu aktiivne valik; ülejäänutel oli valge, praktiliselt
      nähtamatu raam. Nüüd on kõigil sama nähtav õrn lilla raam.            */
.quick-spec,
.quick-spec.qs-hero {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(91, 14, 138, 0.18);
  box-shadow: 0 2px 8px rgba(91, 14, 138, 0.04);
}

.quick-spec:hover,
.quick-spec.qs-hero:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(91, 14, 138, 0.09);
  border-color: rgba(91, 14, 138, 0.3);
}


/* ==========================================================================
   TRUST BAR - esindatud tootjad (hero ja kategooriate vahel)
   ========================================================================== */
.trust-bar {
  background: #fff;
  padding: 80px 0 60px;
}

.trust-brands {
  --tb-scale: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding: 0 6px;
  list-style: none;
}

/* Vaikimisi hallid ja poolläbipaistvad, hiire all värvi tagasi.
   Heledad brändivärvid (Midea tsüaan, Daikini sinine) muutuvad hallina
   tunduvalt heledamaks kui mustad logod, seetõttu on igal logol oma väike
   heleduse- ja läbipaistvuse korrektsioon - nii jääb rida ühtlane. */
.trust-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 1;
}

/* Logofailid on ühtlaseks normaliseeritud; siin määrab iga logo oma laiuse
   ja --tb-scale kahandab kõiki korraga. Proportsioonid ei muutu, sest
   kõrgus on alati auto. */
.trust-brand img {
  display: block;
  width: calc(var(--tb-w) * var(--tb-scale, 1));
  height: auto;
  max-width: 100%;
}

.tb--mhi       { --tb-w: 208px; --tb-op: 0.52; }
.tb--fujitsu   { --tb-w: 111px; --tb-op: 0.62; --tb-bright: 0.88; }
.tb--midea     { --tb-w: 135px; --tb-op: 0.66; --tb-bright: 0.58; }
.tb--melectric { --tb-w: 150px; --tb-op: 0.54; }
.tb--daikin    { --tb-w: 155px; --tb-op: 0.64; --tb-bright: 0.62; }
.tb--panasonic { --tb-w: 155px; --tb-op: 0.58; --tb-bright: 0.75; }

@media (max-width: 1100px) {
  .trust-brands { --tb-scale: 0.84; gap: 22px; }
}

@media (max-width: 860px) {
  .trust-bar { padding: 36px 0 34px; }
  .trust-brands {
    --tb-scale: 0.8;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 44px;
  }
}

/* Telefonis alati tapselt kaks rida: 3 + 3. Grid hoiab veerud vordsena;
   minmax(0, 1fr) ja min-width: 0 lubavad koige laiemal logol (Mitsubishi Heavy)
   veeru sisse kahaneda, ulejaanud jaavad oma loomulikku suurusse. */
@media (max-width: 576px) {
  .trust-bar { padding: 28px 0 26px; }
  .trust-brands {
    --tb-scale: 0.62;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 22px 12px;
  }
  .trust-brand { min-width: 0; }
  .tb--panasonic { --tb-w: 140px; }
}

/* ==========================================================================
   Võimsusklassi nupp kahel real (.variant-btn--stacked)
   --------------------------------------------------------------------------
   Mudelitähis üleval (nt "ZTX 20"), nimiküttevõimsus all (nt "2,7 kW").
   Kasutusel Mitsubishi Heavy ZTX tootelehel (#variant-grid) ja
   kategoorialehe product-card'il (.variant-selector).

   Mudelinumber ise EI kao kuhugi - see on nupu data-model-suffix
   atribuudis, mille järgi käivad tellimusvorm, ?variant= link ja
   tehniliste andmete tabeli veeru valik. Nupu tekstiga neid enam
   ei loeta (vt js/common.js ja js/product-page.js).

   !important on vajalik, sest .variant-btn'i kõrgus (36px) ja
   ühe-realine flex-rida tulevad hilisemast reeglist failis, samuti
   laiuse ülekirjutus .variant-selector .variant-btn juures.
   ========================================================================== */
.variant-btn--stacked {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  min-height: 44px;
  padding: 6px 4px !important;
  gap: 1px;
  line-height: 1.15;
}

.variant-btn--stacked .var-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0;
  white-space: nowrap;
  text-align: center;
}

/* Värv tuleb nupult (color: inherit), et see töötaks nii valgel kui
   aktiivsel lillal taustal. Läbipaistvus annab teisese info tunde. */
.variant-btn--stacked .var-power {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  color: inherit;
  opacity: 0.68;
}

.variant-btn--stacked.active .var-power,
.variant-btn--stacked:hover .var-power {
  opacity: 0.9;
}

/* Kitsal ekraanil on kaardi nupp ~70px lai - kahandame kirja, et
   "ZTX 20" ja "2,7 kW" mahuksid ilma murdumata ühele reale. */
@media (max-width: 480px) {
  .variant-btn--stacked .var-title { font-size: 0.78rem; }
  .variant-btn--stacked .var-power { font-size: 0.7rem; }
}

/* ==========================================================================
   Tarvikute kaart (/tarvikud/)
   --------------------------------------------------------------------------
   Tarvikul ei ole tootelehte, võimsusklassi ega tehnilisi näitajaid, seega
   kaardil on ainult pilt, nimi, hind ja nupud. Kaks asja vajavad seetõttu
   eraldi reeglit:
     1. pealkiri ei ole link, aga peab nägema välja sama (lilla gradient);
     2. hind tuleb suruda kaardi alaossa, muidu jäävad eri pikkusega nimede
        tõttu nuppude read eri kõrgusele.
   ========================================================================== */
.product-card h2 .card-title-plain {
  display: inline-block;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .product-card--tarvik (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   Võrdlusnupu klaviatuurituge
   --------------------------------------------------------------------------
   js/common.js lisab kaartidele võrdlusruudu. Varem oli see peidetud
   style="display:none" abil - selliseid elemente ei saa fokuseerida ega
   Tab-iga saavutada, mistõttu kogu võrdlusfunktsioon oli klaviatuuriga
   kättesaamatu. Nüüd on ruut .visually-hidden (nähtamatu, aga fokuseeritav)
   ja fookus joonistatakse ümbritsevale sildile.
   ========================================================================== */
.compare-icon-btn:has(.compare-check:focus-visible) {
  outline: 3px solid var(--purple-primary, #5b0e8a);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Varuvariant brauseritele, kus :has() ei tööta. */
.compare-check:focus-visible {
  outline: 3px solid var(--purple-primary, #5b0e8a);
  outline-offset: 2px;
}

/* ==========================================================================
   MUUDATUSED 17.08 - kategooriakaardi nupp ja üldandmete vesimärk
   ========================================================================== */

/* -- 1. "Vaata valikut": sama clip-path pühkimisanimatsioon mis
      "Küsi pakkumist" nupul (#cta-quote). Värvid jäävad täpselt samaks -
      muutub ainult see, KUIDAS lilla sisse tuleb: varem hüppas taust
      korraga, nüüd pühib ringina vasakust ülanurgast üle nupu.

      Trikk: ::before joonistatakse z-index: -1 tõttu nupu enda tausta
      PEALE, aga teksti ALLA (nupp ise loob z-index: 1 abil pinu). Nii jääb
      hele #F4F6F8 alusvärv nähtavaks seni, kuni ring pole sinna jõudnud. */
.category-card.cat-card-modern .btn-cat-action {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease-out, border-color 0.35s ease-out,
              box-shadow 0.35s ease-out;
}

.category-card.cat-card-modern .btn-cat-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #7B1FA2 0%, #2D0845 100%);
  border-radius: inherit;
  z-index: -1;
  clip-path: circle(0% at 0% 0%);
  transition: clip-path 0.35s ease-out;
  pointer-events: none;
}

/* Alusvärv jääb heledaks - lilla tuleb nüüd ainult ::before kaudu, muidu
   kataks läbipaistmatu taust animatsiooni ära. */
.category-card.cat-card-modern:hover .btn-cat-action {
  background: #F4F6F8 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(91, 14, 138, 0.35);
  transform: none;
}

.category-card.cat-card-modern:hover .btn-cat-action::before {
  clip-path: circle(150% at 0% 0%);
}

/* Sama animatsioon ka siis, kui nupp ise on hiire all või fookuses
   (klaviatuurikasutaja ei tekita kaardile :hover'it). */
.category-card.cat-card-modern .btn-cat-action:focus-visible {
  color: #FFFFFF !important;
  border-color: transparent !important;
  outline: 2px solid var(--purple-primary, #5b0e8a);
  outline-offset: -4px;
}

.category-card.cat-card-modern .btn-cat-action:focus-visible::before {
  clip-path: circle(150% at 0% 0%);
}

/* Liikumist vältivale kasutajale näidatakse lõppolek kohe. */
@media (prefers-reduced-motion: reduce) {
  .category-card.cat-card-modern .btn-cat-action::before {
    transition: none;
  }
}

/* -- 2. Tootelehe "Üldandmed" plokk: Õhksoojuse logo tagasi vesimärgina.
      ::before on juba kasutusel lilla nurgahelgi jaoks, seega logo läheb
      ::after peale. Sisu (.qs-header, .quick-specs-grid) tõstetakse
      z-index'iga peale, et tekst jääks loetavaks. */
.product-quick-specs::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-image: url('images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.09;
  filter: grayscale(0.55);
  pointer-events: none;
  z-index: 0;
}

.product-quick-specs > .qs-header,
.product-quick-specs > .quick-specs-grid,
.product-quick-specs > .quick-spec {
  position: relative;
  z-index: 1;
}

@media (max-width: 576px) {
  .product-quick-specs::after {
    width: 190px;
    height: 190px;
  }
}


/* ==========================================================================
   MUUDATUSED 17.08 (2) - kategoorialehed, filtrid, page-header, KKK
   ========================================================================== */

/* -- 1. Kategoorialehe tootekaardi hover: kerge punakas taust ------------- */
.products-grid .product-card:hover {
  background: rgba(229, 57, 53, 0.04);
}

/* -- 2. Filtrite read: hover'il hall taust, parem ülemine nurk kumeraks --- */
.sidebar-filters .checkbox-label:hover,
.filter-overlay .checkbox-label:hover,
.checkbox-label:hover {
  background: #eee;
  border-radius: 0 10px 0 0;
}

.filter-item {
  padding: 4px 6px;
  border-radius: 8px;
  transition: background-color 0.15s ease, border-radius 0.15s ease;
}

.filter-item:hover {
  background: #eee;
  border-radius: 0 10px 0 0;
}

/* -- 3. Page header: vesimärk keskele ja peaaegu kogu ulatuses nähtavaks -- */
.page-header::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-size: 30%;
  background-position: center center;
  /* Sama vesimargi kaesitlus nagu tootelehe Uldandmete plokis */
  filter: grayscale(1);
  opacity: 0.09;
}

@media (max-width: 768px) {
  .page-header::before {
    width: 100%;
    height: 92%;
    background-size: 100%;
  }
}

.page-header h1 {
  font-size: 1.7rem !important;
}

/* -- 4. Järelmaksu lehe KKK: taustad ------------------------------------- */
.faq-section#kkk {
  background: rgba(229, 57, 53, 0.04);
}

.faq-section#kkk .faq-question,
.faq-section#kkk summary.faq-question {
  background: rgba(229, 57, 53, 0.04);
}

.faq-section#kkk details.faq-item[open] > summary.faq-question {
  background: rgba(229, 57, 53, 0.08);
  color: var(--purple-deep);
}

/* -- 5. KKK kastil sama alljoone animatsioon nagu nav baril, veidi kiirem - */
.faq-section#kkk details.faq-item {
  position: relative;
}

.faq-section#kkk details.faq-item::before,
.faq-section#kkk details.faq-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: #94a3b8;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}

.faq-section#kkk details.faq-item::before {
  left: 0;
  border-radius: 2px 0 0 2px;
}

.faq-section#kkk details.faq-item::after {
  right: 0;
  border-radius: 0 2px 2px 0;
}

.faq-section#kkk details.faq-item:hover::before,
.faq-section#kkk details.faq-item:hover::after {
  width: 50.1%;
}

@media (prefers-reduced-motion: reduce) {
  .faq-section#kkk details.faq-item::before,
  .faq-section#kkk details.faq-item::after {
    transition: none;
  }
}


/* ==========================================================================
   MUUDATUSED 17.08 (3) - filtrite nurk + tootjate arvud + sorteerimismenüü
   ========================================================================== */

/* -- 1. Filtrikast: ainult ülemine parem nurk ümar ------------------------ */
.sidebar-filters {
  border-radius: 0 16px 0 0;
}

/* Mobiilis on filtrid külgpaneel - seal jäävad nurgad endiselt teravaks. */
@media (max-width: 992px) {
  .sidebar-filters {
    border-radius: 0;
  }
}

/* -- 2. Filtriread: sama nurgakäsitlus, aga selgemalt nähtav ------------- */
.sidebar-filters .checkbox-label {
  padding: 6px 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 0;
  transition: background-color 0.15s ease, border-radius 0.15s ease;
}

.sidebar-filters .checkbox-label:hover {
  background: #eee;
  border-radius: 0 12px 0 0;
}

/* -- 3. Toodete arv tootja rea lõpus ------------------------------------- */
.filter-count {
  margin-left: auto;
  min-width: 26px;
  padding: 1px 7px;
  border: 1px solid rgba(91, 14, 138, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--purple-deep, #0c284a);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  flex: 0 0 auto;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sidebar-filters .checkbox-label:hover .filter-count {
  border-color: var(--purple-primary, #5b0e8a);
  color: var(--purple-primary, #5b0e8a);
}

/* -- 4. Sorteerimine: äärist ei ole, ainult tekst ------------------------ */
.sort-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sort-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.sort-control__label {
  font-size: 0.8rem;
  color: var(--text-secondary, #667085);
}

.sort-control__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--purple-deep, #0c284a);
  cursor: pointer;
}

.sort-control__current:hover,
.sort-control__current:focus-visible {
  color: var(--purple-primary, #5b0e8a);
}

.sort-control__value {
  font-weight: 700;
}

.sort-control__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.sort-control.is-open .sort-control__caret {
  transform: rotate(180deg);
}

/* -- 5. Avanev kast lisavalikutega --------------------------------------- */
.sort-control__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid rgba(12, 40, 74, 0.16);
  border-radius: 0 12px 0 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(12, 40, 74, 0.1);
}

.sort-control__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-radius 0.15s ease;
}

.sort-control__option:hover,
.sort-control__option:focus-visible {
  background: #eee;
  border-radius: 0 10px 0 0;
  outline: none;
}

/*
  .page-header on overflow:hidden (vesimärgi pärast), mis lõikaks avaneva
  sorteerimiskasti ära. JS lisab avamise ajaks klassi, mille ajal lubame
  ülevoolu - suletud olekus jääb käitumine täpselt endiseks.
*/
.page-header.has-open-sort {
  overflow: visible;
}

/* Sorteerimine peab jääma page-headeri alumisest gradiendist (::after) ette. */
.page-header .sort-by {
  z-index: 2;
}

/* ==========================================================================
   MUUDATUSED 17.08 (4)
   1) Filtrikast ei keri lehega kaasa
   2) Filtrikasti ainus ümar nurk on ülemine parem; sildid on täisnurksed
   3) Kategoorialehe võimsusklassi nupud kahel real + "Vali mudel"
   4) Nupu hover'ilt eemaldatud kuma (glow)
   ========================================================================== */

/* -- 1. Filtrikast jääb paigale ------------------------------------------ */
@media (min-width: 993px) {
  .layout-grid {
    align-items: start;
  }

  .sidebar-filters {
    position: sticky !important;
    top: 120px;
    align-self: start !important;
    height: fit-content !important;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    /* -- 2. Ainult ülemine parem nurk on ümar --------------------------- */
    border-radius: 0 16px 0 0 !important;
  }
}

/* -- 2b. Filtrisildid: kõik neli nurka täisnurksed, ka hover'il ---------- */
.sidebar-filters .checkbox-label,
.sidebar-filters .checkbox-label:hover,
.sidebar-filters .filter-item,
.sidebar-filters .filter-item:hover,
.filter-overlay .checkbox-label,
.filter-overlay .checkbox-label:hover,
.checkbox-label,
.checkbox-label:hover,
.filter-item,
.filter-item:hover {
  border-radius: 0 !important;
}

/* -- 3. Võimsusklassi nupp: mõlemad read 0.8rem -------------------------- */
.variant-btn--stacked .var-title,
.variant-btn--stacked .var-power {
  font-size: 0.8rem !important;
}

@media (max-width: 480px) {
  .variant-btn--stacked .var-title,
  .variant-btn--stacked .var-power {
    font-size: 0.8rem !important;
  }
}

/* -- 4. Hover'i kuma eemaldatud ------------------------------------------ */
.variant-btn:hover,
.variant-btn:not(.active):hover,
.variant-btn.active:hover,
.variant-btn:focus,
.variant-btn:focus-visible {
  box-shadow: none !important;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .var-model-hover (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   MUUDATUSED 17.08 (5)
   1) "Vali mudel" silt nuppude kohal ka arvutivaates
   2) Nupu tekst (mudel + võimsus) #3D0B5E, hover ei muuda värvi
   ========================================================================== */

/* EEMALDATUD 18.08.2026 - surnud kood: .variant-select-label (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* -- 2. Teksti värv: #3D0B5E nii arvutis kui mobiilis, hover ei muuda ---- */
.variant-btn--stacked .var-title,
.variant-btn--stacked .var-power,
.variant-btn:hover .var-title,
.variant-btn:hover .var-power,
.variant-btn:not(.active):hover .var-title,
.variant-btn:not(.active):hover .var-power,
.variant-btn:focus .var-title,
.variant-btn:focus .var-power {
  color: #3D0B5E !important;
  opacity: 1 !important;
}

/* Aktiveeritud nupp jääb endiseks: valge tekst lillal taustal. */
.variant-btn--stacked.active .var-title,
.variant-btn--stacked.active .var-power,
.variant-btn--stacked.active:hover .var-title,
.variant-btn--stacked.active:hover .var-power {
  color: #fff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   MUUDATUSED 17.08 (6) - hover-olekute ja varjude ühtlustus
   ------------------------------------------------------------------------
   Probleem: varjud olid kasvanud eri kohtades eri suuruseks (0 20px 40px,
   0 12px 32px, 0 8px 24px ...) ja mitmel valgel/lillal nupul oli punane
   kuma, mis jäi taustale roosa laiguna. Ka tõusud olid erinevad (-1, -2,
   -5, -6 px), mistõttu hiire all "hüppasid" elemendid eri moodi.

   Lahendus: üks varjuskaala ja üks tõus. Kõik hover-olekud kasutavad
   allolevaid muutujaid - edaspidi piisab ühe koha muutmisest.
   ========================================================================== */

:root {
  /* Ühtne varjuskaala. Toon on brändi tumelilla (#2D0845), mitte must -
     nii sulanduvad varjud lehe värvidega ega tundu määrdunud. */
  --shadow-rest: 0 2px 8px rgba(45, 8, 69, 0.06);
  --shadow-rest-card: 0 3px 12px rgba(45, 8, 69, 0.05);
  --shadow-hover: 0 6px 16px rgba(45, 8, 69, 0.14);
  --shadow-hover-card: 0 10px 24px rgba(45, 8, 69, 0.11);

  /* Punaseid varje kasutavad AINULT punased nupud. */
  --shadow-rest-red: 0 3px 10px rgba(229, 57, 53, 0.18);
  --shadow-hover-red: 0 6px 16px rgba(229, 57, 53, 0.26);

  /* Ühtne liikumine: nupp tõuseb 2px, kaart 3px. */
  --hov-lift: -2px;
  --hov-lift-card: -3px;
  --hov-ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Varem 0 8px 32px / 0.16 - kasutusel .install-card, .dual-card ja
     .feature-card hover'il, kus see mõjus liiga raskelt. */
  --shadow-lg: 0 10px 24px rgba(45, 8, 69, 0.12);
}

/* -- 1. Punane vaikevari nupul veidi tagasi ------------------------------- */
.btn-cat-action {
  box-shadow: var(--shadow-rest-red);
}

.btn-cat-action:hover {
  box-shadow: var(--shadow-hover-red);
  transform: translateY(var(--hov-lift));
}

/* -- 2. Valged nupud tumedal taustal (bänner + hooldusplokk) --------------
      Neil oli .btn-cat-action punane kuma, mis valge nupu ümber luges
      roosa määrdumisena. Nüüd neutraalne vari ja hover'il päris
      olekumuutus (taust + ääris), mitte ainult kuma.                       */
.featured-content .btn-cat-action,
.maintenance-content .btn-cat-action {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
  transition: background-color var(--hov-ease), color var(--hov-ease),
              border-color var(--hov-ease), box-shadow var(--hov-ease),
              transform var(--hov-ease) !important;
}

.featured-content .btn-cat-action:hover,
.maintenance-content .btn-cat-action:hover {
  background: #F6EFFA !important;
  color: var(--purple-deep) !important;
  border-color: var(--purple-deep) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
  transform: translateY(var(--hov-lift)) !important;
}

/* -- 3. Päise "Küsi pakkumist" jms: vari oli 0 12px 32px / 0.45 ----------- */
#cta-quote:hover,
#nav-drawer-cta:hover,
#cta-jarelmaks:hover {
  transform: translateY(var(--hov-lift));
  box-shadow: 0 6px 16px rgba(45, 8, 69, 0.24);
}

/* -- 4. Üldnupud ---------------------------------------------------------- */
.btn-primary:hover {
  box-shadow: var(--shadow-hover-red);
  transform: translateY(var(--hov-lift));
}

/* EEMALDATUD 18.08.2026 - surnud kood: .btn-purple (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.btn-order {
  box-shadow: var(--shadow-rest-red) !important;
}

.btn-order:hover {
  box-shadow: var(--shadow-hover-red) !important;
  transform: translateY(var(--hov-lift));
}

.btn-ask-info:hover {
  transform: translateY(var(--hov-lift));
  box-shadow: var(--shadow-hover);
}

/* -- 5. Tootekaardi "Telli" / "Saada päring" -----------------------------
      "Telli" pühib hover'il lillaks, aga vari jäi punaseks - punane kuma
      lilla nupu ümber. Nüüd järgneb vari nupu värvile.                     */
.action-buttons .btn-order {
  box-shadow: var(--shadow-rest-red) !important;
}

.action-buttons .btn-order:hover {
  transform: translateY(var(--hov-lift));
  box-shadow: 0 6px 16px rgba(91, 14, 138, 0.26) !important;
  filter: none;
}

.action-buttons .btn-saada-paring {
  box-shadow: 0 2px 8px rgba(45, 8, 69, 0.07);
}

.action-buttons .btn-saada-paring:hover {
  transform: translateY(var(--hov-lift));
  box-shadow: var(--shadow-hover);
  border-color: rgba(229, 57, 53, 0.5) !important;
}

/* -- 6. Esilehe kategooriakaardid ----------------------------------------
      Vari oli puhkeolekus 0 8px 24px ja hover'il 0 20px 36px - kaart
      "ujus". Nüüd kerge tõus ja poole väiksem vari. Kaardi sees olev
      nupp on kaardi alumise servaga kohakuti, seega ei vaja oma varju.    */
.category-card.cat-card-modern {
  box-shadow: var(--shadow-rest-card);
  transition: transform var(--hov-ease), box-shadow var(--hov-ease),
              border-color var(--hov-ease);
}

.category-card.cat-card-modern:hover {
  transform: translateY(var(--hov-lift-card));
  box-shadow: var(--shadow-hover-card);
  border-color: rgba(91, 14, 138, 0.16);
}

.category-card.cat-card-modern .btn-cat-action,
.category-card.cat-card-modern:hover .btn-cat-action,
.category-card.cat-card-modern .btn-cat-action:focus-visible {
  box-shadow: none;
  transform: none;
}

/* -- 7. Kategoorialehe tootekaardid --------------------------------------
      Hover värvis kaardi punakaks (rgba(229,57,53,0.04)), mis ei sobinud
      lilla brändiga. Nüüd tõuseb kaart valgeks ja kerkib 3px.             */
.product-card {
  transition: transform var(--hov-ease), box-shadow var(--hov-ease),
              border-color var(--hov-ease), background-color var(--hov-ease);
}

.product-card:hover {
  transform: translateY(var(--hov-lift-card));
  box-shadow: var(--shadow-hover-card);
  border-color: rgba(91, 14, 138, 0.12);
}

.products-grid .product-card:hover {
  background: var(--white);
}

.product-grid-card:hover {
  transform: translateY(var(--hov-lift-card));
  box-shadow: var(--shadow-hover-card);
}

/* -- 8. Ülejäänud kaardid: sama tõus ja vari ------------------------------ */
.install-card:hover,
.install-card:focus-within {
  transform: translateY(var(--hov-lift-card));
  box-shadow: var(--shadow-hover-card);
}

/* EEMALDATUD 18.08.2026 - surnud kood: .feature-card (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

.quick-spec:hover,
.quick-spec.qs-hero:hover {
  transform: translateY(var(--hov-lift));
  box-shadow: var(--shadow-hover);
}

.quick-spec:hover .qs-icon {
  transform: scale(1.04);
  box-shadow: 0 3px 10px rgba(91, 14, 138, 0.2);
}

/* -- 9. Mudelivaliku nupud ------------------------------------------------
      Hover oli roosa (#FFF8F8 + punane ääris), kuigi valitud olek on
      lilla. Nüüd on hover sama pere heledam variant.                      */
.variant-btn:hover,
.variant-btn:not(.active):hover {
  background: #F7F2FB !important;
  border-color: rgba(91, 14, 138, 0.32) !important;
}

/* -- 10. Libisev alljoon: hall #94a3b8 -> brändililla ---------------------
      Sama motiiv on nav-baaril, mudelinuppudel ja KKK plokis. Hall joon
      lilla teksti all nägi välja nagu viimistlemata jäänud detail.        */
.nav-list a::before,
.nav-list a::after,
.variant-btn::before,
.variant-btn::after,
.faq-section#kkk details.faq-item::before,
.faq-section#kkk details.faq-item::after {
  background-color: var(--purple-primary);
}

/* -- 10b. Kihilised pinnad (modaal, otsingu ripploend, pildikast) vajavad
      selget eraldust taustast - neile jääb tugevam vari kui kaartidele. */
.modal-content {
  box-shadow: 0 24px 60px rgba(45, 8, 69, 0.28);
}

.search-dropdown {
  box-shadow: 0 12px 32px rgba(45, 8, 69, 0.16);
}

.why-us-image img {
  box-shadow: 0 14px 34px rgba(45, 8, 69, 0.16);
}

/* -- 10c. Ujuv võrdlusriba: vari oli 0.3 must-lilla, mis luges lehe alla
      tumeda triibuna. */
.compare-bar {
  box-shadow: 0 -4px 20px rgba(45, 8, 69, 0.14);
}

/* -- 11. Puutetundlikud ekraanid -----------------------------------------
      Puutel jääb :hover pärast vajutust "kinni". Seal ei liiguta midagi. */
@media (hover: none) {
  .category-card.cat-card-modern:hover,
  .product-card:hover,
  .product-grid-card:hover,
  .install-card:hover,
  .quick-spec:hover,
  .btn-cat-action:hover,
  .btn-primary:hover,
  .btn-order:hover,
  .btn-ask-info:hover,
  .action-buttons .btn-order:hover,
  .action-buttons .btn-saada-paring:hover,
  #cta-quote:hover,
  #nav-drawer-cta:hover,
  #cta-jarelmaks:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-card.cat-card-modern:hover,
  .product-card:hover,
  .product-grid-card:hover,
  .install-card:hover,
  .quick-spec:hover,
  .btn-cat-action:hover,
  .btn-primary:hover,
  .btn-order:hover,
  .btn-ask-info:hover,
  .action-buttons .btn-order:hover,
  .action-buttons .btn-saada-paring:hover,
  #cta-quote:hover,
  #nav-drawer-cta:hover,
  #cta-jarelmaks:hover {
    transform: none;
  }
}


/* ==========================================================================
   MUUDATUSED 17.08 (7)
   1) Sorteerimisnupp joondub paremalt lehe ülejäänud sisuga
   2) Tootekaart ei liigu hiire all
   3) Järelmaksu info taust ei muutu
   4) Mudelinupu tekst 0.75rem
   5) Avalehe kategooriate taust rgba(242, 242, 242, 0.75)
   6) Filtri rea hover ulatub filtrikasti servast servani
   7) Filtrikasti ülemine parem nurk ümar
   8) Väiksem tühimik page-headeri ja tootenimekirja vahel
   ========================================================================== */

/* -- 1. Sorteerimine paremalt joonduma ------------------------------------
      .sort-by on absoluutselt paigutatud .page-header .container sisse.
      Absoluutse elemendi lähtekast on esivanema PADDING-kast, seega
      right: 0 viis nupu 24px sisust paremale. Konteineri külgpolster on
      24px (.container), sama nii päises ("Küsi pakkumist") kui
      tootenimekirjas (product-card). Nüüd langevad kõik kolm kokku.       */
.page-header .sort-by {
  right: 24px;
}

@media (max-width: 576px) {
  .page-header .sort-by {
    right: auto;
  }
}

/* -- 2. Tootekaart ei nihku hiire all -------------------------------------
      Jääb ainult varju ja äärise muutus.                                  */
.product-card,
.products-grid .product-card,
.product-grid-card {
  transition: box-shadow var(--hov-ease), border-color var(--hov-ease);
}

.product-card:hover,
.products-grid .product-card:hover,
.product-grid-card:hover,
.product-card:focus-within,
.products-grid .product-card:focus-within {
  transform: none !important;
}

/* -- 3. Järelmaksu plokk: taust püsib ---------------------------------------
      Kaardi taust vahetus hover'il --off-white -> --white ja kuna
      .product-finance taust on poolläbipaistev lilla, muutus koos sellega
      ka pilli toon. Kaardi taust jääb nüüd samaks.                        */
.products-grid .product-card,
.products-grid .product-card:hover,
.products-grid .product-card:focus-within {
  background: var(--off-white);
}

.product-finance,
.product-card:hover .product-finance,
.product-card:focus-within .product-finance,
.products-grid .product-card:hover .product-finance {
  background: rgba(91, 14, 138, 0.04);
  transition: none;
}

/* -- 4. Mudelinupu tekst 0.75rem ------------------------------------------ */
.variant-btn--stacked .var-title,
.variant-btn--stacked .var-power,
.var-title,
.var-power {
  font-size: 0.75rem !important;
}

@media (max-width: 480px) {
  .variant-btn--stacked .var-title,
  .variant-btn--stacked .var-power {
    font-size: 0.75rem !important;
  }
}

/* -- 5. Avalehe kategooriate sektsiooni taust ----------------------------- */
.categories {
  background-color: rgba(242, 242, 242, 0.75);
}

/* -- 6. Filtri rea hover kogu filtrikasti laiuses -------------------------
      .sidebar-filters polster on 24px. Sildid venitatakse negatiivse
      välispolstriga servani ja sama palju sisepolstrit lisatakse tagasi,
      et tekst jääks paigale.                                              */
.sidebar-filters .checkbox-label,
.sidebar-filters .filter-item {
  padding-left: 24px;
  padding-right: 24px;
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
  box-sizing: border-box;
}

.sidebar-filters .checkbox-label {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* -- 7. Filtrikasti ülemine parem nurk ümar -------------------------------
      overflow (kerimine) hoolitseb selle eest, et servani ulatuvad
      hover-taustad nurka kandiliseks ei värviks.                          */
.sidebar-filters {
  border-radius: 0 16px 0 0 !important;
  overflow-x: hidden;
}

@media (min-width: 993px) {
  .sidebar-filters {
    border-radius: 0 16px 0 0 !important;
  }
}

@media (max-width: 992px) {
  .sidebar-filters {
    border-radius: 0 !important;
  }
}

/* -- 8. Väiksem vahe page-headeri ja tootenimekirja vahel ------------------ */
.products-layout {
  padding-top: 0.75rem !important;
}

@media (min-width: 769px) {
  .products-layout {
    padding-top: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .products-layout {
    padding-top: 0.6rem !important;
  }
}

/* ==========================================================================
   MUUDATUSED 17.08 (8) - kompaktsemad filtrid arvutivaates + avalehe taust
   ========================================================================== */

/* -- 1. Filtrikast arvutivaates: ei ole kleepuv ega keritav ----------------
      Kõik filtriparameetrid on korraga nähtavad: eemaldame position: sticky,
      max-height'i ja püstise kerimise. Kast venib täpselt sisu järgi.
      Mobiilis (<=992px) jääb filtrikast endiselt libisevaks külgpaneeliks.  */
@media (min-width: 993px) {
  .sidebar-filters {
    position: static !important;
    top: auto !important;
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    /* Ümar ülemine parem nurk vajab overflow'i, et servani ulatuv
       hover-taust nurka kandiliseks ei värviks. Kuna kõrgus käib sisu
       järgi, siis kerimisriba siit ei teki. */
    overflow: hidden !important;
    /* -- 2. Kompaktsem polster (püstsuunas väiksem, külgedel jääb 24px,
          sest filtriread venitatakse -24px veerisega servani) ----------- */
    padding: 22px 24px !important;
  }

  /* -- 3. Väiksemad vahed filtrigruppide vahel --------------------------- */
  .sidebar-filters .filter-group {
    margin-bottom: 18px !important;
  }

  .sidebar-filters .filter-group:last-child {
    margin-bottom: 0 !important;
  }

  .sidebar-filters .filter-group h3 {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }

  /* -- 4. Väiksemad vahed filtrisiltide vahel ---------------------------- */
  .sidebar-filters .checkbox-label,
  .sidebar-filters .filter-item {
    gap: 10px !important;
    margin-bottom: 2px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.92rem !important;
  }

  .sidebar-filters .checkbox-label:last-child,
  .sidebar-filters .filter-item:last-child {
    margin-bottom: 0 !important;
  }

  /* -- 5. Hinnaliuguri plokk kompaktsemaks ------------------------------- */
  .sidebar-filters .price-slider {
    margin-top: 2px;
  }

  .sidebar-filters .price-values {
    margin-top: 6px;
  }
}

/* -- 6. Avalehe kategooriate sektsiooni taust ------------------------------
      Muudetud 18.08: heledam hall, tugevam kattuvus.                       */
.categories {
  background-color: rgb(236, 236, 236) !important;
}

/* ==========================================================================
   MUUDATUSED 17.08 (9) - filtrisiltide kirjakaal + märkeruudu taust
   ========================================================================== */

/* -- 1. Filtrisildid tavalise kirjakaaluga -------------------------------- */
.sidebar-filters .checkbox-label,
.filter-overlay .checkbox-label {
  font-weight: 400 !important;
}

/* -- 2. Märkeruudu taust neutraalne hall ---------------------------------
      Valitud olek jääb tumesiniseks, hover on pool sammu tumedam hall.   */
.sidebar-filters .checkbox-label input[type="checkbox"],
.filter-overlay .checkbox-label input[type="checkbox"] {
  background-color: #F0F0F0;
}

.sidebar-filters .checkbox-label:hover input[type="checkbox"],
.filter-overlay .checkbox-label:hover input[type="checkbox"] {
  background-color: #E4E4E4;
}

.sidebar-filters .checkbox-label input[type="checkbox"]:checked,
.filter-overlay .checkbox-label input[type="checkbox"]:checked {
  background-color: var(--purple-deep, #0c284a);
}

/* ==========================================================================
   MUUDATUSED 17.08 (10) - võrdluse lisaandmed + mobiili sorteerimine
   ========================================================================== */

/* -- 1. Võrdlusakna lisaandmed samas stiilis nagu kaardi näitajad ---------
      Read joonistab js/common.js (renderCompareExtraSpecs). Tabelit enam ei
      tooda, seega külgsuunas kerimist ei teki.                            */
.compare-full-specs .compare-extra-specs {
  margin-bottom: 0;
  gap: 8px;
}

.compare-extra-specs .compare-item-spec {
  align-items: baseline;
  gap: 10px;
}

.compare-extra-specs .compare-item-spec .label {
  flex: 1 1 auto;
  min-width: 0;
}

/* break-word (mitte anywhere): "A+++" ja "8,80" ei murdu keset sõna, aga
   pikad mõõdud murduvad tühikute kohalt. */
.compare-extra-specs .compare-item-spec .value {
  flex: 0 1 auto;
  text-align: right;
  overflow-wrap: break-word;
}

/* -- 2. Mobiilis joondub sorteerimine paremale ---------------------------
      Kuni 576px on .sort-by tavavoos (position: relative), seega tuleb
      sisu ise paremale lükata.                                            */
@media (max-width: 576px) {
  .page-header .sort-by {
    display: flex;
    justify-content: flex-end;
  }
}

/* EEMALDATUD 18.08.2026 - surnud kood: .product-specs, .spec-row, .spec-value-block (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   MUUDATUSED 17.08 (12) - hero ja trust-bari vahe
   --------------------------------------------------------------------------
   Hero ja logoriba vaheline tuhimik oli 80px, logoriba ja kategooriate
   halli kasti vaheline aga 60px. Nuud on molemad 60px, ehk logorida on
   uleval ja all vordse vahega.
   ========================================================================== */
.trust-bar {
  padding-top: 60px;
}

/* ==========================================================================
   MUUDATUSED 18.08 - filtrid, vordlusnupp ja voimsusklassi hover
   ========================================================================== */

/* -- 1. Vordlusnupu aktiivne olek kategooriakaardil ------------------------
   .pcard-wrap kaardistiil nullis nupu tausta ja aarise (background:none,
   border:0 - molemad !important), mistottu aktiivne olek ei paistnud kaardil
   kunagi valja. Siin on suurem spetsiifilisus, seega see reegel voidab ka
   lehesisese <style> ploki ilma seda muutmata.
   Aktiveerituna: valge aaris umber nupu.                                   */
.products-grid .product-card.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
.products-grid .product-card.pcard-wrap .compare-icon-btn.active {
  border: 1px solid #ffffff !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

/* Aaris kasvab nupust sissepoole, mitte valjapoole - nii ei nihku ikoon. */
.products-grid .product-card.pcard-wrap .compare-icon-btn {
  box-sizing: border-box;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

/* -- 2. Voimsusklassi hover-joon jaab nupu umarate nurkade sisse -----------
   .variant-btn::before/::after joonistavad 3px jooned nupu alaserva. Nupul on
   border-radius, joon aga algas taisnurkselt servast: hover'i ajal ulatus see
   nahtavalt kumerusest valja. overflow:hidden loikab jooned nupu enda kujuga
   tapselt vastavusse.
   Erand: mudelinupud, mille kuljes ripub .var-model-hover silt (tootelehel) -
   seal peab sisu nupust valja ulatuma.                                      */
.variant-btn:not(:has(.var-model-hover)) {
  overflow: hidden;
}

/* Varuvariant brauseritele, kus :has() ei tooda: kategoorialehe kaardil ei
   ole kunagi .var-model-hover silti. */
.pcard-wrap .variant-btn,
.variant-btn--stacked {
  overflow: hidden;
}

/* -- 3. Filtrikast: ka parem alumine nurk umar ---------------------------- */
.sidebar-filters {
  border-radius: 0 16px 16px 0 !important;
}

@media (min-width: 993px) {
  .sidebar-filters {
    border-radius: 0 16px 16px 0 !important;
  }
}

@media (max-width: 992px) {
  .sidebar-filters {
    border-radius: 0 !important;
  }
}

/* Filtrirea hover ei tohi umarat alumist nurka kandiliseks varvida.
   Viimase grupi viimane rida saab sama kumeruse. */
.sidebar-filters .filter-group:last-child .checkbox-label:last-of-type:hover {
  border-radius: 0 12px 12px 0;
}

/* -- 4. Hinnavahemik: kaks pidet uhel ribal -------------------------------
   JS (js/common.js -> buildPriceRangeSlider) ehitab olemasoleva
   <input id="priceRange"> korvale teise liuguri ja mahutab molemad samale
   rajale. Radadel on pointer-events:none, pidemetel :auto - nii saab
   moodmisest hoolimata haarata alati sellest pidemest, mis kursorile
   lahemal on.                                                              */
.price-range {
  position: relative;
  height: 20px;
  margin: 6px 0 14px;
}

.price-range__track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  background: #E5E2DC;
  pointer-events: none;
}

.price-range__fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  background: var(--purple-primary, #5b0e8a);
  pointer-events: none;
}

.price-range input[type="range"].slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-range input[type="range"].slider::-webkit-slider-runnable-track {
  background: none;
  height: 20px;
  border: 0;
}

.price-range input[type="range"].slider::-moz-range-track {
  background: none;
  height: 20px;
  border: 0;
}

.price-range input[type="range"].slider::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--purple-deep, #0c284a);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(12, 40, 74, 0.25);
  cursor: pointer;
  transition: transform 0.15s;
}

.price-range input[type="range"].slider::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple-deep, #0c284a);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(12, 40, 74, 0.25);
  cursor: pointer;
  transition: transform 0.15s;
}

.price-range input[type="range"].slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.price-range input[type="range"].slider::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* Aktiivne (haaratud) liugur tostetakse teisest ettepoole, et kattuvate
   pidemete korral saaks molemat eraldi liigutada. */
.price-range input[type="range"].slider.is-front {
  z-index: 3;
}

/* EEMALDATUD 18.08.2026 - surnud kood: .price-values__sep, .filter-hint (kasutust ei olnud üheski 42 HTML-lehest ega JS-failist). */

/* ==========================================================================
   TOOTEKAART (pcard) - kategoorialehe kaardidisain
   --------------------------------------------------------------------------
   Kolis siia lehesisestest <style id="pc-card-style"> plokkidest 18.08.
   Varem oli tapselt sama reeglistik kopeeritud igasse kategoorialehte; nuud
   on see uhes kohas ja kehtib koigil viiel lehel uhtemoodi.
   ========================================================================== */
/* ==========================================================================
   TOOTEKAART (pcard) – kategoorialehe kaardidisain
   Kogu reeglistik on skoobitud .pcard-wrap sisse, et styles.css jääks puutumata.
   ========================================================================== */

.pcard-wrap{
  --pc-ink:#2A0F47; --pc-ink-soft:#5A4270;
  --pc-purple:#5B0E8A; --pc-purple-2:#7B1FA2;
  --pc-red:#E53935; --pc-pink:#FF2E9E;
  --pc-panel-bg:#EEE;
}

/* ---- kaardi korpus ---- */
.pcard-wrap .pcard{
  width:100%;
  container-type:inline-size;
  position:relative;
  display:flex; flex-direction:column;
  border-radius:26px;
  padding:12px;
  background:var(--pc-panel-bg);
  box-shadow:0 10px 18px rgba(30,10,60,.14);
  font-size:16px;
  transition:box-shadow .25s ease, transform .25s ease;
}
.pcard-wrap .pcard:hover{box-shadow:0 14px 26px rgba(30,10,60,.20)}

/* ---- energiaklassi sakk pildikasti vasakus ülanurgas ---- */
.pcard-wrap .pc-tab{
  --tab-r:16px;
  position:absolute; top:0; left:12px; z-index:5;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px;
  background:var(--pc-panel-bg);
  border-radius:10px 0 16px 0;
  font-size:.62rem; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  color:#7A3E92; white-space:nowrap;
}
.pcard-wrap .pc-tab b{color:#16794A;font-size:.8rem;letter-spacing:0}
.pcard-wrap .pc-tab::before,
.pcard-wrap .pc-tab::after{
  /* Kaardi laius on tihti murdosaline (nt 165.125px), mistõttu see nurgasälk
     kattus varem taustaga 0,5px vahega ja jättis pildikasti taustale nähtava
     halli kriipsu (vt tootekaart, ENERGIAKLASS-sakk). 1px suurem sälk + 1px
     kattuvus saki oma taustaga katab selle alamspiksliriba täielikult ära. */
  content:""; position:absolute;
  width:calc(var(--tab-r) + 1px); height:calc(var(--tab-r) + 1px);
  background:radial-gradient(circle at 100% 100%,
    rgba(238,238,238,0) 0 var(--tab-r), var(--pc-panel-bg) var(--tab-r));
}
.pcard-wrap .pc-tab::before{left:calc(100% - 1px); top:10px}
.pcard-wrap .pc-tab::after{top:calc(100% - 1px); left:-1px}

/* ---- pildiala (tume toote kast) ---- */
.pcard-wrap .pc-photo,
.pcard-wrap .pc-photo.product-card-image{
  position:relative;
  height:auto;
  aspect-ratio:1.72;
  min-height:180px; max-height:300px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(120% 80% at 80% 0%, #33245e 0%, rgba(51,36,94,0) 60%),
    linear-gradient(165deg,#241a4b 0%,#1b1439 48%,#221845 100%);
}
.pcard-wrap .pc-photo::before{
  content:"";position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:118%;height:78%;
  background:radial-gradient(ellipse at center, rgba(146,86,255,.55) 0%, rgba(96,48,190,.28) 38%, rgba(27,20,57,0) 70%);
  filter:blur(2px);
}
.pcard-wrap .pc-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62px;z-index:2;
  background:linear-gradient(180deg, rgba(24,16,52,0) 0%, rgba(24,16,52,.42) 45%, rgba(24,16,52,.82) 100%);
  pointer-events:none;
}
.pcard-wrap .pc-photo img,
.pcard-wrap .pc-photo .main-card-img{
  position:relative; z-index:1;
  width:92%; max-height:74%; height:auto; object-fit:contain; margin-top:4px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
  transition:opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.pcard-wrap .pcard:hover .pc-photo img{transform:translateY(-4px) scale(1.02)}
.pcard-wrap .pc-photo-link{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:88%;margin-top:6px;text-decoration:none;cursor:pointer;
}
.pcard-wrap .pc-photo-link img{width:100%;margin-top:0}

/* ---- hinnasilt pildikasti sees ---- */
.pcard-wrap .pc-price{
  position:absolute; z-index:3; top:11px; right:13px;
  padding:11px 18px 10px;
  border-radius:16px;
  background:linear-gradient(135deg,#FF44AE 0%,#E5199B 55%,#C81A9B 100%);
  box-shadow:0 12px 26px rgba(230,25,155,.42), 0 1px 0 rgba(255,255,255,.35) inset;
  text-align:right; line-height:1;
}
.pcard-wrap .pc-price__num,
.pcard-wrap .pc-price .product-price-large{
  display:block; margin:0;
  font-size:1.5rem; font-weight:800; letter-spacing:-.5px; color:#fff;
  text-shadow:0 1px 2px rgba(90,0,60,.28); white-space:nowrap;
}
.pcard-wrap .pc-price__vat{
  display:block; margin-top:5px;
  font-size:.55rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

/* ---- järelmaksurida pildi alaservas ---- */
.pcard-wrap .pc-finance,
.pcard-wrap .pc-finance.product-finance{
  position:absolute; z-index:3; right:18px; bottom:6px;
  display:block; margin:0; padding:0; background:none; border-radius:0;
  font-size:.7rem; color:rgba(238,231,255,.85); font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.pcard-wrap .pc-finance b{color:#fff;font-weight:700}

/* ---- võrdlusnupp pildi vasakus alanurgas ---- */
.pcard-wrap .compare-icon-btn{
  position:absolute!important; z-index:4;
  top:auto!important; bottom:4px!important; left:16px!important; right:auto!important;
  color:rgba(217,206,245,.8)!important; background:none!important; border:0!important;
}
.pcard-wrap .compare-icon-btn:hover{color:#fff!important}

/* ---- alumine osa ---- */
.pcard-wrap .pc-panel{
  margin-top:18px;
  padding:0 10px 6px;
  display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:0;
  position:relative;
  flex:1;
}
.pcard-wrap .pc-main{min-width:0}
.pcard-wrap .pc-div{display:none}

.pcard-wrap .pc-brand{
  font-size:.64rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:#8A4C9E; margin-bottom:5px;
}
.pcard-wrap .pc-name{
  margin:0 0 8px; font-size:1.3rem; line-height:1.12; font-weight:800;
  letter-spacing:-.4px; color:var(--pc-ink); text-transform:uppercase;
}
.pcard-wrap .pc-name a{color:inherit;text-decoration:none;transition:color .2s ease}
.pcard-wrap .pc-name a:hover{color:var(--pc-purple)}

/* ---- valikuploki silt ---- */
.pcard-wrap .pc-opt-label{
  font-size:.62rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:#7A3E92;margin-bottom:7px;
}

/* ---- võimsusklassi valik ---- */
.pcard-wrap .pc-classes,
.pcard-wrap .pc-classes.variant-selector{
  display:flex!important;gap:8px;margin:0 0 16px;flex-wrap:wrap;
}
.pcard-wrap .pc-classes .variant-btn{
  flex:0 0 calc((100% - 24px) / 4)!important; max-width:calc((100% - 24px) / 4)!important; min-width:0!important; width:auto!important;
  border:1px solid rgba(74,26,110,.16);
  background:#FFFFFF;
  border-radius:12px; padding:8px 4px 7px!important; margin:0!important;
  cursor:pointer; text-align:center;
  transition:.2s cubic-bezier(.4,0,.2,1);
  font-family:inherit;
  min-height:0;
}
.pcard-wrap .pc-classes .var-title{
  display:block!important;font-size:1.02rem!important;font-weight:800!important;
  color:var(--pc-ink);line-height:1.1!important;margin:0!important;
}
.pcard-wrap .pc-classes .var-power{
  display:block!important;font-size:.6rem!important;font-weight:600!important;
  color:var(--pc-ink-soft);margin-top:2px!important;opacity:1!important;
}
.pcard-wrap .pc-classes .variant-btn:hover{
  background:#fff;border-color:rgba(91,14,138,.45);transform:translateY(-1px);
}
.pcard-wrap .pc-classes .variant-btn.active{
  background:linear-gradient(135deg,var(--pc-purple) 0%,var(--pc-purple-2) 100%)!important;
  border-color:transparent!important;
  box-shadow:0 6px 14px rgba(91,14,138,.32);
}
.pcard-wrap .pc-classes .variant-btn.active .var-title{color:#fff!important}
.pcard-wrap .pc-classes .variant-btn.active .var-power{color:rgba(255,255,255,.8)!important}

/* ---- värvivalik ---- */
.pcard-wrap .pc-colors,
.pcard-wrap .pc-colors.cat-color-selector{
  position:static!important;
  display:flex!important;align-items:center;gap:9px;margin:0 0 18px;flex-wrap:wrap;
}
.pcard-wrap .pc-swatch,
.pcard-wrap .cat-color-btn.pc-swatch{
  width:26px!important;height:26px!important;border-radius:50%!important;padding:0!important;
  margin:0!important;cursor:pointer;flex:0 0 auto;
  background:var(--sw);
  border:2px solid #fff!important;
  box-shadow:0 0 0 1px rgba(74,26,110,.22), 0 2px 6px rgba(52,10,80,.18);
  transition:.18s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.pcard-wrap .pc-swatch:hover{transform:scale(1.12)}
.pcard-wrap .pc-swatch.active{
  transform:scale(1.06);
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--pc-purple), 0 3px 8px rgba(52,10,80,.28);
}
.pcard-wrap .pc-color-name{
  font-size:.72rem;font-weight:700;color:var(--pc-ink);margin-left:3px;white-space:nowrap;
}

/* ---- spetsifikatsioonid ---- */
.pcard-wrap .pc-specs{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(74,26,110,.16);padding-top:6px;margin-top:2px;
  align-self:stretch;
}
.pcard-wrap .pc-spec{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:11px 0; border-bottom:1px solid rgba(74,26,110,.16);
}
.pcard-wrap .pc-spec:last-child{border-bottom:0}
.pcard-wrap .pc-spec__t{
  font-size:.76rem;font-weight:700;letter-spacing:.2px;text-transform:uppercase;
  color:#7A3E92;margin:0;flex:1 1 auto;min-width:0;line-height:1.25;
}
.pcard-wrap .pc-spec__v{
  font-size:.88rem;font-weight:700;color:var(--pc-ink);line-height:1.25;
  margin-left:auto;text-align:right;white-space:nowrap;
}
.pcard-wrap .pc-spec__v .rng{font-size:.9rem;font-weight:600;color:var(--pc-ink-soft);white-space:nowrap}

/* ---- nupud kaardi alaservas ---- */
.pcard-wrap .pc-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;align-self:end;
}
.pcard-wrap .pc-btn{
  border:0!important;cursor:pointer;font-family:inherit;white-space:nowrap;
  padding:13px 6px!important;border-radius:999px!important;
  font-size:.8rem!important;font-weight:800!important;letter-spacing:0!important;
  text-transform:none!important;width:auto!important;min-height:0!important;
  transition:.22s cubic-bezier(.4,0,.2,1);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;
}
.pcard-wrap .pc-btn--primary,
.pcard-wrap .pc-btn.btn-order{
  background:linear-gradient(135deg,var(--pc-purple) 0%,var(--pc-purple-2) 100%)!important;
  color:#fff!important;box-shadow:0 8px 18px rgba(91,14,138,.34)!important;
}
.pcard-wrap .pc-btn--primary:hover,
.pcard-wrap .pc-btn.btn-order:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(91,14,138,.42)!important}
.pcard-wrap .pc-btn--ghost,
.pcard-wrap .pc-btn.btn-ask-info{
  background:#fff!important;color:var(--pc-purple)!important;
  box-shadow:0 6px 14px rgba(52,10,80,.16)!important;
}
.pcard-wrap .pc-btn--ghost:hover,
.pcard-wrap .pc-btn.btn-ask-info:hover{
  transform:translateY(-2px);color:var(--pc-red)!important;background:#fff!important;
  box-shadow:0 10px 20px rgba(52,10,80,.22)!important;
}

/* ---- LAI kaart (üle 476 px): spetsid paremasse veergu ---- */
@container (min-width:476px){
  .pcard-wrap .pc-panel{
    grid-template-columns:.95fr 1px 1.05fr; grid-template-rows:1fr auto; gap:0 16px;
  }
  .pcard-wrap .pc-main{grid-column:1; grid-row:1}
  .pcard-wrap .pc-div{display:block; grid-column:2; grid-row:1; width:1px; align-self:stretch;
    background:linear-gradient(180deg,rgba(74,26,110,0),rgba(74,26,110,.18) 10%,rgba(74,26,110,.18) 90%,rgba(74,26,110,0))}
  .pcard-wrap .pc-specs{grid-column:3; grid-row:1; border-top:0; padding-top:2px; margin-top:0}
  .pcard-wrap .pc-actions{grid-column:1 / -1; grid-row:2}
  .pcard-wrap .pc-name{font-size:1.42rem}
}

/* ---- keskmine kaart (alla 380 px): sakk ja hinnasilt kompaktsemaks ---- */
@container (max-width:380px){
  .pcard-wrap .pc-tab{--tab-r:13px;padding:10px 15px;font-size:.56rem;gap:7px;letter-spacing:.9px}
  .pcard-wrap .pc-tab b{font-size:.72rem}
  .pcard-wrap .pc-price{padding:9px 14px 8px;top:10px;right:11px}
  .pcard-wrap .pc-price__num,.pcard-wrap .pc-price .product-price-large{font-size:1.3rem}
  .pcard-wrap .pc-price__vat{font-size:.5rem;margin-top:4px}
}

/* ---- kitsas kaart (alla 300 px) ---- */
@container (max-width:300px){
  .pcard-wrap .pc-tab{padding:9px 14px;font-size:.55rem;gap:6px}
  .pcard-wrap .pc-price{top:12px;right:12px;padding:9px 13px 8px}
  .pcard-wrap .pc-price__num,.pcard-wrap .pc-price .product-price-large{font-size:1.25rem}
  .pcard-wrap .pc-name{font-size:1.15rem}
  .pcard-wrap .pc-spec{gap:6px}
  .pcard-wrap .pc-spec__t{font-size:.7rem;letter-spacing:0}
  .pcard-wrap .pc-spec__v{font-size:.82rem}
  .pcard-wrap .pc-spec__v .rng{font-size:.8rem}
  .pcard-wrap .pc-btn{font-size:.72rem!important;padding:11px 4px!important}
  .pcard-wrap .pc-finance,.pcard-wrap .pc-finance.product-finance{font-size:.62rem;right:12px}
  .pcard-wrap .compare-icon-btn{left:12px!important}
}

/* ---- väga kitsas kaart: sakis ainult klass ---- */
@container (max-width:250px){
  .pcard-wrap .pc-tab__lbl{display:none}
}

/* ---- mobiil ---- */
@media (max-width:480px){
  .pcard-wrap .pcard{width:100%}
  .pcard-wrap .pc-price__num,.pcard-wrap .pc-price .product-price-large{font-size:1.4rem}
  .pcard-wrap .pc-tab{padding:10px 16px;font-size:.58rem}
}

/* ---- olemasolevate styles.css reeglite neutraliseerimine kaardi ümber ---- */
.products-grid .product-card.pcard-wrap{
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;
  border-radius:0!important;overflow:visible!important;text-align:left!important;
  flex-direction:column;
}
.products-grid .product-card.pcard-wrap:hover{transform:none!important;box-shadow:none!important}
.pcard-wrap > .pcard{flex:1!important}

/* ---- võrk: kuni 3 kaarti reas ---- */
@media (min-width:1280px){
  .products-grid.three-cols{grid-template-columns:repeat(3,1fr)!important}
}
@media (min-width:700px) and (max-width:1279px){
  .products-grid.three-cols{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:699px){
  .products-grid,.products-grid.three-cols{grid-template-columns:1fr!important}
  /* AUDIT 25.08.2026 - KAARDI PAREM SERV LÕIGATI MOBIILIS ÄRA.
     Ruudustiku lapse min-width on vaikimisi "auto" (= min-content), seega
     1fr rada EI SAA kaardist kitsamaks minna. 360px ekraanil oli rada 312px,
     aga kaart 351,8px -> energiasilt, teine võimsusklassi nupp ja parem
     ääris jäid overflow-x:clip'i taha. Sisu mahub 312px sisse täiesti ära,
     seega lauaarvutis ja tahvlis ei muutu midagi. */
  .products-grid > .product-card.pcard-wrap{min-width:0}
}

.products-main{background:#FFF}

/* ---- alapealkiri nime all (oh-vesi: "ilma tarbeveeboilerita" jne) -------
   Kaardi nimi on suurtahtedega ja lyhike; tapsustus laheb eraldi reale
   vaiksemalt, muidu venib pealkiri kolmele reale ja kaardid ei joondu. */
.pcard-wrap .pc-sub{
  margin:-4px 0 10px;
  font-size:.8rem; font-weight:600; line-height:1.25;
  color:var(--pc-ink-soft,#5A4270);
}

/* ---- lihtne kaart ilma naitajate veeruta (tarvikud) ---------------------
   Tarvikul ei ole voimsusklassi ega tehnilisi naitajaid - kuvame nime ja
   hinna, nagu seni. Ilma selleta jaaks laias vaates naitajate veerg tuhjaks
   ja kaart naeks poolik valja. */
.pcard-wrap .pcard--simple .pc-panel{
  grid-template-columns:1fr!important; grid-template-rows:1fr auto!important;
}
.pcard-wrap .pcard--simple .pc-main{grid-column:1!important; grid-row:1!important}
.pcard-wrap .pcard--simple .pc-div{display:none!important}
.pcard-wrap .pcard--simple .pc-actions{grid-column:1!important; grid-row:2!important}

/* Tarvikupilt on hele tootefoto - tume pildikast neelaks selle ara. */
.pcard-wrap .pc-photo--light,
.pcard-wrap .pc-photo--light.product-card-image{
  background:linear-gradient(165deg,#E3E3E3 0%,#D8D8D8 55%,#E9E9E9 100%);
}
.pcard-wrap .pc-photo--light::before{
  background:radial-gradient(ellipse at center, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
}
.pcard-wrap .pc-photo--light::after{display:none}
.pcard-wrap .pc-photo--light img{filter:drop-shadow(0 18px 22px rgba(70,20,100,.20))}

/* ==========================================================================
   MUUDATUSED 18.08 (2) - vordlusnupp ja ohk-vesi pildikastid
   ========================================================================== */

/* -- 1. Vordlusnupp: ei mingit aarist ega tausta ---------------------------
   Nupul oli hover'i/aktiivse oleku jaoks valge aaris + hagune taust (18.08
   reegel). Soov: kast kaob taielikult ara, aktiivsust naitab ainult noolte
   valge varv. Selektorid on tapselt sama spetsiifilisusega kui varasemad
   reeglid ja seisavad failis hiljem, seega need voidavad.                  */
.products-grid .product-card.pcard-wrap .compare-icon-btn,
.products-grid .product-card.pcard-wrap .compare-icon-btn:hover,
.products-grid .product-card.pcard-wrap .compare-icon-btn:focus,
.products-grid .product-card.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
.products-grid .product-card.pcard-wrap .compare-icon-btn.active,
.pcard-wrap .compare-icon-btn,
.pcard-wrap .compare-icon-btn:hover,
.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
.pcard-wrap .compare-icon-btn.active {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Aktiivne olek = ainult valged nooled. */
.products-grid .product-card.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
.products-grid .product-card.pcard-wrap .compare-icon-btn.active,
.pcard-wrap .compare-icon-btn:has(.compare-check:checked),
.pcard-wrap .compare-icon-btn.active {
  color: #ffffff !important;
}

/* -- 2. Ohk-vesi kategoorialehe pildikastid --------------------------------
   Ohk-vesi seadmed on pusti korged (kapp/silinder), pildikast aga oli lai ja
   madal (aspect-ratio 1.72). Lisaks ei rakendunud pildi max-height:74%, sest
   protsent arvutatakse .pc-photo-link korgusest, mis on auto -> pilt jooksis
   kastist valja ja overflow:hidden loikas seadmest ainult keskmise riba
   valja. Siin: korgem kast + pilt mahutatakse object-fit'iga tervikuna.
   Reegel kehtib ainult sellel lehel (body.cat-ohkvesi).                    */
body.cat-ohkvesi .pcard-wrap .pc-photo,
body.cat-ohkvesi .pcard-wrap .pc-photo.product-card-image {
  aspect-ratio: 1.08;
  min-height: 260px;
  max-height: 380px;
}
body.cat-ohkvesi .pcard-wrap .pc-photo-link {
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 58px 14% 30px;
  box-sizing: border-box;
}
body.cat-ohkvesi .pcard-wrap .pc-photo img,
body.cat-ohkvesi .pcard-wrap .pc-photo .main-card-img,
body.cat-ohkvesi .pcard-wrap .pc-photo-link img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  margin-top: 0;
}

/* ==========================================================================
   MUUDATUSED 18.08 (3) - voimsusklassi valiku sujuvus
   ========================================================================== */

/* -- 1. Libisev aktiivne toon ---------------------------------------------
   Varem oli aktiivne olek nupu enda taust (linear-gradient). Gradienti ei saa
   ule-minekuga animeerida, seega toon huppas hetkega uhelt nupult teisele.
   Nuud joonistab tooni uks eraldi element (.pc-class-ind), mille js/common.js
   paigutab aktiivse nupu kohale ja mis liigub transform'iga sujuvalt.

   Virnastamine: .pc-classes on oma virnastuskontekst (isolation), tooniriba
   z-index:1 joonistub nuppude taustade peale, nuppude tekst z-index:2 tooni
   peale. Nii ei kao riba teiste nuppude valge tausta taha ega kata teksti.
   Kogu plokk kehtib ainult siis, kui skript on riba lisanud (.has-ind) -
   ilma JS-ita jaab senine kohene gradient alles.                           */
.pcard-wrap .pc-classes,
.pcard-wrap .pc-classes.variant-selector {
  position: relative;
  isolation: isolate;
}
.pcard-wrap .pc-classes .pc-class-ind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0;
  height: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pc-purple) 0%, var(--pc-purple-2) 100%);
  box-shadow: 0 6px 14px rgba(91, 14, 138, .32);
  pointer-events: none;
  /* AUDIT 25.08.2026 - "will-change" oli PÜSIVALT peal. Iga tootekaart saab
     oma indikaatori, seega kategoorialehel hoiti 21 elementi igavesti eraldi
     GPU-kihina, ka siis kui neist ei liigu ükski. Lisaks on "width"
     mittekomposiitne omadus - will-change ei kiirenda seda kuidagi, sunnib
     ainult kihti hoidma. Vihje antakse nüüd alles siis, kui kaart on
     päriselt puudutuse/kursori all. Animatsioon ise on muutumatu. */
  transition: transform .34s cubic-bezier(.4, 0, .2, 1),
              width .34s cubic-bezier(.4, 0, .2, 1),
              height .34s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}
/* AUDIT 25.08.2026 - vihje ainult siis, kui kaart on päriselt kasutuses. */
.pcard-wrap .pc-classes:hover .pc-class-ind,
.pcard-wrap .pc-classes:focus-within .pc-class-ind {
  will-change: transform;
}
/* Esimene paigutus (ja akna suuruse muutus) ilma animatsioonita. */
.pcard-wrap .pc-classes .pc-class-ind.no-anim {
  transition: none !important;
}
.pcard-wrap .pc-classes.has-ind .variant-btn {
  position: relative;
}
.pcard-wrap .pc-classes.has-ind .variant-btn > span {
  position: relative;
  z-index: 2;
  transition: color .25s ease;
}
/* Aktiivsel nupul oma tausta enam ei ole - selle joonistab tooniriba. */
.pcard-wrap .pc-classes.has-ind .variant-btn.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.pcard-wrap .pc-classes.has-ind .variant-btn.active:hover {
  transform: none;
}

/* -- 2. Hinna ja naitajate sujuv vahetus ----------------------------------
   js/common.js teeb vana vaartusest hetkeks "kummituse" (.pc-val-ghost),
   mis haihtub, ja uus vaartus ilmub sisse. Riba laius muutub FLIP-meetodil,
   seega roosa hinnasilt ei hupata enam uhe kaadriga uude laiusesse.        */
.pcard-wrap .pc-price.is-resizing {
  overflow: hidden;
}
.pc-val-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity .44s cubic-bezier(.33, 0, .3, 1), transform .44s cubic-bezier(.22, .61, .36, 1);
}
/* Vana vaartus lahkub sinnapoole, kust nupu valik tuli; nihke suuna annab
   js/common.js reavalise transform'iga. */
.pc-val-ghost.is-out {
  opacity: 0;
  transform: translateX(-12px);
}

/* Vahendatud liikumise eelistuse korral jaavad vaartused paigale. */
@media (prefers-reduced-motion: reduce) {
  .pcard-wrap .pc-classes .pc-class-ind,
  .pc-val-ghost {
    transition: none !important;
  }
}

/* ==========================================================================
   PUUTEALAD - WCAG 2.5.8 / iOS HIG nõuavad vähemalt 44x44 px
   Lisatud 18.08.2026 koodiauditi käigus.

   MIKS SEE PLOKK ON @media (pointer: coarse) SEES
   Hiirekursor tabab 26 px ringi probleemideta, sõrm mitte. Kogu plokk kehtib
   AINULT puutega seadmetel, seega lauaarvuti välimus ei muutu ühegi piksli
   võrra. Sama mustrit kasutab fail juba mujal (vt @media (hover: none)).

   Kus võimalik, ei suurendata elementi ennast, vaid ainult tema PUUTEALA
   (::after inset: -Npx). Nii jääb ka mobiilis nähtav kujundus täpselt samaks -
   muutub ainult see, kui täpselt pead sõrmega pihta saama.
   ========================================================================== */

@media (pointer: coarse) {

  /* Kategoorialehe kaardi värvivalik. Mõõdetud 26x26 px = 59% nõutust.
     Ring jääb 26 px, puuteala kasvab 44 px-ni. Vahe suureneb 9 -> 22 px,
     et laiendatud alad ei kataks naabreid. NB: aktiivne ring on scale(1.06)
     all, seega tema ala on 46,64 px - 20 px vahega jäi varu ainult 0,68 px,
     22 px annab ~2,7 px. Kattuvad alad tähendaksid vale värvi valimist. */
  .pcard-wrap .pc-swatch,
  .pcard-wrap .cat-color-btn.pc-swatch { position: relative; }
  .pcard-wrap .pc-swatch::after {
    content: "";
    position: absolute;
    /* NB: inset arvestatakse PADDING-kastist, mitte border-kastist. Ringil on
       2 px ääris, seega inset:-9px andis 22+18 = 40 px, mitte 44. Fikseeritud
       suurus + keskele joondus annab tulemuse ääris-sõltumatult. */
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
  }
  .pcard-wrap .pc-colors,
  .pcard-wrap .pc-colors.cat-color-selector { gap: 22px; }

  /* Tootelehe värvivalik. Oli 38 px - keegi oli juba 34 -> 38 tõstnud,
     aga 6 px jäi puudu. */
  .color-swatches .color-swatch { position: relative; }
  .color-swatches .color-swatch::before {
    content: "";
    position: absolute;
    /* Sama põhjus mis kaardi ringil: 1 px ääris sõi inset:-3px puhul 2 px ära
       (38-2+6 = 42). Fikseeritud 44x44 keskele. */
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
  }
  .color-swatches { gap: 16px; }

  /* Sorteerimisnupp. Mõõdetud 21,9 px - saidi väikseim juhtelement,
     vähem kui pool nõutust. Avatud menüü valikud olid 33,9 px. */
  .sort-control__current { min-height: 44px; }
  /* 13+13 px polsterdust + 17,92 px reakõrgus = 43,91 px ehk 0,09 px puudu.
     min-height garanteerib 44 px sõltumata fondi mõõtudest. */
  .sort-control__option { padding: 13px 10px; min-height: 44px; }

  /* Filtrite märkeruudud mobiilisahtlis. Silt on tegelik puuteala, oli 36,3 px. */
  .sidebar-filters .checkbox-label,
  .checkbox-label { min-height: 44px; }

  /* REGRESSIOONI PARANDUS.
     Failis oli täpselt üks teadlik puutealareegel:
         .variant-btn--stacked { min-height: 44px }
     Uus kaardiplokk lisas hiljem
         .pcard-wrap .pc-classes .variant-btn { min-height: 0 }
     mis on spetsiifilisem (0,3,0 vs 0,1,0) ja nullis selle ära kõigil
     kategoorialehtedel. Ventilatsioonilehe võimsusnupud jäid 34,9 px peale;
     mujal päästis kahe rea tekst - vedamine, mitte kujundus. */
  .variant-btn,
  .variant-btn--stacked,
  .pcard-wrap .pc-classes .variant-btn { min-height: 44px; }

  /* Kaardi nupud "Telli" / "Saada päring" - 36 px. Peamised konversiooninupud,
     37 kaardil. !important on vajalik, sest algreeglis on min-height:0!important. */
  .pcard-wrap .pc-btn { min-height: 44px !important; }

  /* Võrdlusnupp kaardil - 28x28 px. Ikoon jääb samaks, ala kasvab. */
  .compare-icon-btn { position: relative; }
  .compare-icon-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* Hinnavahemiku kaks pidet olid 20x20 px ja kattuvad - saidi kõige
     raskemini tabatav element. */
  .price-range,
  .price-range input[type="range"].slider,
  .price-range input[type="range"].slider::-webkit-slider-runnable-track { height: 28px; }
  .price-range input[type="range"].slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .price-range input[type="range"].slider::-moz-range-thumb { width: 28px; height: 28px; }
}

/* Päise nupud.
   pointer:coarse on siin siiski vajalik: hiirega, aga kitsaks tõmmatud
   brauseriaknas (<= 768 px) kehtiks muidu ka see plokk ja päis kasvaks
   62 -> 64 px. Kahju ei oleks, aga lubadus "lauaarvutis ei muutu midagi"
   peab kehtima igal aknalaiusel. */
@media (max-width: 768px) and (pointer: coarse) {
  .mobile-menu-btn { width: 44px; height: 44px; }
  .mobile-search-toggle { width: 44px; height: 44px; }
  .mobile-filter-btn { min-height: 44px; }
}

/* ==========================================================================
   MUUDATUSED 19.08 - vordlus, filtrid, logo, mobiilipaigutus
   --------------------------------------------------------------------------
   Vt js/common.js (renderCompareModal, pickCompareExtraSpecs, addBrandCounts).
   ========================================================================== */

/* -- 1. Vordluskaardid ei venita enam teineteist ---------------------------
   .compare-grid on flex-konteiner ja align-items oli vaikimisi "stretch":
   uhe kaardi peal "Lae veel andmeid" vajutades kasvasid KOIK kaardid sama
   korgeks. Nagi valja, nagu avaneks info igal tootel korraga.
   flex-start jatab iga kaardi oma korgusesse.                              */
.compare-grid {
  align-items: flex-start;
}

/* -- 2. Mobiilis mahub vordluskaart ekraanile -----------------------------
   .compare-item laius oli fikseeritud 330px. 390px ekraanil (koos modaali
   ja kaardi sisepolstriga) loigati vaartused ara: "kuni 60 m" ja
   "kuni -25 °C" jaid poolikuks.                                            */
@media (max-width: 640px) {
  /* Korvuti nad ei mahu: kaks 330px kaarti 390px ekraanil tahendas, et silt
     ja vaartus kirjutasid teineteise peale. Ustteise all on iga kaart terve
     ekraani laiune ja koik read mahuvad ara.                                */
  .compare-grid {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
  }
  .compare-item {
    width: 100%;
    min-width: 0;
    padding: 18px 14px;
  }
}

/* -- 3. Vordluse naitajad uhel real ---------------------------------------
   Silt kahaneb, vaartus mitte: number ja uhik ei tohi kunagi murduda.      */
.compare-item-spec {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
}
/*
  Silt kahaneb ja saab hadaparast kolm punkti (tais tekst jaab title= sisse);
  vaartus ei murdu ega kahane kunagi. Nii on rida ALATI uks rida.
  Varem sai uhesonaline silt ("Kuttevoimsus") kahaneda, aga tema tekst ei
  murdunud - see kirjutas vaartuse peale.
*/
.compare-item-spec .label {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-item-spec .value {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* Lisaandmete read on pikima sisuga (moodud + uhik), seega neil aste vaiksem
   kiri - nii mahub ka "Siseosa (L x S x K)  870 x 230 x 290 mm" uhele reale. */
.compare-extra-specs .compare-item-spec {
  font-size: 0.74rem;
  padding: 6px 8px;
}
.compare-extra-specs .compare-item-spec .label {
  flex: 0 1 auto;
  min-width: 0;
}
.compare-extra-specs .compare-item-spec .value {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* -- 4. Varvivalik pildikasti vasakusse alla nurka ------------------------
   Varem kleebiti kaardilt kloonitud varviplokk pildi korvale koos sona
   "Valge"-ga, mis nagi valja nagu pildi allkiri. Nuud on pildikasti nurgas
   selge silt "Vali varv" ja selle all svatsid; sona "Valge" eemaldab JS.  */
.compare-item-image {
  position: relative;
}
.compare-color {
  position: absolute;
  left: 5px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: auto;
}
.compare-color__label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1;
}
.compare-item-image .cat-color-selector,
.compare-item-image .pc-colors {
  position: static !important;
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Svatsi kuju on kirjeldatud ".pcard-wrap .pc-swatch" all, aga vordluses on
   vanemaks .compare-item - ilma selle kordusera jaid ringidest mustad
   ristkulikud. Sama mootmed, et vordlus ja kaart naeksid uhesugused valja. */
.compare-item-image .pc-swatch,
.compare-item-image .cat-color-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--sw, #fff);
  box-shadow: 0 0 0 1px rgba(74, 26, 110, 0.22), 0 2px 6px rgba(52, 10, 80, 0.18);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-item-image .pc-swatch.active,
.compare-item-image .cat-color-btn.active {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--purple-deep), 0 3px 8px rgba(52, 10, 80, 0.28);
}
/* Pilt nihkub paremale, et varviplokk ei jaaks selle alla. */
.compare-item-image {
  overflow: hidden;
}
.compare-color ~ img {
  margin-left: auto;
  margin-right: 4px;
  max-width: 58%;
}

/* -- 5. Lisaandmete nupp alati uhel real ---------------------------------- */
.btn-compare-specs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* -- 6. Logoriba mobiilis hero kulge --------------------------------------
   Hilisem reegel ".trust-bar { padding-top: 60px }" (lisatud 17.08) on
   valjaspool meediaparingut ja tuhistas mobiili 28px ulemise polstri:
   hero ja logode vahe oli 60px, logode ja jargmise kasti vahe 26px.
   Nuud on molemad pooled vordsed ja logod istuvad veidi korgemal.          */
@media (max-width: 860px) {
  .trust-bar {
    padding-top: 30px;
    padding-bottom: 34px;
  }
}
@media (max-width: 576px) {
  .trust-bar {
    padding-top: 20px;
    padding-bottom: 26px;
  }
}

/* -- 7. Logo korval nimi suurte tahtedega -------------------------------- */
.logo span {
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

/* -- 8. Kaardi naitaja mahub uhele reale ---------------------------------
   "Kuttevoimsus  3,2 kW (0,85 - 7,50 kW)" murdus kaheks reaks, sest
   .pc-spec oli flex-wrap: wrap. Nuud kahaneb silt ja vaartus jaab tervikuks;
   kitsal kaardil vaheneb kiri astme vorra.                                 */
.pcard-wrap .pc-spec {
  flex-wrap: nowrap;
  gap: 8px;
}
.pcard-wrap .pc-spec__t {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard-wrap .pc-spec__v {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: clamp(0.78rem, 2.2vw, 0.95rem);
}
.pcard-wrap .pc-spec__v .rng {
  white-space: nowrap;
}

/* -- 9. Valge varvinupu topeltring --------------------------------------
   Valgel svatsil on oma hall 1px aaris (muidu ei paistaks ta valgel taustal
   valja). Aktiivsena tuli sellele veel lilla ring peale - kaks ringi
   ustteise sees nagi valja nagu ulearune joon. Aktiivsena piisab lillast.  */
.color-swatch.active,
.color-swatch[aria-pressed="true"] {
  border-color: transparent;
}


/* ==========================================================================
   KATEGOORIAKAARDI VARVIVALIK PAREMAS SERVAS  (.pc-layout-2)  19.08.2026
   --------------------------------------------------------------------------
   Rida 1:  tootja                    valitud varvi nimi  (paremas aares)
   Rida 2:  mudeli nimi               varvinupud          (paremas aares)
   Rida 3:  "Vali voimsusklass"
   Rida 4:  voimsusklassi nupud       (ule kogu laiuse)

   Silti "Vali varv" ei ole - selle asemel seisab valitud varvi nimi
   ("VALGE", "MUST") sama kirjastiiliga nagu "Vali voimsusklass". Nime hoiab
   ajakohasena js/common.js syncColor(), mis otsib .pc-color-name kogu
   kaardilt - seetottu ei olnud JS-i vaja puutuda.

   POHIMOTE: vasaku veeru elementide margid, fondid ja reavahed jaavad
   TAPSELT samaks nagu vanas paigutuses - neile antakse ainult koht
   ruudustikus. Varvivalik on omaette kast (.pc-colorbox), mis on
   min-height:0 / margin:0 / padding:0, seega ta EI SAA ridu venitada ega
   midagi paigast lukata. Ridade korgused tulevad ainult vasakust veerust.

   Kehtib AINULT kaartidel, millel on klass pc-layout-2 - kaardid ilma
   varvivalikuta (konditsioneerid, ohk-vesi, tarvikud, ventilatsioon)
   nagevad valja tapselt nagu enne.
   ========================================================================== */
.pcard-wrap.pc-layout-2 .pc-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px;
}

/* --- vasak veerg: AINULT ruudustiku koht + vasakule joondus --------------- */
.pcard-wrap.pc-layout-2 .pc-brand{grid-column:1;grid-row:1;text-align:left}
.pcard-wrap.pc-layout-2 .pc-name{grid-column:1;grid-row:2;text-align:left}
.pcard-wrap.pc-layout-2 .pc-opt-label--class{grid-column:1;grid-row:3;text-align:left}
.pcard-wrap.pc-layout-2 .pc-classes,
.pcard-wrap.pc-layout-2 .pc-classes.variant-selector{grid-column:1 / -1;grid-row:4}

/* --- parem veerg: varvivaliku oma kast ----------------------------------- */
.pcard-wrap.pc-layout-2 .pc-colorbox{
  grid-column:2;
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  min-height:0;          /* garantii: kast ei venita ridu */
  height:100%;
  margin:0;
  padding:0;
  gap:0;
  line-height:1;
}

/* Varvi nimi seisab seal, kus enne oli "Vali varv" - ja naeb valja tapselt
   nagu valikuploki silt: sama suurus, paksus, tahevahe ja toon. */
.pcard-wrap.pc-layout-2 .pc-colorbox .pc-color-name{
  margin:0;padding:0;white-space:nowrap;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#7A3E92;
  line-height:1.65;
}
.pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors,
.pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors.cat-color-selector{
  margin:0!important;padding:0;gap:7px;flex-wrap:nowrap;line-height:0;
}
/* Nupud on siin veidi vaiksemad kui vanas paigutuses (26px -> 21px),
   sest nad seisavad mudeli nime korval, mitte omaette real. */
.pcard-wrap.pc-layout-2 .pc-colorbox .pc-swatch,
.pcard-wrap.pc-layout-2 .pc-colorbox .cat-color-btn.pc-swatch{
  width:21px!important;height:21px!important;
}

/* Tapne reajoondus: subgrid annab kastile TAPSELT samad read, mis on vasakul
   veerul. Vanemas brauseris, kus subgridi ei ole, jaab ulal olev flex - siis
   on joondus ligikaudne, aga paigutus ei lagune. */
@supports (grid-template-rows: subgrid) {
  .pcard-wrap.pc-layout-2 .pc-colorbox{
    display:grid;
    grid-template-rows:subgrid;
    justify-items:end;
    align-items:start;
    height:auto;
  }
  .pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors,
  .pcard-wrap.pc-layout-2 .pc-colorbox .pc-colors.cat-color-selector{align-self:center}
}

@media (max-width:420px){
  .pcard-wrap.pc-layout-2 .pc-colorbox .pc-swatch,
  .pcard-wrap.pc-layout-2 .pc-colorbox .cat-color-btn.pc-swatch{width:18px!important;height:18px!important}
}


/* ===========================================================================
   MOBIILIPARANDUSED - lisatud auditil 20.08.2026
   ===========================================================================
   REEGEL, MILLE JARGI SEE PLOKK ON KIRJUTATUD: LAUAARVUTI VAADE EI TOHI
   MUUTUDA. Iga reegel siin on kas @media-paringu sees (mobiil/puutepuutega
   ekraan) voi kasutab min(), mis lauaarvutis annab tapselt vana vaartuse.
   Plokk on faili LOPUS meelega - nii ei nihku uhegi olemasoleva reegli
   reanumber ja midagi ei kirjutata vaikselt ule.
   =========================================================================== */

/* -- 1. TELLIMUSAKEN JOOKSEB VAIKSEL EKRAANIL ULE SERVA ---------------------
   Koigil 40 lehel on tellimusaknas kaks paneeli, molemad inline-stiiliga
   `flex: 1; min-width: 320px; padding: 28px 32px`.
   .modal-content on `width: 90%`, seega akna laius = 0,9 x ekraan:
       390 px (iPhone 12/13/14) -> 351 px : mahub napilt
       360 px (iPhone 12 mini)  -> 324 px : sisule jaab 4 px + 64 px polstrit
       320 px (iPhone SE)       -> 288 px : 32 px ULE SERVA
   min-width voidab flex-shrink'i, seega paneel EI TOMBU kokku. Kuna
   .modal-content on `overflow-y: auto`, tekitab brauser tellimusvormi SISSE
   horisontaalse kerimisriba - ostuteekonna koige tahtsamas kohas.
   Inline-stiili saab ule kirjutada ainult !important'iga.                    */
@media (max-width: 480px) {
  #order-modal .modal-content > div {
    min-width: 0 !important;
    padding: 20px 18px !important;
  }
}

/* -- 2. KATEGOORIAKAARDI VARVINUPUD VARASTAVAD TEINETEISE PUUTE -------------
   18.08 lisatud plokk @media (pointer: coarse) tegi varvinuppudele nahtamatu
   44x44 ::after puutepinna ja suurendas SELLEKS gap'i 22 px peale.
   19.08 lisatud .pcard-wrap.pc-layout-2 ... {gap:7px} on SPETSIIFILISEM
   (0,5,0 vs 0,3,0) ja voidab ka puuteseadmes -> puutepinnad kattuvad:
       nupu samm 21+7 = 28 px  (<=420 px: 18+7 = 25 px)
       puutepind             44 px
   ehk iga nupu parempoolne serv valib JARGMISE varvi.
   Lahendus: jatame nahtava nupu ja vahe TAPSELT samaks, kitsendame ainult
   nahtamatut puutepinda nii, et see taidaks sammu, kuid ei ulatuks naabrisse.
   Kork jaab 44 px - vertikaalis naabrit ei ole.                              */
@media (pointer: coarse) {
  .pcard-wrap.pc-layout-2 .pc-colorbox .pc-swatch::after {
    width: 28px;
    height: 44px;
    margin: -22px 0 0 -14px;
    border-radius: 14px;
  }
}
@media (max-width: 420px) and (pointer: coarse) {
  .pcard-wrap.pc-layout-2 .pc-colorbox .pc-swatch::after {
    width: 25px;
    margin-left: -12.5px;
  }
}

/* -- 3. VORDLUSAKEN: 80 px POLSTRIT 390 px EKRAANIL -------------------------
   .compare-modal-content on `padding: 40px !important` ilma uhegi
   mobiiliulekirjutuseta. 390 px ekraanil on aken 370 px, millest 80 px on
   polster -> sisule 290 px. 19.08 lisatud uheveeruline paigutus oli oige,
   aga polster jai puutumata.
   Teiseks: rida 4273 `max-height: 90vh` tuleb HILJEM kui
   @supports (max-height: 90dvh) plokk real 2437 ja sama spetsiifilisusega,
   seega tuhistab iOS-i aadressiriba paranduse just selle akna jaoks.
   .modal-content.compare-modal-content (0,2,0) voidab tagasi.                */
@media (max-width: 640px) {
  .compare-modal-content {
    padding: 20px 14px !important;
  }
}
@supports (max-height: 90dvh) {
  .modal-content.compare-modal-content {
    max-height: 90dvh;
  }
}

/* -- 4. FILTRISAHTEL JAAB BRAUSERI TOORIBA ALLA ----------------------------
   .sidebar-filters kasutab mobiilis `height: 100vh`. iOS-is on 100vh SUUR
   vaateaken, seega sahtli alumine ~90 px on aadressiriba all. Sama
   @supports-mustrit kasutatakse failis juba modaalidel (rida ~2437), siin
   jai see lisamata. 320 px ekraanil kattis 300 px lai sahtel ka peaaegu kogu
   ekraani - min() jatab servale nahtava riba, lauaarvutis vaartust ei muuda. */
@supports (height: 100dvh) {
  @media (max-width: 992px) {
    .sidebar-filters {
      height: 100dvh;
    }
  }
}
@media (max-width: 360px) {
  .sidebar-filters {
    width: min(300px, 88vw);
  }
}

/* -- 5. TOOTELEHE NUPURIDA EI MURDU ----------------------------------------
   .action-buttons on `flex-wrap: nowrap` ja .btn on `white-space: nowrap`.
   "TELLI" + "SAADA PARING" mahuvad 360 px ekraanile tapselt, ilma varuta.
   Sama parandus on juba olemas failides tootekaart-termo.css (rida ~676) ja
   tootekaart-v2.css (rida ~495) - aga KUMBAGI neist ei lae uksi paris
   tooteleht. Toome selle sinna, kus tooted tegelikult on.                    */
@media (max-width: 400px) {
  .action-buttons {
    flex-wrap: wrap;
  }
  .action-buttons .btn-order,
  .action-buttons .btn-saada-paring {
    flex: 1 1 100%;
  }
}

/* -- 6. TURUNDUSPLOKKIDE 361-367 px SURNUD TSOON ---------------------------
   .feature-content ja .feature-image-box: `min-width: 320px`. .container
   annab `padding: 0 24px`, seega sisu laius = ekraan - 48. Alla 368 px laheb
   rida ule serva. Reale 5604 on juba kirjutatud @media (max-width: 360px)
   parandus - vahele jaab 7 px lai tsoon, kus paigutus endiselt puruneb
   (nahtamatult, sest body on overflow-x: clip).
   min(320px, 100%) annab igal >=320 px laiusel konteineril TAPSELT 320px,
   ehk lauaarvutis on tulemus identne, ja teeb 360px-haki ulearuseks.         */
.feature-content,
.feature-image-box {
  min-width: min(320px, 100%);
}

/* -- 7. KLEEPUVAD RIBAD KADUVAD TAHVLIS PAISE ALLA -------------------------
   Vahemikus 769-992 px ei ole paise veel kokku volditud: .top-bar (44 px,
   sticky top:0) + .header (sticky top:44px, mille sees nav murdub TEISELE
   REALE, ~100 px) = virna alaserv ~146 px.
   #variant-grid kleepub `top: 54px; z-index: 990` ja paise z-index on 1001 -
   ehk voimsusklassi valik parkib paise ALLA ja on kerimisel nahtamatu.
   Sama .products-header'iga (top: 120px), mille kuljes on mobiilne
   "Filtrid" nupp. Alla 768 px on molemad juba oigesti seatud, see vahemik
   jai lihtsalt vahele. Puudutab iPadi portreerezhiimi (820/834 px).          */
@media (min-width: 769px) and (max-width: 992px) {
  .sticky-variant-container #variant-grid {
    top: 150px;
  }
  .products-header {
    top: 150px;
    z-index: 1002;
  }
  #tehnilised-andmed,
  .specs-section,
  .marketing-features {
    scroll-margin-top: 156px;
  }
}

/* -- 8. PUUTEPINNAD, MIS 18.08 PLOKKI EI JOUDNUD ---------------------------
   WCAG 2.5.8 ja iOS HIG noue on 44x44 px. Need jaid katmata. Seal, kus nupu
   NAHTAV suurus on osa disainist (sulgemisristid, vordluse varvinupud),
   suurendame ainult nahtamatut ::after puutepinda - tapselt sama vote, mida
   fail juba kasutab real ~9052. Kusagil ei muutu see, mida silm naeb.        */
@media (pointer: coarse) {
  .mobile-cart-btn,
  .nav-drawer-close,
  .footer-social a {
    width: 44px;
    height: 44px;
  }

  .btn-sm.btn-cat-action,
  .qs-actions .btn {
    min-height: 44px !important;
  }

  .nav-drawer-links a,
  .nav-drawer-phone,
  .lang-dropdown-menu li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  #order-modal .custom-addon-checkbox {
    min-height: 44px;
  }

  /* Nahtav suurus jaab, puutepind kasvab.
     NB 24.08: .compare-item-remove ja .modal-close on juba position:absolute
     (nurgas). "relative" tuhistas selle ja X kukkus tagasi tavavoogu -
     mobiilis seisis vordlusakna sulgemisristike lehe VASAKUS servas.
     Absoluutne element on samamoodi "positioned", seega ::after puutepind
     tootab ka ilma selle rea. Jaab ainult svatsile, mis ei ole positioned. */
  .compare-item-image .pc-swatch {
    position: relative;
  }
  .compare-item-remove::after,
  .modal-close::after {
    content: "";
    position: absolute;
    inset: -7px;
  }
  /* Vordlusaknas kloonitud varvinupud on 24 px + gap 8 px = samm 32 px.
     Neil EI OLE .pcard-wrap esivanemat, seega rea ~9052 44 px puutepind
     nendeni ei jouagi (js/common.js renderCompareModal ehitab .compare-item). */
  .compare-item-image .pc-swatch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 44px;
    margin: -22px 0 0 -16px;
    border-radius: 16px;
  }
}


/* ==========================================================================
   MUUDATUSED 20.08.2026 (2) - sorteerimine ja mobiilipais
   --------------------------------------------------------------------------
   1) Sorteerimise ripploendilt kadus kast (aaris, vari, valge paneel)
   2) Avatud ripploend jaab tootehinna ETTE, mitte taha
   3) Mobiilis on sorteerimine allpool, page-headeri lopus
   4) Sorteerimise avamisel tombub "Filtreeri tooteid" nupp sujuvalt kokku
   5) Mobiilipaise logo ulatub lehe ulaservani
   ========================================================================== */

/* -- 1. Ripploend ilma kastita ---------------------------------------------
      Nupp ise on juba ainult tekst (vt "4. Sorteerimine: aarist ei ole").
      Nuud on ka avatud loend ainult tekst: ei aarist, ei varju, ei umaraid
      nurki, ei valget paneeli. Alles jaab AINULT valge alus teksti taga
      (mitte terve kasti taga) - ilma selleta jaaks tekst tootekaardi roosa
      hinnasildi peale loetamatuks. Read on paremale joondatud, sest nupp,
      millest nad avanevad, on samuti paremas servas.                        */
.sort-control__menu {
  min-width: 0;
  padding: 4px 0 0;
  gap: 2px;
  align-items: flex-end;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sort-control__option {
  width: auto;
  padding: 4px 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  text-align: right;
}

.sort-control__option:hover,
.sort-control__option:focus-visible {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  color: var(--purple-primary, #5b0e8a);
  text-decoration: underline;
  outline: none;
}

/* -- 2. Avatud loend jaab tootehinna ette ----------------------------------
      MIS OLI VALESTI: .sort-control__menu z-index oli 200, aga see kehtib
      ainult OMA virnastuskonteksti sees. .page-header ise oli z-index'ita,
      seega ta virnastus dokumendi jarjekorra alusel - ja tootenimekiri tuleb
      lehel HILJEM. Tulemus: hinnasilt joonistati ripploendi PEALE.

      Parandus: kui loend on avatud (JS lisab .has-open-sort), tostame terve
      page-headeri tootenimekirja ette. Suletud olekus jaab koik endiseks,
      seega tavavaates ei muutu virnastuses midagi.
      900 < paise 1000, seega ripploend ei tule kunagi paise ette.           */
.page-header.has-open-sort {
  overflow: visible;
  z-index: 900;
}

/* -- 3. Mobiilis on sorteerimine allpool, page-headeri lopus ---------------
      transform, MITTE margin: nii nihkub ainult see, mida silm naeb, ja
      page-headeri korgus, alumine polster ja koik jargnevad vahed jaavad
      millimeetri pealt samaks.                                              */
@media (max-width: 576px) {
  .page-header .sort-by {
    transform: translateY(16px);
  }
}

/* -- 4. Sorteerimise avamisel tombub filtrinupp kokku ----------------------
      Mobiilis avaneb sorteerimise loend allapoole, tootenimekirja ribale,
      kus on tais laiuses nupp "Filtreeri tooteid". Ilma selleta jaaks loend
      nupu peale (voi nupp loendi ette).

      Nupp tombub kokku tapselt samaks ikooniks, mis kerimisel (.is-stuck) -
      vasak serv jaab paigale, parem serv liugleb vasakule. Uleminekud on
      nupul juba olemas (width / padding / max-width / opacity), seega
      sulgemisel liugleb ta iseenesest tagasi oma algsuurusesse.             */
@media (max-width: 992px) {
  .products-header.has-open-sort .mobile-filter-btn {
    width: 42px;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-sm);
  }

  .products-header.has-open-sort .mobile-filter-btn__text {
    max-width: 0;
    opacity: 0;
    margin-left: -2px;
  }
}

/* -- 5. Mobiilipaise logo ulatub lehe ulaservani ---------------------------
      Paisel oli peal 12px polstrit ja logo (36px) seisis 44px korguses reas
      keskel - ehk logo kohal oli 16px tuhja valget. Nuud on ulemine polster
      0 ja logo 42px, seega logo puutub riba ulaserva.

      Paise korgus 64 -> 52px. Paise all olev vahe hoiab .header-spacer,
      mille korguse motmoodab js/common.js jooksvalt - seega alumine sisu ei
      nihku. Kleepuva tooteriba peatuskoht tuleb kaasa (68 -> 56), et vahe
      paise ja riba vahel jaaks tapselt samaks nagu enne.                    */
@media (max-width: 768px) {
  .header {
    padding: 0 0 8px;
  }

  .header .logo .logo-img {
    width: 42px;
    height: 42px;
  }

  .products-header {
    top: 56px;
  }
}


/* ==========================================================================
   MUUDATUSED 21.08 - tootekaardi nupud "Tutvu tootega" / "Saada päring"
   ==========================================================================
   1. Mõlemal nupul SUURTÄHED ja suurem kiri - varem .8rem tavakirjas, mis
      lillal gradiendil luges kehvasti.
   2. "Tutvu tootega" (endine "Telli") saab sama clip-path pühkimise mis
      päise "Küsi pakkumist" (#cta-quote): ring kasvab vasakust ülanurgast.
      Suund on sama, värvid vastupidised - taust läheb valgeks, tekst lillaks
      ja ringiga koos tuleb kaasa õhuke lilla ääris.
   3. "Saada päring" jääb täpselt samaks (valge taust, lilla tekst) - hoveril
      lisandub ainult õhuke punane ääris, mis pühib sisse PAREMAST ülanurgast.
   ========================================================================== */

/* -- 1. Loetavam kiri ---------------------------------------------------- */
.pcard-wrap .pc-btn{
  font-size:.84rem!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  padding:13px 10px!important;
}

/* -- 2. "Tutvu tootega": valge pühib sisse vasakust ülanurgast ------------
      Trikk on sama mis kategooriakaardi nupul: nupp ise loob z-index:1 abil
      pinu ja ::before joonistatakse z-index:-1 tõttu nupu tausta PEALE, aga
      teksti ALLA. Ääris on ::before küljes, seega clip-path lõikab ka seda -
      nii ilmub lilla joon täpselt koos pühkimisega, mitte enne seda. */
.pcard-wrap .pc-btn--primary,
.pcard-wrap .pc-btn.btn-order{
  position:relative;
  overflow:hidden;
  z-index:1;
  transition:color .3s ease-out, box-shadow .3s ease-out,
             transform .22s cubic-bezier(.4,0,.2,1);
}

.pcard-wrap .pc-btn--primary::before,
.pcard-wrap .pc-btn.btn-order::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  border:1px solid var(--pc-purple);
  border-radius:inherit;
  z-index:-1;
  clip-path:circle(0% at 0% 0%);
  transition:clip-path .35s ease-out;
  pointer-events:none;
}

.pcard-wrap .pc-btn--primary:hover,
.pcard-wrap .pc-btn.btn-order:hover,
.pcard-wrap .pc-btn--primary:focus-visible,
.pcard-wrap .pc-btn.btn-order:focus-visible{
  color:var(--pc-purple)!important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(91,14,138,.26)!important;
}

.pcard-wrap .pc-btn--primary:hover::before,
.pcard-wrap .pc-btn.btn-order:hover::before,
.pcard-wrap .pc-btn--primary:focus-visible::before,
.pcard-wrap .pc-btn.btn-order:focus-visible::before{
  clip-path:circle(150% at 0% 0%);
}

/* -- 3. "Saada päring": ainult punane ääris, paremast ülanurgast ----------
      Taust ja tekstivärv jäävad muutumatuks. ::after on läbipaistev raam,
      mille clip-path kasvab nurgast 100% 0% - seega joon "joonistub" peale
      vastassuunas "Tutvu tootega" nupule. */
.pcard-wrap .pc-btn--ghost,
.pcard-wrap .pc-btn.btn-ask-info{
  position:relative;
  z-index:1;
}

.pcard-wrap .pc-btn--ghost::after,
.pcard-wrap .pc-btn.btn-ask-info::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--pc-red);
  border-radius:inherit;
  clip-path:circle(0% at 100% 0%);
  transition:clip-path .35s ease-out;
  pointer-events:none;
  z-index:2;
}

/* Vana reegel viis teksti hoveril punaseks - nüüd jääb lilla, sest muutuda
   tohib ainult ääris. */
.pcard-wrap .pc-btn--ghost:hover,
.pcard-wrap .pc-btn.btn-ask-info:hover{
  color:var(--pc-purple)!important;
  background:#fff!important;
}

.pcard-wrap .pc-btn--ghost:hover::after,
.pcard-wrap .pc-btn.btn-ask-info:hover::after,
.pcard-wrap .pc-btn--ghost:focus-visible::after,
.pcard-wrap .pc-btn.btn-ask-info:focus-visible::after{
  clip-path:circle(150% at 100% 0%);
}

/* -- 4. Kitsas kaart: kiri väiksem, aga jääb suurtähtedesse --------------- */
@container (max-width:300px){
  .pcard-wrap .pc-btn{
    font-size:.74rem!important;
    padding:11px 5px!important;
    letter-spacing:.03em!important;
  }
}

/* -- 5. Puutel jääb :hover vajutuse järel kinni - seal animatsiooni ei ole */
@media (hover:none){
  .pcard-wrap .pc-btn--primary:hover,
  .pcard-wrap .pc-btn.btn-order:hover{
    color:#fff!important;
    box-shadow:0 8px 18px rgba(91,14,138,.34)!important;
  }
  .pcard-wrap .pc-btn--primary:hover::before,
  .pcard-wrap .pc-btn.btn-order:hover::before{
    clip-path:circle(0% at 0% 0%);
  }
  .pcard-wrap .pc-btn--ghost:hover::after,
  .pcard-wrap .pc-btn.btn-ask-info:hover::after{
    clip-path:circle(0% at 100% 0%);
  }
}

/* -- 6. Liikumist vältiv kasutaja: lõppolek kohe, ilma pühkimiseta -------- */
@media (prefers-reduced-motion: reduce){
  .pcard-wrap .pc-btn--primary::before,
  .pcard-wrap .pc-btn.btn-order::before,
  .pcard-wrap .pc-btn--ghost::after,
  .pcard-wrap .pc-btn.btn-ask-info::after{
    transition:none;
  }
}

/* ==========================================================================
   KATEGOORIA HEADER (.cat-hero) - hele fotobanner
   --------------------------------------------------------------------------
   Lisatud 21.08.2026. Asendab ohksoojuspumpade lehel vana .page-header'i
   (valge taust + hall logo-vesimark). Vana .page-header on alles ja kehtib
   endiselt teistel kategoorialehtedel - siin ei muudetud sellest midagi.

   Miks pealkiri on HTML-is, mitte pildi sees: nii loeb Google seda, ekraani-
   lugeja saab ette lugeda, vene keele tolge toimib ja tekst jaab teravaks
   igal ekraanil. Pilt ise on ainult taust.

   TEISE KATEGOORIA JAOKS: pane sektsioonile oma pilt, muud ei ole vaja:
       <section class="cat-hero" style="--cat-hero-img:url('images/oma-pilt.webp')">
   Pilt peaks olema lai (u 1400x320), vasak kolmandik hele ja rahulik, sest
   sinna laheb tekst. Sorteerimisvalik kaib .cat-sortbar sisse headeri alla.
   ========================================================================== */

.cat-hero {
  --cat-hero-img: url('images/ohksoojuspumbadheader-foto.webp');
  --cat-hero-bg: 240, 234, 226;          /* kreem, sama toon mis foto vasak serv */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(290px, 23vw, 360px);
  padding: 32px 0;
  background: rgb(var(--cat-hero-bg));
}

.cat-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--cat-hero-img);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

/* Loor hoiab vasaku serva rahulikuna, et pealkiri oleks igal ekraanilaiusel
   loetav. Foto paremal poolel jaab puutumata. */
.cat-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--cat-hero-bg), 0.96) 0%,
    rgba(var(--cat-hero-bg), 0.92) 24%,
    rgba(var(--cat-hero-bg), 0.55) 38%,
    rgba(var(--cat-hero-bg), 0) 54%);
}

.cat-hero .container {
  position: relative;
  z-index: 2;
}

.cat-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6B6259;
}

.cat-hero__crumbs a {
  color: var(--purple-primary, #5B0E8A);
  text-decoration: none;
}

.cat-hero__crumbs a:hover {
  text-decoration: underline;
}

.cat-hero__crumbs span[aria-current] {
  color: #3A342E;
}

/* MUUDETUD 26.08.2026: pealkiri laheb kasti sisse, seega vaiksem ja kergem
   kui vabalt fotol seistes. clamp()i ALAMPIIR jaab 2,1rem - telefonis nagi
   pealkiri hea valja ja seda ei olnud vaja puutuda; muutus puudutab ainult
   arvutivaadet (ylempiir 3,35rem -> 2,4rem, kaal 800 -> 700).
   Varv on sama lilla mis hinnasildi taust: --acc elab body.soe peal
   lilla-theme.css-is, koigil viiel kategoorialehel on <body class="soe">. */
.cat-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2.1rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--acc, var(--purple-primary, #5B0E8A));
}

.cat-hero__lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.25vw, 1.06rem);
  line-height: 1.65;
  font-weight: 500;
  color: #4A443E;
}

/* --------------------------------------------------------------------------
   SISUKAST (.cat-hero__card) - lisatud 26.08.2026
   Teekond + pealkiri + tutvustus istuvad valges poollabipaistvas kastis
   otse fotol, tapselt samas voitmes mis tootelehe .product-description
   .container. Kast on kategooria-hero jaoks veidi madalama polstriga, sest
   riba ise on madalam kui tootelehe kirjeldusplokk.
   -------------------------------------------------------------------------- */
.cat-hero__card {
  max-width: 720px;
  padding: 2rem 2.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Kastis on tekstil oma laius - loori kitsendust ei ole enam vaja. */
.cat-hero__card .cat-hero__lead {
  max-width: none;
}

/* Taislaiuses foto (kreem EI OLE pildi sisse kupsetatud, nt konditsioneerid).
   Siis ei ole kreemist loori vaja: piisab tootelehe moodi kergest tumendusest
   vasakul, et valge kast fotolt eralduks.
   NB: valija on .cat-hero--photo .cat-hero__bg (0,2,0) ja voidab seetottu ka
   allpool olevaid @media reegleid, mis on .cat-hero__bg (0,1,0). */
.cat-hero--photo .cat-hero__bg {
  background-position: var(--cat-hero-pos, 50% 42%);
  /* Sissezoomimine. cover skaleerib pildi ALATI vaateakna laiuse jargi paika,
     seega tuleb suurendus anda protsendina laiusest: 130% = pilt on 1,3x
     ekraanist laiem ja background-position hakkab ka X-teljel toole.
     NB: yle 100% tahendab ulesskaleerimist ehk pisut pehmemat pilti suurel
     ekraanil - hoia 120-135% vahel. */
  background-size: var(--cat-hero-zoom, cover);
}

/* Peegeldus. Konditsioneeride fotol on seadeseade vasakul kolmandikul ehk
   tapselt kasti all. Cover skaleerib laia riba ALATI laiuse jargi paika,
   seega background-position-x ei liiguta teda (vt kategoorialehe-hero
   markmed), ja sisse-zoomimine tahendaks 1,4x ulesskaleerimist ehk pehmet
   pilti. Peegeldus toob seadme kasti kyljest paremale ilma teravust
   kaotamata; fotol ei ole teksti ega logo, mis reetaks. */
.cat-hero--flip .cat-hero__bg {
  transform: scaleX(-1);
}

.cat-hero--photo .cat-hero__veil {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.26) 34%,
    rgba(0, 0, 0, 0.10) 62%,
    rgba(0, 0, 0, 0) 86%);
}

/* Loorita taisfoto (naidise variant 3, valitud 28.08.2026 ohksoojuspumpade
   lehele). Foto jaab tapselt selliseks nagu ta on - ei kreemi, ei tumendust -
   ja kaardist saab veidi kindlam klaasplaat, mis uksi hoiab teksti loetavana.
   Kaib ALATI koos .cat-hero--photo'ga; peab olema failis PARAST
   .cat-hero--photo reegleid, sest molemad valijad on 0,2,0 ja voidab hilisem. */
.cat-hero--clear .cat-hero__veil {
  background: none;
}

.cat-hero--clear .cat-hero__card {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20);
}

/* Fotota kategooria (tarvikud): kreem laheb paremal serval lillaks. */
.cat-hero--plain {
  --cat-hero-bg: 246, 243, 250;
}

.cat-hero--plain .cat-hero__bg {
  background-image: none;
  background: linear-gradient(105deg,
    rgb(var(--cat-hero-bg)) 0%,
    rgb(var(--cat-hero-bg)) 42%,
    #EFE6F7 74%,
    #E4D5F1 100%);
}

.cat-hero--plain .cat-hero__veil {
  background: none;
}

/* Sorteerimisvalik: vanas headeris oli see pealkirja korval, uues laheb
   headeri alla omaette reale. Element ise (#sort-select) on sama, seega
   js/common.js sorteerimine tootab muutmata kujul. */
.cat-sortbar {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 0;
}

@media (max-width: 900px) {
  .cat-hero__bg {
    background-position: 72% center;
  }

  /* Zoomitud taislaiuses fotol (konditsioneerid) laheb kast kitsal ekraanil
     laiemaks ja seade jaab selle serva alla - seetottu oma kadreering.
     NB: koos .cat-hero--flip'iga on X-telg PEEGELDATUD, st SUUREM protsent
     lykkab objekti ekraanil PAREMALE (mitte vasakule). */
  .cat-hero--photo .cat-hero__bg {
    background-position: var(--cat-hero-pos-sm, var(--cat-hero-pos, 50% 42%));
  }

  .cat-hero__veil {
    background: linear-gradient(90deg,
      rgba(var(--cat-hero-bg), 0.97) 0%,
      rgba(var(--cat-hero-bg), 0.90) 46%,
      rgba(var(--cat-hero-bg), 0.35) 78%,
      rgba(var(--cat-hero-bg), 0.10) 100%);
  }

  .cat-hero__lead {
    max-width: 26ch;
  }

  .cat-hero__card {
    max-width: 620px;
    padding: 1.75rem 2rem;
  }
}

@media (max-width: 700px) {
  .cat-hero {
    min-height: 0;
    padding: 26px 0 30px;
  }

  .cat-hero__bg {
    background-position: 78% center;
  }

  .cat-hero__veil {
    background: linear-gradient(90deg,
      rgba(var(--cat-hero-bg), 0.97) 0%,
      rgba(var(--cat-hero-bg), 0.93) 58%,
      rgba(var(--cat-hero-bg), 0.78) 100%);
  }

  .cat-hero h1 {
    letter-spacing: -1px;
  }

  .cat-hero__lead {
    max-width: none;
  }

  /* Telefonis vott kast kogu laiuse - 2,5rem kylgpolstrit soks sisu
     360px ekraanil liiga kitsaks. */
  .cat-hero__card {
    max-width: none;
    padding: 1.5rem 1.35rem;
  }

  .cat-sortbar {
    justify-content: stretch;
    padding-top: 16px;
  }

  .cat-sortbar .sort-by,
  .cat-sortbar .sort-by select {
    width: 100%;
  }
}


/* ==========================================================================
   PARANDUSED 21.08.2026
   ========================================================================== */

/* -- 1. Kaardi nupud "Telli" / "Saada paring" ------------------------------
   Kiri oli 0.8rem ja votas kolmeveerulises vorgus liiga palju ruumi -
   "Saada paring" ulatus nupu servani. Nuud aste vaiksem; nupu korgus ja
   asukoht ei muutu, ainult teksti suurus.                                   */
.pcard-wrap .pc-btn {
  font-size: 0.72rem !important;
}

@container (max-width: 300px) {
  .pcard-wrap .pc-btn {
    font-size: 0.66rem !important;
  }
}

/* -- 2. Mobiili logo sama korge kui korvalolev nimi ------------------------
   Pilt oli 42x42 px, sonamark "OHKSOOJUS" aga u 26 px korge - mark tundus
   nime korval ulekaalukas. Korgus 26 px, laius vabaks (logo kuvasuhe on
   1024:947), object-fit hoiab pildi tervikuna kaadris.                      */
@media (max-width: 768px) {
  .header .logo .logo-img {
    width: auto;
    height: 26px;
  }
}

/* -- 3. Sorteerimisvalik ka mobiilis paremale ------------------------------
   Kitsal ekraanil oli see venitatud ule kogu laiuse ja joondus vasakule.    */
@media (max-width: 700px) {
  .cat-sortbar {
    justify-content: flex-end;
  }

  .cat-sortbar .sort-by,
  .cat-sortbar .sort-by select {
    width: auto;
  }
}


/* ==========================================================================
   PARANDUSED 21.08.2026 (2) - mobiili paise ja menuu
   ========================================================================== */

/* -- 4. Paise ulemine tuhik vordseks alumisega ----------------------------
   .header oli mobiilis `padding: 0 0 8px` - sisu algas tapselt ekraani
   ulaservast ja alla jai 8 px valget. Nuud on molemal pool sama vahe.
   Kleepuva tooteriba peatuskoht liigub sama palju kaasa (56 -> 64), et vahe
   paise ja riba vahel jaaks endine. Paise korgust hoiab .header-spacer,
   mille common.js ise ara moodab - seega leht allpool ei nihku.            */
:root {
  --m-header-pad: 8px;
}

@media (max-width: 768px) {
  .header {
    padding: var(--m-header-pad) 0;
  }

  .products-header {
    top: 64px;
  }
}

/* -- 5. Menuu sulgemise X tapselt hamburgeri kohale ------------------------
   Varem oli X sahtli sees (top:16, right:16) ja seisis hamburgerist u 27 px
   allpool - vajutus "hupas" menuu avades ja sulgedes. Nuud on X fixed ja
   tapselt samas punktis kus nupp: sama ulemine vahe (--m-header-pad), sama
   parem serv (12 px, .header .container polster) ja sama moot 42x42.
   Sahtel ise algab ekraani ulaservast, et X jaaks paneeli sisse.           */
@media (max-width: 768px) {
  .nav-drawer-content {
    top: 0;
    max-height: 100%;
    border-radius: 0 0 0 16px;
    padding-top: var(--m-header-pad);
  }

  .nav-drawer-close {
    position: fixed;
    top: var(--m-header-pad);
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease 0.12s, background 0.2s;
  }

  .nav-drawer.open .nav-drawer-close {
    opacity: 1;
  }

  /* X ei ole enam sahtli sees, seega nimekiri ei vaja enam 48 px varu -
     selle asemel algab sealt otsinguriba (vt punkt 6). */
  .nav-drawer-list {
    margin-top: 14px;
  }
}

/* -- 6. Otsinguriba mobiilimenuu ulaserva ---------------------------------
   Sahtli ulaosas oli tuhi riba - seal on nuud otsing. Riba ise on koopia
   paise otsingust (common.js kloonib selle), seega toimib tapselt samamoodi:
   sama soovitusteloend, sama tuhjendusnupp, sama Enter-kaitumine.
   Paremal on 48 px varu, et tekst ei jookseks X-i alla.                    */
.nav-drawer-search {
  padding-right: 48px;
  margin-bottom: 4px;
}

.nav-drawer-search .search-bar {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
}

/* -- 7. Otsingunupp taidab riba parema otsa lopuni ------------------------
   Nupp oli 38 px korge ja margin -1 px, riba aga 43 px koos 2 px aarisega -
   nupu umber jai ules, alla ja paremale u 2 px valget ning umar ots ei
   langenud riba kaarega kokku. Nuud venib nupp riba korgusega tapselt uhte
   ja umardus tuleb poolest korgusest, seega kaar kattub riba omaga.

   Miks align-self, mitte height:100%: riba korgus tuleb sisust (ei ole
   kusagil kirjas), seega protsentkorgus ei lahene ja nupp kukkus 16 px
   peale kokku. .top-bar otsingul on korgus 32 px kirjas, seal tootas ka
   vana calc(100% + 4px) - see reegel jaab endiseks.                        */
.search-bar button:not(.search-clear-btn) {
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: -2px -2px -2px 0;
  border-radius: 0 999px 999px 0 !important;
}


/* ==========================================================================
   MUUDATUSED 24.08 - mobiilimenüü avanemine, otsing ja võrdlus
   ==========================================================================
   1) X-i ümbert kadus fookusrõngas (vt js/common.js openDrawer).
   2) Menüü ei liugle enam tervikuna: kõigepealt tõmbub paremalt vasakule
      sisse õhuke joon ja sealt avanevad korraga mõlemad pooled - ülemine
      ülespoole, alumine allapoole.
   3) Menüü ülemine vasak nurk on ümar.
   4) Sahtli otsing on kitsam, tulemuste loend täpselt menüü laiuselt.
   5) Otsingutulemusel on lõpus võrdlusnupp, mis jääb aktiivsesse värvi.
   ========================================================================== */

/* -- 1. Fookus läheb paneelile, seega paneelil ei ole nähtavat rõngast ----- */
.nav-drawer-content:focus,
.nav-drawer-content:focus-visible{outline:none}

/* clip-path tekitab .nav-drawer-top'ile oma pinu (stacking context). Kuna
   X-nupp seisab margenduses temast EES, jäi ta valge poole alla peitu.
   z-index tõstab ta tagasi pealmiseks. */
.nav-drawer-close{z-index:2}

/* -- 2. + 3. Avanemine: kogu paneel liugleb paremalt vasakule -------------
   24.08 (2): varem avanes menüü kahes pooles (clip-path volt joone pealt).
   Sulgemisel jäi "Küsi pakkumist" viitega maha - poolte üleminekul oli
   viide ja nupp seisis hetke tühjas õhus. Nüüd liigub menüü ÜHE tükina:
   sisse paremalt vasakule, välja sama teed tagasi. Kogu sisu - otsing,
   lingid, "Küsi pakkumist", kontaktid ja X - kaob täpselt korraga, sest
   kõik seisavad samal liikuval paneelil.

   Miks `right`, mitte `transform`: sahtli otsingu tulemuste loend on
   position:fixed (vt punkt 4b). Transformitud esivanem muudaks fixed-lapse
   pidepunkti ja loend hüppaks paneeliga kaasa - `right` seda ei tee.       */
.nav-drawer-content{
  right:-360px;
  background:var(--white);
  box-shadow:-8px 0 40px rgba(91, 14, 138, 0.15);
  transition:right .34s cubic-bezier(.22,.61,.36,1);
  /* Väikesel ekraanil (nt 320x568) on menüü sisu ekraanist kõrgem, seega
     kerimine peab alles jääma. */
  overflow-y:auto;
  padding-left:0;
  padding-right:0;
}
.nav-drawer.open .nav-drawer-content{right:0}

/* Sahtel on suletult visibility:hidden. Ilma viiteta kaob ta hetkega ja
   väljaliuglemist ei näekski keegi - viide hoiab ta nähtaval täpselt nii
   kaua, kui liuglemine kestab. */
.nav-drawer{transition:visibility 0s linear .34s}
.nav-drawer.open{transition:visibility 0s linear 0s}

/* Polster on paneeli asemel pooltel, et hall kontaktiplokk ulatuks servani. */
.nav-drawer-top,
.nav-drawer-content > .nav-drawer-contact{
  padding-left:18px;
  padding-right:18px;
}

.nav-drawer-top{
  /* Ülemine pool peab jääma alumisest ettepoole, sest otsingu tulemuste
     loend ripub sealt alla üle kontaktiploki. */
  position:relative;
  z-index:1;
  background:var(--white);
  border-radius:16px 0 0 0;
  display:flex;
  flex-direction:column;
}

.nav-drawer-content > .nav-drawer-contact{
  margin:0;
  border-top:0;                     /* joone rolli täidab .nav-drawer-split */
  border-radius:0 0 0 16px;
}

/* Joon kahe poole vahel. Varem oli see osa avanemisanimatsioonist; nüüd on
   ta lihtsalt piir, sest paneel liigub tervikuna. */
.nav-drawer-split{
  display:block;
  height:1px;
  background:linear-gradient(90deg, rgba(91,14,138,.45), rgba(91,14,138,.14));
}

/* Ülemise poole sisu ei tohi enam paneelilt polstrit pärida. */
.nav-drawer-top .nav-drawer-list a{margin:0 -18px;padding:11px 18px}

@media (max-width: 768px){
  .nav-drawer-content{
    border-radius:16px 0 0 16px;    /* ülemine vasak nurk ümaraks */
    padding-top:0;
  }
  .nav-drawer-top{
    border-radius:16px 0 0 0;
    padding-top:var(--m-header-pad);
  }
  /* X on position:fixed (täpselt hamburgeri kohal), seega ta ei istu
     paneelil ega tuleks sellega kaasa. Anname talle SAMA liuglemise -
     sama teepikkus, sama kestus, sama kõverik - nii lahkub ta koos
     ülejäänud menüüga, mitte enne ega pärast seda. */
  .nav-drawer-close{
    right:-60px;
    opacity:1;
    transition:right .34s cubic-bezier(.22,.61,.36,1), background .2s;
  }
  .nav-drawer.open .nav-drawer-close{right:12px}
}

/* -- 4. Sahtli otsing kitsamaks ------------------------------------------- */
.nav-drawer-search{
  padding-right:54px;
  margin-bottom:6px;
}
.nav-drawer-search .search-bar{
  border-width:1.5px;
  border-radius:999px;
}
.nav-drawer-search .search-bar input{
  padding:7px 14px;
  font-size:.86rem;
}
/* iOS Safari suumib lehe sisse, kui puuteseadmes fokusseeritud sisestusvälja
   kiri on alla 16 px. Riba ise jääb sama kõrgeks - 16 px on 1rem, mitte
   suurem kiri, vaid ainus suurus, mille peale brauser enam ei suuma.
   Sama kehtib päise otsingu kohta, seega on mõlemad koos. */
@media (pointer: coarse){
  .search-bar input,
  .nav-drawer-search .search-bar input,
  #compare-search-input{
    font-size:16px;
  }
}
.nav-drawer-search .search-bar button:not(.search-clear-btn){padding:0 13px}
.nav-drawer-search .search-bar button:not(.search-clear-btn) svg{width:15px;height:15px}

/* -- 4b. Tulemuste loend täpselt menüü laiuselt --------------------------- */
.search-bar .search-dropdown.dd-drawer{
  /* Asukoha arvutab js/common.js menüüpaneeli järgi: loend seisab menüü
     SISESERVADE vahel (18 px polster mõlemal pool) ega jää paneeli
     kerimiskasti sisse kinni. Varem oli ta täpselt menüü laiune, seega
     ulatus mõlemast servast välja ja tootepilt jäi menüü äärest üle. */
  box-sizing:border-box;
  position:fixed;
  right:auto;
  width:auto;
  max-width:none;
  min-width:0;
  max-height:58vh;
  border-radius:12px;
  border:1px solid rgba(91,14,138,.14);
  box-shadow:0 18px 38px -18px rgba(45,8,69,.55);
}

/* -- 5. Otsingutulemuse rida ---------------------------------------------
   24.08 (2): rea lõpus olnud võrdlusnupp on eemaldatud - mobiilimenüü
   kitsas loendis võttis ta tootenimelt ~42 px ja nimi murdus kahele reale.
   Võrdlusesse saab toote endiselt kategoorialehe kaardilt.
   .search-row jääb alles: JS ehitab rea endiselt selle ümbrisega.         */
.search-dropdown .search-row{
  display:flex;
  align-items:center;
  border-bottom:1px solid #f5f5f5;
}
.search-dropdown .search-row:last-child{border-bottom:0}
.search-dropdown .search-row .search-item{
  flex:1 1 auto;
  min-width:0;
  border-bottom:0;
}
/* Sahtlis on ruumi vähe: väiksem pilt ja tihedam rida, et tootenimi
   mahuks võimalikult sageli ühele reale. */
.dd-drawer .search-row .search-item{gap:10px;padding:9px 10px}
.dd-drawer .search-row .search-item img{width:40px;height:40px;flex:0 0 40px}
.dd-drawer .search-item-info{min-width:0}
.dd-drawer .search-item-info h4{
  font-size:.88rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;
}
.dd-drawer .search-item-info span{font-size:.82rem}

@media (prefers-reduced-motion: reduce){
  .nav-drawer-content,
  .nav-drawer-close{transition-duration:.01ms!important}
  .nav-drawer{transition-delay:0s!important}
}


/* ==========================================================================
   AVALEHE ZTX-BANNER ("Tuba") - 24.08
   ==========================================================================
   Asendab vana .featured-banner sisu. Vana talvefoto ja tekstiplokk
   (.featured-content / .featured-image) ei ole enam kasutusel - uued klassid
   algavad kõik .ztx-, seega vanad reeglid ei puutu sellesse plokki üldse.
   Sektsiooni klass ja id jäävad alles, et ankur ja mujal olev CSS ei murduks.

   Ehitus: vasakul lilla paneel (silt, pealkiri, lubadus, kolm kiipi, nupp),
   paremal päris interjöörifoto. Foto vasak serv sulatatakse gradiendiga
   lillasse, et üleminek ei oleks nuga.
   ========================================================================== */

.featured-banner.ztx-tuba{
  display:grid;
  /* Esimene veerg on täpselt .container'i vasak veeris (max-width 1480 +
     24 px polster), seega tekst algab samalt jooneilt kui kategooriakaardid.
     100% laheneb siin ruudustiku konteineri laiuse vastu, mis EI sisalda
     kerimisriba - vw-arvutus eksiks poole kerimisriba võrra. */
  grid-template-columns:max(24px, calc((100% - 1480px) / 2 + 24px)) 1fr 1.06fr;
  align-items:stretch;
  padding:0;
  background:linear-gradient(115deg,#22063A 0%,#3D0C5E 52%,#5B0E8A 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.featured-banner.ztx-tuba::before{content:none}   /* vana dekoratiivring */

/* ---- vasak paneel ---- */
.ztx-tuba .ztx-text{
  grid-column:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:46px 26px;
  min-height:360px;
  position:relative;
  z-index:3;
}
.ztx-tuba .ztx-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.ztx-tuba .ztx-logo{
  height:19px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.92;
}
.ztx-tuba .ztx-eyebrow span{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.74);padding-left:13px;border-left:1px solid rgba(255,255,255,.26);
}
.ztx-tuba h2{
  font-family:'Outfit','Inter',sans-serif;
  font-size:clamp(1.5rem,2.9vw,2.15rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 14px;text-shadow:none;color:#fff;
}
.ztx-tuba h2 b{font-weight:800;color:#8FDCFF;white-space:nowrap}
.ztx-tuba .ztx-lead{
  max-width:44ch;font-size:1rem;line-height:1.65;
  color:rgba(255,255,255,.8);margin:0 0 22px;text-shadow:none;
}

.ztx-tuba .ztx-chips{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.ztx-tuba .ztx-chips li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:7px 14px;
}
.ztx-tuba .ztx-ic{display:inline-flex;width:1.02rem;height:1.02rem;flex:0 0 auto;color:#8FDCFF}
.ztx-tuba .ztx-ic svg{width:100%;height:100%;display:block}

/* Nupp: sama pühkimisanimatsioon mis mujal saidil - valge nupp läheb
   hoveril lillaks, ring kasvab vasakust ülanurgast. */
.ztx-tuba .ztx-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:var(--purple-deep, #2D0845);
  border-radius:999px;padding:14px 26px;text-decoration:none;
  font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  position:relative;overflow:hidden;z-index:1;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
  transition:color .3s ease-out, transform .22s cubic-bezier(.4,0,.2,1);
}
.ztx-tuba .ztx-cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg, var(--purple-primary, #5B0E8A) 0%, var(--purple-hover, #7B1FA2) 100%);
  border:1px solid rgba(255,255,255,.5);
  clip-path:circle(0% at 0% 0%);transition:clip-path .35s ease-out;
}
.ztx-tuba .ztx-cta .arrow-svg{width:16px;height:16px;transition:transform .22s}
.ztx-tuba .ztx-cta:hover{color:#fff;transform:translateY(-2px)}
.ztx-tuba .ztx-cta:hover::before{clip-path:circle(150% at 0% 0%)}
.ztx-tuba .ztx-cta:hover .arrow-svg{transform:translateX(4px)}

.ztx-tuba .ztx-fine{
  margin:16px 0 0;font-size:.8rem;color:rgba(255,255,255,.62);text-shadow:none;
}
.ztx-tuba .ztx-fine b{color:#fff;font-weight:700}

/* ---- parem foto ---- */
/* Foto ei tohi bannerи kõrgust dikteerida: ilma absoluutse paigutuseta
   venitaks pilt ruudustiku rea oma loomuliku kõrguseni. Nüüd tuleb kõrgus
   vasakust tekstiveerust ja pilt lihtsalt katab oma poole. */
/* overflow on VISIBLE, et seade saaks veergude piirist üle ulatuda. Foto ise
   ei valgu välja: ta on inset:0 + object-fit:cover ja hääbub maskiga. */
.ztx-tuba .ztx-photo{
  grid-column:3;position:relative;overflow:visible;z-index:1;min-height:100%;
}
/* Kuma seadme taga: jahe helk + pehme tume tuum, et valge korpus loeks ka
   heleda lume peal. Järgneb seadmele banneri paremas servas. */
.ztx-tuba .ztx-photo::before{content:none}
/* Foto ei saa lillat ülekatet, vaid HÄÄBUB maskiga läbipaistvaks. Nii jätkub
   sektsiooni enda gradient katkematult ja veergude piirile ei teki nähtavat
   õmblust, nagu läbipaistmatu ülekattega juhtus. */
.ztx-tuba .ztx-photo picture,
.ztx-tuba .ztx-photo picture img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:100% 42%;
  max-height:none;filter:none;transition:none;
}
.ztx-tuba .ztx-photo picture img{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.7) 38%, #000 58%);
          mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.7) 38%, #000 58%);
}

/* ---- ZTX siseosa: paigutus käib fotoveeru järgi, seega ta hoiab alati
        sama suhet veergude piiriga, ükskõik kui lai ekraan on. ---- */
/* Ümbris on sektsiooni otsene laps, seega 100% = banneri laius ja parem
   veeris arvutub TÄPSELT sama valemiga nagu .container'i veeris. Nii jääb
   seadme parem serv alati ventilatsiooni-kategooriakaardi parema servaga
   ühele joonele, ükskõik kui lai ekraan on. */
.ztx-tuba .ztx-unit-wrap{
  position:absolute;z-index:2;pointer-events:none;
  right:max(24px, calc((100% - 1480px) / 2 + 24px));
  left:auto;top:50%;transform:translateY(-50%);
  width:min(520px, 42%);min-width:280px;
}
/* Kuma seadme taga: jahe helk + pehme tume tuum, et valge korpus loeks ka
   heleda lume peal. Järgneb nüüd seadmele, mitte fotoveerule. */
.ztx-tuba .ztx-unit-wrap::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;aspect-ratio:1.5;
  background:
    radial-gradient(ellipse at center, rgba(143,220,255,.22) 0%, rgba(143,220,255,.06) 46%, rgba(143,220,255,0) 70%),
    radial-gradient(ellipse at center, rgba(26,5,38,.52) 0%, rgba(26,5,38,.18) 44%, rgba(26,5,38,0) 68%);
}
.ztx-tuba .ztx-unit{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(12,2,24,.7));
}

/* Kitsamal laual on mõlemad veerud väiksemad - seade nihkub fotoveerru
   sissepoole, et ta ei jookseks teksti ja kiipide peale. */
@media (min-width: 901px) and (max-width: 1200px){
  /* Kitsamal laual on fotoveerg väiksem - seade tohib olla suhtarvult suurem,
     aga peab jääma tekstist ja kiipidest paremale. */
  .ztx-tuba .ztx-unit-wrap{width:min(520px, 46%);min-width:0}
}

/* ---- mobiil: foto üles, tekst alla, kiibid ÜHELE reale ---- */
@media (max-width: 900px){
  .featured-banner.ztx-tuba{grid-template-columns:1fr}
  .ztx-tuba .ztx-text{grid-column:1}
  /* Mobiilis jääb interjöörifoto (seade on seal juba pildi sees), seega
     eraldi siseosa ei ole vaja. Riba on madal ja pilt on nihutatud nii, et
     kaadrisse jääb ainult seade seinal - diivan ja põrand jäävad välja.
     Pilti ka suurendatakse (width > 100%), muidu oleks seade pisike. */
  .ztx-tuba .ztx-photo{grid-column:1;order:-1;aspect-ratio:auto;height:150px}
  .ztx-tuba .ztx-photo picture img{
    /* max-width:none on vajalik: globaalne img{max-width:100%} kärbiks
       164% laiuse tagasi 100% peale ja suurendus jääks olemata. */
    left:-30%;right:auto;width:160%;max-width:none;
    object-position:50% 0%;
  }
  .ztx-tuba .ztx-unit-wrap{display:none}
  .ztx-tuba .ztx-photo{overflow:hidden}
  .ztx-tuba .ztx-photo::before{content:none}
  .ztx-tuba .ztx-photo picture img{-webkit-mask-image:none;mask-image:none}
  /* Laual hääbub foto maskiga, mobiilis on ta virnas ja vajab alaserva
     pehmendust - see ::after tuleb siin tervikuna kirjutada, sest põhiplokis
     seda enam ei ole. */
  .ztx-tuba .ztx-photo::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(0deg, rgba(61,12,94,.98) 0%, rgba(61,12,94,.42) 30%, rgba(61,12,94,0) 68%);
  }
  .ztx-tuba .ztx-text{padding:26px 24px 34px}
  .ztx-tuba h2{font-size:1.45rem}
  .ztx-tuba .ztx-lead{font-size:.92rem}
  /* Kolm kiipi ühel real ka 390 px laiuses. */
  .ztx-tuba .ztx-chips{flex-wrap:nowrap;gap:6px}
  .ztx-tuba .ztx-chips li{font-size:.72rem;padding:6px 10px;gap:6px}
  .ztx-tuba .ztx-ic{width:.92rem;height:.92rem}
  .ztx-tuba .ztx-cta{align-self:stretch}
}

@media (max-width: 600px){
  .ztx-tuba .ztx-photo{height:132px}
  .ztx-tuba .ztx-text{padding:22px 24px 28px}
  .ztx-tuba .ztx-lead{margin-bottom:18px}
  .ztx-tuba .ztx-chips{margin-bottom:20px}
  .ztx-tuba .ztx-fine{margin-top:12px}
}

@media (max-width: 360px){
  .ztx-tuba .ztx-chips{gap:5px}
  .ztx-tuba .ztx-chips li{font-size:.68rem;padding:5px 9px;gap:5px}
  .ztx-tuba .ztx-ic{width:.86rem;height:.86rem}
}

@media (prefers-reduced-motion: reduce){
  .ztx-tuba .ztx-cta,
  .ztx-tuba .ztx-cta::before,
  .ztx-tuba .ztx-cta .arrow-svg{transition-duration:.01ms!important}
}


/* ==========================================================================
   MUUDATUSED 24.08 (2) - TOODETE VÕRDLUS
   ==========================================================================
   Võrdluskaart nägi välja nagu tabeliveerg: valge kast, pilt keskel, hind
   pealkirja all. Kategoorialehe tootekaart on vahepeal uue kuju saanud
   (lame hall fototaust, lilla hinnasilt foto nurgas, Fraunces-nimi), ja
   kaks vaadet sama toote kohta nägid välja nagu kaks eri poodi.

   Siin viiakse võrdluskaart kategoorialehe kaardiga ühte nägu. Vt ka
   js/common.js renderCompareModal - sealt tuleb märgendus:
     .compare-item-image  (hinnasilt + värvid + klikitav pilt)
     .compare-item-title  (nimi + .dyn-model mudelitähis)
     .variant-selector    (võimsusklassid, kloon kaardilt)
     .compare-item-specs
     .btn-compare-specs   ("Lae veel andmeid +")
     .compare-buy         ("TUTVU JA OSTA")

   Värvid on siin kirjas otse (mitte var(--acc) kaudu), sest lilla-theme.css
   on `body.soe` skoobis ja võrdlusaken avaneb ka lehtedelt, kus seda
   teemafaili ei laadita.
   ========================================================================== */

.compare-item{
  /* Polster kolis kaardilt tema osadele, et fototaust ulatuks servani. */
  padding:0;
  overflow:hidden;
  border:1px solid #EDE5F4;
  border-radius:14px;
  box-shadow:0 14px 32px -22px rgba(45,15,70,.55);
}

/* ---- fotokast: lame hall taust nagu kategoorialehe kaardil -------------- */
.compare-item-image{
  height:auto;
  aspect-ratio:16/11;
  margin:0;
  padding:22px 18px;
  border-bottom:1px solid #EDE5F4;
  background:#F4F4F4;
  overflow:hidden;
}
.compare-item-imglink{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
}
.compare-item-image img{
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(40,35,55,.28));
  transition:transform .25s ease;
}
.compare-item-imglink:hover img{transform:translateY(-3px) scale(1.015)}

/* Hind on nüüd seadme pildil, vasakus ülanurgas - täpselt nagu kaardil. */
.compare-item-price{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  margin:0;
  padding:7px 12px;
  border-radius:9px;
  background:#5B0E8A;
  color:#fff;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  text-align:left;
}

/* Värvivalik jääb foto vasakusse alanurka (paigutus on ülalpool, siin
   ainult see, et hinnasilt ja värvid ei kasvaks üksteise sisse). */
.compare-color{bottom:12px; left:12px}
.compare-color ~ .compare-item-imglink img{max-width:76%}

/* ---- nimi + mudelitähis ------------------------------------------------- */
.compare-item-title{
  margin:0;
  padding:16px 16px 0;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.16rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  text-align:left;
  color:#1F1030;
}
.compare-title-link{
  color:inherit;
  text-decoration:none;
  display:inline;
}
.compare-title-link:hover{color:#5B0E8A}
/* Mudelitähis ("25") on nime järel, aga selle osa, mis võimsusklassi
   vahetusel muutub - seega eraldi sõlmes ja pisut tuhmim. */
.compare-title-model:not(:empty){
  margin-left:.32em;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:.86em;
  font-weight:700;
  color:#6B5B7A;
}

/* ---- võimsusklassid ----------------------------------------------------- */
.compare-item > .variant-selector{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 0;
  padding:0 16px;
}
.compare-item > .variant-selector .variant-btn{
  flex:1 1 0 !important;
  min-width:60px !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 5px 7px !important;
  background:transparent !important;
  border:1.5px solid #DCCFE9 !important;
  border-radius:9px !important;
  box-shadow:none !important;
  transform:none !important;
}
.compare-item > .variant-selector .variant-btn .var-title{
  font-size:.86rem !important; font-weight:700 !important; color:#1F1030 !important;
}
.compare-item > .variant-selector .variant-btn .var-power{
  font-size:.64rem !important; font-weight:600 !important; color:#6B5B7A !important;
}
.compare-item > .variant-selector .variant-btn:hover{border-color:#5B0E8A !important}
.compare-item > .variant-selector .variant-btn.active{border-color:#5B0E8A !important}
.compare-item > .variant-selector .variant-btn.active .var-title,
.compare-item > .variant-selector .variant-btn.active .var-power{color:#5B0E8A !important}

/* ---- näitajad ----------------------------------------------------------- */
.compare-item-specs{
  margin:14px 0 0;
  padding:0 16px;
  gap:0;
}
.compare-item-spec{
  background:transparent;
  padding:9px 0;
  border-bottom:1px dotted #EDE5F4;
  border-radius:0;
}
.compare-item-spec:last-child{border-bottom:0}
.compare-item-spec .label{color:#6B5B7A}
.compare-item-spec .value{color:#1F1030}

/* ---- "Lae veel andmeid +" ----------------------------------------------
   Ei ole enam nupp, vaid näitajate nimekirja viimane rida: ilma taustata,
   musta kirjaga, väiksem ja kergem kui väärtused, keskele joondatud ning
   ilma vaheta eelmise rea ("Garanteeritud kütmine") järel. Olekut näitab
   lause lõpp: + = andmed on peidus, − = andmed on lahti (vt js/common.js
   COMPARE_EXTRA_SHOW / COMPARE_EXTRA_HIDE).                                */
.btn-compare-specs{
  display:block;
  width:calc(100% - 32px);
  margin:0 16px;
  padding:9px 0;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:#1F1030 !important;
  font-family:inherit;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  text-align:center;
  cursor:pointer;
}
.btn-compare-specs:hover{color:#5B0E8A !important; text-decoration:underline}
.compare-full-specs{padding:0 16px}
.compare-full-specs .compare-extra-specs{margin-bottom:0}

/* ---- "TUTVU JA OSTA" ---------------------------------------------------- */
.compare-buy{
  display:block;
  margin:14px 16px 16px;
  padding:13px 12px;
  border-radius:9px;
  background:#5B0E8A;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.compare-buy:hover{
  background:#46076C;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(45,8,69,.24);
}
/* Nupp jääb kaardi alla kinni ka siis, kui kaardid on eri kõrgusega. */
.compare-item{display:flex; flex-direction:column}
.compare-buy{margin-top:auto}

/* Eemaldusrist toote ülemises paremas nurgas, foto peal. */
.compare-item-remove{
  top:12px;
  right:12px;
  background:rgba(255,255,255,.82);
  color:#5B0E8A;
  box-shadow:0 1px 4px rgba(40,35,55,.18);
}
.compare-item-remove:hover{background:#e53935; color:#fff}

/* ==========================================================================
   VÕRDLUS MOBIILIS
   ==========================================================================
   1) Pealkiri "Toodete võrdlus" seisis 20 px polstri + oma veerise taga -
      pool esimest ekraanitäit kulus tühjale ruumile.
   2) Tooted olid üksteise all (flex-direction:column) ja kahe seadme
      kõrvutamiseks tuli üles-alla kerida - just seda, mida võrdlus vältima
      peaks. Nüüd kerivad nad KÜLGSUUNAS, üks kaart korraga ekraanil.
   3) Akna sulgemisrist ja toote eemaldusrist on nurkades (position: absolute
      taastati, vt "Nahtav suurus jaab, puutepind kasvab" plokk ülalpool).
   ========================================================================== */
@media (max-width: 640px){
  .compare-modal-content h2{
    margin:0 44px 12px 0;      /* 44 px hoiab ruumi sulgemisristile */
    font-size:1.2rem;
  }
  .compare-search-wrapper{margin-bottom:14px}
  .compare-modal-content{padding:14px 12px !important}

  /* Kaardid ritta ja külgsuunas keritavaks. scroll-snap peatab kerimise
     alati terve kaardi peal, mitte kahe vahel. */
  .compare-grid{
    flex-direction:row;
    align-items:stretch;
    min-width:0;
    width:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
  }
  .compare-scroll-area{
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:0;
  }
  .compare-item{
    /* Kaardi kõrval paistab järgmise serv - see ütleb ilma seletuseta,
       et sealt saab edasi kerida. */
    width:82vw;
    max-width:320px;
    min-width:0;
    flex:0 0 auto;
    padding:0;
    scroll-snap-align:start;
  }
  .compare-item-title{font-size:1.05rem; padding:14px 14px 0}
  .compare-item > .variant-selector,
  .compare-item-specs,
  .compare-full-specs{padding-left:14px; padding-right:14px}
  .btn-compare-specs{width:calc(100% - 28px); margin:0 14px}
  .compare-buy{margin:12px 14px 14px}
  .compare-item-price{font-size:1.02rem; padding:6px 10px}
}

/* Pealkirja mõõdud olid HTML-i inline-stiilis, seega ükski meediapäring ei
   saanud neid mobiilis muuta. Nüüd on need siin (vt kategoorialehtede
   compare-modal märgendus). */
.compare-modal-title{
  margin:0 0 20px;
  font-size:1.5rem;
  color:var(--purple-deep);
}

/* Näitajate kast ei tohi enam venida: venimine lükkas "Lae veel andmeid +"
   viimasest näitajast eemale. Kaardi alla surub tühja ruumi .compare-buy. */
.compare-item-specs{flex-grow:0}


/* ==========================================================================
   TELLIMUSAKEN MOBIILIS - 24.08.2026
   --------------------------------------------------------------------------
   PROBLEEM: 390 px ekraanil seisid tellimusakna kaks paneeli KORVUTI, kumbki
   ~175 px lai - hind murdus kolmele reale, lisade nimed ja kokkuvotte read
   loigati poolelt labi.

   MIKS: paneelid on inline-stiiliga `flex: 1; min-width: 320px`. Just see
   `min-width: 320px` oli AINUS asi, mis sundis neid `flex-wrap: wrap`
   konteineris alla murduma. 20.08 auditi parandus nr 1 kirjutas alla 480 px
   `min-width: 0 !important` (et aken ule serva ei jookseks) - ule serva
   jooksmine kadus, aga koos sellega kadus ka murdumise pohjus. Flex jagas
   351 px kahe paneeli vahel ara.

   LAHENDUS: mobiilis ei tugine me enam murdumisele, vaid poorame konteineri
   `flex-direction: column` peale. Siis on jarjekord selge ja seda juhib
   ainult `order`. Inline-stiile saab ule kirjutada ainult !important'iga.

   JARJEKORD (kliendi soov): 1) toode + hind + lisad + kokkuvote,
                             2) alles siis andmete taitmine.
   HTML-is on vorm ESIMENE div ja ostuinfo TEINE - seega order 2 ja 1.

   Lauaarvuti vaade ei muutu: kogu plokk on @media (max-width: 768px) sees.
   ========================================================================== */
@media (max-width: 768px) {
  #order-modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Paneel ei venita ega tombu - vottab tapselt akna laiuse. */
  #order-modal .modal-content > div {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 1. div = tellimusvorm -> ALLA */
  #order-modal .modal-content > div:nth-of-type(1) {
    order: 2;
  }

  /* 2. div = toote- ja ostuinfo -> ULES.
     Korval seisnud paneeli vasak aar muutub nuud alumiseks aariks. */
  #order-modal .modal-content > div:nth-of-type(2) {
    order: 1;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(91, 14, 138, 0.12) !important;
  }

  /* Toote nimi on nuud sulgemisristi all - jatame talle ruumi. */
  #order-modal #order-modal-product-display {
    padding-right: 38px;
  }

  /* Ulal olevas paneelis lukkas `margin-top: auto` kokkuvotte kasti akna
     alaserva. Virnas ei ole seal enam vaba ruumi jagada - anname
     kokkuvottele tavalise vahe. */
  #order-modal .price-summary-box {
    margin-top: 16px !important;
  }

  /* Vormi pealkiri "Tellimus" ei ole enam akna ulaservas, seega ristikuga
     ta kokku ei puutu - aga vahe ulemise paneeli ja vormi vahel on vaja. */
  #order-modal #order-modal-title {
    margin-top: 4px;
  }
}

/* Kitsal ekraanil (iPhone SE, 320 px) murdusid suured numbrid kahele reale:
   euromark kukkus omaette reale. Vahendame ainult tellimusakna numbreid. */
@media (max-width: 380px) {
  #order-modal #order-modal-price {
    font-size: 1.55rem !important;
  }
  #order-modal .price-summary__total-value {
    font-size: 1.2rem;
  }
  #order-modal .price-summary__total-label {
    font-size: 0.85rem;
  }
  /* Lisa nimi ja hind ei tohi kokku joosta. */
  #order-modal .addon-checkbox__text {
    gap: 10px;
  }
}


/* ==========================================================================
   VÕIMSUSKLASSI VALIK 24.08.2026  (.variant-grid--vk)
   --------------------------------------------------------------------------
   Tootelehe võimsusklassi nupud kasutavad SAMA kujundust nagu kategoorialehe
   tootekaardi omad (lilla-theme.css, `body.soe .pcard-wrap .pc-classes`):

     - läbipaistev taust, 1.5px ääris var(--line-2) = #DCCFE9, raadius 9px
     - mudel üleval (.var-title), nimivõimsus all (.var-power)
     - hover  → ääris lillaks
     - valitud → ääris JA kiri lillad (#5B0E8A), taust jääb läbipaistvaks

   Klass on tootelehtede #variant-grid küljes; ilma selleta jääb vana välimus
   alles (nt vanad näidislehed).

   Nimivõimsuse alarea (.var-power) lisab js/product-page.js data-capacity
   keskmisest väärtusest - HTML-is on see käsitsi ainult ZTX lehel.

   !important on paratamatu: styles.css-is on .variant-btn'ile mitu hilisemat
   !important reeglit (punane hover ~3665 ja ~7985, teksti värv ~7777, kõrgus
   36px ~5070) ning kleepuva riba taust ~5412.
   ========================================================================== */

.variant-grid--vk {
  gap: 8px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* Silt omaette real, väike suurtähtedes pealkiri. Sama kohtlemine saab ka
   värvirea silt, et kaks rida näeksid välja ühest perest. */
.variant-grid--vk > .variant-label,
.product-detail #color-grid > .variant-label {
  min-width: 0 !important;
  width: auto !important;
  flex: 0 0 100% !important;
  padding-right: 0;
  margin-bottom: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #A08CB4;
}

/* Nähtamatud täitedivid hoidsid nuppude rida neljaveerulisena. Uues
   kujunduses jagavad nupud rea ise (flex:1 1 0), seega täidet vaja ei ole.
   (Elemendid jäävad DOM-i alles - product-page.js syncSpecsColumn loeb
   nupu järjekorranumbrit parentNode.children seast.) */
.variant-grid--vk > div:not(.variant-label) {
  display: none !important;
}

/* Vana libisev alljoon nupu all ei sobi ääristatud kaardi sisse. */
.variant-grid--vk .variant-btn::before,
.variant-grid--vk .variant-btn::after {
  display: none !important;
}

.variant-grid--vk .variant-btn {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 76px !important;
  height: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px;
  padding: 10px 6px 9px !important;
  border-radius: 9px !important;
  border: 1.5px solid #DCCFE9 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s ease, color .18s ease !important;
}

.variant-grid--vk .variant-btn .var-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  color: #1F1030 !important;
  opacity: 1 !important;
}

.variant-grid--vk .variant-btn .var-power {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  color: #6B5B7A !important;
  opacity: 1 !important;
}

.variant-grid--vk .variant-btn:not(.active):hover {
  border-color: #5B0E8A !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.variant-grid--vk .variant-btn.active,
.variant-grid--vk .variant-btn.active:hover {
  background: transparent !important;
  border-color: #5B0E8A !important;
  box-shadow: none !important;
  transform: none !important;
}

.variant-grid--vk .variant-btn.active .var-title,
.variant-grid--vk .variant-btn.active:hover .var-title,
.variant-grid--vk .variant-btn.active .var-power,
.variant-grid--vk .variant-btn.active:hover .var-power {
  color: #5B0E8A !important;
}

.variant-grid--vk .variant-btn:focus-visible {
  outline: 2px solid #5B0E8A;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   MOBIIL
   Kuni 992px on #variant-grid kleepuv (vt ~5412) ja tal on juba valge taust,
   seega nupud võivad jääda läbipaistvaks - kujundus on sama mis arvutis,
   ainult veidi tihedam.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .variant-grid--vk {
    gap: 6px;
  }

  .variant-grid--vk .variant-btn {
    min-width: 68px !important;
    padding: 8px 5px 7px !important;
  }

  .variant-grid--vk .variant-btn .var-title { font-size: 0.88rem; }
  .variant-grid--vk .variant-btn .var-power { font-size: 0.7rem; }
}

/* Väga kitsal ekraanil (kuni 360px) mahub reale neli nuppu ainult siis,
   kui alammõõt ja kiri kahanevad. Rohkem kui neli nuppu murduvad teisele
   reale - see on korras. */
@media (max-width: 360px) {
  .variant-grid--vk .variant-btn {
    min-width: 58px !important;
    padding: 7px 3px 6px !important;
  }

  .variant-grid--vk .variant-btn .var-title { font-size: 0.82rem; }
  .variant-grid--vk .variant-btn .var-power { font-size: 0.66rem; }
}


/* ==========================================================================
   MOBIILIFILTRID 24.08.2026 - tihedamad read
   --------------------------------------------------------------------------
   Arvutivaates (>=993px) said filtriread juba 17.08 kompaktsemad. Mobiilis
   jäid kehtima algsed mõõdud: .checkbox-label margin-bottom 12px + polster
   6px üleval ja all, seega kahe tekstirea vahele kogunes ~24px. Libiseval
   filtripaneelil tähendas see pidevat kerimist.

   Puutepind jääb piisav: 4px + 4px polster + 22px märkeruut = 30px rida ja
   rea taust ulatub servast servani, seega sõrm tabab kogu laiuses.
   ========================================================================== */
@media (max-width: 992px) {
  .sidebar-filters .filter-group {
    margin-bottom: 18px;
  }

  .sidebar-filters .filter-group:last-child {
    margin-bottom: 0;
  }

  .sidebar-filters .filter-group h3 {
    margin-bottom: 8px;
  }

  .sidebar-filters .checkbox-label,
  .filter-overlay .checkbox-label {
    margin-bottom: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 10px;
  }

  .sidebar-filters .price-slider {
    margin-top: 2px;
  }

  .sidebar-filters .price-values {
    margin-top: 6px;
  }
}

/* ===========================================================================
   AUDIT 25.08.2026 - MOBIILIPARANDUSED
   ---------------------------------------------------------------------------
   Kõik siinsed reeglid on lisatud faili LÕPPU meelega: nad peavad võitma
   varasemad reeglid ilma !important'ita, ainult kaskaadi järjekorra abil.
   ÜKSKI neist ei muuda seda, kuidas leht LAUAARVUTIS välja näeb - iga reegel
   on kas meediapäringu (max-width / pointer:coarse) sees või puudutab ainult
   nähtamatut puutepinda.
   =========================================================================== */

/* 1. iOS SUUMIS SISSE, KUI VORMIVÄLI SAI FOOKUSE.
      Safari (iPhone) suumib vaateakna automaatselt sisse, kui fookuses oleva
      input/textarea/select kirjasuurus on alla 16px. Pärast suumi on leht
      ekraanist laiem ja kasutaja peab käsitsi tagasi tõmbama - kõige
      valusam just tellimusvormis. Väljad olid 13,6-15,2px.
      16px on ainus lahendus, mis ei keela pinch-zoomi (user-scalable=no
      oleks ligipääsetavuse rikkumine). Lauaarvutis muutust ei ole. */
@media (max-width: 768px) {

  .form-group input,
  .form-group textarea,
  .form-group select,
  .search-bar input,
  .sort-by select {
    font-size: 16px;
  }
}

/* 2. KATEGOORIA PEALKIRI LÕIGATI ÄRA.
      clamp() alampiir 2,1rem = 33,6px ei kahanenud kunagi, ja ≤700px reegel
      hoopis SUURENDAS tähevahet (-1,6px -> -1px), tehes rea ~9px laiemaks.
      360px ekraanil lõigati "Õhksoojuspumbad" pealt 23px, 320px ekraanil
      63px. Alla 400px laseme suurusel vaateaknaga kaasa kahaneda. */
@media (max-width: 400px) {
  .cat-hero h1 {
    font-size: min(2.1rem, 8.5vw);
  }
}

/* 3. KATEGOORIAKAARDI PEALKIRI LÕIGATI ÄRA (white-space:nowrap).
      "Õhk-vesi soojuspumbad" = 288px. 360px ekraanil mahtus 1,2px varuga
      (tekst puudutas äärist), 320px ekraanil lõigati 38,8px maha - ja
      text-overflow on "clip", seega ilma kolme punktita. Kitsal ekraanil
      laseme real murduda. */
@media (max-width: 380px) {
  .cat-card-title {
    white-space: normal;
  }
}

/* 4. MODAALI SULGEMISRIST OLI 32,7px LAI (kõrgus oli korras).
      Laiendame ainult NÄHTAMATUT puutepinda - rist ise ei liigu ega muutu.
      Kategoorialehtedel katab selle lilla-theme.css, aga 37 tootelehel mitte. */
@media (pointer: coarse) {

  .compare-item-remove::after,
  .modal-close::after {
    inset: -7px -13px;
  }
}

/* ==========================================================================
   26.08.2026 - mobiilimenüü otsinguriba sulgemisristiga samal tsentril
   ==========================================================================
   X (#nav-drawer-close) on mobiilis position:fixed, top:var(--m-header-pad)
   ehk 8px, kõrgus 42px -> tema tsenter on 8 + 21 = 29 px viewporti ülaservast.
   Otsinguriba on 35 px kõrge ja algas samuti 8 px pealt, seega tema tsenter
   oli 25,5 px - kolm ja pool pikslit kõrgemal. Silm luges seda paigast ära.

   Ei liiguta riba käsitsi margin'iga, vaid anname PESALE X-iga sama kõrguse
   ja tsentreerime riba selle sisse. Nii jäävad tsentrid kohakuti ka siis, kui
   otsinguriba kunagi fondi- või polstrimuutusega kõrgemaks/madalamaks läheb
   (nt @media (pointer: coarse) 16px reegel).                                */
@media (max-width: 768px) {

  .nav-drawer-search {
    display: flex;
    align-items: center;
    min-height: 42px;          /* = .nav-drawer-close kõrgus mobiilis */
    margin-bottom: 2px;        /* oli 6px; hoiab menüüloendi endisel kohal */
  }

  /* Flex-lapsena ei venitaks riba enam ise laiaks - padding-right: 54px jääb
     pesale, nii et tekst ei jookse endiselt X-i alla. */
  .nav-drawer-search .search-bar {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ==========================================================================
   28.08.2026 - ülemise riba lingid, otsingutulemused ja jaluse logo
   ==========================================================================
   1) OTSINGU RIPPLOEND EI LÄHE HIIRE ALL PAKSUKS.
      Ripploend (.search-dropdown) elab .top-bar-right SEES, seetõttu tabas
      teda ka reegel ".top-bar-right a:hover { text-shadow: ... }" (rida ~213),
      mis on mõeldud ainult PAIGALDUS / JÄRELMAKS / KONTAKT linkidele.
      Tooterida läks hiirega üle minnes paksuks ja "hüppas". Nullime selle
      ripploendi sees; taustavärvi muutus (.search-item:hover) jääb alles.

   2) PAIGALDUS / JÄRELMAKS / KONTAKT: paksendus jääb, aga on poole õhem
      (0.35px -> 0.15px). Endiselt text-shadow, MITTE font-weight, sest
      font-weight nihutaks kogu riba - vt selgitust rea ~199 juures.

   3) JALUSE LOGO TEKST "ÕHKSOOJUS" oli tumelillal taustal tumelilla
      (.footer-brand .logo, rida ~1673) - nüüd valge ja suurem.            */

.top-bar-right .search-dropdown a:hover,
.top-bar-right .search-dropdown a:hover *,
.top-bar-right .search-dropdown .search-item:hover,
.top-bar-right .search-dropdown .search-item:hover * {
  text-shadow: none;
}

.top-bar-right > a:hover {
  text-shadow: 0.15px 0 0 currentColor, -0.15px 0 0 currentColor;
}

.footer-brand .logo {
  color: #fff;
}

.footer-brand .logo span {
  color: #fff;
  font-size: 1.9rem;
  line-height: 1.15;
}

@media (max-width: 480px) {
  .footer-brand .logo span { font-size: 1.6rem; }
}