/* Lelia.shop — shared chrome styles (used by index, catalog, product). */
:root{
  --paper:#EEEAE0; --ink:#080808; --primary:#004034; --primary-ink:#EEEAE0;
  --accent:#E7511E; --accent-ink:#EEEAE0; --soft:#B5BCDC; --soft-ink:#080808;
  --line:rgba(8,8,8,.14); --radius:22px; --maxw:1320px; --gut:clamp(18px,4vw,56px);
  --f-disp:"Unbounded",system-ui,sans-serif; --f-ui:"Golos Text",system-ui,sans-serif; --f-script:"Marck Script",cursive;
}
[data-theme="autumn"]{--primary:#43281C;--primary-ink:#EEEAE0;--accent:#E7511E;--accent-ink:#EEEAE0;--soft:#767522;--soft-ink:#EEEAE0;}
[data-theme="winter"]{--primary:#2D232E;--primary-ink:#EEEAE0;--accent:#7D80DA;--accent-ink:#080808;--soft:#B5BCDC;--soft-ink:#080808;}
[data-theme="spring"]{--primary:#004034;--primary-ink:#EEEAE0;--accent:#CF94AA;--accent-ink:#080808;--soft:#B5BCDC;--soft-ink:#080808;}

*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .5s ease,color .5s ease}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%;display:block}
input,select{font-family:inherit}
body.grain::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--ink);border-radius:20px}::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--accent);color:var(--accent-ink)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes riseIn{from{transform:translateY(24px)}to{transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes shimmer{from{background-position:140% 0}to{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition:none!important}}

/* util bar */
.util{background:var(--primary);color:var(--primary-ink);font-size:12.5px;letter-spacing:.04em;transition:background .5s ease,color .5s ease}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:40px}
.util-marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.util-marq .track{display:inline-flex;white-space:nowrap;gap:34px;animation:marquee 26s linear infinite;will-change:transform}
.util-marq span{display:inline-flex;align-items:center;gap:34px;text-transform:uppercase;opacity:.92}
.util-marq i{font-style:normal;opacity:.5}
.season{display:flex;align-items:center;gap:6px}
.season .lbl{opacity:.6;text-transform:uppercase;font-size:10.5px;letter-spacing:.14em;margin-right:2px}
.season button{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.02em;padding:5px 11px;border-radius:999px;color:var(--primary-ink);border:1.5px solid transparent;opacity:.62;transition:all .2s ease;white-space:nowrap}
.season button:hover{opacity:1} .season button.on{background:var(--paper);color:var(--ink);opacity:1}

/* header */
.hdr{position:sticky;top:0;z-index:200;background:var(--paper);border-bottom:1px solid var(--line);transition:background .5s ease}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;gap:18px}
.logo{display:inline-flex;align-items:center} .logo-img{height:46px;width:auto;display:block}
.nav{display:flex;gap:30px;justify-content:center}
.nav a{font-weight:600;font-size:14.5px;position:relative;padding:4px 0;letter-spacing:.005em}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--accent);transition:right .28s ease}
.nav a:hover::after{right:0} .nav a.sale{color:var(--accent)}
.hdr-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.iconbtn{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;position:relative;transition:background .18s ease,transform .18s ease}
.iconbtn:hover{background:rgba(8,8,8,.06)} .iconbtn:active{transform:scale(.92)}
.badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;font-family:var(--f-ui)}
.badge.pulse{animation:pop .35s ease}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;transition:transform .16s ease,background .2s ease,color .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn svg{width:17px;height:17px} .btn:active{transform:translateY(1px) scale(.99)}
.btn-pri{background:var(--ink);color:var(--paper)} .btn-pri:hover{box-shadow:0 10px 26px -10px rgba(8,8,8,.5);transform:translateY(-2px)}
.btn-acc{background:var(--accent);color:var(--accent-ink)} .btn-acc:hover{box-shadow:0 12px 30px -10px var(--accent);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1.5px solid var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* section heading */
.sec{padding:clamp(46px,6vw,86px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.sec-head h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(30px,4.4vw,56px);letter-spacing:-.04em;line-height:.95;margin:0}
.sec-head .sub{font-size:13.5px;opacity:.6;max-width:34ch}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding-bottom:3px;border-bottom:2px solid var(--ink);transition:gap .2s ease;white-space:nowrap}
.link-arrow:hover{gap:13px}

/* product image */
.pimg{width:100%;height:100%;position:relative;display:grid;place-items:center;overflow:hidden}
.pimg img{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pimg-ok img{opacity:1} .card:hover .pimg img{transform:scale(1.05)}
.pimg-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
.pimg[data-light="1"].pimg-loading::after{background:linear-gradient(100deg,transparent 30%,rgba(8,8,8,.07) 50%,transparent 70%);background-size:220% 100%}
.pimg-fallback{grid-area:1/1;z-index:2;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.04em;opacity:.6;padding:6px 12px;text-align:center}
.pimg[data-light="0"] .pimg-fallback{color:rgba(255,255,255,.85)}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.card{display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:#ddd}
.card-tag{position:absolute;top:12px;left:12px;z-index:3;background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.card-tag.sale{background:var(--accent);color:var(--accent-ink)}
.card-fav{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:999px;background:var(--paper);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(8,8,8,.4);transition:transform .16s ease}
.card-fav:hover{transform:scale(1.1)} .card-fav svg{width:18px;height:18px}
.card-fav.on svg{fill:var(--accent);stroke:var(--accent)}
.card-add{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;background:var(--ink);color:var(--paper);border-radius:12px;padding:12px;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,background .2s ease}
.card:hover .card-add{opacity:1;transform:none} .card-add:hover{background:var(--accent);color:var(--accent-ink)} .card-add svg{width:16px;height:16px}
.card-link{position:absolute;inset:0;z-index:1}
.card-body{padding:13px 2px 0;display:flex;flex-direction:column;gap:6px}
.card-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.5}
.card-name{font-weight:600;font-size:15.5px;letter-spacing:-.01em;display:block}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px}
.card-price{font-family:var(--f-disp);font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.card-price .old{font-family:var(--f-ui);font-weight:500;font-size:13px;opacity:.45;text-decoration:line-through;margin-left:7px}
.card-sku{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.03em;opacity:.4}

/* cart drawer */
.scrim{position:fixed;inset:0;background:rgba(8,8,8,.42);z-index:500;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px);pointer-events:none}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--paper);z-index:600;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .36s cubic-bezier(.4,.8,.2,1);box-shadow:-20px 0 60px -30px rgba(8,8,8,.6)}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:-.03em;margin:0}
.drawer-body{flex:1;overflow-y:auto;padding:8px 22px}
.citem{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem .thumb{width:74px;height:92px;border-radius:12px;overflow:hidden;flex:none}
.citem .ci-main{flex:1;display:flex;flex-direction:column;gap:4px}
.citem .ci-name{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.citem .ci-cat{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.5}
.citem .ci-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:10px}
.qty-sm{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty-sm button{width:30px;height:30px;display:grid;place-items:center;transition:background .15s ease}.qty-sm button:hover{background:rgba(8,8,8,.07)}
.qty-sm span{min-width:26px;text-align:center;font-weight:600;font-size:14px;font-family:var(--f-disp)}
.ci-price{font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:-.01em}
.ci-rm{opacity:.45;transition:opacity .15s ease}.ci-rm:hover{opacity:1}
.drawer-foot{padding:18px 22px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.drawer-foot .row{display:flex;justify-content:space-between;align-items:baseline}
.drawer-foot .tt{font-size:13.5px;opacity:.65}.drawer-foot .tv{font-family:var(--f-disp);font-weight:700;font-size:24px;letter-spacing:-.02em}
.drawer-foot .ship{font-size:12.5px;opacity:.6;display:flex;align-items:center;gap:7px}
.empty-cart{text-align:center;padding:70px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-cart .ec{width:70px;height:70px;border-radius:999px;background:var(--soft);color:var(--soft-ink);display:grid;place-items:center}
.empty-cart p{opacity:.6;font-size:14.5px;margin:0}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:700;background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:999px;font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 40px -18px rgba(8,8,8,.6);animation:toastIn .3s ease}
.toast .tdot{width:9px;height:9px;border-radius:999px;background:var(--accent)}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,80px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot .flogo-img,.foot .flogo{height:88px;width:auto;display:block}
.foot .flogo{height:70px;margin-bottom:14px}
.foot .ftag{opacity:.6;font-size:13.5px;max-width:30ch;margin-top:18px}
.foot h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.5;margin:0 0 16px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14.5px;opacity:.82;transition:opacity .15s ease}.foot ul a:hover{opacity:1}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;opacity:.55;flex-wrap:wrap}

@media (max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .logo-img{height:40px} .hdr-in{grid-template-columns:auto 1fr} .nav{display:none}
  .grid{grid-template-columns:repeat(2,1fr)} .util-marq{display:none} .util-in{justify-content:center}
  .foot-top{grid-template-columns:1fr 1fr}
}