/* =========================================================================
   Crown Furniture — site styles  (Mockup A: fresh / white / teal)
   Plus Jakarta Sans · white background · teal+mint · rounded cards
   ========================================================================= */
:root{
  --ink:#0f2e2a;          /* primary text (deep green-ink)            */
  --ink-soft:#26433d;     /* nav / secondary headings                */
  --teal:#0e9b78;         /* brand accent                            */
  --teal-d:#0a7a5e;       /* darker accent (links/kicker)            */
  --teal-l:#15c08f;       /* light accent for gradients              */
  --mint:#e7f6f0;         /* icon tiles / soft fills                 */
  --mint2:#d3eee3;        /* eyebrow pill / hover borders            */
  --sky:#f4faf8;          /* very light section / input fill         */
  --line:#dbe9e4;         /* hairline borders                        */
  --muted:#5c726c;        /* muted body text                         */
  --white:#fff;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --wrap:1180px;
  --gutter:28px;          /* ONE side-padding for header + all content (alignment) */
  --band:84px;            /* vertical section rhythm                  */
  --radius:18px;
  --shadow-card:0 24px 40px -28px rgba(14,80,64,.45);
  --shadow-float:0 30px 60px -30px rgba(14,80,64,.40);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
.site-footer{margin-top:auto}
img{max-width:100%;display:block}
a{color:var(--teal-d);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
main{display:block}

/* ── Typography rhythm ─────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.025em;line-height:1.12;font-weight:800}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--teal-d)}
h2{font-size:clamp(1.7rem,3vw,2.3rem)}
h2 em{font-style:normal;color:var(--teal-d)}
h3{font-size:1.15rem;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:1.18rem;color:var(--muted);line-height:1.6;max-width:60ch;margin-top:14px}

/* Section heading block (kicker → h2 → lead) gets consistent breathing room */
.eyebrow-d{display:block;color:var(--teal-d);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;font-size:.78rem;margin-bottom:12px}
.section-head{margin-bottom:32px}
.section-head h2{margin-bottom:0}
.section-head .lead{margin-top:12px}
/* Sub-group within a single section (e.g. service categories) — one rhythm, no double-section gaps */
.svc-group + .svc-group{margin-top:56px}
.svc-group > h2{margin-bottom:0}
.svc-group > .grid{margin-top:22px}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn,.btn--ghost,button.submit{font-family:inherit;cursor:pointer;font-weight:700;border:0;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn{background:var(--teal);color:#fff;padding:14px 24px;border-radius:13px;
  box-shadow:0 10px 24px -10px var(--teal);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--teal)}
.btn--ghost{background:#fff;color:var(--ink);padding:14px 24px;border-radius:13px;border:1.5px solid var(--line)}
.btn--ghost:hover{color:var(--ink);border-color:var(--mint2);background:var(--sky)}

/* ── Header (light, sticky) ────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header__inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:74px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-l));color:#fff;font-size:1rem;flex-shrink:0}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{color:var(--ink-soft);font-weight:600;font-size:.95rem}
.site-nav a:hover{color:var(--teal-d)}
.site-nav .phone{color:var(--teal-d);font-weight:700}
/* Cart/quote-list chip (Task N fix round 1): the count is a floating bubble taken OUT of the
   flow (absolute), so the link's own box -- and therefore the whole nav/footer row -- keeps
   an identical width at 0, 1, or 100 units. Never reintroduce an inline count here: the old
   inline badge shifted the entire nav ~30px the moment the first item landed. */
.nav-cart{position:relative;white-space:nowrap}
.cart-count{position:absolute;top:-10px;left:calc(100% - 6px);display:inline-grid;place-items:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--teal);color:#fff;
  font-size:.7rem;font-weight:800;line-height:1}
.cta{background:var(--ink);color:#fff;padding:10px 18px;border-radius:11px;font-weight:700;white-space:nowrap}
.cta:hover{background:var(--teal-d);color:#fff}
/* header "have an access code?" unlock -- non-open store modes only, code-gated */
.unlock-toggle{position:relative;font-size:.85rem}
.unlock-link{cursor:pointer;color:var(--ink-soft);font-weight:600;list-style:none}
.unlock-link::-webkit-details-marker{display:none}
.unlock-form{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:20}
.unlock-error{color:#a12626;font-size:.8rem;font-weight:600}
.nav-toggle-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}  /* hidden but still toggleable via label */
/* hamburger button — hidden on desktop */
.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}


/* ── HERO (Mockup A: light mint gradient, text + quote card) ───────── */
.hero{background:radial-gradient(1100px 520px at 82% -8%,var(--mint),#fff 62%);
  padding:72px 0 56px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:center}
.hero #quote{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mint2);
  color:var(--teal-d);font-weight:700;font-size:.82rem;padding:7px 15px;border-radius:999px;
  max-width:100%;flex-wrap:wrap;white-space:normal;line-height:1.4}
.hero h1{margin:18px 0 16px}
.hero__sub{font-size:1.18rem;color:var(--muted);max-width:40ch}
.hero__actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.trust{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.trust div{display:flex;flex-direction:column}
.trust b{font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.trust b em{font-style:normal;color:var(--teal-d)}
.trust span{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:2px}

/* ── Quote card (the wizard, styled as Mockup A .quote) ────────────── */
.quote-wizard{background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px;box-shadow:var(--shadow-float)}
.quote-wizard .wz-title{font-size:1.2rem;letter-spacing:-.01em;font-weight:800;margin-bottom:4px}
.quote-wizard fieldset{border:0;padding:0;margin:0}
.quote-wizard label{display:block;font-size:.8rem;font-weight:700;color:#3a564f;margin:12px 0 5px}
.quote-wizard input,.quote-wizard select,.quote-wizard textarea{width:100%;padding:13px;
  border:1.5px solid var(--line);border-radius:11px;font:inherit;background:var(--sky);color:var(--ink)}
.quote-wizard input:focus,.quote-wizard select:focus,.quote-wizard textarea:focus{
  outline:none;border-color:var(--teal);background:#fff}
.quote-wizard .row,.quote-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quote-wizard .row label,.quote-form .row label{margin-top:0}
.wz-nav{display:flex;gap:10px;margin-top:18px}
.wz-nav button{flex:1;font-family:inherit;font-weight:700;font-size:1rem;padding:14px;
  border-radius:12px;border:0;cursor:pointer}
.wz-nav [data-next],.wz-nav [data-submit]{background:var(--ink);color:#fff}
.wz-nav [data-next]:hover,.wz-nav [data-submit]:hover{background:var(--teal-d)}
.wz-nav .ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);flex:0 0 auto;padding:14px 20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ── Generic section ───────────────────────────────────────────────── */
.section,section{padding:var(--band) 0}
section > .wrap > .eyebrow-d:first-child{margin-top:0}
.section--paper2{background:var(--sky)}
.view-all{margin-top:28px;font-weight:700}
.view-all a{font-size:1rem}

/* ── Card grid ─────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.grid--cards{margin-top:32px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--mint2)}
.card h3,.card h4{margin-bottom:6px}
.card p{color:var(--muted);font-size:.93rem}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--mint);
  display:grid;place-items:center;font-size:1.3rem;margin-bottom:14px}
/* testimonial cards */
blockquote.card{font-style:normal}
blockquote.card p{color:var(--ink);font-size:1rem;line-height:1.6}
blockquote.card cite{display:block;margin-top:14px;color:var(--teal-d);font-weight:700;font-style:normal;font-size:.9rem}

/* ── Coverage band (Mockup A dark teal-ink rounded band) ───────────── */
.coverage{padding:0 0 var(--band)}
.coverage .wrap{}
.cover-grid{background:var(--ink);color:#fff;border-radius:26px;padding:48px;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center}
.cover-grid h2{color:#fff;margin-top:4px}
.cover-grid p{color:#9fd9c8;margin-top:14px;max-width:34ch}
.cover-grid .eyebrow-d{color:#7fe8c8}
.big-num{font-size:clamp(3.5rem,7vw,5rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.big-num em{font-style:normal;color:var(--teal-l)}
.citygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:11px 14px;font-size:.85rem;font-weight:600;color:#d7f5ec;transition:background .15s var(--ease)}
.chip:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ── Inner page header block (crumbs + h1 + lead) ──────────────────── */
.hero__text{min-width:0}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--teal-d)}
.crumbs span{color:var(--ink)}
.page-intro{padding:56px 0 0}
.page-intro h1{margin-bottom:14px}
/* Inner-page hero: light mint intro band used by about/contact/reviews/photos/legal/etc. */
.page-hero{background:radial-gradient(900px 420px at 85% -20%,var(--mint),#fff 60%);
  border-bottom:1px solid var(--line);padding:60px 0 44px}
.page-hero h1{margin:0 0 14px}
.page-hero .lead{margin-top:0}
/* a content section right after the hero shouldn't double up the band padding */
.page-hero + section{padding-top:56px}
.about-body{max-width:760px}
.about-body p{color:var(--muted);margin-bottom:16px;font-size:1.05rem}
.about-cta,.reviews-cta{margin-top:36px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:32px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.review-card p{color:var(--ink);line-height:1.6}
.review-card cite{display:block;margin-top:14px;color:var(--teal-d);font-weight:700;font-style:normal;font-size:.9rem}
.contact-form{background:#fff}
.thank-you-body,.error-body{text-align:center;max-width:620px;margin:0 auto;padding:24px 0}
.thank-you-body .btn,.error-body .btn{margin-top:24px}

/* ── Tick / bullet list ────────────────────────────────────────────── */
.ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0}
.ticks li{position:relative;padding:12px 0 12px 34px;border-bottom:1px solid var(--line);font-size:1rem}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:'✓';position:absolute;left:4px;top:12px;color:var(--teal);font-weight:800}

/* ── FAQ accordion ─────────────────────────────────────────────────── */
.faq{margin-top:48px}
.faq h2{margin-bottom:20px}
.faq details{border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--teal);font-weight:800;font-size:1.2rem}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--muted);padding:0 0 18px}

/* ── Service / city-service two-column layout (content + sticky form) ─ */
.svc-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start;margin-top:8px}
.svc-main{min-width:0}
.svc-main > .ticks:first-child{margin-top:0}
.svc-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.svc-aside .quote-wizard{box-shadow:var(--shadow-card)}
.svc-aside .aside-call{text-align:center;color:var(--muted);font-size:.92rem}
@media(max-width:980px){
  .svc-layout{grid-template-columns:1fr;gap:32px}
  .svc-aside{position:static;order:-1;max-width:560px}
}

/* ── Related / nearby ──────────────────────────────────────────────── */
.related{margin-top:56px}
.related .grid{margin-top:24px}
.whyus{background:none}

/* ── Service-area / city pages: service link grid ──────────────────── */
.svc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:30px}

/* City directory — clean multi-column index of city links (no repeated noise) */
.area-stat{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;color:var(--teal-d)}
.area-stat b{font-size:1.7rem;letter-spacing:-.02em}
.city-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0 32px;margin-top:14px;border-top:1px solid var(--line)}
.city-link{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 6px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.98rem}
.city-link .arr{color:var(--teal);opacity:0;transform:translateX(-5px);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.city-link:hover{color:var(--teal-d)}
.city-link:hover .arr{opacity:1;transform:none}

/* ── Contact two-column ────────────────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:36px;margin-top:36px;align-items:start}
.contact-info{background:var(--sky);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.contact-info h3{margin-bottom:12px}
.contact-info p{color:var(--muted);margin-bottom:10px}

/* ── Gallery ───────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:32px}
.gallery__item{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--sky)}
.gallery__item img{width:100%;height:200px;object-fit:cover}
.gallery__item figcaption{padding:12px 14px;font-size:.88rem;color:var(--muted)}
.empty-state{text-align:center;padding:64px 24px;background:var(--sky);border:1px dashed var(--line);
  border-radius:var(--radius);margin-top:32px}
.empty-state p{color:var(--muted);margin-bottom:18px}

/* ── Storefront: shop / product / collections ──────────────────────── */
/* Main catalog grid: auto-fill (cards pack left, never balloon on a partial last row). */
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* Capped + centered variant for a few related/recently-viewed cards (never full-bleed for 1-2). */
.grid--capped{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,240px));gap:18px;justify-content:center}

/* stock badges — share the base .badge pill from the admin section above */
.badge-instock{background:var(--mint);color:var(--teal-d)}
.badge-onwater{background:#fff3d6;color:#8a6400}
.badge-oos{background:#eef1f5;color:#5d6678}

.product-card{padding:0;overflow:hidden}
.product-card__media{position:relative;aspect-ratio:4/3;background:var(--sky)}
.product-card__media img{width:100%;height:100%;object-fit:cover}
.product-card__media .badge{position:absolute;top:10px;left:10px}
.product-card__noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.85rem;font-weight:600;background:var(--sky)}
.product-card__body{padding:16px 18px 20px}
.product-card__body h3{font-size:1rem;margin-bottom:6px}
.product-card__price{color:var(--teal-d);font-weight:800;font-size:1.05rem}

.collection-card{padding:0;overflow:hidden}
.collection-card__media{aspect-ratio:4/3;background:var(--sky)}
.collection-card__media img{width:100%;height:100%;object-fit:cover}
.collection-card h3{padding:16px 18px 4px;margin:0}
.collection-card p{padding:0 18px 18px;color:var(--muted);font-size:.9rem}

/* shop layout: filter sidebar + results */
.shop-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start;margin-top:8px}
.shop-filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:96px}
.shop-filters label{display:block;font-weight:700;font-size:.82rem;color:var(--ink-soft);margin:0 0 14px}
.shop-filters input,.shop-filters select{display:block;width:100%;margin-top:6px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--sky);color:var(--ink)}
.shop-filters input:focus,.shop-filters select:focus{outline:none;border-color:var(--teal);background:#fff}
.shop-filters__check{display:flex;align-items:center;gap:8px;font-weight:600}
.shop-filters__check input{width:auto;margin:0}
.shop-filters__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shop-filters .btn{width:100%;margin-top:4px}
.shop-filters .btn--ghost{width:100%;margin-top:10px;text-align:center}
.shop-count{color:var(--muted);font-weight:600;margin-bottom:18px}
.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px}
.pagination__status{color:var(--muted);font-weight:600;font-size:.9rem}

/* product detail */
.product-detail{padding-top:48px}
.product-detail__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:start}
.product-gallery__main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--sky);aspect-ratio:1/1}
.product-gallery__main img{width:100%;height:100%;object-fit:contain}
.product-gallery__zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.product-gallery__zoom:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.product-gallery__zoom-icon{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(15,46,42,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;pointer-events:none}
.product-gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:10px}
.product-gallery__thumb{display:block;padding:0;cursor:pointer;background:var(--sky);border-radius:10px;border:2px solid var(--line);overflow:hidden}
.product-gallery__thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.product-gallery__thumb.is-active{border-color:var(--teal)}
.product-gallery__thumb:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.product-gallery__thumb:hover{border-color:var(--teal-l)}

/* UX walkthrough MAJOR-5: at mobile widths the thumb strip's wrapping grid (repeat(auto-fill,...))
   could run several rows tall on a product with many photos, burying the title/price/CTA far
   down the page below all of them. CSS-only fix: below 720px the strip becomes a single
   horizontal scrollable row instead of wrapping, so the gallery block stays short regardless of
   photo count and product-info (title/price/add-to-cart) immediately follows it in the stacked
   (single-column) layout. Thumb buttons themselves are unchanged -- only how they're laid out. */
@media(max-width:720px){
  /* max-width:100% is load-bearing: a flex container with overflow-x:auto still sizes itself
     to its CONTENT's intrinsic width by default (shrink-to-fit), so without a hard cap here a
     product with many photos silently widens .product-gallery__thumbs (and the whole page)
     to fit every thumb in a row instead of actually scrolling within its own box -- confirmed
     via headless-browser measurement (document.body.scrollWidth grew past the viewport) before
     this line was added. */
  .product-gallery__thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:6px;max-width:100%}
  .product-gallery__thumb{flex:0 0 64px;width:64px}
}

/* product gallery lightbox -- centered popup panel; the page stays visible, dimmed,
   behind it (NOT a whole-page takeover). The overlay's z-index (1000) beats the sticky
   header's stacking context (z-index 30) in the root context, so the dim covers the
   header too -- the header stays visible under the dim, never above it. */
.product-gallery__lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.product-gallery__lightbox[hidden]{display:none}
.product-gallery__lightbox:focus{outline:none}
.product-gallery__lightbox-backdrop{position:absolute;inset:0;background:rgba(6,20,18,.55)}
.product-gallery__lightbox-panel{position:relative;width:80%;max-width:1040px;max-height:85vh;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-float);padding:56px 64px 40px;display:flex;flex-direction:column}
.product-gallery__lightbox-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.product-gallery__lightbox-body img{max-width:100%;max-height:calc(85vh - 150px);width:auto;height:auto;object-fit:contain}
.product-gallery__lightbox-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:1.35rem;line-height:1;cursor:pointer}
.product-gallery__lightbox-prev,.product-gallery__lightbox-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.product-gallery__lightbox-close:hover,.product-gallery__lightbox-prev:hover,.product-gallery__lightbox-next:hover{background:var(--sky);border-color:var(--mint2)}
.product-gallery__lightbox-close:focus-visible,.product-gallery__lightbox-prev:focus-visible,.product-gallery__lightbox-next:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.product-gallery__lightbox-prev{left:10px}
.product-gallery__lightbox-next{right:10px}
.product-gallery__lightbox-count{text-align:center;margin-top:14px;color:var(--muted);font-weight:600;font-size:.9rem}
body.gallery-lock{overflow:hidden}
@media (max-width:640px){
  .product-gallery__lightbox{padding:10px}
  .product-gallery__lightbox-panel{width:100%;padding:52px 52px 32px}
  .product-gallery__lightbox-body img{max-height:calc(85vh - 130px)}
  .product-gallery__lightbox-prev{left:6px}
  .product-gallery__lightbox-next{right:6px}
}
.product-info h1{margin-bottom:10px}
.product-description{color:var(--muted);line-height:1.6;max-width:60ch;margin-bottom:16px}
.product-price{font-size:1.6rem;font-weight:800;color:var(--teal-d);margin-bottom:14px}
.product-info .badge{margin-bottom:22px}
.product-specs{display:grid;gap:10px;margin:22px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-specs>div{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.product-specs dt{color:var(--muted);font-weight:600}
.product-specs dd{font-weight:700;color:var(--ink)}
/* flex-end (not stretch): the Qty label text sits ABOVE its input, so stretching made the
   button span the whole label+input column (~71px) next to a 46px input -- lopsided. Bottom-
   aligning lets the button keep its natural padding height, level with the input. */
.product-add-form{display:flex;gap:12px;align-items:flex-end;margin-top:8px}
.product-qty{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;color:var(--muted);gap:4px}
.product-qty input{width:76px;padding:12px;border:1.5px solid var(--line);border-radius:11px;font:inherit}
.product-add-form .btn{flex:1}
.product-quote-btn{display:block;text-align:center;margin-top:12px}
.product-instructions{margin-top:18px}
.cart-added-msg{background:var(--mint);color:var(--teal-d);font-weight:700;padding:10px 14px;border-radius:11px;margin-bottom:12px}
.product-quote summary{cursor:pointer;list-style:none}
.product-quote summary::-webkit-details-marker{display:none}
.product-quote .quote-form{margin-top:16px}
/* quote-list mode helper line ("Request a Quote once you've added everything...") -- the
   global .field-note 6px top margin reads cramped straight under the chunky Add-to-quote
   button; 16px matches this block's own rhythm (.product-quote .quote-form above). */
.product-quote .field-note{margin-top:16px}

/* ── Cart page ─────────────────────────────────────────────────────── */
.cart-table td{vertical-align:middle}
.cart-qty-form{display:flex;gap:8px;align-items:center}
.cart-qty-form input{width:60px;padding:8px;border:1.5px solid var(--line);border-radius:9px;font:inherit}
.cart-subtotal{text-align:right;font-size:1.15rem;margin-top:18px}
.cart-actions{text-align:right;margin-top:16px}
.cart-quote{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);max-width:520px}
.quote-form label{display:block;font-size:.8rem;font-weight:700;color:#3a564f;margin:12px 0 5px}
.quote-form input,.quote-form textarea{width:100%;padding:13px;border:1.5px solid var(--line);border-radius:11px;font:inherit}
.quote-form .btn{margin-top:16px}

@media(max-width:980px){
  .shop-layout{grid-template-columns:1fr}
  .shop-filters{position:static}
  /* minmax(0,1fr), NOT bare 1fr: a grid track's default automatic minimum is its content's
     min-content size, not 0. The desktop rule above already uses minmax(0,...) for this reason;
     this single-column override was dropping that zero-minimum, so a wide non-shrinking child
     (post-MAJOR-5: the mobile single-row thumb strip, flex-shrink:0, ~1432px of un-wrapped
     photos) forced this ONE column -- and the whole page -- to overflow horizontally instead of
     scrolling inside its own box. Confirmed via headless-browser measurement (document.body.
     scrollWidth exceeding the viewport) before this line was added. */
  .product-detail__layout{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ── Legal pages ───────────────────────────────────────────────────── */
.legal-body{max-width:760px}
.legal-body h2{margin:36px 0 12px;font-size:1.4rem}
.legal-body p,.legal-body li{color:var(--muted);margin-bottom:12px}
.legal-body ul{padding-left:20px}
.muted{color:var(--muted)}

/* ── Auth / setup card ─────────────────────────────────────────────── */
.auth-card{max-width:440px;margin:64px auto;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:34px;box-shadow:var(--shadow-card)}
.auth-card h1{font-size:1.7rem;margin-bottom:18px}
.auth-card label{display:block;font-weight:700;font-size:.85rem;margin:14px 0 6px}
.auth-card input{width:100%;padding:13px;border:1.5px solid var(--line);border-radius:11px;font:inherit;background:var(--sky)}
.auth-card button{margin-top:20px;width:100%;background:var(--teal);color:#fff;border:0;
  padding:14px;border-radius:12px;font-weight:700;font-size:1rem;cursor:pointer}
.error{background:#fde8e8;border:1px solid #f3b4b4;color:#a12626;padding:12px 14px;border-radius:11px;margin-bottom:8px;font-size:.92rem}
.flash{background:var(--mint);border:1px solid var(--mint2);color:var(--teal-d);padding:12px 14px;border-radius:11px;margin-bottom:16px;font-weight:600}

/* ── Footer (light) ────────────────────────────────────────────────── */
.site-footer{background:var(--sky);border-top:1px solid var(--line);padding:52px 0 40px;margin-top:0}
.site-footer .wrap{display:grid;gap:24px}
.site-footer strong{color:var(--ink);font-size:1.15rem}
.site-footer p{color:var(--muted);font-size:.9rem}
.footer-links{display:flex;flex-wrap:wrap;gap:20px}
.footer-links a{color:var(--ink-soft);font-weight:600;font-size:.92rem}
.footer-links a:hover{color:var(--teal-d)}
.site-footer a{color:var(--teal-d)}

/* ══ Admin ══════════════════════════════════════════════════════════ */
body.admin{background:var(--sky)}
/* topbar */
/* on PUBLIC pages (logged-in convenience bar) the admin-bar scrolls away — NOT sticky,
   so it never collides with the sticky site-header. Only the admin panel itself is sticky. */
.admin-bar{background:var(--ink);color:#fff}
body.admin .admin-bar{position:sticky;top:0;z-index:40}
.admin-bar__inner{margin:0 auto;padding:0 28px;min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
/* Public pages reuse .admin-bar/.admin-bar__inner for the logged-in-admin convenience bar
   (templates/header.php) -- that one stays capped to match the storefront's own .wrap
   width. Only the real admin panel (body.admin) goes fluid, see .admin-wrap below. */
body:not(.admin) .admin-bar__inner{max-width:1120px}
.admin-brand{color:#fff;font-weight:800;font-size:1.1rem}
.admin-brand:hover{color:#fff}
.admin-brand span{color:#7fd9bf;font-weight:600}
.admin-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-nav a{color:#c9e3da;font-weight:600;font-size:.92rem;padding:8px 12px;border-radius:9px}
.admin-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.admin-nav a.is-active{color:#fff;background:rgba(255,255,255,.14)}
.admin-nav__view{color:#04130d !important;background:var(--teal);font-weight:700}
.admin-nav__view:hover{background:var(--teal-l);color:#04130d !important}
.admin-nav__out{color:#8fb3a8 !important}
/* layout */
.admin-main{padding:34px 0 64px}
/* Fluid: owner mandate is NOTHING squeezed into a narrow centered column on a wide screen --
   the admin panel now uses the full viewport width (minus comfortable side padding) on every
   admin page, at every desktop width. Storefront/public pages (.wrap, capped) are untouched. */
.admin-wrap{margin:0 auto;padding:0 32px}
.admin-section{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:24px}
.admin-section > h1{font-size:1.7rem;margin-bottom:18px}
.admin-section > h2{font-size:1.25rem;margin-bottom:14px}
.section-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.section-header h1,.section-header h2{margin:0;margin-right:auto}
.admin-divider{border:0;border-top:1px solid var(--line);margin:28px 0}
/* tables */
.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.admin-table th,.admin-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:middle}
.admin-table th{background:var(--sky);font-weight:700;white-space:nowrap}
.admin-table tr:last-child td{border-bottom:0}
.detail-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.detail-table th,.detail-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.92rem}
.detail-table th{width:180px;background:var(--sky);font-weight:700;vertical-align:top}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
/* badges */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;text-transform:capitalize}
.badge-new{background:var(--mint);color:var(--teal-d)}
.badge-contacted{background:#fff3d6;color:#8a6400}
.badge-closed{background:#eef1f5;color:#5d6678}
.badge-webhook-ok,.badge-webhook-sent{background:var(--mint);color:var(--teal-d)}
.badge-webhook-fail,.badge-webhook-failed{background:#fde8e8;color:#a12626}
.badge-webhook-skip,.badge-webhook-skipped,.badge-webhook-pending,.badge-webhook-{background:#eef1f5;color:#5d6678}
/* order status badges */
.badge-order-pending{background:#fff3d6;color:#8a6400}
.badge-order-paid{background:var(--mint);color:var(--teal-d)}
.badge-order-fulfilled{background:var(--sky);color:var(--ink);border:1px solid var(--line)}
.badge-order-cancelled{background:#fde8e8;color:#a12626}
/* store mode chip (admin dashboard, links to Settings) */
.badge-mode-open{background:var(--mint);color:var(--teal-d);text-decoration:none}
.badge-mode-prices_quote{background:#fff3d6;color:#8a6400;text-decoration:none}
.badge-mode-quote_only{background:#eef1f5;color:#5d6678;text-decoration:none}
/* invite status badges (Task M) */
.badge-active{background:var(--mint);color:var(--teal-d)}
.badge-expired{background:#fff3d6;color:#8a6400}
.badge-revoked{background:#fde8e8;color:#a12626}
/* quote-list/cart thumbnail (Task M). Zero-defect wave: the global img{max-width:100%} reset
   (line ~32) can still squish this INSIDE a narrow table cell at mobile widths (was measured
   46.4x56/44.9x56 -- width shrunk, height didn't, since max-width only constrains width) --
   flex-shrink:0 + min-width guard against that in any flex ancestor, and aspect-ratio is a
   belt-and-suspenders guard so a squeezed width can never orphan the height into a non-square
   box even outside a flex context (e.g. a plain table cell narrower than 56px). */
.cart-thumb{width:56px;height:56px;min-width:56px;flex-shrink:0;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block}
/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:6px}
.stat-card{background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:4px}
.stat-value{font-size:1.9rem;font-weight:800;line-height:1}
.stat-label{color:var(--muted);font-size:.85rem;font-weight:600}
.stat-new{border-color:var(--mint2)}
/* hints + flash */
.admin-hint,.hint,.field-note,.ai-tool__hint{display:block;color:var(--muted);font-size:.86rem;margin:0 0 16px;font-weight:500;max-width:680px}
.field-note{margin:6px 0 0}
.admin-flash{background:var(--mint);border:1px solid var(--mint2);color:var(--teal-d);padding:12px 16px;border-radius:11px;margin-bottom:20px;font-weight:700}
/* admin buttons */
.btn-sm,.btn-outline,.btn-primary{font-family:inherit;font-weight:700;cursor:pointer;border-radius:10px;
  padding:9px 16px;font-size:.9rem;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1}
.btn-sm{padding:7px 12px;font-size:.84rem}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-d);color:#fff}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-d)}
.btn-danger{color:#a12626;border-color:#e6b0b0}
.btn-danger:hover{border-color:#a12626;color:#a12626;background:#fde8e8}
/* inline action forms (delete / clear-tests) sit alongside links & buttons without breaking layout */
.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form{display:inline}
.lead-actions{display:flex;gap:14px;align-items:center;white-space:nowrap}
.lead-actions .inline-form{display:inline-flex}
.btn-link-danger{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#a12626;cursor:pointer}
.btn-link-danger:hover{text-decoration:underline}
/* admin forms — every field is a consistent block */
.settings-group{border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:22px}
.settings-group legend{font-weight:800;font-size:1.1rem;padding:0 8px;color:var(--ink)}
.settings-form label{display:block;font-weight:700;font-size:.85rem;color:var(--ink-soft);margin-bottom:18px;max-width:520px}
.settings-form input,.settings-form select,.settings-form textarea{display:block;width:100%;margin-top:6px;
  padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--sky);color:var(--ink)}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.settings-form textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;resize:vertical}
.settings-form .field-note{font-weight:500}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;max-width:520px;margin-bottom:18px}
.field-row label{margin-bottom:0;max-width:none}
.form-actions{margin-top:8px}
.settings-test-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.settings-test-form{flex:1 1 280px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
/* admin login uses the public .auth-card; give it the admin bg */
body.admin .auth-card{margin:80px auto}
/* wide admin tables scroll inside this wrapper instead of overflowing the page. UX walkthrough
   MAJOR-6: at desktop widths (e.g. 1440px) a table wider than its wrapper clipped silently, with
   no visual cue that more columns existed off to the right. Two fixes, both on this one shared
   class (also reused by the mobile cart table -- finding 13 -- which already wraps its <table>
   in .table-scroll, see templates/cart.php):
     1. An always-visible thin scrollbar (webkit + the standard scrollbar-width/-color props)
        so the presence of a scrollbar itself is a permanent cue, not just an on-hover browser
        default that's easy to miss.
     2. A right-edge fade OVERLAY that paints ABOVE the table. Fix round 1: the first attempt
        used the dual-background-layer "scroll shadow" trick on the wrapper's own background,
        but .admin-table{background:#fff} paints over the wrapper's background -- reviewer
        proved via pixel sampling the fade was invisible. Now the fade is a ::after pseudo-
        element: the wrapper is a flex container, the ::after a position:sticky flex child
        pinned to the scrollport's right edge (sticky works in the horizontal scroll axis
        too), 36px wide, pulled back over the table's right edge with a negative margin, and
        pointer-events:none so it never blocks the row controls underneath. Visibility is
        gated by two classes kept honest by assets/js/table-scroll.js (loaded by the admin
        shell and the public footer): `is-scrollable` (scrollWidth > clientWidth) turns it on,
        `is-scrolled-end` (scrolled all the way right) turns it off -- the cue shows only
        while there genuinely IS more table off to the right. No-JS fallback: the thin
        scrollbar (pure CSS) still signals scrollability. */
.table-scroll{
  position:relative;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  scrollbar-width:thin;scrollbar-color:var(--muted) var(--sky);
}
.table-scroll::after{
  content:'';position:sticky;right:0;top:0;z-index:2;flex:0 0 36px;margin-left:-36px;align-self:stretch;
  background:linear-gradient(to left, rgba(15,46,42,.28), rgba(15,46,42,0));
  pointer-events:none;opacity:0;transition:opacity .18s;
}
.table-scroll.is-scrollable:not(.is-scrolled-end)::after{opacity:1}
.table-scroll::-webkit-scrollbar{height:10px}
.table-scroll::-webkit-scrollbar-track{background:var(--sky);border-radius:6px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.table-scroll .admin-table{min-width:560px;flex:1 0 auto}
/* products table: table-layout:fixed with an explicit pixel budget per column, so the total
   rendered width is DETERMINISTIC (~1,237px) regardless of product-name length or category-
   name length -- the previous auto layout let a long category name or product name expand a
   column past the viewport even after the admin-wrap fluid-width fix. Goal (owner mandate):
   every column visible with zero container scroll at every desktop width including 1366px
   laptops (the real content width available there, after the vertical scrollbar the full
   1,451-row catalog always forces, is ~1,233px); narrower windows (1024 and below, plus
   mobile) fall back to the existing .table-scroll scroll+fade, which is correct there -- the
   fallback is for genuinely narrow windows, not desktop. Thumb/checkbox shrink to content
   width; Name gets the largest fixed share and still wraps (white-space normal, the
   table-layout:fixed default); Category's <select> and the Markup/Retail inputs get fixed
   comfortable widths instead of browser-default (a bare <select> stretches to its longest
   option text, e.g. "Dining Room Furniture"); numeric columns are right-aligned. */
.products-table{table-layout:fixed}
/* 20px (not 30px) -- a bare checkbox needs no more; freed for the Actions/1366px fix below. */
.products-table th.col-check,.products-table td.col-check{width:20px;padding-right:4px}
.products-table th.col-thumb,.products-table td.col-thumb{width:56px}
/* Item#/Collection WRAP (never truncate/ellipsis) -- real item numbers run up to 15 chars
   (e.g. "2149T-44108-LEG") and collection slugs up to 12 ("louis-philip"); hiding part of an
   identifier behind an ellipsis is exactly the kind of silent data loss the audit forbids. */
.products-table th.col-item,.products-table td.col-item{width:100px;overflow-wrap:break-word;white-space:normal}
/* 145px (not 160px) -- Name already wraps (white-space:normal); a slightly narrower column
   just means a long product name wraps one line earlier, never truncates/ellipses. */
.products-table th.col-name,.products-table td.col-name{width:145px}
.products-table th.col-collection,.products-table td.col-collection{width:100px;overflow-wrap:break-word;white-space:normal}
/* 155px -- the longest real category name ("Occasional Tables") was hard-clipping MID-WORD
   ("Occasional Tab") in the closed <select> at the old 120px width. Widened to fit it whole,
   plus a defensive ellipsis (Chromium honors text-overflow on a closed select) for any future
   category name that's still longer than the box. Untouched by the 1366px fix below --
   shrinking this one would reintroduce the truncation the earlier fix corrected. */
.products-table th.col-category,.products-table td.col-category{width:155px}
.products-table td.col-category select{width:100%;overflow:hidden;text-overflow:ellipsis}
.products-table th.col-num,.products-table td.col-num{width:64px;text-align:right;white-space:nowrap}
/* Margin % gets its own (narrower) class, split off from the shared col-num budget -- its
   values ("—" or up to "100.0%") never need as much room as Cost/Stock. The header LABEL
   ("Margin %") is two words and doesn't fit 54px on one line -- unlike every other th in this
   table it's allowed to wrap (white-space:normal overrides the nowrap default from
   .admin-table th) so it wraps onto a second line instead of overlapping the Stock header;
   the td (a short number/dash) stays nowrap. */
.products-table th.col-margin{width:54px;text-align:right;white-space:normal;line-height:1.15}
.products-table td.col-margin{width:54px;text-align:right;white-space:nowrap}
.products-table th.col-markup,.products-table td.col-markup{width:80px}
.products-table td.col-markup input{width:100%;max-width:58px}
/* 80px (not 90px), input capped at 64px (not 76px) -- retail values are "$" + up to 7 digits
   ("1,234.56"), which still fits comfortably narrower than the original box. */
.products-table th.col-retail,.products-table td.col-retail{width:80px;white-space:nowrap}
.products-table td.col-retail input{width:100%;max-width:64px}
.products-table td.col-retail .field-note{display:block;margin:2px 0 0;font-size:.76rem;max-width:none}
.products-table th.col-status,.products-table td.col-status{width:120px}
.products-table th.col-visible,.products-table td.col-visible{width:74px;white-space:nowrap}
/* 120px (not 90px) -- "Ungroup" (group rows) is wider than "Save" and was overflowing its
   cell's content box by ~21px even at the previous 90px (only read correctly via clip-luck,
   since no overflow:hidden was set to actually clip it). 120px gives it real headroom. */
.products-table th.col-actions,.products-table td.col-actions{width:120px;white-space:nowrap}
/* products page: thumbs, out-of-band per-row forms, checkboxes, pagination */
.admin-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--sky)}
.admin-thumb--placeholder{display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--muted);text-align:center;line-height:1.1}
.admin-thumb-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.admin-thumb-row .admin-thumb{width:96px;height:96px}
/* per-row `form=""`-targeted forms carry no visible content of their own -- hidden but still submittable */
.oob-form{display:none}
.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--ink-soft);margin-bottom:0}
.checkbox-label input{width:auto;margin:0}
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
/* admin mobile */
@media(max-width:700px){
  .admin-bar__inner{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 16px;min-height:0}
  .admin-nav{flex-wrap:wrap;gap:6px 10px;min-width:0}   /* wrap items — never overflow */
  .admin-nav a{white-space:nowrap;padding:7px 10px}
  .admin-wrap{padding:0 14px}
  .admin-main{padding:22px 0 48px}
  .admin-section{padding:18px 16px}
  .admin-section>h1{font-size:1.45rem}
  .section-header{gap:8px}
  .field-row{grid-template-columns:1fr;max-width:none}
  .settings-test-row{flex-direction:column}
  .settings-form input,.settings-form select,.settings-form textarea,.settings-form label{max-width:none}
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .cover-grid{grid-template-columns:1fr;gap:28px;padding:36px}
  .contact-layout{grid-template-columns:1fr}
  .citygrid{grid-template-columns:repeat(2,1fr)}
}
/* ── Mobile nav: hamburger + dropdown drawer (≤860px) ──────────────── */
@media(max-width:860px){
  :root{--band:60px}
  .nav-toggle{display:flex}
  .header-cta{margin-left:auto}         /* group Free Quote + hamburger on the right */
  .site-header__inner{gap:10px}
  /* drawer: full-width dropdown below the header */
  .site-nav{position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(14,80,64,.35);
    flex-direction:column;align-items:stretch;gap:0;padding:6px 0;display:none}
  .nav-toggle-cb:checked ~ .site-nav{display:flex}
  .site-nav a{padding:15px var(--gutter);border-bottom:1px solid var(--line);font-size:1.02rem}
  .site-nav a:last-child{border-bottom:0}
  /* stacked drawer rows: the floating bubble would overlap the row above -- inline it here
     instead (block rows have nothing to their right, so no sibling ever shifts) */
  .site-nav .cart-count{position:static;margin-left:8px;vertical-align:1px}
  /* hamburger → X when open */
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2){opacity:0}
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:560px){
  :root{--gutter:20px}        /* header + all content share this padding on phones */
  .brand{font-size:1.15rem}
  /* trust stats: clean, contained 2×2 cards (not hanging at the edge) */
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
  .trust div{background:var(--sky);border:1px solid var(--line);border-radius:14px;
    padding:16px 14px;align-items:center;text-align:center;gap:2px}
  .trust b{font-size:1.55rem}
  /* hero buttons: full-width, equal, stacked */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn,.hero__actions .btn--ghost{width:100%}
}
@media(max-width:480px){
  .hero{padding:40px 0 36px}
  .citygrid{grid-template-columns:1fr}
  .quote-wizard .row,.quote-form .row{grid-template-columns:1fr}
  h1{font-size:2.05rem}
}

/* ── Checkout / order confirmation ──────────────────────────────────── */
.form-errors{background:#fde8e8;border:1px solid #e6b0b0;color:#a12626;border-radius:var(--radius);
  padding:16px 20px;margin-bottom:24px}
.form-errors p{margin:0 0 6px;font-weight:700}
.form-errors ul{margin:0;padding-left:20px}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:start}
.checkout-form .shipping-options{border:0;padding:0;margin:18px 0 6px}
.checkout-form .shipping-options legend{font-size:.8rem;font-weight:700;color:#3a564f;margin-bottom:8px;padding:0}
.shipping-option{display:flex;align-items:flex-start;gap:10px;font-weight:400;color:var(--ink);
  background:var(--sky);border:1.5px solid var(--line);border-radius:11px;padding:13px;margin:0 0 10px!important}
.shipping-option input{width:auto;margin-top:3px}
.shipping-option:has(input:checked){border-color:var(--teal);background:#fff}
.order-summary{background:var(--sky);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.order-summary h2{margin-bottom:14px;font-size:1.1rem}
.order-summary__items{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.order-summary__items li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--ink-soft)}
.order-summary__row{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line);margin:0}
.order-summary__total{font-weight:800;font-size:1.1rem;color:var(--teal-d)}
@media(max-width:980px){
  .checkout-layout{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:hover,a.card:hover{transform:none}
}