/* ============================================================
   Выкрас — дизайн-система витрины (направление 4a, без фото).
   Единый адаптивный лист: десктоп-канон (>1024), планшет (≤1024), мобайл (≤600).
   Токены и значения — 1:1 из хендоффа design_handoff_vykras_storefront.
   ============================================================ */

/* ---- 1. Токены ---- */
:root{
  --graphite:#2E3438; --graphite-3:#3E4448;
  --canvas:#F2EEE5; --canvas-warm:#E9E5DC; --hero-bg:#E4DFD4;
  --surface:#FBF9F5; --surface-2:#EFEBE1;
  --terracotta:#BE6A42; --terracotta-ink:#A85835;
  --apricot:#E4B694; --apricot-warn:#D9A183;
  --terracotta-tint:rgba(190,106,66,.1);

  --ink-72:rgba(46,52,56,.72); --ink-70:rgba(46,52,56,.7); --ink-65:rgba(46,52,56,.65);
  --ink-62:rgba(46,52,56,.62); --ink-6:rgba(46,52,56,.6); --ink-55:rgba(46,52,56,.55);
  --ink-5:rgba(46,52,56,.5); --ink-45:rgba(46,52,56,.45); --ink-4:rgba(46,52,56,.4);
  --line-1:rgba(46,52,56,.1); --line-12:rgba(46,52,56,.12); --line-14:rgba(46,52,56,.14);
  --line-2:rgba(46,52,56,.2); --line-25:rgba(46,52,56,.25); --line-3:rgba(46,52,56,.3);
  --line-35:rgba(46,52,56,.35);
  --paper-72:rgba(251,249,245,.72); --paper-55:rgba(251,249,245,.55);
  --paper-5:rgba(251,249,245,.5); --paper-4:rgba(251,249,245,.4); --paper-12:rgba(251,249,245,.12);

  --pad:64px;
  --ff-serif:'Spectral',Georgia,'Times New Roman',serif;
  --ff-sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-golos:'Golos Text',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --sh-card:0 2px 8px rgba(46,52,56,.08);
  --sh-obj:0 14px 32px rgba(46,52,56,.14);
  --sh-obj-h:0 16px 40px rgba(46,52,56,.2);
  --sh-pcard-h:0 18px 44px rgba(46,52,56,.16);
  --sh-hero:0 30px 70px rgba(46,52,56,.28);
}

/* ---- 2. База ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.vk{
  margin:0;background:var(--canvas);color:var(--graphite);
  font:400 16px/1.5 var(--ff-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.vk a{color:inherit;text-decoration:none}
.vk img{max-width:100%;height:auto;display:block}
.vk button{font-family:inherit}
.vk-ico{display:block;flex:none}
.vk-main{display:block}
.vk-hidden{display:none!important}

/* ---- 3. Топбар ---- */
.vk-topbar{background:var(--graphite)}
.vk-topbar__in{
  display:flex;justify-content:center;align-items:center;gap:28px;padding:9px 16px;
  color:var(--paper-72);font:400 12px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;
}
.vk-topbar__dot{opacity:.35}
.vk-topbar__item--accent{color:var(--apricot-warn)}

/* ---- 4. Шапка ---- */
.vk-header{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--pad);height:78px;border-bottom:1px solid var(--line-14);
  background:var(--canvas);position:sticky;top:0;z-index:30;
  transition:box-shadow .2s;
}
.vk-header.is-stuck{box-shadow:0 4px 20px rgba(46,52,56,.10)}
.vk-header__logo{display:inline-flex;align-items:center}
.vk-logo{display:inline-flex;align-items:center;gap:10px}
.vk-logo__mark{flex:none}
.vk-logo__word{font:700 22px/1 var(--ff-golos);letter-spacing:-.02em;color:var(--graphite)}
.vk-logo--footer .vk-logo__word{font-size:20px;color:var(--surface)}

.vk-nav{display:flex;gap:32px;font:500 15px var(--ff-golos)}
.vk-nav__link{color:var(--graphite);white-space:nowrap;transition:color .15s}
.vk-nav__link:hover,.vk-nav__link.is-active{color:var(--terracotta-ink)}

.vk-utils{display:flex;align-items:center;gap:20px}
.vk-search{
  position:relative;
  display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:8px;
  padding:8px 14px;width:190px;color:var(--ink-5);background:transparent;
}
.vk-search__input{
  border:0;background:transparent;outline:none;padding:0;width:100%;
  font:400 14px var(--ff-sans);color:var(--graphite);
}
.vk-search__input::placeholder{color:var(--ink-5)}
/* Дропдаун живого поиска */
.vk-search__drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  box-shadow:0 14px 40px rgba(46,52,56,.16);max-height:70vh;overflow-y:auto;min-width:320px;
}
.vk-search__item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;transition:background .12s}
.vk-search__item:hover{background:var(--surface-2)}
.vk-search__img{width:44px;height:44px;flex:none;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line-2)}
.vk-search__img--ph{background:var(--surface-2)}
.vk-search__metatext{display:flex;flex-direction:column;gap:2px;min-width:0}
.vk-search__name{font:600 14px var(--ff-sans);color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-search__sub{font:400 12px var(--ff-sans);color:var(--ink-45)}
.vk-search__all{display:block;padding:11px 14px;text-align:center;text-decoration:none;border-top:1px solid var(--line-2);
  font:600 13px var(--ff-sans);color:var(--terracotta-ink);background:var(--surface)}
.vk-search__all:hover{background:var(--surface-2)}
.vk-search__empty{padding:16px;text-align:center;font:400 13px var(--ff-sans);color:var(--ink-45)}
.vk-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.vk-utils__search-icon{display:none}
.vk-cart{position:relative;display:inline-flex}
.vk-cart__badge{
  position:absolute;top:-6px;right:-8px;background:var(--terracotta);color:#fff;
  font:600 10px var(--ff-golos);border-radius:9px;padding:1px 5px;line-height:1.2;
}
.vk-burger{display:none;background:none;border:0;padding:0;cursor:pointer}

/* ---- 5. Drawer (мобайл) ---- */
.vk-drawer[hidden]{display:none}
.vk-drawer{position:fixed;inset:0;z-index:120}
.vk-drawer__backdrop{position:absolute;inset:0;background:rgba(30,35,30,.4)}
.vk-drawer__panel{
  position:absolute;inset:0 auto 0 0;width:min(86vw,340px);background:var(--canvas);
  display:flex;flex-direction:column;gap:16px;padding:16px;overflow-y:auto;
  box-shadow:0 20px 44px rgba(46,52,56,.32);animation:vkSlideIn .22s ease;
}
@keyframes vkSlideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.vk-drawer__head{display:flex;align-items:center;justify-content:space-between}
.vk-drawer__search{width:100%}
.vk-drawer__nav{display:flex;flex-direction:column}
.vk-drawer__link{
  display:flex;align-items:center;justify-content:space-between;padding:14px 4px;
  border-bottom:1px solid var(--line-12);font:500 17px var(--ff-golos)
}
.vk-drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.vk-drawer__contact{font:400 12px/1.7 var(--ff-mono);color:var(--ink-5)}

/* ---- 6. Кнопки ---- */
.vk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px var(--ff-sans);border-radius:10px;padding:15px 26px;cursor:pointer;
  border:1.5px solid transparent;transition:background .18s,border-color .18s,color .18s;text-align:center;
}
.vk-btn--primary{background:var(--terracotta);color:var(--surface)}
.vk-btn--primary:hover{background:var(--terracotta-ink);color:var(--surface)}
.vk-btn--outline{border-color:var(--line-3);color:var(--graphite);padding:14px 24px;background:transparent}
.vk-btn--outline:hover{border-color:var(--graphite);background:rgba(46,52,56,.05)}
.vk-btn--dark{background:var(--graphite);color:var(--surface)}
.vk-btn--dark:hover{background:var(--terracotta-ink)}
.vk-btn--block{width:100%}
.vk-btn--sm{font-size:14px;padding:12px 18px}

/* ---- 7. Секции / заголовки ---- */
.vk-section{padding:80px var(--pad)}
.vk-section--milk{background:var(--surface)}
.vk-section--canvas{background:var(--canvas)}
.vk-section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.vk-eyebrow{font:500 12px var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-ink);margin-bottom:12px}
.vk-h1{font:500 62px/1.02 var(--ff-serif);letter-spacing:-.01em;margin:0 0 20px}
.vk-h2{font:500 40px/1.08 var(--ff-serif);margin:0}
.vk-section__lead{font:400 14.5px/1.55 var(--ff-sans);color:var(--ink-6);max-width:38ch}
.vk-section__note{font:400 14.5px/1.55 var(--ff-sans);color:var(--ink-6);margin:24px 0 0;max-width:62ch}
.vk-link-accent{font:600 15px var(--ff-sans);color:var(--terracotta-ink);white-space:nowrap}
.vk-link-accent:hover{color:var(--terracotta)}

/* ---- 8. Hero: стена цвета ---- */
.vk-hero{position:relative;height:560px;background:var(--hero-bg);overflow:hidden}
.vk-hero__wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:2px;perspective:1200px}
.vk-hero__wall > span{display:block}
@keyframes vkFlip{
  0%,42%{transform:rotateY(0);background:var(--c1)}
  50%{transform:rotateY(90deg);background:var(--c1)}
  58%{transform:rotateY(90deg);background:var(--c2)}
  66%,100%{transform:rotateY(0);background:var(--c2)}
}
.vk-hero__plaque{
  position:absolute;top:50%;left:var(--pad);transform:translateY(-50%);width:544px;
  max-width:calc(100% - var(--pad) * 2);box-sizing:border-box;background:var(--canvas);
  border:1px solid var(--line-1);box-shadow:var(--sh-hero);border-radius:16px;padding:50px 46px;
}
.vk-hero__kicker{font:500 12px var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-ink);margin-bottom:20px}
.vk-hero__text{font:400 17px/1.55 var(--ff-sans);color:var(--ink-72);margin:0 0 30px;max-width:40ch}
.vk-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.vk-hero__caption{
  position:absolute;right:22px;bottom:20px;background:rgba(46,52,56,.5);color:var(--surface);
  font:500 11px var(--ff-mono);letter-spacing:.04em;padding:7px 12px;border-radius:8px;pointer-events:none
}

/* ---- 9. Полоса статов (01–04) ---- */
.vk-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-14);background:var(--canvas)}
.vk-stats__cell{padding:22px 32px;border-right:1px solid var(--line-14);font:500 12px/1.5 var(--ff-mono);color:var(--ink-65);text-transform:uppercase}
.vk-stats__cell:first-child{padding-left:var(--pad)}
.vk-stats__cell:last-child{border-right:0}
.vk-stats__sub{display:block;color:var(--graphite)}

/* ---- 10. Навигация по объекту (плитки-сцены) ---- */
/* Фотосерия (site-assets, 1:1 из превью Александра): 6 карточек-объектов + воронка. */
.vk-tp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.vk-tp-card{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:76/82;text-decoration:none;isolation:isolate;
  box-shadow:0 1px 2px rgba(35,40,43,.08),0 10px 28px -14px rgba(35,40,43,.28);transition:transform .25s ease,box-shadow .25s ease}
.vk-tp-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(35,40,43,.1),0 22px 40px -16px rgba(35,40,43,.38)}
.vk-tp-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  background:linear-gradient(to top,rgba(22,20,17,.62),transparent);pointer-events:none}
.vk-tp-card--funnel::after{height:30%;background:linear-gradient(to top,rgba(10,9,8,.5),transparent)}
.vk-tp-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.vk-tp-card:hover .vk-tp-card__img{transform:scale(1.045)}
.vk-tp-card__badge{position:absolute;top:12px;left:12px;z-index:2;font:600 10.5px/1 var(--ff-mono);letter-spacing:.14em;
  color:#3A3F38;background:rgba(244,241,234,.9);backdrop-filter:blur(4px);padding:7px 10px;border-radius:999px}
.vk-tp-card__meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.vk-tp-card__title{color:#FFF;font:600 16.5px/1.25 var(--ff-sans);text-shadow:0 1px 10px rgba(0,0,0,.35)}
.vk-tp-card__dots{display:flex;gap:4px;flex:none;padding-bottom:3px}
.vk-tp-dot{width:13px;height:13px;border-radius:4px;border:1px solid rgba(255,255,255,.55);display:inline-block}
.vk-tp-card--funnel .vk-tp-card__cap{position:absolute;top:16px;left:16px;z-index:2;font:600 11px/1 var(--ff-mono);letter-spacing:.22em;color:#E8C4AC}
.vk-tp-card--funnel .vk-tp-card__go{position:absolute;left:16px;bottom:14px;z-index:2;color:#F4F1EA;font:600 16.5px var(--ff-sans)}
.vk-tp-card--funnel .vk-tp-card__go small{display:block;font:400 12.5px var(--ff-sans);color:#CFC5B8;margin-top:3px}
@media (max-width:1200px){.vk-tp-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.vk-tp-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- 11. Петля выкраса (шаги) ---- */
.vk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.vk-step{border-top:2px solid var(--graphite);padding-top:18px}
.vk-step--accent{border-top-color:var(--terracotta)}
.vk-step__num{font:500 13px var(--ff-mono);color:var(--ink-45);margin-bottom:10px}
.vk-step--accent .vk-step__num{color:var(--terracotta-ink)}
.vk-step__title{font:600 18px var(--ff-golos);margin-bottom:7px}
.vk-step__text{font:400 14px/1.55 var(--ff-sans);color:var(--ink-62);margin:0}
.vk-tag-mono{display:inline-block;background:rgba(190,106,66,.12);color:var(--terracotta-ink);font:500 11px var(--ff-mono);text-transform:uppercase;padding:5px 9px;border-radius:7px;margin-top:12px}

/* ---- 12. Карточка материала (пак-шот) ---- */
.vk-mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.vk-mcard{background:var(--surface);border:1px solid var(--line-12);border-radius:14px;overflow:hidden;transition:box-shadow .2s}
.vk-mcard:hover{box-shadow:var(--sh-obj)}
.vk-mcard__media{height:132px;background:var(--surface-2);position:relative}
.vk-mcard__can{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:9% 0}
.vk-mcard__can svg{width:auto;height:100%;max-width:80%;filter:drop-shadow(0 7px 12px rgba(46,52,56,.18))}
.vk-mcard__code{position:absolute;top:14px;left:16px;font:500 11px var(--ff-mono);color:var(--ink-6);text-transform:uppercase;pointer-events:none}
.vk-mcard__chip{position:absolute;bottom:28px;right:14px;width:26px;height:26px;border-radius:7px;box-shadow:0 2px 8px rgba(46,52,56,.35),inset 0 0 0 1px rgba(46,52,56,.12);pointer-events:none}
.vk-mcard__wave{display:block;width:100%;height:20px;position:absolute;bottom:-1px;left:0}
.vk-mcard__body{padding:16px 20px 20px}
.vk-mcard__cat{font:500 11px var(--ff-mono);color:var(--ink-5);text-transform:uppercase;margin-bottom:8px}
.vk-mcard__name{font:600 17px/1.3 var(--ff-golos);margin-bottom:10px}
.vk-mcard__row{display:flex;justify-content:space-between;align-items:center}
.vk-mcard__price{font:600 16px var(--ff-golos)}
.vk-badge-colorable{font:500 11px var(--ff-mono);color:var(--terracotta-ink);background:var(--terracotta-tint);padding:4px 8px;border-radius:6px;text-transform:uppercase}

/* ---- 13. Промо-плашки ---- */
.vk-promos{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:44px 56px 84px}
.vk-promo{border-radius:14px;padding:44px 44px 40px;position:relative;overflow:hidden}
.vk-promo--dark{background:var(--graphite);color:var(--surface)}
.vk-promo--milk{background:var(--surface)}
.vk-promo__eyebrow{font:500 12px var(--ff-sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.vk-promo--dark .vk-promo__eyebrow{color:var(--apricot)}
.vk-promo--milk .vk-promo__eyebrow{color:var(--terracotta-ink)}
.vk-promo__title{font:500 30px/1.25 var(--ff-serif);margin-bottom:18px}
.vk-promo__list{display:grid;gap:12px;font:400 14.5px/1.55 var(--ff-sans);color:rgba(251,249,245,.78)}
.vk-promo__list > div{display:flex;gap:12px}
.vk-promo__list .n{color:var(--apricot)}
.vk-promo__p{font:400 14.5px/1.6 var(--ff-sans);color:var(--ink-65);margin:0 0 24px;max-width:40ch}
.vk-promo__link{font:600 13px var(--ff-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-ink)}
.vk-promo__ghost{position:absolute;right:-12px;bottom:-16px;opacity:.12;pointer-events:none}

/* ---- 14. Общие компоненты для экранов 2–11 ---- */
.vk-chip{display:inline-flex;align-items:center;gap:6px;font:500 13.5px var(--ff-sans);border:1px solid var(--line-25);padding:8px 18px;border-radius:9px;color:var(--graphite);cursor:pointer;background:transparent;transition:border-color .15s,color .15s}
.vk-chip:hover{border-color:var(--terracotta-ink);color:var(--terracotta-ink)}
.vk-chip.is-active{background:var(--graphite);color:var(--surface);border-color:var(--graphite);font-weight:600}
.vk-chip--oos{border-style:dashed;border-color:var(--line-2);color:rgba(46,52,56,.32);text-decoration:line-through;cursor:not-allowed}

/* Рамка была 1.5px графитом — жирнее и темнее всех соседних элементов карточки
   (чипы фасовки и базы идут мягкой линией). Приводим к общей стилистике. */
.vk-stepper{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff}
.vk-stepper button{width:28px;height:34px;border:0;background:transparent;font:600 16px var(--ff-sans);color:var(--graphite);cursor:pointer}
.vk-stepper button:hover{background:rgba(46,52,56,.08)}
.vk-stepper__val{min-width:20px;display:inline-flex;align-items:center;justify-content:center;font:600 14px var(--ff-sans)}
/* Вводимое значение: фикс-ширина (не расширяется на «100»), 16px против авто-зума iOS,
   без рамки/спиннеров. Ширина держится тремя цифрами (maxlength=3). */
input.vk-stepper__val{
  width:28px;box-sizing:border-box;flex:none;text-align:center;padding:0;margin:0;
  border:0;background:transparent;color:var(--graphite);font:600 16px var(--ff-sans);
  -webkit-appearance:none;appearance:none;-moz-appearance:textfield;border-radius:0
}
input.vk-stepper__val::-webkit-outer-spin-button,
input.vk-stepper__val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.vk-stepper__val:focus{outline:none;background:rgba(46,52,56,.06)}

.vk-check{display:flex;align-items:center;gap:10px;font:400 14.5px var(--ff-sans);cursor:pointer}
.vk-check__box{width:17px;height:17px;border:1.5px solid var(--line-35);border-radius:5px;flex:none;display:grid;place-items:center}
.vk-check input{position:absolute;opacity:0;pointer-events:none}
.vk-check input:checked + .vk-check__box{background:var(--graphite);border-color:var(--graphite)}
.vk-check input:checked + .vk-check__box .vk-ico{stroke:#fff}
.vk-check__box .vk-ico{opacity:0}
.vk-check input:checked + .vk-check__box .vk-ico{opacity:1}
.vk-check__count{color:var(--ink-4);margin-left:auto}

.vk-swatch{width:26px;height:26px;border-radius:7px;flex:none}
.vk-swatch--light{box-shadow:inset 0 0 0 1px var(--line-14)}

.vk-fab{width:40px;height:40px;border-radius:50%;background:var(--terracotta);display:inline-grid;place-items:center;border:0;cursor:pointer;transition:background .18s}
.vk-fab:hover{background:var(--terracotta-ink)}

.vk-reimburse{background:var(--terracotta-tint);border-radius:11px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.vk-reimburse__text{color:#7A4227;font:400 13.5px/1.5 var(--ff-golos)}

/* ---- Фото-заглушка (photo-optional слот) ---- */
.vk-photoslot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  background:var(--surface-2);border:1.5px dashed rgba(46,52,56,.25);border-radius:14px;
  padding:28px 20px;min-height:150px;height:100%;box-sizing:border-box;position:relative;
}
.vk-photoslot__ico{margin-bottom:2px}
.vk-photoslot__cap{font:400 14px/1.45 var(--ff-sans);color:var(--ink-6);max-width:34ch}
.vk-photoslot__browse{font:400 13px var(--ff-sans);color:var(--ink-5)}
.vk-photoslot__link{color:var(--ink-6);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.vk-photoslot__link:hover{color:var(--terracotta-ink)}

/* ---- Инпуты: 16px против зума фокуса на мобильных; без double-tap-zoom ---- */
.vk input,.vk textarea,.vk select{font-size:16px}
.vk button,.vk .vk-chip,.vk .vk-stepper button,.vk .vk-fab,.vk a[role="button"]{touch-action:manipulation}
.vk input:focus,.vk textarea:focus,.vk select:focus{transform:none}

/* ---- 15. Футер (скруглённая карточка на графите) ---- */
.vk-footer{
  background:var(--graphite);color:var(--surface);
  margin:0 20px 20px;border-radius:24px;padding:52px 56px 26px;
}
.vk-footer__grid{
  display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1.4fr;gap:40px;align-items:start;
  padding-bottom:32px;
}
.vk-footer__brand .vk-logo{margin-bottom:0}
.vk-footer__tagline{font:400 14px var(--ff-sans);color:var(--paper-5);margin:16px 0 0}
.vk-footer__col{display:flex;flex-direction:column}
.vk-footer__title{font:500 11px var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4);margin-bottom:18px}
.vk-footer__col a{color:var(--paper-72);font:400 15px/2.12 var(--ff-sans);transition:color .15s}
.vk-footer__col a:hover{color:var(--apricot)}
.vk-footer__contacts a{line-height:1.6}
.vk-footer__contacts .vk-footer__phone{font:700 18px var(--ff-sans);color:var(--surface);margin-bottom:6px}
.vk-footer__contacts .vk-footer__mail{font-size:15px;color:var(--paper-72)}
.vk-footer__addr{font:400 14px/1.6 var(--ff-sans);color:var(--paper-5);margin-top:16px}
.vk-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid var(--paper-12);padding-top:22px;
  font:400 13px var(--ff-sans);color:var(--paper-4);
}
.vk-footer__legal{display:flex;flex-wrap:wrap;gap:6px 26px}
.vk-footer__legal a{color:rgba(251,249,245,.6);transition:color .15s}
.vk-footer__legal a:hover{color:var(--apricot)}

/* ---- 16. Утилиты страничных отступов (главная) ---- */
.vk-pad-objects{padding:80px var(--pad)}
.vk-pad-loop{padding:80px var(--pad)}
.vk-pad-materials{padding:0 var(--pad) 96px}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1024px){
  :root{--pad:40px}
  .vk-nav{display:none}
  .vk-burger{display:inline-flex}
  .vk-header{height:64px;gap:16px}
  .vk-header__logo{order:0}
  .vk-utils{flex:1;justify-content:flex-end;gap:16px}
  .vk-search{flex:1;width:auto;max-width:none}
  .vk-h1{font-size:46px}
  .vk-h2{font-size:32px}
  .vk-hero__wall{grid-template-columns:repeat(6,1fr)}
  .vk-objgrid{grid-template-columns:repeat(3,1fr)}
  .vk-steps{grid-template-columns:repeat(2,1fr)}
  .vk-mcards{grid-template-columns:repeat(2,1fr)}
  .vk-promos{grid-template-columns:1fr;padding:36px 40px 72px}
  .vk-footer__grid{grid-template-columns:repeat(3,1fr);gap:32px}
  .vk-footer__brand{grid-column:1 / -1}
  .vk-topbar__in{gap:20px;font-size:11px}
}

@media (max-width:600px){
  :root{--pad:16px}
  .vk-topbar__item:not(.vk-topbar__item--accent),.vk-topbar__dot{display:none}
  .vk-topbar__in{font-size:10px;padding:6px 12px}
  .vk-header{height:54px}
  .vk-header__logo{position:absolute;left:50%;transform:translateX(-50%)}
  .vk-search{display:none}
  .vk-utils{flex:none;gap:15px}
  .vk-utils__search-icon{display:inline-flex}
  .vk-utils > .vk-iconbtn:not(.vk-utils__search-icon){display:none}
  /* Лупа раскрывает поле поиска полосой под шапкой: на 390px оно не помещается
     в строку с лого и корзиной, а уводить тап в каталог — не поиск. */
  .vk-header.is-search-open .vk-search{
    display:flex;position:absolute;top:100%;left:0;right:0;width:auto;
    margin:0;border-radius:0;border-left:0;border-right:0;
    padding:10px 16px;background:var(--canvas);box-shadow:0 8px 20px rgba(46,52,56,.10);
  }
  .vk-header.is-search-open .vk-search__drop{left:16px;right:16px;min-width:0}
  .vk-logo__word{font-size:18px}
  .vk-hero{height:470px}
  .vk-hero__wall{grid-template-columns:repeat(4,1fr)}
  .vk-hero__plaque{left:16px;right:16px;width:auto;max-width:none;padding:28px 22px;box-shadow:0 20px 44px rgba(46,52,56,.32)}
  .vk-hero__br{display:none}
  .vk-hero__actions{flex-direction:column}
  .vk-hero__actions .vk-btn{width:100%;padding:14px 20px}
  .vk-hero__caption{top:12px;right:12px;bottom:auto}
  .vk-h1{font-size:34px}
  .vk-hero__text{font-size:15.5px}
  .vk-stats{grid-template-columns:1fr 1fr}
  .vk-stats__cell,.vk-stats__cell:first-child{padding:16px}
  .vk-stats__cell:nth-child(2){border-right:0}
  .vk-section{padding:48px var(--pad)}
  .vk-pad-objects,.vk-pad-loop{padding:48px var(--pad)}
  .vk-pad-materials{padding:0 var(--pad) 56px}
  .vk-section__head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px}
  .vk-h2{font-size:28px}
  .vk-objgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .vk-obj{height:220px}
  .vk-steps{grid-template-columns:1fr}
  .vk-mcards{grid-template-columns:1fr 1fr;gap:14px}
  .vk-promos{padding:24px 16px 56px}
  .vk-promo{padding:32px 26px}
  .vk-footer{margin:0 12px 12px;padding:36px 24px 22px;border-radius:20px}
  .vk-footer__grid{grid-template-columns:1fr 1fr;gap:22px 24px;padding-bottom:26px}
  .vk-footer__brand{grid-column:1 / -1}
  .vk-footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .vk-footer__legal{gap:6px 18px}
}

/* ---- WooCommerce внутри витрины (базовая обёртка; полная стилизация Woo — отдельная фаза) ---- */
.vk-woo{padding:44px var(--pad) 80px}
.vk-woo .vk-page__wrap{max-width:1100px;margin:0 auto}
.vk-woo a{color:var(--terracotta-ink)}
/* Кнопки витрины внутри WooCommerce-обёртки держат свой цвет: правило
   .vk-woo a специфичнее .vk-btn--primary и красило текст кнопки в терракоту
   поверх терракотового фона — надпись «В каталог» была нечитаема. */
.vk-woo a.vk-btn--primary{color:var(--surface)}
.vk-woo a.vk-btn--dark{color:var(--surface)}
.vk-woo a.vk-btn--outline{color:var(--graphite)}
.vk-woo .button,.vk-woo button.button,.vk-woo input.button,.vk-woo .wc-block-components-button{
  background:var(--terracotta);color:#FBF9F5;border-radius:10px;border:0;font-weight:600
}
.vk-woo .button:hover,.vk-woo button.button:hover{background:var(--terracotta-ink);color:#FBF9F5}
.vk-woo .price,.vk-woo .amount{color:var(--graphite)}
.vk-woo .woocommerce-message,.vk-woo .woocommerce-info{border-top-color:var(--terracotta)}

/* Вход в кабинет из мобильного меню (иконка ЛК в шапке на ≤600px скрыта). */
.vk-drawer__link--account{border-bottom:0;padding-top:0;margin-bottom:2px;color:var(--ink-6)}
.vk-drawer__link--account:hover{color:var(--terracotta-ink)}

/* ---- Сезонное предупреждение (заморозка водных ЛКМ) ----
   Своей карточки под это в эталоне нет — макет рисовался вне сезона.
   Тон терракотовый, как у зачёта и апселла, чтобы блок читался как голос
   магазина, а не как системная ошибка WooCommerce. */
.vk-season {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(190, 106, 66, .08); border-radius: 12px;
  padding: 14px 18px; margin: 0 0 18px;
}
.vk-season__mark { font-size: 18px; line-height: 1.3; color: var(--terracotta-ink); flex: none; }
.vk-season__body { font: 400 13.5px/1.5 var(--ff-golos); color: var(--ink-7, var(--graphite)); }
.vk-season__body p { margin: 0 0 6px; }
.vk-season__body p:last-child { margin: 0; }

/* Группы в подсказках поиска: цвета и материалы — разные сущности, без
   разделителя список читался как один перечень. */
.vk-search__group{
  font:500 10.5px var(--ff-mono);color:var(--ink-5);text-transform:uppercase;
  letter-spacing:.04em;padding:10px 14px 4px;
}
.vk-search__chip{border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-12);background:var(--surface-2)}

/* iOS Safari зумит страницу, когда фокусируется поле с кеглем меньше 16px,
   и обратно сам не отматывает. Ставим 16px всем полям ввода на узких экранах —
   это единственный способ отключить автозум, кроме запрета масштабирования
   (запрещать нельзя: доступность). */
@media (max-width: 768px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="url"], input[type="date"],
  select, textarea { font-size: 16px !important; }
}