:root{--cream:#EFE8DE;--paper:#F7F3EC;--ink:#141414;--blue:#2747D8;--muted:#6E675E;--line:#D9CFC2;--sale:#C0392B}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1440px;margin:0 auto;padding:0 56px}
.serif{font-family:'Bodoni Moda',serif}
/* top strip */
.strip{background:var(--ink);color:var(--cream);font:600 12px Archivo;letter-spacing:.14em;text-align:center;padding:9px 0;text-transform:uppercase}
/* header */
header{position:sticky;top:0;z-index:40;background:rgba(247,243,236,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd{height:78px;display:flex;align-items:center;gap:34px}
.burger{display:none;width:26px;height:18px;flex-direction:column;justify-content:space-between}.burger i{height:2px;background:var(--ink)}
.gender{display:flex;gap:6px}
.gender a{padding:10px 18px;border-radius:999px;font:700 14px Archivo;letter-spacing:.12em;text-transform:uppercase}
.gender a.on{background:var(--ink);color:#fff}
.logo{position:absolute;left:50%;transform:translateX(-50%);font:700 30px 'Bodoni Moda',serif;letter-spacing:.32em}
.tools{margin-left:auto;display:flex;align-items:center;gap:24px;font-weight:600;font-size:15px}
.search{display:flex;align-items:center;gap:10px;width:240px;height:42px;border-radius:999px;border:1.5px solid var(--line);padding:0 16px;color:var(--muted);font-weight:500}
.bag{position:relative;display:flex;align-items:center;gap:8px}
.bag svg{width:28px;height:28px}
.bag i{position:absolute;left:16px;top:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--blue);color:#fff;font:700 12px/20px Archivo;text-align:center;font-style:normal}
.cats{display:flex;gap:30px;height:48px;align-items:center;border-top:1px solid var(--line);font:500 15px Archivo}
.cats a.on{font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:-14px}
.cats .sale{color:var(--sale);font-weight:700}
/* mega menu */
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.12)}
body.menu .mega{display:block}
.mg{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:40px;padding:40px 0 50px}
.mg h5{margin:0 0 16px;font:700 12px Archivo;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.mg ul{list-style:none;margin:0;padding:0}
.mg li{display:flex;justify-content:space-between;padding:9px 0;font-size:17px;border-bottom:1px solid #ece4d8}
.mg li span{color:var(--muted);font-size:14px}
.mg li.hot{color:var(--sale);font-weight:700}
.mtile{position:relative;height:340px;overflow:hidden}
.mtile img{width:100%;height:100%;object-fit:cover}
.mtile div{position:absolute;left:24px;bottom:24px;color:#fff;font:500 40px/1 'Bodoni Moda',serif;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.mtile b{display:inline-block;margin-top:12px;padding:8px 14px;background:#fff;color:var(--ink);font:700 13px Archivo;letter-spacing:.12em;text-shadow:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:18px 30px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:16px;letter-spacing:.04em}
.btn.b{background:var(--blue)}
.btn.o{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.kicker{font:600 13px Archivo;letter-spacing:.2em;color:var(--blue);text-transform:uppercase}
h2{margin:0;font:500 84px/0.95 'Bodoni Moda',serif;letter-spacing:-2px}
h2 i{color:var(--blue)}
/* product card */
.card{position:relative}
.card .im{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e9e2d8}
.card .im img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;padding:6px 10px;font:700 12px Archivo;letter-spacing:.1em;background:#fff}
.badge.s{background:var(--sale);color:#fff}
.badge.l{left:auto;right:12px;background:var(--blue);color:#fff}
.fav{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.card h4{margin:14px 0 0;font:600 17px Archivo}
.card .pr{margin-top:4px;font-size:16px}
.card .pr s{color:var(--muted);margin-right:8px}
.card .pr b.s{color:var(--sale)}
.sw{margin-top:10px;display:flex;gap:6px}
.sw i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sw i.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.sz{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.sz span{min-width:32px;padding:4px 6px;border:1px solid var(--line);font:600 12px Archivo;text-align:center}
.sz span.x{color:#c4bdb3;text-decoration:line-through}
.concept{position:fixed;right:16px;bottom:16px;z-index:60;padding:7px 12px;border-radius:999px;background:rgba(20,20,20,.8);color:#EFE8DE;font:600 10px Archivo;letter-spacing:.12em}
footer{background:var(--ink);color:var(--cream);padding:60px 0 26px;overflow:hidden}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;font-size:15px;line-height:2;color:#cfc6ba}
.fcols b{display:block;color:#fff;letter-spacing:.14em;font-size:12px}
.fbig{margin-top:40px;font:italic 500 240px/.9 'Bodoni Moda',serif;letter-spacing:-6px;white-space:nowrap}
.fl{margin-top:20px;display:flex;justify-content:space-between;font-size:13px;color:#a9a196}
@media(max-width:760px){
  .wrap{padding:0 18px}
  .strip{font-size:10px}
  .hd{height:62px;gap:14px}.burger{display:flex}.gender,.search,.cats,.tools span.t{display:none}
  .logo{font-size:22px}
  .tools{gap:14px}
  h2{font-size:48px;letter-spacing:-1px}
  /* mobile menu drawer */
  .mega{position:fixed;top:0;bottom:0;left:0;right:0;z-index:80;overflow:auto;box-shadow:none}
  .mg{grid-template-columns:1fr;gap:18px;padding:0 0 30px}
  .mtop{display:flex!important}
  .mg li{font-size:19px;padding:14px 0}
  .mtile{height:200px}
  .fcols{grid-template-columns:1fr 1fr}
  .fbig{font-size:110px}
}
.mtop{display:none;align-items:center;justify-content:space-between;height:62px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mtop .seg{display:flex;background:var(--cream);border-radius:999px;padding:4px}
.mtop .seg a{padding:9px 22px;border-radius:999px;font:700 13px Archivo;letter-spacing:.12em}
.mtop .seg a.on{background:var(--ink);color:#fff}

body.menu header{backdrop-filter:none;background:var(--paper)}
@media(max-width:760px){body.menu .mega{position:fixed;inset:0;height:100vh;padding-bottom:40px}}
