/* =====================================================================
   STILARA — base.css  (токени, основа, хедър, футър, чекмеджета,
   карта на продукт, ефекти). Собственик: основа. Вж. CONTRACT.md
   ===================================================================== */

/* ---------- 1. Токени ---------- */
:root{
  color-scheme: dark;
  --st-ink:#0D0C0B;          /* фон на страницата */
  --st-ink-2:#141311;        /* повдигнати секции */
  --st-ink-3:#1C1A18;        /* карти, полета */
  --st-ink-4:#262321;        /* hover на полета */
  --st-line:rgba(241,236,228,.12);
  --st-line-2:rgba(241,236,228,.22);
  --st-bone:#F1ECE4;         /* основен текст */
  --st-bone-2:#BDB6AC;       /* вторичен текст */
  --st-bone-3:#857E75;       /* приглушен */
  --st-accent:#FF6A3D;       /* жар — CTA, отстъпки, фокус */
  --st-accent-2:#FF8A63;
  --st-accent-ink:#1A0A04;   /* текст върху акцента */
  --st-gold:#C9A46A;         /* рядко — отблясъци, звезди */
  --st-success:#62C483;
  --st-danger:#FF5A4E;
  --st-overlay:rgba(6,5,4,.62);

  --st-f-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --st-f-display:"Unbounded", "Onest", system-ui, sans-serif;
  --st-f-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;

  --st-fs-mega:clamp(3.2rem, 12vw, 12.5rem);
  --st-fs-hero:clamp(2.6rem, 7.2vw, 7.4rem);
  --st-fs-h2:clamp(2rem, 4.4vw, 4.4rem);
  --st-fs-h3:clamp(1.35rem, 1.8vw + .6rem, 2rem);
  --st-fs-lead:clamp(1.05rem, .35vw + .95rem, 1.25rem);
  --st-fs-body:1rem;
  --st-fs-sm:.875rem;
  --st-fs-xs:.75rem;
  --st-fs-micro:.6875rem;

  --st-wrap:1440px;
  --st-gutter:clamp(16px, 3.4vw, 48px);
  --st-section:clamp(72px, 10vw, 160px);
  --st-header-h:64px;
  --st-announce-h:34px;
  --st-radius:14px;
  --st-radius-sm:8px;
  --st-radius-pill:999px;

  --st-ease:cubic-bezier(.2,.7,.2,1);
  --st-ease-io:cubic-bezier(.65,0,.35,1);
  --st-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --st-d-fast:160ms; --st-d:280ms; --st-d-slow:520ms; --st-d-xslow:900ms;

  --z-header:100; --z-sticky:110; --z-drawer:200; --z-search:250; --z-dialog:300; --z-toast:400; --z-cursor:500;
}
@media (min-width:1024px){ :root{ --st-header-h:76px; } }
@media (prefers-contrast:more){ :root{ --st-line:rgba(241,236,228,.3); --st-bone-3:#A49C92; } }

/* ---------- 2. Основа ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--st-header-h) + 16px); }
body{
  margin:0; background:var(--st-ink); color:var(--st-bone);
  font-family:var(--st-f-body); font-size:var(--st-fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
:where(h1,h2,h3,h4){ margin:0 0 .5em; font-weight:700; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere; }
p{ margin:0 0 1em; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--st-accent); color:var(--st-accent-ink); }
:focus-visible{ outline:2px solid var(--st-accent); outline-offset:3px; border-radius:4px; }
.st-skip{ position:absolute; left:12px; top:-60px; z-index:999; background:var(--st-bone); color:var(--st-ink); padding:10px 16px; border-radius:8px; }
.st-skip:focus{ top:12px; }
.screen-reader-text,.st-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Плавни преходи между страниците (Chrome/Edge/Safari 18) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:st-vt-out .32s var(--st-ease) both; }
::view-transition-new(root){ animation:st-vt-in .42s var(--st-ease) both; }
@keyframes st-vt-out{ to{ opacity:0; transform:translateY(-12px) scale(.995); } }
@keyframes st-vt-in{ from{ opacity:0; transform:translateY(18px); } }

/* ---------- 3. Типография и помощни класове ---------- */
.st-wrap{ max-width:var(--st-wrap); margin-inline:auto; padding-inline:var(--st-gutter); }
.st-section{ padding-block:var(--st-section); }
.st-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:var(--st-fs-micro); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--st-bone-3); margin:0 0 18px; }
.st-eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.7; }
.st-eyebrow--plain::before{ display:none; }
.st-h-display{ font-family:var(--st-f-display); font-weight:700; letter-spacing:-.035em; line-height:.95; text-transform:uppercase; }
.st-h2{ font-size:var(--st-fs-h2); font-weight:700; letter-spacing:-.035em; line-height:1; }
.st-h2 em,.st-serif{ font-family:var(--st-f-serif); font-style:italic; font-weight:500; letter-spacing:-.01em; text-transform:none; }
.st-lead{ font-size:var(--st-fs-lead); color:var(--st-bone-2); max-width:56ch; }
.st-muted{ color:var(--st-bone-3); }
.st-accent{ color:var(--st-accent); }
.st-hide-sm{ display:none!important; }
@media (min-width:768px){ .st-hide-sm{ display:inline-flex!important; } .st-only-sm{ display:none!important; } }

.st-link{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size var(--st-d) var(--st-ease), color var(--st-d-fast); padding-bottom:2px; }
.st-link:hover{ background-size:100% 1px; color:var(--st-bone); }

/* ---------- 4. Бутони, чипове, полета ---------- */
.st-btn{
  --bg:var(--st-bone); --fg:var(--st-ink);
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px; border-radius:var(--st-radius-pill);
  background:var(--bg); color:var(--fg); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:transform var(--st-d) var(--st-ease), color var(--st-d) var(--st-ease);
  -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.st-btn::before{ /* запълване от курсора */
  content:""; position:absolute; z-index:-1; left:var(--mx,50%); top:var(--my,50%); width:0; height:0; border-radius:50%;
  background:var(--st-accent); transform:translate(-50%,-50%); transition:width .5s var(--st-ease), height .5s var(--st-ease);
}
.st-btn:hover::before{ width:260%; height:600%; }
.st-btn:hover{ color:var(--st-accent-ink); }
.st-btn:active{ transform:scale(.97); }
.st-btn .st-icon{ transition:transform var(--st-d) var(--st-ease); }
.st-btn:hover .st-icon--arrow,.st-btn:hover .st-icon--arrow-ur{ transform:translateX(4px); }
.st-btn--accent{ --bg:var(--st-accent); --fg:var(--st-accent-ink); }
.st-btn--accent::before{ background:var(--st-bone); }
.st-btn--ghost{ --bg:transparent; --fg:var(--st-bone); box-shadow:inset 0 0 0 1px var(--st-line-2); }
.st-btn--ghost:hover{ color:var(--st-accent-ink); }
.st-btn--block{ width:100%; }
.st-btn[disabled],.st-btn.is-disabled{ opacity:.45; pointer-events:none; }
.st-btn.is-loading{ color:transparent!important; }
.st-btn.is-loading::after{ content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; border-radius:50%; border:2px solid currentColor; border-color:var(--fg) var(--fg) transparent transparent; animation:st-spin .7s linear infinite; }
@keyframes st-spin{ to{ transform:rotate(360deg); } }

.st-chip{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:var(--st-radius-pill); box-shadow:inset 0 0 0 1px var(--st-line-2); font-size:var(--st-fs-sm); font-weight:500; transition:background var(--st-d-fast), color var(--st-d-fast), box-shadow var(--st-d-fast); }
.st-chip:hover,.st-chip.is-active,.st-chip[aria-current="page"],.st-chip[aria-pressed="true"]{ background:var(--st-bone); color:var(--st-ink); box-shadow:none; }

.st-iconbtn{ position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; transition:background var(--st-d-fast), transform var(--st-d) var(--st-ease); }
.st-iconbtn:hover{ background:rgba(241,236,228,.08); }
.st-iconbtn:active{ transform:scale(.92); }

.st-size{
  min-width:44px; height:40px; padding:0 10px; border-radius:var(--st-radius-pill);
  box-shadow:inset 0 0 0 1px var(--st-line-2); font-size:var(--st-fs-xs); font-weight:600; letter-spacing:.04em;
  transition:background var(--st-d-fast), color var(--st-d-fast), box-shadow var(--st-d-fast), transform var(--st-d) var(--st-ease-spring);
}
.st-size:hover:not(:disabled){ background:var(--st-bone); color:var(--st-ink); box-shadow:none; transform:translateY(-2px); }
.st-size:disabled,.st-size[aria-disabled="true"]{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.st-size.is-selected,.st-size[aria-checked="true"]{ background:var(--st-bone); color:var(--st-ink); box-shadow:none; }
.st-size.is-done{ background:var(--st-success); color:var(--st-ink); box-shadow:none; }

.st-dot{ width:16px; height:16px; border-radius:50%; background:var(--c,#777); box-shadow:0 0 0 1px var(--st-line-2), inset 0 0 0 1px rgba(0,0,0,.25); transition:transform var(--st-d) var(--st-ease-spring), box-shadow var(--st-d-fast); }
.st-dot:hover,.st-dot.is-active{ transform:scale(1.25); box-shadow:0 0 0 2px var(--st-ink), 0 0 0 3px var(--st-bone); }

.st-tag{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--st-radius-pill); background:rgba(13,12,11,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:var(--st-fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--st-bone); }
.st-tag--accent{ background:var(--st-accent); color:var(--st-accent-ink); backdrop-filter:none; }
.st-tag--muted{ background:rgba(241,236,228,.14); color:var(--st-bone-2); }

.st-input,.st input[type=text],.st input[type=email],.st input[type=tel],.st input[type=password],.st input[type=search],.st input[type=number],.st select,.st textarea{
  width:100%; min-height:52px; padding:14px 16px; font-size:16px; border-radius:var(--st-radius-sm);
  background:var(--st-ink-3); border:1px solid var(--st-line); color:var(--st-bone); transition:border-color var(--st-d-fast), background var(--st-d-fast);
}
.st input:focus,.st select:focus,.st textarea:focus{ outline:none; border-color:var(--st-accent); background:var(--st-ink-4); }
.st ::placeholder{ color:var(--st-bone-3); opacity:1; }

/* Цена */
.st-price{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-variant-numeric:tabular-nums; font-weight:600; }
.st-price ins{ text-decoration:none; }
.st-price__from{ font-size:.8em; font-weight:500; color:var(--st-bone-3); }
.st-price__was{ color:var(--st-bone-3); font-weight:400; font-size:.88em; }
.st-price:has(.st-price__was) .st-price__now{ color:var(--st-accent); }

/* ---------- 5. Лента с предимства (горе) ---------- */
.st-announce{ height:var(--st-announce-h); display:flex; align-items:center; background:var(--st-accent); color:var(--st-accent-ink); font-size:var(--st-fs-xs); font-weight:600; letter-spacing:.06em; overflow:hidden; position:relative; z-index:calc(var(--z-header) + 1); }
.st-announce i{ font-style:normal; opacity:.6; margin-inline:22px; }

/* ---------- 6. Бягаща лента (marquee) ---------- */
.st-marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.st-marquee__track{ display:flex; width:max-content; animation:st-marquee var(--st-mq-dur,30s) linear infinite; will-change:transform; }
.st-marquee__group{ display:flex; align-items:center; flex-shrink:0; padding-right:var(--st-mq-gap,0); white-space:nowrap; }
.st-marquee--reverse .st-marquee__track{ animation-direction:reverse; }
@keyframes st-marquee{ to{ transform:translateX(-50%); } }
.st-marquee:hover .st-marquee__track{ animation-play-state:paused; }
.st-marquee--announce .st-marquee__group span{ padding-inline:2px; }
.st-marquee--giant{ -webkit-mask-image:none; mask-image:none; }
.st-marquee--giant .st-marquee__group{ gap:clamp(24px,4vw,64px); padding-right:clamp(24px,4vw,64px); }
.st-marquee--giant span{ font-family:var(--st-f-display); font-weight:800; font-size:var(--st-fs-mega); line-height:.9; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px rgba(241,236,228,.35); transition:color .4s; }
.st-marquee--giant span:hover{ color:var(--st-bone); }
.st-marquee--giant em{ font-family:var(--st-f-serif); font-style:italic; font-weight:500; font-size:calc(var(--st-fs-mega) * .55); color:var(--st-accent); white-space:nowrap; }

/* ---------- 7. Хедър ---------- */
.st-header{
  position:sticky; top:0; z-index:var(--z-header); height:var(--st-header-h);
  transition:transform .45s var(--st-ease), background .35s, box-shadow .35s;
  background:linear-gradient(180deg, rgba(13,12,11,.75), rgba(13,12,11,0));
}
.st-header.is-scrolled{ background:rgba(13,12,11,.78); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); box-shadow:0 1px 0 var(--st-line); }
.st-header.is-hidden{ transform:translateY(-100%); }
.st-is-home .st-header:not(.is-scrolled){ background:transparent; }
.st-header__in{ height:100%; max-width:var(--st-wrap); margin-inline:auto; padding-inline:calc(var(--st-gutter) - 8px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.st-header__left{ display:flex; align-items:center; gap:8px; }
.st-header__right{ display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.st-header__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; pointer-events:none; }
.st-header__progress span{ display:block; height:100%; background:var(--st-accent); transform-origin:0 50%; transform:scaleX(var(--st-progress,0)); }

.st-logo{ display:inline-flex; align-items:center; justify-content:center; }
.st-logo__word{ display:inline-flex; font-family:var(--st-f-display); font-weight:700; font-size:clamp(1rem, .6vw + .85rem, 1.35rem); letter-spacing:.32em; padding-left:.32em; }
.st-logo__word span{ display:inline-block; transition:transform .5s var(--st-ease-spring), color .3s; transition-delay:calc(var(--i) * 28ms); }
.st-logo:hover .st-logo__word span{ transform:translateY(-3px); color:var(--st-accent); }
.st-logo img{ max-height:36px; width:auto; }

.st-nav{ display:none; }
@media (min-width:1024px){
  .st-header__burger{ display:none; }
  .st-nav{ display:block; }
}
.st-nav__list{ display:flex; gap:clamp(16px,2vw,34px); }
.st-nav__list a{ position:relative; display:inline-flex; align-items:flex-start; gap:4px; font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding-block:8px; }
.st-nav__count{ font-size:.62rem; letter-spacing:0; color:var(--st-bone-3); font-weight:500; margin-top:-2px; }
.st-roll{ position:relative; display:inline-block; overflow:hidden; height:1.3em; line-height:1.3; }
.st-roll__a,.st-roll__b{ display:block; transition:transform .45s var(--st-ease); }
.st-roll__b{ position:absolute; left:0; top:100%; color:var(--st-accent); }
.st-nav__list a:hover .st-roll__a,.st-nav__list a:hover .st-roll__b{ transform:translateY(-100%); }
.st-nav__list .current-menu-item > a::after,.st-nav__list .current-product_cat-ancestor > a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--st-accent); }

.st-cart-count{ position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--st-accent); color:var(--st-accent-ink); font-size:.66rem; font-weight:800; display:grid; place-items:center; line-height:1; transition:transform .4s var(--st-ease-spring); }
.st-cart-count[data-count="0"],.st-cart-count:empty{ transform:scale(0); }
.st-cart-count.is-bump{ animation:st-bump .5s var(--st-ease-spring); }
@keyframes st-bump{ 40%{ transform:scale(1.5); } }

/* ---------- 8. Чекмеджета (общ механизъм) ---------- */
.st-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); visibility:hidden; pointer-events:none; }
.st-drawer.is-open{ visibility:visible; pointer-events:auto; }
.st-drawer__overlay{ position:absolute; inset:0; background:var(--st-overlay); opacity:0; transition:opacity .4s var(--st-ease); }
.st-drawer.is-open .st-drawer__overlay{ opacity:1; }
.st-drawer__panel{
  position:absolute; top:0; bottom:0; right:0; width:min(92vw, 460px); display:flex; flex-direction:column;
  background:var(--st-ink-2); box-shadow:-30px 0 80px rgba(0,0,0,.45); transform:translateX(104%); transition:transform .55s var(--st-ease);
  border-left:1px solid var(--st-line);
}
.st-drawer--left .st-drawer__panel{ right:auto; left:0; transform:translateX(-104%); border-left:0; border-right:1px solid var(--st-line); }
.st-drawer--bottom .st-drawer__panel{ top:auto; left:0; right:0; width:100%; max-height:88dvh; border-radius:22px 22px 0 0; transform:translateY(104%); border:0; border-top:1px solid var(--st-line); }
.st-drawer.is-open .st-drawer__panel{ transform:none; }
.st-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 14px 24px; border-bottom:1px solid var(--st-line); }
.st-drawer__title{ font-family:var(--st-f-display); font-weight:700; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase; }
.st-drawer__body{ flex:1; overflow:auto; overscroll-behavior:contain; padding:24px; }
.st-drawer__foot{ padding:18px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--st-line); background:var(--st-ink-2); }
.st-drawer--bottom .st-drawer__head::before{ content:""; position:absolute; left:50%; top:8px; width:42px; height:4px; margin-left:-21px; border-radius:2px; background:var(--st-line-2); }
.st-drawer--bottom .st-drawer__head{ position:relative; padding-top:22px; }
html.st-locked,html.st-locked body{ overflow:hidden; }

/* Мобилно меню */
.st-mnav__big{ display:grid; gap:4px; margin-bottom:36px; }
.st-mnav__big a{ display:flex; align-items:flex-start; gap:8px; font-family:var(--st-f-display); font-weight:700; font-size:clamp(2rem, 9vw, 2.8rem); letter-spacing:-.03em; text-transform:uppercase; line-height:1.1; padding-block:6px; }
.st-mnav__big sup{ font-family:var(--st-f-body); font-size:.8rem; color:var(--st-accent); margin-top:.5em; letter-spacing:0; }
.st-mnav__big li{ opacity:0; transform:translateX(-24px); transition:opacity .5s var(--st-ease), transform .6s var(--st-ease); transition-delay:calc(120ms + var(--i) * 60ms); }
.st-drawer.is-open .st-mnav__big li{ opacity:1; transform:none; }
.st-mnav__small{ display:grid; gap:2px; padding-top:20px; border-top:1px solid var(--st-line); }
.st-mnav__small a{ display:block; padding:10px 0; color:var(--st-bone-2); }
.st-mnav__foot{ margin-top:32px; color:var(--st-bone-3); font-size:var(--st-fs-sm); }
.st-mnav__foot a{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- 9. Търсене (цял екран) ---------- */
.st-search{ position:fixed; inset:0; z-index:var(--z-search); background:rgba(10,9,8,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); visibility:hidden; opacity:0; transition:opacity .4s var(--st-ease), visibility 0s .4s; overflow:auto; }
.st-search.is-open{ visibility:visible; opacity:1; transition:opacity .4s var(--st-ease); }
.st-search__in{ max-width:1100px; margin:0 auto; padding:clamp(80px,14vh,160px) var(--st-gutter) 60px; position:relative; }
.st-search__close{ position:absolute; right:var(--st-gutter); top:24px; }
.st-search__form{ position:relative; border-bottom:1px solid var(--st-line-2); transform:translateY(30px); opacity:0; transition:transform .6s var(--st-ease) .1s, opacity .6s .1s; }
.st-search.is-open .st-search__form{ transform:none; opacity:1; }
.st-search__input{ width:100%; background:transparent!important; border:0!important; padding:8px 64px 18px 0!important; min-height:auto!important; font-family:var(--st-f-display); font-weight:700; font-size:clamp(1.8rem, 5.5vw, 4.4rem)!important; letter-spacing:-.04em; color:var(--st-bone); border-radius:0!important; }
.st-search__input:focus{ outline:none; }
.st-search__input::-webkit-search-cancel-button{ display:none; }
.st-search__go{ position:absolute; right:0; bottom:22px; color:var(--st-accent); }
.st-search__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.st-search__results{ margin-top:28px; }

/* ---------- 10. Мрежа и продуктова карта ---------- */
.st-grid{ display:grid; gap:clamp(28px,3.4vw,52px) clamp(10px,1.6vw,24px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .st-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .st-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.st-card{ position:relative; min-width:0; }
.st-card__media{
  position:relative; aspect-ratio:4/5; border-radius:var(--st-radius); overflow:hidden; background:var(--st-ink-3);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--st-ease); transform-style:preserve-3d;
}
.st-card__link{ position:absolute; inset:0; display:block; }
.st-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--st-ease), opacity .6s var(--st-ease), filter .6s; }
.st-card__img--empty{ background:var(--st-ink-3); }
.st-card__img--alt{ opacity:0; transform:scale(1.06); }
.st-card__shine{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%), rgba(255,255,255,.14), transparent 45%); opacity:0; transition:opacity .4s; mix-blend-mode:soft-light; }
.st-card__tags{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.st-card.is-oos .st-card__img{ filter:saturate(.3) brightness(.7); }

.st-card__quick{
  position:absolute; left:10px; right:10px; bottom:10px; padding:12px; border-radius:12px;
  background:rgba(13,12,11,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--st-line);
  transform:translateY(calc(100% + 14px)); transition:transform .5s var(--st-ease); display:none;
}
.st-card__quick-label{ display:block; font-size:var(--st-fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--st-bone-3); margin-bottom:8px; }
.st-card__quick-sizes{ display:flex; flex-wrap:wrap; gap:6px; }
.st-card__quick .st-size{ min-width:38px; height:34px; }
.st-card__plus{ position:absolute; right:10px; bottom:10px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--st-bone); color:var(--st-ink); box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .4s var(--st-ease-spring), background .2s; }
.st-card__plus:active{ transform:scale(.88); }

@media (hover:hover) and (pointer:fine){
  .st-card__quick{ display:block; }
  .st-card__plus{ display:none; }
  .st-card:hover .st-card__quick,.st-card:focus-within .st-card__quick{ transform:none; }
  .st-card:hover .st-card__img{ transform:scale(1.06); }
  .st-card:hover .st-card__img--alt{ opacity:1; transform:scale(1.02); }
  .st-card:hover .st-card__shine{ opacity:1; }
}

.st-card__body{ padding:16px 4px 0; }
.st-card__cat{ font-size:var(--st-fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--st-bone-3); margin:0 0 6px; }
.st-card__title{ font-size:clamp(.9rem,.3vw + .82rem,1.02rem); font-weight:500; letter-spacing:-.005em; line-height:1.35; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.st-card__title a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--st-ease); }
.st-card:hover .st-card__title a{ background-size:100% 1px; }
.st-card__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.st-card__colors{ display:inline-flex; align-items:center; gap:7px; }
.st-card__colors .st-dot{ width:13px; height:13px; }
.st-card__more{ font-size:var(--st-fs-micro); color:var(--st-bone-3); }
.st-card__ledger{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0; font-size:var(--st-fs-micro); font-weight:600; letter-spacing:.08em; color:var(--st-bone-3); }
.st-card__ledger .is-out{ text-decoration:line-through; opacity:.45; }

/* ---------- 11. Футър ---------- */
.st-footer{ position:relative; margin-top:var(--st-section); border-top:1px solid var(--st-line); background:var(--st-ink); overflow:hidden; }
.st-footer__marquee{ padding-block:clamp(28px,5vw,72px); border-bottom:1px solid var(--st-line); }
.st-footer__grid{ display:grid; gap:40px; padding-block:clamp(48px,6vw,88px); grid-template-columns:1fr; }
@media (min-width:768px){ .st-footer__grid{ grid-template-columns:2fr 1fr 1fr 1.2fr; } }
.st-footer__claim{ font-size:clamp(1.6rem,2.6vw,2.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:16px; max-width:16ch; }
.st-footer__claim em{ font-family:var(--st-f-serif); font-style:italic; font-weight:500; color:var(--st-accent); }
.st-footer__col ul,.st-footer__menu{ display:grid; gap:10px; }
.st-footer__col a{ color:var(--st-bone-2); }
.st-footer__col a:hover{ color:var(--st-bone); }
.st-footer__social{ display:flex; gap:4px; margin-top:14px; margin-left:-10px; }
.st-footer__trust{ display:flex; flex-wrap:wrap; gap:14px 28px; padding-block:22px; border-top:1px solid var(--st-line); color:var(--st-bone-2); font-size:var(--st-fs-sm); }
.st-footer__trust span{ display:inline-flex; align-items:center; gap:8px; }
.st-footer__trust .st-icon{ color:var(--st-accent); }
.st-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-block:22px calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--st-line); font-size:var(--st-fs-xs); color:var(--st-bone-3); }

/* ---------- 12. Курсор, зърно, toast ---------- */
.st-cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  html.st-has-cursor .st-cursor{ display:block; position:fixed; left:0; top:0; z-index:var(--z-cursor); pointer-events:none; mix-blend-mode:difference; }
  .st-cursor__dot,.st-cursor__ring{ position:fixed; left:0; top:0; border-radius:50%; transform:translate3d(var(--x,-100px),var(--y,-100px),0); }
  .st-cursor__dot{ width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; }
  .st-cursor__ring{ width:36px; height:36px; margin:-18px 0 0 -18px; border:1px solid rgba(255,255,255,.7); transition:width .35s var(--st-ease), height .35s var(--st-ease), margin .35s var(--st-ease), background .35s, border-color .35s; transform:translate3d(var(--rx2,-100px),var(--ry2,-100px),0); display:grid; place-items:center; }
  .st-cursor__label{ font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#000; opacity:0; transition:opacity .25s; }
  html.st-cursor-hover .st-cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:#fff; }
  html.st-cursor-label .st-cursor__ring{ width:84px; height:84px; margin:-42px 0 0 -42px; background:#fff; border-color:#fff; }
  html.st-cursor-label .st-cursor__label{ opacity:1; }
  html.st-cursor-label .st-cursor__dot{ opacity:0; }
}
.st-grain{ position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:st-grain 1.2s steps(6) infinite; }
@keyframes st-grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.st-toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:var(--z-toast); transform:translate(-50%,calc(100% + 60px)); visibility:hidden; padding:14px 20px; border-radius:var(--st-radius-pill); background:var(--st-bone); color:var(--st-ink); font-weight:600; font-size:var(--st-fs-sm); box-shadow:0 18px 40px rgba(0,0,0,.4); transition:transform .5s var(--st-ease-spring), visibility 0s .5s; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); }
.st-toast.is-on{ transform:translate(-50%,0); visibility:visible; transition:transform .5s var(--st-ease-spring), visibility 0s; }
.st-toast.is-error{ background:var(--st-danger); color:#fff; }

/* ---------- 13. Появяване при скрол ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--st-ease), transform 1s var(--st-ease); transition-delay:calc(var(--i,0) * 70ms); }
html.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js [data-reveal="fade"]{ transform:none; }
html.js [data-reveal="scale"]{ transform:scale(.94); }
html.js [data-reveal="clip"]{ opacity:1; transform:none; clip-path:inset(100% 0 0 0); transition:clip-path 1.2s var(--st-ease-io); }
html.js [data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }
html.js [data-reveal="card"]{ transform:translateY(48px); }
/* разделяне на думи: <span class="st-w"><span>дума</span></span> */
.st-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.st-w > span{ display:inline-block; transform:translateY(105%); transition:transform 1s var(--st-ease); transition-delay:calc(var(--wi,0) * 55ms + var(--wd,0ms)); }
html:not(.js) .st-w > span,.is-in .st-w > span,.st-w.is-in > span{ transform:none; }
html.js [data-reveal="words"]{ opacity:1; transform:none; }

/* ---------- 14. Обикновени страници ---------- */
.st-pagehead{ padding-block:clamp(56px,9vw,140px) clamp(32px,4vw,56px); border-bottom:1px solid var(--st-line); }
.st-pagehead h1{ font-size:var(--st-fs-hero); font-weight:800; letter-spacing:-.045em; line-height:.95; margin:0; }
.st-prose{ max-width:760px; padding-block:clamp(40px,5vw,72px); color:var(--st-bone-2); }
.st-prose h2{ color:var(--st-bone); font-size:clamp(1.35rem,1.4vw + .9rem,1.9rem); margin:2em 0 .6em; }
.st-prose h3{ color:var(--st-bone); font-size:1.15rem; margin:1.6em 0 .5em; }
.st-prose a{ color:var(--st-accent); text-decoration:underline; text-underline-offset:3px; }
.st-prose ul,.st-prose ol{ padding-left:1.2em; margin:0 0 1.2em; }
.st-prose ul{ list-style:disc; } .st-prose ol{ list-style:decimal; }
.st-prose li{ margin-bottom:.4em; }
.st-prose table{ width:100%; border-collapse:collapse; margin:1.2em 0 2em; font-size:var(--st-fs-sm); font-variant-numeric:tabular-nums; }
.st-prose th,.st-prose td{ padding:12px 14px; border-bottom:1px solid var(--st-line); text-align:left; }
.st-prose th{ color:var(--st-bone); font-weight:600; background:var(--st-ink-2); }
.st-prose pre{ white-space:pre-wrap; background:var(--st-ink-2); padding:18px; border-radius:var(--st-radius-sm); border:1px solid var(--st-line); font-family:inherit; }
.st-prose strong{ color:var(--st-bone); }
.st-tablewrap{ overflow-x:auto; }

/* 404 */
.st-404{ min-height:70vh; display:grid; place-items:center; text-align:center; padding-block:80px; }
.st-404 b{ display:block; font-family:var(--st-f-display); font-size:clamp(6rem,24vw,18rem); line-height:.85; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px var(--st-bone-3); }

/* WooCommerce съобщения */
.woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-message,.woocommerce-info,.woocommerce-error{ list-style:none; margin:0 0 20px; padding:16px 18px; border-radius:var(--st-radius-sm); background:var(--st-ink-3); border:1px solid var(--st-line); color:var(--st-bone); font-size:var(--st-fs-sm); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.woocommerce-error{ border-color:rgba(255,90,78,.5); }
.woocommerce-message .button,.woocommerce-info .button{ color:var(--st-accent); font-weight:600; }

/* ---------- 15. Намалено движение ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; scroll-behavior:auto!important; }
  html.js [data-reveal],html.js [data-reveal="clip"]{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .st-w > span{ transform:none!important; }
  .st-marquee__track{ animation:none!important; }
  .st-grain{ display:none; }
  .st-card__media{ transform:none!important; }
}
