: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;
    /* Страницы (каталог/избранное/корзина/профиль) листаются жестом и вкладками; ширина контента = 4 экрана
       штатно, поэтому классическая полоса (Telegram Desktop на Windows) была видна всегда. Прячем только
       саму полосу — прокрутка и свайп остаются. Вертикальная прокрутка внутри .page не затронута. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .pages::-webkit-scrollbar{display:none; width:0; height:0;}
  .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;}
  /* Экран загрузки Mini App (см. mini-boot.js). Виден сразу; скрывается классом gs-ready на <html> */
  .boot{position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg,#0b0b0c);}
  .gs-ready .boot{display:none;}
  .boot-card{width:100%; max-width:340px; text-align:center;}
  .boot-spinner{width:34px; height:34px; margin:0 auto 18px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:var(--gold,#d1a52c); animation:bootspin .9s linear infinite;}
  .boot-text{margin:0 0 16px; color:var(--text,#f2f2ee); font-size:15px; line-height:1.4;}
  .boot-btn{display:block; width:100%; margin:8px 0 0; padding:13px 16px; border-radius:10px; border:1px solid var(--gold,#d1a52c); background:var(--gold,#d1a52c); color:#1a1400; font-size:14px; font-weight:700; cursor:pointer;}
  .boot-btn[hidden]{display:none;}
  .boot-btn-ghost{background:transparent; color:var(--muted,#93938d); border-color:rgba(255,255,255,.18); font-weight:600;}
  .boot-report{margin:14px 0 0; padding:10px; max-height:240px; overflow:auto; text-align:left; white-space:pre-wrap; word-break:break-word; font-size:11px; line-height:1.4; color:var(--muted,#93938d); background:rgba(255,255,255,.05); border-radius:8px;}
  .boot-report[hidden]{display:none;}
  @keyframes bootspin{to{transform:rotate(360deg);}}
  .tab{
    font-family:inherit; -webkit-appearance:none; appearance:none;
    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;}
  .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{
    padding:0; font:inherit; -webkit-appearance:none; appearance:none;
    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),
     плюс дата старта и обратный отсчёт под ценой. Тот же принцип, что и
     shop-page.css — Mini App не подключает его отдельным файлом. */
  .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;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .add-btn:active{background:var(--gold); color:#1a1400;}
  .add-btn[disabled]{opacity:.4;}
  .add-btn-open{width:auto; padding:10px 14px;}
  .card-sold-detail{margin-top:4px;}
  .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;}

  .profile-card{
    display:flex; align-items:center; gap:14px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; margin-bottom:20px;
  }
  .avatar{
    width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:var(--gold); color:#1a1400; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:20px;
  }
  .avatar img{width:100%; height:100%; object-fit:cover;}
  .profile-name{font-weight:700; font-size:16px;}
  .profile-username{color:var(--muted); font-size:13px; margin-top:2px;}
  .section-title{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px;}
  .order-card{
    border:1px solid var(--line); background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:10px;
  }
  .order-card .row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .order-card .items{font-size:13px; line-height:1.5;}
  .order-card .addr{font-size:12px; color:var(--muted); margin-top:6px;}

  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;}
  #adminPanel{display:none; margin-top:30px;}
  #admStock{display:none;}

  /* ================= КАРТОЧКА ТОВАРА (детальная) ================= */
  .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-gallery{position:relative; width:100%; aspect-ratio:1/1; background:#fff;}
  .detail-gallery .slide{background:#fff !important;}
  .detail-gallery .slide img{object-fit:contain; cursor:zoom-in;}

  /* В карточке товара — полоски сверху, как в историях */
  .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{
    padding:0; font:inherit; -webkit-appearance:none; appearance:none;
    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 10px;}
  .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; white-space:pre-line;}
  .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{
    position:relative; font-family:inherit; padding:0 8px; box-sizing:border-box; -webkit-appearance:none; appearance:none;
    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;}
  .size-chip:focus-visible, .tab:focus-visible, .fav-btn:focus-visible, .detail-fav:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
  .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;}

  .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));}
    .detail-scroll, .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;}
  }

  /* --- Мышь есть: подсветка при наведении --- */
  @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;}
  }