/* ============================================================
   hyggehome / — прототип полного магазина.
   Токены — как в /assets/css/site.css, компоненты — новые.
   Разделы файла: база · шапка · мега-меню · поиск · шторки ·
   кнопки/формы · карточки · фильтры · контент · подвал · мобильное.
   ============================================================ */
@import url('/assets/fonts/fonts.css');

:root{
  --ink:#2E3A34; --ink-2:#222c27;
  --terra:#D98452; --terra-soft:#E9A878; --terra-dark:#B5563B;
  /* терракота для мелкого текста: обычная #D98452 на кремовом — контраст 2,5:1, эта — 5:1 (WCAG AA) */
  --terra-ink:#9E4B30;
  /* фон «Камень» (решение Полины 13.10.2026): нейтральный тёплый серый, как глина и керамика.
     Прежний кремовый: cream #F5EFE6, paper #FBF8F3, sand #EFE7DB — примерка ?bg=cream */
  --cream:#EFECE7; --paper:#F4F3F0; --sand:#E6E2DB; --sage-bg:#E7ECE6; --peach:#ECE5DC;
  --sage:#8C9A8E; --muted:#656B64; --ok:#5E8B6A; --warn:#C9973B; --err:#B5563B;
  --line:rgba(46,58,52,.13); --line-2:rgba(46,58,52,.22);
  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  /* заголовки разделов — два размера на весь сайт: раздел страницы и подраздел внутри текста */
  --h-sec:clamp(30px,3.6vw,44px); --h-sub:30px;
  --r-sm:10px; --r:16px; --r-lg:22px; --pill:40px;
  --sh-1:0 2px 6px rgba(46,58,52,.05),0 14px 30px -22px rgba(46,58,52,.30);
  --sh-2:0 22px 46px -22px rgba(46,58,52,.42);
  --sh-pop:0 24px 60px -20px rgba(46,58,52,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
body.lock{overflow:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;color:inherit}
/* Толщина линии — в пикселях экрана, одна на любом размере (спрайт собирается с vector-effect: non-scaling-stroke) */
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor}
.ico.sm{width:18px;height:18px}.ico.xs{width:15px;height:15px}.ico.lg{width:30px;height:30px}.ico.xl{width:44px;height:44px;stroke-width:1.8}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra-ink);font-weight:600}
.muted{color:var(--muted)}
.h-display{font-family:var(--display);font-weight:500;line-height:1.06}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- test ribbon ---------- */
.test-ribbon{background:var(--ink);color:var(--cream);font-size:13px;text-align:center;padding:6px 16px}
.test-ribbon a{color:var(--terra-soft);font-weight:600;text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{background:var(--cream);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:22px}
.topbar a:hover,.topbar button:hover{color:var(--ink)}
.city-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-size:13px;color:var(--ink);font-weight:600}
.topbar .phone{color:var(--ink);font-weight:600}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr-main{position:relative;z-index:2;background:rgba(244,243,240,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr-in{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .word{font-weight:600;font-size:23px;letter-spacing:.01em}
.brand .word .h2{color:var(--terra)}
/* новый логотип — цельный вектор, высота задаёт размер, ширина по пропорции */
.brand .logo-full{display:block;height:34px;width:auto}
.logo-full .lg-mark{fill:#E67B55}
.logo-full .lg-word{fill:#485A48}
/* на тёмном фоне логотип целиком белый */
.dark .logo-full path,.on-dark .logo-full path{fill:#fff}
.ftr .brand .logo-full{height:30px}
.mark .house{fill:none;stroke:var(--ink);stroke-width:21;stroke-linejoin:round;stroke-linecap:round}
.cat-btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px 0 16px;border-radius:var(--pill);border:none;background:var(--ink);color:var(--cream);font-weight:600;font-size:15px;cursor:pointer;flex:none;transition:background .2s}
.cat-btn:hover{background:var(--ink-2)}
.cat-btn .x{display:none}
body.menu-open .cat-btn .b{display:none}body.menu-open .cat-btn .x{display:block}
.hdr-search{flex:1;position:relative}
.hdr-search input{width:100%;height:48px;padding:0 48px 0 46px;border:1px solid var(--line-2);border-radius:var(--pill);background:#fff;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.hdr-search input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(46,58,52,.07)}
.hdr-search>.ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.hdr-search .kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.hdr-actions{display:flex;gap:4px;flex:none}
.hact{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:80px;min-width:0;padding:6px 6px;border-radius:12px;font:inherit;font-size:12px;line-height:1.35;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s,background .2s}
.hact .ico{color:var(--ink)}
.hact:hover{background:var(--cream);color:var(--ink)}
.hact .cnt{position:absolute;top:1px;right:12px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--terra-ink);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.hact .cnt:empty,.hact .cnt[data-n="0"]{display:none}
.subnav{position:relative;z-index:1;background:rgba(244,243,240,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:transform .3s var(--ease),opacity .22s,box-shadow .3s}
.hdr.scrolled .subnav{box-shadow:0 8px 28px -18px rgba(46,58,52,.55)}
.subnav-in{display:flex;gap:26px;height:46px;align-items:center;font-size:15px;font-weight:500;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{color:var(--muted);white-space:nowrap;transition:color .2s}
.subnav a:hover,.subnav a.active{color:var(--ink)}
.subnav a.hot{color:var(--terra-ink);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.subnav .sp{flex:1}

/* ---------- mega menu ---------- */
.mega{position:fixed;left:0;right:0;top:var(--mega-top,160px);bottom:0;z-index:35;display:none}
body.menu-open .mega{display:block}
.mega-scrim{position:absolute;inset:0;background:rgba(34,44,38,.35)}
.mega-panel{position:relative;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sh-pop);max-height:calc(100% - 40px);overflow:auto}
.mega-in{display:grid;grid-template-columns:280px 1fr 300px;min-height:440px}
.mega-l{border-right:1px solid var(--line);padding:22px 0}
.mega-l a{display:flex;align-items:center;gap:12px;padding:11px 24px 11px 28px;font-weight:500;color:var(--ink);position:relative}
.mega-l a .chev{margin-left:auto;color:var(--muted)}
.mega-l a:hover,.mega-l a.on{background:var(--cream)}
.mega-l a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--terra)}
.mega-l .sep{height:1px;background:var(--line);margin:12px 28px}
.mega-l a.minor{color:var(--muted);font-size:14px;padding-top:8px;padding-bottom:8px}
.mega-l a.minor.hot{color:var(--terra-ink)}
.mega-c{padding:28px 36px}
.mega-c h4{font-family:var(--display);font-size:30px;font-weight:500;display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.mega-c h4 a{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--terra-ink)}
.mega-cols{columns:3;column-gap:32px}
.mega-grp{break-inside:avoid;margin-bottom:22px}
.mega-grp b{display:block;font-size:14px;margin-bottom:6px}
.mega-grp a{display:block;font-size:14px;color:var(--muted);padding:3px 0}
.mega-grp a:hover{color:var(--ink)}
.mega-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mega-r{padding:22px 24px 22px 0}
.promo-tile{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:300px;border-radius:var(--r-lg);padding:24px;color:var(--cream);background:linear-gradient(160deg,#3b4a42,#2E3A34);position:relative;overflow:hidden}
.promo-tile .eyebrow{color:var(--terra-soft)}
.promo-tile h5{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.1;margin:8px 0 10px}
.promo-tile p{font-size:14px;opacity:.8}
.promo-tile .deco{position:absolute;top:18px;right:18px;opacity:.9}

/* ---------- search overlay ---------- */
.sov{position:fixed;inset:0;z-index:60;display:none;background:rgba(34,44,38,.4)}
.sov.open{display:block}
.sov-panel{background:var(--paper);max-height:88vh;overflow:auto;box-shadow:var(--sh-pop)}
.sov-top{display:flex;gap:14px;align-items:center;padding:18px 0}
.sov-top .hdr-search input{height:52px;font-size:17px}
.sov-close{width:46px;height:46px;border-radius:50%;border:none;background:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sov-body{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:10px 0 34px}
.sov h6{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--line);margin:18px 0 10px}
.sov h6:first-child{margin-top:0}
.sov-list a{display:flex;gap:10px;align-items:center;padding:7px 0;font-weight:500}
.sov-list a:hover{color:var(--terra-ink)}
.sov-list .ico{color:var(--muted)}
.sov-list mark{background:none;color:var(--terra-ink);font-weight:700}
.sov-prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sov-prod a{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:8px;border-radius:14px}
.sov-prod a:hover{background:var(--cream)}
.sov-prod .ph{width:64px;height:64px;border-radius:12px}
.sov-prod b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.sov-prod span{font-size:14px;font-weight:700}

/* ---------- drawers & modals ---------- */
.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer.open{display:block}
.drawer .scrim,.modal .scrim{position:absolute;inset:0;background:rgba(34,44,38,.42);animation:fadein .2s}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--paper);display:flex;flex-direction:column;box-shadow:var(--sh-pop);animation:slidein .28s cubic-bezier(.2,.7,.2,1)}
.drawer.left .drawer-panel{right:auto;left:0;animation-name:slideinl}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--display);font-weight:500;font-size:30px}
.drawer-body{flex:1;overflow:auto;padding:8px 26px}
.drawer-foot{border-top:1px solid var(--line);padding:18px 26px 22px;background:var(--paper)}
.x-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.x-btn:hover{background:var(--sand)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
@keyframes slideinl{from{transform:translateX(-40px);opacity:0}}
@keyframes fadein{from{opacity:0}}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{position:relative;background:var(--paper);border-radius:var(--r-lg);width:min(460px,100%);max-height:90vh;overflow:auto;padding:30px;box-shadow:var(--sh-pop);animation:pop .22s ease}
.modal-box.wide{width:min(860px,100%)}
.modal-box>.x-btn{position:absolute;top:16px;right:16px}
.modal-box h3{font-family:var(--display);font-weight:500;font-size:32px;line-height:1.1;margin-bottom:6px;padding-right:40px}
@keyframes pop{from{transform:scale(.97);opacity:0}}

/* mini cart lines */
.mline{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.mline .ph{width:76px;height:76px;border-radius:12px}
.mline h5{font-size:15px;font-weight:600;line-height:1.3;padding-right:26px;position:relative}
.mline h5 .rm{position:absolute;right:0;top:0;background:none;border:none;color:var(--muted);cursor:pointer}
.mline h5 .rm:hover{color:var(--err)}
.mline .opts{font-size:13px;color:var(--muted);margin:3px 0 8px;display:flex;gap:8px;align-items:center}
.mline .row{display:flex;justify-content:space-between;align-items:center}
.mline .pr{font-weight:700}
.mline .pr s{font-weight:400;color:var(--muted);font-size:13px;margin-right:6px}
.progress{height:6px;border-radius:3px;background:var(--sand);overflow:hidden;margin:8px 0 4px}
.progress i{display:block;height:100%;background:var(--terra);border-radius:3px;transition:width .4s}
.goal{font-size:13px;color:var(--muted)}
.goal b{color:var(--ink)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:4px 0}
.sum-row.total{font-size:18px;font-weight:700;padding-top:10px}
.sum-row .disc{color:var(--terra-dark)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:var(--pill);font-weight:600;font-size:15px;font-family:var(--sans);cursor:pointer;border:none;transition:transform .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:0 8px 20px -10px rgba(46,58,52,.55)}
.btn-primary:hover{transform:translateY(-2px);background:var(--ink-2)}
.btn-terra{background:var(--terra-dark);color:#fff}
.btn-terra:hover{transform:translateY(-2px);background:#A44E35}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-soft{background:var(--cream);color:var(--ink)}
.btn-soft:hover{background:var(--sand)}
.btn-link{background:none;height:auto;padding:0;color:var(--terra-ink);font-weight:600}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-lg{height:56px;padding:0 32px;font-size:16px}
/* на узком экране длинная надпись переносится, а не вылезает за край */
.btn{max-width:100%}
@media(max-width:400px){.btn:not(.btn-icon){white-space:normal;text-align:center;line-height:1.25}.btn:not(.btn-icon):not(.btn-sm){height:auto;min-height:48px;padding-block:8px}.btn-lg:not(.btn-icon){min-height:56px}.btn-sm:not(.btn-icon){height:auto;min-height:38px;padding-block:6px}}
.btn-block{width:100%}
.btn-icon{width:44px;height:44px;padding:0;border-radius:50%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{color:var(--terra-ink);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.link:hover{gap:10px}
.link{transition:gap .2s}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.flabel{font-size:13px;font-weight:600;color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted)}
.field .err{font-size:13px;color:var(--err)}
.inp,.field input,.field select,.field textarea{width:100%;height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:110px;padding:12px 16px;resize:vertical}
.inp:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(46,58,52,.07)}
.field.bad input{border-color:var(--err)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer;line-height:1.4}
.check input{appearance:none;width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:6px;background:#fff;flex:none;cursor:pointer;display:grid;place-content:center;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;margin-top:-1px}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--cream);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--cream);transform:none}
.check .n{margin-left:auto;color:var(--muted);font-size:13px}
.check.off{opacity:.4;pointer-events:none}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;cursor:pointer}
.switch input{appearance:none;width:40px;height:24px;border-radius:12px;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked{background:var(--ink)}
.switch input:checked::after{transform:translateX(16px)}
.opt-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:10px}
.opt-card:hover{border-color:var(--line-2)}
.opt-card.on{border-color:var(--ink);background:#fff}
.opt-card .t{font-weight:600}
.opt-card .d{font-size:13px;color:var(--muted)}
.opt-card .p{margin-left:auto;font-weight:700;white-space:nowrap}
.seg{display:inline-flex;background:var(--cream);border-radius:var(--pill);padding:4px;gap:2px}
.seg button{border:none;background:none;height:36px;padding:0 15px;border-radius:var(--pill);font-weight:500;font-size:14px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 2px 6px rgba(46,58,52,.12)}

/* ---------- chips / badges / tags ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--paper);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s,opacity .18s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip.soft{background:var(--cream);border-color:transparent}
.chip .x{opacity:.6}
.badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:var(--terra-dark);color:#fff;line-height:1.3}
.badge.new{background:var(--ink)}
.badge.sale{background:var(--terra-dark)}
.badge.eco{background:var(--ok)}
.badge.soft{background:var(--cream);color:var(--ink)}
.badge.out{background:#fff;color:var(--muted);border:1px solid var(--line)}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--terra-ink);letter-spacing:.02em}
.pill-note{display:inline-flex;gap:8px;align-items:center;background:var(--cream);border-radius:var(--pill);padding:6px 14px;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}

/* ---------- placeholders (instead of photos) ---------- */
.ph{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(46,58,52,.55)}
.ph img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph svg.art{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 6px 10px rgba(46,58,52,.08))}
/* в тон фону «Камень» */.ph.t1{background:radial-gradient(120% 100% at 30% 20%,#F8F7F4,#E8E4DD)}
.ph.t2{background:radial-gradient(120% 100% at 30% 20%,#F4F6F3,#E0E5DF)}
.ph.t3{background:radial-gradient(120% 100% at 30% 20%,#F7F5F1,#E6E0D7)}
.ph.t4{background:radial-gradient(120% 100% at 30% 20%,#F6F2EE,#E6DCD3)}
.ph.t5{background:radial-gradient(120% 100% at 30% 20%,#F0F1EF,#DCE0DB)}
.ph.t6{background:radial-gradient(120% 100% at 30% 20%,#3F4D45,#2E3A34);color:rgba(245,239,230,.7)}
.ph.wide{aspect-ratio:16/9}.ph.tall{aspect-ratio:4/5}.ph.story{aspect-ratio:3/4}

/* ---------- layout helpers ---------- */
.section{padding-top:72px;padding-bottom:72px}
.section.tight{padding-top:44px;padding-bottom:44px}
.section.cream{background:var(--cream)}
.section.dark{background:var(--ink);color:var(--cream)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:var(--h-sec);line-height:1.08}
.sec-head p{color:var(--muted);max-width:520px;margin-top:6px}
.sec-head .nav-arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s}
.arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.stack>*+*{margin-top:14px}

/* ---------- page head / crumbs ---------- */
.page-head{background:radial-gradient(120% 130% at 78% 20%,#FCF4EA 0%,var(--cream) 60%);border-bottom:1px solid var(--line)}
.page-head-in{padding-top:30px;padding-bottom:34px}
.page-head.plain{background:none;border:none}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.page-head h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.4vw,54px);line-height:1.04}
.page-head h1 sup{font-family:var(--sans);font-size:15px;color:var(--muted);font-weight:500;vertical-align:super;margin-left:6px}
.page-head .lead{color:var(--muted);font-size:17px;margin-top:10px;max-width:620px}

/* ---------- product card ---------- */
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);transition:transform .22s}
.pcard .media{position:relative;margin-bottom:12px}
.pcard .media .ph{border-radius:var(--r-lg);transition:box-shadow .25s}
.pcard:hover .media .ph{box-shadow:var(--sh-2)}
.pcard .alt{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.pcard:hover .alt{opacity:1}
.fav{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:none;background:rgba(244,243,240,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:transform .15s,color .15s}
.fav:hover{transform:scale(1.08)}
.fav.on{color:var(--terra)}
.fav.on .ico{fill:var(--terra)}
.quick{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;opacity:0;transform:translateY(6px);transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s}
.pcard:hover .quick{opacity:1;transform:none}
.quick .btn{width:100%;height:40px;font-size:14px;background:rgba(244,243,240,.95);color:var(--ink);box-shadow:0 6px 16px -8px rgba(46,58,52,.4)}
.pcard .swatches{display:flex;gap:5px;margin-bottom:6px}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(46,58,52,.18);display:inline-block}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:4px}
.pcard .meta .star{color:var(--terra)}
.pcard h3{font-size:15px;font-weight:600;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pcard h3 a:hover{color:var(--terra-ink)}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-size:19px;font-weight:700}
.price.sale{color:var(--terra-dark)}
.old{font-size:14px;color:var(--muted);text-decoration:line-through}
.bonus{font-size:13px;color:var(--ok);font-weight:600}
.pcard .buy{margin-top:12px;display:flex;gap:8px}
.pcard .buy .btn{flex:1;height:42px;font-size:14px}
.pcard.out .ph{filter:grayscale(.5) opacity(.7)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden;height:42px;background:#fff}
.qty button{width:40px;height:100%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty button:hover{background:var(--cream)}
.qty span{min-width:34px;text-align:center;font-weight:700}
.qty.sm{height:34px}.qty.sm button{width:32px}
.qty.fill{flex:1;justify-content:space-between;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.qty.fill button:hover{background:var(--ink-2)}
/* list view */
.plist .pcard{flex-direction:row;gap:22px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.plist .pcard .media{width:180px;flex:none;margin:0}
.plist .pcard .body{flex:1;display:flex;flex-direction:column}
.plist .pcard .desc{display:block!important;font-size:14px;color:var(--muted);margin-bottom:10px}
.pcard .desc{display:none}
.plist .pcard .buy{margin-top:auto;max-width:280px}

/* ---------- category tiles ---------- */
.ctile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:24px;border-radius:var(--r-lg);background:var(--cream);box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s;overflow:hidden}
.ctile:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.ctile h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1}
.ctile p{font-size:14px;color:var(--muted);margin-top:4px}
.ctile .ico.xl{color:var(--ink)}
.ctile .cnt{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.ctile.c2{background:var(--sand)}.ctile.c3{background:var(--sage-bg)}.ctile.c4{background:var(--peach)}.ctile.c5{background:#EDE9E0}.ctile.c6{background:#E9E3EA}
.subtile{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r);background:#fff;border:1px solid var(--line);transition:border-color .2s,transform .2s}
.subtile:hover{border-color:var(--ink);transform:translateY(-2px)}
.subtile .ph{width:62px;height:62px;border-radius:12px;flex:none}
.subtile b{font-size:15px;font-weight:600;display:block;line-height:1.25}
.subtile span{font-size:13px;color:var(--muted)}

/* ---------- catalog layout + filters ---------- */
.cat-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:36px;align-items:start}
.filters{position:sticky;top:calc(var(--hdr-h,124px) + 16px);max-height:calc(100vh - var(--hdr-h,124px) - 32px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;cursor:pointer}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary .ico{transition:transform .2s;color:var(--muted)}
.fgroup[open]>summary .ico{transform:rotate(180deg)}
.fgroup>summary .cnt{margin-left:auto;margin-right:8px;background:var(--terra-ink);color:#fff;font-size:11px;border-radius:9px;padding:0 7px;line-height:18px}
.fbody{padding-top:12px;display:flex;flex-direction:column;gap:10px}
.fbody .more{font-size:14px;font-weight:600;color:var(--terra-ink);background:none;border:none;text-align:left;cursor:pointer;padding:0}
.fsearch{position:relative}
.fsearch input{height:38px;font-size:14px;padding-left:36px;border-radius:10px}
.fsearch .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.subcats a{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:2px 0}
.subcats a:hover,.subcats a.on{color:var(--ink)}
.subcats a.on{font-weight:700}
.subcats a span{font-size:13px}
.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price-inputs .inp{height:40px;font-size:14px;padding:0 12px}
.hist{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:4px}
.hist i{flex:1;background:var(--sand);border-radius:2px 2px 0 0}
.hist i.in{background:var(--terra-soft)}
.range{position:relative;height:22px}
.range input{position:absolute;inset:0;width:100%;appearance:none;background:none;pointer-events:none}
.range input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.range input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:pointer}
.range .track{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--line)}
.range .fill{position:absolute;top:9px;height:4px;border-radius:2px;background:var(--ink)}
.swatch-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer;background:none;border:none}
.swatch i{width:30px;height:30px;border-radius:50%;border:1px solid rgba(46,58,52,.18);display:block;position:relative;transition:box-shadow .15s}
.swatch.on i{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.swatch.off{opacity:.3;pointer-events:none}
.size-grid{display:flex;flex-wrap:wrap;gap:6px}
.size-grid button{min-width:44px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.size-grid button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.size-grid button.off{color:var(--muted);text-decoration:line-through;opacity:.5;pointer-events:none}
.rating-opt{display:flex;gap:4px;align-items:center;color:var(--terra)}
.float-apply{position:absolute;left:100%;margin-left:14px;white-space:nowrap;z-index:5;box-shadow:var(--sh-pop)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .count{color:var(--muted);font-size:14px}
.toolbar .sp{flex:1}
.sel{position:relative;display:inline-flex}
.sel select{appearance:none;height:40px;padding:0 38px 0 16px;border:1px solid var(--line-2);border-radius:var(--pill);background:var(--paper);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;outline:none}
.sel .ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.view-toggle{display:flex;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden}
.view-toggle button{width:42px;height:38px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.view-toggle button.on{background:var(--ink);color:var(--cream)}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.active-filters .chip{height:32px;font-size:13px}
.quickchips{margin-bottom:18px}
.m-filter-btn{display:none}
.load-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px}
.load-more .of{font-size:14px;color:var(--muted)}
.pager{display:flex;gap:6px;align-items:center}
.pager a,.pager span{min-width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.pager a:hover{background:var(--cream)}
.pager .on{background:var(--ink);color:var(--cream)}
.empty{text-align:center;padding:60px 20px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg)}
.empty .ico.xl{color:var(--sage);margin:0 auto 14px}
.empty h3{font-family:var(--display);font-weight:500;font-size:28px;margin-bottom:6px}
.empty p{color:var(--muted);margin-bottom:18px}
.seo-text{columns:2;column-gap:40px;color:var(--muted);font-size:15px}
.seo-text h2{column-span:all;font-family:var(--display);font-weight:500;font-size:30px;color:var(--ink);margin-bottom:14px}
.seo-text p{margin-bottom:12px}

/* ---------- banners / promos ---------- */
.hero-slider{position:relative;border-radius:28px;overflow:hidden}
.slide{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:440px;padding:56px 64px;gap:30px;background:radial-gradient(120% 130% at 78% 28%,#FCF4EA 0%,var(--cream) 58%)}
.slide.dark{background:linear-gradient(135deg,#3b4a42,#2E3A34);color:var(--cream)}
.slide.dark .lead{color:rgba(245,239,230,.78)}
.slide.sage{background:radial-gradient(120% 130% at 78% 28%,#F2F5F0,#DCE4DA)}
.slide h1,.slide h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,68px);line-height:1.02;margin:14px 0 16px}
.slide h1 em,.slide h2 em{color:var(--terra);font-style:italic}
.slide .lead{font-size:17px;color:var(--muted);max-width:440px;margin-bottom:28px}
.slide .art{display:flex;justify-content:center}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dots button{width:28px;height:4px;border-radius:2px;border:none;background:var(--line-2);cursor:pointer;transition:width .3s,background-color .3s}
.dots button.on{width:48px;background:var(--ink)}
.promo-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.promo-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.promo-card .ph{border-radius:0;aspect-ratio:16/9}
.promo-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo-card h3{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.12}
.promo-card p{font-size:14px;color:var(--muted)}
.promo-card .when{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding-top:8px}
.promo-card .when b{color:var(--ink)}
.promo-card.ended{opacity:.6}
.timer{display:inline-flex;gap:6px}
.timer span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.12);font-size:22px;font-weight:700;line-height:1}
.timer span small{font-size:11px;font-weight:500;opacity:.7;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.timer.light span{background:var(--cream)}
.usp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.usp div{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:var(--r);background:var(--cream)}
.usp .ico{color:var(--terra);width:28px;height:28px}
.usp b{display:block;font-size:15px}
.usp span{font-size:13px;color:var(--muted)}

/* ---------- content cards (journal, recipes, news, ideas) ---------- */
.acard{display:flex;flex-direction:column;gap:12px}
.acard .ph{border-radius:var(--r-lg)}
.acard .kick{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.acard .kick .tag{font-size:12px}
.acard h3{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.15}
.acard:hover h3{color:var(--terra-ink)}
.acard p{font-size:14px;color:var(--muted)}
.acard.big h3{font-size:34px}
.rcard .ph{position:relative}
.rcard .facts{position:absolute;left:12px;top:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px}
.rcard .facts span{display:inline-flex;gap:5px;align-items:center;background:rgba(244,243,240,.92);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink)}
.ncard{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.ncard .date{font-family:var(--display);font-size:34px;line-height:1;color:var(--terra-dark)}
.ncard .date small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px}
.ncard h3{font-size:18px;font-weight:700;margin-bottom:4px}
.ncard:hover h3{color:var(--terra-ink)}
.idea-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden}
.idea-card .ph{border-radius:0;aspect-ratio:3/4}
.idea-card .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(to top,rgba(34,44,38,.78),rgba(34,44,38,0));color:var(--cream)}
.idea-card .cap h3{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.1}
.idea-card .cap span{font-size:13px;opacity:.85}
.hotspot{position:absolute;width:28px;height:28px;border-radius:50%;background:rgba(244,243,240,.95);border:none;cursor:pointer;box-shadow:0 0 0 6px rgba(244,243,240,.35);display:flex;align-items:center;justify-content:center;animation:pulse 2.4s infinite;z-index:3}
.hotspot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--terra)}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(244,243,240,.15)}}
.hs-pop{position:absolute;z-index:4;background:var(--paper);border-radius:14px;padding:10px;display:grid;grid-template-columns:56px 1fr;gap:10px;width:250px;box-shadow:var(--sh-pop);font-size:14px}
.hs-pop .ph{width:56px;height:56px;border-radius:10px}

/* ---------- prose (articles, legal, info) ---------- */
.prose{max-width:720px;font-size:17px;line-height:1.75}
.prose>*+*{margin-top:1em}
.prose h2{font-family:var(--display);font-weight:500;font-size:var(--h-sub);line-height:1.15;margin-top:1.6em}
.prose h3{font-size:20px;font-weight:700;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.35em}
.prose a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.35;padding-left:22px;border-left:2px solid var(--terra)}
.prose .note{background:var(--cream);border-radius:var(--r);padding:18px 22px;font-size:16px}
.prose table,.tbl{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td,.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th,.tbl th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.toc{position:sticky;top:calc(var(--hdr-h,124px) + 16px);font-size:14px}
.toc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{display:block;padding:6px 0 6px 14px;border-left:2px solid var(--line);color:var(--muted)}
.toc a:hover,.toc a.on{color:var(--ink);border-color:var(--terra)}
.side-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.side-layout.right{grid-template-columns:1fr 300px}
.side-nav{position:sticky;top:calc(var(--hdr-h,124px) + 16px);display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:500;color:var(--muted)}
.side-nav a:hover{background:var(--cream);color:var(--ink)}
.side-nav a.on{background:var(--cream);color:var(--ink);font-weight:700}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:600;font-size:17px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .2s;flex:none}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details>div{padding:0 0 22px;color:var(--muted);max-width:760px}
.steps{counter-reset:s;display:grid;gap:18px}
.steps>li{list-style:none;counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:16px}
.steps>li::before{content:counter(s);width:48px;height:48px;border-radius:50%;background:var(--cream);color:var(--terra);font-family:var(--display);font-size:26px;display:flex;align-items:center;justify-content:center}
.kv{display:grid;grid-template-columns:220px 1fr;gap:0;font-size:15px}
.kv dt,.kv dd{padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500}
.info-card{padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.info-card .ico.lg{color:var(--terra);margin-bottom:12px}
.info-card h3{font-size:17px;font-weight:700;margin-bottom:6px}
.info-card p{font-size:15px;color:var(--muted)}
.callout{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--cream);font-size:15px}
.callout .ico{color:var(--terra);flex:none}
.callout.dark{background:var(--ink);color:var(--cream)}

/* ---------- subscribe ---------- */
.subscribe{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:48px 56px;border-radius:28px;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.subscribe h2{font-family:var(--display);font-weight:500;font-size:var(--h-sec);line-height:1.1}
.subscribe p{color:rgba(245,239,230,.75);margin-top:8px}
.subscribe form{display:flex;gap:10px}
.subscribe input{flex:1;height:52px;border-radius:var(--pill);border:1px solid rgba(245,239,230,.25);background:rgba(255,255,255,.06);color:var(--cream);padding:0 20px;font:inherit;outline:none}
.subscribe input::placeholder{color:rgba(245,239,230,.5)}
.subscribe small{display:block;font-size:12px;color:rgba(245,239,230,.55);margin-top:10px}

/* ---------- footer ---------- */
.ftr{background:var(--cream);border-top:1px solid var(--line);margin-top:0}
.ftr-in{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:30px;padding:56px 0 36px}
.ftr .about p{font-size:14px;color:var(--muted);margin:14px 0 18px;max-width:280px}
.ftr .motto{font:500 12px/1 var(--sans);letter-spacing:3px;color:#5E6E62;text-transform:uppercase;margin-top:14px}
.ftr .about .socials{margin-top:26px}
.ftr h5{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:var(--ink)}
.ftr .col a{display:block;font-size:14px;color:var(--muted);padding:4px 0}
.ftr .col a:hover{color:var(--ink)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s}
.socials a:hover{background:var(--ink);color:var(--cream)}
/* компактный набор для верхней панели: она 38 px высотой, кружки 38 px туда не влезают */
.socials.tiny{gap:6px}
.socials.tiny a{width:28px;height:28px;background:none;border:none;color:var(--muted)}
.socials.tiny a:hover{background:none;color:var(--ink)}
.mp-links{display:flex;gap:8px;margin-top:12px}
.mp-links a,.mp-links .soon{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--pill);background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:600}
.mp-links .soon{color:var(--muted);font-weight:500;cursor:default}
.pay-icons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay-icons span{height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--line);background:var(--paper);font-size:11px;font-weight:700;display:flex;align-items:center;color:var(--muted)}
.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 26px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ftr-bot a{text-decoration:underline}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}

/* ---------- toast ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:var(--pill);font-weight:600;font-size:14px;transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:90;background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:var(--pill);font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;box-shadow:var(--sh-pop);transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s,opacity .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast a{color:var(--terra-soft);font-weight:700;pointer-events:auto}

/* ---------- product page ---------- */
.pp{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;position:sticky;top:calc(var(--hdr-h,124px) + 16px)}
/* миниатюры не растягивают страницу: колонка высотой с главное фото, лишнее — прокруткой */
.gallery .thumbs{display:flex;flex-direction:column;gap:10px;height:0;min-height:100%;overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.gallery .thumbs button{flex:none}
.gallery .thumbs button{padding:0;border:2px solid transparent;border-radius:14px;background:none;cursor:pointer;overflow:hidden}
.gallery .thumbs button.on{border-color:var(--ink)}
.gallery .thumbs .ph{border-radius:12px}
.gallery .main{position:relative}
.gallery .main .ph{border-radius:var(--r-lg);aspect-ratio:4/5}
.pp-info h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin:6px 0 12px}
.pp-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.pp-top .star{color:var(--terra)}
.pp-price{display:flex;align-items:baseline;gap:12px;margin:22px 0 4px}
.pp-price .now{font-size:34px;font-weight:700}
.pp-price .old{font-size:19px}
.pp-price .off{background:var(--terra-dark);color:#fff;font-size:13px;font-weight:700;border-radius:20px;padding:3px 10px}
.opt-label{font-size:14px;font-weight:600;margin:22px 0 10px;display:flex;justify-content:space-between}
.opt-label span{font-weight:500;color:var(--muted)}
.color-opts{display:flex;gap:10px;flex-wrap:wrap}
.color-opts button{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;padding:0;position:relative}
.color-opts button i{position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(46,58,52,.15)}
.color-opts button.on{box-shadow:0 0 0 2px var(--ink)}
.pp-buy{display:flex;gap:12px;margin-top:24px}
.pp-buy .btn-primary{flex:1}
.pp-perks{display:grid;gap:10px;margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--cream)}
.pp-perks div{display:flex;gap:12px;align-items:center;font-size:14px}
.pp-perks .ico{color:var(--terra)}
.pp-perks b{font-weight:600}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto}
.tabs button,.tabs a{border:none;background:none;padding:14px 0;font-weight:600;font-size:16px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs .on{color:var(--ink);border-color:var(--terra)}
.tabs sup{font-size:11px;color:var(--muted);margin-left:3px}
.review{padding:22px 0;border-bottom:1px solid var(--line)}
.review .who{display:flex;gap:12px;align-items:center;margin-bottom:8px;font-size:14px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--terra)}
.stars{color:var(--terra);display:inline-flex;gap:2px;vertical-align:-2px}
.star .ico{vertical-align:-2px}
.bars div{display:grid;grid-template-columns:32px 1fr 36px;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:6px}
.bars i{display:block;height:6px;border-radius:3px;background:var(--sand);position:relative;overflow:hidden}
.bars i b{position:absolute;inset:0 auto 0 0;background:var(--terra);border-radius:3px}

/* ---------- account ---------- */
.acc-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.acc-card{padding:22px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.lvl{padding:26px;border-radius:var(--r-lg);background:linear-gradient(135deg,#3b4a42,#2E3A34);color:var(--cream);position:relative;overflow:hidden}
.lvl .eyebrow{color:var(--terra-soft)}
.lvl h3{font-family:var(--display);font-weight:500;font-size:34px;margin:6px 0}
.lvl .progress{background:rgba(255,255,255,.14)}
.order-row{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}
.status{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;padding:4px 12px;border-radius:20px;background:var(--cream)}
.status.ok{background:#E3EDE5;color:#3F6B4B}
.status.wait{background:#F6EBD6;color:#8A6420}
.status.go{background:#E4E9F1;color:#3E5378}
.status.no{background:#F3E1DB;color:var(--err)}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:20px 0}
.timeline div{text-align:center;font-size:13px;color:var(--muted);position:relative;padding-top:30px}
.timeline div::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;border-radius:50%;background:var(--line-2);transform:translateX(-50%);z-index:1}
.timeline div::after{content:"";position:absolute;top:14px;left:-50%;right:50%;height:2px;background:var(--line-2)}
.timeline div:first-child::after{display:none}
.timeline div.done{color:var(--ink);font-weight:600}
.timeline div.done::before,.timeline div.done::after{background:var(--terra)}

/* ---------- checkout ---------- */
.co-layout{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
.co-step{padding:26px 28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);margin-bottom:18px}
.co-step h3{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:700;margin-bottom:18px}
.co-step h3 i{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--cream);font-style:normal;font-size:14px;display:flex;align-items:center;justify-content:center}
.co-sum{position:sticky;top:calc(var(--hdr-h,124px) + 16px);padding:26px;border-radius:var(--r-lg);background:var(--cream)}
.promo-inp{display:flex;gap:8px;margin:14px 0}
.promo-inp .inp{height:44px}
.stepper{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px}
.stepper b{color:var(--ink)}

/* ---------- ui kit ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.icon-grid div{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:11px;color:var(--muted);text-align:center;word-break:break-all}
.icon-grid .ico{width:28px;height:28px;color:var(--ink)}
.swatch-row{display:flex;gap:12px;flex-wrap:wrap}
.swatch-row div{width:130px;border-radius:14px;overflow:hidden;border:1px solid var(--line);font-size:12px}
.swatch-row i{display:block;height:70px}
.swatch-row span{display:block;padding:8px 10px}

/* ---------- route map ---------- */
.rmap{width:100%;border-collapse:collapse;font-size:14px}
.rmap th{position:sticky;top:0;background:var(--paper);text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line-2)}
.rmap td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rmap td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap}
.rmap tr.grp td{background:var(--cream);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.rmap a{color:var(--terra-ink);font-weight:600}
.src{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin:1px 2px 1px 0;white-space:nowrap}
.src.m{background:#E4E9F1;color:#3E5378}.src.c{background:#F6EBD6;color:#8A6420}.src.s{background:#E3EDE5;color:#3F6B4B}.src.n{background:#F3E1DB;color:var(--err)}

/* ============ responsive ============ */
@media(max-width:1100px){
  .topbar .hide-m{display:none}
  .hdr-actions .hact span.l{display:none}
  .hact{width:46px}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-in{grid-template-columns:250px 1fr}
  .mega-r{display:none}
  .ftr-in{grid-template-columns:1fr 1fr 1fr}
  .ftr .about{grid-column:1/-1}
}
@media(max-width:960px){
  .topbar .l .hide-m,.topbar .r .hide-m{display:none}
  .subnav{display:none}
  .hdr-in{height:64px;gap:12px}
  .cat-btn>span:last-child{display:none}
  .cat-btn{width:46px;padding:0;justify-content:center}
  .hdr-search .kbd{display:none}
  .g4,.usp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{grid-auto-columns:calc((100% - 20px)/2.2)}
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .filters{display:none}
  .filters.as-drawer{display:block;position:static;max-height:none;overflow:visible;padding:0}
  .m-filter-btn{display:inline-flex}
  .pp,.co-layout,.acc-layout,.side-layout,.side-layout.right{grid-template-columns:1fr}
  .gallery{position:static}
  .co-sum,.toc,.side-nav{position:static}
  .slide{grid-template-columns:1fr;padding:36px 28px;min-height:0}
  .slide .art{order:-1}
  .subscribe{grid-template-columns:1fr;padding:36px 28px}
  .mega{top:var(--mega-top,100px)}
  .mega-in{grid-template-columns:1fr}
  .mega-l{border-right:none}
  .mega-c{display:none}
  .mega.sub .mega-l{display:none}
  .mega.sub .mega-c{display:block;padding:18px 22px}
  .mega-cols{columns:1}
  .sov-body{grid-template-columns:1fr}
  .seo-text{columns:1}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(244,243,240,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);background:none;border:none}
  .tabbar .on{color:var(--ink)}
  .tabbar .cnt{position:absolute;top:-2px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:var(--terra-ink);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;padding:0 4px}
  .tabbar .cnt[data-n="0"]{display:none}
  body{padding-bottom:64px}
  .hdr-actions .hact.hide-m{display:none}
  .order-row{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{border:none;padding-bottom:0}
  .float-apply{display:none}
}
@media(max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .test-ribbon{font-size:12px}
  .topbar .r{display:none}
  .brand .word{font-size:20px}
  .brand .logo-full{height:28px}
  .hdr-search{display:none}
  .hdr-actions .hact.m-search{display:flex}
  .g2,.g3,.row2,.row3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usp{grid-template-columns:1fr}
  .rail{grid-auto-columns:calc((100% - 12px)/1.6);gap:12px}
  .section{padding-top:48px;padding-bottom:48px}
  .slide{padding:28px 20px}
  .slide h1,.slide h2{font-size:38px}
  .ftr-in{grid-template-columns:1fr 1fr}
  .pcard h3{font-size:14px}
  .price{font-size:17px}
  .pcard .buy .btn{height:38px;font-size:13px;padding:0 10px}
  .plist .pcard{flex-direction:column}
  .plist .pcard .media{width:100%}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .gallery .thumbs{flex-direction:row;order:2;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;padding:0 0 4px}
  .gallery .thumbs button{width:64px}
  .ncard{grid-template-columns:1fr;gap:6px}
  .timeline{grid-template-columns:repeat(5,minmax(0,1fr));font-size:10px}
  .modal-box{padding:24px 20px}
  .drawer-body,.drawer-head,.drawer-foot{padding-left:18px;padding-right:18px}
  .sov-prod{grid-template-columns:1fr}
  .co-step{padding:20px 18px}
  .rmap td:nth-child(4),.rmap th:nth-child(4){display:none}
}
.hact.m-search{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- добавки после сборки страниц ---------- */
.acc-layout>*,.side-layout>*,.co-layout>*,.pp>*{min-width:0}
.tbl-wrap{overflow-x:auto}
.promo-card .code{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--terra);border-radius:10px;padding:4px 10px;font-weight:700;letter-spacing:.06em;color:var(--terra-dark)}
.chip:disabled{opacity:.4;pointer-events:none}
@media(max-width:960px){.order-row>*{min-width:0}.side-nav.row{flex-direction:row;overflow-x:auto;scrollbar-width:none}.side-nav.row a{white-space:nowrap}}
.todo{color:var(--muted);font-style:italic;border-bottom:1.5px dashed var(--terra);overflow-wrap:anywhere}
.kv dd{overflow-wrap:anywhere}
.field.bad select,.field.bad textarea{border-color:var(--err)}
.check.bad input{border-color:var(--err)}
@media(max-width:600px){.g4 .info-card{padding:18px 14px;hyphens:auto;overflow-wrap:break-word}}
.prose .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.prose .tbl-wrap table{min-width:540px}
.prose .pcard h3{font-size:15px;margin-top:0}
.prose .pcard a{color:inherit;text-decoration:none}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media print{.test-ribbon,.topbar,.hdr,.mega,.sov,.drawer,.modal,.toast,.ftr,.tabbar,.to-top,.no-print{display:none!important}body{padding:0;background:#fff}}

/* ============================================================
   Полировка: состояния, фокус, движение, переходы.
   Правило: наведение — 200 мс, нажатие — мгновенно и чуть «вдавливает»,
   открытие слоёв — 240–280 мс с мягким замедлением, закрытие — 200 мс.
   ============================================================ */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-in:cubic-bezier(.4,0,1,1)}
html{-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--hdr-h,124px) + 20px)}
::selection{background:var(--terra-soft);color:var(--ink)}
body.lock{padding-right:var(--sbw,0)}
body.lock .hdr,body.lock .tabbar{padding-right:var(--sbw,0)}

/* переходы между страницами (Chrome, Edge, Safari 18+) — шапка остаётся на месте */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root){animation:.18s var(--ease-in) both vt-out}
::view-transition-new(root){animation:.28s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* фокус с клавиатуры — видно всегда, мышью — не мешает */
:focus{outline:none}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.btn:focus-visible,.chip:focus-visible,.hact:focus-visible,.arrow:focus-visible,.x-btn:focus-visible,.fav:focus-visible{outline-offset:2px}
.inp:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.hdr-search input:focus-visible{outline:none}

/* кнопки: наведение / нажатие / выключено / загрузка */
.btn{transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}
.btn-primary:hover{box-shadow:0 14px 26px -12px rgba(46,58,52,.6)}
.btn-terra:hover{box-shadow:0 14px 26px -12px rgba(217,132,82,.7)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97);transition-duration:.06s}
.btn-soft:active,.btn-ghost:active{background:var(--sand);color:var(--ink)}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.loading{color:transparent!important;pointer-events:none;position:relative}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--cream) var(--cream) transparent transparent;animation:spin .7s linear infinite}
.btn-ghost.loading::after,.btn-soft.loading::after{border-color:var(--ink) var(--ink) transparent transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .ico{transition:transform .2s var(--ease)}
.btn:hover .ico.go,.link:hover .ico{transform:translateX(3px)}
.chip{transition:background .18s,color .18s,border-color .18s,transform .12s}
.chip:active{transform:scale(.96)}
.hact:active,.arrow:active,.x-btn:active,.sov-close:active{transform:scale(.92)}
.hact,.arrow,.x-btn,.sov-close{transition:background .2s,color .2s,transform .12s,border-color .2s}
.arrow:disabled{opacity:.35;pointer-events:none}
.cat-btn:active{transform:scale(.97)}
.qty button{transition:background .15s}
.qty button:active{background:var(--sand)}
.qty.fill button:active{background:#1b231f}
.qty span{font-variant-numeric:tabular-nums}
.price,.pp-price .now,.sum-row,.timer span{font-variant-numeric:tabular-nums}

/* избранное: сердце «отпрыгивает» */
.fav{transition:transform .15s var(--ease),color .15s,background .2s}
.fav:hover{background:#fff}
.fav:active{transform:scale(.88)}
.fav.on .ico{animation:heart .45s var(--ease)}
@keyframes heart{0%{transform:scale(1)}35%{transform:scale(1.3)}65%{transform:scale(.92)}100%{transform:scale(1)}}

/* поля */
.inp,.field input,.field select,.field textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.inp:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(46,58,52,.36)}
.inp::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:disabled,.inp:disabled{background:var(--cream);color:var(--muted);cursor:not-allowed}
.check input{transition:background .15s,border-color .15s,transform .1s}
.check input:active{transform:scale(.9)}
.check:hover input:not(:checked){border-color:var(--ink)}
.switch input::after{transition:transform .22s var(--ease)}
.opt-card{transition:border-color .2s,background .2s,box-shadow .2s}
.opt-card.on{box-shadow:0 10px 24px -18px rgba(46,58,52,.5)}
.seg button{transition:background .2s,color .2s,box-shadow .2s}
.swatch i,.color-opts button{transition:box-shadow .18s,transform .15s}
.swatch:hover i{transform:scale(1.08)}
.size-grid button{transition:background .15s,color .15s,border-color .15s}
.size-grid button:hover{border-color:var(--ink)}

/* карточки: мягкий подъём, картинка чуть приближается */
.pcard .ph svg.art,.acard .ph svg.art,.rcard .ph svg.art,.idea-card .ph svg.art,.promo-card .ph svg.art,.subtile .ph svg.art{transition:transform .5s var(--ease)}
.pcard:hover .ph svg.art,.acard:hover .ph svg.art,.rcard:hover .ph svg.art,.idea-card:hover .ph svg.art,.promo-card:hover .ph svg.art,.subtile:hover .ph svg.art{transform:scale(1.07)}
.acard .ph,.idea-card{transition:box-shadow .25s}
.acard:hover .ph,.idea-card:hover{box-shadow:var(--sh-2)}
.acard h3,.ncard h3{transition:color .2s}
.ctile .ico.xl{transition:transform .35s var(--ease)}
.ctile:hover .ico.xl{transform:translateY(-3px) rotate(-4deg)}
.info-card{transition:border-color .2s,box-shadow .25s}
a.info-card:hover{border-color:var(--line-2);box-shadow:var(--sh-1)}

/* ссылки в тексте и подвале */
.ftr .col a,.topbar a,.crumbs a,.subnav a{transition:color .2s}
.subnav a{position:relative}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;border-radius:2px;background:var(--terra);transform:scaleX(0);transition:transform .25s var(--ease)}
.subnav a:hover::after,.subnav a.active::after{transform:scaleX(1)}
.tabs button,.tabs a{transition:color .2s,border-color .25s}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.crumbs span:last-child{color:var(--ink)}

/* шапка: при прокрутке вниз прячем строку разделов */
/* сжатая шапка: строка разделов уезжает под основную, место в потоке не меняется —
   страница не прыгает, и прокрутка не дёргает шапку туда-обратно */
.hdr.compact .subnav{transform:translateY(-100%);opacity:0;pointer-events:none;box-shadow:none}
.hdr.scrolled.compact .hdr-main{box-shadow:0 8px 28px -18px rgba(46,58,52,.55)}
@media(max-width:960px){.hdr.scrolled .hdr-main{box-shadow:0 8px 28px -18px rgba(46,58,52,.55)}}

/* слои: мега-меню, поиск, шторки, модалки — вход и выход */
body.menu-open .mega-panel{animation:drop .26s var(--ease)}
body.menu-open .mega-scrim{animation:fadein .22s}
.mega-pane:not([hidden]){animation:fadein .2s}
.mega-l a{transition:background .15s}
.sov.open{animation:fadein .2s}
.sov.open .sov-panel{animation:drop .26s var(--ease)}
.sov.closing{animation:fadeout .2s forwards}
.drawer.closing .drawer-panel{animation:slideout .2s var(--ease-in) forwards}
.drawer.left.closing .drawer-panel{animation-name:slideoutl}
.drawer.closing .scrim,.modal.closing .scrim{animation:fadeout .2s forwards}
.modal.closing .modal-box{animation:popout .2s var(--ease-in) forwards}
.drawer-panel{animation-timing-function:var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes fadeout{to{opacity:0}}
@keyframes slideout{to{transform:translateX(40px);opacity:0}}
@keyframes slideoutl{to{transform:translateX(-40px);opacity:0}}
@keyframes popout{to{transform:scale(.97);opacity:0}}
.drawer-body,.modal-box,.mega-panel,.sov-panel,.filters{overscroll-behavior:contain}

/* появление блоков при прокрутке (класс ставит app.js) */
.hh-rv{opacity:0;transform:translateY(18px)}
.hh-rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* карусели: плавная прокрутка, тонкий скролл, затухание края */
.rail{scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-padding-left:0}
.filters::-webkit-scrollbar,.drawer-body::-webkit-scrollbar,.mega-panel::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb,.mega-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.dots button:hover{background:var(--muted)}

/* кнопка «наверх» */
.to-top{position:fixed;right:24px;bottom:24px;z-index:44;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(244,243,240,.95);backdrop-filter:blur(8px);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease),background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink);color:var(--cream)}
@media(max-width:960px){.to-top{right:16px;bottom:calc(76px + env(safe-area-inset-bottom))}}

/* тосты — над нижней панелью на телефоне */
@media(max-width:960px){.toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}}

/* нижняя панель: нажатие */
.tabbar a,.tabbar button{transition:color .2s,transform .12s;cursor:pointer}
.tabbar a:active,.tabbar button:active{transform:scale(.92)}

@media(prefers-reduced-motion:reduce){.hh-rv{opacity:1!important;transform:none!important}@view-transition{navigation:none}}
.filters,.toc,.side-nav,.gallery,.co-sum{transition:top .28s var(--ease)}
/* поиск на телефоне: поле видно всегда, панель во весь экран */
.sov .hdr-search{display:block}
@media(max-width:600px){.sov-panel{height:100%;max-height:none}.sov-top{position:sticky;top:0;background:var(--paper);z-index:2;padding:12px 0}}
[hidden]{display:none!important}
/* подкатегории на телефоне — лента, чтобы товары были на первом экране */
@media(max-width:600px){
  #subtiles{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(210px,72%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scroll-padding-left:16px;margin-bottom:22px!important}
  #subtiles::-webkit-scrollbar{display:none}
  #subtiles>*{scroll-snap-align:start}
  #subtiles .subtile{padding:10px}
  #subtiles .subtile .ph{width:48px;height:48px}
}
.badges{max-width:calc(100% - 64px)}
/* телефон: товары всегда в две колонки, ленты вместо длинных столбиков */
@media(max-width:600px){
  .g3:has(>.pcard),.g2:has(>.pcard){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .pcard .media{margin-bottom:10px}
  .pcard .meta{font-size:11px}
  .pcard .meta>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:6px}
  .pcard .badge{font-size:11px;padding:3px 8px}
  .pcard .badges{top:8px;left:8px;gap:4px}
  .pcard .fav{top:6px;right:6px;width:34px;height:34px}
  .pcard .quick{display:none}
  .pcard .buy .qty{height:38px}
  .quickchips,.active-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .quickchips::-webkit-scrollbar,.active-filters::-webkit-scrollbar{display:none}
  .usp{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .usp div{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
  .g3:has(>.idea-card){grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding-left:16px;gap:12px}
  .g3:has(>.idea-card)>*{scroll-snap-align:start}
  .toolbar{gap:8px}
  .toolbar .sel select{height:38px;font-size:13px}
}
.cat-layout>*,.g2>*,.g3>*,.g4>*,.g5>*{min-width:0}

/* цифры в Cormorant — ровные, не «старинные» */
.h-display,.page-head h1,.sec-head h2,.slide h1,.slide h2,.promo-card h3,.lvl h3,.ncard .date,.drawer-head h3,.modal-box h3,.prose h2{font-variant-numeric:lining-nums}
.field.bad .err{display:block}
.inp.bad{border-color:var(--err)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#9c4832;transform:translateY(-2px)}

.subscribe>*,.subscribe input{min-width:0}
@media(max-width:600px){.subscribe{padding:28px 20px;gap:20px;border-radius:var(--r-lg)}.subscribe form{flex-direction:column}.subscribe input{flex:none;width:100%}.subscribe .btn{width:100%}}
.seg button:hover:not(.on){color:var(--ink)}
.seg button:active{transform:scale(.96)}
.pcard .body{flex:1;display:flex;flex-direction:column}
.pcard .buy{margin-top:auto;padding-top:12px}
.idea-card .cap{background:linear-gradient(to top,rgba(34,44,38,.9) 0%,rgba(34,44,38,.7) 55%,rgba(34,44,38,0) 100%);padding-top:60px}
.side-layout>aside{align-self:stretch}
.swatch{min-width:0;max-width:100%}
.swatch{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .price-row{margin-top:auto}
.pcard .meta>span:last-child{white-space:nowrap;flex:none}
.rail{padding-bottom:14px;margin-bottom:-10px}
@media(max-width:600px){.rail{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px}.toolbar .sel select{height:40px}}

/* ---------- cookie: баннер и настройки (assets/consent.js) ---------- */
.ck{position:fixed;left:24px;bottom:24px;z-index:70;width:min(420px,calc(100% - 48px));background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:22px 22px 16px;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ck.in{opacity:1;transform:none}
.ck.out{opacity:0;transform:translateY(16px);transition-duration:.25s}
.ck-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ck-head h2{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.1}
.ck-ico{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--peach);color:var(--terra-dark)}
.ck-ico .ico{width:24px;height:24px}
.ck-ico circle{fill:currentColor;stroke:none}
.ck p{font-size:14px;line-height:1.6;color:var(--ink)}
.ck p a,.ck-box a{color:var(--terra-ink);text-decoration:underline;text-underline-offset:2px}
.ck-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ck-act .btn{height:44px;padding:0 14px;font-size:14px}
.ck-link{display:block;margin:10px auto 0;background:none;border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:4px 8px}
.ck-link:hover{color:var(--ink)}
/* после первой страницы, пока выбора нет, — узкая полоса */
.ck-compact{display:flex;align-items:center;gap:14px;width:auto;max-width:calc(100% - 48px);padding:10px 12px 10px 14px;border-radius:var(--pill)}
.ck-compact .ck-ico{width:34px;height:34px}.ck-compact .ck-ico .ico{width:19px;height:19px}
.ck-compact p{white-space:nowrap}
.ck-compact .ck-act{display:flex;margin:0;align-items:center}
.ck-compact .ck-act .btn{height:38px;font-size:14px}
.ck-compact .ck-link{margin:0}
body.has-ck .to-top{opacity:0;pointer-events:none}
/* окно настроек */
.ck-box{width:min(540px,100%)}
.ck-lead{font-size:14px;margin:4px 0 18px}
.ck-cat{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;background:#fff}
.ck-cat .switch b{font-size:16px}
.ck-cat .switch small{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:var(--cream);border-radius:var(--pill);padding:2px 9px;vertical-align:2px}
.ck-cat.locked .switch{cursor:default}
.ck-cat.locked input{cursor:default;opacity:.55}
.ck-cat>p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:6px}
.ck-cat details{margin-top:8px}
.ck-cat summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink)}
.ck-cat summary::-webkit-details-marker{display:none}
.ck-cat summary .ico{transition:transform .2s var(--ease)}
.ck-cat details[open] summary .ico{transform:rotate(180deg)}
.ck-cat ul{list-style:none;margin-top:8px;border-top:1px dashed var(--line-2)}
.ck-cat li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.45}
.ck-cat code{font-size:11px;background:var(--cream);border-radius:6px;padding:1px 6px;color:var(--ink)}
.ck-cat li span{color:var(--muted)}
.ck-cat li em{font-style:normal;color:var(--ink);white-space:nowrap}
.ck-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ck-small{margin-top:12px;text-align:center;font-size:13px}
@media(max-width:960px){
  .ck{left:12px;right:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom));padding:18px 16px 12px}
  .ck-compact{border-radius:var(--r-lg);flex-wrap:wrap;max-width:none;padding:12px 14px}
  .ck-compact p{white-space:normal;flex:1}
  .ck-compact .ck-act{width:100%;display:grid;grid-template-columns:1fr 1fr auto}
}
@media(max-width:600px){
  .ck-head h2{font-size:23px}
  .ck-act .btn{font-size:14px;padding:0 10px}
  .ck-foot{grid-template-columns:1fr}
  .ck-cat li{grid-template-columns:1fr auto}.ck-cat li span{grid-column:1/-1;order:3}
}
@media(prefers-reduced-motion:reduce){.ck{transition:none}}
@media print{.ck{display:none!important}}
body.lock .ck{opacity:0;pointer-events:none}
/* товар «нет в продаже» (статус из админки): вместо цены — подпись, вместо «В корзину» — «В избранное» */
.price.nosale{font-size:15px;font-weight:600;color:var(--muted)}
.pp-price .now.nosale{font-size:22px;font-weight:600;color:var(--muted)}
.nosale-fav.on{background:var(--sand);color:var(--terra-dark)}

/* заголовки без «висячих» слов в последней строке; абзацы — без одиноких слов */
h1,h2,h3,.h-display{text-wrap:balance}
.prose p,.lead{text-wrap:pretty}

/* контраст (проверка Impeccable, 13.10): подписи на фото, плейсхолдеры, девиз */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.idea-card .cap>span:first-child{text-shadow:0 1px 8px rgba(0,0,0,.55)}
.gallery .main .cap{color:var(--ink)}
/* на тёмных плашках надзаголовки и ссылки — светлая терракота */
.dark .eyebrow,.cta .eyebrow,.subscribe .eyebrow,.promo-strip .eyebrow,.motto-band .eyebrow,.dark .link,.cta .link{color:var(--terra-soft)}

/* ---------- ПРИМЕРКА: льняной фон (включается ?bg=linen, выключается ?bg=off) ----------
   Фон чуть теплее и плотнее кремового, поверх — едва заметное переплетение нитей,
   как у небелёного льна. Цвета подобраны так, чтобы контраст текста остался ≥ 4,5:1. */
html.linen{--paper:#F7F1E6;--cream:#F2EADD;--sand:#ECE2D3}
html.linen body{background-color:var(--paper)}
html.linen body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.022' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.28 0 0 0 0.13 0'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.28 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");background-size:240px 240px}
html.linen .hdr,html.linen .tabbar{background-color:rgba(247,241,230,.94)}
/* ---------- ПРИМЕРКА других фонов (?bg=white | sage | oat | stone) ---------- */
/* Белый: страница белая, кремовый остаётся только в блоках — фото ярче, «чистый магазин» */
html.bg-white{--paper:#FFFFFF;--cream:#F6F2EC;--sand:#EFE9E0}
/* Шалфей: светлый тон фирменного зелёного — уходит от «типового бежевого», дружит с логотипом */
html.bg-sage{--paper:#F3F5F1;--cream:#E6ECE4;--sand:#DEE5DB;--peach:#E9EEE6}
/* Овсяный крафт: тёплая бумага с лёгким зерном, как упаковка и бирки */
html.bg-oat{--paper:#F4EEE4;--cream:#F0E8DB;--sand:#E9DFCF}
html.bg-oat body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.24 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
/* Камень: нейтральный тёплый серый, как глина и керамика — спокойнее кремового */
html.bg-stone{--paper:#F4F3F0;--cream:#EFECE7;--sand:#E6E2DB}
html.bg-cream{--paper:#FBF8F3;--cream:#F5EFE6;--sand:#EFE7DB}
/* Наш кремовый, на тон светлее: тот же характер, больше воздуха */
html.bg-light{--paper:#FDFBF8;--cream:#F8F4EE;--sand:#F2ECE3}
/* шапка в тон выбранному фону */
html.bg-cream .hdr-main,html.bg-light .hdr-main,html.bg-white .hdr-main,html.bg-sage .hdr-main,html.bg-oat .hdr-main,html.bg-stone .hdr-main,html.linen .hdr-main{background:color-mix(in srgb,var(--paper) 94%,transparent)}

/* ---------- карточка товара: белая рамка, фото со скруглением, «Купить на WB ›» (референс c&c, 13.10) ---------- */
.pcard{background:#fff;padding:10px 10px 14px;border-radius:22px;box-shadow:0 1px 0 rgba(46,58,52,.05);transition:transform .22s,box-shadow .25s}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.pcard:hover .media .ph{box-shadow:none}
.pcard .media{margin-bottom:12px}
.pcard .media .ph{border-radius:14px}
.pcard .body{padding:0 6px}
.pcard h3{font-weight:500;font-size:15px}
.pcard .buy{align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.pcard .buy .spec{font-size:13px;color:var(--muted);white-space:nowrap}
.pcard .buy .wb-go{flex:none;height:auto;padding:4px 0;background:none;border:none;font-weight:700;font-size:14px;color:var(--ink);gap:4px}
.wb-go .ico.go{display:none}
.pcard .buy .wb-go .ico{display:none}
.pcard .buy .wb-go .ico.go{display:block;margin-left:-1px;transition:transform .2s}
.pcard .buy .wb-go:hover{color:var(--terra-ink);transform:none}
.pcard .buy .wb-go:hover .ico.go{transform:translateX(3px)}
.pcard .meta{margin-bottom:2px}
.pcard{color:var(--ink)}
.pcard .buy{flex-wrap:wrap;row-gap:2px}
.pcard .buy .spec{white-space:normal;min-width:0}
@media (max-width:720px){.pcard{padding:6px 6px 12px;border-radius:18px}.pcard .media .ph{border-radius:12px}.pcard .body{padding:0 4px}.pcard .buy .wb-go{font-size:14px}}
/* карточка: фото чуть приближается при наведении — отклик «эту можно открыть» */
.pcard .media .ph img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pcard:hover .media .ph img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.pcard:hover .media .ph img{transform:none}}
/* при наведении — второе фото модели и плашка «Подробнее о модели ›» (вместо значка и «Быстрого просмотра») */
.pcard .alt .ph{border-radius:0;height:100%;aspect-ratio:auto}
.pcard .alt{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.pcard .look{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(244,243,240,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:30px;padding:8px 14px;font-weight:600;font-size:13px;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none}
.pcard .look{display:inline-flex;align-items:center;gap:1px}
.pcard:hover .look{opacity:1;transform:none}
@media (hover:none){.pcard .look,.pcard .alt{display:none}}

/* ===== Аудит дизайна 14.10.2026 — общие элементы ===== */
/* цифры в Cormorant: прямые, одной высоты (иначе «10» читается как «io») */
:root{font-variant-numeric:lining-nums}
/* хлебные крошки — одна строка, длинное последнее звено обрезается многоточием, «/» не висит в конце строки */
.crumbs{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.crumbs>*{flex:none}
.crumbs>:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* ссылка «Все …» у заголовка блока — на линии заголовка, а не подзаголовка */
.sec-head>.link,.sec-head>a.link{align-self:flex-start;padding-top:calc(clamp(30px,3.6vw,44px) * .54 - 12px)}
/* футер: пять равных колонок, контакты под логотипом */
.ftr-in{grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.ftr-contacts{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.ftr-contacts a{font-size:14px;color:var(--muted)}
.ftr-contacts a.tel{font-size:15px;font-weight:700;color:var(--ink)}
.ftr-contacts a:hover{color:var(--ink)}
.ftr .about .socials{margin-top:18px}
.city-btn{min-height:32px}
@media(max-width:1100px){.ftr-in{grid-template-columns:repeat(4,minmax(0,1fr))}.ftr .about{grid-column:1/-1}}
@media(max-width:960px){
  /* нижнее меню: пункты на всю ширину, сколько бы их ни было */
  .tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .tabbar a,.tabbar button{font-size:12px;min-height:44px;justify-content:center}
  /* место под нижнее меню — внутри футера, а не полосой фона под ним */
  body{padding-bottom:0}
  .ftr-bot{padding-bottom:calc(26px + 64px + env(safe-area-inset-bottom,0px))}
  /* шапка: логотип слева, кнопки справа */
  .hdr-in .brand{margin-right:auto}
}
@media(max-width:720px){
  .ftr-in{grid-template-columns:1fr 1fr}
  .pcard .buy .btn,.pcard .buy a{min-height:40px}
  .dots button{position:relative}
  .dots button::after{content:"";position:absolute;inset:-14px -4px}
}
/* заглушки без фото (рецепты, новости, уход): тише и аккуратнее — тонкий значок по центру, льняная фактура */
.ph svg.art{width:30%;height:30%;max-width:120px;max-height:120px;stroke-width:1.4;opacity:.5;filter:none}
.ph:has(svg.art)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(46,58,52,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(46,58,52,.02) 0 1px,transparent 1px 5px)}
.ph.t6 svg.art{opacity:.6}
@media(max-width:720px){
  /* на странице «Идеи для дома» подборки — списком, а не каруселью (на главной карусель остаётся) */
  .g3.i-grid:has(>.idea-card){grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;overflow:visible;margin-left:0;margin-right:0;padding:0;gap:16px}
}

/* фото товара в карточке каталога: мышью или свайпом, полоски — номер фото (16.10.2026) */
.pcard .shots{position:absolute;inset:0;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:inherit}
.pcard .shots::-webkit-scrollbar{display:none}
.pcard .shots img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;user-select:none;-webkit-user-drag:none}
.pcard .shot-bars{position:absolute;left:12px;right:12px;bottom:8px;z-index:2;display:flex;gap:4px;pointer-events:none;opacity:0;transition:opacity .2s}
.pcard .shot-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.18)}
.pcard .shot-bars i.on{background:#fff}
.pcard:hover .shot-bars{opacity:1}
.pcard .look{bottom:20px}
@media (hover:none){.pcard .shot-bars{opacity:1}}
.pcard:hover .media .shots img{transform:none}
.pcard .shots{scroll-behavior:auto}
/* с мышью фото листаются наведением — полоса не прокручивается сама и не ловит фокус клавиатуры */
@media (hover:hover) and (pointer:fine){.pcard .shots{overflow-x:hidden}}

/* ---------- область нажатия на телефоне не меньше 44 px (21.10, проверка UX) ----------
   Видимый размер кнопок не меняется: растёт невидимая зона вокруг или отступы у ссылок. */
@media (max-width:960px){
  .pcard .fav::after,.city-btn::after,.hact.m-search::after,.socials a::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .city-btn,.hact.m-search,.socials a{position:relative}
  .city-btn::after{width:100%;min-width:44px}
  .ftr .col a{padding:11px 0}
  .ftr-contacts a{display:inline-block;padding:10px 0}
  .ftr-contacts{gap:0}
  .ftr-bot a{display:inline-block;padding:12px 0}
}