@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{
  --ink:#1f1a14; --muted:#6f6256; --bg:#f6f1ea; --surface:#fff7ef; --card:#fffdf9;
  --pill:#efe2d3; --accent:#c6683f; --accent-2:#2f6b5f; --accent-3:#e2b45b;
  --btn:#c6683f; --btnText:#fff; --border:#e8dccb;
  --radius-card:28px 10px 28px 10px;
  --radius-hero:34px 12px 34px 12px;
  --radius-pill:18px 999px 18px 999px;
  --radius-field:14px 6px 14px 6px;
  --radius:var(--radius-card);
  --cut:14px;
  --cut-sm:9px;
  --cut-xs:6px;
  --shadow:0 16px 30px rgba(43,33,25,.18);
  --ring:rgba(198,104,63,.25);
  --font-body:'Manrope','Segoe UI',sans-serif;
  --font-display:'Fraunces','Times New Roman',serif;
  --sidebar-w:300px;
  --sidebar-w-collapsed:92px;
  --sidebar-pad:18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at -10% -10%, rgba(198,104,63,.12), transparent 60%),
    radial-gradient(1100px 500px at 110% -10%, rgba(47,107,95,.12), transparent 60%);
  background-attachment:fixed;
}
body{
  padding-right:var(--sidebar-w);
  transition:padding .25s ease;
}
body.nav-collapsed{padding-right:var(--sidebar-w-collapsed);}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}

h1,h2,h3,.header__title{font-family:var(--font-display);letter-spacing:.2px}

.header{
  position:fixed; top:0; right:0; height:100vh; width:var(--sidebar-w);
  background:var(--surface); border-left:1px solid var(--border); z-index:920;
  padding:var(--sidebar-pad); display:flex; flex-direction:column;
  box-shadow:-10px 0 24px rgba(43,33,25,.12);
  transition:width .3s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.header__row{display:flex;flex-direction:column;gap:18px;height:100%}
.header__top{display:flex;flex-direction:column;gap:12px}
.header__brand{display:flex;align-items:center;gap:12px;line-height:1}
.header__logo-icon{
  width:42px;height:42px;border-radius:var(--radius-field);background:var(--pill);
  display:grid;place-items:center;font-size:18px;color:var(--accent-2)
}
.header__brand-text{display:flex;flex-direction:column;max-width:100%;overflow:hidden}
.header__title{font-weight:700;font-size:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header__tag{color:var(--muted);font-size:11px;margin-top:4px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toggle{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:var(--radius-field);border:1px solid var(--border);background:var(--card);
  font-weight:600;cursor:pointer;box-shadow:var(--shadow);color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-toggle__icon{font-size:16px}
.nav-toggle__text{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.nav-collapsed .nav-toggle__icon{transform:rotate(180deg)}

.header__nav{margin-left:0;display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:4px}
.nav__link{
  position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-pill);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);
  border:1px solid transparent;background:transparent;
  transition:background .2s ease,border-color .2s ease,transform .25s ease;
  overflow:hidden;
}
.nav__link:hover{background:rgba(198,104,63,.12);border-color:rgba(198,104,63,.25);transform:translateX(-2px)}
.nav__link--cta{
  background:linear-gradient(135deg,var(--accent),#d98458);color:#fff;
  border:1px solid rgba(255,255,255,.6);
}
.nav__link--cta:hover{filter:saturate(1.05)}
.nav__ico{
  width:28px;height:28px;display:grid;place-items:center;text-align:center;
  font-size:16px;position:relative;z-index:1;transition:transform .25s ease;
}
.nav__ico::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:rgba(47,107,95,.16); opacity:0; transform:scale(.8);
  transition:.25s ease; z-index:-1;
}
.nav__text{
  white-space:nowrap;position:relative;z-index:1;
  max-width:calc(var(--sidebar-w) - 140px);
  overflow:hidden;text-overflow:ellipsis;
  opacity:1;transform:translateX(0);
  transition:opacity .2s ease, transform .2s ease, max-width .25s ease;
}
.nav__badge{
  margin-left:auto;background:var(--pill);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:2px 8px;font-size:12px;color:var(--ink);
  max-width:60px;opacity:1;transform:translateX(0);transition:opacity .2s ease, transform .2s ease, max-width .25s ease;
}
.nav__badge:empty{display:none}
.active-underline{position:relative;background:rgba(47,107,95,.12);border-color:rgba(47,107,95,.35)}

body.nav-collapsed .header{width:var(--sidebar-w-collapsed)}
body.nav-collapsed .header__brand-text,
body.nav-collapsed .nav__text,
body.nav-collapsed .nav__badge,
body.nav-collapsed .nav-toggle__text{
  max-width:0; opacity:0; transform:translateX(-8px); pointer-events:none;
}
body.nav-collapsed .header__brand{justify-content:center}
body.nav-collapsed .nav__link{justify-content:center;padding:12px 8px;transform:none;background:transparent;border-color:transparent}
body.nav-collapsed .nav__link:hover{background:transparent;border-color:transparent}
body.nav-collapsed .nav__ico{margin:0; transform:scale(1.08)}
body.nav-collapsed .nav-toggle{justify-content:center}
body.nav-collapsed .nav__link:hover .nav__ico::before{opacity:.55; transform:scale(1)}
body.nav-collapsed .active-underline .nav__ico::before{
  opacity:.9; background:rgba(198,104,63,.22); transform:scale(1.05);
}
body.nav-open .nav__link{animation:navIn .35s ease}
body.nav-open .nav__link:nth-child(1){animation-delay:.02s}
body.nav-open .nav__link:nth-child(2){animation-delay:.05s}
body.nav-open .nav__link:nth-child(3){animation-delay:.08s}
body.nav-open .nav__link:nth-child(4){animation-delay:.11s}
body.nav-open .nav__link:nth-child(5){animation-delay:.14s}
body.nav-open .nav__link:nth-child(6){animation-delay:.17s}
body.nav-open .nav__link:nth-child(7){animation-delay:.20s}
body.nav-open .nav__link:nth-child(8){animation-delay:.23s}

@keyframes navIn{
  from{opacity:.5;transform:translateX(10px)}
  to{opacity:1;transform:translateX(0)}
}

.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--accent),#d98458);color:var(--btnText);font-weight:700;
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow);cursor:pointer;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.btn:hover{filter:saturate(1.05);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.btn.outline{background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:none}

.badge{display:inline-block;background:var(--pill);padding:4px 10px;border-radius:var(--radius-pill);font-size:12px;color:var(--ink);border:1px solid var(--border)}
.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;border:1px solid var(--border)}
.card__img{width:100%;height:240px;object-fit:cover;background:#efe8e0}
.card__body{padding:14px}
.price{font-weight:700;color:var(--accent)}
.flags{display:flex;gap:6px;margin:8px 0}
.footer{border-top:1px solid var(--border);margin-top:40px;padding:24px 0;color:var(--muted);background:var(--surface)}

/* 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;border:1px solid var(--border);border-radius:var(--radius-field);background:var(--surface)}
.qty button{width:44px;height:44px;border-radius:var(--radius-field)}

/* mini cart drawer */
.drawer{position:fixed;top:0;right:-420px;width:360px;max-width:90vw;height:100dvh;background:var(--surface);box-shadow:-12px 0 28px rgba(43,33,25,.18);transition:.25s;z-index:1000;display:flex;flex-direction:column;border-left:1px solid var(--border);border-radius:var(--radius) 0 0 var(--radius)}
.drawer.open{right:0}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.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 var(--border)}
.drawer__img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-field);background:#efe8e0}
.drawer__foot{border-top:1px solid var(--border);padding:16px;display:grid;gap:8px}

/* modal */
#lp-backdrop{position:fixed;inset:0;background:rgba(25,18,13,.45);display:none;z-index:940}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:950}
.modal__box{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);width:min(520px,92vw);padding:20px;border:1px solid var(--border)}
.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:700;font-family:var(--font-display)}
.modal__close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}


@supports (clip-path: polygon(0 0)){
  .btn,
  .authbox-btn,
  .cm-remove{
    border-radius:0;
    clip-path:polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% 50%, calc(100% - var(--cut-sm)) 100%, 0 100%, var(--cut-sm) 50%);
  }
  .badge{
    border-radius:0;
    clip-path:polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% 50%, calc(100% - var(--cut-xs)) 100%, 0 100%, var(--cut-xs) 50%);
  }
}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card,.product,.prod,.hero-title,.tile,.insta-item{animation:rise .6s ease both}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* mobile */
@media (max-width:900px){
  :root{ --sidebar-w:min(84vw, 320px); --sidebar-w-collapsed:72px; }
  body{padding-right:var(--sidebar-w-collapsed);}
  .header{width:var(--sidebar-w-collapsed);}
  body.nav-open .header{width:var(--sidebar-w);}
  .header__title{font-size:22px}
  .nav__link{font-size:11px}
  .grid--products{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product__img{height:320px}
}

/* ==== 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:linear-gradient(135deg,rgba(198,104,63,.08),rgba(47,107,95,.08)); border-radius:var(--radius); 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:1px solid var(--border); background:var(--card); padding:0; border-radius:var(--radius-field); box-shadow:var(--shadow); overflow:hidden; cursor:pointer}
.thumb img{width:72px; height:72px; object-fit:cover; display:block}
.thumb.active{outline:2px solid var(--accent)}

.ribbon{
  position:absolute; top:12px; left:12px; background:var(--accent-2); color:#fff;
  font-weight:700; font-size:12px; padding:6px 10px; border-radius:var(--radius-pill); box-shadow:var(--shadow)
}
.ribbon--sale{ background:var(--accent) }
.ribbon--new{ background:var(--accent-3); left:auto; right:12px; color:#2c2218 }

.prodXL__info{display:grid; gap:14px; align-content:start}
.prodXL__title{margin:0; font-size:30px; line-height:1.2; font-family:var(--font-display)}
.prodXL__priceRow{display:flex; align-items:center; justify-content:space-between; gap:12px}
.prodXL__price{font-size:28px; font-weight:800; color:var(--accent)}
.prodXL__flags{display:flex; gap:8px; align-items:center}
.badge--sale{ background:rgba(198,104,63,.14); color:var(--accent) }

.prodXL__buy{display:flex; gap:10px; align-items:center}
.btn--xl{height:48px; padding:0 18px}
.btn--lite{background:var(--surface); color:var(--ink); box-shadow:none; border:1px solid var(--border)}
.btn--lite:hover{filter:none; background:#f3eadf}
.qty input{width:80px; height:44px; border:1px solid var(--border); border-radius:var(--radius-field); text-align:center; background:var(--surface)}

.prodXL__meta{display:grid; gap:8px; margin-top:4px}
.meta__row{display:grid; grid-template-columns:120px 1fr; gap:8px}
.meta__key{color:var(--muted)}
.meta__val{color:var(--ink)}

.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:var(--surface); border:1px solid var(--border); border-radius:var(--radius-field); padding:8px 12px}

/* Хлебные крошки */
.breadcrumbs{margin:8px 0 12px; color:var(--muted)}
.breadcrumbs a{color:var(--ink)}

/* Мобильная панель покупки */
.buyBar{
  position:fixed; left:0; right:0; bottom:-120px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 14px; background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -8px 18px rgba(43,33,25,.12); transition:transform .25s, bottom .25s; z-index:999;
  border-radius:var(--radius) var(--radius) 0 0
}
.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; }