:root{
  --bg:#0b0b0c;
  --surface:#151516;
  --card:#1b1b1d;
  --line:rgba(255,255,255,.09);
  --gold:#d1a52c;
  --gold-dim:#8a6c1f;
  --text:#f3efe4;
  --muted:#93938d;
  --red:#c1402f;
  --radius:14px;
  --header-h:74px;
  --nav-h:64px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0; overscroll-behavior:none;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  height:100vh;
  overflow:hidden;
}
button{font-family:inherit;}

header{
  height:var(--header-h);
  padding:14px 16px 10px;
  display:flex;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
}
.brand h1{ margin:0; font-family:'Bebas Neue',sans-serif; letter-spacing:.03em; font-size:28px; line-height:.9; text-transform:uppercase; }
.brand h1 .brand-white{color:#fff;}
.brand h1 .brand-gold{color:var(--gold);}
.brand p{ margin:6px 0 0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.pages{
  display:flex;
  height:calc(100vh - var(--header-h) - var(--nav-h));
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.page{
  flex:0 0 100%;
  scroll-snap-align:start;
  overflow-y:auto;
  padding:16px 16px 24px;
  -webkit-overflow-scrolling:touch;
}
.page-title{ font-family:'Bebas Neue',sans-serif; letter-spacing:.03em; font-size:22px; text-transform:uppercase; margin:0 0 12px; }

.tabs{display:flex; gap:8px; margin-bottom:14px;}
.tab{
  flex:1; text-align:center; padding:11px 8px;
  border-radius:10px; background:var(--surface);
  border:1px solid var(--line);
  font-size:13px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
}
.tab.active{background:var(--gold); color:#1a1400; border-color:var(--gold);}
/* четыре вкладки (Все / Футболки / Аксессуары / Наклейки) должны помещаться на телефоне */
@media (max-width: 440px){
  .tabs{gap:6px;}
  .tab{flex:1 1 auto; font-size:12px; padding:11px 6px; letter-spacing:.04em; min-width:0;}
}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; position:relative;
  display:flex; flex-direction:column; cursor:pointer;
}
.media{
  position:relative; aspect-ratio:1/1; background:#fff;
  touch-action:pan-y;          /* горизонталь оставляем карусели */
}
.slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease;
  background:#fff;
}
.slide.active{opacity:1;}
/* Фото товара показываем целиком (contain), без обрезки по краям: снимки бывают и 3:4, и 4:3. */
.slide img{width:100%;height:100%;object-fit:contain;object-position:center;}
.slide .ph-text{color:#8a8a8a; font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:0 10px;}
.dots{position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px;}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.25);}
.dot.active{background:var(--gold); width:14px; border-radius:3px;}
.arrow-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border-radius:50%; background:rgba(10,10,10,.5); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.arrow-btn svg{width:16px;height:16px; stroke:#fff; fill:none; stroke-width:2.4;}
.arrow-btn.prev{left:8px;} .arrow-btn.next{right:8px;}
@media (hover:hover){
  .media:hover .arrow-btn, .detail-gallery:hover .arrow-btn{opacity:1; pointer-events:auto;}
}
.zoom-btn{
  position:absolute; bottom:10px; right:10px; width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.18); z-index:2;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in;
}
.zoom-btn svg{width:18px;height:18px; stroke:#fff; fill:none; stroke-width:2;}
.badge{
  position:absolute; top:8px; left:0; background:var(--gold); color:#1a1400;
  font-size:10px; font-weight:800; letter-spacing:.08em; padding:4px 8px 4px 10px; text-transform:uppercase;
}
.fav-btn{
  position:absolute; top:6px; right:6px; width:34px;height:34px; border-radius:50%;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center; cursor:pointer;
}
.fav-btn svg{width:17px;height:17px; stroke:#fff; fill:none; stroke-width:2;}
.fav-btn.active svg{fill:var(--red); stroke:var(--red);}
.card-body{padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-name{font-size:13px; font-weight:600; line-height:1.3;}
.card-price{color:var(--gold); font-weight:800; font-size:15px;}
.card-sold{color:var(--muted); font-size:11px; margin-top:-4px;}
.soldout{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em;}
.card.sold-out .media{opacity:.4;}
.card.sold-out .card-name, .card.sold-out .card-price{opacity:.55;}
.sold-out-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(10,10,10,.75); color:var(--text); border:1px solid rgba(255,255,255,.2);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 12px; border-radius:8px; white-space:nowrap; z-index:2;
}
/* Карточка товара со scheduled-drop (ещё не начались продажи) — тот же
   приглушённый вид, что и "нет в наличии" (наследуется через .sold-out),
   плюс дата старта и обратный отсчёт под ценой. */
.card.coming-soon .sold-out-badge{border-color:var(--gold-dim); color:var(--gold);}
.drop-release{color:var(--text); font-size:12px; font-weight:600; margin-top:-4px;}
.drop-countdown{
  color:var(--gold); font-size:13px; font-weight:800; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; margin-top:-4px;
}
.add-btn{
  margin-top:auto; background:var(--surface); border:1px solid var(--gold-dim);
  color:var(--gold); font-weight:700; text-transform:uppercase;
  font-size:clamp(10px, 2.7vw, 12px); letter-spacing:.03em;
  padding:11px 4px; border-radius:9px; cursor:pointer; min-height:44px;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.2;
}
.add-btn:active{background:var(--gold); color:#1a1400;}
.add-btn[disabled]{opacity:.4;}
.card-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto;}
.card-actions .add-btn{margin-top:0;}
.quick-add{background:var(--gold); color:#1a1400; border-color:var(--gold);}
.empty-state, .empty-block{text-align:center; color:var(--muted); padding:40px 20px; font-size:13px;}

.fav-row, .cart-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.fav-row-info .name, .cart-item-info .name{font-weight:600; font-size:13px;}
.fav-row-info .price{color:var(--gold); font-size:13px; margin-top:2px;}
.cart-item-info .opt{color:var(--muted); font-size:12px;}
.qty-ctrl{display:flex; align-items:center; gap:8px;}
.qty-ctrl button{
  width:32px;height:32px;border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--text); font-size:16px; cursor:pointer;
}
.cart-item-price{color:var(--gold); font-weight:700; font-size:13px; white-space:nowrap;}
.field{margin-top:14px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px;}
.field textarea{
  width:100%; background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 12px; font-size:14px; font-family:inherit;
  resize:vertical; min-height:60px;
}
.hint{font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5;}
.total-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px;}
.total-row .label{color:var(--muted); font-size:13px; text-transform:uppercase;}
.total-row .value{font-size:22px; font-weight:800; color:var(--gold);}
.checkout-btn{
  width:100%; margin-top:14px; background:var(--gold); color:#1a1400; border:none; border-radius:12px;
  padding:16px; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
}
.checkout-btn[disabled]{opacity:.4;}

nav.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; height:var(--nav-h);
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  z-index:40;
}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:none; color:var(--muted); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer; position:relative;
}
.nav-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;}
.nav-btn.active{color:var(--gold);}
.nav-btn.active svg{stroke:var(--gold);}
.nav-badge{
  position:absolute; top:2px; right:calc(50% - 20px);
  background:var(--red); color:#fff; font-size:9px; font-weight:800;
  min-width:14px; height:14px; border-radius:7px; display:none; align-items:center; justify-content:center;
  padding:0 3px;
}
.ym-noscript-img{position:absolute; left:-9999px;}

/* ================= КАРТОЧКА ТОВАРА (детальная) ================= */
.detail{
  position:fixed; inset:0; background:var(--bg); z-index:60;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s ease;
}
.detail.open{transform:translateX(0);}
.detail-top{
  height:56px; flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:0 12px; border-bottom:1px solid var(--line); background:var(--surface);
}
.back-btn{
  display:flex; align-items:center; gap:6px; height:40px; padding:0 14px 0 10px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
}
.back-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;}
.detail-shopname{
  flex:1; text-align:center; font-size:14px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text); padding-right:56px;
}
.detail-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.detail-crumbs{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); padding:14px 16px 0;
}
.detail-crumbs a{color:var(--muted); text-decoration:none; cursor:pointer;}
.detail-crumbs a:hover{color:var(--gold);}
.detail-crumbs .current{color:var(--text);}
.detail-gallery{position:relative; width:100%; aspect-ratio:1/1; background:#fff;}
.detail-gallery .slide{background:#fff !important;}
.detail-gallery .slide img{object-fit:contain;}

/* В карточке товара — полоски сверху, как в историях */
.detail-gallery .dots{
  top:10px; bottom:auto; left:10px; right:10px;
  gap:4px; padding:0;
}
.detail-gallery .dot{
  flex:1; height:3px; width:auto; border-radius:2px;
  background:rgba(255,255,255,.25); cursor:pointer;
}
.detail-gallery .dot.active{background:#fff; width:auto;}
.detail-gallery{touch-action:pan-y;}
.detail-gallery .slide .ph-text{color:#8a8a8a;}
.detail-fav{
  position:absolute; top:12px; right:12px; width:44px;height:44px;border-radius:50%;
  background:rgba(20,20,20,.5); border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center; cursor:pointer;
}
.detail-fav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
.detail-fav.active svg{fill:var(--red); stroke:var(--red);}
.detail-info{padding:20px 16px 40px;}
.detail-name{font-size:22px; font-weight:700; line-height:1.25; margin:0 0 8px;}
.detail-sku{font-size:12.5px; color:var(--muted); letter-spacing:.02em; margin:0 0 14px;}
.detail-price{font-size:24px; font-weight:800; color:var(--gold); margin-bottom:22px;}
.detail-block-title{font-size:15px; font-weight:700; margin:0 0 8px;}
.detail-desc{font-size:14px; line-height:1.6; color:#d9d5c9;}
.detail-desc p{margin:0 0 14px;}
.detail-desc p:last-child{margin-bottom:0;}
.detail-specs{margin:0 0 14px; padding-left:18px; display:flex; flex-direction:column; gap:7px;}
.detail-specs li{font-size:14px; line-height:1.5; color:#d9d5c9;}
.detail-specs li::marker{color:var(--gold);}
.detail-divider{height:1px; background:var(--line); margin:22px 0;}
.size-title{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px;}
.sizes{display:flex; flex-wrap:wrap; gap:8px;}
.size-chip{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font-size:13px; font-weight:700; min-width:48px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
}
.size-chip.selected{border-color:var(--gold); color:var(--gold); background:rgba(209,165,44,.12);}
.size-chip.disabled{opacity:.35; cursor:default; text-decoration:line-through;}
.support-btn{
  width:100%; margin-top:14px; background:var(--card); border:1px solid var(--line);
  color:var(--text); border-radius:12px; padding:15px; font-size:14px; font-weight:600; cursor:pointer;
}
.detail-bar{
  flex-shrink:0; display:flex; gap:10px; align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--surface);
}
.qty-box{
  display:flex; align-items:center; gap:4px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:4px;
}
.qty-box button{
  width:40px;height:40px;border-radius:9px;border:none;background:transparent;
  color:var(--text); font-size:20px; cursor:pointer;
}
.qty-box span{min-width:28px; text-align:center; font-weight:700; font-size:15px;}
.detail-add{
  flex:1; background:var(--gold); color:#1a1400; border:none; border-radius:12px;
  padding:15px 10px; font-weight:800; font-size:14px; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; min-height:48px;
}
.detail-add[disabled]{opacity:.45;}

/* Просмотр фото на весь экран: листание + увеличение (кнопка-лупа) */
.zoom{
  position:fixed; inset:0; background:#000; z-index:80;
  display:none; flex-direction:column;
  touch-action:none; overflow:hidden;
}
.zoom.open{display:flex;}
.zoom-top{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:#000; z-index:2;
}
.zoom-back{
  display:flex; align-items:center; gap:3px; width:74px;
  background:rgba(255,255,255,.12); border:none; color:#fff;
  border-radius:16px; padding:7px 12px 7px 8px; font-size:13px;
  font-family:inherit; cursor:pointer;
}
.zoom-back svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2;}
.zoom-count{color:#fff; font-size:14px; font-weight:600;}
.zoom-top-spacer{width:74px;}
.cart-title{margin:0;}
.card-sold-wide{margin-top:-14px; margin-bottom:22px;}
.zoom-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  touch-action:none;              /* все жесты обрабатываем сами */
}
.zoom-stage img{
  max-width:100%; max-height:100%;
  transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.zoom-btns{
  position:absolute; right:14px; bottom:calc(58px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; z-index:3;
}
.zoom-btns button{
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); border:none; color:#fff;
  font-size:21px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.zoom-btns button:active{background:rgba(255,255,255,.26);}

.zoom-hint{
  position:absolute; bottom:calc(18px + env(safe-area-inset-bottom)); left:0; right:0;
  text-align:center; color:rgba(255,255,255,.45); font-size:12px;
  pointer-events:none; transition:opacity .4s;
}

.toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px); transform:translateX(-50%);
  background:#fff; color:#111; padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90;
}
.toast.show{opacity:1;}

/* ==================== АДАПТАЦИЯ ПОД ЭКРАНЫ ====================
   Раньше вёрстка была рассчитана на один размер. Теперь:
   узкие телефоны, обычные, планшеты и компьютер. */

/* Высота с учётом плавающих панелей браузера на телефонах */
@supports (height: 100dvh){
  body{height:100dvh;}
  .pages{height:calc(100dvh - var(--header-h) - var(--nav-h));}
}

/* Нижняя панель не налезает на «домашнюю полоску» айфона.
   Высоту увеличиваем вместе с отступом, иначе контент уедет под неё. */
nav.bottom-nav{
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
}
@supports (height: 100dvh){
  .pages{
    height:calc(100dvh - var(--header-h) - var(--nav-h) - env(safe-area-inset-bottom));
  }
}

/* --- Узкие телефоны: кнопки в столбик, иначе текст обрезается --- */
@media (max-width: 400px){
  .grid{grid-template-columns:1fr 1fr; gap:10px;}
  .card-actions{grid-template-columns:1fr; gap:6px;}
  .card-actions .add-btn{min-height:40px; padding:10px 4px;}
  .card-name{font-size:12px;}
  .card-price{font-size:14px;}
  .brand h1{font-size:24px;}
  .page{padding:14px 12px 20px;}
}

/* --- Совсем узкие (iPhone SE и подобные) --- */
@media (max-width: 340px){
  .grid{gap:8px;}
  .tab{font-size:11px; padding:10px 4px;}
  #coMap{height:300px;}
}

/* --- Планшеты --- */
@media (min-width: 620px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px;}
  .page{padding:20px 24px 28px;}
  #coMap{height:420px;}
}

/* --- Компьютер: не растягиваем на весь монитор --- */
@media (min-width: 900px){
  .pages, header{max-width:900px; margin-left:auto; margin-right:auto;}
  nav.bottom-nav{
    max-width:900px; left:50%; right:auto;
    transform:translateX(-50%); width:100%;
  }
  .grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));}
  .co-body{max-width:720px; margin:0 auto; width:100%;}
  .co-bar > .co-next{max-width:720px; margin:0 auto; display:block;}
  #coMap{height:460px;}

  /* Карточка товара: как в обычном интернет-магазине — фото слева,
     информация справа, вместо одной узкой мобильной колонки.
     ВАЖНО: .detail-scroll — это сам скроллящийся блок (overflow-y:auto).
     Раньше центрирование делалось через max-width:1180px + margin:0 auto
     прямо на нём — это сужало сам скроллящийся блок, и его скроллбар
     уезжал к правому краю узкой колонки, а не к правому краю окна.
     Теперь .detail-scroll остаётся во всю ширину экрана (скроллбар —
     у края окна, как везде на сайте), а 1180px-колонка получается за
     счёт бокового padding, а не margin. */
  .detail-scroll{
    width:100%;
    display:grid; grid-template-columns:1.15fr 1fr; gap:44px;
    align-items:start;
    padding:24px max(clamp(16px,3vw,40px), calc((100% - 1180px) / 2)) 40px;
  }
  .detail-crumbs{grid-column:1 / -1; padding:0 0 4px;}
  .detail-gallery{position:sticky; top:20px; border-radius:14px; overflow:hidden;}
  .detail-info{padding:0;}
}

/* --- Мышь есть: подсветка при наведении --- */
@media (hover: hover){
  .card:hover{border-color:var(--gold-dim);}
  .add-btn:hover{background:var(--gold); color:#1a1400;}
  .tab:hover{color:var(--text);}
  .sv:hover, .pvz:hover, .tariff:hover{border-color:var(--gold-dim);}
}

/* --- Экран лежит на боку: карта пониже, чтобы кнопка была видна --- */
@media (orientation: landscape) and (max-height: 500px){
  #coMap{height:220px;}
  .co-body{padding-bottom:12px;}
}

/* ====================================================================
   ПУБЛИЧНЫЙ САЙТ (shop.html): та же витрина, что в мини-аппе, но как
   обычная веб-страница — со своей навигацией и прокруткой, без
   Telegram вокруг. Дальше — переопределения поверх стилей мини-аппа:
   старый header/.pages/bottom-nav скрываются, вместо них — верхняя
   панель, хиро-блок и корзина/избранное как выезжающие панели.
   ==================================================================== */
header, nav.bottom-nav{display:none;}
html, body{height:auto; overflow:visible;}

.topnav{
  position:sticky; top:0; z-index:45;
  display:flex; align-items:center; gap:24px;
  padding:16px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);
  background:rgba(11,10,9,.9); backdrop-filter:blur(8px);
}
.topnav-logo{
  font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.02em; white-space:nowrap;
  text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:9px;
}
.topnav-logo img{width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.topnav-logo .brand-white{color:#fff;} .topnav-logo .brand-gold{color:var(--gold);}
.topnav-links{display:flex; gap:22px; margin-left:8px; flex:1; overflow-x:auto;}
.topnav-links a{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
}
.topnav-links a:hover, .topnav-links a.active{color:var(--gold);}
.topnav-actions{display:flex; gap:10px; flex-shrink:0;}
/* .icon-btn.nav-menu-toggle, а не просто .nav-menu-toggle — иначе
   .icon-btn{display:flex} ниже перебивает display:none по порядку
   объявления при равной специфичности, и гамбургер виден даже на
   десктопе. */
.icon-btn.nav-menu-toggle{display:none;}
/* На мобильном инлайн-ссылки прячем целиком и вместо них показываем
   кнопку-гамбургер с выпадающим списком снизу шапки (Одежда/Наклейки/
   Контакты). Текст логотипа виден всегда. margin-left:auto на
   .topnav-actions обязателен: без .topnav-links (она же flex:1-распорка
   между лого и иконками) иконки сами не прижимались к правому краю —
   висел пустой хвост справа на широких телефонах (iPhone Pro Max). */
@media (max-width: 640px){
  .topnav-links{display:none;}
  .icon-btn.nav-menu-toggle{display:flex;}
  .topnav{gap:8px; padding:12px 14px;}
  .topnav-logo{font-size:18px; gap:7px;}
  .topnav-logo img{width:28px; height:28px;}
  .topnav-actions{gap:6px; margin-left:auto;}
  .icon-btn{width:36px; height:36px; border-radius:9px;}
  .icon-btn svg{width:16px; height:16px;}
}
/* Совсем узкие телефоны (iPhone SE и подобные, 320-359px). */
@media (max-width: 359px){
  .topnav{gap:4px; padding:10px 10px;}
  .topnav-logo{font-size:14px; gap:5px;}
  .topnav-logo img{width:24px; height:24px;}
  .topnav-actions{gap:4px;}
  .icon-btn{width:32px; height:32px; border-radius:8px;}
  .icon-btn svg{width:14px; height:14px;}
}
/* Гамбургер, плавно превращающийся в крестик. */
.burger{position:relative; width:16px; height:11px; flex-shrink:0;}
.burger span{
  position:absolute; left:0; width:100%; height:2px; background:currentColor;
  border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:4.5px;}
.burger span:nth-child(3){top:9px;}
.nav-menu-toggle.open .burger span:nth-child(1){top:4.5px; transform:rotate(45deg);}
.nav-menu-toggle.open .burger span:nth-child(2){opacity:0;}
.nav-menu-toggle.open .burger span:nth-child(3){top:4.5px; transform:rotate(-45deg);}
.nav-dropdown{
  position:absolute; left:0; right:0; top:100%; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:6px clamp(16px,4vw,40px) 14px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.nav-dropdown.open{transform:translateY(0); opacity:1; pointer-events:auto;}
.nav-dropdown a{
  color:var(--text); text-decoration:none; font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:14px 0; border-bottom:1px solid var(--line);
}
@media (min-width: 641px){ .nav-dropdown{display:none !important;} }
.social-btn{
  width:34px; height:34px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.social-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8;}
.social-btn:hover{color:var(--gold); border-color:var(--gold-dim);}
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn svg{width:19px;height:19px; stroke:currentColor; fill:none; stroke-width:1.9;}
.icon-btn .nav-badge{position:absolute; top:-5px; right:-5px;}

/* Раньше hero был одной статичной картинкой с одним заголовком.
   Теперь это карусель: у каждого фото — своя цитата, оба меняются
   вместе при свайпе/автопрокрутке (см. initHero в JS). */
.hero{
  position:relative; overflow:hidden; min-height:clamp(340px,52vw,540px);
}
/* Плавный переход фото -> тёмный фон каталога, а не резкий обрез снизу.
   Один слой поверх всех слайдов карусели (не завязан на конкретный
   слайд), поэтому виден одинаково при любом активном фото. Растянут
   подлиннее и с промежуточной точкой — на двух стопах (прозрачный ->
   сплошной) граница слишком заметна и режет глаз, особенно на пёстром
   фото; с тремя стопами затухание выглядит по-настоящему плавным. */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:clamp(90px,16vw,200px); z-index:1;
  background:linear-gradient(to bottom, rgba(11,10,9,0) 0%, rgba(11,10,9,.45) 60%, var(--bg) 100%);
  pointer-events:none;
}
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:center;
  padding:clamp(48px,9vw,96px) clamp(16px,4vw,40px) clamp(40px,6vw,64px);
  background-size:cover; background-position:76% 28%; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.1s ease; pointer-events:none;
}
.hero-slide.active{opacity:1; pointer-events:auto;}
/* Вертикальное фото (мотоциклист на заднем колесе) — на широком и
   невысоком десктопном hero "cover" оставляет от кадра тонкую полосу,
   и позиция, подобранная под мобильный (где видно больше высоты),
   попадала в деревья над головой, а не в самого райдера. На широких
   экранах сдвигаем точку интереса ниже, к его силуэту. */
.hero-slide-dobra{background-position:center 30%;}
@media (min-width:900px){
  .hero-slide-dobra{background-position:center 42%;}
}
/* 4 фиксированных фото карусели — раньше background-image задавался
   инлайн style="", теперь именованные классы по одному на фото. */
.hero-img-life{background-image:url('img/tshirt-life.jpg');}
.hero-img-dobra{background-image:url('img/hero-dobra.jpg');}
.hero-img-oshibok{background-image:url('img/hero-oshibok.jpg'); background-position:center 25%;}
.hero-img-russian{background-image:url('img/hero-russian.jpg'); background-position:center 30%;}
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,10,9,.97) 0%, rgba(11,10,9,.88) 40%, rgba(11,10,9,.4) 72%, rgba(11,10,9,.12) 100%),
    radial-gradient(ellipse 640px 420px at 82% 6%, rgba(209,165,44,.14), transparent 60%);
}
.hero-eyebrow{color:var(--red); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin:0 0 16px;}
.hero-slide h1{
  position:relative; z-index:1;
  font-family:'Bebas Neue',sans-serif; text-transform:uppercase; letter-spacing:.01em;
  margin:0; font-size:clamp(42px,7.4vw,88px); line-height:.88; max-width:16ch;
}
.hero-slide h1 .w{color:#fff;} .hero-slide h1 .g{color:var(--gold);}
.hero-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:2;
  display:flex; gap:7px;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35);
  cursor:pointer; transition:background .2s, width .2s;
}
.hero-dot.active{background:var(--gold); width:20px; border-radius:4px;}

/* Подвал — сплошная оранжевая плашка с чёрным текстом, а не тёмный фон,
   как весь остальной сайт. .footer-fade — переходная полоска перед ним:
   без неё тёмный контент обрывался бы в оранжевый резким хардкатом. */
.footer-fade{height:64px; background:linear-gradient(to bottom, var(--bg), var(--gold));}
.footer-wrap{background:var(--gold);}
.site-footer{
  display:flex; gap:clamp(24px,5vw,60px); justify-content:center; flex-wrap:wrap;
  max-width:760px; margin:0 auto; padding:30px 20px 4px;
}
.site-footer .f-item{max-width:280px; text-align:center; color:#1a1400; font-size:13px; line-height:1.55;}
.site-footer .f-item a,
.site-footer .f-item a:visited,
.site-footer .f-item a:hover,
.site-footer .f-item a:active{color:#1a1400; text-decoration:underline;}
.site-footer .f-item b{
  display:block; color:#1a1400; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:6px; opacity:.7;
}
.footer-social{display:flex; gap:8px; justify-content:center; padding:18px 0 0;}
.footer-social .social-btn{
  background:rgba(26,20,0,.1); border-color:rgba(26,20,0,.2); color:#1a1400;
}
.footer-social .social-btn:hover{background:rgba(26,20,0,.18); border-color:rgba(26,20,0,.35);}
.brand-note{
  max-width:520px; margin:0 auto; padding:22px 20px 0; text-align:center;
  color:#1a1400; font-size:12.5px; line-height:1.7; font-style:italic; opacity:.85;
}
.site-footer-legal{
  text-align:center; padding:18px 20px 28px; color:#1a1400; font-size:11.5px; line-height:1.7; opacity:.85;
}
.site-footer-legal a,
.site-footer-legal a:visited,
.site-footer-legal a:hover,
.site-footer-legal a:active{color:#1a1400;}

/* Блок «Правовая информация» в подвале: на телефоне ссылки столбиком,
   на широком экране — компактный ряд. Цвета те же, что у остального подвала. */
.footer-docs{max-width:760px; margin:0 auto; padding:24px 20px 0; text-align:center;}
.footer-docs-title{
  color:#1a1400; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; opacity:.7; margin-bottom:8px;
}
.footer-docs ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center;
}
.footer-docs li{margin:0;}
.footer-docs a,
.footer-docs a:visited{
  display:inline-block; padding:8px 4px; color:#1a1400; font-size:13px; line-height:1.4;
  text-decoration:none; border-bottom:1px solid rgba(26,20,0,.35);
}
.footer-docs a:hover,
.footer-docs a:active{border-bottom-color:#1a1400;}
.footer-docs a:focus-visible{outline:2px solid #1a1400; outline-offset:2px; border-radius:3px;}
@media (min-width:720px){
  .footer-docs ul{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 26px;}
  .footer-docs a,
  .footer-docs a:visited{padding:6px 2px;}
}

.cookie-notice{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:95;
  max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; display:none; align-items:center; gap:16px;
  flex-wrap:wrap; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.cookie-notice p{margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); flex:1; min-width:220px;}
.cookie-notice a{color:var(--gold);}
.cookie-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; flex-shrink:0;}
/* Две кнопки одинакового размера и веса — «Принять» и «Отказаться» (без
   тёмных паттернов): отказ не спрятан и не мельче. */
.cookie-btn{
  min-height:44px; min-width:150px; padding:10px 18px; border-radius:9px;
  font:inherit; font-weight:800; font-size:13px; cursor:pointer;
  background:var(--gold); color:#1a1400; border:2px solid var(--gold);
}
.cookie-btn--ghost{background:transparent; color:var(--gold);}
.cookie-btn:focus-visible,
.cookie-notice a:focus-visible{outline:2px solid var(--text); outline-offset:2px;}
.cookie-notice.above-bar{bottom:calc(92px + env(safe-area-inset-bottom));}
@media (max-width:520px){
  .cookie-actions{width:100%;}
  .cookie-btn{min-width:0;}
}

/* Каталог живёт в обычном потоке страницы, а не в свайп-контейнере */
.pages{display:block; height:auto; overflow:visible;}
.page{display:none;}
#page-catalog{display:block; padding:28px clamp(16px,4vw,40px) 10px; max-width:1240px; margin:0 auto;}
/* Сетка карточек НЕ переопределяется здесь без @media — иначе ID-селектор
   перебивает мобильные адаптации ниже (repeat(auto-fill, minmax(150px…)),
   сетка в 2 колонки на узких телефонах и т.д.) независимо от ширины экрана.
   На десктопе она и так расширяется через @media (min-width: 900px). */

/* Корзина — выезжающая справа панель, а не отдельный экран (заказы и
   избранное теперь отдельные страницы — /orders и /favorites) */
#page-cart{
  display:block; position:fixed; top:0; right:0; bottom:0; z-index:70;
  width:min(420px, 92vw); background:var(--surface); border-left:1px solid var(--line);
  padding:20px clamp(14px,3vw,20px) 24px; overflow-y:auto;
  transform:translateX(100%); transition:transform .28s ease;
}
#page-cart.drawer-open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.drawer-close{
  width:36px; height:36px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  color:var(--text); font-size:16px; cursor:pointer; flex-shrink:0;
}
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:65;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer-backdrop.show{opacity:1; pointer-events:auto;}

.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .4s ease, visibility .4s ease;
}
.preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-logo{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  animation:preloader-spin 1s linear infinite;
}
.preloader-bar{width:140px; height:3px; background:var(--surface); border-radius:2px; overflow:hidden;}
.preloader-bar-fill{width:40%; height:100%; background:var(--gold); animation:preloader-slide 1.1s ease-in-out infinite;}
@keyframes preloader-spin{to{transform:rotate(360deg);}}
@keyframes preloader-slide{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}
@media (prefers-reduced-motion: reduce){
  .preloader-logo{animation:none;}
  .preloader-bar-fill{animation:none; width:100%;}
}