
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root{
  --brand:#111; --accent:#111; --muted:#666; --bg:#fff; --card:#fff;
  --pill:#f1efee; --btn:#111; --btnText:#fff;
  --radius:18px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:#111;background:#fff}
a{color:var(--brand);text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:50}
.header__row{display:flex;align-items:center;gap:24px;min-height:76px}
.header__brand{display:flex;flex-direction:column;line-height:1}
.header__title{font-weight:800;font-size:36px}
.header__tag{color:var(--muted);font-size:12px;margin-top:2px}
.header__nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav__link{padding:10px 12px;border-radius:10px}
.nav__link:hover{background:#f6f6f6}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:12px;background:var(--btn);color:var(--btnText);font-weight:700;box-shadow:var(--shadow);border:0;cursor:pointer}
.btn:hover{filter:brightness(.92);transform:translateY(-1px)}
.badge{display:inline-block;background:var(--pill);padding:4px 8px;border-radius:999px;font-size:12px;color:#111}
.grid{display:grid;gap:16px}
.grid--products{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card__img{width:100%;height:240px;object-fit:cover;background:#f5f5f5}
.card__body{padding:14px}
.price{font-weight:700}
.flags{display:flex;gap:6px;margin:8px 0}
.footer{border-top:1px solid #eee;margin-top:40px;padding:24px 0;color:#555}
/* product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.product__img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:72px;height:44px;padding:0 8px;font-size:16px}
.qty button{width:44px;height:44px;border-radius:10px}
/* mini cart drawer */
.drawer{position:fixed;top:0;right:-420px;width:360px;max-width:90vw;height:100dvh;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.08);transition:.25s;z-index:1000;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #eee}
.drawer__list{flex:1;overflow:auto;padding:12px}
.drawer__item{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #eee}
.drawer__img{width:60px;height:60px;object-fit:cover;border-radius:10px;background:#f2f2f2}
.drawer__foot{border-top:1px solid #eee;padding:16px;display:grid;gap:8px}
/* modal */
#lp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:900}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:950}
.modal__box{background:#fff;border-radius:18px;box-shadow:var(--shadow);width:min(520px,92vw);padding:20px}
.modal.open,.modal.open+#lp-backdrop{display:grid}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal__title{font-weight:800}
.modal__close{background:none;border:0;font-size:22px;cursor:pointer}
/* mobile header + sheets */
.hamburger{display:none}
.m-bottom{display:none}
.sheet{position:fixed;inset:0;display:none;z-index:1100}
.sheet__panel{position:absolute;top:0;right:0;width:320px;max-width:86vw;height:100%;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.12);padding:16px}
.sheet.open{display:block}
.sheet .nav__link{display:block;padding:12px 8px}
.active-underline{position:relative}
.active-underline::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-10px;width:36px;height:3px;background:#000;border-radius:2px}
/* mobile */
@media (max-width:900px){
  .header__title{font-size:24px;text-align:center}
  .header__row{justify-content:center}
  .header__nav{display:none}
  .hamburger{display:block;position:absolute;left:12px;top:18px}
  .grid--products{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product__img{height:320px}
  .m-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;display:grid;grid-template-columns:repeat(3,1fr);z-index:999}
  .m-bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:56px;font-size:12px;color:#111}
  .m-bottom a.active::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:36px;height:3px;background:#000;border-radius:2px}
  main{padding-bottom:56px}
}
/* ==== PRODUCT XL ==== */
.productXL{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:16px
}
.prodXL__gallery{display:grid; gap:10px}
.prodXL__stage{position:relative; background:#f6f6f6; border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.prodXL__stage img{width:100%; height:560px; object-fit:cover; display:block}
.prodXL__thumbs{display:flex; gap:10px; flex-wrap:wrap}
.thumb{border:0; background:#fff; padding:0; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; cursor:pointer}
.thumb img{width:72px; height:72px; object-fit:cover; display:block}
.thumb.active{outline:2px solid #111}

.ribbon{
  position:absolute; top:12px; left:12px; background:#111; color:#fff;
  font-weight:700; font-size:12px; padding:6px 10px; border-radius:999px; box-shadow:var(--shadow)
}
.ribbon--sale{ background:#e31e26 }
.ribbon--new{ background:#59b36a; left:auto; right:12px }

.prodXL__info{display:grid; gap:14px; align-content:start}
.prodXL__title{margin:0; font-size:28px; line-height:1.2}
.prodXL__priceRow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.prodXL__price{font-size:28px; font-weight:800}
.prodXL__flags{display:flex; gap:8px; align-items:center}
.badge{display:inline-block; background:var(--pill); padding:4px 10px; border-radius:999px; font-size:12px}
.badge--sale{ background:#ffecef; color:#b30017 }

.prodXL__buy{display:flex; gap:10px; align-items:center}
.btn--xl{height:48px; padding:0 18px}
.btn--lite{background:#f1f1f1; color:#111; box-shadow:none}
.btn--lite:hover{filter:none; background:#eaeaea}
.qty input{width:80px; height:44px; border:1px solid #ddd; border-radius:10px; text-align:center}

.prodXL__meta{display:grid; gap:8px; margin-top:4px}
.meta__row{display:grid; grid-template-columns:120px 1fr; gap:8px}
.meta__key{color:#777}
.meta__val{color:#111}

.prodXL__details summary{cursor:pointer; font-weight:700; margin:8px 0}
.prodXL__desc{white-space:pre-wrap}

.prodXL__trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.trust__item{background:#f7f7f7; border:1px solid #eee; border-radius:12px; padding:8px 12px}

/* Хлебные крошки */
.breadcrumbs{margin:8px 0 12px; color:#888}
.breadcrumbs a{color:#555}

/* Мобильная панель покупки */
.buyBar{
  position:fixed; left:0; right:0; bottom:-120px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 14px; background:#fff; border-top:1px solid #eee;
  box-shadow:0 -8px 18px rgba(0,0,0,.06); transition:transform .25s, bottom .25s; z-index:999
}
.buyBar__price{font-weight:800; font-size:18px}
.buyBar__btn{height:42px}

@media (max-width: 900px){
  .productXL{grid-template-columns:1fr}
  .prodXL__stage img{height:420px}
  .meta__row{grid-template-columns:100px 1fr}
  .buyBar{bottom:0}
  main{padding-bottom:72px}
}


.mini-remove { display: none !important; }
