/* ===========================================================================
   Holodilnik-style skin for the appliances demo page.
   Scoped to hl-* classes + a per-page palette override so other demo pages
   (which share /style.css) are untouched. Palette and two-tier header layout
   mirror holodilnik.ru: bright blue #079ff9, dark-charcoal buttons #353d4a,
   orange promo accent #ff7120, Inter typography (their Hru fallback).
   =========================================================================== */

:root {
  --accent: #079ff9;        /* holodilnik bright blue (drives shared demo-switch) */
  --accent-dark: #067fc7;
  --hl-blue: #079ff9;
  --hl-blue-deep: #067fc7;
  --hl-blue-soft: #e8f4fe;
  --hl-navy: #353d4a;       /* dark charcoal — logo & primary action buttons */
  --hl-navy-deep: #222d37;
  --hl-orange: #ff7120;     /* promo / bonus accent */
  --hl-border: #dfe6ee;
  --hl-muted: #6b7785;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  color: #1f2932;
}

/* Hide the generic shared header — this page ships its own holodilnik chrome. */
body > header.site-header { display: none; }

/* --- Demo hub switcher: keep it, slim, at the very top ------------------- */
.demo-bar {
  background: var(--hl-navy-deep);
}
.demo-bar .demo-switch {
  width: var(--container); max-width: 100%; margin: 0 auto;
  background: transparent; border: none; padding: 8px 24px;
}
.demo-bar .demo-switch .label { color: #9aa7b4; }
.demo-bar .demo-switch a {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
  color: #cdd6df;
}
.demo-bar .demo-switch a:hover { border-color: var(--hl-blue); color: #fff; }
.demo-bar .demo-switch a.active {
  background: var(--hl-blue); border-color: var(--hl-blue); color: #fff;
}

/* --- Top utility bar ---------------------------------------------------- */
.hl-utility {
  border-bottom: 1px solid var(--hl-border);
  font-size: 14px;
}
.hl-utility .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; gap: 24px;
}
.hl-utility nav { display: flex; gap: 22px; flex-wrap: wrap; }
.hl-utility nav a { color: var(--hl-navy); font-weight: 500; }
.hl-utility nav a:hover { color: var(--hl-blue); text-decoration: none; }
.hl-utility nav a .caret { color: var(--hl-muted); font-size: 10px; margin-left: 3px; }
.hl-utility nav a.promo { color: var(--hl-blue); }
.hl-utility .util-right { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.hl-utility .call { color: var(--hl-navy); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.hl-utility .phone { color: var(--hl-navy); font-weight: 700; font-size: 16px; }

/* --- Main header row ---------------------------------------------------- */
.hl-main {
  background: #fff;
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--hl-border);
}
.hl-main .container {
  display: flex; align-items: center; gap: 20px;
  padding-top: 16px; padding-bottom: 16px;
}
.hl-logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.hl-logo .word {
  font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--hl-navy);
  display: inline-flex; align-items: center;
}
.hl-logo .word .door {
  display: inline-grid; place-items: center;
  width: 20px; height: 24px; margin: 0 1px;
  background: var(--hl-orange); border-radius: 3px; color: #fff; position: relative;
}
.hl-logo .word .door::before {
  content: ""; position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
}
.hl-logo .word .ru { color: var(--hl-navy); }
.hl-logo .tag { font-size: 11.5px; color: var(--hl-muted); margin-top: 5px; font-weight: 500; letter-spacing: .01em; }

.hl-catalog {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--hl-border); border-radius: 12px;
  padding: 12px 20px; font-weight: 600; color: var(--hl-navy); font-size: 15px;
  cursor: pointer; background: #fff; flex-shrink: 0; transition: border-color .15s;
}
.hl-catalog:hover { border-color: var(--hl-blue); }
.hl-catalog svg { width: 18px; height: 18px; }

.hl-search { flex: 1; display: flex; align-items: center; position: relative; min-width: 0; }
.hl-search input {
  width: 100%; height: 48px; border: 1.5px solid var(--hl-border);
  border-radius: 12px; padding: 0 110px 0 46px; font-size: 15px; color: #1f2932;
  font-family: inherit; outline: none; transition: border-color .15s;
}
.hl-search input:focus { border-color: var(--hl-blue); }
.hl-search input::placeholder { color: #9aa7b4; }
.hl-search .s-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--hl-muted);
}
.hl-search .s-btn {
  position: absolute; right: 5px; top: 5px; height: 38px; padding: 0 22px;
  background: var(--hl-navy); color: #fff; border: none; border-radius: 9px;
  font-weight: 600; font-size: 15px; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.hl-search .s-btn:hover { background: var(--hl-navy-deep); }

.hl-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hl-actions .act {
  width: 44px; height: 44px; border-radius: 50%; background: #f1f5f9;
  display: grid; place-items: center; color: var(--hl-navy); cursor: pointer;
  transition: background .15s; position: relative;
}
.hl-actions .act:hover { background: var(--hl-blue-soft); color: var(--hl-blue); }
.hl-actions .act svg { width: 20px; height: 20px; }
.hl-actions .act .dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--hl-orange); border: 2px solid #fff;
}

/* --- Category quick-nav strip ------------------------------------------- */
.hl-catnav { border-bottom: 1px solid var(--hl-border); background: #fff; }
.hl-catnav .container {
  display: flex; gap: 26px; align-items: center; overflow-x: auto;
  padding-top: 12px; padding-bottom: 12px; scrollbar-width: none;
}
.hl-catnav .container::-webkit-scrollbar { display: none; }
.hl-catnav a {
  white-space: nowrap; color: var(--hl-navy); font-weight: 500; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 7px;
}
.hl-catnav a:hover { color: var(--hl-blue); text-decoration: none; }
.hl-catnav a.bonus { color: var(--hl-orange); font-weight: 600; }
.hl-catnav a.bonus::before { content: "🕐"; }
.hl-catnav a.installment { color: #1b9e61; font-weight: 600; }
.hl-catnav a.installment::before { content: "💰"; }

/* --- Hero promo banner -------------------------------------------------- */
.hl-hero {
  background: none; padding: 28px 0 12px;
}
.hl-hero .banner {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #cdeafb 0%, #9fd4f7 55%, #7cc3f3 100%);
  border-radius: 22px; padding: 54px 56px; min-height: 280px;
  display: flex; flex-direction: column; justify-content: center;
}
.hl-hero h1 {
  font-size: 52px; line-height: 1.04; margin: 0 0 14px; letter-spacing: -0.025em;
  color: var(--hl-navy-deep); font-weight: 800; max-width: 560px;
}
.hl-hero h1 .big { font-size: 60px; display: block; }
.hl-hero .sub { font-size: 19px; color: #2a3a4a; margin: 0 0 26px; font-weight: 500; }
.hl-hero .cta {
  display: inline-block; background: var(--hl-navy); color: #fff;
  padding: 15px 40px; border-radius: 12px; font-weight: 700; font-size: 17px;
  border: none; cursor: pointer; align-self: flex-start; transition: background .15s;
}
.hl-hero .cta:hover { background: var(--hl-navy-deep); text-decoration: none; color: #fff; }
.hl-hero .until { margin: 20px 0 0; font-size: 14px; color: #3a4a5a; font-weight: 500; }
.hl-hero .clock {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ff9a4d 0%, var(--hl-orange) 70%);
  display: grid; place-items: center; font-size: 120px;
  box-shadow: 0 18px 40px -12px rgba(255,113,32,.5);
}
@media (max-width: 900px) { .hl-hero .clock { display: none; } }

/* --- "Хиты продаж" product grid ---------------------------------------- */
.hl-products { padding: 40px 0 16px; }
.hl-products h2 {
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px;
  color: var(--hl-navy-deep);
}
.hl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.hl-prod {
  background: #fff; border: 1px solid var(--hl-border); border-radius: 16px;
  padding: 16px; position: relative; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s; cursor: pointer;
}
.hl-prod:hover {
  box-shadow: 0 16px 32px -16px rgba(7,159,249,.35), 0 2px 8px rgba(15,23,42,.06);
  transform: translateY(-2px); text-decoration: none;
}
.hl-prod .tools { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.hl-prod .tool {
  width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9;
  display: grid; place-items: center; color: var(--hl-muted); transition: all .15s;
}
.hl-prod .tool:hover { background: var(--hl-blue-soft); color: var(--hl-blue); }
.hl-prod .tool svg { width: 17px; height: 17px; }
.hl-prod .ph {
  aspect-ratio: 1/1; border-radius: 12px; background: #f6f8fb;
  display: grid; place-items: center; font-size: 76px; margin-bottom: 14px;
}
.hl-prod .badge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  background: var(--hl-blue-soft); color: var(--hl-blue-deep);
  font-weight: 700; font-size: 13px; padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.hl-prod .badge b { background: var(--hl-blue); color: #fff; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.hl-prod .name { font-size: 14px; line-height: 1.35; color: #1f2932; margin: 0 0 10px; min-height: 38px; }
.hl-prod .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.hl-prod .price { font-weight: 800; font-size: 21px; color: var(--hl-navy-deep); letter-spacing: -0.01em; }
.hl-prod .price .cur { font-weight: 700; }
.hl-prod .cart {
  width: 42px; height: 42px; border-radius: 11px; background: var(--hl-blue);
  display: grid; place-items: center; color: #fff; transition: background .15s;
}
.hl-prod .cart:hover { background: var(--hl-blue-deep); }
.hl-prod .cart svg { width: 20px; height: 20px; }

/* --- Sections (ask cards) reuse shared classes but recolour accent ------- */
#examples { padding: 24px 0 8px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--hl-navy-deep); color: #9aa7b4; border-top: none; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .hl-actions .act:nth-child(n+3) { display: none; }
}
@media (max-width: 820px) {
  .hl-utility nav, .hl-utility .call { display: none; }
  .hl-catalog span { display: none; }
  .hl-hero h1 { font-size: 38px; } .hl-hero h1 .big { font-size: 44px; }
  .hl-hero .banner { padding: 36px 28px; min-height: 220px; }
}
@media (max-width: 560px) {
  .hl-search { order: 3; flex-basis: 100%; }
  .hl-main .container { flex-wrap: wrap; }
}