:root{
  --choc:#3a1f15; --choc2:#5a3022; --milk:#f3eadd; --cream:#faf6ef; --blue:#9fbbe0; --red:#a3161c; --ink:#2a1a14; --muted:#8a7565; --line:#e3d6c4;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}

/* бегущая строка */
.ticker{background:var(--choc);color:var(--milk);font-size:12px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.ticker div{display:inline-block;padding:9px 0;animation:run 38s linear infinite}
.ticker span{margin:0 34px}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* шапка */
header{position:sticky;top:0;z-index:20;background:rgba(250,246,239,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.nav{display:flex;gap:26px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav a:hover{color:var(--red)}
.logo{font-family:var(--serif);font-size:30px;letter-spacing:.22em;font-weight:500;text-align:center;line-height:1}
.logo small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.42em;margin-top:5px;color:var(--muted)}
.icons{display:flex;gap:20px;justify-content:flex-end;align-items:center;font-size:13px}
.icons svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.5}
.cart{position:relative}.cart b{position:absolute;top:-7px;right:-10px;background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:1px 5px}
.burger{display:none}

/* обложка */
.hero{position:relative;background:var(--choc);color:var(--milk);overflow:hidden}
.hero img{width:100%;height:min(78vh,720px);object-fit:cover;object-position:center 30%;opacity:.96}
.hero .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 64px;background:linear-gradient(180deg,rgba(58,31,21,0) 45%,rgba(40,20,13,.72) 100%)}
.hero .cap .wrap{width:100%}
.kicker{font-size:12px;letter-spacing:.38em;text-transform:uppercase;opacity:.85}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,104px);line-height:.95;margin:14px 0 10px}
.hero h1 i{font-style:italic;color:#f6d9c9}
.hero p{font-family:var(--serif);font-size:22px;font-style:italic;opacity:.92;margin-bottom:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border:1px solid currentColor;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;transition:.2s}
.btn.solid{background:var(--milk);color:var(--choc);border-color:var(--milk)}
.btn.solid:hover{background:#fff}
.btn.dark{background:var(--choc);color:var(--milk);border-color:var(--choc)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* преимущества */
.perks{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.perks div{padding:22px 18px;text-align:center;font-size:12.5px;letter-spacing:.06em;color:var(--muted);border-right:1px solid var(--line)}
.perks div:last-child{border-right:0}
.perks b{display:block;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);letter-spacing:0;margin-bottom:2px}

/* заголовки секций */
.sec{padding:84px 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sh h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1}
.sh h2 i{color:var(--red)}
.sh .kicker{color:var(--muted);margin-bottom:10px}
.link{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:3px}

/* категории */
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.cats button{font:inherit;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line);padding:9px 18px;border-radius:30px;cursor:pointer;color:var(--ink)}
.cats button.on,.cats button:hover{background:var(--choc);color:var(--milk);border-color:var(--choc)}

/* карточки товаров */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px}
.card{cursor:pointer}
.ph{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#f1e7d9,#e9dccb);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.06)}
.tag{position:absolute;top:12px;left:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;background:var(--cream)}
.tag.red{background:var(--red);color:#fff}
.fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(250,246,239,.85);display:flex;align-items:center;justify-content:center}
.fav svg{width:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
.quick{position:absolute;left:12px;right:12px;bottom:12px;background:var(--choc);color:var(--milk);text-align:center;padding:11px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s}
.card:hover .quick{opacity:1;transform:none}
.ci{padding-top:14px}
.ci .nm{font-size:14px;letter-spacing:.02em}
.ci .pr{margin-top:4px;font-weight:600}
.ci .pr s{color:var(--muted);font-weight:400;margin-left:8px}
.dots{display:flex;gap:6px;margin-top:9px}
.dots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}

/* образы */
.looks-bg{background:var(--choc);color:var(--milk)}
.looks-bg .sh .kicker{color:#cdb39f}
.looks-bg .sh h2 i{color:#f0b9ac}
.looks{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.look{background:#4a291c;overflow:hidden;position:relative}
.look img{width:100%;aspect-ratio:2/5;object-fit:cover;transition:transform .5s}
.look:hover img{transform:scale(1.04)}
.look span{position:absolute;bottom:0;left:0;right:0;padding:14px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(transparent,rgba(30,14,9,.8))}

/* фактура */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mosaic img{width:100%;aspect-ratio:3/4;object-fit:cover}
.mosaic img:nth-child(1){grid-row:span 2;aspect-ratio:auto;height:100%}
.story h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4vw,56px);line-height:1.02;margin:12px 0 22px}
.story p{color:#5b4636;font-size:16px;max-width:520px;margin-bottom:14px}
.pal{display:flex;gap:22px;margin:28px 0 34px;flex-wrap:wrap}
.pal div{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pal i{width:30px;height:30px;border-radius:50%}

/* слоган */
.motto{background:var(--milk);text-align:center;padding:90px 20px}
.motto .t{font-family:var(--serif);font-size:clamp(40px,6vw,84px);line-height:1;font-weight:400}
.motto .t i{color:var(--red)}
.motto p{margin-top:18px;color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-size:12px}

/* подписка */
.sub{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 0}
.sub h3{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05}
.sub form{display:flex;border-bottom:1px solid var(--ink)}
.sub input{flex:1;border:0;background:none;font:inherit;font-size:16px;padding:14px 0;outline:none}
.sub button{border:0;background:none;font:inherit;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.sub .ok{margin-top:10px;font-size:13px;color:var(--red);min-height:20px}

/* подвал */
footer{background:var(--choc);color:#e8dccd;padding:64px 0 30px;font-size:14px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer .logo{text-align:left;color:var(--milk)}
footer h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#bfa58f;margin-bottom:14px;font-weight:600}
footer li{list-style:none;margin:8px 0}
footer a:hover{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#a88f7c}
.pay{display:flex;gap:10px}.pay span{border:1px solid rgba(255,255,255,.25);padding:4px 9px;border-radius:4px;font-size:11px;letter-spacing:.06em}

/* корзина (демо) */
.drawer{position:fixed;inset:0;z-index:50;display:none}
.drawer.on{display:block}
.drawer .bg{position:absolute;inset:0;background:rgba(30,15,10,.45)}
.drawer .pn{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--cream);padding:28px;display:flex;flex-direction:column}
.drawer h3{font-family:var(--serif);font-weight:400;font-size:32px;display:flex;justify-content:space-between;align-items:center}
.drawer h3 button{border:0;background:none;font-size:28px;cursor:pointer;color:var(--ink)}
.items{flex:1;overflow:auto;margin:20px 0;display:flex;flex-direction:column;gap:16px}
.it{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}
.it .ph{aspect-ratio:3/4}
.it small{color:var(--muted)}
.tot{display:flex;justify-content:space-between;font-size:17px;margin-bottom:16px}
.note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}


@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .looks{grid-template-columns:repeat(3,1fr)}
  .story{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 18px}
  .nav{display:none}.burger{display:block}
  .hd{height:62px;grid-template-columns:auto 1fr auto}
  .logo{font-size:23px}
  .icons .hide{display:none}
  .hero img{height:auto;aspect-ratio:1040/530;object-fit:cover}
  .hero .cap{position:static;background:var(--choc);padding:26px 0 34px}
  .hero h1{font-size:58px;margin:10px 0 6px}
  .hero p{font-size:19px;margin-bottom:22px}
  .perks{grid-template-columns:1fr 1fr}.perks div:nth-child(2){border-right:0}.perks div{border-bottom:1px solid var(--line)}
  .sec{padding:56px 0}
  .grid{grid-template-columns:1fr 1fr;gap:26px 12px}
  .quick{display:none}
  .looks{grid-template-columns:repeat(6,62%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .look{scroll-snap-align:start}
  .sub{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr}
  .btns{flex-direction:column}.btns .btn{justify-content:center}
  .burger{cursor:pointer}
  .sh{margin-bottom:22px}
  .cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.cats button{white-space:nowrap}
  .story{gap:34px}
}
/* меню на телефоне */
.mnav{position:fixed;inset:0;z-index:60;display:none}
.mnav.on{display:block}
.mnav .bg{position:absolute;inset:0;background:rgba(30,15,10,.45)}
.mnav .pn{position:absolute;left:0;top:0;bottom:0;width:min(330px,86%);background:var(--cream);padding:24px 26px;display:flex;flex-direction:column;gap:4px}
.mnav .x{align-self:flex-end;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:var(--ink)}
.mnav a{font-family:var(--serif);font-size:30px;padding:8px 0;border-bottom:1px solid var(--line)}
.mnav .sm{margin-top:auto;font-size:13px;color:var(--muted);line-height:1.9}

/* ---- страницы магазина ---- */
.crumbs{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:26px 0 0}
.crumbs a:hover{color:var(--red)}
.pp{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:26px 0 80px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal .ph{aspect-ratio:3/4}
.gal .ph:first-child{grid-column:span 2;aspect-ratio:4/5}
.pi h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.05;margin:6px 0 12px}
.pi .price{font-size:22px;font-weight:600}.pi .price s{color:var(--muted);font-weight:400;font-size:17px;margin-left:10px}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.sizes button{font:inherit;min-width:64px;padding:11px 14px;border:1px solid var(--line);background:none;cursor:pointer;font-size:13px;letter-spacing:.06em}
.sizes button.on{border-color:var(--choc);background:var(--choc);color:var(--milk)}
.sizes button:disabled{opacity:.35;text-decoration:line-through;cursor:default}
.pi .btn{width:100%;justify-content:center;margin-top:6px}
.acc{margin-top:28px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);padding:16px 0}
.acc summary{cursor:pointer;font-size:13px;letter-spacing:.12em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.acc summary:after{content:"+"}.acc details[open] summary:after{content:"−"}
.acc p{margin-top:12px;color:#5b4636;white-space:pre-line}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--choc);color:var(--milk);padding:12px 22px;font-size:14px;z-index:70;opacity:0;transition:.3s;pointer-events:none}
.toast.on{opacity:1}
.page{max-width:780px;padding:30px 0 90px}
.page h1{font-family:var(--serif);font-weight:400;font-size:48px;margin-bottom:22px}
.page .tx{white-space:pre-line;font-size:16px;color:#4a372b}
.co{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;padding:24px 0 90px}
.co h1{font-family:var(--serif);font-weight:400;font-size:44px;margin-bottom:20px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);padding:12px 14px;border:1px solid var(--line);background:#fff;border-radius:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sum{background:var(--milk);padding:24px}
.sum .it{grid-template-columns:60px 1fr auto}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:6px}
.qty button{border:0;background:none;width:28px;height:28px;cursor:pointer;font-size:16px}
.qty span{min-width:22px;text-align:center;font-size:13px}
.empty{padding:60px 0;text-align:center;color:var(--muted)}
.done{text-align:center;padding:90px 0}
.done h1{font-family:var(--serif);font-weight:400;font-size:52px}
@media (max-width:900px){.pp,.co{grid-template-columns:1fr;gap:30px}.pi h1{font-size:36px}}