/* =====================================================
   SKLADEX.BG — design system
   Industrial commerce: white paper, ink plates, hazard yellow
   ===================================================== */

:root{
  --orange:      #FFC907;
  --orange-deep: #A88800;
  --orange-soft: #FFF6D6;
  --yellow:      #FFC907;
  --yellow-deep: #E5B200;

  --ink:         #0D0E11;
  --ink-2:       #14161B;
  --ink-3:       #1C1F26;
  --line-dark:   #2A2E37;

  --paper:       #FFFFFF;
  --paper-2:     #F4F5F7;
  --paper-3:     #E9EBEF;
  --line:        #E2E4E9;

  --txt:         #16181D;
  --txt-2:       #565A63;
  --txt-3:       #8B8F99;
  --txt-inv:     #F5F6F8;
  --txt-inv-2:   #A6AAB5;

  --font-display: "Montserrat", "Arial Black", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Consolas", monospace;

  --shadow-sm: 0 1px 2px rgba(13,14,17,.06), 0 2px 8px rgba(13,14,17,.05);
  --shadow-md: 0 2px 6px rgba(13,14,17,.07), 0 12px 28px -8px rgba(13,14,17,.14);
  --shadow-lg: 0 4px 12px rgba(13,14,17,.08), 0 28px 60px -16px rgba(13,14,17,.24);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --container: 1240px;
  --skew: -8deg;
  --unskew: 8deg;

  --ease-out: cubic-bezier(.22,.9,.32,1);
  --ease-spring: cubic-bezier(.34,1.45,.5,1);

  /* sticky site head — default (roomier) vs compact on scroll */
  --site-head-offset: 150px;
  --head-bar-h: 60px;
  --head-nav-h: 90px;
  --head-logo-fs: 1.34rem;
  --head-logo-py: 9px;
  --head-nav-py: 11px;
  --head-nav-fs: .97rem;
  --head-icon: 44px;
  --head-phone-ic: 42px;

  /* hero copy slots — sized from rack slide so machines never resize the block.
     rem units: the whole hero scales together with the root font on huge screens */
  --hero-pad-top: 3.5rem;      /* 56px */
  --hero-copy-h: 33.0625rem;   /* 529px — sum of the slots below */
  --hero-kicker-h: 1.25rem;    /* 20px */
  --hero-title-h: calc(var(--hero-main-h) + 1rem + var(--hero-accent-h));
  --hero-main-h: 5.875rem;     /* 94px */
  --hero-accent-h: 5.5625rem;  /* 89px */
  --hero-deal-h: 2.375rem;     /* 38px */
  --hero-sub-h: 4.8125rem;     /* 77px */
  --hero-cta-h: 3.75rem;       /* 60px */
  --hero-colors-h: 1.5rem;     /* 24px */
  --hero-usp-h: 5rem;          /* 80px */
  --hero-usp-item-h: 2.5rem;   /* 40px */
  --hero-usp-bottom: 3rem;     /* 48px */
  --hero-scroll-bottom: 12px;
}

/* big monitors: wider content column, then a gently larger type scale —
   everything rem-based (incl. the hero slots) grows in step */
@media (min-width:1720px){
  :root{ --container:1400px; }
}

/* ниски десктоп екрани (1280×720 / 1366×768 / 1440×900): компактни hero
   слотове, така че --hero-min (~570px) да се побира под шапката и рамката
   да пази пропорцията на снимката 2.25:1 — без празно горе, без бяла ивица
   вляво и без отрязана палетна количка (клиентски бележки) */
@media (min-width:981px) and (max-height:948px){
  :root{
    --hero-pad-top:1.5rem;
    --hero-main-h:4.2rem;
    --hero-accent-h:4rem;
    --hero-deal-h:2.2rem;
    --hero-sub-h:5.2rem;
    --hero-cta-h:3.4rem;
    --hero-colors-h:1.5rem;
    --hero-copy-h:27rem; /* сума на слотовете + отстоянията по-долу */
    --hero-usp-h:4.5rem;
    --hero-usp-item-h:2.4rem;
    --hero-usp-bottom:1.5rem;
  }
  .hero-title{ margin-bottom:16px; }
  .hero-title .ht-main{ font-size:clamp(2.8rem, 1rem + 3.4vw, 4.2rem); }
  .hero-title .ht-accent{
    font-size:clamp(1.9rem, .85rem + 2.2vw, 2.6rem);
    padding:4px 14px 8px;
    margin-top:12px;
  }
  .hero-deal{ margin-bottom:12px; }
  .hero-sub{ font-size:.95rem; margin-bottom:20px; }
  .hero-cta{ margin-bottom:20px; }
  .hero-usp{ padding:14px 6px; }
}
@media (min-width:1990px){
  html{ font-size:17px; }
}
@media (min-width:2450px){
  html{ font-size:18.5px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-anchor off: the sticky header animates its height on scroll;
   scroll anchoring would "compensate" by moving scrollY, re-crossing the
   shrink/expand thresholds and making the nav oscillate.
   overflow-x:clip: the off-canvas mobile drawer (and any decorative bleed)
   must never widen the layout viewport — phones zoom out and the page gets
   sideways scroll otherwise. clip (not hidden) keeps position:sticky alive. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-anchor:none; overflow-x:clip; }
body{
  font-family:var(--font-body);
  font-size:1rem; line-height:1.6;
  color:var(--txt);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  /* sticky footer: short pages (cart with one item, track, 404…) still fill
     the whole viewport instead of ending mid-screen */
  min-height:100svh;
  display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
s{ text-decoration-color:rgba(13,14,17,.45); }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- custom scrollbar ---------- */
html{ scrollbar-color:var(--yellow-deep) var(--paper-3); } /* Firefox */
::-webkit-scrollbar{ width:13px; height:13px; }
::-webkit-scrollbar-track{ background:var(--paper-3); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  border:3px solid var(--paper-3);
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
::-webkit-scrollbar-corner{ background:var(--paper-3); }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ---------- primitives ---------- */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:24px;
}

.ic{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ic.star{ fill:var(--yellow); stroke:var(--yellow); width:1em; height:1em; }

.section{ padding-block:96px; position:relative; }
.section-tight{ padding-block:48px; }
.section-alt{ background:var(--paper-2); }
.section-dark{ background:var(--ink); color:var(--txt-inv); }
section[id]{ scroll-margin-top:var(--site-head-offset); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.12;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h2{
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-size:clamp(2.1rem, 1.3rem + 3.1vw, 3.2rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:.96;
  color:var(--ink);
}
h2.on-dark{ color:var(--txt-inv); }

.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono);
  font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--orange-deep);
  margin-bottom:14px;
}
.kicker-light{ color:var(--orange); }
.kicker-dash{
  width:34px; height:3px; flex:none;
  background:var(--orange);
  transform:skewX(var(--skew));
  box-shadow:6px 0 0 -1px var(--yellow);
}

.section-head{ margin-bottom:48px; }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.section-note{
  font-family:var(--font-mono); font-size:.8rem;
  color:var(--txt-3); letter-spacing:.08em; text-transform:uppercase;
}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.95rem;
  color:var(--ink);
  border-bottom:2px solid var(--orange);
  padding-bottom:3px;
  transition:gap .25s var(--ease-out), color .25s;
}
.link-arrow:hover{ gap:14px; color:var(--orange-deep); }
.link-arrow-light{ color:var(--txt-inv); }
.link-arrow-light:hover{ color:var(--orange); }

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  padding:14px 26px;
  font-family:var(--font-display);
  font-weight:800; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.03em;
  transform:skewX(var(--skew));
  border-radius:var(--r-sm);
  transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
             background .22s, color .22s;
  /* no will-change here: keeping the button on a cached GPU layer makes the
     counter-skewed label rasterize soft (blurry text on some screens) */
}
.btn > span{
  display:inline-flex; align-items:center; gap:10px;
  transform:skewX(var(--unskew));
  white-space:nowrap;
}
.btn:active{ transform:skewX(var(--skew)) translateY(1px) scale(.99); }
.btn-lg{ padding:17px 32px; font-size:1rem; }
.btn-block{ width:100%; justify-content:center; }

.btn-primary{
  background:var(--yellow);
  color:var(--ink);
  box-shadow:0 2px 0 var(--yellow-deep);
}
.btn-primary:hover{
  transform:skewX(var(--skew)) translateY(-1px);
  background:var(--yellow-deep);
  box-shadow:0 3px 0 #C79B00;
}
.btn-dark{
  background:var(--ink);
  color:#fff;
  box-shadow:0 2px 0 #000;
}
.btn-dark:hover{
  transform:skewX(var(--skew)) translateY(-1px);
  background:var(--ink-3);
}
.btn-yellow{
  background:var(--yellow);
  color:var(--ink);
  box-shadow:0 2px 0 var(--yellow-deep);
}
.btn-yellow:hover{
  transform:skewX(var(--skew)) translateY(-1px);
  background:var(--yellow-deep);
}
.btn-ghost{
  color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32);
}
.btn-ghost:hover{
  box-shadow:inset 0 0 0 2px var(--orange);
  color:var(--orange);
  transform:skewX(var(--skew)) translateY(-2px);
}
.btn-ghost-dark{
  color:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(13,14,17,.25);
}
.btn-ghost-dark:hover{ box-shadow:inset 0 0 0 2px var(--ink); }

/* =====================================================
   SITE HEAD — topbar + header stick together on scroll
   ===================================================== */
.site-head{
  position:sticky; top:0; z-index:120;
  transition:box-shadow .3s var(--ease-out);
}
.site-head.is-scrolled{ box-shadow:var(--shadow-md); }

/* =====================================================
   TOPBAR — black utility bar with the site-wide search
   ===================================================== */
.topbar{
  background:var(--ink);
  color:var(--txt-inv-2);
  font-size:.9rem;
  border-bottom:1px solid var(--line-dark);
  /* overflow stays visible so the search dropdown can hang below the bar;
     headroom above one row in case items wrap on mid widths */
  overflow:visible;
  max-height:calc(var(--head-bar-h) * 2 + 16px);
  opacity:1;
  transition:max-height .32s var(--ease-out), opacity .24s, border-width .24s;
}
.site-head.is-scrolled .topbar{
  overflow:hidden;
  max-height:0;
  opacity:0;
  border-bottom-width:0;
  pointer-events:none;
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:var(--head-bar-h); padding-block:9px; flex-wrap:wrap;
}
.topbar-left,.topbar-right{ display:flex; align-items:center; gap:24px; }
.topbar-item{
  display:inline-flex; align-items:center; gap:9px;
  white-space:nowrap;
  transition:color .2s;
}
.topbar-item .ic{ width:18px; height:18px; color:var(--orange); }
.topbar-right .topbar-item .ic{ color:var(--yellow); }
a.topbar-item:hover{ color:#fff; }
.topbar-promo{
  color:var(--yellow);
  font-weight:600;
}
.topbar-promo .ic{ color:var(--yellow); }

/* --- search, living in the black bar --- */
.tb-search{
  position:relative;
  flex:1 1 240px;
  max-width:500px;
  display:flex; align-items:center; gap:10px;
  background:var(--ink-2);
  border:1.5px solid rgba(255,201,7,.45);
  border-radius:10px;
  padding:10px 16px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.tb-search:hover{ border-color:rgba(255,201,7,.7); }
.tb-search:focus-within{
  border-color:var(--yellow);
  background:var(--ink-3);
  box-shadow:0 0 0 3px rgba(255,201,7,.18);
}
.tb-search .search-ic{ width:17px; height:17px; flex:none; color:var(--yellow); }
.tb-search input{
  flex:1; min-width:0;
  border:0; outline:0;
  background:transparent;
  font:inherit; font-size:.93rem; font-weight:500;
  color:var(--txt-inv);
}
.tb-search input::placeholder{ color:#767B87; }
.tb-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* =====================================================
   HEADER
   ===================================================== */
.header{
  position:relative; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-in{
  display:flex; align-items:center; gap:32px;
  min-height:var(--head-nav-h);
  transition:min-height .32s var(--ease-out), gap .32s var(--ease-out);
}
.site-head.is-scrolled{
  --site-head-offset:72px;
  --head-nav-h:72px;
  --head-logo-fs:1.18rem;
  --head-logo-py:7px;
  --head-nav-py:8px;
  --head-nav-fs:.9rem;
  --head-icon:40px;
  --head-phone-ic:38px;
}
/* propagate the compact header height to PAGE scope: the value above only
   reaches descendants of .site-head, so sticky panels (instructions nav,
   product/cart summaries) and anchor scroll-margins elsewhere kept reading
   the expanded 150px and floated with a visible gap once the header shrank */
body:has(.site-head.is-scrolled){ --site-head-offset:72px; }

/* --- logo plate (from brand sheet) --- */
.logo{ display:inline-flex; flex:none; }
.logo-img{
  display:block;
  /* tracks the same vars the old CSS plate used, so the header shrink still animates.
     the file is pre-trimmed to the mark itself (2104x638), so it renders 1:1 with
     no object-fit crop and no transform zoom — that's what keeps it sharp */
  height:calc(var(--head-logo-fs) + var(--head-logo-py) * 2 + 14px);
  width:auto;
  transition:height .32s var(--ease-out);
}
.logo-img-footer{ height:52px; }
.logo-plate{
  position:relative;
  display:inline-block;
  background:var(--ink);
  padding:var(--head-logo-py) 16px calc(var(--head-logo-py) + 1px) 18px;
  transform:skewX(var(--skew));
  border-radius:3px;
  transition:padding .32s var(--ease-out);
}
.logo-plate::before{               /* orange corner bracket, top-left */
  content:"";
  position:absolute; top:-4px; left:-4px;
  width:34%; height:52%;
  border-top:3px solid var(--orange);
  border-left:3px solid var(--orange);
}
.logo-plate::after{                /* accent underline, bottom-right */
  content:"";
  position:absolute; bottom:-4px; right:-4px;
  width:56%; height:3px;
  background:var(--orange);
}
.logo-plate-yellow::before,
.logo-plate-yellow::after{ border-color:var(--yellow); background:var(--yellow); }
.logo-plate-yellow::before{ background:none; }
.logo-text{
  display:inline-block;
  transform:skewX(var(--unskew));
  font-family:var(--font-display);
  font-style:italic; font-weight:900;
  font-size:var(--head-logo-fs); line-height:1;
  letter-spacing:.01em;
  color:#fff;
  transition:font-size .32s var(--ease-out);
}
.logo-text b{ color:var(--orange); font-weight:900; }
.logo-plate-yellow .logo-text b{ color:var(--yellow); }
.logo-dot{ font-size:.72em; }

/* --- nav --- */
.nav{
  display:flex; align-items:center; gap:6px;
  margin-inline:auto;
}
.nav > a{
  position:relative;
  padding:var(--head-nav-py) 14px;
  font-weight:600; font-size:var(--head-nav-fs);
  color:var(--txt-2);
  transition:color .2s, padding .32s var(--ease-out), font-size .32s var(--ease-out);
}
.nav > a::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:4px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease-out);
}
.nav > a:hover{ color:var(--ink); }
.nav > a:hover::after{ transform:scaleX(1); }
.nav > a.is-active{ color:var(--ink); }
.nav > a.is-active::after{ transform:scaleX(1); }
.nav-mobile-extra{ display:none; }

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

/* --- account icon button --- */
.account-btn{
  width:var(--head-icon); height:var(--head-icon);
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  transition:border-color .2s, background .2s, width .32s var(--ease-out), height .32s var(--ease-out);
}
.account-btn:hover{
  border-color:var(--ink);
  background:var(--paper-2);
}
.account-btn .ic{ width:20px; height:20px; }
.account-btn.is-in{ border-color:var(--yellow-deep); background:var(--yellow); }

/* --- live search results (anchored to the topbar search) --- */
.search-drop{
  position:absolute;
  top:calc(100% + 9px); left:0; right:0;
  z-index:300;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:6px;
  color:var(--txt);
}
.search-drop button,
.search-drop a{
  display:flex; align-items:center; gap:13px;
  width:100%;
  text-align:left;
  padding:8px 11px;
  border-radius:8px;
  font-size:.9rem; font-weight:600;
  color:var(--ink);
  transition:background .15s;
}
.search-drop a > span:first-of-type{ flex:1; min-width:0; }
.search-drop .s-thumb{
  flex:none;
  width:44px; height:44px;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  mix-blend-mode:normal;
}
.search-drop .s-glyph{
  flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:var(--ink);
  border-radius:8px;
  color:var(--yellow);
}
.search-drop .s-glyph .ic{ width:20px; height:20px; }
.search-drop button:hover,
.search-drop a:hover{ background:var(--paper-2); }
.search-drop button small,
.search-drop a small{
  flex:none;
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--txt-3);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:99px;
  padding:3px 9px;
}
.search-drop .search-empty{
  padding:14px 13px;
  font-size:.88rem;
  color:var(--txt-2);
}
.header-phone{
  display:inline-flex; align-items:center; gap:11px;
}
.header-phone > .ic{
  width:var(--head-phone-ic); height:var(--head-phone-ic); padding:10px;
  color:var(--ink);
  background:var(--yellow);
  border-radius:50%;
  transition:width .32s var(--ease-out), height .32s var(--ease-out);
}
.header-phone-txt{ display:flex; flex-direction:column; line-height:1.2; }
.header-phone-txt em{
  font-style:normal; font-size:.7rem; font-weight:600;
  color:var(--txt-3);
  letter-spacing:.08em; text-transform:uppercase;
  max-height:1.2em;
  overflow:hidden;
  transition:max-height .24s, opacity .24s;
}
.site-head.is-scrolled .header-phone-txt em{
  max-height:0;
  opacity:0;
}
.header-phone-txt strong{
  font-family:var(--font-display);
  font-size:1.22rem; font-weight:800;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap;
  transition:font-size .32s var(--ease-out);
}
.site-head.is-scrolled .header-phone-txt strong{ font-size:1.08rem; }
.header-phone:hover > .ic{ background:var(--yellow-deep); }

/* icon-only phone button, mobile header */
.phone-mobile{
  display:none;
  width:var(--head-icon); height:var(--head-icon);
  place-items:center;
  background:var(--yellow);
  color:var(--ink);
  border-radius:50%;
  transition:width .32s var(--ease-out), height .32s var(--ease-out);
}
.phone-mobile .ic{ width:20px; height:20px; }

.cart-btn{
  position:relative;
  width:var(--head-icon); height:var(--head-icon);
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  transition:border-color .2s, background .2s, width .32s var(--ease-out), height .32s var(--ease-out);
}
.cart-btn:hover{ border-color:var(--ink); background:var(--paper-2); }
.cart-btn .ic{ width:20px; height:20px; }
.cart-badge{
  position:absolute; top:-7px; right:-7px;
  min-width:19px; height:19px;
  display:grid; place-items:center;
  padding-inline:5px;
  background:var(--yellow);
  color:var(--ink);
  font-size:.68rem; font-weight:700;
  border-radius:99px;
  border:2px solid #fff;
}
.cart-badge[hidden]{ display:none; }

.burger{
  display:none;
  width:var(--head-icon); height:var(--head-icon);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:width .32s var(--ease-out), height .32s var(--ease-out);
}
.burger span{
  width:20px; height:2px;
  background:var(--ink);
  transition:transform .3s var(--ease-out), opacity .2s;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================
   HERO — full-bleed photo, static copy, color crossfade
   ===================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:#F4F4F2;
  border-bottom:1px solid var(--line);
  /* the hero always fits the first viewport (клиентска бележка: USP лентата
     трябва да се вижда без скрол) — capped at 100svh minus the 150px expanded
     header. The photo NEVER crops regardless of the resulting frame aspect:
     .hero-bg-img uses object-fit:contain over a matching backdrop gradient, so
     the stacker mast / Ш·Д dimension labels stay in frame on every resolution.
     --hero-min = copy block + USP strip + paddings: the frame may shrink to fit
     short viewports but never below the content.
     (no aspect-ratio property here: combined with min-height it would transfer a
     min-WIDTH onto the box and push the hero wider than the viewport) */
  --hero-min:calc(var(--hero-pad-top) + var(--hero-copy-h) + var(--hero-usp-h) + var(--hero-usp-bottom) + 1.125rem);
  min-height:max(min(calc(100vw / 2.25), calc(100svh - 150px)), var(--hero-min));
  max-height:max(calc(100svh - 150px), var(--hero-min));
  /* flex (not height:100%) so .hero-in always stretches to the real hero height —
     percentages don't resolve against min-height-driven boxes */
  display:flex; flex-direction:column;
}
/* backdrop behind the contained photo: continues the studio wall (≈#FBFBFB down
   to the horizon ~58%) into the floor (≈#E9E9E9 → #E3E3E3), so the uncovered
   strip left of / above the photo reads as more of the same warehouse */
.hero-bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    #FAFAFA 0%, #FBFBFB 46%, #F4F4F3 58%,
    #ECECEB 66%, #E9E9E8 82%, #E3E3E2 100%);
}
.hero-bg-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* contain, pinned right-bottom: the subject (rack + dimension labels, stacker
     mast) is NEVER cropped at any viewport aspect; the floor stays grounded and
     any spare space opens on the copy side / above the ceiling */
  object-fit:contain;
  object-position:right bottom;
  /* fade the photo's left + top edges into the backdrop so the hand-off between
     image and gradient is invisible (the scrim whitens that zone anyway) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 72px),
                     linear-gradient(180deg, transparent 0, #000 72px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 72px),
             linear-gradient(180deg, transparent 0, #000 72px);
  mask-composite:intersect;
  opacity:0;
  transition:opacity 1.5s ease;
  /* prevent late-loaded slides from nudging layout */
  pointer-events:none;
}
.hero-bg-img.is-on{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.5) 36%,
    rgba(255,255,255,0) 60%);
}

.hero-in{
  position:relative; z-index:2;
  flex:1 0 auto;
  display:flex; flex-direction:column;
  /* center the copy in the zone above the USP strip: on tall/wide screens the
     spare height is split evenly, so the text never looks glued to the header */
  justify-content:center;
  align-items:stretch;
  width:100%;
  /* bottom padding reserves the USP strip zone so it can never cover the copy */
  padding-block:var(--hero-pad-top) calc(var(--hero-usp-bottom) + var(--hero-usp-h) + 1.125rem);
  /* full-bleed: content runs edge to edge, not locked to the container */
  max-width:none;
  padding-inline:clamp(24px, 4.5vw, 88px);
}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:40rem; /* 640px @16 — tracks the type scale on huge screens */
  margin-bottom:0;
  flex:0 0 auto;
  /* rack-slide baseline — copy block never grows when machines rotate in */
  min-height:var(--hero-copy-h);
  max-height:var(--hero-copy-h);
}
.hero-copy > .kicker{
  flex:none;
  min-height:var(--hero-kicker-h);
}

.hero-title{
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.012em;
  color:var(--ink);
  margin-bottom:22px;
  flex:none;
  min-height:var(--hero-title-h);
}
/* line 1 — the big claim, small connector word */
.hero-title .ht-main{
  font-size:clamp(3.3rem, 1.6rem + 5.8vw, 6.4rem);
  display:block;
  flex:none;
  min-height:var(--hero-main-h);
}
.hero-title .ht-main em{
  font-style:normal;
  font-size:.4em;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--txt-2);
  vertical-align:.3em;
}
/* line 2 — yellow price sticker, slightly tilted */
.hero-title .ht-accent{
  font-size:clamp(2.2rem, 1.15rem + 3.5vw, 4.1rem);
  background:var(--yellow);
  padding:5px 16px 9px;
  margin-top:16px;
  transform:rotate(-1.6deg);
  transform-origin:left center;
  box-shadow:5px 5px 0 var(--ink);
  display:inline-block;
  flex:none;
  min-height:var(--hero-accent-h);
  max-width:100%;
}
.hero-deal{
  font-size:1.08rem;
  color:var(--txt);
  margin-bottom:14px;
  flex:none;
  min-height:var(--hero-deal-h);
}
.hero-deal strong{
  font-family:var(--font-display);
  font-style:italic; font-weight:900;
  font-size:1.5rem;
  color:var(--ink);
}
.deal-bgn{
  display:inline-block;
  font-size:.86rem; font-weight:600;
  color:var(--txt-2);
  background:#fff;
  border:1px solid var(--line);
  border-radius:99px;
  padding:2px 12px;
  margin-inline:4px;
  vertical-align:2px;
}
.hero-sub{
  max-width:52ch;
  color:var(--txt-2);
  font-size:1rem;
  margin-bottom:26px;
  flex:none;
  min-height:var(--hero-sub-h);
}
.hero-cta{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px;
  flex:none;
  min-height:var(--hero-cta-h);
}
/* machine slides drop the secondary button — [hidden] must beat .btn's display */
.hero-cta .btn[hidden]{ display:none; }

.hero-colors{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.84rem; font-weight:600;
  color:var(--txt-2);
  flex:none;
  min-height:var(--hero-colors-h);
}
.hero-colors .chip{
  width:24px; height:24px; flex:none;
  padding:0;
  appearance:none;
  cursor:pointer;
  border-radius:50%;
  background:linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .3s, transform .3s;
}
.hero-colors .chip:first-of-type{ margin-left:5px; }
.hero-colors .chip:hover{ transform:scale(1.14); }
.hero-colors .chip:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
.hero-colors .chip.is-on{
  box-shadow:0 0 0 2px var(--ink);
  transform:scale(1.14);
}
.hero-colors .chip-ic{
  background:var(--ink);
  display:grid; place-items:center;
  color:var(--yellow);
}
.hero-colors .chip-ic .ic{ width:13px; height:13px; stroke-width:2.2; }
.hero-colors .chip-sep{
  width:1px; height:18px; flex:none;
  background:var(--line);
  margin-inline:3px;
}

/* --- USP strip (bottom of hero) --- */
.hero-usp{
  position:absolute;
  z-index:3;
  left:clamp(24px, 4.5vw, 88px);
  bottom:var(--hero-usp-bottom);
  margin-top:0;
  align-self:flex-start;
  width:fit-content;
  max-width:calc(100% - clamp(48px, 9vw, 176px));
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3, auto);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:20px 8px;
  min-height:var(--hero-usp-h);
}
.hero-usp li{
  display:flex; align-items:center; gap:13px;
  padding-inline:22px;
  border-left:1px solid var(--line);
  min-height:var(--hero-usp-item-h);
}
.hero-usp li:first-child{ border-left:0; }
.hero-usp li > div{
  min-height:calc(var(--hero-usp-item-h) - 8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-usp .ic{
  width:34px; height:34px; flex:none;
  color:var(--ink);
  stroke-width:1.7;
}
.hero-usp strong{
  display:block;
  font-size:.92rem; font-weight:800;
  color:var(--ink);
  line-height:1.25;
}
.hero-usp span{
  display:block;
  font-size:.8rem;
  color:var(--txt-2);
}

/* --- scroll-down cue (plain arrow, not a button) --- */
.hero-scroll{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:var(--hero-scroll-bottom);
  transform:translateX(-50%);
  margin-top:0;
  display:block;
  line-height:0;
  color:var(--ink);
  opacity:.85;
  animation:heroNudge 2.4s var(--ease-out) infinite;
}
.hero-scroll .ic{ width:28px; height:28px; }
.hero-scroll:hover{ opacity:1; animation-play-state:paused; transform:translateX(-50%); }
@keyframes heroNudge{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(7px); }
}

/* =====================================================
   CATEGORIES
   ===================================================== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:230px;
  gap:24px;
}
.cat-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cat-lg{ grid-column:span 2; grid-row:span 2; }
/* with 4 categories (магазинни + шкафове removed) the two side cards go full
   height so the mosaic stays a solid 2-row block with no holes */
.cat-tall{ grid-row:span 2; }

.cat-media{
  position:absolute; inset:0; z-index:-1;
  display:grid; place-items:center;
  padding:12% 14% 30%;
  background:#F1F1F0;
}
.cat-media img{
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(13,14,17,.18));
  transition:transform .45s var(--ease-out);
}
.cat-lg .cat-media{ padding:6% 10% 22%; }
.cat-card:hover .cat-media img{ transform:scale(1.05) translateY(-6px); }
.cat-photo .cat-media{ padding:0; }
.cat-photo .cat-media img{
  width:100%; height:100%;
  max-height:none;
  object-fit:cover;
  filter:none;
}
.cat-photo:hover .cat-media img{ transform:scale(1.04); }

.cat-body{
  position:relative;
  padding:52px 22px 20px;
  background:linear-gradient(180deg, transparent 0%, rgba(13,14,17,.82) 34%, rgba(13,14,17,.94) 100%);
  color:#fff;
}
.cat-body h3{
  font-size:1.25rem; font-weight:900; font-style:italic;
  text-transform:uppercase;
  margin-bottom:4px;
}
.cat-lg .cat-body h3{ font-size:1.7rem; }
.cat-body p{
  font-size:.85rem; color:rgba(255,255,255,.72);
  margin-bottom:12px;
  max-width:36ch;
}
.cat-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--yellow);
  transition:gap .25s var(--ease-out);
}
.cat-card:hover .cat-cta{ gap:14px; }

.cat-tag{
  position:absolute; top:18px; left:18px;
  background:var(--ink);
  color:var(--yellow);
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.08em;
  padding:7px 12px;
  border-radius:5px;
  transform:skewX(var(--skew));
}
.cat-badge{
  position:absolute; top:18px; right:18px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:900; font-style:italic; font-size:.9rem;
  padding:8px 14px;
  border-radius:5px;
  transform:skewX(var(--skew));
}

/* --- full-width banner card: the new machines category --- */
.cat-banner{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; justify-content:flex-start;
  gap:24px;
  background:var(--ink);
  border-color:var(--line-dark);
  color:#fff;
  overflow:hidden;
}
.cat-banner-copy{
  padding:30px 36px;
  max-width:60ch;
}
.cat-banner-tag{
  display:inline-block;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px;
  border-radius:5px;
  transform:skewX(var(--skew));
  margin-bottom:14px;
}
.cat-banner-copy h3{
  font-size:1.55rem; font-weight:900; font-style:italic;
  text-transform:uppercase;
  margin-bottom:6px;
}
.cat-banner-copy p{
  font-size:.92rem; color:rgba(255,255,255,.72);
  margin-bottom:14px;
}
.cat-banner-media{
  flex:1;
  align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  gap:36px;
  padding:16px 40px;
  min-width:0;
  background:#F3F3F2;
  clip-path:polygon(32px 0, 100% 0, 100% 100%, 0 100%);
}
.cat-banner-media img{
  max-height:190px;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .45s var(--ease-out);
}
.cat-banner:hover .cat-banner-media img{ transform:translateY(-6px); }

/* =====================================================
   PRODUCTS
   ===================================================== */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.prod-card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.prod-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.prod-media{
  position:relative;
  aspect-ratio:1/1;
  display:grid; place-items:center;
  background:#F3F3F2;
  padding:9%;
  overflow:hidden;
}
.prod-media img{
  max-height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .45s var(--ease-out);
}
.prod-card:hover .prod-media img{ transform:scale(1.06); }

/* studio shots (product-*.png etc.) sit on a huge gray backdrop — let the photo
   fill the tile and crop into the backdrop so the product itself reads bigger.
   machine renders are already tight crops, so they keep the default fit. */
.prod-media:has(img[src*="/product-"]),
.prod-media:has(img[src*="/cabinet-"]),
.prod-media:has(img[src*="/foldable-"]){ padding:0; }
.prod-media img[src*="/product-"],
.prod-media img[src*="/foldable-"]{
  width:100%; height:100%;
  max-height:none;
  object-fit:cover;
}
.prod-media img[src*="/product-"]{ transform:scale(1.16); }
.prod-card:hover .prod-media img[src*="/product-"]{ transform:scale(1.22); }
/* portrait shot on white — fills the tile height once the padding is gone */
.prod-media img[src*="/cabinet-"]{ height:100%; max-height:none; }

.badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-display);
  font-weight:900; font-style:italic; font-size:.82rem;
  padding:6px 12px;
  border-radius:5px;
  transform:skewX(var(--skew));
}
.badge-sale{ background:var(--yellow); color:var(--ink); }
.badge-hot{ background:var(--ink);   color:var(--yellow); }
.badge-new{ background:var(--yellow); color:var(--ink); }
.badge-out{ background:#3E434C; color:#fff; }

/* stock state line on cards */
.prod-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.8rem; font-weight:700;
  margin:-6px 0 12px;
}
.prod-stock i{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.prod-stock.is-in{ color:#1E9E4C; }
.prod-stock.is-out{ color:#D23A2E; }
.prod-stock.is-soon{ color:#C77700; }
.prod-out .prod-media img{ filter:grayscale(.7); opacity:.75; }
.prod-add.is-off,
.prod-add:disabled{
  background:var(--paper-2);
  color:var(--txt-3);
  cursor:not-allowed;
}
.prod-add.is-off:hover,
.prod-add:disabled:hover{
  background:var(--paper-2);
  color:var(--txt-3);
  transform:skewX(var(--skew));
}

/* stock pill on the product page */
.pd-stock{
  display:inline-flex; align-items:center; gap:9px;
  margin:12px 0 0;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.88rem; font-weight:700;
  background:var(--paper);
}
.pd-stock i{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:none; }
.pd-stock.is-in{ color:#1E9E4C; border-color:rgba(30,158,76,.35); background:rgba(30,158,76,.06); }
.pd-stock.is-out{ color:#D23A2E; border-color:rgba(210,58,46,.35); background:rgba(210,58,46,.06); }
.pd-stock.is-soon{ color:#C77700; border-color:rgba(199,119,0,.35); background:rgba(199,119,0,.07); }
.pd-buy .btn:disabled{ opacity:.45; cursor:not-allowed; }

.prod-body{
  display:flex; flex-direction:column; flex:1;
  padding:18px 20px 20px;
  border-top:1px solid var(--line);
}
.prod-cat{
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:7px;
}
.prod-title{
  font-family:var(--font-body);
  font-size:.99rem; font-weight:700; line-height:1.4;
  margin-bottom:6px;
}
.prod-spec{
  font-size:.84rem; color:var(--txt-2);
  margin-bottom:16px;
}
.prod-foot{
  margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.prod-price{ display:flex; flex-direction:column; line-height:1.25; }
.prod-price s{ font-size:.82rem; color:var(--txt-3); }
.prod-price strong{
  font-family:var(--font-display);
  font-size:1.3rem; font-weight:900;
  color:var(--ink);
}
.prod-price span{ font-size:.76rem; color:var(--txt-3); }
.prod-add{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  background:var(--ink);
  color:#fff;
  border-radius:var(--r-sm);
  transform:skewX(var(--skew));
  transition:background .25s, transform .25s var(--ease-spring), box-shadow .25s;
}
.prod-add .ic{ width:19px; height:19px; transform:skewX(var(--unskew)); }
@keyframes cart-wiggle{
  0%{ transform:skewX(var(--unskew)) translateX(0) rotate(0); }
  28%{ transform:skewX(var(--unskew)) translateX(-2.5px) rotate(-9deg); }
  62%{ transform:skewX(var(--unskew)) translateX(2.5px) rotate(8deg); }
  100%{ transform:skewX(var(--unskew)) translateX(0) rotate(0); }
}
.prod-add:hover{
  background:var(--yellow);
  color:var(--ink);
  transform:skewX(var(--skew)) translateY(-3px) scale(1.07);
  box-shadow:0 8px 18px rgba(13,14,17,.22), 0 2px 0 var(--yellow-deep);
}
.prod-add:hover .ic{ animation:cart-wiggle .5s var(--ease-out); }
.prod-add:active{ transform:skewX(var(--skew)) translateY(-1px) scale(1.02); }
.prod-more{
  margin-top:44px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.prod-more p{ font-size:.9rem; color:var(--txt-3); }

/* machine cards: icon spec strip instead of the plain text line */
.prod-machspecs{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--r-sm);
  margin:2px 0 10px;
  overflow:hidden;
}
.prod-machspecs span{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px 7px;
  font-size:.68rem; font-weight:700; line-height:1.15;
  color:var(--txt-2);
  text-align:center;
  background:var(--paper-2);
}
.prod-machspecs span + span{ border-left:1px solid var(--line); }
.prod-machspecs .ic{ width:17px; height:17px; color:var(--orange-deep); }
.prod-machspecs small{
  font-family:var(--font-mono);
  font-size:.54rem; font-weight:500;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--txt-3);
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* machine cards: drop the stock line a few px so it sits centered between the
   spec strip and the price (клиентска бележка — as on the rack cards) */
.prod-machspecs + .prod-stock{ margin-top:0; }

/* product page renders from JS — keep the placeholder skeleton invisible
   until pages.js fills the real data (prevents the "ПРОДУКТ / 0 €" flash) */
body[data-page="product"] main{ opacity:0; }
body[data-page="product"].pd-ready main{ opacity:1; transition:opacity .15s ease-out; }

/* profile orders: mini progress (направена → обработва се → пътува → доставена) */
.order-stage{
  display:flex; align-items:center; gap:0;
  margin:12px 0 2px;
}
.order-stage i{
  flex:none;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--paper-3);
  border:2px solid var(--line);
}
.order-stage b{
  flex:1; height:2px;
  background:var(--line);
  min-width:14px;
}
.order-stage i.is-on{ background:var(--yellow); border-color:var(--ink); }
.order-stage b.is-on{ background:var(--ink); }
/* надписите са ТОЧНО под точките (клиентска бележка): центровете на точките
   са на k·(100%−11px)/3 + 5.5px (11px точка, равни съединители) */
.order-stage-cap{
  position:relative;
  height:1.15em;
  font-family:var(--font-mono);
  font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:10px;
}
.order-stage-cap span{ position:absolute; top:0; white-space:nowrap; }
.order-stage-cap span:nth-child(1){ left:0; }
.order-stage-cap span:nth-child(2){ left:calc((100% - 11px) / 3 + 5.5px); transform:translateX(-50%); }
.order-stage-cap span:nth-child(3){ left:calc((100% - 11px) * 2 / 3 + 5.5px); transform:translateX(-50%); }
.order-stage-cap span:nth-child(4){ right:0; }
.order-stage-cap span.is-on{ color:var(--ink); font-weight:700; }

.section-dark .kicker-dash{ box-shadow:6px 0 0 -1px var(--yellow); }

/* =====================================================
   CONFIGURATOR — the dark beat in the page rhythm
   ===================================================== */
.conf-sec{
  background:var(--ink);
  color:var(--txt-inv);
  border-block:1px solid var(--line-dark);
}
.conf-sec h2{ color:var(--txt-inv); }
.conf-sec .kicker{ color:var(--yellow); }
.conf-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:64px;
  align-items:center;
}
.conf-sub{ color:var(--txt-inv-2); max-width:52ch; margin-bottom:34px; }
.conf-wrap h2{ margin-bottom:14px; }

.conf-form{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px 20px;
}
.conf-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-inv-2);
  margin-bottom:7px;
}
.conf-select{ position:relative; }
.conf-select::after{
  content:"";
  position:absolute; right:16px; top:50%;
  width:9px; height:9px;
  border-right:2px solid #8B8F99;
  border-bottom:2px solid #8B8F99;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.conf-select select{
  width:100%;
  appearance:none; -webkit-appearance:none;
  background:var(--ink-2);
  border:1.5px solid var(--line-dark);
  border-radius:var(--r-sm);
  padding:13px 42px 13px 16px;
  font-weight:600; font-size:.96rem;
  color:var(--txt-inv);
  transition:border-color .2s, box-shadow .2s;
  cursor:pointer;
}
.conf-select select:hover{ border-color:#4A505C; }
.conf-select select:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,201,7,.22);
}
.conf-select select option{ background:var(--ink-2); color:var(--txt-inv); }
.conf-submit{ grid-column:1 / -1; justify-content:center; margin-top:6px; }

.conf-result{
  margin-top:26px;
  background:var(--orange-soft);
  border:1.5px solid rgba(229,178,0,.55);
  border-radius:var(--r-md);
  padding:22px 24px;
  color:var(--txt);
  animation:confIn .45s var(--ease-out);
}
.conf-result h3{ color:var(--ink); }
@keyframes confIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.conf-result-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.conf-result-badge{
  display:inline-block;
  background:#1B8F4A; color:#fff;
  font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px;
  border-radius:99px;
}
.conf-result-eta{
  font-family:var(--font-mono);
  font-size:.75rem; color:var(--txt-2);
}
.conf-result h3{
  font-size:1.25rem; font-weight:900; font-style:italic;
  text-transform:uppercase;
}
.conf-result-body > p{ font-size:.9rem; color:var(--txt-2); margin-bottom:16px; }
.conf-result-in{
  display:flex; align-items:center; gap:20px;
}
.conf-result-media{
  /* bigger render, no white plate behind it — multiply blends the white
     product-shot background straight into the card (клиентска бележка) */
  flex:none;
  width:154px; height:154px;
  display:grid; place-items:center;
}
.conf-result-media img{
  max-height:100%;
  mix-blend-mode:multiply;
}
/* "няма точно такъв модел" state */
.conf-result.is-none .conf-result-head,
.conf-result.is-none .conf-result-in{ display:none; }
.conf-none p{ font-weight:800; font-size:1.02rem; margin-bottom:4px; }
.conf-none small{ display:block; color:var(--txt-2); font-size:.85rem; margin-bottom:16px; }
.conf-none-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.conf-result-body{ flex:1; min-width:0; }
.conf-result-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
@media (max-width:480px){
  .conf-result-in{ flex-direction:column; align-items:flex-start; }
}

.conf-visual{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 34px 24px;
  box-shadow:var(--shadow-md);
}
.conf-visual img{
  mix-blend-mode:multiply;
  margin-inline:auto;
  max-height:440px;
  border-radius:10px;
}
.conf-visual figcaption{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed var(--line);
  font-size:.84rem; color:var(--txt-2);
  text-align:center;
}

/* =====================================================
   BEFORE / AFTER
   ===================================================== */
.ba-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.ba-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.ba{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  cursor:col-resize;
  user-select:none;
  touch-action:pan-y;
}
.ba img{
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.ba-over{
  position:absolute; inset:0;
  width:var(--pos);
  overflow:hidden;
  border-right:3px solid #fff;
  box-shadow:6px 0 18px -6px rgba(0,0,0,.4);
}
.ba-over img{
  width:auto; height:100%;
  max-width:none;
  aspect-ratio:3/2;
}
.ba-label{
  position:absolute; top:12px;
  font-family:var(--font-mono);
  font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px;
  border-radius:4px;
  pointer-events:none;
}
.ba-label-l{ left:12px; background:rgba(13,14,17,.78); color:#fff; }
.ba-label-r{ right:12px; background:var(--yellow); color:var(--ink); }
.ba-handle{
  position:absolute; top:50%; left:var(--pos);
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  background:#fff;
  color:var(--ink);
  border-radius:50%;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  cursor:col-resize;
}
.ba-handle .ic{ width:18px; height:18px; }
.ba-card figcaption{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:16px 20px;
}
.ba-card figcaption strong{
  font-family:var(--font-display);
  font-weight:800; font-size:1rem;
}
.ba-card figcaption span{
  font-family:var(--font-mono);
  font-size:.74rem; color:var(--txt-3);
  text-align:right;
}

/* =====================================================
   TRUST — honest reasons to buy, no invented numbers
   (yellow band: the color beat between the dark sections)
   ===================================================== */
.trust-sec{ background:var(--yellow); }
.trust-sec .kicker{ color:rgba(13,14,17,.72); }
.trust-sec .kicker-dash{ background:var(--ink); box-shadow:6px 0 0 -1px var(--ink); }
.trust-sec .section-note{ color:rgba(13,14,17,.58); }
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.trust-tile{
  background:var(--paper);
  border:1px solid rgba(13,14,17,.16);
  border-radius:var(--r-lg);
  padding:28px 26px 30px;
  box-shadow:0 2px 0 rgba(13,14,17,.18);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.trust-tile:hover{ transform:translateY(-5px); box-shadow:0 8px 0 -3px rgba(13,14,17,.22); }
.trust-tile .ic{
  width:46px; height:46px;
  padding:11px;
  color:var(--yellow);
  background:var(--ink);
  border-radius:10px;
}
.trust-tile h3{
  font-size:1.05rem; font-weight:800;
  margin:18px 0 8px;
}
.trust-tile p{ font-size:.9rem; color:var(--txt-2); }

.trust-note{
  margin-top:36px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.92rem; font-weight:500; color:rgba(13,14,17,.78);
}
.trust-note .ic{ width:1.2em; height:1.2em; color:var(--ink); }
.trust-note a{
  font-weight:800; color:var(--ink);
  border-bottom:2px solid var(--ink);
  transition:opacity .2s;
}
.trust-note a:hover{ opacity:.7; }

/* =====================================================
   FAQ
   ===================================================== */
.faq-wrap{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:64px;
  align-items:start;
}
.faq-head{ position:sticky; top:calc(var(--site-head-offset) + 24px); }
.faq-head h2{ margin-bottom:16px; }
.faq-note{ color:var(--txt-2); max-width:34ch; }
.faq-note a{
  color:var(--ink); font-weight:700;
  border-bottom:2px solid var(--yellow);
  transition:border-color .2s;
}
.faq-note a:hover{ border-color:var(--orange); }

.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.faq-item[open]{
  border-color:rgba(229,178,0,.6);
  box-shadow:var(--shadow-sm);
}
.faq-q-ic{
  flex:none;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--ink);
  border-radius:9px;
  transform:skewX(var(--skew));
}
.faq-q-ic .ic{
  width:19px; height:19px;
  color:var(--yellow);
  transform:skewX(var(--unskew));
}
.faq-item[open] .faq-q-ic{ background:var(--yellow); }
.faq-item[open] .faq-q-ic .ic{ color:var(--ink); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  list-style:none;
  padding:20px 22px;
  font-weight:700; font-size:1.02rem;
  cursor:pointer;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--orange-deep); }
.faq-q{ flex:1; min-width:0; }
.faq-ic{
  position:relative;
  width:30px; height:30px; flex:none;
  background:var(--paper-2);
  border-radius:7px;
  transition:background .25s, transform .3s var(--ease-out);
}
.faq-ic::before,.faq-ic::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:12px; height:2px;
  background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease-out), background .25s;
}
.faq-ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-ic{ background:var(--yellow); transform:rotate(180deg); }
.faq-item[open] .faq-ic::before,
.faq-item[open] .faq-ic::after{ background:var(--ink); }
.faq-item[open] .faq-ic::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-body{ padding:0 22px 22px; }
.faq-body p{ color:var(--txt-2); font-size:.95rem; max-width:62ch; }

/* =====================================================
   CONTACT
   ===================================================== */
.contact-sec{ border-top:1px solid var(--line); }
.contact-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:start;
}
.contact-copy h2{ margin-bottom:18px; }
.contact-sub{
  color:var(--txt-2);
  max-width:46ch;
  margin-bottom:40px;
}
.contact-list{ display:flex; flex-direction:column; gap:22px; }
.contact-list li{ display:flex; align-items:flex-start; gap:16px; }
.contact-list .ic{
  width:44px; height:44px; padding:11px; flex:none;
  background:var(--yellow);
  border-radius:10px;
  color:var(--ink);
}
.contact-list em{
  display:block;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:2px;
}
.contact-list a, .contact-list li span{
  font-weight:600; font-size:1.05rem;
  color:var(--ink);
  border-bottom:2px solid transparent;
}
.contact-list a:hover{ border-bottom-color:var(--yellow); }
.contact-extra{
  display:block;
  font-size:.85rem !important;
  font-weight:400 !important;
  color:var(--txt-2) !important;
  margin-top:2px;
}
.contact-extra a{
  font-size:.85rem; font-weight:500;
  color:var(--txt-2);
}

.contact-form{
  background:var(--paper);
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:20px;
  padding:38px 36px;
  box-shadow:var(--shadow-md);
  position:relative;
}
.contact-form::before{
  content:"";
  position:absolute; top:0; left:28px; right:28px;
  height:5px;
  background:var(--orange);
  border-radius:0 0 6px 6px;
}
.contact-form h3{
  font-size:1.5rem; font-weight:900; font-style:italic;
  text-transform:uppercase;
  margin-bottom:24px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-field{ margin-bottom:16px; }
.form-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:7px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  background:var(--paper-2);
  border:1.5px solid transparent;
  border-radius:var(--r-sm);
  padding:13px 16px;
  font-size:.97rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
  resize:vertical;
}
.form-field select{
  min-width:0; max-width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23555B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.form-row > *{ min-width:0; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:#A2A6AF; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;
  background-color:#fff;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,122,0,.15);
}
.conf-select-light select{ background:var(--paper-2); border-color:transparent; color:var(--txt); }
.conf-select-light select:hover{ border-color:var(--line); }
.conf-select-light select:focus{ border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(255,201,7,.28); }
.conf-select-light::after{ border-color:var(--txt-2); }
.conf-select-light select option{ background:#fff; color:var(--txt); }
.form-note{
  margin-top:14px;
  font-size:.8rem; color:var(--txt-3);
  text-align:center;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer{
  background:#0A0B0D;
  color:var(--txt-inv-2);
  border-top:4px solid var(--orange);
  padding-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr 1fr;
  gap:48px;
  padding-bottom:56px;
}
.footer-brand p{
  margin-top:22px;
  font-size:.92rem;
  max-width:38ch;
}
.footer-social{ display:flex; gap:12px; margin-top:24px; }
.footer-social a{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--line-dark);
  border-radius:9px;
  color:var(--txt-inv-2);
  transition:all .25s;
}
.footer-social a:hover{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink);
  transform:translateY(-3px);
}
.footer-social .ic{ width:18px; height:18px; }

.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col h4{
  font-size:.8rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
  margin-bottom:8px;
  position:relative;
  padding-left:14px;
}
.footer-col h4::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:6px; height:6px;
  background:var(--orange);
  transform:translateY(-50%) rotate(45deg);
}
.footer-col a{ font-size:.92rem; transition:color .2s, padding-left .25s var(--ease-out); }
.footer-col a:hover{ color:var(--yellow); padding-left:5px; }
.footer-contact span{ font-size:.92rem; }
.footer-contact a{ font-weight:600; color:var(--txt-inv); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-block:24px;
  border-top:1px solid var(--line-dark);
  font-size:.82rem;
}
.footer-pay{ display:flex; gap:8px; flex-wrap:wrap; }
.footer-pay li{
  border:1px solid var(--line-dark);
  border-radius:5px;
  padding:5px 11px;
  font-size:.74rem;
  color:var(--txt-3);
}
.footer-rate{ color:var(--txt-3); }

/* =====================================================
   TOAST
   ===================================================== */
.toast{
  position:fixed;
  right:22px; bottom:22px;
  transform:translateY(150%);
  visibility:hidden;
  opacity:0;
  z-index:300;
  background:var(--ink);
  color:#fff;
  font-weight:600; font-size:.88rem;
  padding:13px 20px;
  border-radius:10px;
  border-left:4px solid var(--yellow);
  box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease-out), opacity .3s;
  max-width:min(88vw, 380px);
}
.toast.is-visible{ transform:translateY(0); visibility:visible; opacity:1; }

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:var(--reveal-delay, 0s);
}
html.js [data-reveal].revealed{
  opacity:1;
  transform:none;
}

/* hero copy fade while the slide (and its text) changes */
html.js .hero-copy.is-swapping [data-reveal],
html.js .hero-usp.is-swapping li div{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
  transition-delay:0s;
}
html.js .hero-usp li div{
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1280px){
  :root{
    --hero-usp-h: 8.4375rem;     /* 135px — 2×2 grid: two 44px rows + gap + padding */
    --hero-usp-item-h: 2.75rem;  /* 44px */
  }
  .hero-usp{ grid-template-columns:repeat(2, auto); gap:14px 0; padding-block:16px; }
  .hero-usp li:nth-child(odd){ border-left:0; }
}

@media (max-width:1060px){
  /* keep the black bar a single row: the search wins over the info links */
  .topbar-right{ display:none; }
}

/* 921–1200px: nav + icons don't leave room for the call pill */
@media (max-width:1200px) and (min-width:921px){
  .header-phone{ display:none; }
}

@media (max-width:1080px){
  .section{ padding-block:80px; }
  .cat-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px; }
  .cat-banner-media img{ max-height:165px; }
  .trust-grid{ grid-template-columns:repeat(2, 1fr); }
  .prod-grid{ grid-template-columns:repeat(3, 1fr); }
  .conf-wrap{ grid-template-columns:minmax(0,1fr); gap:48px; }
  .conf-visual{ max-width:560px; }
  .faq-wrap{ grid-template-columns:1fr; gap:40px; }
  .faq-head{ position:static; }
  .contact-in{ grid-template-columns:1fr; gap:56px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:920px){
  :root{
    --site-head-offset:132px;
    --head-nav-h:72px;
    --head-logo-fs:1.2rem;
    --hero-pad-top: 3.25rem;
    /* fonts shrink with vw in this band, so the title slots are em-based (set on
       the elements below) and the copy box is free-height: every slide fills the
       same slots, so the stack still never moves between slides */
    --hero-deal-h: 2.375rem;
    --hero-sub-h: 6.4em;         /* 4 lines — fits the longest slide sub at any width */
    --hero-cta-h: 3.75rem;
    --hero-colors-h: 1.5rem;
    --hero-usp-h: 12.6875rem;    /* 203px */
    --hero-usp-item-h: 3.25rem;  /* 52px */
    --hero-usp-bottom: 2.5rem;
    --hero-scroll-bottom: 8px;
  }
  .site-head.is-scrolled{
    --site-head-offset:64px;
    --head-nav-h:64px;
    --head-logo-fs:1.1rem;
    --head-icon:38px;
    --head-phone-ic:36px;
  }
  body:has(.site-head.is-scrolled){ --site-head-offset:64px; }
  .hero{
    min-height:max(calc(100vw / 2.25), 520px);
    max-height:none;
  }
  .hero-in{ padding-block:var(--hero-pad-top) 22px; padding-bottom:calc(46% + 14px); justify-content:flex-start; }
  /* fonts are vw-fluid here: title rows stay single-line (nowrap) so every slide
     is exactly as tall as the rack one without fixed pixel slots */
  .hero-copy{ margin-bottom:0; min-height:0; max-height:none; }
  .hero-title{ min-height:0; }
  .hero-title .ht-main{ min-height:0; white-space:nowrap; }
  .hero-title .ht-accent{ min-height:0; white-space:nowrap; }
  /* stacked layout: USP flows below the copy, above the photo band */
  .hero-usp{
    position:static;
    margin-top:18px;
    margin-bottom:0;
  }
  .hero-bg-img{
    top:auto; bottom:0; height:46%;
    /* mobile keeps the cover band — reset the desktop contain + edge mask */
    object-fit:cover; object-position:right bottom;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.86) 46%,
      rgba(255,255,255,.5) 64%,
      rgba(255,255,255,.08) 84%);
  }
  .prod-grid{ grid-template-columns:repeat(2, 1fr); }
  .ba-grid{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }

  /* mobile nav
     NB: .header's backdrop-filter would turn it into the containing block for
     this fixed drawer (trapping it inside the header box) — kill it on mobile
     and use a solid background instead */
  .header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#fff;
  }
  .nav{
    position:fixed;
    top:0; right:0; bottom:0;
    width:min(86vw, 380px);
    z-index:150;
    flex-direction:column; align-items:stretch; gap:4px;
    background:#fff;
    padding:96px 28px 40px;
    box-shadow:-30px 0 60px rgba(13,14,17,.2);
    transform:translateX(110%);
    visibility:hidden; /* closed drawer: unreachable + never widens the page */
    transition:transform .4s var(--ease-out), visibility 0s .4s;
    overflow-y:auto;
  }
  .nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .4s var(--ease-out);
  }
  .nav > a{
    font-size:1.15rem; font-weight:700;
    padding:14px 6px;
    border-bottom:1px solid var(--paper-3);
    color:var(--ink);
  }
  .nav > a::after{ display:none; }
  .nav-mobile-extra{
    display:flex; flex-direction:column; gap:14px;
    margin-top:28px;
  }
  .burger{ display:flex; position:relative; z-index:160; }
  .phone-mobile{ display:grid; }
}

@media (max-width:720px){
  .container{ padding-inline:18px; }
  .section{ padding-block:64px; }
  .topbar-right{ display:none; }
  .topbar-in{ gap:12px; }
  .topbar-left{ gap:14px; }
  .tb-search{ flex-basis:150px; max-width:none; padding:8px 12px; }
  .header-in{ gap:10px; }
  .header-actions{ gap:12px; }

  .cat-banner{ flex-direction:column; align-items:stretch; grid-row:span 2; }
  .cat-banner-copy{ padding:26px 22px 18px; max-width:none; }
  .cat-banner-media{
    padding:14px 22px;
    justify-content:center;
    clip-path:polygon(0 24px, 100% 0, 100% 100%, 0 100%);
  }
  .cat-banner-media img{ max-height:150px; }

  .hero-cta .btn{ flex:1; justify-content:center; }
  .hero-usp{
    align-self:stretch;
    width:auto;
    left:18px;
    right:18px;
    max-width:none;
    grid-template-columns:1fr;
    gap:0;
    padding:6px 16px;
  }
  .hero-usp li{
    border-left:0; border-top:1px solid var(--line);
    padding:12px 4px;
  }
  .hero-usp li:first-child{ border-top:0; }

  .cat-grid{ grid-template-columns:1fr; grid-auto-rows:240px; }
  .cat-lg{ grid-column:auto; grid-row:auto; }
  .cat-tall{ grid-row:auto; }
  .prod-grid{ grid-template-columns:1fr; }
  .fin-band{ padding:36px 24px; }
  .fin-tile{ max-width:none; width:100%; }
  .conf-form{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .contact-form{ padding:30px 22px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .trust-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
  :root{
    --hero-sub-h: 8em; /* 5 lines: the rack slide sub needs them at this width */
  }
  .logo-plate{ padding:7px 12px 8px 14px; }
  .logo-text{ font-size:1rem; }
  .cart-btn, .account-btn, .burger{ width:40px; height:40px; }
  /* phone stays reachable via the topbar + menu; icons row needs the room */
  .phone-mobile{ display:none; }
  /* one machine is enough on a narrow screen */
  .cat-banner-media img:first-child{ display:none; }
}

@media (max-width:400px){
  .btn{ padding-inline:20px; }
  .hero-title .ht-accent{ box-shadow:4px 4px 0 var(--ink); }
}

/* utility */
@media (max-width:920px){
  .hide-m{ display:none !important; }
}

/* =====================================================
   SUBPAGES — catalog, product, cart, checkout, auth, profile
   ===================================================== */

/* nav promo link */
.nav > a.nav-sale{ color:var(--orange-deep); font-weight:800; }
.nav > a.nav-sale:hover{ color:var(--ink); }

/* ---------- page head ---------- */
.page-head{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding-block:44px 40px;
}
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:14px;
}
.crumbs a{ color:var(--txt-2); transition:color .2s; }
.crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ color:var(--yellow-deep); }
.page-head h1{
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-size:clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem);
  font-weight:900;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.012em;
  color:var(--ink);
}
.page-head .page-sub{ margin-top:10px; color:var(--txt-2); max-width:64ch; }
.page-head-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.page-head-promo{
  background:var(--yellow);
  border-bottom-color:var(--yellow-deep);
}
.page-head-promo .crumbs,
.page-head-promo .crumbs a{ color:rgba(13,14,17,.62); }
.page-head-promo .crumbs .sep{ color:var(--ink); }
.page-head-promo .page-sub{ color:rgba(13,14,17,.78); }

.page-section{ padding-block:56px 96px; }

/* ---------- catalog toolbar ---------- */
.cat-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:34px;
}
.filter-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.fchip{
  padding:9px 18px;
  border:1.5px solid var(--line);
  border-radius:99px;
  font-size:.88rem; font-weight:700;
  color:var(--txt-2);
  background:var(--paper);
  transition:border-color .2s, background .2s, color .2s;
}
.fchip:hover{ border-color:var(--ink); color:var(--ink); }
.fchip.is-on{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--yellow);
}
.cat-tools{ display:flex; align-items:center; gap:16px; }
.cat-count{
  font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.06em;
  color:var(--txt-3);
  white-space:nowrap;
}
.sort-select{ position:relative; }
.sort-select::after{
  content:"";
  position:absolute; right:14px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--txt-2);
  border-bottom:2px solid var(--txt-2);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.sort-select select{
  appearance:none; -webkit-appearance:none;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 38px 10px 14px;
  font-size:.88rem; font-weight:600;
  color:var(--ink);
  cursor:pointer;
}
.sort-select select:hover{ border-color:var(--ink); }
.sort-select select:focus{ outline:none; border-color:var(--yellow-deep); box-shadow:0 0 0 3px rgba(255,201,7,.28); }
.cat-empty{
  padding:70px 20px;
  text-align:center;
  color:var(--txt-2);
  border:1.5px dashed var(--line);
  border-radius:var(--r-lg);
}
.prod-title a{ transition:color .2s; }
.prod-title a:hover{ color:var(--orange-deep); }
a.prod-media{ display:block; }

/* promo strip on promotions page */
.promo-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:34px;
  padding:16px 22px;
  background:var(--ink);
  color:var(--txt-inv);
  border-radius:var(--r-md);
}
.promo-strip .ic{ width:22px; height:22px; color:var(--yellow); }
.promo-strip strong{ color:var(--yellow); }
.promo-strip span{ font-size:.94rem; }

/* ---------- product detail ---------- */
.pd-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:44px;
  align-items:start;
}
.pd-media{
  position:relative;
  background:#fff; /* product renders are on white — seamless blend */
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:36px;
  display:grid; place-items:center;
  min-height:460px;
}
.pd-media img{ max-height:520px; width:auto; max-width:100%; object-fit:contain; }
.pd-media .badge{ position:absolute; top:16px; left:16px; }

/* product photo gallery (real photos under the render) */
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pd-thumb{
  width:78px; height:78px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper-2);
  padding:0; cursor:pointer;
  overflow:hidden; flex:none;
  transition:border-color .18s ease, transform .18s ease;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover{ transform:translateY(-2px); }
.pd-thumb.is-on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--yellow) inset; }

/* profile: address delete + inline add form */
.addr-card{ position:relative; }
.addr-del{
  position:absolute; right:12px; bottom:12px;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px;
  background:transparent; cursor:pointer; color:inherit;
  opacity:.55; transition:opacity .18s ease, border-color .18s ease;
}
.addr-del:hover{ opacity:1; border-color:#c33; color:#c33; }
.addr-del .ic{ width:16px; height:16px; }
.addr-form{
  grid-column:1 / -1;
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  padding:18px;
  display:grid; gap:14px;
}

/* checkout: consent checkboxes reuse the filter check style */
.co-fieldset .cf-check{ align-items:flex-start; }
.co-fieldset .cf-check a{ text-decoration:underline; }
.co-fieldset .cf-check input{ margin-top:3px; }
/* ---------- product page: buy panel ---------- */
.pd-panel{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:26px 28px 24px;
  position:sticky; top:calc(var(--site-head-offset) + 10px);
}
.pd-panel-head{
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.pd-kicker{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep);
  margin-bottom:10px;
}
.pd-kicker .pd-sku{
  color:var(--txt-3);
  letter-spacing:.05em;
  font-size:.62rem;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 9px;
  white-space:nowrap;
}
.pd-title{
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-size:clamp(1.7rem, 1.25rem + 1.6vw, 2.35rem);
  font-weight:900;
  text-transform:uppercase;
  line-height:.98;
  margin-bottom:10px;
}
.pd-spec-line{ color:var(--txt-2); font-size:.92rem; }
.pd-pricebox{
  background:var(--paper-2);
  border-left:4px solid var(--yellow);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:15px 18px 13px;
  margin-bottom:16px;
}
.pd-price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pd-price-row strong{
  font-family:var(--font-display);
  font-size:2.3rem; font-weight:900; font-style:italic;
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1;
}
.pd-price-row s{ color:var(--txt-3); font-size:1.05rem; }
.pd-save{
  font-family:var(--font-mono);
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  background:var(--ink); color:var(--yellow);
  padding:4px 9px;
  border-radius:999px;
}
.pd-bgn{ display:block; margin-top:6px; color:var(--txt-2); font-size:.87rem; }
.pd-specgrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-bottom:18px;
}
.pd-specgrid .pd-spec{
  display:flex; flex-direction:column; gap:3px;
  text-align:center;
  padding:10px 6px 9px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.pd-spec small{
  font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3);
}
.pd-spec b{ font-size:1rem; font-weight:800; color:var(--ink); white-space:nowrap; }
.pd-buy{ display:flex; gap:12px; align-items:stretch; margin-bottom:10px; }
.pd-buy .pd-add{ flex:1; justify-content:center; }
.pd-buynow{ margin-bottom:14px; }
.pd-pay{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.05em;
  color:var(--txt-3);
  margin-bottom:16px;
}
.pd-pay .ic{ width:15px; height:15px; flex:none; }
.qty{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--paper);
}
.qty button{
  width:46px; align-self:stretch;
  display:grid; place-items:center;
  font-size:1.15rem; font-weight:700;
  color:var(--txt-2);
  transition:background .15s, color .15s;
}
.qty button:hover{ background:var(--paper-2); color:var(--ink); }
.qty input{
  width:52px; text-align:center;
  border:0; outline:0;
  font-weight:700; font-size:1rem;
  color:var(--ink);
  background:transparent;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-usp{
  display:flex; flex-direction:column; gap:11px;
  background:var(--paper-2);
  border-radius:var(--r-md);
  padding:14px 16px;
}
.pd-usp li{ display:flex; align-items:flex-start; gap:11px; font-size:.88rem; color:var(--txt-2); }
.pd-usp .ic{ width:17px; height:17px; margin-top:2px; color:var(--yellow-deep); flex:none; }
.pd-usp b{ color:var(--ink); font-weight:700; }

/* mobile sticky buy bar */
.pd-mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:none;
  align-items:center; gap:14px;
  padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--paper);
  border-top:1.5px solid var(--ink);
  box-shadow:0 -12px 30px rgba(13,14,17,.16);
}
.pd-mob-price{ display:flex; flex-direction:column; min-width:0; }
.pd-mob-price strong{
  font-family:var(--font-display);
  font-style:italic; font-weight:900;
  font-size:1.3rem; line-height:1.05;
  white-space:nowrap;
}
.pd-mob-price span{ font-size:.7rem; color:var(--txt-2); white-space:nowrap; }
.pd-mobilebar .btn{ flex:1; justify-content:center; }

.pd-blocks{ margin-top:72px; display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:start; }
.pd-block h2{ font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin-bottom:16px; }
.pd-block p{ color:var(--txt-2); }
.pd-block + .pd-block{ margin-top:40px; }
.spec-table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.spec-table tr:not(:last-child) th,
.spec-table tr:not(:last-child) td{ border-bottom:1px solid var(--line); }
.spec-table tr:nth-child(odd){ background:var(--paper-2); }
.spec-table th{
  text-align:left;
  font-family:var(--font-mono);
  font-weight:500; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3);
  padding:12px 18px 12px 16px;
  white-space:nowrap;
  width:1%;
}
.spec-table td{ padding:12px 16px 12px 0; font-weight:600; color:var(--ink); font-size:.95rem; }
.related{ margin-top:88px; }
.related h2{ margin-bottom:30px; }

/* ---------- cart ---------- */
.cart-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:48px;
  align-items:start;
}
.cart-lines{ display:flex; flex-direction:column; }
.cart-line{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto auto auto;
  gap:20px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.cart-line:first-child{ border-top:1px solid var(--line); }
.cart-thumb{
  width:96px; height:96px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:grid; place-items:center;
}
/* снимката запълва цялата кутийка (снимките са на бял фон → cover не реже
   нищо съществено); радиусът се наследява, за да не стърчат ъглите */
.cart-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.cart-line-info h3{ font-size:.98rem; font-weight:700; line-height:1.35; margin-bottom:4px; }
.cart-line-info h3 a:hover{ color:var(--orange-deep); }
.cart-line-info p{
  font-family:var(--font-mono);
  font-size:.76rem; color:var(--txt-3);
}
.cart-line .qty{ transform:scale(.92); transform-origin:center; }
.cart-line-total{
  font-family:var(--font-display);
  font-weight:800; font-style:italic;
  white-space:nowrap;
  min-width:88px; text-align:right;
}
.cart-remove{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  color:var(--txt-3);
  transition:background .15s, color .15s;
}
.cart-remove:hover{ background:#FBE9E9; color:#B42318; }
.cart-remove .ic{ width:17px; height:17px; }

.sum-card{
  position:sticky; top:var(--site-head-offset);
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:26px;
}
.sum-card h2{ font-size:1.5rem; margin-bottom:20px; }
.sum-row{
  display:flex; justify-content:space-between; gap:14px;
  font-size:.95rem; color:var(--txt-2);
  padding-block:7px;
}
.sum-row b{ color:var(--ink); font-weight:700; }
.sum-row.sum-total{
  margin-top:12px; padding-top:16px;
  border-top:1.5px solid var(--ink);
  font-size:1.05rem; color:var(--ink); font-weight:700;
}
.sum-total strong{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:900; font-style:italic;
}
.sum-total .sum-bgn{
  display:block;
  font:400 .78rem/1.4 var(--font-body);
  color:var(--txt-3);
  text-align:right;
}
.sum-cta{ margin-top:18px; }
.sum-note{
  margin-top:14px;
  font-size:.8rem; color:var(--txt-3);
  text-align:center;
}
.sum-shipnote{
  margin-block:10px 4px;
  font-size:.8rem; color:var(--txt-3);
  line-height:1.45;
}
.cart-empty{
  text-align:center;
  padding:80px 20px;
  border:1.5px dashed var(--line);
  border-radius:var(--r-lg);
}
.cart-empty .ic{ width:54px; height:54px; margin:0 auto 18px; color:var(--txt-3); }
.cart-empty h2{ font-size:1.6rem; margin-bottom:10px; }
.cart-empty p{ color:var(--txt-2); margin-bottom:26px; }

/* ---------- checkout ---------- */
.co-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:48px;
  align-items:start;
}
.co-grid > *{ min-width:0; }
.co-fieldset{
  min-inline-size:0; /* fieldsets default to min-content and overflow their grid column */
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  margin-bottom:24px;
  background:var(--paper);
}
/* courier/office picker: narrow courier, wide office list;
   отлепен от блока с методите на доставка (клиентска бележка) */
#officePick{ margin-top:20px; }
#officePick .form-row{ grid-template-columns:minmax(0,170px) minmax(0,1fr); }
/* фактурните полета — по-въздушно (клиентска бележка: „да не е stacknato“) */
#invoiceFields{ margin-top:8px; }
#invoiceFields .form-field{ margin-bottom:20px; }
/* подсказка в дъното на падащия списък с улици — залепена, за да се
   вижда и когато списъкът скролва (10+ резултата) */
.city-drop .city-hint{
  position:sticky; bottom:-6px;
  margin:6px -6px -6px;
  padding:9px 14px;
  font-size:.76rem; color:var(--txt-3);
  border-top:1px solid var(--line);
  background:var(--paper-2);
  border-radius:0 0 10px 10px;
}
@media (max-width:720px){
  #officePick .form-row{ grid-template-columns:1fr; }
}
.co-fieldset legend{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:800; font-style:italic; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.01em;
  padding-inline:10px;
  margin-left:-10px;
}
.co-fieldset legend .co-step{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  background:var(--yellow);
  border-radius:50%;
  font:800 .85rem var(--font-display);
  font-style:normal;
}
.radio-cards{ display:grid; gap:12px; }
.radio-card{
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.radio-card:hover{ border-color:var(--ink); }
.radio-card input{ position:absolute; opacity:0; pointer-events:none; }
.radio-card .rc-dot{
  width:20px; height:20px; flex:none;
  margin-top:2px;
  border:2px solid var(--line);
  border-radius:50%;
  display:grid; place-items:center;
  transition:border-color .2s;
}
.radio-card .rc-dot::after{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--ink);
  transform:scale(0);
  transition:transform .2s var(--ease-spring);
}
.radio-card:has(input:checked){
  border-color:var(--ink);
  background:var(--orange-soft);
}
.radio-card:has(input:checked) .rc-dot{ border-color:var(--ink); }
.radio-card:has(input:checked) .rc-dot::after{ transform:scale(1); }
.radio-card b{ display:block; font-size:.95rem; }
.radio-card span{ font-size:.84rem; color:var(--txt-2); }
.radio-card .rc-price{
  margin-left:auto; flex:none;
  font-family:var(--font-mono);
  font-size:.82rem; font-weight:700;
  color:var(--ink);
}
.card-fields{
  margin-top:14px;
  padding:18px;
  background:var(--paper-2);
  border-radius:var(--r-md);
}
.card-fields .form-field input{ background:#fff; border-color:var(--line); }
.co-items{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
/* редовете са линкове към продукта (клиентска бележка) */
.co-item{
  display:flex; align-items:center; gap:14px;
  color:inherit; text-decoration:none;
  border-radius:10px;
  margin:-4px -6px; padding:4px 6px;
  transition:background .15s ease;
}
a.co-item:hover{ background:var(--paper-2, #f5f5f4); }
a.co-item:hover .co-item-name{ text-decoration:underline; }
.co-item .cart-thumb{ width:56px; height:56px; position:relative; }
.co-item .cart-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.co-item-qty{
  position:absolute; top:-7px; right:-7px;
  min-width:19px; height:19px;
  display:grid; place-items:center;
  padding-inline:5px;
  background:var(--ink);
  color:#fff;
  font-size:.66rem; font-weight:700;
  border-radius:99px;
}
.co-item-name{ flex:1; min-width:0; font-size:.86rem; font-weight:600; line-height:1.35; }
.co-item-price{ font-size:.88rem; font-weight:700; white-space:nowrap; }

/* ---------- auth ---------- */
.section-auth{
  display:flex;
  padding-block:24px 48px;
  /* static header vars (not --site-head-offset): the offset now shrinks on
     scroll and a scroll-driven min-height would make the page grow mid-scroll */
  min-height:calc(100vh - var(--head-bar-h) - var(--head-nav-h));
  min-height:calc(100dvh - var(--head-bar-h) - var(--head-nav-h));
}
.section-auth .container{ width:100%; margin-block:auto; }
.auth-wrap{
  max-width:460px;
  margin-inline:auto;
}
.auth-card{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:34px;
}
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper-2);
  border-radius:var(--r-sm);
  padding:5px;
  margin-bottom:28px;
}
.auth-tabs button{
  padding:11px;
  border-radius:5px;
  font-weight:700; font-size:.92rem;
  color:var(--txt-2);
  transition:background .2s, color .2s, box-shadow .2s;
}
.auth-tabs button.is-on{
  background:var(--ink);
  color:var(--yellow);
  box-shadow:var(--shadow-sm);
}
.auth-card h1{
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-size:2.1rem; font-weight:900;
  text-transform:uppercase; line-height:1;
  margin-bottom:6px;
}
.auth-sub{ color:var(--txt-2); font-size:.92rem; margin-bottom:24px; }
.auth-alt{
  margin-top:18px;
  text-align:center;
  font-size:.88rem; color:var(--txt-2);
}
.auth-alt button{
  font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--yellow);
}
.auth-note{
  margin-top:22px;
  padding:12px 16px;
  background:var(--orange-soft);
  border-radius:var(--r-sm);
  font-size:.8rem; color:var(--txt-2);
}
/* short screens: trim the auth card so it fits without scrolling
   (must come after the base auth rules — same specificity) */
@media (max-height:940px){
  .section-auth{ padding-block:14px 20px; }
  .auth-card{ padding:22px 26px; }
  .auth-card h1{ font-size:1.7rem; }
  .auth-tabs{ margin-bottom:16px; padding:4px; }
  .auth-tabs button{ padding:9px; }
  .auth-sub{ margin-bottom:14px; }
  .auth-alt{ margin-top:12px; }
  .auth-note{ margin-top:14px; padding:10px 14px; }
  .auth-card .form-field{ margin-bottom:11px; }
  .auth-card .form-field label{ margin-bottom:5px; }
  .auth-card .form-field input{ padding:10px 14px; }
  .auth-card .btn{ padding-block:12px; }
}
/* very short screens: drop the topbar and redundant headings so the card fits */
@media (max-height:800px){
  body:has(.section-auth) .topbar{ display:none; }
  .auth-note{ display:none; }
  .auth-card h1, .auth-sub{ display:none; }
  .section-auth{ padding-block:8px 12px; }
  .auth-tabs{ margin-bottom:12px; }
  .auth-tabs button{ padding:8px; }
  .auth-card{ padding:16px 24px; }
  .auth-card .form-field{ margin-bottom:8px; }
  .auth-card .btn{ padding-block:11px; }
  .auth-alt{ margin-top:10px; font-size:.84rem; }
}

/* ---------- profile ---------- */
.profile-grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.profile-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:28px;
  text-align:center;
  position:sticky; top:var(--site-head-offset);
}
.avatar{
  width:74px; height:74px;
  margin:0 auto 16px;
  display:grid; place-items:center;
  background:var(--yellow);
  border-radius:50%;
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:900; font-style:italic;
  color:var(--ink);
}
.profile-card h2{ font-size:1.35rem; margin-bottom:2px; }
.profile-card .p-mail{ color:var(--txt-2); font-size:.9rem; margin-bottom:4px; word-break:break-all; }
.profile-card .p-since{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:22px;
}
.orders h2{ margin-bottom:22px; }
.order-card{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px 22px;
  margin-bottom:16px;
  transition:border-color .2s, box-shadow .2s;
}
.order-card:hover{ border-color:var(--ink); box-shadow:var(--shadow-sm); }
.order-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:12px;
}
.order-num{ font-family:var(--font-mono); font-weight:700; font-size:.9rem; }
.order-date{ color:var(--txt-3); font-size:.84rem; }
.order-status{
  margin-left:auto;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--orange-soft);
  color:var(--orange-deep);
  border:1px solid var(--yellow-deep);
  padding:4px 12px;
  border-radius:99px;
}
.order-status.is-cancel{
  background:rgba(204,34,34,.07);
  color:#B01E1E;
  border-color:rgba(204,34,34,.4);
}
.order-items{ font-size:.9rem; color:var(--txt-2); }
.order-items li{ display:flex; justify-content:space-between; gap:14px; padding-block:3px; }
/* разбивка продукти + доставка (клиентска бележка: „защо сумата расте“) */
.order-items li.order-sub{
  font-size:.82rem; color:var(--txt-3);
  padding-block:2px;
}
.order-items li.order-sub:first-of-type{
  margin-top:6px; padding-top:8px;
  border-top:1px dashed var(--line);
}
.order-total{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
  font-weight:700; color:var(--ink);
}
.orders-empty{
  border:1.5px dashed var(--line);
  border-radius:var(--r-lg);
  padding:56px 20px;
  text-align:center;
  color:var(--txt-2);
}

/* ---------- success ---------- */
.success-wrap{
  max-width:560px;
  margin-inline:auto;
  text-align:center;
}
.success-mark{
  width:88px; height:88px;
  margin:0 auto 26px;
  display:grid; place-items:center;
  background:var(--yellow);
  border-radius:50%;
  box-shadow:6px 6px 0 var(--ink);
}
.success-mark .ic{ width:40px; height:40px; stroke-width:2.6; color:var(--ink); }
.success-wrap h1{
  font-family:"Sofia Sans Extra Condensed", var(--font-display), sans-serif;
  font-size:clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  font-weight:900; text-transform:uppercase; line-height:.96;
  margin-bottom:12px;
}
.success-num{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:8px 16px;
  margin-bottom:18px;
}
.success-wrap > p{ color:var(--txt-2); margin-bottom:30px; }
.success-steps{
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin-bottom:30px;
  display:flex; flex-direction:column; gap:16px;
}
.success-steps li{ display:flex; gap:14px; align-items:flex-start; font-size:.93rem; color:var(--txt-2); }
.success-steps .st-n{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  background:var(--ink); color:var(--yellow);
  border-radius:50%;
  font:800 .8rem var(--font-display);
}
.success-steps b{ color:var(--ink); }
.success-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- order tracking ---------- */
.track-wrap{ max-width:860px; margin-inline:auto; }
.track-form{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 26px 28px;
}
.track-form .form-field{ flex:1; min-width:230px; margin:0; }
.track-form input{ background:#fff; border-color:var(--line); }
.track-form .btn{ flex:none; }
.track-hint{
  margin-top:14px;
  font-size:.85rem; color:var(--txt-3);
}
.track-hint b{ color:var(--txt-2); font-family:var(--font-mono); font-weight:500; }
.track-error{
  margin-top:22px;
  background:#FDF1F1;
  border:1.5px solid #E8B4B4;
  border-radius:var(--r-md);
  padding:18px 22px;
  font-size:.94rem;
  color:#8A2B2B;
}

.track-card{
  margin-top:34px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.track-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:22px 28px;
  background:var(--ink);
  color:var(--txt-inv);
}
.track-head .track-num{
  font-family:var(--font-mono);
  font-weight:700; font-size:1.05rem;
  color:var(--yellow);
}
.track-head .track-date{ font-size:.85rem; color:var(--txt-inv-2); }
.track-status-pill{
  background:var(--yellow);
  color:var(--ink);
  font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em;
  padding:7px 14px;
  border-radius:99px;
}
.track-status-pill.is-cancel{ background:#C22; color:#fff; }

/* отказана поръчка — червен X вместо етапите */
.tl-cancel{
  text-align:center;
  margin:26px 0;
  padding:36px 18px;
  border:1.5px dashed rgba(204,34,34,.45);
  border-radius:var(--r-lg);
  background:rgba(204,34,34,.04);
}
.tl-cancel-x{
  width:58px; height:58px;
  margin:0 auto 14px;
  display:grid; place-items:center;
  background:#C22; color:#fff;
  border-radius:50%;
  box-shadow:0 8px 22px rgba(204,34,34,.35);
}
.tl-cancel-x .ic{ width:26px; height:26px; }
.tl-cancel h3{ font-size:1.3rem; margin-bottom:6px; color:#B01E1E; }
.tl-cancel p{ color:var(--txt-2); font-size:.92rem; }

/* --- status timeline --- */
.tl{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:38px 22px 30px;
}
.tl-step{
  position:relative;
  text-align:center;
  padding:0 8px;
}
.tl-step::before{                     /* connector to the previous node */
  content:"";
  position:absolute;
  top:23px; left:calc(-50% + 30px); right:calc(50% + 30px);
  height:4px;
  background:var(--paper-3);
  border-radius:2px;
}
.tl-step:first-child::before{ display:none; }
.tl-step.done::before{ background:var(--yellow); }
.tl-dot{
  width:48px; height:48px;
  margin:0 auto 12px;
  display:grid; place-items:center;
  background:var(--paper-2);
  border:2px solid var(--line);
  border-radius:50%;
  color:var(--txt-3);
  position:relative; z-index:1;
}
.tl-dot .ic{ width:20px; height:20px; }
.tl-step.done .tl-dot{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  color:var(--ink);
}
.tl-step.now .tl-dot{ box-shadow:0 0 0 6px rgba(255,201,7,.25); }
.tl-step h3{ font-size:.92rem; font-weight:800; color:var(--txt-3); }
.tl-step.done h3{ color:var(--ink); }
.tl-step p{ font-size:.78rem; color:var(--txt-3); margin-top:3px; }

.track-meta{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:18px 28px;
  border-top:1px solid var(--line);
  font-size:.88rem; color:var(--txt-2);
  background:var(--paper-2);
}
.track-meta b{ color:var(--ink); }
.track-meta .ic{ width:1.15em; height:1.15em; color:var(--yellow-deep); }
.track-meta span{ display:inline-flex; align-items:center; gap:8px; }

.track-items{ padding:20px 28px 24px; }
.track-items li{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.9rem;
  padding:9px 0;
  border-bottom:1px dashed var(--line);
}
.track-items li:last-child{ border-bottom:0; }
.track-items .ti-total{
  border-top:1.5px solid var(--ink);
  font-weight:800;
  margin-top:4px;
}

/* my orders quick list on the track page */
.track-mine{ margin-top:44px; }
.track-mine h2{ font-size:1.5rem; margin-bottom:18px; }
.order-track{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.84rem; font-weight:700;
  color:var(--ink);
  border-bottom:2px solid var(--yellow);
  padding-bottom:2px;
  transition:color .2s;
}
.order-track:hover{ color:var(--orange-deep); }
.order-track .ic{ width:1em; height:1em; }

/* ---------- subpage responsive ---------- */
@media (max-width:1080px){
  .pd-grid{ grid-template-columns:1fr; gap:36px; }
  .pd-media{ min-height:0; }
  .pd-media img{ max-height:420px; }
  .pd-panel{ position:static; }
  .pd-blocks{ grid-template-columns:1fr; gap:44px; margin-top:56px; }
  .cart-grid, .co-grid{ grid-template-columns:1fr; gap:40px; }
  .sum-card, .profile-card{ position:static; }
  .profile-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:720px){
  .page-head{ padding-block:32px 30px; }
  .page-section{ padding-block:40px 72px; }

  /* tracking timeline goes vertical */
  .tl{ grid-template-columns:1fr; gap:26px; padding:30px 24px 26px; }
  .tl-step{
    display:grid;
    grid-template-columns:48px 1fr;
    column-gap:16px;
    text-align:left;
    align-items:center;
    padding:0;
  }
  .tl-step::before{
    top:-24px; bottom:auto; right:auto;
    left:22px;
    width:4px; height:22px;
  }
  .tl-dot{ margin:0; grid-row:1 / span 2; align-self:start; }
  .tl-step h3{ align-self:end; }
  .tl-step p{ margin:0; align-self:start; }
  .track-form{ padding:20px 18px 22px; }
  .track-head, .track-meta, .track-items{ padding-inline:20px; }

  .cat-toolbar{ flex-direction:column; align-items:stretch; }
  .cat-tools{ justify-content:space-between; }
  .cart-line{
    grid-template-columns:72px minmax(0,1fr) auto;
    grid-template-areas:
      "thumb info remove"
      "thumb qty total";
    row-gap:12px;
  }
  .cart-thumb{ grid-area:thumb; width:72px; height:72px; }
  .cart-line-info{ grid-area:info; }
  .cart-line .qty{ grid-area:qty; justify-self:start; transform:none; }
  .cart-line-total{ grid-area:total; }
  .cart-remove{ grid-area:remove; justify-self:end; }
  .co-fieldset{ padding:20px 18px; }
  .auth-card{ padding:26px 22px; }
  .pd-panel{ padding:22px 20px 20px; }
  .pd-buy .btn{ flex:1; justify-content:center; }
  .related .prod-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:920px){
  body[data-page="product"].has-buybar{ padding-bottom:74px; }
  .pd-mobilebar:not([hidden]){ display:flex; }
}

@media (max-width:480px){
  .related .prod-grid{ grid-template-columns:1fr; }
  .radio-card .rc-price{ display:none; }
  .pd-specgrid{ grid-template-columns:repeat(2, 1fr); }
}

/* =====================================================
   CATALOG FILTER SIDEBAR
   ===================================================== */
.cat-layout{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:36px;
  align-items:start;
}
.cat-side{
  position:sticky; top:var(--site-head-offset);
  display:flex; flex-direction:column; gap:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:6px 20px;
  box-shadow:var(--shadow-sm);
}
.cf-group{
  padding:18px 0;
  border-bottom:1px dashed var(--line);
}
.cf-group:last-child{ border-bottom:0; }
.cf-group > h3{
  font-family:var(--font-mono);
  font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:13px;
}
.cf-check{
  display:flex; align-items:center; gap:10px;
  padding:5px 0;
  font-size:.92rem; font-weight:600;
  color:var(--txt-2);
  cursor:pointer;
  user-select:none;
  transition:color .15s;
}
.cf-check:hover{ color:var(--ink); }
.cf-check input{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; flex:none;
  border:2px solid #C9C9C4;
  border-radius:5px;
  background:#fff;
  display:grid; place-items:center;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.cf-check input::after{
  content:"";
  width:10px; height:10px;
  background:var(--ink);
  clip-path:polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 2%, 39% 70%);
  transform:scale(0);
  transition:transform .15s var(--ease-spring);
}
.cf-check input:checked{ background:var(--yellow); border-color:var(--yellow-deep); }
.cf-check input:checked::after{ transform:scale(1); }
.cf-check small{ margin-left:auto; color:var(--txt-3); font-weight:500; }

/* dual price slider */
.cf-price-vals{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.82rem; font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.cf-range{
  position:relative;
  height:24px;
}
.cf-range .cf-track{
  position:absolute; left:0; right:0; top:50%;
  height:5px; transform:translateY(-50%);
  background:var(--paper-3);
  border-radius:3px;
}
.cf-range .cf-fill{
  position:absolute; top:50%;
  height:5px; transform:translateY(-50%);
  background:var(--yellow);
  border-radius:3px;
}
.cf-range input[type="range"]{
  position:absolute; inset:0;
  width:100%;
  appearance:none; -webkit-appearance:none;
  background:none;
  pointer-events:none;
  margin:0;
}
.cf-range input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px;
  border-radius:50%;
  background:var(--ink);
  border:3px solid var(--yellow);
  cursor:grab;
  pointer-events:auto;
  transition:transform .15s;
}
.cf-range input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.cf-range input[type="range"]::-moz-range-thumb{
  width:13px; height:13px;
  border-radius:50%;
  background:var(--ink);
  border:3px solid var(--yellow);
  cursor:grab;
  pointer-events:auto;
}
.cf-reset{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.84rem; font-weight:700;
  color:var(--txt-3);
  padding:4px 0;
  transition:color .2s;
}
.cf-reset:hover{ color:var(--ink); }
.cf-reset .ic{ width:1em; height:1em; }

.cat-side-toggle{ display:none; }
.prod-grid .cat-empty{ grid-column:1 / -1; }

@media (min-width:1081px){
  .cat-layout .prod-grid{ grid-template-columns:repeat(3, 1fr); }
}
/* wide desktop: 4 cards per row so the tiles don't look oversized */
@media (min-width:1240px){
  .cat-layout .prod-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width:1280px) and (min-width:1081px){
  .cat-layout .prod-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:1080px){
  .cat-layout{ grid-template-columns:1fr; gap:0; }
  .cat-side{
    position:static;
    margin-bottom:22px;
    display:none;
  }
  .cat-side.is-open{ display:flex; }
  .cat-side-toggle{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:var(--r-sm);
    padding:11px 18px;
    font-weight:700; font-size:.92rem;
    margin-bottom:18px;
    cursor:pointer;
  }
  .cat-side-toggle .ic{ width:17px; height:17px; }
  .cat-side-toggle[aria-expanded="true"]{ background:var(--yellow); border-color:var(--yellow-deep); }
}

/* =====================================================
   FAVORITES (heart on cards + profile grid)
   ===================================================== */
.prod-fav{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  color:#B9B9B3;
  box-shadow:var(--shadow-sm);
  transition:color .2s, transform .2s var(--ease-spring), border-color .2s;
}
.prod-fav .ic{ width:18px; height:18px; }
.prod-fav:hover{ color:#E0475B; transform:scale(1.1); }
.prod-fav.is-fav{ color:#E0475B; border-color:#F3C1C8; }
.prod-fav.is-fav .ic{ fill:currentColor; }

/* =====================================================
   TRACK — order details block + item thumbs
   ===================================================== */
.track-info{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.track-info > div{
  background:var(--paper);
  padding:16px 22px;
}
.track-info em{
  display:flex; align-items:center; gap:7px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:5px;
}
.track-info em .ic{ width:14px; height:14px; color:var(--yellow-deep); }
.track-info b{ font-size:.95rem; font-weight:700; color:var(--ink); }
.track-info b small{ display:block; font-size:.8rem; font-weight:500; color:var(--txt-3); }

.track-items li{ align-items:center; }
.ti-prod{
  display:flex; align-items:center; gap:13px;
  min-width:0;
}
.ti-thumb{
  flex:none;
  width:52px; height:52px;
  object-fit:cover;
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
}
.ti-prod a{
  font-weight:600; color:var(--ink);
  transition:color .2s;
}
.ti-prod a:hover{ color:var(--orange-deep); }
.ti-prod small{ display:block; color:var(--txt-3); margin-top:2px; }

/* =====================================================
   PROFILE 2.0 — tiles + panels
   ===================================================== */
.pf-tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:34px;
}
.pf-tile{
  display:flex; align-items:center; gap:14px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 18px;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.pf-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pf-tile.is-on{ border-color:var(--ink); box-shadow:var(--shadow-sm); }
.pf-tile-ic{
  flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:var(--paper-2);
  border-radius:11px;
  transform:skewX(var(--skew));
  transition:background .2s;
}
.pf-tile-ic .ic{ width:20px; height:20px; transform:skewX(var(--unskew)); color:var(--ink); }
.pf-tile.is-on .pf-tile-ic{ background:var(--yellow); }
.pf-tile b{ display:block; font-size:.95rem; font-weight:800; }
.pf-tile small{ display:block; font-size:.78rem; color:var(--txt-3); margin-top:1px; }

.pf-panel{ animation:confIn .35s var(--ease-out); }
.pf-panel h2{ margin-bottom:18px; }
.pf-panel > p.pf-empty{
  background:var(--paper-2);
  border:1px dashed var(--line);
  border-radius:var(--r-md);
  padding:26px;
  color:var(--txt-2);
  font-size:.95rem;
}
.pf-empty a{ font-weight:700; color:var(--ink); border-bottom:2px solid var(--yellow); }

/* addresses */
.addr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:16px;
}
.addr-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
}
.addr-card.is-main{ border-color:var(--yellow-deep); }
.addr-badge{
  position:absolute; top:14px; right:14px;
  background:var(--yellow);
  font-size:.66rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px;
  border-radius:99px;
}
.addr-card h3{ font-size:1rem; font-weight:800; margin-bottom:6px; padding-right:74px; }
.addr-card p{ font-size:.88rem; color:var(--txt-2); line-height:1.55; }
.addr-card .addr-phone{
  display:block;
  font-family:var(--font-mono); font-size:.82rem;
  color:var(--txt-3);
  margin-top:8px;
}
.addr-add{
  display:grid; place-items:center; gap:6px;
  min-height:130px;
  border:2px dashed var(--line);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--txt-3);
  font:inherit; font-size:.9rem; font-weight:700;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.addr-add:hover{ border-color:var(--yellow-deep); color:var(--ink); background:var(--orange-soft); }
.addr-add .ic{ width:22px; height:22px; }

/* invoices */
.inv-table{
  width:100%;
  border-collapse:collapse;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  font-size:.9rem;
}
.inv-table th{
  text-align:left;
  font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3);
  background:var(--paper-2);
  padding:12px 18px;
  border-bottom:1px solid var(--line);
}
.inv-table td{
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  color:var(--txt-2);
}
.inv-table tr:last-child td{ border-bottom:0; }
.inv-table .inv-num{ font-family:var(--font-mono); font-weight:700; color:var(--ink); }
.inv-dl{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:.84rem;
  color:var(--ink);
  border-bottom:2px solid var(--yellow);
  padding-bottom:1px;
  transition:color .2s;
}
.inv-dl:hover{ color:var(--orange-deep); }
.inv-dl .ic{ width:1em; height:1em; }

/* settings — profile data rows + social linking (Ozone-style) */
.set-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:22px 26px;
  margin-bottom:18px;
}
.set-card > h3{
  font-size:1.05rem; font-weight:800;
  margin-bottom:6px;
}
.set-note{ font-size:.88rem; color:var(--txt-2); margin-bottom:16px; max-width:56ch; }
.set-rows{ margin-top:10px; }
.set-row{
  display:flex; align-items:center; gap:16px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.set-row:last-child{ border-bottom:0; }
.set-row > .ic{
  width:20px; height:20px; flex:none;
  color:var(--txt-3);
}
.set-val{
  flex:1; min-width:0;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.set-val em{
  font-style:normal;
  font-size:.85rem; font-weight:600;
  color:var(--txt-3);
}
.set-val b{
  font-weight:700; color:var(--ink);
  word-break:break-word;
}
.set-val input{
  flex:1;
  min-width:min(240px, 100%);
  border:1.5px solid var(--yellow-deep);
  border-radius:var(--r-sm);
  padding:8px 12px;
  font-size:.95rem;
  background:#fff;
  outline:none;
}
.set-val input:focus{ box-shadow:0 0 0 3px rgba(255,201,7,.25); }
.set-edit{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.84rem; font-weight:700;
  color:var(--txt-2);
  background:var(--paper);
  transition:border-color .2s, color .2s, background .2s;
}
.set-edit:hover{ border-color:var(--ink); color:var(--ink); }
.set-edit .ic{ width:14px; height:14px; }
.set-row.is-editing .set-edit{
  background:var(--yellow);
  border-color:var(--yellow-deep);
  color:var(--ink);
}
.set-social{ display:flex; flex-wrap:wrap; gap:12px; }
.soc-btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 18px 9px 10px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper);
  font-size:.88rem; font-weight:700;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.soc-btn:hover{ border-color:var(--ink); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.soc-ic{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
}
.soc-ic svg{ width:18px; height:18px; }
.soc-google{ background:#fff; border:1px solid var(--line); }
.soc-fb{ background:#1877F2; }
.soc-apple{ background:#0D0E11; }
.soc-btn.is-linked{ border-color:var(--yellow-deep); background:var(--orange-soft); }
.set-linked{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:.88rem;
}
.set-linked p{ color:var(--txt-2); margin-bottom:6px; }
.set-linked b{ color:var(--ink); }
.set-unlink{
  font-size:.84rem; font-weight:700;
  color:var(--ink);
  border-bottom:2px solid var(--yellow);
  padding-bottom:1px;
  transition:color .2s;
}
.set-unlink:hover{ color:var(--orange-deep); }

@media (max-width:560px){
  .set-card{ padding:18px 16px; }
  .set-row{ flex-wrap:wrap; gap:10px 12px; }
  .set-row > .ic{ display:none; }
  .set-val{ flex-basis:100%; }
  .set-edit{ margin-left:auto; }
}

/* returns */
.ret-steps{
  counter-reset:ret;
  display:grid; gap:14px;
  margin-bottom:24px;
}
.ret-steps li{
  position:relative;
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px 20px;
}
.ret-steps li::before{
  counter-increment:ret;
  content:counter(ret);
  flex:none;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--yellow);
  border-radius:9px;
  font-weight:900; font-size:1rem;
  transform:skewX(var(--skew));
}
.ret-steps b{ display:block; margin-bottom:3px; }
.ret-steps p{ font-size:.88rem; color:var(--txt-2); }

@media (max-width:900px){
  .pf-tiles{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .pf-tiles{ grid-template-columns:1fr; gap:10px; }
  .pf-tile{ padding:13px 15px; }
  .inv-table th:nth-child(3), .inv-table td:nth-child(3){ display:none; }
}

/* =====================================================
   LEGAL PAGES
   ===================================================== */
.legal-wrap{
  max-width:820px;
  margin-inline:auto;
}
.legal-updated{
  font-family:var(--font-mono);
  font-size:.78rem; color:var(--txt-3);
  margin-bottom:34px;
}
.legal-body h2{
  font-size:1.35rem;
  margin:40px 0 14px;
  padding-top:8px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{
  font-size:.97rem;
  color:var(--txt-2);
  line-height:1.75;
  margin-bottom:12px;
}
.legal-body ul, .legal-body ol{
  padding-left:22px;
  margin-bottom:16px;
}
.legal-body ul li{ list-style:square; margin-bottom:7px; }
.legal-body ol li{ list-style:decimal; margin-bottom:7px; }
.legal-body ul li::marker{ color:var(--yellow-deep); }
.legal-body a{ color:var(--ink); font-weight:600; border-bottom:2px solid var(--yellow); }
.legal-body strong{ color:var(--ink); }
.legal-note{
  background:var(--orange-soft);
  border:1.5px solid rgba(229,178,0,.5);
  border-radius:var(--r-md);
  padding:18px 22px;
  margin:24px 0;
}
.legal-note p{ margin:0; }
.legal-toc{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px 24px;
  margin-bottom:36px;
}
.legal-toc h2{ font-size:.95rem; margin:0 0 10px; }
.legal-toc ol{ padding-left:20px; margin:0; }
.legal-toc li{ list-style:decimal; margin-bottom:4px; font-size:.9rem; }
.legal-toc a{ border-bottom:0; color:var(--txt-2); font-weight:600; }
.legal-toc a:hover{ color:var(--ink); }
/* заглавията „ЧЛ. N. …“ в новите ОУ идват от базата като <strong id="chl-N">:
   правим ги истински заглавия + отстъп за котвите от „Съдържание“ */
.legal-body strong[id]{
  display:block;
  margin:30px 0 10px;
  font-size:1.08rem;
  color:var(--ink);
  scroll-margin-top:calc(var(--site-head-offset, 96px) + 16px);
}
/* секциите на документа („1. ОБЩИ ПОЛОЖЕНИЯ“…) — ниво над членовете */
.legal-body strong[id^="sec-"]{
  font-size:1.32rem;
  margin:44px 0 14px;
  padding-top:6px;
  border-top:1px solid var(--line);
}
.legal-body strong[id="sec-1"]{ border-top:0; margin-top:8px; padding-top:0; }

/* онлайн отказ от договор (returns.html) */
.wd-card{
  background:#fff;
  border:2px solid var(--yellow);
  border-radius:var(--r-md);
  padding:28px 26px;
  margin-bottom:36px;
  box-shadow:var(--shadow-1, 0 8px 26px rgba(13,14,17,.07));
}
.wd-card > h2{ margin:0 0 8px; font-size:1.3rem; }
.wd-card > p{ margin:0 0 20px; color:var(--txt-2); }
.wd-confirm{
  background:var(--orange-soft);
  border:1.5px solid rgba(229,178,0,.5);
  border-radius:var(--r-sm);
  padding:14px 18px;
  margin-bottom:16px;
}
.wd-confirm p{ margin:0; }
.wd-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.wd-done h3{ margin:0 0 10px; }
.wd-done p{ margin:0 0 10px; color:var(--txt-2); }
.wd-std p{ margin:0 0 8px; }
.wd-std p:last-child{ margin-bottom:0; }

/* footer legal links */
.footer-legal{
  display:flex; flex-wrap:wrap; gap:6px 18px;
}
.footer-legal a{
  font-size:.8rem; color:var(--txt-inv-2);
  transition:color .2s;
}
.footer-legal a:hover{ color:var(--yellow); }

/* auth: divider + Google button */
.auth-or{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 14px;
  color:var(--txt-3);
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.auth-or::before, .auth-or::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.auth-google{ justify-content:center; }
.auth-google .ic{ width:18px; height:18px; }

/* =====================================================
   INSTRUCTIONS / CHARACTERISTICS PAGE
   ===================================================== */
.ins-nav{
  position:sticky; top:var(--site-head-offset); z-index:40;
  display:flex; gap:6px; overflow-x:auto;
  background:var(--paper);
  border-bottom:1.5px solid var(--ink);
  padding:10px 0;
  scrollbar-width:none;
}
.ins-nav::-webkit-scrollbar{ display:none; }
.ins-nav a{
  flex:none;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-2);
  padding:9px 16px;
  border:1px solid var(--line); border-radius:999px;
  white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s;
}
.ins-nav a:hover, .ins-nav a.is-on{
  background:var(--ink); color:var(--yellow); border-color:var(--ink);
}
.ins-steps{
  counter-reset:step;
  display:grid; gap:14px;
  margin-top:26px;
}
.ins-step{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px;
}
.ins-step::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  flex:none;
  font-family:var(--font-display);
  font-style:italic; font-weight:900;
  font-size:1.5rem;
  color:var(--yellow-deep);
  line-height:1;
}
.ins-step h3{ font-size:1.02rem; margin-bottom:4px; }
.ins-step p{ color:var(--txt-2); font-size:.93rem; }
.ins-cards{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px; margin-top:26px;
}
.ins-card{
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px;
}
.ins-card .ic{ width:26px; height:26px; color:var(--orange-deep); margin-bottom:12px; }
.ins-card h3{ font-size:1.02rem; margin-bottom:6px; }
.ins-card p{ color:var(--txt-2); font-size:.92rem; }
.ins-note{
  margin-top:22px;
  background:var(--paper-2);
  border-left:4px solid var(--yellow);
  border-radius:var(--r-sm);
  padding:16px 20px;
  font-size:.93rem; color:var(--txt-2);
}
.table-scroll{ overflow-x:auto; margin-top:22px; }
.table-scroll .spec-table{ min-width:560px; }
@media (max-width:800px){
  .ins-cards{ grid-template-columns:1fr; }
}

/* =====================================================
   MOBILE LANDING — visual-first: images forward, copy trimmed
   ===================================================== */
@media (max-width:640px){
  .section{ padding-block:52px; }
  .section-head h2{ font-size:1.5rem; }

  /* hero: title + price + CTA carry the message, drop the paragraph */
  .hero-sub{ display:none; }

  /* categories: tight 2-col photo tiles, title only */
  .cat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-card p, .cat-card .cat-cta{ display:none; }
  .cat-card h3, .cat-card .cat-body h3{ font-size:1.02rem; }
  .cat-lg .cat-body h3{ font-size:1.12rem; }
  .cat-banner-copy p{ display:none; }

  /* bestsellers: compact visual cards, two per row */
  .prod-grid{ gap:12px; }
  .prod-card .prod-cat, .prod-card .prod-spec{ display:none; }
  .prod-card .prod-title{ font-size:.88rem; }

  /* trust: icon + headline speak for themselves */
  .trust-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .trust-tile{ text-align:center; }
  .trust-tile p{ display:none; }
  .trust-tile h3{ font-size:.92rem; }
  .trust-tile .ic{ margin-inline:auto; }

  .faq-note{ display:none; }
}

/* =====================================================
   ADMIN PANEL — тъмна странична лента + светло работно поле
   ===================================================== */
.adm-gate[hidden], .adm-app[hidden], .adm-drawer[hidden], .adm-drawer-veil[hidden]{ display:none; }

body.adm-body{ background:#f2f4f7; }

/* --- gate --- */
.adm-gate{ display:grid; place-items:center; min-height:100vh; padding:24px; }
.adm-gate-card{
  text-align:center; max-width:430px;
  background:#fff;
  border:1.5px solid var(--ink); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:42px 36px;
}
.adm-gate-logo{ height:44px; width:auto; margin-bottom:20px; }
.adm-gate-card h1{ font-size:1.55rem; margin-bottom:10px; }
.adm-gate-card p{ color:var(--txt-2); margin-bottom:22px; }

/* --- скеле: sidebar | (topbar + main) --- */
.adm-app{
  display:grid; grid-template-columns:236px minmax(0,1fr);
  min-height:100vh;
}
.adm-col{ min-width:0; display:flex; flex-direction:column; }

/* --- странична лента --- */
.adm-side{
  background:var(--ink); color:#fff;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding:18px 14px 14px;
}
.adm-side-logo{ display:block; padding:2px 8px 16px; }
.adm-side-logo img{ height:34px; width:auto; display:block; }
.adm-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.adm-nav-lbl{
  font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.36);
  padding:15px 10px 6px;
}
.adm-nav button{
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left;
  padding:10px 10px; border-radius:10px;
  font-weight:600; font-size:.89rem;
  color:rgba(255,255,255,.72);
  transition:background .15s, color .15s;
}
.adm-nav button svg{ width:18px; height:18px; flex:none; opacity:.7; }
.adm-nav button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.adm-nav button.is-on{ background:var(--yellow); color:var(--ink); font-weight:800; }
.adm-nav button.is-on svg{ opacity:1; }
.adm-count{
  margin-left:auto;
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  background:rgba(255,255,255,.14); border-radius:999px;
  padding:2px 8px;
}
.adm-count:empty{ display:none; }
.adm-nav button.is-on .adm-count{ background:rgba(13,14,17,.14); }
.adm-side-foot{
  margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1);
}
.adm-side-site{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  color:rgba(255,255,255,.66); text-decoration:none;
  font-size:.86rem; font-weight:600;
  transition:color .15s, background .15s;
}
.adm-side-site svg{ width:16px; height:16px; }
.adm-side-site:hover{ color:var(--yellow); background:rgba(255,255,255,.06); }

/* --- горна лента --- */
.adm-topbar{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:13px 30px;
  display:flex; align-items:center; gap:18px;
}
.adm-topbar h1{
  font-family:var(--font-display);
  font-size:1.3rem; font-weight:900; font-style:italic;
}
.adm-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.adm-tb-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:.84rem; color:var(--ink);
  transition:border-color .15s, background .15s;
}
.adm-tb-btn:hover{ border-color:var(--ink); }
.adm-tb-btn:disabled{ opacity:.45; cursor:default; }
.adm-tb-btn:disabled:hover{ border-color:var(--line); }
.adm-tb-btn svg{ width:15px; height:15px; flex:none; }
.adm-tb-btn span{
  max-width:230px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.adm-notif-btn{ background:var(--yellow); border-color:var(--yellow); }
.adm-notif-btn:hover{ border-color:var(--ink); }
.adm-user-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 13px 5px 5px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.adm-user-chip i{
  font-style:normal;
  width:28px; height:28px; border-radius:50%;
  background:var(--yellow); color:var(--ink);
  display:grid; place-items:center;
  font-weight:800; font-size:.82rem;
}
.adm-user{
  font-size:.8rem; color:var(--txt-2);
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- работно поле --- */
.adm-main{
  width:100%; max-width:1320px; margin-inline:auto;
  padding:26px 30px 90px;
}

/* --- табло: период + KPI карти --- */
.adm-dash-top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.adm-dash-lbl{ font-weight:700; font-size:.88rem; color:var(--txt-2); }
.adm-dash-top select{
  background:#fff;
  border:1px solid var(--line); border-radius:10px;
  padding:9px 13px; font-size:.88rem; font-weight:600;
  box-shadow:0 1px 2px rgba(13,14,17,.05);
}
.adm-dash-period{
  font-size:.8rem; color:var(--txt-3);
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px;
}
.adm-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px; margin-bottom:18px;
}
.adm-stat{
  position:relative;
  background:#fff;
  border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 15px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 1px 2px rgba(13,14,17,.04);
}
.adm-stat-ic{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:11px;
  background:#fff7d9; color:#8a6d00;
  display:grid; place-items:center;
}
.adm-stat-ic svg{ width:17px; height:17px; }
.adm-stat small{
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3);
}
.adm-stat strong{
  font-family:var(--font-display);
  font-size:1.65rem; font-weight:900; font-style:italic;
  color:var(--ink); line-height:1.1;
}
.adm-delta{
  display:inline-flex; align-items:center; gap:4px;
  width:fit-content;
  font-size:.71rem; font-weight:700; color:var(--txt-3);
  background:var(--paper-2); border-radius:999px;
  padding:3px 10px;
}
.adm-delta.is-up{ color:#137a3d; background:#e4f6eb; }
.adm-delta.is-down{ color:#b32b2b; background:#fdeaea; }
.adm-stat-sub{ font-size:.76rem; color:var(--txt-3); }

/* --- графика --- */
.adm-chart{ width:100%; min-height:120px; }
.adm-chart svg{ width:100%; height:auto; display:block; }
.adm-chart .ch-grid{ stroke:#edf0f4; stroke-width:1; }
.adm-chart .ch-ylbl{ font-size:11px; fill:var(--txt-3); text-anchor:end; }
.adm-chart .ch-xlbl{ font-size:11px; fill:var(--txt-3); text-anchor:middle; }
.adm-chart .ch-line{ fill:none; stroke:#e9b400; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.adm-chart .ch-dot{ fill:#fff; stroke:#d9a600; stroke-width:2; transition:r .1s; }
.adm-chart .ch-dot:hover{ r:5.5; }
.adm-chart-metric{ display:flex; gap:4px; background:var(--paper-2); border-radius:11px; padding:4px; }
.adm-chart-metric button{
  padding:7px 14px; border-radius:8px;
  font-weight:700; font-size:.82rem;
  color:var(--txt-2);
  transition:background .15s, color .15s;
}
.adm-chart-metric button:hover{ color:var(--ink); }
.adm-chart-metric button.is-on{ background:var(--ink); color:var(--yellow); }

/* --- табло: последни поръчки + странична колона --- */
.adm-dash-grid{
  display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(290px, 1fr);
  gap:18px; align-items:start;
}
.adm-dash-grid .adm-card{ margin-bottom:0; }
.adm-dash-side{ display:flex; flex-direction:column; gap:18px; }
.adm-quick{ display:grid; gap:8px; }
.adm-quick button, .adm-quick a{
  display:block; width:100%; text-align:left;
  padding:11px 14px; border-radius:10px;
  background:var(--paper-2); color:var(--ink);
  font-weight:700; font-size:.88rem;
  text-decoration:none;
  transition:background .15s;
}
.adm-quick button:hover, .adm-quick a:hover{ background:var(--yellow); }
.adm-top{ display:flex; flex-direction:column; gap:2px; }
.adm-top-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 8px; border-radius:10px;
  text-decoration:none; color:var(--ink);
}
.adm-top-row:hover{ background:var(--paper-2); }
.adm-top-row img{
  width:44px; height:44px; object-fit:cover;
  border-radius:9px; border:1px solid var(--line); background:#fff;
  flex:none;
}
.adm-top-row div{ min-width:0; flex:1; }
.adm-top-row b{
  display:block; font-size:.85rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-top-row small{ color:var(--txt-3); font-size:.75rem; }
.adm-top-row strong{ font-size:.88rem; white-space:nowrap; }
@media (max-width: 1200px){
  .adm-dash-grid{ grid-template-columns:1fr; }
}

/* --- вградена карта с офисите на Еконт (чекаут, Leaflet) --- */
.co-map-inline{ margin-top:14px; }
.co-map-inline[hidden]{ display:none; }
.co-map-inline .form-note{ margin-bottom:8px; }
#econtMap{
  width:100%; height:430px;
  border:1.5px solid var(--ink); border-radius:12px;
  background:#e9edf0;
  z-index:0; /* под падащите менюта/тостовете на сайта */
}
@media (max-width:640px){
  #econtMap{ height:360px; }
}
.skx-pin-wrap{ background:none; border:none; }
.skx-pin{ display:block; filter:drop-shadow(0 2px 3px rgba(13,14,17,.35)); }
.skx-pin path{ fill:var(--ink); }
.skx-pin circle{ fill:#fff; }
.skx-pin.is-sel path{ fill:var(--yellow); }
.skx-pin.is-sel circle{ fill:var(--ink); }
.leaflet-popup-content{ font:500 .86rem/1.45 var(--font-body, Inter, sans-serif); }
.leaflet-popup-content b{ font-weight:700; }

/* --- данни за банков превод (success.html при избрано плащане по банка) --- */
.success-bank{
  margin:18px auto 6px;
  max-width:560px;
  text-align:left;
  background:#fff;
  border:1.5px solid var(--ink);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 10px 26px rgba(13,14,17,.08);
}
.success-bank h3{
  font-family:var(--font-display);
  font-size:1.12rem;
  margin-bottom:8px;
}
.success-bank > p{ font-size:.92rem; color:var(--txt-2); margin-bottom:14px; }
.bank-rows{ display:grid; gap:0; border-top:1px solid var(--line); }
.bank-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:.93rem;
}
.bank-row span{ color:var(--txt-3); white-space:nowrap; }
.bank-row b{ text-align:right; word-break:break-all; }
.success-bank .bank-sub{ margin-top:12px; font-size:.85rem; color:var(--txt-3); }
.success-bank .bank-sub a{ font-weight:700; color:var(--ink); }

/* --- търсачка за населено място в чекаута (кирилица + латиница) --- */
.city-combo{ position:relative; }
.city-drop{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px);
  background:#fff;
  border:1.5px solid var(--ink); border-radius:12px;
  box-shadow:0 16px 44px rgba(13,14,17,.18);
  max-height:288px; overflow:auto;
  padding:6px;
}
.city-drop[hidden]{ display:none; }
.city-opt{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; text-align:left;
  padding:10px 12px; border-radius:8px;
  font-size:.92rem;
  transition:background .1s;
}
.city-opt b{ font-weight:700; }
.city-opt small{ color:var(--txt-3); font-size:.76rem; white-space:nowrap; }
.city-opt:hover, .city-opt.is-act{ background:var(--yellow); }
.city-opt:hover small, .city-opt.is-act small{ color:var(--ink); opacity:.72; }

.adm-card{
  background:#fff;
  border:1px solid var(--line); border-radius:16px;
  padding:20px 22px 22px;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(13,14,17,.04);
}
.adm-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-bottom:16px;
}
.adm-card-head h2{ font-size:1.15rem; }
.adm-card-head h2 small{ font-size:.76rem; font-weight:500; color:var(--txt-3); }
.adm-tools{ display:flex; gap:10px; flex-wrap:wrap; }
.adm-tools input, .adm-tools select{
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:9px 13px; font-size:.88rem;
  min-width:0;
}
.adm-tools input:focus, .adm-tools select:focus{
  outline:none; background:#fff; border-color:var(--orange);
}
.adm-tools input{ width:260px; max-width:100%; }

.adm-table-wrap{ overflow-x:auto; }
.adm-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.adm-table th{
  text-align:left;
  font-family:var(--font-mono); font-weight:500;
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3);
  padding:8px 12px 8px 0;
  border-bottom:1.5px solid var(--line);
  white-space:nowrap;
}
.adm-table td{
  padding:11px 12px 11px 0;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.adm-table td > b{ white-space:nowrap; }
.adm-table td small{ display:block; color:var(--txt-3); font-size:.76rem; }
.adm-row{ cursor:pointer; transition:background .12s; }
.adm-row:hover{ background:var(--paper-2); }
.adm-empty{ color:var(--txt-3); padding:26px 0; text-align:center; }

.adm-badge{
  display:inline-block;
  font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}
.adm-badge.is-open{ color:#C77700; border-color:rgba(199,119,0,.4); background:rgba(199,119,0,.07); }
.adm-badge.is-ship{ color:#0B69C7; border-color:rgba(11,105,199,.35); background:rgba(11,105,199,.06); }
.adm-badge.is-done{ color:#1E9E4C; border-color:rgba(30,158,76,.35); background:rgba(30,158,76,.06); }
.adm-badge.is-cancel{ color:#D23A2E; border-color:rgba(210,58,46,.35); background:rgba(210,58,46,.06); }
.adm-badge.is-paid{ color:#1E9E4C; border-color:rgba(30,158,76,.35); background:rgba(30,158,76,.06); }
.adm-badge.is-pending{ color:#C77700; border-color:rgba(199,119,0,.4); background:rgba(199,119,0,.07); }
.adm-badge.is-cod{ color:var(--txt-2); background:var(--paper-2); }

.adm-note{ color:var(--txt-2); font-size:.9rem; margin-bottom:16px; max-width:640px; }
.adm-export-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.adm-export-row input[type="month"],
.adm-export-row select{
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:11px 14px; font-size:.92rem;
}
/* начин на плащане под статус-баджа в таблицата */
td .adm-badge + small{
  display:block; margin-top:3px;
  color:var(--txt-3); font-size:.7rem;
}

/* категории (админ) */
.adm-cat-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.adm-cat-row:last-of-type{ border-bottom:0; }
.adm-cat-row code{
  font-family:var(--font-mono); font-size:.78rem;
  background:var(--paper-2); border-radius:6px; padding:3px 8px;
  white-space:nowrap;
}
.adm-cat-row input{
  flex:1; min-width:0;
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:8px 12px; font-size:.9rem;
}
.adm-cat-row input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.adm-cat-row small{ color:var(--txt-3); white-space:nowrap; }
.adm-cat-del{
  background:none; border:0; cursor:pointer;
  color:#C22; font-size:1rem; line-height:1; padding:6px;
  border-radius:6px;
}
.adm-cat-del:hover{ background:rgba(204,34,34,.08); }
.adm-cat-del[disabled]{ color:var(--txt-3); cursor:not-allowed; }
.adm-cat-new{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.adm-cat-new input{
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:9px 12px; font-size:.9rem;
}
.adm-cat-new input:focus{ outline:none; border-color:var(--brand); background:#fff; }

/* cookie банер (store.js го създава като #cookieBar) */
#cookieBar{
  position:fixed; left:16px; right:16px; bottom:16px;
  z-index:1200;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:560px; margin-inline:auto;
  background:var(--ink); color:#fff;
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  font-size:.84rem; line-height:1.45;
  animation:cookieIn .4s ease both;
  transition:opacity .3s ease, transform .3s ease;
}
@keyframes cookieIn{ from{ opacity:0; transform:translateY(14px); } }
#cookieBar.is-out{ opacity:0; transform:translateY(14px); }
#cookieBar p{ margin:0; flex:1; min-width:220px; }
#cookieBar a{ color:var(--brand); text-decoration:underline; }
#cookieBar button{
  background:var(--brand); color:var(--ink);
  border:0; border-radius:9px;
  padding:10px 22px;
  font:inherit; font-weight:700; font-size:.8rem;
  cursor:pointer;
}
#cookieBar button:hover{ filter:brightness(1.06); }

/* продукти (CMS каталог) */
.adm-pthumb{
  width:44px; height:44px; object-fit:contain;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* лупа при посочване (клиентска бележка: „да мога да ховервам снимката“) */
.adm-pthumb:hover{
  transform:scale(3.4);
  transform-origin:left center;
  position:relative; z-index:30;
  box-shadow:0 10px 34px rgba(0,0,0,.3);
}
.adm-imgrow img{ transition:transform .18s ease, box-shadow .18s ease; }
.adm-imgrow img:hover{
  transform:scale(3.1);
  transform-origin:left top;
  position:relative; z-index:30;
  box-shadow:0 10px 34px rgba(0,0,0,.3);
  background:#fff;
}
.adm-prow{ cursor:pointer; }
.adm-prow.is-del{ opacity:.5; }
.adm-prow td small{ display:block; color:var(--txt-3); font-size:.74rem; }
.adm-prow td s{ color:var(--txt-3); }
.adm-fgrid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px 16px;
}
.adm-f{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.adm-f > span{
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3);
}
.adm-f input[type="text"], .adm-f input[type="number"], .adm-f input[type="url"],
.adm-f select, .adm-f textarea{
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:10px 12px; font-size:.92rem; font-family:inherit;
  width:100%;
}
.adm-f input:focus, .adm-f select:focus, .adm-f textarea:focus{
  border-color:var(--yellow); background:#fff; outline:none;
}
.adm-f textarea{ resize:vertical; }
.adm-f-wide{ grid-column:1 / -1; }
.adm-check{ display:flex; align-items:center; gap:8px; font-size:.9rem; padding:10px 0; }
.adm-check input{ width:18px; height:18px; accent-color:var(--yellow-deep); }
.adm-imgrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* зоните за влачене на снимки светват, докато файлът е над тях */
.adm-imgrow.is-drop,
#pfGallery.is-drop{
  outline:2px dashed var(--brand);
  outline-offset:3px;
  background:rgba(255,201,7,.1);
  border-radius:8px;
}
.adm-imgrow img{
  width:56px; height:56px; object-fit:contain;
  background:#fff; border:1px solid var(--line); border-radius:8px; flex:none;
}
.adm-imgrow input[type="text"]{ flex:1; min-width:200px; }
.adm-imgrow span{ font-size:.85rem; color:var(--txt-2); }
.adm-pform-actions{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
/* бутоните тук са с дълги надписи — естествена ширина вместо разпъване
   (по-висока специфичност от .adm-actions-row .btn, който е по-надолу) */
.adm-actions-row.adm-pform-actions .btn{ flex:0 0 auto; }
.adm-danger{ color:#D23A2E; }
@media (max-width:900px){ .adm-fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .adm-fgrid{ grid-template-columns:1fr; } }

/* дизайн — цветове */
.adm-theme-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:10px 16px;
}
.adm-theme-row{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 12px;
}
.adm-theme-row input[type="color"]{
  width:44px; height:36px; padding:2px;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer; flex:none;
}
.adm-theme-row > div{ flex:1; min-width:0; }
.adm-theme-row b{ display:block; font-size:.86rem; }
.adm-theme-row small{ color:var(--txt-3); font-size:.72rem; }
.adm-theme-row input[type="text"]{
  width:96px; flex:none;
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:8px 9px; font-family:var(--font-mono); font-size:.8rem;
}
.adm-adv{ margin-top:14px; }
.adm-adv summary{ cursor:pointer; font-size:.9rem; color:var(--txt-2); }
.adm-adv textarea{
  width:100%; margin-top:10px;
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:10px 12px; font-family:var(--font-mono); font-size:.84rem;
  resize:vertical;
}

/* drawer */
.adm-drawer-veil{
  position:fixed; inset:0; z-index:190;
  background:rgba(13,14,17,.45);
}
.adm-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:min(94vw, 480px);
  background:var(--paper);
  border-left:1.5px solid var(--ink);
  box-shadow:-30px 0 60px rgba(13,14,17,.25);
  display:flex; flex-direction:column;
}
.adm-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.adm-drawer-head h3{ font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.04em; }
.adm-x{
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:1.5rem; line-height:1;
  border-radius:9px; color:var(--txt-2);
}
.adm-x:hover{ background:var(--paper-2); color:var(--ink); }
.adm-drawer-body{ padding:18px 22px 28px; overflow-y:auto; }
.adm-kv{ margin-bottom:13px; }
.adm-kv small{
  display:block;
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:3px;
}
.adm-kv span{ font-size:.92rem; }
.adm-kv a{ color:var(--orange-deep); font-weight:600; }
.adm-items{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:6px 14px;
  margin:16px 0 14px;
}
.adm-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 0;
  font-size:.9rem;
}
.adm-item + .adm-item{ border-top:1px solid var(--line); }
.adm-item img{ width:38px; height:38px; object-fit:contain; flex:none; }
.adm-item span{ flex:1; min-width:0; }
.adm-item small{ color:var(--txt-3); }
.adm-totals{
  display:flex; flex-direction:column; gap:6px;
  font-size:.92rem; color:var(--txt-2);
  margin-bottom:18px;
}
.adm-totals span{ display:flex; justify-content:space-between; gap:14px; }
.adm-totals b{ color:var(--ink); }
.adm-grand{ border-top:1.5px solid var(--ink); padding-top:8px; font-weight:700; }
.adm-grand small{ color:var(--txt-3); font-weight:400; }
.adm-actions label{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:14px;
}
.adm-actions select{
  background:var(--paper-2);
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:11px 14px;
  font-size:.95rem; font-weight:600;
  font-family:var(--font-body, inherit);
  letter-spacing:normal; text-transform:none;
}
.adm-actions-row{ display:flex; gap:10px; flex-wrap:wrap; }
.adm-actions-row .btn{ flex:1; justify-content:center; min-width:140px; }
.adm-danger{ color:#D23A2E; }
.adm-danger:hover{ border-color:#D23A2E; }

@media (max-width:980px){
  .adm-app{ grid-template-columns:1fr; min-height:0; }
  .adm-side{
    position:sticky; top:0; z-index:95;
    height:auto;
    flex-direction:row; align-items:center; gap:8px;
    padding:10px 12px;
  }
  .adm-side-logo{ padding:0 6px 0 0; }
  .adm-side-logo img{ height:26px; }
  .adm-nav{ flex-direction:row; overflow-x:auto; gap:4px; scrollbar-width:none; }
  .adm-nav::-webkit-scrollbar{ display:none; }
  .adm-nav-lbl{ display:none; }
  .adm-nav button{ white-space:nowrap; padding:8px 11px; font-size:.8rem; gap:7px; }
  .adm-nav button svg{ display:none; }
  .adm-side-foot{ display:none; }
  .adm-topbar{ padding:10px 14px; gap:10px; }
  .adm-topbar h1{ font-size:1.1rem; }
  .adm-tb-btn span{ max-width:120px; }
  .adm-user{ display:none; }
  .adm-user-chip{ padding:4px; }
  .adm-main{ padding:16px 14px 70px; }
  .adm-stats{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .adm-stat strong{ font-size:1.3rem; }
}

/* =====================================================
   ПРОМОЦИИ — по-компактна плътност (клиентска бележка:
   „много е massive, трудно се чете“): по-дребни карти,
   иконки и текст само на тази страница
   ===================================================== */
body[data-page="promo"] .page-head h1{ font-size:clamp(2rem, 1.5rem + 2.2vw, 3rem); }
body[data-page="promo"] .page-head .page-sub{ font-size:.9rem; }
body[data-page="promo"] .promo-strip{ padding:11px 16px; margin-bottom:24px; gap:10px; }
body[data-page="promo"] .promo-strip span{ font-size:.85rem; }
body[data-page="promo"] .promo-strip .ic{ width:18px; height:18px; }
body[data-page="promo"] .cat-toolbar{ margin-bottom:22px; }
body[data-page="promo"] .fchip{ padding:7px 13px; font-size:.8rem; }
body[data-page="promo"] .prod-grid{ gap:16px; }
body[data-page="promo"] .prod-title{ font-size:.9rem; }
body[data-page="promo"] .prod-spec{ font-size:.78rem; }
body[data-page="promo"] .prod-cat{ font-size:.66rem; }
body[data-page="promo"] .prod-price strong{ font-size:1.16rem; }
body[data-page="promo"] .prod-price s{ font-size:.76rem; }
body[data-page="promo"] .prod-add{ width:40px; height:40px; }
body[data-page="promo"] .badge{ font-size:.72rem; padding:5px 10px; }
@media (min-width:1720px){
  body[data-page="promo"] .prod-grid{ grid-template-columns:repeat(5, 1fr); }
}

/* количка и каса: „full screen“ (клиентска бележка) — на големи екрани
   страницата ползва почти цялата ширина, редовете и обобщението порастват */
@media (min-width:1440px){
  body[data-page="cart"] .container,
  body[data-page="checkout"] .container{ max-width:1440px; }
  .cart-grid{ grid-template-columns:minmax(0,1fr) 420px; gap:56px; }
  .co-grid{ grid-template-columns:minmax(0,1fr) 440px; gap:56px; }
  .cart-line{ grid-template-columns:112px minmax(0,1fr) auto auto auto; padding:24px 0; }
  .cart-thumb{ width:112px; height:112px; }
  .cart-line-info h3{ font-size:1.06rem; }
}
@media (min-width:1680px){
  body[data-page="cart"] .container,
  body[data-page="checkout"] .container{ max-width:1600px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js [data-reveal]{ opacity:1; transform:none; }
}