/*
Theme Name: Breezy's Beauty Corner
Theme URI: https://breezysbeautycorner.co.ke
Author: Built for Breezy's Beauty Corner
Description: A WooCommerce theme for a Kenyan cosmetics shop — shade-swatch navigation, quick view, slide-out cart and a checkout that hands straight to Paystack or Pesapal. Built mobile-first for KES pricing.
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breezys
Tags: e-commerce, two-columns, custom-menu, custom-logo, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 9.5
*/

/* ============================================================
   SÈRE — design tokens
   ink        #241221  deep plum-black, all type
   porcelain  #FBF6F3  warm ground
   shell      #F1C9C4  blush surfaces
   lacquer    #C21B52  primary action (lipstick lacquer)
   sage       #C3D2C6  skincare accent
   bronze     #A9793F  hairlines + gilt details
   ============================================================ */
:root{
  --ink:#241221; --ink-60:rgba(36,18,33,.6); --ink-35:rgba(36,18,33,.35);
  --porcelain:#FBF6F3; --shell:#F1C9C4; --lacquer:#C21B52; --sage:#C3D2C6;
  --bronze:#A9793F; --line:rgba(36,18,33,.13); --card:#FFFDFC;
  --display:"Fraunces",Georgia,serif; --body:"Outfit",system-ui,sans-serif; --mono:"Space Mono",monospace;
  --r:14px; --shadow:0 1px 2px rgba(36,18,33,.05),0 12px 32px -18px rgba(36,18,33,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--porcelain);color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px,100% - 2.5rem);margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - 1.75rem)}}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.disp{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 60,"WONK" 1;line-height:1.02;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- announce + header ---------- */
.announce{background:var(--ink);color:var(--porcelain);text-align:center;padding:.6rem 1rem}
.announce .mono{font-size:.62rem;opacity:.9}
header{position:sticky;top:0;z-index:60;background:rgba(251,246,243,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.5rem;padding:.9rem 0}
.logo{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;font-variation-settings:"SOFT" 60,"WONK" 1}
.logo span{color:var(--lacquer)}
nav.main{display:flex;gap:1.6rem;margin-left:1rem;flex:1}
nav.main button{font-size:.92rem;padding:.25rem 0;position:relative}
nav.main button::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ink);transition:right .3s}
nav.main button:hover::after,nav.main button[aria-current="true"]::after{right:0}
.tools{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.icon-btn:hover{background:var(--shell)}
.cart-btn{position:relative}
.pip{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--lacquer);color:#fff;font-family:var(--mono);font-size:.6rem;display:grid;place-items:center}
.brand{display:flex;flex-direction:column;line-height:1;flex:none}
.brand-sub{color:var(--ink-35);font-size:.58rem;margin-top:.15rem}
@media(max-width:400px){.brand-sub{display:none}.logo{font-size:1.35rem}}
.burger{display:none}
@media(max-width:860px){
  nav.main{display:none}
  .burger{display:grid}
  .bar{gap:.5rem}
}

/* ---------- hero: the shade bar (signature) ---------- */
.hero{padding:4.5rem 0 3.5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--ink-60);margin-bottom:1.4rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--bronze)}
h1{font-size:clamp(2.9rem,6.4vw,5rem)}
h1 em{font-style:italic;color:var(--lacquer)}
.lede{max-width:42ch;margin:1.5rem 0 2rem;color:var(--ink-60);font-size:1.05rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:99px;font-size:.9rem;font-weight:500;transition:transform .18s,background .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--lacquer);color:#fff}
.btn-solid:hover{background:#a41544}
.btn-line{border:1px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--porcelain)}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;pointer-events:none}

/* shade bar */
.shadebar{display:flex;height:min(440px,58vh);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.slab{flex:1;position:relative;border:0;cursor:pointer;transition:flex .55s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.slab[aria-selected="true"]{flex:2.6}
.slab .code{position:absolute;top:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-family:var(--mono);font-size:.58rem;letter-spacing:.16em}
.slab .name{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-family:var(--display);font-size:1.15rem;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;height:calc(100% - 70px);display:grid;place-items:center;transition:.4s}
.slab[aria-selected="true"] .name{writing-mode:horizontal-tb;transform:none;height:auto;bottom:16px;font-size:1.5rem}
.slab .count{position:absolute;bottom:-30px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-family:var(--mono);font-size:.58rem;transition:bottom .4s .1s}
.slab[aria-selected="true"] .count{bottom:56px}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:2.4rem;padding:2.6rem 0}
  .shadebar{height:210px}
  .slab .name{writing-mode:horizontal-tb;transform:rotate(-90deg);font-size:.95rem;height:auto;bottom:50%}
  .slab[aria-selected="true"] .name{bottom:14px}
}

/* ---------- marquee ---------- */
.marq{border-block:1px solid var(--line);padding:.85rem 0;overflow:hidden;white-space:nowrap;background:var(--card)}
.marq-in{display:inline-flex;gap:2.5rem;animation:slide 34s linear infinite}
.marq-in span{color:var(--ink-60)}
.marq-in b{color:var(--bronze)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-in{animation:none}*{transition-duration:.01ms!important}}

/* ---------- sections ---------- */
section{padding:4.5rem 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap}
h2{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:400;font-variation-settings:"SOFT" 60,"WONK" 1;line-height:1.05;letter-spacing:-.02em}
.sec-head p{color:var(--ink-60);max-width:46ch;margin-top:.6rem}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cat{position:relative;border-radius:var(--r);padding:1.5rem;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);text-align:left;transition:transform .25s,box-shadow .25s}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cat h3{font-family:var(--display);font-weight:400;font-size:1.5rem}
.cat .mono{color:var(--ink-60)}
.cat svg{align-self:flex-end;opacity:.85}
@media(max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- shop toolbar ---------- */
.toolbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{padding:.5rem 1rem;border:1px solid var(--line);border-radius:99px;font-size:.82rem;transition:.2s}
.chip:hover{border-color:var(--ink-35)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:99px;padding:.45rem .95rem;background:var(--card);min-width:200px}
.search input{border:0;background:none;outline:none;width:100%;font-size:.88rem}
.sort{border:1px solid var(--line);border-radius:99px;padding:.55rem .9rem;background:var(--card);font-size:.82rem;cursor:pointer}
.tool-right{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:640px){.tool-right{margin-left:0;width:100%}.search{flex:1}}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shot{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;width:100%;padding:0;border:0;cursor:pointer;font:inherit;color:inherit}
.shot svg{width:58%;height:58%;transition:transform .4s}
.card:hover .shot svg{transform:scale(1.06) rotate(-2deg)}
.flag{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--porcelain);padding:.25rem .55rem;border-radius:99px}
.flag.sale{background:var(--lacquer)}
.quick{position:absolute;left:10px;right:10px;bottom:10px;pointer-events:none;background:rgba(251,246,243,.94);backdrop-filter:blur(6px);border-radius:99px;padding:.6rem;text-align:center;font-size:.8rem;font-weight:500;opacity:0;transform:translateY(8px);transition:.25s}
.card:hover .quick,.card:focus-within .quick{opacity:1;transform:none}
.info{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.info .brandline{color:var(--ink-35)}
.info h3{font-size:.98rem;font-weight:500;line-height:1.3}
.info h3 a:hover{color:var(--lacquer);text-decoration:underline;text-underline-offset:2px}
.swatches{display:flex;gap:5px;margin-top:.2rem}
.sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(36,18,33,.15)}
.priceline{margin-top:auto;padding-top:.7rem;display:flex;align-items:baseline;gap:.5rem}
.price{font-family:var(--mono);font-size:.92rem;font-weight:700}
.was{font-family:var(--mono);font-size:.72rem;color:var(--ink-35);text-decoration:line-through}
.stars{color:var(--bronze);font-size:.75rem;margin-left:auto;letter-spacing:.05em}
.empty{grid-column:1/-1;text-align:center;padding:4rem 1rem;border:1px dashed var(--line);border-radius:var(--r)}
.empty h3{font-family:var(--display);font-size:1.5rem;margin-bottom:.5rem}
.empty p{color:var(--ink-60);margin-bottom:1.2rem}

/* ---------- editorial strip ---------- */
.edit{background:var(--ink);color:var(--porcelain);border-radius:24px;padding:3.2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.edit h2{color:var(--porcelain)}
.edit p{color:rgba(251,246,243,.7);margin:1rem 0 1.8rem}
.edit .btn-line{border-color:rgba(251,246,243,.4);color:var(--porcelain)}
.edit .btn-line:hover{background:var(--porcelain);color:var(--ink)}
.routine{display:grid;gap:.7rem}
.step{display:flex;gap:1rem;align-items:center;padding:.9rem 1.1rem;border:1px solid rgba(251,246,243,.16);border-radius:12px}
.step .num{font-family:var(--mono);font-size:.65rem;color:var(--shell)}
.step .t{font-size:.92rem}
.step .m{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:rgba(251,246,243,.5)}
@media(max-width:860px){.edit{grid-template-columns:1fr;padding:2rem;gap:2rem}}

/* trust row */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.trust div{padding:1.6rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.trust h4{font-family:var(--display);font-weight:400;font-size:1.1rem;margin:.6rem 0 .3rem}
.trust p{font-size:.82rem;color:var(--ink-60)}
@media(max-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}

/* ---------- footer ---------- */
footer{background:var(--card);border-top:1px solid var(--line);padding:3.5rem 0 1.5rem;margin-top:2rem}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
.fgrid h5{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);margin-bottom:1rem}
.fgrid ul{list-style:none;display:grid;gap:.55rem}
.fgrid a{font-size:.9rem;color:var(--ink-60)}
.fgrid a:hover{color:var(--lacquer)}
.news{display:flex;gap:.5rem;margin-top:1rem;max-width:340px}
.news input{flex:1;border:1px solid var(--line);border-radius:99px;padding:.7rem 1rem;background:var(--porcelain);outline:none;font-size:.88rem}
.news input:focus{border-color:var(--ink-35)}
.foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink-35)}
.pays{display:flex;gap:.5rem;align-items:center}
.pays span{border:1px solid var(--line);border-radius:6px;padding:.25rem .5rem;font-family:var(--mono);font-size:.6rem;color:var(--ink-60)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:1.8rem}}

/* ---------- drawer / modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(36,18,33,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--porcelain);z-index:90;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.3rem;border-bottom:1px solid var(--line)}
.dhead h3{font-family:var(--display);font-weight:400;font-size:1.35rem}
.dbody{flex:1;overflow-y:auto;padding:1.1rem 1.3rem}
.dfoot{border-top:1px solid var(--line);padding:1.2rem 1.3rem;background:var(--card)}
.line{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem;color:var(--ink-60)}
.line.total{color:var(--ink);font-size:1.05rem;font-weight:500;margin:.9rem 0 1.1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.line.total b{font-family:var(--mono)}
.citem{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.citem .thumb{width:74px;height:74px;border-radius:10px;flex:none;display:grid;place-items:center}
.citem .thumb svg{width:60%;height:60%}
.citem h4{font-size:.92rem;font-weight:500}
.citem .meta{color:var(--ink-35);margin:.15rem 0 .5rem}
.qty{display:flex;align-items:center;gap:.2rem;border:1px solid var(--line);border-radius:99px;padding:.15rem}
.qty button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1}
.qty button:hover{background:var(--shell)}
.qty span{min-width:24px;text-align:center;font-family:var(--mono);font-size:.8rem}
.citem .right{margin-left:auto;text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.rm{color:var(--ink-35);font-size:.75rem;text-decoration:underline}
.rm:hover{color:var(--lacquer)}

/* modal */
.modal{position:fixed;z-index:90;inset:auto 0 0 0;background:var(--porcelain);border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.modal.on{transform:none}
@media(min-width:860px){
  .modal{inset:50% auto auto 50%;width:min(880px,92vw);max-height:88vh;border-radius:20px;transform:translate(-50%,-46%) scale(.97);opacity:0;transition:.3s}
  .modal.on{transform:translate(-50%,-50%);opacity:1}
}
.mgrid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:860px){.mgrid{grid-template-columns:1fr}}
.mshot{aspect-ratio:1;display:grid;place-items:center}
.mshot svg{width:52%;height:52%}
.mbody{padding:1.8rem}
.mbody h3{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1.06;margin:.5rem 0 .6rem;font-variation-settings:"SOFT" 60,"WONK" 1}
.mbody .desc{color:var(--ink-60);font-size:.94rem;margin:.8rem 0 1.2rem}
.mprice{font-family:var(--mono);font-size:1.5rem;font-weight:700}
.opt-label{margin:1.1rem 0 .6rem;color:var(--ink-35)}
.shade-row{display:flex;gap:.5rem;flex-wrap:wrap}
.shade{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem .35rem .4rem;font-size:.82rem}
.shade i{width:18px;height:18px;border-radius:50%;display:block}
.shade[aria-pressed="true"]{border-color:var(--ink);background:var(--card)}
.mrow{display:flex;gap:.7rem;align-items:center;margin-top:1.4rem}
.spec{list-style:none;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);display:grid;gap:.45rem;font-size:.85rem;color:var(--ink-60)}
.spec b{color:var(--ink);font-weight:500}
.close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line)}
.close:hover{background:var(--shell)}

/* ---------- checkout ---------- */
.co-step{display:none}
.co-step.on{display:block}
.field{margin-bottom:.9rem}
.field label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;background:var(--card);outline:none;font-size:.92rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field.err input,.field.err select{border-color:var(--lacquer)}
.field .msg{color:var(--lacquer);font-size:.75rem;margin-top:.3rem;display:none}
.field.err .msg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pay-opts{display:grid;gap:.6rem;margin:.4rem 0 1.2rem}
.pay{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;text-align:left;width:100%;background:var(--card)}
.pay[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pay .dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-35);flex:none;display:grid;place-items:center}
.pay[aria-pressed="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lacquer)}
.pay b{font-weight:500;font-size:.92rem;display:block}
.pay small{color:var(--ink-60);font-size:.78rem}
.pay .logo-chip{margin-left:auto;font-family:var(--mono);font-size:.58rem;border:1px solid var(--line);border-radius:6px;padding:.25rem .45rem;color:var(--ink-60)}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bronze);border-radius:8px;padding:.75rem .9rem;font-size:.78rem;color:var(--ink-60);margin-bottom:1rem}
.done{text-align:center;padding:2rem .5rem}
.done .tick{width:64px;height:64px;border-radius:50%;background:var(--sage);display:grid;place-items:center;margin:0 auto 1.2rem}
.done h3{font-family:var(--display);font-size:1.9rem;font-weight:400;margin-bottom:.5rem}
.done p{color:var(--ink-60);margin-bottom:1.4rem}
.ref{font-family:var(--mono);font-size:.75rem;background:var(--shell);border-radius:8px;padding:.6rem;margin-bottom:1.4rem}

/* ---------- product page ---------- */
.crumbs{padding:1.6rem 0 .4rem;display:flex;gap:.5rem;align-items:center;color:var(--ink-35);flex-wrap:wrap}
.crumbs a:hover{color:var(--lacquer)}
.pp{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;padding:1.2rem 0 2rem;align-items:start}
.pp-hero{position:relative;aspect-ratio:1;border-radius:20px;display:grid;place-items:center;overflow:hidden}
.pp-hero svg{width:56%;height:56%}
.pp-hero .flag{top:16px;left:16px}
.pp-thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.pp-thumb{width:74px;height:74px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);transition:.2s}
.pp-thumb svg{width:64%;height:64%}
.pp-thumb[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pp-title{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 60,"WONK" 1;font-size:clamp(2rem,4vw,2.9rem);line-height:1.03;letter-spacing:-.02em;margin:.4rem 0 .5rem}
.pp-rate{display:flex;gap:.6rem;align-items:center;font-size:.82rem;color:var(--ink-60)}
.pp-desc{color:var(--ink-60);margin:.9rem 0 .4rem;font-size:1rem;max-width:52ch}
.pp-accord{margin-top:2rem;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:1rem 0;font-size:.95rem;font-weight:500;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc .chev{font-family:var(--mono);color:var(--ink-35);font-size:1.1rem}
.acc[open] .chev{transform:rotate(45deg)}
.acc-b{padding:0 0 1.1rem;color:var(--ink-60);font-size:.9rem}
.acc-b .spec{margin:0;padding:0;border:0}
.share{margin-top:1.6rem;color:var(--ink-35);text-decoration:underline;display:block}
.share:hover{color:var(--lacquer)}
.full-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;font-size:.85rem;font-weight:500;border-bottom:1px solid var(--ink-35);padding-bottom:.15rem}
.full-link:hover{color:var(--lacquer);border-color:var(--lacquer)}
@media(max-width:860px){.pp{grid-template-columns:1fr;gap:1.6rem}.crumbs{padding-top:1rem}}

/* real product photography (WooCommerce) */
.photo{width:100%;height:100%;object-fit:cover;display:block}
.shot .photo,.mshot .photo,.pp-hero .photo,.pp-thumb .photo,.citem .thumb .photo{width:100%;height:100%}

/* catalogue status + skeletons */
.cstatus{padding:.7rem 1.25rem;text-align:center;font-size:.85rem;border-bottom:1px solid var(--line);background:var(--shell)}
.cstatus.bad{background:#F6DCE0;color:#7C1C3C}
.cstatus button{text-decoration:underline;margin-left:.6rem;font-size:.82rem}
.sk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sk .sk-shot{aspect-ratio:1;background:linear-gradient(100deg,rgba(36,18,33,.05) 30%,rgba(36,18,33,.10) 50%,rgba(36,18,33,.05) 70%);background-size:220% 100%;animation:sheen 1.3s linear infinite}
.sk .sk-txt{height:11px;margin:1rem 1rem 0;border-radius:99px;background:rgba(36,18,33,.08)}
.sk .sk-txt.short{width:45%;margin-bottom:1.3rem}
@keyframes sheen{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.sk .sk-shot{animation:none}}

/* discount code */
.promo-box{display:flex;gap:.5rem;margin-bottom:.9rem}
.promo-box input{flex:1;border:1px dashed var(--ink-35);border-radius:10px;padding:.65rem .85rem;background:transparent;outline:none;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em}
.promo-box input::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-35)}
.promo-box input:focus{border-style:solid;border-color:var(--ink)}
.promo-box button{border:1px solid var(--ink);border-radius:10px;padding:.65rem 1.1rem;font-size:.85rem;font-weight:500}
.promo-box button:hover{background:var(--ink);color:var(--porcelain)}
.promo-msg{color:var(--lacquer);font-size:.78rem;margin:-.5rem 0 .8rem}
.promo-on{display:flex;align-items:center;gap:.6rem;background:var(--sage);border-radius:10px;padding:.6rem .85rem;margin-bottom:.9rem;font-size:.85rem}
.promo-on .mono{background:var(--card);border-radius:6px;padding:.2rem .45rem;font-weight:700}
.promo-on button{margin-left:auto;font-size:.78rem;text-decoration:underline;color:var(--ink-60)}
.promo-on button:hover{color:var(--lacquer)}

/* mobile nav sheet */
.msheet{position:fixed;inset:0;z-index:95;background:var(--porcelain);padding:1.5rem;transform:translateY(-100%);transition:transform .35s;display:flex;flex-direction:column;gap:.4rem;height:var(--vh,100vh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.msheet.on{transform:none}
.msheet a,.msheet button.nv{font-family:var(--display);font-size:2rem;font-weight:400;padding:.5rem 0;text-align:left;border-bottom:1px solid var(--line);flex:none}

/* ---- short viewports: phones held in landscape, small laptops ----
   Below 861px the hamburger is still the navigation, but there is barely
   any height, so the sheet becomes a scrollable two-column list and the
   hero stops trying to fill the screen. */
@media(max-height:560px){
  .msheet{padding:1rem 1.25rem;gap:.2rem}
  .msheet a,.msheet button.nv{font-size:1.4rem;padding:.45rem 0}
  .hero{padding:2rem 0}
  .shadebar{height:min(440px,52vh)}
  .drawer .dbody{padding:.8rem 1.1rem}
  .modal{max-height:94vh}
  .mbody{padding:1.1rem}
  .mbody h3{font-size:1.5rem}
}
@media(max-height:480px) and (orientation:landscape){
  header{position:static}
  .msheet{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:1.4rem}
  .msheet>div:first-child{grid-column:1/-1}
  .msheet a,.msheet button.nv{font-size:1.15rem}
  .announce{display:none}
}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--porcelain);padding:.85rem 1.3rem;border-radius:99px;font-size:.87rem;z-index:120;opacity:0;pointer-events:none;transition:.28s;box-shadow:var(--shadow);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* views */
.view{display:none}
.view.on{display:block}

/* ============================================================
   WORDPRESS + WOOCOMMERCE
   Everything above is the design system. Everything below wires
   it to the markup WordPress and WooCommerce actually output.
   ============================================================ */

/* --- WP core requirements --- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}
.screen-reader-text:focus{background:var(--card);clip:auto!important;display:block;height:auto;left:5px;padding:1rem;top:5px;width:auto;z-index:100000;border-radius:8px}
.alignleft{float:left;margin:.4rem 1.5rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.5rem}
.aligncenter{display:block;margin-inline:auto}
.alignwide{width:min(1240px,100%)}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:.8rem;color:var(--ink-60);margin-top:.4rem}
.sticky,.bypostauthor{}
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:200}

/* --- editor content (pages, posts, product descriptions) --- */
.entry-content>*+*{margin-top:1.1rem}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--display);font-weight:400;line-height:1.15;margin-top:2rem}
.entry-content h2{font-size:1.9rem}.entry-content h3{font-size:1.4rem}.entry-content h4{font-size:1.15rem}
.entry-content a{color:var(--lacquer);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.3rem}
.entry-content li+li{margin-top:.4rem}
.entry-content blockquote{border-left:3px solid var(--bronze);padding-left:1.2rem;font-family:var(--display);font-size:1.25rem;font-style:italic}
.entry-content img{border-radius:var(--r);height:auto}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.entry-content code{font-family:var(--mono);font-size:.85em;background:var(--shell);padding:.15rem .4rem;border-radius:5px}
.entry-content pre{background:var(--ink);color:var(--porcelain);padding:1.2rem;border-radius:var(--r);overflow-x:auto}
.entry-content pre code{background:none;color:inherit}

.page-hero{padding:3.2rem 0 1.5rem;border-bottom:1px solid var(--line)}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.02em;font-variation-settings:"SOFT" 60,"WONK" 1}
.page-hero p{color:var(--ink-60);margin-top:.7rem;max-width:52ch}
.narrow{width:min(720px,100% - 2.5rem);margin-inline:auto}
.post-meta{color:var(--ink-35);margin-top:.8rem}

/* --- blog / archive listing --- */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-list{grid-template-columns:1fr}}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card .pc-body{padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.post-card h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2}
.post-card p{color:var(--ink-60);font-size:.9rem}

/* --- pagination (WP + Woo) --- */
.woocommerce-pagination,.bbc-pagination{margin-top:2.5rem;display:flex;justify-content:center}
.woocommerce-pagination ul,.bbc-pagination .nav-links{display:flex;gap:.4rem;list-style:none;padding:0;flex-wrap:wrap}
.woocommerce-pagination a,.woocommerce-pagination span,.bbc-pagination a,.bbc-pagination span{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;border:1px solid var(--line);
  border-radius:99px;font-family:var(--mono);font-size:.75rem;background:var(--card)}
.woocommerce-pagination .current,.bbc-pagination .current{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.woocommerce-pagination a:hover,.bbc-pagination a:hover{border-color:var(--ink-35)}

/* --- WooCommerce notices --- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bronze);
  border-radius:10px;padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.9rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.woocommerce-message{border-left-color:var(--sage)}
.woocommerce-error{border-left-color:var(--lacquer);color:var(--lacquer)}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

/* --- Woo buttons mapped to the design system --- */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button,
.woocommerce #respond input#submit,.wc-block-components-button{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--lacquer);color:#fff;border:0;
  padding:.9rem 1.6rem;border-radius:99px;font-family:var(--body);font-size:.9rem;font-weight:500;
  line-height:1;cursor:pointer;transition:background .2s,transform .18s}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover{background:#a41544;color:#fff}
.woocommerce .button:active{transform:translateY(1px)}
.woocommerce .button.alt{background:var(--ink)}
.woocommerce .button.alt:hover{background:#3a2036}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5;pointer-events:none}
.woocommerce .button.wc-backward{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.woocommerce .button.wc-backward:hover{background:var(--ink);color:var(--porcelain)}

/* --- Woo form fields --- */
.woocommerce form .form-row{display:flex;flex-direction:column;margin-bottom:1rem;padding:0}
.woocommerce form .form-row label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35);margin-bottom:.35rem}
.woocommerce form .form-row .required{color:var(--lacquer);text-decoration:none}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;background:var(--card);
  outline:none;font-family:var(--body);font-size:.92rem;height:auto;color:var(--ink)}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{border-color:var(--ink)}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--lacquer)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.5;padding:0;color:var(--ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:12px;right:8px}
.woocommerce-form__label-for-checkbox{flex-direction:row!important;align-items:center;gap:.6rem}
.woocommerce-form__label-for-checkbox span{font-family:var(--body);font-size:.9rem;
  letter-spacing:0;text-transform:none;color:var(--ink)}

/* --- Woo cart + checkout pages --- */
.woocommerce-cart-form table.shop_table,.woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;border-spacing:0;width:100%;overflow:hidden}
.woocommerce table.shop_table th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35);font-weight:400;text-align:left;padding:1rem;background:var(--card)}
.woocommerce table.shop_table td{padding:1rem;border-top:1px solid var(--line);vertical-align:middle}
.woocommerce table.shop_table img{width:64px;border-radius:8px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{
  font-family:var(--display);font-weight:400;font-size:1.5rem;margin-bottom:1rem}
.woocommerce .cart-collaterals .cart_totals{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem}
.woocommerce-checkout #payment{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;padding:0;border:0}
.woocommerce-checkout #payment ul.payment_methods li{border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;margin-bottom:.6rem}
.woocommerce-checkout #payment div.payment_box{background:var(--porcelain);border-radius:10px;
  padding:.8rem;font-size:.85rem;color:var(--ink-60);margin-top:.7rem}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce .coupon{display:flex;gap:.5rem;flex-wrap:wrap}
.woocommerce .coupon input.input-text{border-style:dashed!important;text-transform:uppercase;letter-spacing:.06em}
.woocommerce-checkout-review-order-table tfoot th{background:transparent}
.woocommerce ul.order_details{list-style:none;padding:0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1.5rem 0}
.woocommerce ul.order_details li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem;
  font-family:var(--mono);font-size:.8rem}
.woocommerce ul.order_details li strong{display:block;font-family:var(--body);font-size:1rem;margin-top:.3rem}
.woocommerce-privacy-policy-text{font-size:.82rem;color:var(--ink-60)}
.woocommerce .quantity input.qty{width:70px;text-align:center;border:1px solid var(--line);
  border-radius:99px;padding:.5rem;background:var(--card);font-family:var(--mono)}
.wc-proceed-to-checkout .button{width:100%;justify-content:center}

/* --- shade swatches on the variation form --- */
.bbc-swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .2rem}
.bbc-sw{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:99px;
  padding:.35rem .8rem .35rem .4rem;font-size:.82rem;background:var(--card);cursor:pointer;transition:.18s}
.bbc-sw i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid rgba(36,18,33,.15)}
.bbc-sw:hover{border-color:var(--ink-35)}
.bbc-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bbc-sw.is-out{opacity:.4}
.bbc-sw.is-out i{position:relative;overflow:hidden}
.woocommerce div.product form.cart .variations{width:100%;margin-bottom:1rem}
.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{
  padding:0;border:0;display:block;text-align:left}
.woocommerce div.product form.cart .variations label{font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35)}
.bbc-hide-select{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.woocommerce div.product form.cart .reset_variations{font-size:.78rem;color:var(--ink-35);text-decoration:underline}

/* --- single product page --- */
.bbc-single{padding:2rem 0 4rem}
.bbc-single .pp{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
@media(max-width:900px){.bbc-single .pp{grid-template-columns:1fr;gap:1.8rem}}
.bbc-single .pp-media{position:sticky;top:110px}
@media(max-width:900px){.bbc-single .pp-media{position:static}}
.bbc-gallery{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.bbc-gallery .g-main{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;position:relative}
.bbc-gallery .g-main img{width:100%;height:100%;object-fit:cover}
.bbc-gallery .g-main svg{width:56%;height:56%}
.bbc-thumbs{display:flex;gap:.55rem;padding:.7rem;overflow-x:auto}
.bbc-thumbs button{width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--porcelain);cursor:pointer}
.bbc-thumbs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bbc-thumbs img{width:100%;height:100%;object-fit:cover}
.woocommerce div.product .product_title{font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.04;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 60,"WONK" 1;margin:.4rem 0 .5rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--ink)}
.woocommerce div.product p.price del{font-size:.8rem;color:var(--ink-35);font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--lacquer)}
.woocommerce div.product .woocommerce-product-rating{display:flex;align-items:center;gap:.6rem;
  font-size:.85rem;color:var(--ink-60);margin-bottom:.6rem}
.woocommerce .star-rating{color:var(--bronze)}
.bbc-short{color:var(--ink-60);font-size:.96rem;margin:1rem 0}
.woocommerce div.product form.cart{display:flex;flex-direction:column;gap:.8rem;margin:1.4rem 0}
.woocommerce div.product form.cart .bbc-buyrow{display:flex;gap:.7rem;align-items:center}
.woocommerce div.product form.cart .button{flex:1;justify-content:center}
.bbc-acc{border-top:1px solid var(--line);margin-top:1.6rem}
.bbc-acc details{border-bottom:1px solid var(--line)}
.bbc-acc summary{cursor:pointer;padding:1rem 0;font-size:.95rem;font-weight:500;list-style:none;
  display:flex;align-items:center;justify-content:space-between}
.bbc-acc summary::-webkit-details-marker{display:none}
.bbc-acc summary::after{content:"+";font-family:var(--mono);color:var(--ink-35);font-size:1.1rem}
.bbc-acc details[open] summary::after{content:"–"}
.bbc-acc .acc-body{padding:0 0 1.2rem;color:var(--ink-60);font-size:.9rem}
.bbc-acc .acc-body ul{list-style:none;display:grid;gap:.4rem}
.bbc-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35)}
.woocommerce div.product .woocommerce-tabs{display:none}
.related.products>h2,.up-sells>h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:3.5rem 0 1.5rem}
.woocommerce .related ul.products,.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.2rem;list-style:none;padding:0;margin:0}
@media(max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:.85rem}}
.woocommerce ul.products li.product{margin:0;width:auto;float:none}

/* --- breadcrumbs --- */
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:1.4rem 0;color:var(--ink-35)}
.crumbs a{color:var(--ink-60)}
.crumbs a:hover{color:var(--lacquer)}

/* --- cart drawer (WooCommerce fragments) --- */
.drawer .empty .button{margin-top:.5rem}
.bbc-line{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.5rem;color:var(--ink-60)}
.bbc-coupon{display:flex;gap:.5rem;margin-bottom:.9rem}
.bbc-coupon input{flex:1;border:1px dashed var(--ink-35);border-radius:10px;padding:.65rem .85rem;
  background:transparent;outline:none;font-size:.88rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--body)}
.bbc-coupon input::placeholder{text-transform:none;letter-spacing:0;color:var(--ink-35)}
.bbc-coupon input:focus{border-style:solid;border-color:var(--ink)}
.bbc-coupon button{border:1px solid var(--ink);border-radius:10px;padding:.65rem 1.1rem;font-size:.85rem;font-weight:500;background:none}
.bbc-coupon button:hover{background:var(--ink);color:var(--porcelain)}
.bbc-applied{display:flex;align-items:center;gap:.6rem;background:var(--sage);border-radius:10px;
  padding:.6rem .85rem;margin-bottom:.6rem;font-size:.85rem}
.bbc-applied .mono{background:var(--card);border-radius:6px;padding:.2rem .45rem;font-weight:700}
.bbc-applied a{margin-left:auto;font-size:.78rem;text-decoration:underline;color:var(--ink-60)}
.bbc-busy{opacity:.5;pointer-events:none}

/* --- loading + quick view --- */
.qv-loading{padding:4rem;text-align:center;color:var(--ink-60);font-size:.9rem}
.spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--lacquer);
  border-radius:50%;animation:spin .7s linear infinite;margin:0 auto .8rem}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
.added_to_cart{display:none}

/* --- navigation menus rendered by WordPress --- */
nav.main{align-items:center}
nav.main ul.nav-list{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
nav.main ul.nav-list li{position:relative}
nav.main ul.nav-list a{font-size:.92rem;padding:.25rem 0;position:relative;display:block}
nav.main ul.nav-list a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ink);transition:right .3s}
nav.main ul.nav-list a:hover::after,nav.main .current-menu-item>a::after,
nav.main .current_page_item>a::after,nav.main .current-menu-parent>a::after{right:0}
.msheet ul.sheet-list{list-style:none;margin:0;padding:0;display:contents}
.msheet ul.sheet-list li{list-style:none}
.msheet ul.sheet-list a{display:block;font-family:var(--display);font-size:2rem;font-weight:400;
  padding:.5rem 0;text-align:left;border-bottom:1px solid var(--line)}
@media(max-height:560px){.msheet ul.sheet-list a{font-size:1.4rem;padding:.45rem 0}}
@media(max-height:480px) and (orientation:landscape){
  .msheet ul.sheet-list{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem}
  .msheet ul.sheet-list a{font-size:1.15rem}
}
.fgrid ul{list-style:none;padding:0}
#searchBar{padding-bottom:.2rem}

/* --- shade swatch buttons (quick view + product page) --- */
.bbc-swatch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:99px;
  padding:.35rem .8rem .35rem .4rem;font-size:.82rem;background:var(--card);cursor:pointer;transition:.18s}
.bbc-swatch i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid rgba(36,18,33,.15)}
.bbc-swatch:hover{border-color:var(--ink-35)}
.bbc-swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* --- add-to-cart block --- */
.bbc-add-form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem}
.bbc-add-form .mrow{margin-top:0}
.bbc-qty-value{min-width:24px;text-align:center;font-family:var(--mono);font-size:.8rem;display:inline-block}
.bbc-step{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1;background:none;border:0;cursor:pointer}
.bbc-step:hover{background:var(--shell)}

/* --- product page buy column --- */
.pp-buy{display:flex;flex-direction:column}
.pp-buy .pp-title{margin-top:.3rem}

/* --- drawer busy state --- */
.bbc-cart-loading .dbody,.bbc-cart-loading .dfoot{opacity:.45;pointer-events:none;transition:opacity .15s}
.bbc-cart-loading .dhead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--lacquer),transparent);animation:load 1s linear infinite}
.dhead{position:relative}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.bbc-cart-loading .dhead::after{animation:none}}