/*
 * Витрина Abadiy.PRO — раскладка и компоненты.
 * Палитра и характер задаются темой: assets/themes/<имя>.css
 */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
     font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
     padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--on-accent);
            padding:10px 16px;border-radius:12px;z-index:80}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--border)}
.top__inner{display:flex;align-items:center;gap:14px;height:64px}
.logo{font-weight:900;font-size:19px;letter-spacing:-.02em;text-transform:var(--title-transform);
      white-space:nowrap;flex-shrink:0}
.where{display:none;flex-direction:column;line-height:1.2;min-width:0}
.where__label{font-size:11.5px;color:var(--muted)}
.where__value{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{flex:1;display:none;align-items:center;gap:9px;background:var(--card);
        border:1px solid var(--border);border-radius:var(--r-pill);padding:0 16px;height:42px}
.search input{border:0;background:transparent;outline:none;width:100%;font-size:14px}
.search svg{flex-shrink:0;color:var(--muted)}
.top__side{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--border);
          background:var(--card);display:flex;align-items:center;justify-content:center;
          color:var(--sec);transition:border-color .2s ease}
.icon-btn:hover{border-color:var(--muted)}
.cart-top{display:none;align-items:center;gap:9px;border:0;background:var(--accent);color:var(--on-accent);
          font-weight:750;font-size:14.5px;padding:0 18px;height:42px;border-radius:var(--r-pill)}
.cart-top__count{min-width:22px;height:22px;border-radius:var(--r-pill);
                 background:rgba(0,0,0,.16);display:inline-flex;align-items:center;
                 justify-content:center;font-size:12.5px}

@media (min-width:760px){
  .where{display:flex}
  .search{display:flex}
  .cart-top{display:inline-flex}
}

/* ---------- истории ---------- */
.stories{display:flex;gap:10px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:106px;aspect-ratio:3/4;border-radius:var(--r-tile);
       border:2px solid var(--accent);overflow:hidden;position:relative;background:var(--card)}
.story img{width:100%;height:100%;object-fit:cover}
.story__text{position:absolute;left:8px;right:8px;bottom:8px;color:#fff;font-weight:750;
             font-size:11.5px;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* ---------- баннер условий ---------- */
.promo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
       background:var(--accent);color:var(--on-accent);border-radius:var(--r-card);
       padding:22px 24px;margin-top:16px}
.promo__title{font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.02em}
.promo__note{font-size:14px;opacity:.72;margin-top:5px}
.promo__pill{margin-left:auto;background:var(--hot);color:var(--on-hot);
             border-radius:var(--r-pill);padding:10px 18px;font-weight:750;font-size:14.5px;white-space:nowrap}

/* ---------- фильтры ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.chips::-webkit-scrollbar{display:none}
.chips--cats{margin-top:20px}
.chip{flex:0 0 auto;border:1px solid transparent;background:var(--seg);color:var(--text);
      font-weight:700;font-size:13px;letter-spacing:var(--title-spacing);
      text-transform:var(--title-transform);padding:11px 18px;border-radius:var(--r-pill);
      white-space:nowrap;transition:background .2s ease,color .2s ease}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.chip--soft{background:transparent;border-color:var(--border);color:var(--sec);
            text-transform:none;font-weight:650;font-size:13.5px;letter-spacing:0;
            display:inline-flex;align-items:center;gap:7px}
.chip--soft[aria-pressed="true"]{background:var(--subtle);color:var(--text);border-color:var(--muted)}

/* ---------- каталог ---------- */
.section{padding-top:26px}
.section__title{font-size:clamp(19px,2.2vw,24px);font-weight:800;
                text-transform:var(--title-transform);letter-spacing:var(--title-spacing)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
      gap:14px;padding:16px 0 8px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
      padding:12px;display:flex;flex-direction:column;position:relative;
      transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:var(--muted)}
.card__shot{aspect-ratio:1/1;border-radius:var(--r-tile);background:var(--shot);
            overflow:hidden;position:relative}
.card__shot img{width:100%;height:100%;object-fit:cover}
.card__shot--empty::after{content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(45deg,var(--subtle) 0 10px,transparent 10px 20px);opacity:.5}
.fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:var(--r-pill);
     border:0;background:rgba(20,20,20,.55);color:#fff;display:flex;align-items:center;
     justify-content:center;backdrop-filter:blur(4px)}
.fav[aria-pressed="true"]{background:var(--hot)}
.card__price{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.card__name{font-size:14px;color:var(--sec);margin-top:3px;line-height:1.3}
.card__meta{font-size:12px;color:var(--dis);margin-top:6px;flex:1}
.card__out{margin-top:12px;text-align:center;font-size:13px;color:var(--dis);
           border:1px dashed var(--border);border-radius:var(--r-btn);padding:11px}
.add{margin-top:12px;width:100%;border:1px solid var(--border);background:var(--subtle);
     color:var(--text);font-weight:700;font-size:14px;padding:11px;border-radius:var(--r-btn);
     transition:background .2s ease,border-color .2s ease}
.add:hover{border-color:var(--muted)}
.qty{margin-top:12px;display:flex;align-items:center;justify-content:space-between;
     border:1px solid var(--border);background:var(--subtle);border-radius:var(--r-btn);padding:4px}
.qty button{width:34px;height:32px;border:0;background:transparent;color:var(--sec);
            font-size:19px;line-height:1;border-radius:10px}
.qty button:hover{background:var(--seg);color:var(--text)}
.qty span{font-weight:750;font-size:14.5px}

.state{color:var(--muted);font-size:15px;padding:40px 0;grid-column:1/-1;text-align:center}

/* ---------- нижняя навигация ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
      background:var(--card);border-top:1px solid var(--border);
      padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;border:0;background:transparent;color:var(--muted);display:flex;
     flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:11px;font-weight:650}
.tab[aria-pressed="true"]{color:var(--accent)}
.tab__badge{position:absolute;transform:translate(14px,-6px);background:var(--hot);color:var(--on-hot);
            min-width:17px;height:17px;border-radius:var(--r-pill);font-size:10.5px;
            font-weight:750;display:flex;align-items:center;justify-content:center;padding:0 4px}
@media (min-width:760px){.tabs{display:none}}
@media (max-width:759px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ---------- панель корзины ---------- */
.sheet{position:fixed;inset:0;z-index:70}
.sheet__back{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sheet__panel{position:absolute;right:0;top:0;bottom:0;width:min(430px,100%);background:var(--bg);
              display:flex;flex-direction:column;animation:slide .3s cubic-bezier(.22,1,.36,1)}
@keyframes slide{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;padding:16px;
             border-bottom:1px solid var(--border)}
.sheet__head h2{font-size:18px;font-weight:800;text-transform:var(--title-transform);
                letter-spacing:var(--title-spacing)}
.sheet__body{padding:16px;overflow-y:auto;flex:1}

.line{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
      background:var(--card);border:1px solid var(--border);border-radius:var(--r-tile);
      padding:10px;margin-bottom:9px}
.line__shot{width:52px;height:52px;border-radius:12px;background:var(--shot);overflow:hidden}
.line__shot img{width:100%;height:100%;object-fit:cover}
.line__name{font-size:13.5px;font-weight:700}
.line__price{font-size:12.5px;color:var(--muted);margin-top:2px}
.line__ctl{display:flex;align-items:center;gap:8px}
.line__ctl button{width:28px;height:28px;border:1px solid var(--border);background:var(--subtle);
                  border-radius:9px;color:var(--sec);font-size:16px;line-height:1}
.line__ctl span{font-weight:750;font-size:14px;min-width:16px;text-align:center}

.totals{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;display:grid;gap:8px}
.totals__row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.totals__row--big{color:var(--text);font-weight:800;font-size:18px;margin-top:2px}

.modes{display:flex;gap:5px;background:var(--seg);border-radius:var(--r-btn);padding:4px;margin-top:16px}
.mode{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:14px;
      padding:10px;border-radius:11px}
.mode[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:var(--shadow)}

.form{display:grid;gap:11px;margin-top:16px}
.field{display:grid;gap:5px}
.field>span{font-size:12px;font-weight:650;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:var(--r-btn);
    background:var(--card);padding:12px 14px;font-size:15px;outline:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical}
.err{color:var(--hot);font-size:13px;font-weight:650}
.btn{width:100%;border:1px solid var(--border);background:var(--card);border-radius:var(--r-btn);
     padding:14px;font-weight:750;font-size:15px}
.btn--main{border:0;background:var(--accent);color:var(--on-accent)}
.btn[disabled]{opacity:.55}

.done{text-align:center;padding:34px 0}
.done__mark{width:56px;height:56px;border-radius:var(--r-pill);background:var(--ok);color:#fff;
            display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px}
.done h3{font-size:20px;font-weight:800}
.done p{color:var(--muted);margin-top:8px;font-size:14.5px}
.done .btn{margin-top:22px}

.foot{border-top:1px solid var(--border);margin-top:34px;padding:24px 0 30px;
      color:var(--muted);font-size:13px}
@media (max-width:759px){.foot{margin-bottom:12px}}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .promo{padding:18px}
  .promo__pill{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}