/* Lumen Beauty — Growyoo concept theme */
/* Fonts (self-hosted, SIL Open Font License): Bricolage Grotesque, Hanken Grotesk */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('hanken-grotesk-latin-600-normal.woff2') format('woff2')}

:root{
  --ground:#F7E9E4; --surface:#FFFBF9; --ink:#2E1519; --accent:#B4475A; --dew:#DCE7E1;
  --muted:#6E5458; --line:rgba(46,21,25,.14); --line-2:rgba(46,21,25,.08);
  --display:'Bricolage Grotesque','Avenir Next','Helvetica Neue',sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(18px,4vw,48px); --r-lg:28px; --r-md:18px; --r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--narrow{max-width:820px}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:10px 14px;border-radius:8px;z-index:100}
.skip-link:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main:focus{outline:none}

/* Type */
.display{font-family:var(--display);font-weight:700;font-size:clamp(42px,5.2vw,76px);line-height:.95;letter-spacing:-.035em}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.4vw,60px);line-height:1;letter-spacing:-.03em;margin-bottom:16px}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.02;letter-spacing:-.028em}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--muted);max-width:36em}
.fine{font-size:13px;color:var(--muted)}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{color:var(--accent)}
.price{font-weight:600;font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;font-weight:600;font-size:16px;text-decoration:none;line-height:1.1;transition:transform .15s ease,background-color .15s ease}
.btn:active{transform:scale(.98)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:#9A3A4C}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--surface)}
.btn--small{min-height:42px;padding:10px 18px;font-size:15px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Demo + announcement */
.demo-bar{background:var(--ink);color:#F3E3E0;font-size:13px;line-height:1.45;padding:9px var(--gutter);display:flex;justify-content:center;align-items:center;gap:6px 12px;flex-wrap:wrap;text-align:center}
.demo-bar__tag{background:#F2C9C4;color:var(--ink);font-weight:600;font-size:12px;padding:2px 10px;border-radius:var(--r-pill)}
.demo-bar a{color:#F2C9C4;font-weight:600}
.announce{background:var(--accent);color:#fff;text-align:center;font-size:14px;padding:9px var(--gutter)}
.announce a{text-decoration:none}

/* Header */
.header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-2)}
.header__row{display:flex;align-items:center;gap:28px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.04em;text-decoration:none}
.logo__dot{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF7F5 0 22%,#F2C9C4 23% 100%);box-shadow:0 0 0 2px var(--ink)}
.logo--light{color:var(--surface)}
.logo--light .logo__dot{box-shadow:0 0 0 2px var(--surface)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.nav a{text-decoration:none;font-weight:500;font-size:15px;padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--ink)}
.header__tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:none;border:0;cursor:pointer;text-decoration:none}
.icon-btn:hover{background:var(--surface)}
.bag{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--surface);text-decoration:none;font-weight:600;font-size:15px}
.bag__count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:#F2C9C4;color:var(--ink);font-size:12px}
.bag__count.bump{animation:bump .5s ease}
@keyframes bump{30%{transform:scale(1.35)}}
.header__menu{display:none}
@media (max-width:980px){
  .header__menu{display:inline-flex}
  .header__row{gap:8px}
  .nav{position:fixed;inset:0 25% 0 0;background:var(--surface);padding:96px 28px 28px;transform:translateX(-102%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;z-index:40}
  .nav.is-open{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:20px 0 60px rgba(46,21,25,.12)}
  .nav ul{flex-direction:column;gap:6px}
  .nav a{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em}
  .hide-sm{display:none}
}

/* Chips (radio pills) */
.chooser{border:0;margin:0;padding:0}
.chooser legend{font-size:14px;font-weight:600;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500;font-size:15px;transition:background-color .15s,color .15s}
.chip input:hover+span{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip input:checked+span{background:var(--ink);color:var(--surface);box-shadow:none}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip--swatch span{padding-left:46px;position:relative}
.chip--swatch span::before{content:"";position:absolute;left:8px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(46,21,25,.15)}

/* Signature: routine builder */
.routine{padding:clamp(36px,6vw,80px) 0 clamp(48px,7vw,96px)}
.routine__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.routine__copy{display:flex;flex-direction:column;gap:26px}
.routine__copy .display{max-width:10.5em}
.routine__shelf{background:var(--surface);border-radius:var(--r-lg);padding:clamp(16px,2.2vw,28px);box-shadow:0 1px 0 var(--line-2),0 40px 80px -40px rgba(46,21,25,.35)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.step{display:flex;flex-direction:column;min-width:0}
.step__label{font-size:13px;font-weight:600;color:var(--muted);margin:2px 4px 10px}
.step__pick{display:flex;flex-direction:column;gap:6px;flex:1}
.step__pick.is-in{animation:pickIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes pickIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.step__art{aspect-ratio:4/5;border-radius:var(--r-md);background:var(--tile,var(--ground));display:grid;place-items:center;padding:12% 10% 6%;margin-bottom:8px}
.step__art .art{width:100%;height:100%}
.step__name{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em;line-height:1.1;padding:0 4px}
.step__why{font-size:14px;color:var(--muted);line-height:1.4;padding:0 4px;flex:1}
.step__pick .price{padding:0 4px;font-size:15px}
.routine__total{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}
.routine__total p{display:flex;flex-direction:column;gap:2px}
.routine__sum{font-size:17px}
.routine__sum s{color:var(--muted);margin:0 4px}
.routine__sum b{font-family:var(--display);font-size:28px;letter-spacing:-.02em}
.routine__total small{font-size:13px;color:var(--accent);font-weight:600}
@media (max-width:980px){
  .routine__grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4px;padding:0 0 8px;scrollbar-width:thin}
  .step{scroll-snap-align:start}
  .routine__total .btn{width:100%}
}

/* Art */
.art__brand{font-family:var(--display);font-weight:700;font-size:15px;fill:var(--ink);letter-spacing:-.5px}
.art__brand--light{fill:#F7E9E4}
.art__name{font-family:var(--body);font-weight:600;font-size:10px;fill:var(--ink);opacity:.75}

/* Values */
.values{background:var(--dew)}
.values__list{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px}
.values__list li{display:flex;flex-direction:column;gap:2px}
.values__list b{font-weight:600}
.values__list span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.values__list{grid-template-columns:1fr 1fr}}

/* Sections */
.block-sec{padding:clamp(56px,8vw,104px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:36px}
.sec-head--stack{flex-direction:column;align-items:flex-start}
.page-head{margin-bottom:28px}

/* Product grid + cards */
.grid{display:grid;gap:clamp(14px,2vw,26px)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:12px;min-width:0}
.card__media{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border-radius:var(--r-md);background:var(--tile,var(--surface));padding:14% 16% 6%;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card__media .art{width:100%;height:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card__media:hover .art{transform:translateY(-6px) rotate(-2deg)}
.badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill)}
.card__info{display:flex;flex-direction:column;gap:6px;padding:0 2px}
.card__title{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.1}
.card__title a{text-decoration:none}
.card__desc{font-size:14px;color:var(--muted);line-height:1.4}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:2px}
.rating{font-size:13px;color:var(--ink)}
.rating small{color:var(--muted)}
.card .btn{margin-top:6px;align-self:flex-start}
.swatches{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:5px;align-items:center}
.swatches li{width:18px;height:18px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(46,21,25,.18)}
.swatches .swatches__more{width:auto;background:none;box-shadow:none;font-size:12px;color:var(--muted);padding-left:2px}

/* Shade finder (the one dark section) */
.shade{background:var(--ink);color:#F7E9E4;padding:clamp(56px,8vw,104px) 0}
.shade .lede,.shade .shade__hint{color:#D9C2C0}
.shade__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.shade__copy{display:flex;flex-direction:column;gap:24px}
.shade .chip span{background:transparent;color:#F7E9E4;box-shadow:inset 0 0 0 1.5px rgba(247,233,228,.35)}
.shade .chip input:checked+span{background:#F7E9E4;color:var(--ink)}
.range{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600}
.range input{width:100%;accent-color:#F2C9C4;height:28px}
.shade__hint{font-size:14px}
.shade__stage{display:flex;flex-direction:column;gap:22px}
.shade__ramp{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;height:56px}
.shade__ramp button{border:0;border-radius:var(--r-pill);cursor:pointer;background:var(--c);transition:transform .2s ease}
.shade__ramp button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink),0 0 0 5px #F7E9E4}
.shade__pick{display:grid;grid-template-columns:auto 1fr;gap:18px 24px;align-items:center;background:rgba(247,233,228,.06);border-radius:var(--r-lg);padding:24px}
.shade__swatch{width:clamp(110px,14vw,160px);aspect-ratio:1;border-radius:50%;background:var(--c,#D9A88A);box-shadow:inset -14px -18px 30px rgba(46,21,25,.18),inset 10px 12px 24px rgba(255,255,255,.18);transition:background-color .3s ease}
.shade__name{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.shade__product{color:#D9C2C0;margin-top:4px}
.shade__pick .price{display:block;margin-top:6px}
.shade__pick .btn{grid-column:1/-1;justify-self:start}
.shade .btn--accent{background:#F2C9C4;color:var(--ink)}
.shade .btn--accent:hover{background:#fff}
@media (max-width:900px){.shade__grid{grid-template-columns:1fr}}

/* Ingredients */
.ingredients{padding:clamp(56px,8vw,104px) 0}
.ing-list{border-top:1.5px solid var(--ink)}
.ing{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 40px;padding:24px 0;border-bottom:1px solid var(--line)}
.ing dt{display:flex;align-items:baseline;gap:18px}
.ing__dose{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.04em;line-height:.9;display:inline-flex;align-items:center;gap:12px;min-width:3.2em}
.ing__dose::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--dot);flex:none}
.ing__name{font-size:20px;font-weight:600}
.ing dd{display:flex;flex-direction:column;gap:6px;align-self:center}
.ing__in{font-size:14px;color:var(--muted)}
@media (max-width:760px){.ing{grid-template-columns:1fr}}

/* Results */
.results{padding:0 0 clamp(56px,8vw,104px)}
.results__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--surface);border-radius:var(--r-lg);padding:clamp(20px,3vw,40px)}
.results__art{aspect-ratio:1;border-radius:var(--r-md);background:var(--tile);display:grid;place-items:center;padding:12%}
.results__art .art{height:100%}
.results .h2{margin-bottom:14px}
.stats{list-style:none;margin:28px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stats li{display:flex;flex-direction:column;gap:6px;border-top:1.5px solid var(--ink);padding-top:14px}
.stats b{font-family:var(--display);font-weight:700;font-size:clamp(38px,4vw,56px);letter-spacing:-.04em;line-height:.9}
.stats span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.results__grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

/* Reviews */
.reviews{padding-top:0}
.reviews__score{color:var(--muted)}
.reviews__score b{font-family:var(--display);font-size:24px;color:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.quote{display:flex;flex-direction:column;gap:16px;padding:6px 0 0;border-top:1.5px solid var(--ink)}
.quote__stars{color:var(--accent);letter-spacing:2px;padding-top:12px}
.quote blockquote{margin:0;font-size:18px;line-height:1.5}
.quote figcaption{display:flex;flex-direction:column;font-size:14px;color:var(--muted);margin-top:auto}
.quote figcaption b{color:var(--ink);font-size:15px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* Journal */
.journal{background:var(--surface)}
.journal__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.story{display:flex;flex-direction:column;gap:14px;justify-content:space-between;min-height:260px;padding:26px;border-radius:var(--r-md);background:var(--tile,var(--ground));text-decoration:none;transition:transform .2s ease}
.story:hover{transform:translateY(-3px)}
.story__tag{font-size:13px;font-weight:600;align-self:flex-start;background:rgba(255,255,255,.65);padding:4px 11px;border-radius:var(--r-pill)}
.story h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.08}
.story__meta{font-size:13px;color:var(--muted)}
@media (max-width:860px){.journal__list{grid-template-columns:1fr}.story{min-height:180px}}

/* Footer */
.footer{background:var(--ink);color:#E9D6D3;padding:clamp(48px,7vw,80px) 0 32px}
.footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(247,233,228,.14)}
.footer__brand{display:flex;flex-direction:column;gap:14px;max-width:26em}
.signup{display:flex;flex-direction:column;gap:10px}
.signup label{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:#F7E9E4}
.signup__row{display:flex;gap:8px;flex-wrap:wrap}
.signup input{flex:1 1 220px;min-height:50px;padding:0 20px;border-radius:var(--r-pill);border:1.5px solid rgba(247,233,228,.3);background:transparent;color:#F7E9E4}
.signup input::placeholder{color:#B79C99}
.signup small{color:#B79C99}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:36px 0}
.footer__cols h2{font-size:15px;font-weight:600;color:#F7E9E4;margin-bottom:12px}
.footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__cols a{text-decoration:none;color:#D4BDBA}
.footer__cols a:hover{color:#fff}
.footer__legal{border-top:1px solid rgba(247,233,228,.14);padding-top:22px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#B79C99}
.footer__legal strong{color:#F2C9C4}
.footer__legal a{color:#F2C9C4}
@media (max-width:860px){.footer__top{grid-template-columns:1fr}.footer__cols{grid-template-columns:1fr 1fr}}

/* Product page */
.pdp{padding:clamp(28px,4vw,56px) 0}
.pdp__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.pdp__media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pdp__frame{aspect-ratio:4/5;border-radius:var(--r-md);background:var(--tile,var(--surface));overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2)}
.pdp__frame:first-child{grid-column:1/-1}
.pdp__frame img{width:100%;height:100%;object-fit:cover}
.pdp__frame .art{height:100%}
.pdp__frame:has(.art){padding:12% 18% 6%}
.pdp__info{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{text-decoration:none}
.pdp__price{font-size:22px}
.pdp__price s{color:var(--muted);font-size:17px}
.pdp__form{display:flex;flex-direction:column;gap:18px}
.purchase{display:flex;flex-direction:column;gap:8px}
.purchase__opt{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.accordion details{border-top:1px solid var(--line)}
.accordion details:last-child{border-bottom:1px solid var(--line)}
.accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding:18px 0;font-weight:600;min-height:44px}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:22px;line-height:1}
.accordion details[open] summary::after{content:"–"}
.rte{padding-bottom:18px;color:var(--muted)}
.rte p{margin:0 0 12px}
@media (max-width:900px){.pdp__grid{grid-template-columns:1fr}.pdp__info{position:static}}

/* Collection, cart, search, forms */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px}
.filter{position:relative}
.filter summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500;font-size:15px}
.filter summary::-webkit-details-marker{display:none}
.filter__body{position:absolute;z-index:5;top:52px;left:0;min-width:240px;background:var(--surface);border-radius:var(--r-md);padding:16px;box-shadow:0 20px 40px rgba(46,21,25,.14);display:flex;flex-direction:column;gap:10px}
.check{display:flex;gap:8px;align-items:center;font-size:15px}
.sort{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.sort select,.field input,.search input,.cart input{min-height:46px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface)}
.empty{font-size:18px;color:var(--muted);padding:24px 0}
.empty a{color:var(--ink);font-weight:600}
.pager{margin-top:32px}
.cart__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cart__item{display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cart__thumb{aspect-ratio:1;border-radius:14px;background:var(--surface);display:grid;place-items:center;overflow:hidden}
.cart__info{display:flex;flex-direction:column;gap:4px}
.cart__info a{font-weight:600;text-decoration:none}
.cart__info small{color:var(--muted)}
.cart__info label{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.cart__info input{width:84px;min-height:38px}
.cart__foot{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-top:24px}
.cart__total{font-size:20px}
.search{display:flex;gap:10px;margin:8px 0 24px;flex-wrap:wrap}
.search input{flex:1 1 280px}
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;margin-bottom:14px}
.article__img{border-radius:var(--r-md);overflow:hidden;margin:20px 0}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--surface);padding:14px 20px;border-radius:var(--r-pill);font-size:15px;box-shadow:0 18px 40px rgba(46,21,25,.3);max-width:calc(100% - 32px);text-align:center}
.toast a{color:#F2C9C4;font-weight:600;margin-left:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}