/* ==========================================================================
   Mira Washroom Products & Specialties — design system
   Brand navy #082233 / teal #0AA79F sampled from the supplied logo.
   ========================================================================== */

:root{
  --navy:#082233;
  --navy-800:#0B2E45;
  --navy-700:#10405E;
  --teal:#0AA79F;
  --teal-600:#08918A;
  --teal-700:#06756F;
  --teal-050:#E8F7F6;

  --ink:#0D1B26;
  --body:#3E4E5A;
  --muted:#697C89;
  --line:#E3EAEE;
  --line-strong:#CBD7DE;
  --bg:#FFFFFF;
  --soft:#F5F8F9;
  --soft-2:#EDF3F5;

  --amber:#B8730B;
  --ok:#1B7F4C;
  --danger:#B4342A;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(8,34,51,.06), 0 1px 3px rgba(8,34,51,.05);
  --shadow:0 4px 14px rgba(8,34,51,.08);
  --shadow-lg:0 18px 48px rgba(8,34,51,.14);

  --wrap:1280px;
  --gutter:clamp(16px, 4vw, 40px);

  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:"Archivo", var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
/* must beat the display rules on .btn, .qb__side etc. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-700); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; color:inherit}
h1,h2,h3,h4,h5{
  font-family:var(--display); color:var(--ink);
  margin:0 0 .5em; line-height:1.15; letter-spacing:-.015em; font-weight:700;
}
h1{font-size:clamp(2rem,4.2vw,3.25rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px; margin-inline:auto; padding-inline:var(--gutter)}
.stack>*+*{margin-top:1rem}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px}
.skip-link:focus{left:8px;top:8px}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--teal); outline-offset:2px; border-radius:4px;
}

/* ------------------------------------------------------------------ eyebrow */
.eyebrow{
  font-family:var(--display); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-700);
  margin:0 0 .75rem;
}
.eyebrow--light{color:var(--teal)}

/* ------------------------------------------------------------------ buttons */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.72em 1.35em; border-radius:var(--radius); cursor:pointer;
  text-decoration:none; transition:background .15s, border-color .15s, color .15s, transform .1s;
  white-space:nowrap;
}
.btn:hover{background:var(--navy-700); border-color:var(--navy-700); color:#fff; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--teal{--btn-bg:var(--teal); --btn-bd:var(--teal)}
.btn--teal:hover{background:var(--teal-600); border-color:var(--teal-600)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:var(--line-strong)}
.btn--ghost:hover{background:var(--soft); border-color:var(--navy); color:var(--navy)}
.btn--onDark{--btn-bg:#fff; --btn-fg:var(--navy); --btn-bd:#fff}
.btn--onDark:hover{background:var(--teal-050); border-color:var(--teal-050); color:var(--navy)}
.btn--outlineLight{--btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.5)}
.btn--outlineLight:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.btn--sm{font-size:.85rem; padding:.55em 1em}
.btn--lg{font-size:1.02rem; padding:.85em 1.6em}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ------------------------------------------------------------------- header */
.topbar{
  background:var(--navy); color:#C9DBE5;
  font-size:.8rem; letter-spacing:.01em;
}
.topbar__inner{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; min-height:38px; padding-block:.4rem}
.topbar a{color:#fff; text-decoration:none}
.topbar a:hover{color:var(--teal); text-decoration:none}
.topbar__ship{display:flex; align-items:center; gap:.5em; color:#fff; font-weight:500}
.topbar__ship svg{flex:none; color:var(--teal)}
.topbar__links{display:flex; gap:1.25rem; align-items:center}
@media (max-width:700px){ .topbar__links{display:none} }

.masthead{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
}
.masthead.is-stuck{box-shadow:var(--shadow)}
.masthead__inner{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(12px,3vw,32px); padding-block:14px;
}
.brand{display:flex; align-items:center; gap:.7rem; flex:none}
.brand img{width:auto; height:30px}
.brand:hover{text-decoration:none}

.searchbar{position:relative; display:flex; width:100%; max-width:620px}
.searchbar input{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  padding:.68em 2.6em .68em 2.6em;
  border:1.5px solid var(--line-strong); border-radius:var(--radius);
  background:var(--soft); transition:border-color .15s, background .15s;
}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input:focus{background:#fff; border-color:var(--teal); outline:none}
.searchbar__icon{position:absolute; left:.85em; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.searchbar__go{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:.4em; border-radius:6px; display:grid; place-items:center;
}
.searchbar__go:hover{color:var(--teal-700); background:var(--soft-2)}

.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; display:none;
}
.suggest.is-open{display:block}
.suggest__item{
  display:flex; gap:.8rem; align-items:center; width:100%; text-align:left;
  padding:.6rem .85rem; border:0; background:transparent; cursor:pointer; border-bottom:1px solid var(--line);
}
.suggest__item:last-child{border-bottom:0}
.suggest__item:hover,.suggest__item.is-active{background:var(--teal-050)}
.suggest__item img{width:40px; height:40px; object-fit:contain; flex:none; background:var(--soft); border-radius:6px}
.suggest__name{font-size:.9rem; color:var(--ink); font-weight:500; line-height:1.3}
.suggest__meta{font-size:.75rem; color:var(--muted)}
.suggest__head{padding:.5rem .85rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:var(--soft); font-weight:700; font-family:var(--display)}

.masthead__tools{display:flex; align-items:center; gap:.35rem; flex:none}
.tool{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.45rem .6rem; border-radius:var(--radius); border:0; background:transparent;
  color:var(--navy); cursor:pointer; text-decoration:none; position:relative; min-width:60px;
}
.tool:hover{background:var(--soft); text-decoration:none; color:var(--navy)}
.tool__label{font-size:.7rem; font-weight:600; font-family:var(--display); letter-spacing:.02em}
.tool__badge{
  position:absolute; top:2px; right:8px; min-width:18px; height:18px; padding:0 5px;
  background:var(--teal); color:#fff; border-radius:999px;
  font-size:.68rem; font-weight:700; display:grid; place-items:center; line-height:1;
}
.tool__badge:empty,.tool__badge[hidden]{display:none}
.burger{display:none}

/* --------------------------------------------------------------- main nav */
.mainnav{background:#fff; border-bottom:1px solid var(--line)}
.mainnav__list{display:flex; gap:.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.mainnav__link{
  display:flex; align-items:center; gap:.4em;
  font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--navy);
  padding:.85rem .9rem; border-bottom:3px solid transparent; text-decoration:none; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer;
}
.mainnav__link:hover,.mainnav__link[aria-expanded="true"]{color:var(--teal-700); border-bottom-color:var(--teal); text-decoration:none}
.mainnav__link.is-current{color:var(--teal-700); border-bottom-color:var(--teal)}
.mainnav__link svg{transition:transform .15s}
.mainnav__link[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{
  position:absolute; left:0; right:0; z-index:55; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  display:none; padding-block:2rem;
}
.mega.is-open{display:block}
.mega__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.5rem 2rem}
.mega__col h4{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.mega__col ul{list-style:none; margin:0; padding:0}
.mega__col li+li{margin-top:.35rem}
.mega__col a{color:var(--ink); font-size:.92rem; display:block; padding:.15rem 0}
.mega__col a:hover{color:var(--teal-700)}
.mega__promo{
  background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:1.5rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
}
.mega__promo h4{color:#fff; font-size:1.1rem; letter-spacing:0; text-transform:none; margin-bottom:.35rem}
.mega__promo p{color:#B9CFDC; font-size:.88rem; margin:0}

/* --------------------------------------------------------- mobile drawer */
.drawer{
  position:fixed; inset:0 30% 0 0; min-width:300px; max-width:400px; z-index:100;
  background:#fff; transform:translateX(-102%); transition:transform .25s ease;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gutter); border-bottom:1px solid var(--line)}
.drawer__body{overflow-y:auto; padding:.5rem 0 2rem}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:.9rem var(--gutter); background:none; border:0; cursor:pointer;
  font-family:var(--display); font-weight:600; color:var(--navy); font-size:.95rem;
}
.drawer__panel{display:none; padding:0 var(--gutter) .9rem}
.drawer__panel.is-open{display:block}
.drawer__panel a{display:block; padding:.45rem 0; color:var(--body); font-size:.92rem}
.scrim{position:fixed; inset:0; background:rgba(8,34,51,.45); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.is-open{opacity:1; pointer-events:auto}
body.no-scroll{overflow:hidden}

@media (max-width:1080px){
  .mainnav{display:none}
  .burger{display:grid; place-items:center; width:44px; height:44px; border:1.5px solid var(--line-strong); background:#fff; border-radius:var(--radius); cursor:pointer; color:var(--navy)}
  .masthead__inner{grid-template-columns:auto auto 1fr auto; gap:10px}
  .brand img{height:25px}
}
@media (max-width:820px){
  .masthead__inner{grid-template-columns:auto 1fr auto; row-gap:10px}
  .searchbar{grid-column:1/-1; grid-row:2; max-width:none}
  .tool__label{display:none}
  .tool{min-width:44px}
}

/* --------------------------------------------------------------- sections */
.section{padding-block:clamp(3rem,6vw,5.5rem)}
.section--soft{background:var(--soft)}
.section--navy{background:var(--navy); color:#C3D6E1}
.section--navy h2,.section--navy h3{color:#fff}
.section__head{max-width:680px; margin-bottom:2.5rem}
.section__head--center{margin-inline:auto; text-align:center}
.section__head p{font-size:1.05rem; color:var(--muted); margin:0}
.section--navy .section__head p{color:#A9C3D2}
.section__headRow{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem}
.section__headRow .section__head{margin-bottom:0}

/* ------------------------------------------------------------------- hero */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 82% 20%, rgba(10,167,159,.28), transparent 62%),
    radial-gradient(50% 70% at 8% 92%, rgba(16,64,94,.7), transparent 60%);
}
.hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(3rem,7vw,6rem)}
.hero h1{color:#fff; margin-bottom:1rem; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--teal)}
.hero__lede{font-size:clamp(1.02rem,1.5vw,1.18rem); color:#BDD3E0; max-width:52ch; margin-bottom:1.8rem}
.hero__cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem}
.hero__stats{display:flex; gap:clamp(1.25rem,4vw,2.75rem); flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.16); padding-top:1.5rem}
.hero__stat b{display:block; font-family:var(--display); font-size:1.6rem; color:#fff; line-height:1.1}
.hero__stat span{font-size:.82rem; color:#9FBACB}

.hero__panel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg); padding:clamp(1.25rem,2.5vw,1.9rem); backdrop-filter:blur(6px);
}
.hero__panel h3{color:#fff; font-size:1.15rem; margin-bottom:.35rem}
.hero__panel>p{color:#A9C3D2; font-size:.9rem; margin-bottom:1.1rem}
@media (max-width:940px){ .hero__inner{grid-template-columns:1fr} }

/* ------------------------------------------------------------- trust strip */
.trust{background:var(--soft); border-bottom:1px solid var(--line)}
.trust__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line)}
.trust__item{background:var(--soft); display:flex; gap:.85rem; align-items:flex-start; padding:1.35rem clamp(.5rem,2vw,1.5rem)}
.trust__item svg{flex:none; color:var(--teal-700); margin-top:2px}
.trust__item b{display:block; font-family:var(--display); color:var(--ink); font-size:.95rem; line-height:1.3}
.trust__item span{font-size:.83rem; color:var(--muted)}

/* --------------------------------------------------------------- category */
.catGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem}
.catCard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.catCard:hover{border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none}
.catCard__img{aspect-ratio:4/3; background:var(--soft); display:grid; place-items:center; padding:1rem; overflow:hidden}
.catCard__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .3s}
.catCard:hover .catCard__img img{transform:scale(1.05)}
.catCard__body{padding:1rem 1.15rem 1.2rem; border-top:1px solid var(--line)}
.catCard__body h3{font-size:1.02rem; margin-bottom:.25rem; color:var(--ink)}
.catCard__body p{font-size:.84rem; color:var(--muted); margin:0 0 .5rem; line-height:1.45}
.catCard__count{font-size:.76rem; font-weight:700; font-family:var(--display); color:var(--teal-700); letter-spacing:.04em; text-transform:uppercase}

/* -------------------------------------------------------------- venue tiles */
.venueGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem}
.venueTile{
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
  padding:1.4rem 1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:600; font-size:.92rem;
  transition:border-color .18s, background .18s, transform .18s;
}
.venueTile:hover{border-color:var(--teal); background:var(--teal-050); transform:translateY(-2px); text-decoration:none; color:var(--navy)}
.venueTile svg{color:var(--teal-700)}

/* ------------------------------------------------------------ product card */
.prodGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1.15rem}
.prodGrid--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pcard{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pcard:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-3px)}
.pcard__media{position:relative; aspect-ratio:1; background:#fff; padding:.9rem; display:grid; place-items:center}
.pcard__media img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pcard__ph{
  width:100%; height:100%; display:grid; place-items:center; gap:.4rem;
  background:var(--soft); border-radius:8px; color:var(--muted);
  font-family:var(--display); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; text-align:center;
}
.pcard__body{padding:0 1rem 1rem; display:flex; flex-direction:column; flex:1}
.pcard__brand{font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-700); margin-bottom:.3rem}
.pcard__name{font-size:.92rem; line-height:1.4; margin:0 0 .35rem; font-family:var(--sans); font-weight:500; color:var(--ink)}
.pcard__name a{color:inherit}
.pcard__name a:hover{color:var(--teal-700); text-decoration:none}
.pcard__name a::after{content:""; position:absolute; inset:0}
.pcard__meta{font-size:.76rem; color:var(--muted); margin-bottom:.75rem}
.pcard__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.pcard__price{font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--ink)}
.pcard__price small{font-weight:500; font-size:.72rem; color:var(--muted); display:block; letter-spacing:.02em}
.pcard__quote{font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--teal-700)}
.pcard__add{
  position:relative; z-index:2; flex:none; width:38px; height:38px; border-radius:8px;
  border:1.5px solid var(--navy); background:var(--navy); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .15s, transform .1s;
}
.pcard__add:hover{background:var(--teal); border-color:var(--teal)}
.pcard__add:active{transform:scale(.94)}
.pcard__add.is-added{background:var(--ok); border-color:var(--ok)}

.badgeRow{position:absolute; top:.65rem; left:.65rem; display:flex; flex-direction:column; gap:.3rem; z-index:2}
.badge{
  font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.28em .6em; border-radius:5px; line-height:1.2;
}
.badge--teal{background:var(--teal-050); color:var(--teal-700)}
.badge--navy{background:var(--navy); color:#fff}
.badge--amber{background:#FBF0DC; color:var(--amber)}
.badge--line{background:#fff; border:1px solid var(--line-strong); color:var(--muted)}
.badge--sale{background:var(--danger); color:#fff}

.pcard__was{color:var(--muted); font-weight:500; font-size:.85em}

/* -------------------------------------------------------------- shop layout */
.shopLayout{display:grid; grid-template-columns:264px minmax(0,1fr); gap:clamp(1.5rem,3vw,2.75rem); align-items:start}
@media (max-width:1000px){ .shopLayout{grid-template-columns:1fr} }

.facets{position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; padding-right:4px}
.facets__group{border-bottom:1px solid var(--line); padding-block:1rem}
.facets__group:first-child{padding-top:0}
.facets__title{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.7rem;
}
.facets__title svg{transition:transform .15s; color:var(--muted)}
.facets__title[aria-expanded="false"] svg{transform:rotate(-90deg)}
.facets__list{display:flex; flex-direction:column; gap:.1rem; max-height:290px; overflow-y:auto}
.facets__list[hidden]{display:none}
.fopt{display:flex; align-items:center; gap:.6rem; padding:.32rem 0; cursor:pointer; font-size:.88rem; color:var(--body)}
.fopt:hover{color:var(--ink)}
.fopt input{
  appearance:none; width:17px; height:17px; flex:none; border:1.5px solid var(--line-strong);
  border-radius:4px; background:#fff; cursor:pointer; position:relative; transition:background .12s, border-color .12s;
}
.fopt input:checked{background:var(--teal); border-color:var(--teal)}
.fopt input:checked::after{
  content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.fopt__n{margin-left:auto; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums}
.facets__reset{background:none; border:0; color:var(--teal-700); font-size:.82rem; cursor:pointer; padding:0; font-weight:600}
.facets__reset:hover{text-decoration:underline}

.shopBar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem;
}
.shopBar__count{font-size:.9rem; color:var(--muted)}
.shopBar__count b{color:var(--ink); font-family:var(--display)}
.shopBar__right{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.select{
  font:inherit; font-size:.88rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-strong); border-radius:var(--radius);
  padding:.5em 2.2em .5em .8em; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697C89' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7em center;
}
.select:focus{border-color:var(--teal); outline:none}
.filterToggle{display:none}
@media (max-width:1000px){
  .facets{display:none; position:static; max-height:none}
  .facets.is-open{display:block; margin-bottom:1.5rem; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.25rem}
  .filterToggle{display:inline-flex}
}

.chips{display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1.25rem}
.chip{
  display:inline-flex; align-items:center; gap:.45em; font-size:.8rem;
  background:var(--teal-050); color:var(--teal-700); border:1px solid rgba(10,167,159,.28);
  padding:.32em .55em .32em .7em; border-radius:999px; font-weight:600;
}
.chip button{border:0; background:none; cursor:pointer; color:inherit; display:grid; place-items:center; padding:2px; border-radius:50%}
.chip button:hover{background:rgba(10,167,159,.2)}

.empty{text-align:center; padding:4rem 1rem; border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--soft)}
.empty h3{margin-bottom:.4rem}

.pager{display:flex; justify-content:center; gap:.4rem; margin-top:2.5rem; flex-wrap:wrap}
.pager button{
  min-width:40px; height:40px; padding:0 .7em; border:1.5px solid var(--line-strong);
  background:#fff; border-radius:var(--radius); cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--navy);
}
.pager button:hover:not([disabled]){border-color:var(--teal); color:var(--teal-700)}
.pager button.is-current{background:var(--navy); border-color:var(--navy); color:#fff}
.pager button[disabled]{opacity:.4; cursor:not-allowed}

/* ----------------------------------------------------------- product page */
.crumbs{font-size:.82rem; color:var(--muted); padding-block:1rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--teal-700)}
.crumbs span{margin-inline:.4em; opacity:.6}

.pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
@media (max-width:900px){ .pdp{grid-template-columns:1fr} }
.pdp__gallery{position:sticky; top:96px}
@media (max-width:900px){ .pdp__gallery{position:static} }
.pdp__main{
  aspect-ratio:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  display:grid; place-items:center; padding:2rem; overflow:hidden;
}
.pdp__main img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pdp__thumbs{display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap}
.pdp__thumb{
  width:74px; height:74px; padding:.4rem; background:#fff; border:1.5px solid var(--line);
  border-radius:8px; cursor:pointer; display:grid; place-items:center;
}
.pdp__thumb img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pdp__thumb.is-active{border-color:var(--teal)}

.pdp__brand{font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-700)}
.pdp h1{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:.4rem 0 .6rem}
.pdp__code{font-size:.88rem; color:var(--muted); margin-bottom:1.25rem}
.pdp__code b{color:var(--ink); font-family:var(--display)}
.pdp__price{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.35rem}
.pdp__price strong{font-family:var(--display); font-size:2rem; color:var(--ink); line-height:1}
.pdp__priceNote{font-size:.82rem; color:var(--muted); margin-bottom:1.5rem}
.pdp__buy{display:flex; gap:.75rem; align-items:stretch; margin-bottom:1rem; flex-wrap:wrap}
.qty{display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:#fff}
.qty button{width:42px; height:100%; min-height:46px; border:0; background:#fff; cursor:pointer; color:var(--navy); font-size:1.1rem; display:grid; place-items:center}
.qty button:hover{background:var(--soft)}
.qty input{
  width:56px; border:0; text-align:center; font:inherit; font-weight:600;
  font-family:var(--display); color:var(--ink); -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.qty input:focus{outline:none}

.specTable{width:100%; border-collapse:collapse; font-size:.9rem}
.specTable th,.specTable td{text-align:left; padding:.65rem .25rem; border-bottom:1px solid var(--line); vertical-align:top}
.specTable th{color:var(--muted); font-weight:500; width:42%; font-family:var(--sans)}
.specTable td{color:var(--ink)}

.accordion{border-top:1px solid var(--line)}
.accordion__item{border-bottom:1px solid var(--line)}
.accordion__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--display); font-weight:600; color:var(--ink); font-size:.98rem;
}
.accordion__btn svg{flex:none; color:var(--muted); transition:transform .18s}
.accordion__btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.accordion__panel{padding-bottom:1.25rem}
.accordion__panel[hidden]{display:none}

/* ------------------------------------------------------------------- cart */
.cartLayout{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(1.5rem,3vw,2.5rem); align-items:start}
@media (max-width:900px){ .cartLayout{grid-template-columns:1fr} }
.cartRow{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--line); align-items:start}
.cartRow__img{width:96px; height:96px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.5rem; display:grid; place-items:center}
.cartRow__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.cartRow__name{font-weight:500; color:var(--ink); margin:0 0 .2rem; font-size:.98rem}
.cartRow__meta{font-size:.8rem; color:var(--muted); margin-bottom:.6rem}
.cartRow__ctl{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
.cartRow__right{text-align:right; min-width:96px}
.cartRow__line{font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.05rem}
.linkBtn{background:none; border:0; padding:0; color:var(--muted); font-size:.82rem; cursor:pointer; text-decoration:underline}
.linkBtn:hover{color:var(--danger)}

.summary{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.5rem; position:sticky; top:96px}
.summary h3{font-size:1.1rem; margin-bottom:1rem}
.summary__row{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; font-size:.92rem}
.summary__row--total{border-top:1px solid var(--line-strong); margin-top:.6rem; padding-top:.9rem; font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink)}
.progressWrap{margin:1rem 0 1.25rem}
.progress{height:7px; background:var(--line); border-radius:999px; overflow:hidden}
.progress__bar{height:100%; background:var(--teal); border-radius:999px; transition:width .3s}

/* ------------------------------------------------------------- spec finder */
.finder{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden}
.finder__steps{display:flex; border-bottom:1px solid var(--line); background:var(--soft); overflow-x:auto}
.finder__step{
  flex:1; min-width:130px; padding:.9rem 1rem; text-align:center; font-family:var(--display);
  font-size:.82rem; font-weight:600; color:var(--muted); border-bottom:3px solid transparent; white-space:nowrap;
}
.finder__step.is-active{color:var(--teal-700); border-bottom-color:var(--teal); background:#fff}
.finder__step.is-done{color:var(--ink)}
.finder__step b{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--line); color:var(--muted); font-size:.72rem; margin-right:.45em}
.finder__step.is-active b{background:var(--teal); color:#fff}
.finder__step.is-done b{background:var(--ok); color:#fff}
.finder__body{padding:clamp(1.25rem,3vw,2.25rem)}
.finder__foot{display:flex; justify-content:space-between; gap:1rem; padding:1.15rem clamp(1.25rem,3vw,2.25rem); border-top:1px solid var(--line); background:var(--soft)}

.optGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem}
.optCard{
  display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center;
  padding:1.25rem .85rem; border:1.5px solid var(--line); border-radius:var(--radius);
  background:#fff; cursor:pointer; transition:border-color .15s, background .15s, transform .12s;
  font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink);
}
.optCard:hover{border-color:var(--teal); transform:translateY(-2px)}
.optCard.is-sel{border-color:var(--teal); background:var(--teal-050); box-shadow:inset 0 0 0 1px var(--teal)}
.optCard svg{color:var(--teal-700)}
.optCard small{font-family:var(--sans); font-weight:400; font-size:.76rem; color:var(--muted); line-height:1.35}

.field{margin-bottom:1.15rem}
.field label{display:block; font-family:var(--display); font-weight:600; font-size:.88rem; color:var(--ink); margin-bottom:.35rem}
.field .hint{font-size:.8rem; color:var(--muted); margin:-.15rem 0 .45rem}
.input,.textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-strong); border-radius:var(--radius); padding:.65em .85em;
}
.input:focus,.textarea:focus{border-color:var(--teal); outline:none}
.textarea{min-height:110px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:600px){ .row2{grid-template-columns:1fr} }

.specSheet{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.specSheet__head{background:var(--navy); color:#fff; padding:1.25rem 1.5rem}
.specSheet__head h3{color:#fff; margin:0 0 .2rem}
.specSheet__head p{margin:0; color:#A9C3D2; font-size:.88rem}
.specSheet__group{border-bottom:1px solid var(--line)}
.specSheet__groupHead{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.5rem; background:var(--soft); font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.specSheet__row{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto; gap:1rem; align-items:center; padding:.85rem 1.5rem; border-top:1px solid var(--line)}
.specSheet__row img{width:64px; height:64px; object-fit:contain; mix-blend-mode:multiply}
@media (max-width:680px){ .specSheet__row{grid-template-columns:48px minmax(0,1fr) auto; row-gap:.5rem} .specSheet__row img{width:48px;height:48px} }

/* ------------------------------------------------------------------ notes */
.note{
  display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.15rem;
  border-radius:var(--radius); border:1px solid; font-size:.88rem; line-height:1.55;
}
.note svg{flex:none; margin-top:2px}
.note--info{background:var(--teal-050); border-color:rgba(10,167,159,.3); color:#0A5F5A}
.note--warn{background:#FDF6E7; border-color:#EBD5A6; color:#7A4E06}
.note strong{display:block; margin-bottom:.15rem}

/* ----------------------------------------------------------------- footer */
.footer{background:var(--navy); color:#9FBACB; padding-block:clamp(2.5rem,5vw,4rem) 0; margin-top:auto}
.footer__grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem clamp(1.5rem,3vw,3rem)}
@media (max-width:860px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer__grid{grid-template-columns:1fr} }
.footer h4{color:#fff; font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1rem}
.footer ul{list-style:none; margin:0; padding:0}
.footer li+li{margin-top:.5rem}
.footer a{color:#9FBACB; font-size:.9rem}
.footer a:hover{color:var(--teal); text-decoration:none}
.footer__brand img{height:30px; width:auto; margin-bottom:1.1rem}
.footer__contact{font-size:.9rem; line-height:1.8; font-style:normal}
.footer__contact a{color:#fff}
.footer__contact b{color:#fff; font-family:var(--display)}
.footer__bar{border-top:1px solid rgba(255,255,255,.13); margin-top:2.5rem; padding-block:1.35rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem}
.footer__bar a{font-size:.8rem}

/* =============================================== checkout routing + pay */
/* Which way an order goes: card under the limit, quote + invoice above it. */
.routeBox{border-radius:var(--radius); padding:.9rem 1rem; margin:1.25rem 0 1rem; border:1px solid}
.routeBox__head{display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem}
.routeBox__head b{font-family:var(--display); font-size:.95rem}
.routeBox p{margin:0; font-size:.83rem; line-height:1.5}
.routeBox--card{background:var(--teal-050); border-color:rgba(10,167,159,.3); color:#0A5F5A}
.routeBox--card .routeBox__head b{color:#084F4A}
.routeBox--quote{background:#FDF6E7; border-color:#EBD5A6; color:#7A4E06}
.routeBox--quote .routeBox__head b{color:#5E3C05}

.coSection{margin-bottom:2rem}
.coSection__title{
  font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  padding-bottom:.6rem; border-bottom:1px solid var(--line); margin-bottom:1.1rem;
}
.payBox{border:1.5px solid var(--line-strong); border-radius:var(--radius); padding:1.1rem; background:var(--soft)}
.payBox__head{display:flex; gap:.7rem; align-items:flex-start}
.payBox__head svg{flex:none; color:var(--ok); margin-top:2px}
.payBox__head b{display:block; font-family:var(--display); font-size:.92rem; color:var(--ink); margin-bottom:.2rem}
.payBox__head span{font-size:.83rem; color:var(--muted); line-height:1.5}
.payBox__brands{display:flex; gap:.4rem; margin-top:.9rem; flex-wrap:wrap}
.payBox__brands span{
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  color:var(--muted); background:#fff; border:1px solid var(--line-strong);
  padding:.3em .55em; border-radius:4px;
}
.coItems{max-height:280px; overflow-y:auto; margin-bottom:1rem; border-bottom:1px solid var(--line)}
.coItem{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:.65rem; align-items:center;
  padding:.5rem 0; border-top:1px solid var(--line); font-size:.83rem}
.coItem:first-child{border-top:0}
.coItem img{width:44px; height:44px; object-fit:contain; mix-blend-mode:multiply}
.coItem b{display:block; font-weight:500; color:var(--ink); font-size:.82rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.coItem span{font-size:.72rem; color:var(--muted)}

/* ==================================================== quote builder (qb) */
.qb{display:flex; flex-direction:column; min-height:60vh; padding-bottom:84px}
.qb__progress{height:4px; background:var(--line)}
.qb__progress span{display:block; height:100%; width:0; background:var(--teal); transition:width .35s cubic-bezier(.2,.8,.2,1)}
.qb__head{border-bottom:1px solid var(--line); background:#fff}
.qb__headInner{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:1.4rem}
.qb__headInner h1{font-size:clamp(1.4rem,2.6vw,2rem); margin:0}
.qb__headActions{display:flex; gap:.5rem; flex-wrap:wrap}

.qb__body{display:grid; grid-template-columns:320px minmax(0,1fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start; padding-block:clamp(1.5rem,3vw,2.25rem)}
.qb__body--full{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){ .qb__body{grid-template-columns:minmax(0,1fr)} }
.qb__side{position:sticky; top:96px}
@media (max-width:980px){ .qb__side{position:static} }

/* running package panel */
.qbPack{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.qbPack__head{padding:.9rem 1.1rem; border-bottom:1px solid var(--line); background:#fff}
.qbPack__name{font-family:var(--display); font-weight:700; color:var(--ink); font-size:1rem; margin:0 0 .15rem}
.qbPack__meta{font-size:.78rem; color:var(--muted)}
.qbPack__list{max-height:44vh; overflow-y:auto}
.qbPack__row{display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:.6rem; align-items:center; padding:.55rem 1.1rem; border-bottom:1px solid var(--line)}
.qbPack__row img{width:38px; height:38px; object-fit:contain; mix-blend-mode:multiply}
.qbPack__row b{display:block; font-family:var(--sans); font-weight:500; font-size:.8rem; color:var(--ink); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.qbPack__row span{font-size:.72rem; color:var(--muted)}
.qbPack__qty{font-family:var(--display); font-weight:700; color:var(--navy); font-size:.85rem; white-space:nowrap}
.qbPack__empty{padding:1.5rem 1.1rem; text-align:center; color:var(--muted); font-size:.85rem}
.qbPack__foot{padding:.9rem 1.1rem; background:#fff; border-top:1px solid var(--line)}
.qbPack__line{display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; padding:.2rem 0}
.qbPack__total{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  border-top:1px solid var(--line-strong); margin-top:.5rem; padding-top:.6rem}
.qbPack__total b{font-family:var(--display); font-size:1.25rem; color:var(--ink)}

.qbSaved{margin-top:1rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.qbSaved__head{padding:.6rem .9rem; background:var(--soft); font-family:var(--display); font-weight:700;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.qbSaved__row{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .9rem; border-top:1px solid var(--line); font-size:.83rem}
.qbSaved__row b{font-weight:600; color:var(--ink)}

/* big choice tiles */
.qbTiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem}
.qbTile{
  display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; text-align:left;
  padding:0; transition:border-color .16s, box-shadow .16s, transform .16s;
}
.qbTile:hover{border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-3px)}
.qbTile.is-sel{border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.qbTile__img{aspect-ratio:4/3; background:#fff; display:grid; place-items:center; padding:1rem; overflow:hidden}
.qbTile__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.qbTile__body{padding:.85rem 1rem 1rem; border-top:1px solid var(--line)}
.qbTile__body b{display:block; font-family:var(--display); font-size:.95rem; color:var(--ink); line-height:1.3; margin-bottom:.2rem}
.qbTile__body span{font-size:.78rem; color:var(--muted); line-height:1.4; display:block}
.qbTile__n{display:inline-block; margin-top:.45rem; font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-700)}

/* mode cards on the start screen */
.qbModes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; max-width:860px}
.qbMode{
  display:flex; flex-direction:column; gap:.7rem; text-align:left; padding:1.6rem;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg);
  cursor:pointer; transition:border-color .16s, box-shadow .16s, transform .16s;
}
.qbMode:hover{border-color:var(--teal); box-shadow:var(--shadow); transform:translateY(-3px)}
.qbMode__icon{width:44px; height:44px; border-radius:10px; background:var(--teal-050);
  color:var(--teal-700); display:grid; place-items:center; flex:none}
.qbMode b{font-family:var(--display); font-size:1.1rem; color:var(--ink)}
.qbMode p{margin:0; font-size:.88rem; color:var(--muted); line-height:1.5}
.qbMode__tag{margin-top:.2rem; font-size:.75rem; font-weight:600; color:var(--teal-700)}

/* product picker cards */
.qbProds{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:1rem}
.qbProd{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color .16s, box-shadow .16s;
}
.qbProd:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.qbProd.is-sel{border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.qbProd__img{aspect-ratio:1; background:#fff; padding:.9rem; display:grid; place-items:center}
.qbProd__img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.qbProd__body{padding:0 .9rem .9rem; display:flex; flex-direction:column; flex:1}
.qbProd__name{font-size:.88rem; font-weight:500; color:var(--ink); line-height:1.35; margin:0 0 .25rem}
.qbProd__meta{font-size:.74rem; color:var(--muted); margin-bottom:.5rem}
.qbProd__price{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:.15rem}
.qbProd__lead{font-size:.72rem; color:var(--ok); display:flex; align-items:center; gap:.3em; margin-bottom:.7rem}
.qbProd__lead svg{flex:none}
.qbProd__act{margin-top:auto; display:flex; gap:.5rem; align-items:center}
.qbProd__act .qty{flex:1; min-width:0}
.qbProd__act .qty input{width:100%}
.qbProd__tick{position:absolute; top:.6rem; right:.6rem; width:26px; height:26px; border-radius:50%;
  background:var(--teal); color:#fff; display:grid; place-items:center; z-index:2}

/* review table */
.qbReview{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff}
.qbReview__head{padding:1.1rem 1.35rem; border-bottom:1px solid var(--line); display:flex;
  gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.qbReview__row{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto auto; gap:1rem;
  align-items:center; padding:.85rem 1.35rem; border-bottom:1px solid var(--line)}
.qbReview__row img{width:64px; height:64px; object-fit:contain; mix-blend-mode:multiply}
.qbReview__why{font-size:.75rem; color:var(--teal-700)}
@media (max-width:760px){
  .qbReview__row{grid-template-columns:48px minmax(0,1fr) auto; row-gap:.6rem}
  .qbReview__row img{width:48px; height:48px}
}

/* sticky action footer */
.qb__foot{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(8,34,51,.08);
}
.qb__footInner{
  max-width:var(--wrap); margin-inline:auto; padding:.7rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.qb__footTotal{display:flex; align-items:baseline; gap:.5rem}
.qb__footTotal b{font-family:var(--display); font-size:1.2rem; color:var(--ink)}
.qb__footActions{display:flex; gap:.6rem; flex-wrap:wrap; margin-left:auto}
@media (max-width:560px){
  .qb__footInner{padding-block:.55rem; gap:.5rem}
  .qb__footActions{width:100%; flex-wrap:nowrap}
  .qb__footActions .btn{flex:1; min-width:0; font-size:.88rem; padding-inline:.6em}
  /* the secondary action is already reachable from the page body */
  .qb__footActions .btn--ghost{display:none}
  .qb__footTotal b{font-size:1.05rem}
}

/* ------------------------------------------------------------ preview bar */
/* Only rendered while build_site.py has PREVIEW = True. */
.previewBar{
  background:repeating-linear-gradient(135deg,#8A5A06 0 14px,#7A4E06 14px 28px);
  color:#FFF3DC; border-bottom:2px solid #C8901F;
}
.previewBar__inner{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  padding-block:.6rem; min-height:40px;
}
.previewBar__tag{
  flex:none; background:#FFC85C; color:#4A2E02;
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.28em .7em; border-radius:4px;
}
.previewBar__text{
  margin:0; font-size:.82rem; line-height:1.45; color:#FFF3DC;
}
.previewBar__text strong{color:#FFD98A; font-weight:600}
@media print{ .previewBar{display:none} }

/* ------------------------------------------------------------------ toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,120%); z-index:120;
  background:var(--navy); color:#fff; padding:.85rem 1.25rem; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.7rem;
  font-size:.92rem; transition:transform .3s cubic-bezier(.2,.8,.2,1); max-width:calc(100vw - 32px);
}
.toast.is-open{transform:translate(-50%,0)}
.toast svg{color:var(--teal); flex:none}
.toast a{color:var(--teal); font-weight:600; white-space:nowrap}

.skeleton{background:linear-gradient(90deg,var(--soft) 25%,var(--soft-2) 37%,var(--soft) 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:8px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

@media print{
  .topbar,.masthead,.mainnav,.footer,.btn,.finder__foot{display:none!important}
  body{font-size:11pt}
  .specSheet{border-color:#999}
}