/* ==========================================================================
   Matte Blaq — design system v2
   Every class is prefixed mb- so it can be enqueued alongside the existing
   WooCommerce theme without collisions. Wrap page content in <div class="mb">.
   ========================================================================== */

:root{
  /* Core palette — pulled from the product itself: matte tins, stone panels */
  --mb-blaq:#1d1d1f;        /* matte tin/bottle finish */
  --mb-blaq-2:#2a2a2d;      /* raised surface on dark */
  --mb-paper:#f3f2ef;       /* page */
  --mb-ash:#e3e0da;         /* product stage + panels (existing brand panel) */
  --mb-stone:#cbc5bc;       /* rules on light */
  --mb-taupe:#9b8c7e;       /* existing brand button tone, now secondary */
  --mb-ink-2:#5c5954;       /* body copy on light */
  --mb-ink-3:#8a867f;       /* meta */
  --mb-line:rgba(29,29,31,.14);
  --mb-line-dark:rgba(255,255,255,.14);

  /* Scent bands — the only chromatic colour in the system */
  --mb-unscented:#9a9a9a;
  --mb-minted:#4f8a5c;
  --mb-bluewave:#2f5e9e;
  --mb-citrus:#d7782c;
  --mb-firewater:#b8352b;
  --mb-seven:#6e4a96;     /* Seven: purple */

  --mb-ok:#3f7a4c;
  --mb-err:#b8352b;

  --mb-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mb-w-wide:125;          /* expanded width, echoes the label type on the tins */
  --mb-w-cond:75;

  --mb-max:1240px;
  --mb-gutter:clamp(16px,4vw,40px);
  --mb-sec:clamp(64px,9vw,128px);
  --mb-r:3px;               /* buttons, inputs: label-sticker corners */
  --mb-r-lg:6px;            /* panels only */
}

/* ---------- base ---------- */
.mb,.mb *,.mb *::before,.mb *::after{box-sizing:border-box}
.mb{margin:0;font-family:var(--mb-font);font-size:17px;line-height:1.6;color:var(--mb-blaq);background:var(--mb-paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.mb) img{max-width:100%;height:auto;display:block}
:where(.mb) a{color:inherit}
:where(.mb) :is(h1,h2,h3,h4){margin:0;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wdth" var(--mb-w-wide)}
:where(.mb) p{margin:0}
:where(.mb) :is(ul,ol){margin:0;padding:0}
:where(.mb) :is(button,input,select,textarea){font:inherit;color:inherit}
.mb :focus-visible{outline:2px solid var(--mb-blaq);outline-offset:3px}
.mb .mb-dark :focus-visible,.mb-dark :focus-visible{outline-color:#fff}
.mb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mb-wrap{max-width:var(--mb-max);margin:0 auto;padding:0 var(--mb-gutter)}
.mb-sec{padding:var(--mb-sec) 0}
.mb-dark{background:var(--mb-blaq);color:#f3f2ef}
.mb-ashbg{background:var(--mb-ash)}

/* type scale (perfect fourth-ish) */
.mb-d1{font-size:clamp(44px,7.2vw,96px)}
.mb-d2{font-size:clamp(34px,4.6vw,60px)}
.mb-d3{font-size:clamp(24px,2.6vw,34px)}
.mb-h4{font-size:19px;letter-spacing:-.01em}
.mb-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--mb-ink-2);max-width:56ch}
.mb-dark .mb-lede{color:#c9c6c0}
.mb-small{font-size:14px;color:var(--mb-ink-3)}
.mb-dark .mb-small{color:#a5a29c}
.mb-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.mb-head p{max-width:46ch;color:var(--mb-ink-2)}
.mb-dark .mb-head p{color:#c9c6c0}

/* ---------- buttons ---------- */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--mb-r);border:1.5px solid var(--mb-blaq);background:var(--mb-blaq);color:#fff;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.mb-btn:hover{background:#000}
.mb-btn--ghost{background:transparent;color:var(--mb-blaq)}
.mb-btn--ghost:hover{background:var(--mb-blaq);color:#fff}
.mb-btn--light{background:#f3f2ef;border-color:#f3f2ef;color:var(--mb-blaq)}
.mb-btn--light:hover{background:#fff;border-color:#fff}
.mb-btn--line-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.mb-btn--line-light:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.mb-btn--block{width:100%}
.mb-btn[disabled]{opacity:.5;cursor:not-allowed}
.mb-link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.mb-link:hover{text-decoration-thickness:2.5px}

/* ---------- announcement + header ---------- */
.mb-announce{background:var(--mb-blaq);color:#e9e7e2;font-size:14px;text-align:center;padding:9px var(--mb-gutter)}
.mb-announce strong{color:#fff;font-weight:600}
.mb-announce a{color:#fff}
.mb-header{position:sticky;top:0;z-index:50;background:rgba(243,242,239,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--mb-line)}
.mb-header__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:72px}
.mb-logo{font-size:26px;font-weight:500;letter-spacing:-.03em;text-decoration:none;font-variation-settings:"wdth" 100;line-height:1}
.mb-logo sup{font-size:9px;font-weight:500;margin-left:1px}
.mb-nav{display:flex;justify-content:center;gap:clamp(16px,2.4vw,34px)}
.mb-nav a{font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.mb-nav a:hover,.mb-nav a[aria-current="page"]{border-color:currentColor}
.mb-icons{display:flex;gap:6px;align-items:center}
.mb-icon{width:42px;height:42px;display:inline-grid;place-items:center;border-radius:50%;text-decoration:none;position:relative;background:none;border:0;cursor:pointer}
.mb-icon:hover{background:var(--mb-ash)}
.mb-icon svg{width:22px;height:22px}
.mb-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--mb-blaq);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.mb-burger{display:none}
@media (max-width:980px){
  .mb-header__in{grid-template-columns:auto 1fr auto;height:64px}
  .mb-burger{display:inline-grid}
  .mb-logo{font-size:23px}
  .mb-icons{grid-column:3;justify-self:end}
  .mb-nav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:var(--mb-paper);flex-direction:column;justify-content:flex-start;gap:0;padding:84px 24px 24px;clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .25s ease,visibility 0s .25s;box-shadow:-20px 0 60px rgba(0,0,0,.15);z-index:60}
  .mb-nav a{font-size:22px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--mb-line);font-variation-settings:"wdth" 110}
  .mb-nav.is-open{clip-path:inset(0 0 0 -60px);visibility:visible;transition:clip-path .25s ease,visibility 0s}
}
.mb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:55}
.mb-scrim.is-open{opacity:1;pointer-events:auto}
.mb-close{position:absolute;top:16px;right:16px}

/* ---------- scent band (signature element) ---------- */
.mb-band{display:grid;grid-template-columns:repeat(6,1fr);height:10px}
.mb-band span{display:block}
.mb-s-unscented{background:var(--mb-unscented)}
.mb-s-minted{background:var(--mb-minted)}
.mb-s-bluewave{background:var(--mb-bluewave)}
.mb-s-citrus{background:var(--mb-citrus)}
.mb-s-firewater{background:var(--mb-firewater)}
.mb-s-seven{background:var(--mb-seven)}
.mb-swatches{display:flex;gap:3px}
.mb-swatches i{display:block;width:14px;height:5px}

/* ---------- product card ---------- */
.mb-grid{display:grid;gap:clamp(14px,2vw,24px)}
.mb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.mb-grid--4,.mb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mb-grid--3{grid-template-columns:1fr}.mb-card__foot{flex-wrap:wrap}.mb-card .mb-btn{width:100%;padding:0 12px}.mb-card__row{flex-wrap:wrap;gap:2px 8px}.mb-card__name{font-size:16px}}
.mb-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.mb-card__stage{position:relative;aspect-ratio:1;background:var(--mb-ash);overflow:hidden}
.mb-card__stage img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .5s ease}
.mb-card:hover .mb-card__stage img{transform:scale(1.035)}
.mb-tag{position:absolute;top:12px;left:12px;background:var(--mb-blaq);color:#fff;font-size:12px;font-weight:600;padding:5px 9px;border-radius:2px}
.mb-card__body{padding:16px 2px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.mb-card__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mb-card__name{font-size:18px;font-weight:700;letter-spacing:-.01em;font-variation-settings:"wdth" 110}
.mb-price{font-weight:600;font-variant-numeric:tabular-nums}
.mb-card__desc{font-size:15px;color:var(--mb-ink-2);line-height:1.45}
.mb-card__foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mb-card .mb-btn{min-height:44px;padding:0 18px;font-size:15px}
.mb-stars{color:var(--mb-blaq);font-size:14px;letter-spacing:1px}
.mb-stars small{letter-spacing:0;color:var(--mb-ink-3);margin-left:4px}

/* ---------- forms ---------- */
.mb-field{display:flex;flex-direction:column;gap:6px}
.mb-field label,.mb-legend{font-size:14px;font-weight:600}
.mb-field .mb-hint{font-size:13px;color:var(--mb-ink-3)}
.mb-input{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--mb-stone);border-radius:var(--mb-r);background:#fff;font-size:16px}
.mb-input:focus{outline:none;border-color:var(--mb-blaq);box-shadow:0 0 0 3px rgba(29,29,31,.12)}
textarea.mb-input{min-height:130px;resize:vertical}
.mb-field.is-invalid .mb-input{border-color:var(--mb-err)}
.mb-error{display:none;font-size:13px;color:var(--mb-err);font-weight:600}
.mb-field.is-invalid .mb-error{display:block}
.mb-chips{display:flex;flex-wrap:wrap;gap:8px}
.mb-chip{position:relative}
.mb-chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.mb-chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid var(--mb-stone);border-radius:var(--mb-r);font-size:15px;font-weight:500;background:#fff}
.mb-chip input:checked+span{background:var(--mb-blaq);border-color:var(--mb-blaq);color:#fff}
.mb-chip input:focus-visible+span{outline:2px solid var(--mb-blaq);outline-offset:2px}

/* ---------- accordion / faq ---------- */
.mb-acc{border-top:1px solid var(--mb-line)}
.mb-acc details{border-bottom:1px solid var(--mb-line)}
.mb-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:17px}
.mb-acc summary::-webkit-details-marker{display:none}
.mb-acc summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .2s}
.mb-acc details[open] summary::after{transform:rotate(45deg)}
.mb-acc .mb-acc__body{padding:0 0 22px;color:var(--mb-ink-2);max-width:68ch}
.mb-acc .mb-acc__body p+p{margin-top:12px}
.mb-acc .mb-acc__body ul{padding-left:18px}
.mb-acc .mb-acc__body li+li{margin-top:6px}
.mb-dark .mb-acc,.mb-dark .mb-acc details{border-color:var(--mb-line-dark)}
.mb-dark .mb-acc .mb-acc__body{color:#c9c6c0}

/* ---------- newsletter + footer ---------- */
.mb-news{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.mb-news form{display:flex;gap:10px}
.mb-news .mb-input{flex:1}
.mb-news__msg{margin-top:12px;font-size:14px;min-height:1.4em}
@media (max-width:820px){.mb-news{grid-template-columns:1fr}.mb-news form{flex-direction:column}}
.mb-footer{background:var(--mb-blaq);color:#c9c6c0;padding:72px 0 28px;font-size:15px}
.mb-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.mb-footer h4{color:#fff;font-size:15px;font-variation-settings:"wdth" 100;letter-spacing:0;margin-bottom:14px}
.mb-footer ul{list-style:none;display:grid;gap:9px}
.mb-footer a{text-decoration:none}
.mb-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.mb-footer .mb-logo{color:#fff;font-size:30px;display:inline-block;margin-bottom:14px}
.mb-social{display:flex;gap:8px;margin-top:18px}
.mb-social a{width:40px;height:40px;border:1px solid var(--mb-line-dark);border-radius:50%;display:grid;place-items:center}
.mb-social a:hover{border-color:#fff}
.mb-social svg{width:18px;height:18px;fill:currentColor}
.mb-footer__base{margin-top:56px;padding-top:20px;border-top:1px solid var(--mb-line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8f8c86}
@media (max-width:820px){.mb-footer__grid{grid-template-columns:1fr 1fr}.mb-footer__brand{grid-column:1/-1}}

/* ---------- trust row ---------- */
.mb-trust{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:28px 0}
.mb-trust li{list-style:none;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;line-height:1.3}
.mb-trust svg{flex:none;width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (max-width:980px){.mb-trust{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.mb-trust{grid-template-columns:1fr 1fr}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){.mb *,.mb *::before,.mb *::after{animation:none!important;transition:none!important}}

/* ---------- label tile: stands in for a product photo that hasn't been shot yet ---------- */
.mb-ph{width:100%;height:100%;background:var(--mb-blaq);color:#f3f2ef;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6%;text-align:center;container-type:inline-size;line-height:1}
.mb-ph small{font-size:max(9px,7.5cqi);font-weight:500;letter-spacing:-.02em;opacity:.75}
.mb-ph b{font-size:max(11px,12.5cqi);font-weight:700;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.01em}
.mb-ph i{display:block;width:34%;height:max(2px,1.4cqi);background:var(--mb-taupe)}
.mb-dark .mb-ph{background:var(--mb-blaq-2);outline:1px solid var(--mb-line-dark);outline-offset:-1px}