/* ============================================================================
   Climate Service — consolidated theme stylesheet (plain CSS, no build step)
   Port target: classic / hybrid WordPress theme + WooCommerce overrides.
   Enqueue this ONE file. It contains: webfont, design tokens, base resets,
   layout helpers, and every component class used by the static HTML screens.
   Class prefix: .cs-  — keep it; it namespaces against theme/plugin CSS.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap");

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (the single source of truth — never hard-code these values)
   --------------------------------------------------------------------------- */
:root {
  /* Brand blue */
  --cs-blue-700:#0b6fad; --cs-blue-600:#1486cf; --cs-blue-500:#189bee;
  --cs-blue-400:#4fb4f3; --cs-blue-300:#8fd0f8; --cs-blue-100:#d8eefb; --cs-blue-50:#eef7fe;
  /* Accent orange */
  --cs-orange-700:#b93d00; --cs-orange-600:#cf4400; --cs-orange-500:#eb4d00; --cs-orange-100:#fde4d8;
  /* Neutrals (graphite) */
  --cs-white:#ffffff; --cs-gray-50:#f7f9fb; --cs-gray-100:#eef1f4; --cs-gray-200:#e1e6ea;
  --cs-gray-300:#cfd6dc; --cs-gray-400:#a9b2ba; --cs-gray-500:#7c858d; --cs-gray-700:#50565b; --cs-gray-900:#2b3034;
  /* Semantic */
  --cs-success:#34a853; --cs-warning:#f6a609; --cs-danger:#e02b2b;

  /* Aliases — USE THESE in UI */
  --color-primary:var(--cs-blue-500); --color-primary-hover:var(--cs-blue-600); --color-primary-active:var(--cs-blue-700);
  --color-accent:var(--cs-orange-500); --color-accent-hover:var(--cs-orange-600); --color-accent-active:var(--cs-orange-700);
  --color-bg:var(--cs-white); --color-bg-subtle:var(--cs-blue-50);
  --color-surface:var(--cs-white); --color-surface-muted:var(--cs-gray-50);
  --color-text:var(--cs-gray-700); --color-text-strong:var(--cs-gray-900); --color-text-muted:var(--cs-gray-500);
  --color-text-on-brand:var(--cs-white);
  --color-border:var(--cs-gray-200); --color-border-strong:var(--cs-gray-300);
  --color-price:var(--cs-orange-500); --color-link:var(--cs-blue-500);

  /* Gradients (only these three ship site-wide) */
  --gradient-navbar:linear-gradient(180deg,#2aa6f2 0%,var(--cs-blue-500) 100%);
  --gradient-brand:linear-gradient(135deg,var(--cs-blue-400) 0%,var(--cs-blue-600) 100%);
  --gradient-hero:radial-gradient(120% 120% at 70% 20%,#eaf6fe 0%,#d4ecfb 45%,#bfe1f7 100%);
  --tile-product:linear-gradient(160deg,#fbfdff,#eef6fd);

  /* Typography */
  --font-base:"Open Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-heading:var(--font-base);
  --fw-regular:400; --fw-medium:600; --fw-bold:700; --fw-extrabold:800;
  --fs-h1:clamp(2rem,1.4rem + 2.6vw,3.25rem);
  --fs-h2:clamp(1.6rem,1.2rem + 1.7vw,2.5rem);
  --fs-h3:clamp(1.3rem,1.1rem + 0.9vw,1.75rem);
  --fs-h4:clamp(1.125rem,1rem + 0.5vw,1.375rem);
  --fs-lead:clamp(1.0625rem,1rem + 0.3vw,1.25rem);
  --fs-body:1rem; --fs-sm:0.875rem; --fs-xs:0.75rem;
  --fs-price:clamp(1.5rem,1.2rem + 1vw,2rem);
  --lh-tight:1.15; --lh-heading:1.2; --lh-snug:1.4; --lh-body:1.65;
  --ls-tight:-0.01em; --ls-wide:0.04em; --ls-caps:0.06em;

  /* Spacing (4px base) */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  /* Radii */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px; --radius-circle:50%;

  /* Shadows — soft, cool-tinted, never pure black */
  --shadow-xs:0 1px 2px rgba(40,70,95,.06);
  --shadow-sm:0 2px 8px rgba(40,70,95,.07);
  --shadow-md:0 8px 24px rgba(40,70,95,.10);
  --shadow-lg:0 18px 48px rgba(40,70,95,.14);
  --shadow-brand:0 10px 28px rgba(24,155,238,.28);
  --shadow-accent:0 10px 24px rgba(235,77,0,.26);

  /* Layout / motion */
  --container-max:1240px;
  --container-pad:clamp(1rem,0.5rem + 2vw,2.5rem);
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;

  --cs-check-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20.3 5.7 9.6 16.4l-5-5L2.2 13.8l7.4 7.4L22.7 8.1z"/></svg>');
}

/* ---------------------------------------------------------------------------
   2. BASE / RESET
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-base); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--color-text); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0 0 var(--space-4); font-family:var(--font-heading); color:var(--color-text-strong);
  line-height:var(--lh-heading); font-weight:var(--fw-bold); text-wrap:balance;}
h1{font-size:var(--fs-h1); letter-spacing:var(--ls-tight);}
h2{font-size:var(--fs-h2); letter-spacing:var(--ls-tight);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}
p{margin:0 0 var(--space-4); text-wrap:pretty;}
a{color:var(--color-link); text-decoration:none; transition:color var(--dur) var(--ease);}
a:hover{color:var(--color-primary-hover);}
img{max-width:100%; display:block;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--cs-blue-300); outline-offset:2px; border-radius:var(--radius-sm);}

/* ---------------------------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------------------------- */
.cs-container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad);}
.cs-section{padding-block:var(--space-8);}
.cs-section--tint{background:var(--color-bg-subtle);}
.cs-visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Section heading with brand check-mark */
.cs-section-title{display:flex; align-items:center; gap:var(--space-3); font-size:var(--fs-h2);
  font-weight:var(--fw-bold); color:var(--color-text-strong); margin:0 0 var(--space-6);}
.cs-section-title::before{content:""; width:28px; height:28px; flex:none; background:var(--color-primary);
  -webkit-mask:var(--cs-check-mask) center/contain no-repeat; mask:var(--cs-check-mask) center/contain no-repeat;}

/* Eyebrow label e.g. "— ОСТАННІ НОВИНИ" */
.cs-eyebrow{display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--fs-sm);
  font-weight:var(--fw-bold); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--color-primary);}
.cs-eyebrow::before{content:""; width:28px; height:2px; background:var(--color-accent);}

/* Brand logo spin — colour swirl rotates, house stays put */
@keyframes cs-logo-spin{to{transform:rotate(360deg);}}
.cs-logo-spin{transform-box:view-box; transform-origin:28px 28px; animation:cs-logo-spin 9s linear infinite;}
.cs-logo:hover .cs-logo-spin{animation-duration:2.4s;}
@media (prefers-reduced-motion:reduce){.cs-logo-spin{animation:none !important;}}

/* ---------------------------------------------------------------------------
   4. BUTTON  (.cs-btn)  primary=orange · secondary=blue · outline · ghost
   --------------------------------------------------------------------------- */
.cs-btn{display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  padding:0.8rem 1.6rem; font-size:1rem; font-weight:var(--fw-bold); line-height:1.1; letter-spacing:0.01em;
  border:2px solid transparent; border-radius:var(--radius-md); cursor:pointer; text-decoration:none;
  transition:background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);}
.cs-btn:active{transform:translateY(1px);}
.cs-btn svg{flex:none;}
.cs-btn--full{width:100%;}
.cs-btn--sm{padding:0.5rem 1rem; font-size:var(--fs-sm);}
.cs-btn--lg{padding:1.05rem 2.1rem; font-size:var(--fs-h4);}
.cs-btn--primary{background:var(--color-accent); color:#fff; box-shadow:var(--shadow-accent);}
.cs-btn--primary:hover{background:var(--color-accent-hover); color:#fff;}
.cs-btn--primary:active{background:var(--color-accent-active);}
.cs-btn--secondary{background:var(--color-primary); color:#fff; box-shadow:var(--shadow-brand);}
.cs-btn--secondary:hover{background:var(--color-primary-hover); color:#fff;}
.cs-btn--secondary:active{background:var(--color-primary-active);}
.cs-btn--outline{background:transparent; color:var(--color-primary); border-color:var(--color-primary);}
.cs-btn--outline:hover{background:var(--cs-blue-50); color:var(--color-primary);}
.cs-btn--ghost{background:transparent; color:var(--color-text-strong);}
.cs-btn--ghost:hover{background:var(--cs-gray-100);}
.cs-btn[disabled],.cs-btn--disabled{opacity:0.5; cursor:not-allowed; box-shadow:none; transform:none;}

/* ---------------------------------------------------------------------------
   5. BADGE  (.cs-badge)
   --------------------------------------------------------------------------- */
.cs-badge{display:inline-flex; align-items:center; gap:0.4em; padding:0.35rem 0.75rem;
  font-size:var(--fs-sm); font-weight:var(--fw-bold); line-height:1; letter-spacing:0.01em;
  border:1px solid transparent; border-radius:var(--radius-pill); white-space:nowrap;}
.cs-badge--sm{padding:0.2rem 0.55rem; font-size:var(--fs-xs);}
.cs-badge--neutral{background:var(--cs-gray-100); color:var(--cs-gray-700); border-color:var(--cs-gray-200);}
.cs-badge--primary{background:var(--cs-blue-100); color:var(--cs-blue-700); border-color:var(--cs-blue-300);}
.cs-badge--accent{background:var(--cs-orange-100); color:var(--cs-orange-700); border-color:#f6c3ad;}
.cs-badge--success{background:#dff3e6; color:#1f7a3d; border-color:#a9dcbb;}
.cs-badge--solid-blue{background:var(--color-primary); color:#fff;}
.cs-badge--solid-orange{background:var(--color-accent); color:#fff;}

/* ---------------------------------------------------------------------------
   6. SPEC CHIP  (.cs-spec-chip) — signature blue circle + caption
   --------------------------------------------------------------------------- */
.cs-spec-chip{display:flex; flex-direction:column; align-items:center; gap:0.4rem; text-align:center;}
.cs-spec-chip__circle{width:72px; height:72px; border-radius:var(--radius-circle);
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  font-weight:var(--fw-extrabold); font-size:1.18rem; line-height:1; color:#fff;
  background:var(--gradient-brand); box-shadow:var(--shadow-sm);}
.cs-spec-chip--success .cs-spec-chip__circle{background:linear-gradient(135deg,#4cc070,#2c8f4d);}
.cs-spec-chip--accent  .cs-spec-chip__circle{background:linear-gradient(135deg,#f5793a,#cf4400);}
.cs-spec-chip__label{font-size:var(--fs-xs); color:var(--color-text-muted); line-height:1.25;}

/* ---------------------------------------------------------------------------
   7. PRODUCT CARD  (.cs-product-card)  — one card = WooCommerce loop item
   --------------------------------------------------------------------------- */
.cs-product-card{position:relative; display:flex; flex-direction:column; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.cs-product-card:hover{border-color:var(--cs-blue-300); box-shadow:var(--shadow-md); transform:translateY(-3px); z-index:5;}
.cs-product-card__media{position:relative; padding:var(--space-4); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--tile-product); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden;}
.cs-product-card__media img{max-height:100%; max-width:100%; object-fit:contain; mix-blend-mode:multiply;}
.cs-product-card__ph{color:var(--cs-blue-300); font-size:var(--fs-sm);} /* placeholder text when no image */
.cs-product-card__flags{position:absolute; top:var(--space-3); left:var(--space-3); display:flex; flex-direction:column; gap:0.4rem; align-items:flex-start;}
.cs-product-card__compare{position:absolute; top:var(--space-3); right:var(--space-3); width:36px; height:36px;
  display:grid; place-items:center; border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:rgba(255,255,255,.9); color:var(--color-text-muted);}
.cs-product-card__compare:hover{color:var(--color-primary); border-color:var(--cs-blue-300);}
.cs-product-card__body{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); flex:1;}
.cs-product-card__brand{font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-muted);}
.cs-product-card__title{font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--color-text-strong); line-height:1.4;}
.cs-product-card__specs{display:flex; flex-wrap:wrap; gap:0.4rem 0.9rem; margin-top:auto;}
.cs-product-card__specs li{display:inline-flex; align-items:center; gap:0.35rem; font-size:var(--fs-xs); color:var(--color-text-muted);}
.cs-product-card__specs svg{color:var(--color-primary);}
.cs-product-card__price{display:flex; align-items:baseline; gap:0.6rem; margin-top:0.25rem;}
.cs-product-card__price b{font-size:var(--fs-price); font-weight:var(--fw-extrabold); color:var(--color-price); line-height:1;}
.cs-product-card__price s{font-size:var(--fs-sm); color:var(--color-text-muted);}
.cs-product-card__actions{margin-top:0.25rem;}
/* hover spec table — animate via opacity+translate (no max-height jank) */
.cs-product-card__spectable{position:absolute; top:100%; left:-1px; right:-1px; background:var(--color-surface);
  border:1px solid var(--cs-blue-300); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-md); overflow:hidden; opacity:0; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 180ms ease, transform 220ms cubic-bezier(0.22,0.61,0.36,1);}
.cs-product-card:hover .cs-product-card__spectable{opacity:1; pointer-events:auto; transform:translateY(0);}
.cs-product-card__spectable table{width:100%; border-collapse:collapse; font-size:var(--fs-xs); table-layout:fixed;}
.cs-product-card__spectable tr:nth-child(odd){background:var(--color-bg-subtle);}
.cs-product-card__spectable td{padding:0.35rem 0.65rem; color:var(--color-text-muted); vertical-align:top;}
.cs-product-card__spectable td:first-child{width:62%;}
.cs-product-card__spectable td:last-child{color:var(--color-text-strong); font-weight:600; text-align:right; white-space:nowrap; width:38%;}

/* ---------------------------------------------------------------------------
   8. BREADCRUMBS  (.cs-breadcrumbs)
   --------------------------------------------------------------------------- */
.cs-breadcrumbs{font-size:var(--fs-sm);}
.cs-breadcrumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;}
.cs-breadcrumbs li{display:flex; align-items:center; gap:0.5rem;}
.cs-breadcrumbs a{color:var(--color-primary);}
.cs-breadcrumbs [aria-current]{color:var(--color-text-muted);}
.cs-breadcrumbs .sep{color:var(--color-border-strong);}

/* ---------------------------------------------------------------------------
   9. PAGINATION  (.cs-pagination)
   --------------------------------------------------------------------------- */
.cs-pagination{display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center;}
.cs-pagination a,.cs-pagination span.page{min-width:42px; height:42px; padding:0 0.6rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:var(--color-text-strong); background:var(--color-surface); border:1.5px solid var(--color-border);
  border-radius:var(--radius-md); transition:all var(--dur) var(--ease);}
.cs-pagination a:hover{border-color:var(--cs-blue-300);}
.cs-pagination .is-active{color:#fff; background:var(--color-primary); border-color:var(--color-primary);}
.cs-pagination .dots{align-self:center; color:var(--color-text-muted);}

/* ---------------------------------------------------------------------------
   10. INPUT / FORM FIELDS
   --------------------------------------------------------------------------- */
.cs-field{display:block; width:100%;}
.cs-field__label{display:block; margin-bottom:0.4rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text-strong);}
.cs-field__wrap{position:relative; display:flex; align-items:center;}
.cs-field__icon{position:absolute; left:0.85rem; display:flex; color:var(--color-text-muted); pointer-events:none;}
.cs-input{width:100%; padding:0.8rem 1rem; font-family:inherit; font-size:1rem; color:var(--color-text-strong);
  background:var(--color-surface); border:1.5px solid var(--color-border-strong); border-radius:var(--radius-md);
  outline:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.cs-input--icon{padding-left:2.6rem;}
.cs-input:focus{border-color:var(--color-primary); box-shadow:0 0 0 3px var(--cs-blue-100);}
.cs-field__hint{display:block; margin-top:0.4rem; font-size:var(--fs-xs); color:var(--color-text-muted);}
.cs-select{padding:0.55rem 0.8rem; font-family:inherit; background:var(--color-surface); color:var(--color-text-strong);
  border:1.5px solid var(--color-border-strong); border-radius:var(--radius-md);}

/* ---------------------------------------------------------------------------
   11. SITE HEADER  (.cs-header)
   --------------------------------------------------------------------------- */
.cs-header{background:var(--color-surface); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:100; transition:box-shadow .2s ease;}
.cs-header.is-scrolled{box-shadow:0 2px 16px rgba(0,0,0,.12);}
.cs-utilbar{background:var(--color-surface-muted); border-bottom:1px solid var(--color-border); font-size:var(--fs-sm);}
.cs-utilbar__inner{display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:1rem;}
.cs-utilbar__hours{display:flex; gap:1.25rem; color:var(--color-text-muted); flex-wrap:wrap;}
.cs-utilbar__hours .dot{opacity:.5;}
.cs-utillinks{display:flex; gap:1.25rem;}
.cs-utillinks a{color:var(--color-text);}
.cs-mainrow{display:flex; align-items:center; gap:var(--space-5); padding-block:var(--space-4);}
.cs-logo{display:inline-flex; align-items:center; gap:0.6rem;}
.cs-logo__word{font-size:1.45rem; font-weight:var(--fw-extrabold); color:var(--color-text-strong); letter-spacing:-0.01em;}
.cs-logo__word span{font-weight:var(--fw-regular); color:var(--color-primary);}
.cs-search{flex:1; position:relative; max-width:420px;}
.cs-search svg{position:absolute; left:0.85rem; top:50%; transform:translateY(-50%);}
.cs-search input{width:100%; padding:0.7rem 1rem 0.7rem 2.6rem; font-family:inherit; font-size:1rem;
  border:1.5px solid var(--color-border-strong); border-radius:var(--radius-pill); outline:none;}
.cs-search input:focus{border-color:var(--color-primary); box-shadow:0 0 0 3px var(--cs-blue-100);}
.cs-hdr-contacts{margin-left:auto; display:flex; align-items:center; gap:1rem;}
.cs-hdr-phones{text-align:right; line-height:1.3;}
.cs-hdr-phones a{font-weight:var(--fw-bold); color:var(--color-text-strong); font-size:1.05rem;}
.cs-hdr-phones small{font-size:var(--fs-xs); color:var(--color-text-muted); display:block;}
.cs-iconbtn{position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text);}
.cs-iconbtn__count{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; font-size:11px; font-weight:var(--fw-bold); color:#fff; background:var(--color-accent); border-radius:var(--radius-pill);}
.cs-burger{display:none; width:44px; height:44px; place-items:center; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface);}

/* Category nav + mega menu */
.cs-nav-wrap{position:relative;}
.cs-nav{background:var(--gradient-navbar);}
.cs-nav-list{display:flex; flex-wrap:wrap; gap:0.25rem; padding-block:0.35rem;}
.cs-nav-list > li > a{display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1rem; color:#fff;
  font-weight:var(--fw-medium); font-size:var(--fs-sm); border-radius:var(--radius-md); background:transparent;
  transition:background var(--dur) var(--ease);}
.cs-nav-list > li > a:hover,.cs-nav-list > li.is-open > a,.cs-nav-list > li.is-active > a{background:rgba(255,255,255,.18); color:#fff;}
.cs-nav-list > li > a .chev{opacity:.85; transition:transform var(--dur) var(--ease);}
.cs-nav-list > li.is-open > a .chev{transform:rotate(180deg);}
.cs-mega{position:absolute; top:100%; left:0; right:0; z-index:200; background:var(--color-surface);
  border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-lg); display:none; animation:cs-mega-in .18s var(--ease);}
.cs-nav-wrap.is-mega-open .cs-mega.is-open{display:block;}
.cs-mega__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0.4rem var(--space-5); padding-block:var(--space-5);}
.cs-mega__grid a{display:flex; align-items:flex-start; gap:0.5rem; padding:0.5rem 0.6rem; border-radius:var(--radius-md);
  color:var(--color-text); font-size:var(--fs-sm); line-height:1.35;}
.cs-mega__grid a:hover{background:var(--cs-blue-50); color:var(--color-primary);}
.cs-mega__grid svg{flex:none; margin-top:3px; color:var(--color-primary);}
@keyframes cs-mega-in{from{opacity:0; transform:translateY(-6px);}}

/* ---------------------------------------------------------------------------
   12. HERO SLIDER  (.cs-hero)  — 3 slides, arrows, dots, autoplay (site.js)
   --------------------------------------------------------------------------- */
.cs-hero{background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border);}
.cs-hero__inner{padding-block:var(--space-6);}
.cs-hero__stage{position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm);
  background:radial-gradient(120% 130% at 78% 18%,#eaf6fe 0%,#cfeafa 45%,#a9d6f4 100%);
  transition:background var(--dur-slow) var(--ease);}
.cs-hero__stage[data-theme="warm"]{background:radial-gradient(120% 130% at 78% 18%,#fff3e9 0%,#ffd9bf 42%,#f7b083 100%);}
.cs-hero__slide{display:none; grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr); align-items:center;
  gap:var(--space-5); min-height:432px; padding:var(--space-7) clamp(2rem,4vw,4rem);}
.cs-hero__slide.is-active{display:grid;}
.cs-hero__offer{background:rgba(255,255,255,.92); backdrop-filter:blur(2px); border:1px solid #fff;
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-md); max-width:520px;
  animation:cs-hero-in .5s var(--ease);}
.cs-hero__eyebrow{display:inline-flex; align-items:center; gap:0.5rem; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  letter-spacing:0.04em; text-transform:uppercase; color:var(--color-primary);}
.cs-hero__stage[data-theme="warm"] .cs-hero__eyebrow{color:var(--color-accent);}
.cs-hero__eyebrow::before{content:""; width:22px; height:2px; background:currentColor;}
.cs-hero__offer h1{font-size:var(--fs-h1); margin:var(--space-3) 0; line-height:1.1;}
.cs-hero__offer p{font-size:var(--fs-lead); color:var(--color-text); margin:0 0 var(--space-5); max-width:44ch;}
.cs-hero__links{display:flex; flex-direction:column; gap:0.6rem; margin-bottom:var(--space-5);}
.cs-hero__links a{display:inline-flex; align-items:center; gap:0.55rem; font-weight:var(--fw-medium); color:var(--color-text-strong);}
.cs-hero__links .bullet{width:22px; height:22px; border-radius:var(--radius-circle); background:var(--color-primary);
  color:#fff; display:grid; place-items:center; flex:none;}
.cs-hero__stage[data-theme="warm"] .cs-hero__links .bullet{background:var(--color-accent);}
.cs-hero__visual{display:grid; place-items:center;}
.cs-hero__visual > *{animation:cs-hero-pop .55s var(--ease);}
.cs-hero__arrow{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:var(--radius-circle);
  border:none; background:rgba(255,255,255,.85); color:var(--color-text-strong); display:grid; place-items:center;
  box-shadow:var(--shadow-sm); z-index:3;}
.cs-hero__arrow--prev{left:14px;}
.cs-hero__arrow--next{right:14px;}
.cs-hero__dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:0.5rem; z-index:3;}
.cs-hero__dots button{width:10px; height:10px; border-radius:var(--radius-pill); border:none; background:rgba(255,255,255,.75);
  cursor:pointer; transition:all var(--dur) var(--ease);}
.cs-hero__dots button.is-active{width:30px; background:var(--color-accent);}
@keyframes cs-hero-in{from{opacity:0; transform:translateY(14px);}}
@keyframes cs-hero-pop{from{opacity:0; transform:scale(.92);}}

/* Trust strip under hero */
.cs-trust{display:flex; gap:var(--space-6); flex-wrap:wrap; justify-content:center; margin-top:var(--space-5);}
.cs-trust li{display:inline-flex; align-items:center; gap:0.55rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text-strong);}
.cs-trust svg{color:var(--color-primary);}

/* ---------------------------------------------------------------------------
   13. DECORATIVE PLACEHOLDER VISUALS (pure CSS — swap for real photography)
   --------------------------------------------------------------------------- */
.cs-ac{width:460px; max-width:100%; aspect-ratio:3/1; position:relative; filter:drop-shadow(0 24px 40px rgba(20,80,130,.28));}
.cs-ac::before{content:""; position:absolute; inset:0; background:linear-gradient(170deg,#fff 0%,#eef4f9 60%,#dfeaf2 100%); border-radius:18px/30px; border:1px solid #fff;}
.cs-ac::after{content:""; position:absolute; left:0; right:0; bottom:14%; height:30%;
  background:repeating-linear-gradient(180deg,#cfdde8 0 3px,rgba(255,255,255,.5) 3px 6px),linear-gradient(180deg,#cfdde8,#9fb6c6);
  border-radius:0 0 16px 16px;}
.cs-radiator{width:320px; max-width:100%; aspect-ratio:8/5; background:linear-gradient(180deg,#fff,#eef2f5); border-radius:12px;
  padding:16px 14px; display:flex; gap:5px; box-shadow:0 24px 44px rgba(120,60,20,.28); border:1px solid #fff;}
.cs-radiator span{flex:1; border-radius:6px; background:linear-gradient(180deg,#fff 0%,#f3f6f8 55%,#dfe6eb 100%);
  box-shadow:inset -2px 0 3px rgba(0,0,0,.05),inset 2px 0 2px rgba(255,255,255,.9);}
.cs-fans{display:flex; gap:18px; align-items:center; filter:drop-shadow(0 10px 18px rgba(20,80,130,.18));}
.cs-fan{border-radius:50%; position:relative; border:5px solid #fff;
  background:radial-gradient(circle at 50% 50%,#fff 0 14%,transparent 15%),conic-gradient(from 0deg,#e7eef3,#b9c9d4,#e7eef3,#b9c9d4,#e7eef3,#b9c9d4,#e7eef3,#b9c9d4,#e7eef3);
  box-shadow:0 18px 34px rgba(20,80,130,.28),inset 0 0 0 6px rgba(255,255,255,.55);}
.cs-fan::after{content:""; position:absolute; inset:42%; border-radius:50%; background:linear-gradient(160deg,#cdd9e2,#90a6b5);}
.cs-tile{background:var(--tile-product); border:1px solid var(--color-border); border-radius:var(--radius-lg); display:grid; place-items:center;}

/* ---------------------------------------------------------------------------
   14. CATEGORY GRID + ADVANTAGES + BRANDS + NEWS  (home)
   --------------------------------------------------------------------------- */
.cs-cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);}
.cs-cat-card{text-align:left; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); transition:all var(--dur) var(--ease);}
.cs-cat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--cs-blue-300);}
.cs-cat-card__icon{width:56px; height:56px; border-radius:var(--radius-md); background:var(--cs-blue-50); color:var(--color-primary); display:grid; place-items:center;}
.cs-cat-card__name{font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--color-text-strong);}
.cs-cat-card__note{font-size:var(--fs-sm); color:var(--color-text-muted);}

.cs-adv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);}
.cs-adv{display:flex; flex-direction:column; gap:var(--space-3);}
.cs-adv__icon{width:52px; height:52px; border-radius:var(--radius-circle); background:var(--gradient-brand); color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow-brand);}
.cs-adv h4{margin:0;}
.cs-adv p{margin:0; font-size:var(--fs-sm); color:var(--color-text-muted);}

.cs-brands{display:flex; flex-wrap:wrap; gap:var(--space-4);}
.cs-brands__item{flex:1 1 140px; min-width:120px; height:76px; display:grid; place-items:center;
  border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface);
  font-weight:var(--fw-extrabold); font-size:1.15rem; letter-spacing:0.02em; color:var(--cs-gray-500);}

.cs-prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);}
.cs-prod-grid--3{grid-template-columns:repeat(3,1fr);}
.cs-news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);}
.cs-news-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;}
.cs-news-card__media{aspect-ratio:16/9; background:linear-gradient(135deg,var(--cs-blue-100),var(--cs-blue-300));}
.cs-news-card__body{padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); flex:1;}
.cs-news-card__body h4{margin:0;}
.cs-news-card__body p{margin:0; font-size:var(--fs-sm); color:var(--color-text-muted); flex:1;}
.cs-news-card__more{display:inline-flex; align-items:center; gap:0.4rem; font-weight:var(--fw-bold); font-size:var(--fs-sm);}

/* ---------------------------------------------------------------------------
   15. CATALOG  (filters sidebar + grid + toolbar)
   --------------------------------------------------------------------------- */
.cs-catalog-grid{display:grid; grid-template-columns:280px 1fr; gap:var(--space-6); align-items:start;}
.cs-filters{align-self:start; position:sticky; top:var(--space-4);}
.cs-filters__inner{border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:0 var(--space-5) var(--space-5); background:var(--color-surface);}
.cs-filters__head{display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-5); padding-bottom:var(--space-2);}
.cs-filters__head strong{font-size:var(--fs-h4);}
.cs-filters__head a{font-size:var(--fs-sm);}
.cs-filter-group{padding-block:var(--space-4); border-bottom:1px solid var(--color-border);}
.cs-filter-group__head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  background:none; border:none; padding:0; cursor:pointer; color:var(--color-text-strong);}
.cs-filter-group__head h4{margin:0; font-size:var(--fs-body);}
.cs-filter-group__head svg{color:var(--color-text-muted); transition:transform var(--dur) var(--ease);}
.cs-filter-group.is-collapsed .cs-filter-group__head svg{transform:rotate(180deg);}
.cs-filter-group__list{display:flex; flex-direction:column; gap:0.55rem; margin-top:var(--space-3);}
.cs-filter-group.is-collapsed .cs-filter-group__list{display:none;}
.cs-filter-opt{display:flex; align-items:center; gap:0.6rem; font-size:var(--fs-sm); color:var(--color-text); cursor:pointer;}
.cs-filter-opt input{width:17px; height:17px; accent-color:var(--color-primary);}
.cs-filter-opt span:first-of-type{flex:1;}
.cs-filter-opt .count{color:var(--color-text-muted);}
.cs-price-filter h4{margin:0 0 var(--space-3); font-size:var(--fs-body);}
.cs-price-track{position:relative; height:4px; background:var(--color-border); border-radius:var(--radius-pill); margin:10px 6px 14px;}
.cs-price-track__fill{position:absolute; left:8%; right:32%; top:0; bottom:0; background:var(--color-primary); border-radius:var(--radius-pill);}
.cs-price-track__knob{position:absolute; top:50%; width:16px; height:16px; background:#fff; border:3px solid var(--color-primary); border-radius:50%; transform:translate(-50%,-50%);}
.cs-price-out{display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--color-text-muted);}
.cs-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-5);}
.cs-toolbar__count{font-size:var(--fs-sm); color:var(--color-text-muted);}
.cs-toolbar__count strong{color:var(--color-text-strong);}
.cs-toolbar__sort{display:inline-flex; align-items:center; gap:0.6rem; font-size:var(--fs-sm);}
.cs-seo{margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--color-border);
  color:var(--color-text-muted); font-size:var(--fs-sm); max-width:78ch;}
.cs-seo h3{color:var(--color-text-strong);}

/* ---------------------------------------------------------------------------
   16. PRODUCT PAGE  (gallery + buy panel + tabs)
   --------------------------------------------------------------------------- */
.cs-product-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:var(--space-7); margin-top:var(--space-5);}
.cs-gallery{display:flex; flex-direction:column; gap:var(--space-4);}
.cs-gallery__main{position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,#fbfdff,#e9f3fb);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); display:grid; place-items:center; overflow:hidden;}
.cs-gallery__zoom{position:absolute; bottom:14px; right:14px; width:40px; height:40px; border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:rgba(255,255,255,.9); color:var(--color-text); display:grid; place-items:center;}
.cs-gallery__flag{position:absolute; top:14px; left:14px;}
.cs-gallery__thumbs{display:flex; gap:var(--space-3);}
.cs-gallery__thumb{flex:1; aspect-ratio:1; border-radius:var(--radius-md); border:2px solid var(--color-border);
  background:linear-gradient(160deg,#fbfdff,#eef6fd); display:grid; place-items:center; cursor:pointer; padding:8px;}
.cs-gallery__thumb.is-active{border-color:var(--color-primary);}
.cs-buy{display:flex; flex-direction:column; gap:var(--space-5);}
.cs-buy__brand{font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-muted);}
.cs-buy h1{font-size:var(--fs-h2); margin:0.4rem 0 0.5rem;}
.cs-buy__meta{display:flex; gap:var(--space-4); font-size:var(--fs-sm); color:var(--color-text-muted);}
.cs-buy__meta strong{color:var(--color-text-strong);}
.cs-buy__instock{color:var(--cs-success); display:inline-flex; align-items:center; gap:0.3rem;}
.cs-buy__chips{display:flex; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-5); background:var(--color-bg-subtle); border-radius:var(--radius-lg);}
.cs-buy__price-row{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;}
.cs-buy__price{font-size:var(--fs-h1); font-weight:var(--fw-extrabold); color:var(--color-price); line-height:1;}
.cs-buy__installments{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4);
  border:1px dashed var(--cs-orange-500); border-radius:var(--radius-md); background:var(--cs-orange-100);}
.cs-buy__installments .ic{width:40px; height:40px; border-radius:var(--radius-circle); background:#fff; color:var(--color-accent); display:grid; place-items:center; flex:none;}
.cs-buy__installments p{margin:0; font-size:var(--fs-sm); color:var(--cs-orange-700);}
.cs-buy__trust{display:flex; gap:var(--space-4); flex-wrap:wrap;}
.cs-buy__trust span{display:inline-flex; align-items:center; gap:0.5rem; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--color-text);}
.cs-buy__trust svg{color:var(--color-primary);}

.cs-tabs{margin-top:var(--space-8);}
.cs-tabs__nav{display:flex; gap:0.25rem; border-bottom:2px solid var(--color-border); flex-wrap:wrap;}
.cs-tabs__tab{padding:0.85rem 1.2rem; font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--color-text-muted);
  background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer;}
.cs-tabs__tab.is-active{color:var(--color-primary); border-bottom-color:var(--color-primary);}
.cs-tabs__panel{padding-top:var(--space-5);}
.cs-tabs__panel:not(.is-active){display:none;}
.cs-spec-table{width:100%; max-width:640px; border-collapse:collapse; font-size:var(--fs-sm);}
.cs-spec-table tr:nth-child(odd){background:var(--color-bg-subtle);}
.cs-spec-table td{padding:0.7rem 1rem; border-bottom:1px solid var(--color-border);}
.cs-spec-table td:first-child{color:var(--color-text-muted); width:50%;}
.cs-spec-table td:last-child{color:var(--color-text-strong); font-weight:600;}
.cs-checklist{display:flex; flex-direction:column; gap:0.6rem; margin-top:var(--space-4);}
.cs-checklist li{display:flex; gap:0.6rem; align-items:flex-start;}
.cs-checklist svg{color:var(--cs-success); flex:none; margin-top:2px;}

/* ---------------------------------------------------------------------------
   17. CART  (line items + summary)
   --------------------------------------------------------------------------- */
.cs-cart-grid{display:grid; grid-template-columns:1fr 340px; gap:var(--space-6); align-items:start;}
.cs-cart-items{border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;}
.cs-cart-row{display:grid; grid-template-columns:84px 1fr auto; gap:var(--space-4); align-items:center; padding:var(--space-4);}
.cs-cart-row + .cs-cart-row{border-top:1px solid var(--color-border);}
.cs-cart-row__thumb{width:84px; height:84px; border-radius:var(--radius-md); background:var(--tile-product);
  border:1px solid var(--color-border); display:grid; place-items:center; padding:8px;}
.cs-cart-row__brand{font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:0.06em; text-transform:uppercase; color:var(--color-text-muted);}
.cs-cart-row__name{font-weight:var(--fw-medium); color:var(--color-text-strong); margin-bottom:0.5rem;}
.cs-cart-row__controls{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.cs-cart-row__total{text-align:right; font-weight:var(--fw-extrabold); font-size:var(--fs-h4); color:var(--color-price); white-space:nowrap;}
.cs-qty{display:inline-flex; align-items:center; border:1.5px solid var(--color-border-strong); border-radius:var(--radius-md); overflow:hidden;}
.cs-qty button{width:36px; height:36px; border:none; background:var(--color-surface); font-size:1.2rem; color:var(--color-text);}
.cs-qty span{min-width:36px; text-align:center; font-weight:var(--fw-bold);}
.cs-cart-remove{display:inline-flex; align-items:center; gap:0.4rem; background:none; border:none; color:var(--color-text-muted); font-size:var(--fs-sm);}
.cs-cart-remove:hover{color:var(--cs-danger);}
.cs-summary{position:sticky; top:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); background:var(--color-surface); display:flex; flex-direction:column; gap:var(--space-4);}
.cs-summary h3{margin:0;}
.cs-summary__row{display:flex; justify-content:space-between; font-size:var(--fs-sm);}
.cs-summary__row span:first-child{color:var(--color-text-muted);}
.cs-summary__row b{font-weight:var(--fw-medium);}
.cs-summary__total{border-top:1px solid var(--color-border); padding-top:var(--space-4); display:flex; justify-content:space-between; align-items:baseline;}
.cs-summary__total b{font-weight:var(--fw-bold);}
.cs-summary__total .amt{font-size:var(--fs-h3); font-weight:var(--fw-extrabold); color:var(--color-price);}
.cs-summary__note{margin:0; font-size:var(--fs-xs); color:var(--color-text-muted); text-align:center;}
.cs-summary__inst{display:flex; align-items:center; gap:0.5rem; justify-content:center; font-size:var(--fs-sm); color:var(--cs-orange-700); font-weight:var(--fw-medium);}
.cs-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:var(--space-9); gap:var(--space-4);}
.cs-empty__icon{width:96px; height:96px; border-radius:var(--radius-circle); background:var(--cs-blue-50); color:var(--color-primary); display:grid; place-items:center;}
.cs-empty p{color:var(--color-text-muted); max-width:44ch;}

/* ---------------------------------------------------------------------------
   18. CONTACTS  (info + map + callback form)
   --------------------------------------------------------------------------- */
.cs-contacts-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start;}
.cs-info-list{display:flex; flex-direction:column; gap:var(--space-5);}
.cs-info-row{display:flex; gap:var(--space-4);}
.cs-info-row__icon{width:44px; height:44px; flex:none; border-radius:var(--radius-md); background:var(--cs-blue-50); color:var(--color-primary); display:grid; place-items:center;}
.cs-info-row__title{font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text-strong); margin-bottom:0.3rem;}
.cs-phone-list{display:flex; flex-direction:column; gap:0.55rem;}
.cs-phone-list li{display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;}
.cs-phone-list a{font-weight:var(--fw-bold); color:var(--color-text-strong);}
.cs-tag{font-size:var(--fs-xs); font-weight:var(--fw-bold); color:#fff; padding:0.12rem 0.5rem; border-radius:var(--radius-pill);}
.cs-tag--viber{background:#7360f2;} .cs-tag--telegram{background:#2aabee;}
.cs-map{aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); position:relative; background:linear-gradient(135deg,#dfeaf0,#cddde8);}
.cs-map__grid{position:absolute; inset:0; opacity:.5; background-image:linear-gradient(var(--cs-gray-300) 1px,transparent 1px),linear-gradient(90deg,var(--cs-gray-300) 1px,transparent 1px); background-size:38px 38px;}
.cs-map__pin{position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); color:var(--color-accent);}
.cs-map__label{position:absolute; left:50%; top:54%; transform:translateX(-50%); font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:var(--color-text-strong); background:rgba(255,255,255,.85); padding:0.2rem 0.6rem; border-radius:var(--radius-pill);}
.cs-callback{background:var(--gradient-hero); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4);}
.cs-callback h3{margin:0 0 0.4rem;}
.cs-callback > div:first-child p{margin:0; font-size:var(--fs-sm); color:var(--color-text-muted);}
.cs-callback__ok{display:flex; align-items:center; gap:0.6rem; padding:var(--space-4); background:#dff3e6; border-radius:var(--radius-md); color:#1f7a3d; font-weight:var(--fw-medium);}
.cs-fineprint{margin:0; font-size:var(--fs-xs); color:var(--color-text-muted); text-align:center;}

/* ---------------------------------------------------------------------------
   19. SITE FOOTER  (.cs-footer)
   --------------------------------------------------------------------------- */
.cs-footer{background:var(--color-surface-muted); border-top:1px solid var(--color-border); margin-top:0;}
.cs-footer__grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr) 1.2fr; gap:var(--space-6); padding-block:var(--space-7);}
.cs-footer__brand{display:inline-flex; align-items:center; gap:0.55rem; margin-bottom:var(--space-4);}
.cs-footer__brand .word{font-size:1.3rem; font-weight:var(--fw-extrabold); color:var(--color-text-strong);}
.cs-footer__brand .word span{font-weight:var(--fw-regular); color:var(--color-primary);}
.cs-footer p{font-size:var(--fs-sm); color:var(--color-text-muted); max-width:32ch;}
.cs-footer__hours{font-size:var(--fs-sm); color:var(--color-text); margin-top:var(--space-3);}
.cs-footer h4{font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:0.06em; color:var(--color-text-strong); margin-bottom:var(--space-4);}
.cs-footer__col ul{display:flex; flex-direction:column; gap:0.6rem;}
.cs-footer__col a{font-size:var(--fs-sm); color:var(--color-text);}
.cs-footer__phones{display:flex; flex-direction:column; gap:0.5rem; margin-bottom:var(--space-4);}
.cs-footer__phones a{font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--color-text-strong);}
.cs-footer__yt{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-md); background:#ff0000; color:#fff; margin-top:var(--space-4);}
.cs-footer__bar{border-top:1px solid var(--color-border);}
.cs-footer__bar-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; padding-block:var(--space-4); font-size:var(--fs-sm); color:var(--color-text-muted);}

/* ---------------------------------------------------------------------------
   20. TOAST (optional — add-to-cart feedback)
   --------------------------------------------------------------------------- */
.cs-toast{position:fixed; right:20px; bottom:20px; z-index:1000; display:flex; flex-direction:column; gap:10px;}
.cs-toast > div{background:var(--cs-gray-900); color:#fff; padding:12px 18px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); font-size:var(--fs-sm); display:flex; align-items:center; gap:10px; animation:cs-toast-in .25s var(--ease);}
@keyframes cs-toast-in{from{opacity:0; transform:translateY(8px);}}

/* ---------------------------------------------------------------------------
   21. RESPONSIVE  (breakpoints ~1040px and ~900px and ~620px)
   --------------------------------------------------------------------------- */
@media (max-width:1040px){
  .cs-cat-grid,.cs-adv-grid,.cs-prod-grid{grid-template-columns:repeat(2,1fr);}
  .cs-catalog-grid,.cs-product-grid,.cs-cart-grid,.cs-contacts-grid{grid-template-columns:1fr;}
  .cs-filters{position:static;}
  .cs-hero__slide.is-active{grid-template-columns:1fr; min-height:0;}
  .cs-hero__visual{display:none;}
}
@media (max-width:900px){
  .cs-utillinks,.cs-hdr-phones{display:none;}
  .cs-search{order:3; max-width:none; flex-basis:100%;}
  .cs-burger{display:grid;}
  .cs-nav-list{display:none;}
  .cs-nav.is-open .cs-nav-list{display:flex; flex-direction:column;}
  .cs-mega{display:none !important;}
  .cs-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .cs-cat-grid,.cs-prod-grid,.cs-news-grid,.cs-adv-grid{grid-template-columns:1fr;}
  .cs-cart-row{grid-template-columns:64px 1fr;}
  .cs-cart-row__total{grid-column:2/3; text-align:left;}
  .cs-footer__grid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   22. NEWS SECTION (editorial — feature card + two mini cards)
   --------------------------------------------------------------------------- */
.cs-news__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6);}
.cs-news__heading{display:flex; flex-direction:column; gap:var(--space-2);}
.cs-news__head h2{margin:0; font-size:var(--fs-h2); font-weight:var(--fw-extrabold); color:var(--color-text-strong); letter-spacing:var(--ls-tight);}
.cs-news__all{display:inline-flex; align-items:center; gap:0.45rem; font-weight:var(--fw-bold); font-size:var(--fs-sm); color:var(--color-primary);}
.cs-news__all svg{transition:transform var(--dur) var(--ease);}
.cs-news__all:hover svg{transform:translateX(3px);}
.cs-news2-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:var(--space-5); align-items:stretch;}
.cs-news2-side{display:flex; flex-direction:column; gap:var(--space-5);}
.cs-news-card2{position:relative; display:flex; flex-direction:column; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.cs-news-card2:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--cs-blue-300);}
/* feature */
.cs-news-feature{height:100%;}
.cs-news-feature__media{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--cs-blue-100),var(--cs-blue-400));
  margin:var(--space-4) var(--space-4) 0;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(14,109,176,.13);
  transition:box-shadow var(--dur) var(--ease);}
.cs-news-feature__body{padding:var(--space-4) var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); flex:1;}
.cs-news-feature__meta{display:flex; align-items:center; gap:0.6rem; font-size:var(--fs-xs); color:var(--color-text-muted);}
.cs-news-feature__meta .dot{width:3px; height:3px; border-radius:50%; background:var(--color-border-strong);}
.cs-news-feature h3{margin:0; font-size:var(--fs-h3); color:var(--color-text-strong); line-height:1.2;}
.cs-news-feature p{margin:0; color:var(--color-text-muted); font-size:var(--fs-sm); max-width:52ch;}
.cs-news-feature__more,.cs-news-mini__more{margin-top:auto; align-self:flex-start;}
/* mini vertical — image on top 16:9, body below */
.cs-news-mini{display:flex; flex-direction:column; flex:1;}
.cs-news-mini__media{
  position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--cs-blue-100),var(--cs-blue-300));
  margin:var(--space-3) var(--space-3) 0;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 3px 14px rgba(14,109,176,.11);
  transition:box-shadow var(--dur) var(--ease);}
.cs-news-mini__body{padding:var(--space-3); display:flex; flex-direction:column; gap:0.4rem;}
.cs-news-mini__meta{font-size:var(--fs-xs); color:var(--color-text-muted); text-transform:uppercase; letter-spacing:var(--ls-caps); font-weight:var(--fw-bold);}
.cs-news-mini h4{margin:0; font-size:var(--fs-body); color:var(--color-text-strong); line-height:1.35;}
/* Image shadow deepens on card hover */
.cs-news-card2:hover .cs-news-feature__media,
.cs-news-card2:hover .cs-news-mini__media{box-shadow:0 10px 32px rgba(14,109,176,.24);}
.cs-tag-news{position:absolute; top:var(--space-3); left:var(--space-3); display:inline-flex; align-items:center;
  padding:0.28rem 0.65rem; border-radius:var(--radius-pill); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  background:rgba(255,255,255,.94); color:var(--color-primary); box-shadow:var(--shadow-xs);}
@media (max-width:900px){ .cs-news2-grid{grid-template-columns:1fr;} }

/* ── Bottom-header: fix search field wrapping at desktop ────────────────────
   At >968px the compiled main.css has no width set for .shop-elements, so it
   auto-sizes to content (~182px) and wraps below the nav-shop (1083px).
   Force nowrap and give the search 25% of the container.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width:969px){
  .bottom-header .content-area{ flex-wrap:nowrap; }
  .bottom-header .shop-elements{ flex:0 0 200px; justify-content:flex-end; }
  .bottom-header .nav-shop{ flex:1 1 auto; min-width:0; overflow:hidden; }
  .bottom-header .shop-menu > li{ white-space:nowrap; }
}

/* ── Logo: legacy middle-header responsive fix ─────────────────────────────
   At ≤968px the compiled main.css hides .middle-header completely.
   We restore visibility so the logo remains seen at all viewport widths.
   Contact details (hours, email, phones) are hidden; only the logo stays.
   ─────────────────────────────────────────────────────────────────────── */
.cs-logo{ text-decoration:none; }
@media (max-width:968px){
  .middle-header{ display:flex !important; }
  .middle-header_right .working-hours,
  .middle-header_right .e-mail,
  .middle-header_right .phones-number{ display:none; }
}
@media (max-width:480px){
  .middle-header .cs-logo__mark{ width:38px; height:38px; }
  .middle-header .cs-logo__word{ font-size:1.1rem; }
}

/* ── Mobile top-header: animated logo in mobile/header.php ─────────────────
   Mobile header uses top-header (not middle-header), so logo needs separate
   sizing. SVG is already 44×44 in HTML attrs; adjust word font-size.
   ─────────────────────────────────────────────────────────────────────────── */
.top-header .cs-logo{ gap:0.45rem; }
.top-header .cs-logo__word{ font-size:1rem; }
@media (max-width:380px){
  .top-header .cs-logo__word{ display:none; }
}

/* ── AJAX Search for WooCommerce (dgwt-wcas) isolation ──────────────────────
   The DS base reset (img:block, ul:no-list, box-sizing:border-box) breaks the
   third-party search widget. Scope back the critical properties inside
   .dgwt-wcas-* so the plugin renders as its own CSS expects.
   ────────────────────────────────────────────────────────────────────────── */
.dgwt-wcas-search-wrapp img,
.dgwt-wcas-suggestion img,
.dgwt-wcas-suggestion-content img{ display:inline-block; max-width:none; }
.dgwt-wcas-suggestions-wrapp ul,
.dgwt-wcas-suggestions-wrapp ol{ margin:revert; padding:revert; list-style:revert; }
.dgwt-wcas-search-wrapp *,
.dgwt-wcas-search-wrapp *::before,
.dgwt-wcas-search-wrapp *::after{ box-sizing:content-box; }
.dgwt-wcas-search-wrapp input[type=search]{ box-sizing:border-box; }