body.page{background:var(--oat);padding-top:calc(var(--demo-h) + 6.5rem)}
body.page.tinted{background:var(--tint)}
.page-head{padding:var(--s7) 0 var(--s6)}
.page-head h1{font-size:var(--t-xl)}
.page-head p{max-width:46ch;color:var(--stone);margin-top:var(--s3)}
.crumbs{font-size:var(--t-sm);color:var(--stone);margin-bottom:var(--s5)}
.crumbs a{color:inherit}

/* header additions */
.pill__cart{display:flex;align-items:center;gap:.45rem;font:inherit;font-size:var(--t-sm);font-weight:700;color:var(--oat);background:var(--midnight);border:0;border-radius:var(--r-pill);padding:.5rem .55rem .5rem .95rem;cursor:pointer}
.pill__count{min-width:1.4rem;height:1.4rem;display:inline-grid;place-items:center;border-radius:var(--r-pill);background:var(--oat);color:var(--midnight);font-size:.74rem}
.foot__links{display:flex;gap:var(--s5);list-style:none;margin:0 0 0 auto;padding:0}
.foot__links a{font-size:var(--t-sm);color:#E4DACB}

/* buttons and forms */
.btn{border:0;cursor:pointer;font-family:inherit}
.btn--block{display:block;width:100%;text-align:center}
.btn--ghost{background:transparent;color:var(--midnight);border:1.5px solid var(--midnight)}
.btn--ghost:hover{background:var(--midnight);color:var(--oat)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.field{margin-bottom:var(--s4)}
.field label,.legend{display:block;font-weight:700;font-size:var(--t-sm);margin-bottom:var(--s2)}
.input,select.input{width:100%;font:inherit;color:var(--midnight);background:#FBF7F0;border:1px solid rgba(30,42,68,.5);border-radius:var(--r-sm);padding:.8rem .9rem;min-height:2.9rem}
.input:focus-visible{outline:3px solid var(--midnight);outline-offset:2px}
.field--error .input{border-color:#8E2323;border-width:2px}
.err{color:#8E2323;font-size:var(--t-sm);margin:var(--s2) 0 0;font-weight:700}
.help{font-size:var(--t-xs);color:var(--stone);margin:var(--s2) 0 0}
.empty{text-align:center;padding:var(--s8) var(--s5)}
.empty__title{font-family:var(--f-display);font-size:1.9rem;font-weight:600;margin-bottom:var(--s3)}
.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--midnight);color:var(--oat);padding:.2rem .55rem;border-radius:var(--r-sm)}
.toast{position:fixed;left:50%;bottom:var(--s6);transform:translate(-50%,2rem);z-index:120;background:var(--midnight);color:var(--oat);padding:var(--s3) var(--s5);border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.spinner{display:inline-block;width:1.1rem;height:1.1rem;border:2px solid rgba(244,236,225,.4);border-top-color:var(--oat);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-.2rem;margin-right:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* cart drawer */
dialog.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(27rem,100vw);max-width:100vw;border:0;padding:0;background:var(--oat);color:var(--midnight)}
dialog.drawer[open]{display:flex;flex-direction:column;animation:slidein .35s var(--ease)}
dialog.drawer::backdrop{background:rgba(20,29,49,.5)}
@keyframes slidein{from{transform:translateX(2rem);opacity:0}to{transform:none;opacity:1}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s5);border-bottom:1px solid rgba(30,42,68,.18)}
.drawer__head h2{font-size:1.8rem}
.drawer__close{font:inherit;font-size:1.8rem;line-height:1;background:none;border:0;cursor:pointer;color:var(--midnight);width:2.6rem;height:2.6rem}
.drawer__body{flex:1;overflow:auto;padding:var(--s5)}
.drawer__foot{padding:var(--s5);border-top:1px solid rgba(30,42,68,.18);background:var(--oat-2)}
.lines{list-style:none;margin:0;padding:0}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid rgba(30,42,68,.12)}
.line__img{width:64px;height:80px;object-fit:contain;background:var(--blush);border-radius:32px 32px 4px 4px}
.line__name{margin:0;font-weight:700;font-size:var(--t-sm)}
.line__name a{text-decoration:none}
.line__meta{margin:.1rem 0 var(--s2);font-size:var(--t-xs);color:var(--stone)}
.line__price{margin:0;font-weight:700;font-size:var(--t-sm)}
.line__side{text-align:right}
.line__remove{font:inherit;font-size:var(--t-xs);background:none;border:0;color:var(--terra-deep);text-decoration:underline;cursor:pointer;padding:var(--s2) 0}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(30,42,68,.4);border-radius:var(--r-sm)}
.qty button{font:inherit;width:2.4rem;height:2.4rem;background:none;border:0;cursor:pointer;color:var(--midnight);font-size:1.1rem}
.qty span{min-width:2rem;text-align:center;font-weight:700;font-size:var(--t-sm)}
.free{font-size:var(--t-sm);color:var(--terra-deep);font-weight:700;margin-bottom:var(--s3)}
.sum{display:flex;justify-content:space-between;margin:0 0 var(--s2)}
.sum__note{font-size:var(--t-xs);color:var(--stone);margin-bottom:var(--s4)}

/* shop */
.filters{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s5)}
.chipset{display:flex;flex-wrap:wrap;gap:var(--s2)}
.fchip{font:inherit;font-size:var(--t-sm);font-weight:700;color:var(--midnight);background:transparent;border:1px solid rgba(30,42,68,.4);border-radius:var(--r-pill);padding:.5rem 1rem;cursor:pointer;min-height:2.5rem}
.fchip[aria-pressed="true"]{background:var(--midnight);color:var(--oat);border-color:var(--midnight)}
.filters__row{display:grid;grid-template-columns:1fr 12rem 12rem;gap:var(--s3);margin-bottom:var(--s5)}
@media (max-width:760px){.filters__row{grid-template-columns:1fr}}
.count{font-size:var(--t-sm);color:var(--stone);margin:0 0 var(--s5)}
.grid{list-style:none;margin:0;padding:0 0 var(--s9);display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--s7) var(--s6)}
.card a{text-decoration:none;display:block}
.card__media{position:relative;aspect-ratio:4/5;background:var(--tint);border-radius:50% 50% 6px 6px/34% 34% 6px 6px;overflow:hidden;transition:transform .5s var(--ease)}
.card a:hover .card__media{transform:translateY(-4px)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.card__media img.loaded{opacity:1}
.card__media.skel{background:linear-gradient(100deg,var(--blush) 30%,#F3E0D2 50%,var(--blush) 70%) 0 0/200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.card .tag{position:absolute;top:var(--s4);left:50%;transform:translateX(-50%);z-index:1}
.card h3{font-size:1.5rem;margin:var(--s4) 0 var(--s1)}
.card__meta{font-size:var(--t-xs);color:var(--stone);letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--s2)}
.card__price{margin:0;font-weight:700}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s8);align-items:start;padding-bottom:var(--s8)}
@media (max-width:860px){.pdp{grid-template-columns:1fr;gap:var(--s6)}}
.pdp__media{position:sticky;top:calc(var(--demo-h) + 6rem)}
@media (max-width:860px){.pdp__media{position:static}}
.viewer{position:relative;aspect-ratio:4/5;border-radius:50% 50% 8px 8px/30% 30% 8px 8px;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),rgba(255,255,255,0) 62%),rgba(255,255,255,.25);overflow:hidden}
.viewer__canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.viewer__canvas:active{cursor:grabbing}
.viewer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer__ctrl{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s4)}
.viewer__hint{text-align:center;font-size:var(--t-xs);color:var(--stone);margin:var(--s3) 0 0}
.pdp h1{font-size:var(--t-xl);margin-bottom:var(--s4)}
.price{font-size:var(--t-lg);font-weight:700;margin:0 0 var(--s4)}
.price small{font-size:var(--t-xs);font-weight:500;color:var(--stone);margin-left:.4rem}
fieldset{border:0;padding:0;margin:0 0 var(--s5)}
.optrow{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.opt span{display:block;padding:.65rem 1rem;border:1px solid rgba(30,42,68,.45);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:700;background:rgba(255,255,255,.35)}
.opt input:checked+span{background:var(--midnight);color:var(--oat);border-color:var(--midnight)}
.opt input:focus-visible+span{outline:3px solid var(--midnight);outline-offset:3px}
.buyrow{display:flex;gap:var(--s4);align-items:stretch;margin-bottom:var(--s5)}
.buyrow .btn{flex:1}
.soldout{background:rgba(255,255,255,.5);border:1px solid rgba(30,42,68,.3);border-radius:var(--r-sm);padding:var(--s4);margin-bottom:var(--s5)}
.soldout p{margin:0 0 var(--s3)}
.notify{display:flex;gap:var(--s2);flex-wrap:wrap}
.notify .input{flex:1;min-width:12rem}
.deliv{border-top:1px solid rgba(30,42,68,.2);padding-top:var(--s5);margin-bottom:var(--s5)}
.deliv__row{display:flex;gap:var(--s2)}
.deliv__row .input{max-width:9rem}
details.acc{border-top:1px solid rgba(30,42,68,.25)}
details.acc:last-of-type{border-bottom:1px solid rgba(30,42,68,.25)}
details.acc summary{cursor:pointer;list-style:none;padding:var(--s4) 0;font-family:var(--f-display);font-size:1.45rem;font-weight:600;display:flex;justify-content:space-between}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-family:var(--f-body);font-weight:400}
details.acc[open] summary::after{content:"\2212"}
.acc__body{padding:0 0 var(--s5)}
.ltable{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.ltable caption{text-align:left;font-size:var(--t-xs);color:var(--stone);padding-bottom:var(--s2)}
.ltable th,.ltable td{text-align:left;padding:.55rem .5rem .55rem 0;border-bottom:1px solid rgba(30,42,68,.15);vertical-align:top}
.ltable th{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.pairs{padding:var(--s7) 0 var(--s9)}
.pairs h2{font-size:var(--t-xl);margin-bottom:var(--s6)}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s8);align-items:start;padding-bottom:var(--s9)}
@media (max-width:900px){.co{grid-template-columns:1fr}}
.co h2{font-size:1.9rem;margin:var(--s6) 0 var(--s4)}
.co h2:first-of-type{margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.method{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border:1px solid rgba(30,42,68,.35);border-radius:var(--r-sm);margin-bottom:var(--s3);cursor:pointer;background:rgba(255,255,255,.4)}
.method input{margin-top:.3rem;accent-color:var(--midnight);width:1.1rem;height:1.1rem}
.method strong{display:block}
.method small{color:var(--stone)}
.method:has(input:checked){border-color:var(--midnight);border-width:2px;padding:calc(var(--s4) - 1px)}
.method__price{margin-left:auto;font-weight:700}
.errsum{border:2px solid #8E2323;background:#FBEDED;border-radius:var(--r-sm);padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.errsum h2{font-size:1.4rem!important;margin:0 0 var(--s2)!important;color:#8E2323}
.errsum ul{margin:0;padding-left:1.2rem}
.errsum a{color:#8E2323;font-weight:700}
.summary{background:rgba(255,255,255,.5);border:1px solid rgba(30,42,68,.2);border-radius:var(--r-sm);padding:var(--s5);position:sticky;top:calc(var(--demo-h) + 6rem)}
.summary h2{margin-top:0!important}
.sline{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
.sline img{width:56px;height:70px;object-fit:contain;background:var(--blush);border-radius:28px 28px 4px 4px}
.sline p{margin:0;font-size:var(--t-sm)}
.sline .m{font-size:var(--t-xs);color:var(--stone)}
.trow{display:flex;justify-content:space-between;margin:0 0 var(--s2);font-size:var(--t-sm)}
.trow--total{font-size:1.15rem;font-weight:700;border-top:1px solid rgba(30,42,68,.25);padding-top:var(--s3);margin-top:var(--s3)}
.check{display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s4) 0}
.check input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--midnight)}
dialog.modal{border:0;border-radius:8px;padding:0;width:min(30rem,calc(100vw - 2rem));background:var(--oat);color:var(--midnight)}
dialog.modal::backdrop{background:rgba(20,29,49,.6)}
.modal__in{padding:var(--s6)}
.modal h2{font-size:1.9rem;margin-bottom:var(--s2)}
.modal .amount{font-size:1.5rem;font-weight:700;margin:var(--s3) 0}
.scen{margin:var(--s4) 0}
.status{min-height:3rem;font-size:var(--t-sm);font-weight:700;margin:var(--s3) 0}
.status--bad{color:#8E2323}
.modal__btns{display:flex;gap:var(--s3)}
.modal__btns .btn{flex:1}
.done{max-width:42rem;margin:0 auto;padding:var(--s7) 0 var(--s9);text-align:center}
.done h1{font-size:var(--t-xl);margin-bottom:var(--s4)}
.done .box{text-align:left;background:rgba(255,255,255,.5);border:1px solid rgba(30,42,68,.2);border-radius:var(--r-sm);padding:var(--s5);margin:var(--s6) 0}
.foot{flex-wrap:wrap;row-gap:var(--s4)}
.foot__links{flex-wrap:wrap;gap:var(--s3) var(--s5);margin:0}
.foot p{flex:1 1 20rem}

/* mobile layout */
@media (max-width:760px){
.site-header{padding:0 var(--s3)}
.pill{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"b . c t" "l l l l";align-items:center;gap:var(--s2) var(--s3);border-radius:26px;padding:var(--s2) var(--s3)}
.pill__brand{grid-area:b}
.pill__cart{grid-area:c}
.pill__toggle{grid-area:t}
.pill__links{grid-area:l;display:flex;gap:var(--s4);overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding:0;scrollbar-width:none;border-top:1px solid rgba(30,42,68,.15);padding-top:var(--s2)}
.pill__links a{white-space:nowrap;font-size:var(--t-sm)}
.demo-bar{font-size:.7rem;line-height:1.2;padding:.35rem var(--s3)}
body.page{padding-top:calc(var(--demo-h) + 8rem)}
.hero{padding-top:calc(var(--demo-h) + 8rem);padding-bottom:7rem}
.scroll-hint{display:none}
}
@media (max-width:760px){.hero .eyebrow,.hero .lede{display:none}.hero h1{margin-bottom:var(--s4)}.hero .actions{margin-top:var(--s4)}}
body.tinted{--stone:#4A4137;--terra-deep:#7A3822}