:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --shadow:0 12px 28px rgba(15,23,42,.08);
  --radius:18px;
  --accent:#f97316; /* автозвук */
  --accent2:#2563eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* topbar */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.top__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:.2px}
.brand__logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#fb7185);box-shadow:0 10px 20px rgba(249,115,22,.25)}
.nav{display:flex;gap:14px;align-items:center}
.nav a{opacity:.9}
.nav a:hover{opacity:1}
.badge{display:inline-flex;min-width:22px;height:22px;padding:0 6px;border-radius:999px;align-items:center;justify-content:center;background:var(--accent2);color:#fff;font-size:12px;margin-left:6px}

/* typography */
h1{margin:10px 0 16px;font-size:28px;letter-spacing:-.2px}
h2{margin:0 0 10px;font-size:18px}
.muted{color:var(--muted)}

/* hero */
.hero{margin-top:16px;background:
  radial-gradient(1200px 220px at 20% 0%, rgba(249,115,22,.22), transparent 60%),
  radial-gradient(1000px 220px at 80% 0%, rgba(37,99,235,.16), transparent 60%),
  #fff;
  border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;padding:18px}
.hero__inner p{margin:10px 0 0;line-height:1.55;color:var(--muted)}
.hero__cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.hero__panel{border-radius:20px;border:1px dashed rgba(15,23,42,.18);background:linear-gradient(180deg,rgba(15,23,42,.03),rgba(15,23,42,0));padding:14px}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.kpi .k{background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px}
.kpi .k b{display:block;font-size:14px}
.kpi .k span{color:var(--muted);font-size:12px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(249,115,22,.10);color:#9a3412;border:1px solid rgba(249,115,22,.22)}

/* grid/cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.hero__inner{grid-template-columns:1fr}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 10px 22px rgba(15,23,42,.06)}
.card__title{font-weight:800;line-height:1.35}
.card__title:hover{color:#0b1220}
.card__meta{color:var(--muted);font-size:13px}

.product{padding:12px}
.product__img{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,#eef2ff,#fff7ed)}
.product__img img{display:block;width:100%;height:180px;object-fit:contain}
.noimg{display:flex;align-items:center;justify-content:center;height:180px;color:var(--muted);font-size:12px}
.noimg svg{width:68%;max-width:240px;opacity:.75}

.price{font-weight:900}
.price s{color:var(--muted);font-weight:700;margin-right:6px}

/* buttons */
.btn{border:1px solid var(--border);border-radius:999px;padding:10px 12px;background:#fff;color:var(--text);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{filter:brightness(0.99)}
.btn--accent,.btn-accent{border:none;background:linear-gradient(135deg,var(--accent),#fb7185);color:#fff;box-shadow:0 10px 20px rgba(249,115,22,.24)}
.btn--ghost{background:transparent}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* product card footer */
.p-actions{margin-top:auto;display:flex;gap:10px}
.p-actions .btn{flex:1}
.stock{font-size:12px;color:var(--muted)}
.stock--out{color:#a1a1aa}

/* search/filter */
.row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.search{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search input{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:999px;padding:10px 14px;min-width:280px;box-shadow:0 6px 16px rgba(15,23,42,.05);outline:none}
.search button{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:10px 14px;cursor:pointer}
.check{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;user-select:none}
.check input{width:16px;height:16px}

/* pager */
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0}
.pager__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pager__meta{font-size:13px}
.dots{color:var(--muted);padding:8px 4px}
.is-active{border-color:rgba(249,115,22,.55)}

/* simple chips */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;color:var(--muted);border:1px solid var(--border);background:#fff;padding:8px 10px;border-radius:999px}
.pill:hover{border-color:rgba(249,115,22,.35);color:#334155}

.footer{border-top:1px solid var(--border);opacity:.95}
.mt{margin-top:14px}
.pad{padding:16px}

/* product page */
.product-page{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
@media (max-width:760px){.product-page{grid-template-columns:1fr}}
.product-page__img img{width:100%;height:320px;object-fit:contain;border-radius:18px;border:1px solid var(--border);background:linear-gradient(135deg,#eef2ff,#fff7ed)}

/* checkout */
.checkout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.checkout{grid-template-columns:1fr}}
.field{display:block;margin:10px 0}
.field input{width:100%;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:14px;padding:10px 12px;outline:none}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.table th{color:var(--muted);font-weight:700}
.qty{display:flex;gap:6px;align-items:center}
.qty input{width:70px;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:8px;outline:none}


.hero__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;
  padding:6px 10px;border-radius:999px;
  background:rgba(249,115,22,.10);
  border:1px solid rgba(249,115,22,.20);
  color:#9a3412;
  width:max-content;
  margin-bottom:10px;
}
.product__title{font-weight:750;font-size:14px;line-height:1.35;margin:0}
.product__actions{display:flex;gap:10px;margin-top:auto}
.product__actions .btn{flex:1}
.stock{font-size:12px;color:var(--muted)}
.stock--ok{color:#15803d}
.stock--no{color:#b91c1c}

/* sections & layout refinements */
.section{margin:24px 0}
.section h2{margin-bottom:8px}

/* breadcrumbs */
.breadcrumbs{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0 6px}
.breadcrumbs a{color:inherit;opacity:.9}
.breadcrumbs a:hover{opacity:1}

/* product cards footer on главной и в каталоге */
.product__foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.product__foot .btn{flex:1}

/* big price on product page */
.price.big{font-size:24px}

.category-intro{margin:6px 0 14px;font-size:13px;color:var(--muted)}


/* mini-cart in topbar */
.nav__cart{position:relative;display:flex;align-items:center;gap:4px}
.nav__cart-link{display:inline-flex;align-items:center}
.nav__cart-toggle{border:none;background:transparent;cursor:pointer;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:10px;color:var(--muted);}
.nav__cart-toggle::before{content:"▼";}
.nav__cart.is-open .nav__cart-toggle::before{transform:rotate(180deg);}

.cart-preview{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;max-width:320px;background:#fff;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 40px rgba(15,23,42,.16);padding:10px;z-index:40;}
.cart-preview__title{font-size:13px;font-weight:700;margin-bottom:6px;}
.cart-preview__list{max-height:260px;overflow:auto;margin:0;padding:0;list-style:none;}
.cart-preview__item{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid rgba(226,232,240,.6);}
.cart-preview__item:last-child{border-bottom:none;}
.cart-preview__name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-preview__qty{color:var(--muted);font-size:12px;}
.cart-preview__sum{font-weight:700;}
.cart-preview__empty{font-size:13px;color:var(--muted);padding:4px 0;}
.cart-preview__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px;}
.cart-preview__total{font-weight:800;}
.cart-preview__btn{border-radius:999px;padding:8px 12px;background:#0f172a;color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;}
.cart-preview__btn:hover{filter:brightness(1.02);}

/* toast notifications */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none;}
.toast{pointer-events:auto;min-width:220px;max-width:320px;background:#0f172a;color:#f9fafb;border-radius:14px;padding:10px 12px;font-size:13px;box-shadow:0 18px 40px rgba(15,23,42,.35);display:flex;align-items:flex-start;gap:8px;opacity:0;transform:translateY(10px);animation:toast-in .18s ease-out forwards;}
.toast__icon{font-size:16px;line-height:1;}
.toast__body{flex:1;}
.toast--success{background:#16a34a;}
.toast--error{background:#b91c1c;}
.toast.is-leaving{animation:toast-out .16s ease-in forwards;}
@keyframes toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(10px);}}

@media (max-width:640px){.toast-container{left:8px;right:8px;bottom:8px;align-items:stretch;}.toast{width:100%;max-width:none;}}