/* ==========================================================================
   PHASE 7 — "ATLAS" DESIGN SYSTEM (Clean Corporate / Minimal)
   The chosen visual direction, applied site-wide as a token-based
   presentation layer loaded LAST over the stable V130 frontend. It restyles
   the shared UI kit — typography (Manrope), buttons, cards, forms, sections,
   header/footer, hero chrome, stats, breadcrumbs, pagination, tabs — through
   the canonical design tokens (so the theme accent still drives colour).
   CSS only: no HTML/URL/SEO/form/logic change, so byte-parity holds and the
   whole thing rolls back by dropping this one stylesheet.
   ========================================================================== */

:root{
  /* Atlas elevation, motion + surface tokens (layered + subtle) */
  --elev-1:0 1px 2px rgba(16,32,60,.04), 0 8px 24px -14px rgba(16,32,60,.16);
  --elev-2:0 2px 6px rgba(16,32,60,.05), 0 26px 50px -22px rgba(16,32,60,.22);
  --ring:color-mix(in srgb, var(--accent) 38%, transparent);
  --soft-2:color-mix(in srgb, var(--accent) 8%, var(--surface));
  --ease:cubic-bezier(.2,.7,.3,1);
  --r-card:18px; --r-pill:999px;
}

/* ---------- Typography: Manrope as the primary UI face ---------- */
.frontend-body{
  font-family:"Manrope", var(--font-body, Inter), system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
.frontend-body h1,.frontend-body h2,.frontend-body h3,.frontend-body h4,
.frontend-body h5,.frontend-body h6,
.frontend-body .builder-heading,.frontend-body .site-nav__brand{
  font-family:"Manrope", var(--font-display, Archivo), system-ui, sans-serif;
  font-weight:800; letter-spacing:-.022em; text-wrap:balance;
}
.frontend-body h1{line-height:1.08}
.frontend-body h2{line-height:1.14}
.frontend-body p{line-height:1.65}
.frontend-body .pp-eyebrow{
  display:inline-block; font-size:var(--fs-12,13px); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}

/* ---------- Buttons: pill, confident primary, calm outline ---------- */
.frontend-body .btn{
  border-radius:var(--r-pill); font-weight:700; letter-spacing:0;
  padding:11px 20px; border-width:1.5px;
  transition:transform .14s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s;
}
.frontend-body .btn:active{transform:translateY(1px)}
.frontend-body .btn.primary,
.frontend-body .site-nav__quote,
.frontend-body .builder-carousel__ctas .btn.primary,
.frontend-body .builder-inquiry-form__actions .btn[type="submit"],
.frontend-body .builder-inquiry-form__actions button[type="submit"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 8px 20px -8px var(--ring);
}
.frontend-body .btn.primary:hover,
.frontend-body .site-nav__quote:hover{ filter:brightness(1.05); box-shadow:0 12px 26px -10px var(--ring); transform:translateY(-2px); }
.frontend-body .btn.outline,
.frontend-body .builder-carousel__ctas .btn:not(.primary){ background:transparent; border-color:color-mix(in srgb, currentColor 34%, transparent); }
.frontend-body .btn:not(.primary):not(.danger):hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Header: airy, quiet chrome ---------- */
.frontend-body .site-header{ box-shadow:0 1px 0 var(--line), 0 8px 26px -22px rgba(16,32,60,.55); }
.frontend-body .site-nav{ min-height:76px; }
.frontend-body .site-nav__links a{ font-weight:600; transition:color .15s; }
.frontend-body .site-nav__links a:hover{ color:var(--accent); }
.frontend-body .site-nav__search .builder-search-box__input,
.frontend-body .site-nav__search input[type="search"]{ border-radius:var(--r-pill); }
.frontend-body .site-topbar{ font-weight:500; }

/* ---------- Hero / carousel chrome ---------- */
.frontend-body .builder-carousel__eyebrow{ letter-spacing:.14em; font-weight:800; }
.frontend-body .builder-carousel__ctas .btn{ border-radius:var(--r-pill); }
.frontend-body .builder-carousel__dot{ transition:transform .2s var(--ease), background-color .2s; }
.frontend-body .builder-carousel__dot[aria-current="true"],
.frontend-body .builder-carousel__dot.is-active{ transform:scale(1.25); }
.frontend-body .builder-carousel__nav{ backdrop-filter:blur(6px); transition:background-color .18s, transform .18s; }
.frontend-body .builder-carousel__nav:hover{ transform:translateY(-50%) scale(1.06); }

/* ---------- Section rhythm + headings ---------- */
.frontend-body .builder-heading{ letter-spacing:-.022em; }

/* ---------- Cards: soft, elevated, lift on hover (all families) ---------- */
.frontend-body .builder-product-card,
.frontend-body .builder-post-card,
.frontend-body .builder-category-card{
  border-radius:var(--r-card);
  border-color:color-mix(in srgb, var(--line) 65%, transparent);
  box-shadow:var(--elev-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.frontend-body .builder-product-card:hover,
.frontend-body .builder-post-card:hover,
.frontend-body .builder-category-card:hover{
  transform:translateY(-5px); box-shadow:var(--elev-2);
  border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
}
.frontend-body .builder-product-card__media img,
.frontend-body .builder-post-card__media img{ transition:transform .4s var(--ease); }
.frontend-body .builder-product-card:hover .builder-product-card__media img,
.frontend-body .builder-post-card:hover .builder-post-card__media img{ transform:scale(1.04); }

.frontend-body .builder-product-card__body{ padding:18px; gap:9px; }
.frontend-body .builder-product-card__body h4{ font-size:var(--fs-16,16px); font-weight:800; line-height:1.3; }
.frontend-body .builder-product-card__price{ font-size:var(--fs-15,15px); font-weight:800; }
.frontend-body .builder-product-card__kind{ letter-spacing:.1em; font-weight:700; }
.frontend-body .builder-product-card__actions .btn{ border-radius:var(--r-pill); }

/* ---------- Category cards: soft chips + gentle lift ---------- */
.frontend-body .builder-category-grid{ gap:18px; }
.frontend-body .builder-category-card--icon{ padding:24px 16px; border-radius:var(--r-card); text-align:center; }
.frontend-body .builder-category-card__icon-wrap{
  width:60px; height:60px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:var(--soft-2); color:var(--accent);
  transition:transform .2s var(--ease), background-color .2s;
}
.frontend-body .builder-category-card--icon:hover .builder-category-card__icon-wrap{
  transform:translateY(-2px) scale(1.06); background:color-mix(in srgb, var(--accent) 15%, var(--surface));
}
.frontend-body .builder-category-card__name{ font-weight:800; font-size:var(--fs-15,15px); }
.frontend-body .builder-category-card__count{ color:var(--muted); font-size:var(--fs-12,13px); font-weight:600; }

/* ---------- Blog / post cards ---------- */
.frontend-body .builder-post-card__body{ padding:20px; }
.frontend-body .builder-post-card__body h4,.frontend-body .builder-post-card__body h3{ line-height:1.28; }

/* ---------- Stats + trust bands ---------- */
.frontend-body .builder-stats-bar{ font-variant-numeric:tabular-nums; }

/* ---------- Inquiry / contact forms: soft card, comfy rounded fields ---------- */
.frontend-body .builder-inquiry-form{
  border-radius:22px; box-shadow:var(--elev-2);
  border-color:color-mix(in srgb, var(--line) 65%, transparent);
}
.frontend-body .builder-inquiry-form input,
.frontend-body .builder-inquiry-form select,
.frontend-body .builder-inquiry-form textarea{
  border-radius:12px; padding:12px 14px; transition:border-color .16s, box-shadow .16s;
}
.frontend-body .builder-inquiry-form input:focus,
.frontend-body .builder-inquiry-form select:focus,
.frontend-body .builder-inquiry-form textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
}
.frontend-body .contact-info-card{
  border-radius:16px; box-shadow:var(--elev-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.frontend-body .contact-info-card:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); }

/* ---------- Product detail tabs card ---------- */
.frontend-body .builder-product-tabs-card{ border-radius:22px; box-shadow:var(--elev-1); }
.frontend-body .builder-tabs__tab.is-active,
.frontend-body .builder-tabs__tab[aria-selected="true"]{ color:var(--accent); }

/* ---------- Breadcrumb + pagination ---------- */
.frontend-body .breadcrumb{ font-weight:600; }
.frontend-body .pagination a,.frontend-body .pagination span{
  border-radius:12px; font-weight:700;
  transition:background-color .15s, color .15s, border-color .15s;
}
.frontend-body .pagination a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Pills / badges ---------- */
.frontend-body .pill{ border-radius:var(--r-pill); font-weight:700; }

/* ---------- Footer: clear hierarchy, airy ---------- */
.frontend-body .site-footer__top{ gap:clamp(28px,4vw,60px); }
.frontend-body .site-footer h4{ letter-spacing:.05em; font-weight:800; }

/* ---------- Responsive: stack the product detail (main + quote sidebar)
   through the whole tablet range, so the inquiry form + its action buttons
   get full width and never overflow a narrow sidebar. ---------- */
@media (max-width: 860px){
  .frontend-body .builder-product-detail .builder-columns--2{ grid-template-columns:1fr; }
  .frontend-body .builder-inquiry-form__actions{ flex-wrap:wrap; }
  .frontend-body .builder-inquiry-form__actions .btn{ min-width:0; }
}

/* ---------- Shop sidebar: one column stacking the category list + price
   filter, so the 2-column .shop-layout grid stays 2-column. ---------- */
.frontend-body .shop-side{ display:flex; flex-direction:column; gap:16px; }

/* ---------- Shop mobile: products FIRST, category filter below — so the
   grid is immediately visible instead of scrolling past a long list. ------ */
@media (max-width: 860px){
  .frontend-body .shop-layout{ display:flex; flex-direction:column; gap:20px; }
  .frontend-body .shop-layout > aside{ order:2; }      /* sidebar (filters) below */
  .frontend-body .shop-layout > div{ order:1; }        /* product grid area first */
}
@media (max-width: 640px){
  /* keep 2 product cards per row on phones, tightened for the narrow width */
  .frontend-body .builder-product-grid--2,
  .frontend-body .builder-product-grid--3,
  .frontend-body .builder-product-grid--4,
  .frontend-body .builder-related-items{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .frontend-body .builder-product-card__body{ padding:13px; gap:6px; }
  .frontend-body .builder-product-card__body h4{ font-size:var(--fs-14,14px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .frontend-body *{ transition:none !important; }
  .frontend-body .builder-product-card:hover,
  .frontend-body .builder-post-card:hover,
  .frontend-body .builder-category-card:hover{ transform:none; }
}

/* ==========================================================================
   PHASE 7 — PRODUCT TEMPLATE VARIANTS (Bento / Spec-sheet / Gallery).
   Layout-only styling layered over the SAME native product blocks the
   Classic composition renders — selected per product from the template
   picker. Atlas tokens drive colour/elevation; rolls back with this file.
   ========================================================================== */

/* ---- shared tile surface for the bento grid ---- */
.frontend-body .builder-pd--bento .pd-bento{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px;
}
.frontend-body .builder-pd--bento .pd-bento__tile{
  background:var(--surface,#fff); border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  border-radius:var(--r-card,18px); box-shadow:var(--elev-1); padding:22px;
}
.frontend-body .builder-pd--bento .pd-bento__gallery{ grid-column:span 2; grid-row:span 2; }
.frontend-body .builder-pd--bento .pd-bento__head{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; }
.frontend-body .builder-pd--bento .pd-bento__quote{ grid-column:span 2; background:var(--soft-2, #f0f6ff); }
.frontend-body .builder-pd--bento .pd-bento__specs{ grid-column:span 4; }
.frontend-body .builder-pd--bento .pd-bento__tabs{ grid-column:span 4; padding:8px; }
.frontend-body .builder-pd--bento .pd-bento__gallery .builder-product-gallery{ height:100%; }
.frontend-body .builder-pd--bento .pd-bento__specs::before{
  content:"Specifications"; display:block; font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.frontend-body .builder-pd--bento .pd-bento__tabs .builder-product-tabs-card{ box-shadow:none; border:none; }
@media (max-width:900px){
  .frontend-body .builder-pd--bento .pd-bento{ grid-template-columns:repeat(2,1fr); }
  .frontend-body .builder-pd--bento .pd-bento__gallery,
  .frontend-body .builder-pd--bento .pd-bento__head,
  .frontend-body .builder-pd--bento .pd-bento__quote,
  .frontend-body .builder-pd--bento .pd-bento__specs,
  .frontend-body .builder-pd--bento .pd-bento__tabs{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:560px){
  .frontend-body .builder-pd--bento .pd-bento{ grid-template-columns:1fr; }
  .frontend-body .builder-pd--bento .pd-bento__tile{ grid-column:span 1; }
}

/* ---- SPEC-SHEET: specifications promoted to a full-width band ---- */
.frontend-body .builder-pd--specsheet .pd-specsheet__media{ max-width:520px; }
.frontend-body .builder-pd--specsheet .pd-specsheet__band{
  margin:26px 0; padding:26px 28px; background:var(--surface,#fff);
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  border-radius:22px; box-shadow:var(--elev-1);
}
.frontend-body .builder-pd--specsheet .pd-specsheet__band::before{
  content:"Full Specifications"; display:block; font-size:18px; font-weight:800;
  letter-spacing:-.01em; color:var(--ink,#16202e); margin-bottom:16px;
}
.frontend-body .builder-pd--specsheet .pd-specsheet__band .pp-spec-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px;
}
.frontend-body .builder-pd--specsheet .pd-specsheet__band .spec{
  border-top:1px solid var(--line); padding:12px 2px;
}
@media (max-width:860px){
  .frontend-body .builder-pd--specsheet .pd-specsheet__band .pp-spec-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .frontend-body .builder-pd--specsheet .pd-specsheet__band .pp-spec-grid{ grid-template-columns:1fr; }
}

/* ---- GALLERY-LED: large image stage first ---- */
.frontend-body .builder-pd--gallery .pd-gallery__stage{ margin:14px 0 26px; }
.frontend-body .builder-pd--gallery .pd-gallery__stage .builder-product-gallery__main{
  border-radius:22px; box-shadow:var(--elev-1); overflow:hidden;
  aspect-ratio:16/9; max-height:560px;
}
.frontend-body .builder-pd--gallery .pd-gallery__stage .builder-product-gallery__main-img{
  width:100%; height:100%; object-fit:cover;
}
.frontend-body .builder-pd--gallery .pd-gallery__stage .builder-product-gallery__thumbs{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:12px;
}
@media (max-width:640px){
  .frontend-body .builder-pd--gallery .pd-gallery__stage .builder-product-gallery__thumbs{ grid-template-columns:repeat(4,1fr); }
}

/* ==========================================================================
   PHASE 7b — HOMEPAGE HERO → Atlas Regular (light 2-column with a blue
   visual panel). CSS-only restyle of the existing carousel hero markup, so
   the homepage structure/data/SEO are unchanged and byte-parity holds.
   ========================================================================== */
.frontend-body .builder-carousel{
  background:linear-gradient(180deg,var(--soft,#eef4ff),#fff 72%);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:24px; box-shadow:var(--elev-1);
}
.frontend-body .builder-carousel__slide{ min-height:470px; padding:clamp(32px,5vw,60px); gap:40px; }
.frontend-body .builder-carousel__body{ color:var(--ink,#16202e); }
.frontend-body .builder-carousel__body h2{ font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.022em; }
.frontend-body .builder-carousel__body p{ color:var(--muted,#647082); font-size:17px; max-width:46ch; }
.frontend-body .builder-carousel__eyebrow{ color:var(--accent); }
.frontend-body .builder-carousel__ctas .btn.outline{ background:#fff; border-color:color-mix(in srgb,var(--ink) 16%,transparent); color:var(--ink); }
.frontend-body .builder-carousel__ctas .btn.outline:hover{ border-color:var(--accent); color:var(--accent); }
/* right column: a real blue visual panel when it holds the stat callout */
.frontend-body .builder-carousel__media:not(:has(img)){
  background:linear-gradient(150deg,#1c49c9,#285ff2 55%,#5b86ff);
  border-radius:24px; min-height:360px; box-shadow:var(--elev-2); padding:30px;
}
.frontend-body .builder-carousel__badge--standalone{
  background:rgba(255,255,255,.96); border-top:none; border-radius:16px;
  box-shadow:var(--elev-1); max-width:240px;
}
/* image slides: rounded elevated panel */
.frontend-body .builder-carousel__media img{ border-radius:20px; box-shadow:var(--elev-2); }
/* nav + dots tuned for the light hero */
.frontend-body .builder-carousel__nav{ background:rgba(16,32,60,.10); color:var(--ink); }
.frontend-body .builder-carousel__nav:hover{ background:rgba(16,32,60,.20); }
.frontend-body .builder-carousel__dot{ background:rgba(16,32,60,.22); }
.frontend-body .builder-carousel__dot.is-active{ background:var(--accent); }

/* ---- HOMEPAGE "Why Choose Us" band → Atlas Regular light cards ---- */
.frontend-body .builder-trust-band{
  background:var(--bg2,#f6f8fb); color:var(--ink,#16202e);
  border-radius:24px; padding:clamp(40px,5vw,60px) clamp(20px,5vw,56px);
}
.frontend-body .builder-trust-band__heading{ color:var(--ink,#16202e); }
.frontend-body .builder-trust-band__text{ color:var(--muted,#647082); }
.frontend-body .builder-trust-band__items{ gap:22px; }
.frontend-body .builder-trust-band__item{
  background:var(--surface,#fff); border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  border-radius:var(--r-card,18px); box-shadow:var(--elev-1); padding:26px 22px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.frontend-body .builder-trust-band__item:hover{ transform:translateY(-4px); box-shadow:var(--elev-2); }
.frontend-body .builder-trust-band__item .builder-icon{
  background:var(--soft-2,#eef4ff); color:var(--accent); border-radius:14px;
}
.frontend-body .builder-trust-band__item h4{ color:var(--ink,#16202e); }
.frontend-body .builder-trust-band__item p{ color:var(--muted,#647082); }

/* ==========================================================================
   PHASE 7b — graceful EMPTY MEDIA. When a post / product / service / category
   has no image yet, show a subtle branded Atlas gradient instead of a blank
   or ballooning box, and hide the builder-only "No images selected" hint on
   the public site. CSS-only — no markup/parity change.
   ========================================================================== */
.frontend-body .builder-post-card__media:empty,
.frontend-body .builder-product-card__media:empty,
.frontend-body .builder-category-card__media:empty{
  display:block; background:linear-gradient(135deg,var(--soft,#eef4ff),#e7f0ff);
  aspect-ratio:16/9; max-height:340px; border-radius:inherit;
}
.frontend-body .builder-product-card__media:empty,
.frontend-body .builder-category-card__media:empty{ aspect-ratio:4/3; }
.frontend-body .builder-gallery--empty,
.frontend-body .builder-image--empty{ display:none; }
/* product/service detail gallery with no image → branded panel, not blank */
.frontend-body .builder-product-gallery__main:empty{
  background:linear-gradient(150deg,var(--soft,#eef4ff),#e7f0ff); aspect-ratio:4/3; border-radius:var(--r-card,18px);
}

/* ---- Blog post grid: assert the 3-column Atlas grid + branded no-image
   placeholder (the base .builder-post-grid rule was not applying reliably). */
.frontend-body .builder-post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .frontend-body .builder-post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .frontend-body .builder-post-grid{ grid-template-columns:1fr; } }
.frontend-body .builder-post-card__noimage,
.frontend-body .builder-product-card__noimage,
.frontend-body .builder-category-card__noimage{
  background:linear-gradient(135deg,var(--soft,#eef4ff),#e7f0ff);
}

/* ==========================================================================
   PHASE 7 — QUOTE POPUP (product "Get a Quote"). A compact CTA card whose
   button opens the canonical inquiry form in a centered modal.
   ========================================================================== */
.frontend-body .builder-quote-cta{
  background:var(--soft-2,#eef4ff); border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  border-radius:18px; padding:22px; text-align:center;
}
.frontend-body .builder-quote-cta__heading{ font-size:18px; font-weight:800; margin:0 0 6px; color:var(--ink,#16202e); }
.frontend-body .builder-quote-cta__prompt{ color:var(--muted,#647082); font-size:14px; margin:0 0 16px; }
.frontend-body .builder-quote-cta__btn{ width:100%; }
.frontend-body .builder-quote-cta__btn .builder-icon{ display:inline-flex; }

/* modal */
.frontend-body .builder-quote-modal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(16,32,60,.55); backdrop-filter:blur(3px);
  animation:quoteFade .16s var(--ease,ease);
}
.frontend-body .builder-quote-modal[hidden]{ display:none; }
@keyframes quoteFade{ from{opacity:0} to{opacity:1} }
.frontend-body .builder-quote-modal__dialog{
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  background:var(--surface,#fff); border-radius:20px; box-shadow:0 30px 70px -20px rgba(16,32,60,.5);
  padding:8px;
}
.frontend-body .builder-quote-modal__dialog .builder-inquiry-form{
  box-shadow:none; border:none; margin:0;
}
.frontend-body .builder-quote-modal__close{
  position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface,#fff); color:var(--muted,#647082);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s;
}
.frontend-body .builder-quote-modal__close:hover{ border-color:var(--accent); color:var(--accent); }
body.has-quote-modal-open{ overflow:hidden; }
@media (max-width:560px){
  .frontend-body .builder-quote-modal{ padding:0; align-items:flex-end; }
  .frontend-body .builder-quote-modal__dialog{ max-width:none; max-height:94vh; border-radius:20px 20px 0 0; }
}

/* ==========================================================================
   PHASE 7 — FRONTEND ADMIN BAR: guarantee a dark bar with readable links
   (defensive — wins over any stale/overridden rule so "Edit this page" /
   "Log out" are never light-on-light). Not scoped to .frontend-body since
   the bar sits above it in the shell.
   ========================================================================== */
.oki-adminbar{ background:#111a26 !important; color:#e8edf3 !important; border-bottom:1px solid rgba(255,255,255,.08); }
.oki-adminbar__link{ color:#d3dbe6 !important; font-weight:600; }
.oki-adminbar__link:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
.oki-adminbar__link--edit{ color:#8fb4ff !important; font-weight:700; }
.oki-adminbar__brand{ color:#fff !important; }
.oki-adminbar__user{ color:#9aa6b4 !important; }

/* ==========================================================================
   PHASE 7 — product templates rebalanced for the compact quote CTA (Classic,
   Spec-sheet, Gallery). The quote is now a small "Get a Quote" card in the
   flow, not a full-height sidebar column, so no empty column is left behind.
   ========================================================================== */
/* shared actions block (inquiry cart + quote CTA stacked) */
.frontend-body .pd-classic__actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.frontend-body .pd-classic__actions .builder-add-to-inquiry{ width:100%; }

/* CLASSIC: gallery left, everything (info/specs/quote) in the right column */
.frontend-body .builder-pd--classic .pd-classic__media .builder-product-gallery__main{ border-radius:var(--r-card,18px); box-shadow:var(--elev-1); aspect-ratio:4/3; overflow:hidden; }
.frontend-body .builder-pd--classic .pd-classic__media .builder-product-gallery__main-img{ width:100%; height:100%; object-fit:cover; }
.frontend-body .builder-pd--classic .builder-product-hero__info,
.frontend-body .builder-pd--classic .pp-spec-grid{ margin-top:0; }
.frontend-body .builder-pd--classic .pp-spec-grid{ margin-top:16px; }

/* SPEC-SHEET: keep media tidy, quote CTA under info */
.frontend-body .builder-pd--specsheet .pd-specsheet__media .builder-product-gallery__main{ aspect-ratio:4/3; border-radius:var(--r-card,18px); overflow:hidden; box-shadow:var(--elev-1); }
.frontend-body .builder-pd--specsheet .pd-specsheet__media .builder-product-gallery__main-img{ width:100%; height:100%; object-fit:cover; }

/* GALLERY: big stage, info+specs left, a compact sticky quote card right */
.frontend-body .builder-pd--gallery .pd-gallery__aside{
  position:sticky; top:92px; background:var(--soft-2,#eef4ff);
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line)); border-radius:18px; padding:18px; margin-top:0;
}
.frontend-body .builder-pd--gallery .pd-gallery__cols{ align-items:start; }

/* the quote CTA card sits full-width and calm inside any of these columns */
.frontend-body .pd-classic__actions .builder-quote-cta{ margin-top:2px; }
@media (max-width:860px){
  .frontend-body .builder-pd--gallery .pd-gallery__aside{ position:static; }
}

/* ==========================================================================
   PHASE 7 — robust product media/tiles for products with no gallery image or
   no structured specs (the real catalogue), so Bento tiles never sit blank.
   ========================================================================== */
/* Empty product gallery → a branded gradient panel that fills the tile,
   instead of a blank white box (overrides the generic empty-image hide). */
.frontend-body .builder-product-gallery--empty{
  height:100%; min-height:300px; border-radius:var(--r-card,18px); overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 12%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    linear-gradient(150deg, var(--soft,#eef4ff), #dfeafb 55%, #eaf1fc);
  box-shadow:var(--elev-1);
}
.frontend-body .builder-product-gallery__placeholder{
  height:100%; min-height:inherit; display:flex; align-items:center; justify-content:center;
  padding:34px; text-align:center; position:relative;
}
.frontend-body .builder-product-gallery__placeholder::before{
  /* subtle watermark motif behind the title */
  content:"◪"; position:absolute; right:-14px; bottom:-24px; font-size:170px; line-height:1;
  color:#fff; opacity:.28;
}
.frontend-body .builder-product-gallery__ph-title{
  position:relative; font-family:"Manrope",var(--font-display,Archivo),system-ui,sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.12; text-wrap:balance;
  font-size:clamp(22px,3.2vw,34px);
  color:color-mix(in srgb,var(--accent-d,#1c49c9) 78%, #223); max-width:16ch;
}
.frontend-body .builder-product-gallery__ph-mark{ position:relative; font-size:70px; color:color-mix(in srgb,var(--accent) 45%,#9db3d6); opacity:.55; }
/* Bento gallery tile has no inner card padding around the placeholder */
.frontend-body .builder-pd--bento .pd-bento__gallery{ padding:0; overflow:hidden; }
.frontend-body .builder-pd--bento .pd-bento__gallery .builder-product-gallery,
.frontend-body .builder-pd--bento .pd-bento__gallery .builder-product-gallery--empty{ height:100%; border-radius:var(--r-card,18px); }
.frontend-body .builder-pd--bento .pd-bento__gallery .builder-product-gallery__main{ height:100%; }
.frontend-body .builder-pd--bento .pd-bento__gallery .builder-product-gallery__main-img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   PHASE 7 — product VIEW COUNTER (real PageView totals). A badge on the card
   media and a small line on the product detail page.
   ========================================================================== */
.frontend-body .builder-product-card__media{ position:relative; }
.frontend-body .builder-product-card__views{
  position:absolute; left:10px; bottom:10px; z-index:2;
  background:rgba(16,32,60,.72); color:#fff; border-radius:999px;
  padding:4px 10px; font-size:11.5px; font-weight:700; line-height:1;
  display:inline-flex; gap:6px; align-items:center; backdrop-filter:blur(4px);
}
.frontend-body .builder-product-hero__views{
  display:inline-flex; gap:7px; align-items:center; margin:6px 0 0;
  color:var(--muted,#647082); font-size:13.5px; font-weight:700;
}
/* list view: badge sits on the small square media, keep it readable */
.frontend-body .builder-product-grid[data-view="list"] .builder-product-card__views{ left:8px; bottom:8px; font-size:11px; }

/* ---- Shop List view: media fills the full card height (no white gap under
   a no-image product); grid/compact unaffected. ---- */
.frontend-body .builder-product-grid[data-view="list"] .builder-product-card__media{ height:100%; }
.frontend-body .builder-product-grid[data-view="list"] .builder-product-card__noimage{
  height:100%; aspect-ratio:auto; min-height:160px;
  background:linear-gradient(135deg,var(--soft,#eef4ff),#e2ecfb);
}

/* =====================================================================
   PHASE 7 — Taxonomy directory (/browse) + generic term archive.
   Atlas look: airy hero, sticky pill jump-nav, soft rounded term cards
   with an icon chip, name and live product count. Token-driven so it
   inherits the active theme; every value has a literal fallback.
   ===================================================================== */
.frontend-body .tax-page{ background:var(--surface,#fff); }

.frontend-body .tax-hero{
  background:linear-gradient(180deg,var(--soft,#eef4ff),var(--surface,#fff) 82%);
  border-bottom:1px solid var(--line,#e7ebf1);
  padding:44px 0 34px;
}
.frontend-body .tax-hero__eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  font-size:12px; color:var(--accent,#285ff2); margin-bottom:10px;
}
.frontend-body .tax-hero h1{
  font-family:var(--font-display,inherit); font-size:clamp(28px,3.8vw,42px);
  line-height:1.08; margin:0 0 10px; text-wrap:balance; color:var(--ink,#16233a);
}
.frontend-body .tax-hero p{ color:var(--muted,#647082); max-width:64ch; margin:0; font-size:16px; line-height:1.6; }
.frontend-body .tax-hero__meta{
  margin-top:14px; font-size:13px; font-weight:700; color:var(--muted,#647082);
  letter-spacing:.01em;
}

/* sticky pill jump-nav */
.frontend-body .tax-navwrap{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--surface,#fff) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line,#e7ebf1);
}
.frontend-body .tax-tabs{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 0; }
.frontend-body .tax-tab{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line,#e7ebf1); background:var(--surface,#fff);
  border-radius:var(--r-pill,999px); padding:8px 15px;
  font-weight:700; font-size:13.5px; color:var(--ink,#2b3a4d); text-decoration:none;
  transition:border-color .15s var(--ease,ease), color .15s var(--ease,ease), background .15s var(--ease,ease);
}
.frontend-body .tax-tab:hover{ border-color:var(--accent,#285ff2); color:var(--accent,#285ff2); }
.frontend-body .tax-tab__c{
  font-weight:800; font-size:12px; color:var(--muted,#8a95a6);
  background:var(--soft,#eef4ff); border-radius:999px; padding:1px 8px;
}

.frontend-body .tax-body{ padding:34px 0 56px; display:flex; flex-direction:column; gap:44px; }
.frontend-body .tax-sec{ scroll-margin-top:72px; }
.frontend-body .tax-sec__head{ display:flex; align-items:baseline; gap:12px; margin:0 0 4px; }
.frontend-body .tax-sec__head h2{
  font-family:var(--font-display,inherit); font-size:clamp(20px,2.4vw,26px);
  margin:0; color:var(--ink,#16233a);
}
.frontend-body .tax-sec__count{ font-size:13px; font-weight:700; color:var(--muted,#8a95a6); }
.frontend-body .tax-sec__desc{ color:var(--muted,#647082); margin:6px 0 0; max-width:70ch; font-size:14.5px; }

/* term card grid */
.frontend-body .tax-grid{
  margin-top:18px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.frontend-body .tax-term{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface,#fff); border:1px solid var(--line,#e7ebf1);
  border-radius:var(--r-card,14px); padding:15px 16px;
  box-shadow:var(--elev-1,0 1px 2px rgba(16,32,60,.05));
  transition:border-color .15s var(--ease,ease), box-shadow .18s var(--ease,ease), transform .18s var(--ease,ease);
}
.frontend-body .tax-term:hover{
  border-color:var(--accent,#285ff2);
  box-shadow:var(--elev-2,0 12px 28px -18px rgba(16,32,60,.28));
  transform:translateY(-2px);
}
.frontend-body .tax-term__ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--soft,#eef4ff),var(--soft-2,#e2ecfb));
  color:var(--accent,#285ff2);
}
.frontend-body .tax-term__ic svg{ width:22px; height:22px; }
.frontend-body .tax-term__b{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.frontend-body .tax-term__name{
  font-weight:700; font-size:15px; color:var(--ink,#1d2a3d); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frontend-body .tax-term__c{ font-size:12.5px; font-weight:600; color:var(--muted,#8a95a6); }
.frontend-body .tax-term__go{
  flex:0 0 auto; color:var(--muted,#b3bccb); font-weight:800; font-size:16px;
  transition:color .15s var(--ease,ease), transform .15s var(--ease,ease);
}
.frontend-body .tax-term:hover .tax-term__go{ color:var(--accent,#285ff2); transform:translateX(3px); }

@media (max-width:640px){
  .frontend-body .tax-grid{ grid-template-columns:1fr; }
  .frontend-body .tax-hero{ padding:34px 0 26px; }
}

/* =====================================================================
   PHASE 7 — selectable Atlas layout variants for Shop / Category / Search
   (applied from the Templates screen). Each is a real, distinct layout of
   the same data — token-driven with literal fallbacks.
   ===================================================================== */

/* Shop 'topbar' variant — horizontal category pill bar above the grid */
.frontend-body .shop-pillbar{
  display:flex; gap:8px; overflow-x:auto; padding:4px 2px 14px; margin:0 0 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  border-bottom:1px solid var(--line,#e7ebf1);
}
.frontend-body .shop-pillbar__pill{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line,#e7ebf1); background:var(--surface,#fff);
  border-radius:var(--r-pill,999px); padding:8px 14px;
  font-weight:700; font-size:13px; color:var(--ink,#2b3a4d); text-decoration:none;
  white-space:nowrap; transition:border-color .15s var(--ease,ease), color .15s var(--ease,ease), background .15s var(--ease,ease);
}
.frontend-body .shop-pillbar__pill:hover{ border-color:var(--accent,#285ff2); color:var(--accent,#285ff2); }
.frontend-body .shop-pillbar__pill.is-active{ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); color:#fff; }
.frontend-body .shop-pillbar__pill .c{
  font-weight:800; font-size:11.5px; color:var(--muted,#8a95a6);
  background:var(--soft,#eef4ff); border-radius:999px; padding:1px 7px;
}
.frontend-body .shop-pillbar__pill.is-active .c{ color:#dbe7ff; background:rgba(255,255,255,.16); }

/* Category 'hero' variant — tinted banner carrying the title + description */
.frontend-body .cat-hero{
  background:linear-gradient(135deg,var(--soft,#eef4ff),var(--soft-2,#e2ecfb));
  border-bottom:1px solid var(--line,#e7ebf1);
  padding:40px 0 34px; margin-bottom:8px;
}
.frontend-body .cat-hero .builder-breadcrumb{ margin-bottom:10px; }
.frontend-body .cat-hero__title{
  font-family:var(--font-display,inherit); font-size:clamp(28px,3.6vw,40px);
  line-height:1.08; margin:0 0 8px; text-wrap:balance; color:var(--ink,#16233a);
}
.frontend-body .cat-hero__desc{ color:var(--muted,#4c5a6e); max-width:66ch; margin:0; font-size:16px; line-height:1.6; }

/* Search variants — result count + list vs. card grid */
.frontend-body .builder-search-results__count{
  color:var(--muted,#647082); font-weight:700; font-size:14px; margin:0 0 16px;
}
.frontend-body .builder-search-results--cards{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.frontend-body .builder-search-results--list{ display:flex; flex-direction:column; gap:12px; }
.frontend-body .builder-search-results--list .builder-product-card{
  display:grid; grid-template-columns:180px 1fr; align-items:stretch;
}
.frontend-body .builder-search-results--list .builder-product-card__media{ height:100%; min-height:140px; }
@media (max-width:640px){
  .frontend-body .builder-search-results--list .builder-product-card{ grid-template-columns:1fr; }
}

/* =====================================================================
   PHASE 7 — ATLAS HOMEPAGE (approved design). Scoped to .frontend-body so
   it only restyles the homepage sections. Uses the site theme tokens with
   literal fallbacks; always-light by design intent for the business site.
   ===================================================================== */
.frontend-body .home-atlas{ --ha-ink:#101a2b; --ha-mut:#6b7688; --ha-line:#e8edf3; --ha-accent:var(--accent,#285ff2); --ha-soft:#eaf1ff; --ha-soft2:#f5f8ff; --ha-navy:#0f1d3a; --ha-navy2:#1c3f7a; }

/* --- section vertical rhythm (the approved mockup's `section{padding:...}`) ---
   Every Atlas content section gets a consistent, fluid top/bottom rhythm so the
   page breathes the same way the mockup does. The stats band and CTA band tuck
   up under the section above them (mockup used `padding-top:0` on both), which
   `:has()` reproduces without needing a per-section marker class. */
.frontend-body .builder-section.home-atlas{ padding:clamp(46px,7vw,76px) 0; }
.frontend-body .builder-section.home-atlas:has(.ha-statsband){ padding-top:0; }
.frontend-body .builder-section.home-atlas:has(.ha-ctaband){ padding-top:clamp(8px,1.5vw,14px); }

/* hero */
.frontend-body .ha-hero{ position:relative; overflow:hidden; }
.frontend-body .ha-hero::before{ content:""; position:absolute; top:-140px; right:-100px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,#f5f8ff,transparent 68%); pointer-events:none; }
.frontend-body .ha-hero__grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:clamp(48px,6.5vw,80px) 0 clamp(52px,7vw,88px); }
.frontend-body .ha-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent,#285ff2); display:block; margin-bottom:22px; }
.frontend-body .ha-hero h1{ font-size:clamp(32px,7.4vw,74px); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0; color:#101a2b; }
.frontend-body .ha-hero h1 em{ font-style:normal; color:var(--accent,#285ff2); }
.frontend-body .ha-hero__sub{ font-size:clamp(16px,2.2vw,19px); color:#6b7688; max-width:44ch; margin:24px 0 30px; line-height:1.55; }
.frontend-body .ha-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.frontend-body .ha-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:15px; padding:13px 26px; border-radius:999px; border:1.5px solid #e8edf3; background:#fff; color:#101a2b; cursor:pointer; transition:.18s; white-space:nowrap; text-decoration:none; }
.frontend-body .ha-btn:hover{ border-color:var(--accent,#285ff2); color:var(--accent,#285ff2); transform:translateY(-1px); }
.frontend-body .ha-btn--pri{ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); color:#fff; box-shadow:0 10px 22px -8px rgba(40,95,242,.5); }
.frontend-body .ha-btn--pri:hover{ background:var(--accent-d,#1c49c9); color:#fff; }
.frontend-body .ha-hstats{ display:flex; gap:clamp(24px,5vw,52px); margin-top:44px; flex-wrap:wrap; }
.frontend-body .ha-hstats b{ display:block; font-size:clamp(24px,5vw,34px); font-weight:800; letter-spacing:-.02em; color:#101a2b; }
.frontend-body .ha-hstats span{ font-size:13.5px; color:#6b7688; font-weight:600; }
.frontend-body .ha-card{ background:#fff; border:1px solid #e8edf3; border-radius:24px; box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.22); padding:40px 36px; }
.frontend-body .ha-gauge{ width:170px; height:170px; margin:2px auto 22px; }
.frontend-body .ha-gauge svg{ transform:rotate(-90deg); }
.frontend-body .ha-gauge__track{ stroke:#eaf1ff; }
.frontend-body .ha-gauge__arc{ stroke:var(--accent,#285ff2); }
.frontend-body .ha-card h3{ font-size:21px; text-align:center; margin:0 0 6px; font-weight:800; color:#101a2b; }
.frontend-body .ha-card__cap{ text-align:center; color:#6b7688; font-size:14.5px; margin:0 0 18px; }
.frontend-body .ha-spec{ display:flex; justify-content:space-between; align-items:center; padding:15px 2px; border-top:1px solid #e8edf3; }
.frontend-body .ha-spec .k{ color:#6b7688; font-size:15px; } .frontend-body .ha-spec .v{ font-weight:800; font-size:15px; color:#101a2b; }

/* section heads */
.frontend-body .ha-sh{ text-align:center; max-width:52ch; margin:0 auto clamp(30px,5vw,46px); }
.frontend-body .ha-sh h2{ font-size:clamp(26px,5.4vw,50px); margin:12px 0 14px; letter-spacing:-.03em; font-weight:800; color:#101a2b; }
.frontend-body .ha-sh p{ color:#6b7688; margin:0; font-size:clamp(15px,2vw,17px); line-height:1.5; }

/* category cards — left aligned */
.frontend-body .ha-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.frontend-body .ha-cat{ background:#fff; border:1px solid #e8edf3; border-radius:18px; box-shadow:0 1px 2px rgba(16,32,60,.04),0 10px 26px -16px rgba(16,32,60,.14); padding:26px; transition:.18s; text-decoration:none; display:block; }
.frontend-body .ha-cat:hover{ transform:translateY(-5px); box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.22); border-color:color-mix(in srgb,var(--accent,#285ff2) 30%,#e8edf3); }
.frontend-body .ha-cat__ic{ width:58px; height:58px; border-radius:15px; background:#eaf1ff; color:var(--accent,#285ff2); display:grid; place-items:center; margin-bottom:22px; transition:.2s; }
.frontend-body .ha-cat__ic svg{ width:26px; height:26px; } .frontend-body .ha-cat:hover .ha-cat__ic{ background:var(--accent,#285ff2); color:#fff; }
.frontend-body .ha-cat h4{ font-size:18px; margin:0 0 6px; font-weight:800; color:#101a2b; } .frontend-body .ha-cat small{ color:#6b7688; font-weight:600; font-size:13.5px; }

/* featured product cards */
.frontend-body .ha-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.frontend-body .ha-pcard{ background:#fff; border:1px solid #e8edf3; border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(16,32,60,.04),0 10px 26px -16px rgba(16,32,60,.14); transition:.18s; display:flex; flex-direction:column; }
.frontend-body .ha-pcard:hover{ transform:translateY(-5px); box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.22); }
.frontend-body .ha-pmedia{ aspect-ratio:16/10; background:linear-gradient(150deg,#f5f8ff,#eaf1ff); display:grid; place-items:center; position:relative; color:#9db8ee; overflow:hidden; }
.frontend-body .ha-pmedia img{ width:100%; height:100%; object-fit:cover; }
.frontend-body .ha-pmedia svg{ width:56px; height:56px; }
.frontend-body .ha-ptag{ position:absolute; top:16px; left:16px; background:#fff; color:var(--accent,#285ff2); font-size:12.5px; font-weight:700; padding:5px 13px; border-radius:999px; box-shadow:0 1px 2px rgba(16,32,60,.04),0 10px 26px -16px rgba(16,32,60,.14); }
.frontend-body .ha-pbody{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.frontend-body .ha-pbody h4{ font-size:20px; letter-spacing:-.02em; margin:0; font-weight:800; color:#101a2b; }
.frontend-body .ha-specs{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none; }
.frontend-body .ha-specs li{ display:inline-flex; align-items:center; gap:7px; color:#28374d; font-size:14.5px; font-weight:500; }
.frontend-body .ha-specs li::before{ content:"✓"; color:#12a06a; font-weight:800; }
.frontend-body .ha-pbtns{ display:flex; gap:12px; margin-top:auto; padding-top:4px; }
.frontend-body .ha-pbtns .ha-btn{ flex:1; }

/* stats band — dark navy */
.frontend-body .ha-statsband{ background:linear-gradient(110deg,#0f1d3a,#1c3f7a); border-radius:22px; padding:40px 20px; display:grid; grid-template-columns:repeat(4,1fr); color:#fff; box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.22); }
.frontend-body .ha-statsband > div{ padding:0 34px; } .frontend-body .ha-statsband > div:not(:first-child){ border-left:1px solid rgba(255,255,255,.16); }
.frontend-body .ha-statsband b{ display:block; font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }
.frontend-body .ha-statsband span{ color:#aeb9d0; font-size:clamp(13px,1.6vw,15px); font-weight:600; margin-top:8px; display:block; }

/* cta band — light */
.frontend-body .ha-ctaband{ background:#f5f8ff; border:1px solid #e8edf3; border-radius:24px; padding:64px 40px; text-align:center; }
.frontend-body .ha-ctaband h2{ font-size:clamp(24px,5vw,44px); margin:14px auto; max-width:20ch; letter-spacing:-.03em; font-weight:800; color:#101a2b; }
.frontend-body .ha-ctaband p{ color:#6b7688; max-width:46ch; margin:0 auto 30px; font-size:clamp(15px,2vw,17px); }
.frontend-body .ha-ctaband .ha-cta{ justify-content:center; }

@media(max-width:960px){
  .frontend-body .ha-hero__grid{ grid-template-columns:1fr; gap:40px; }
  .frontend-body .ha-cats,.frontend-body .ha-prods{ grid-template-columns:repeat(2,1fr); }
  .frontend-body .ha-statsband{ grid-template-columns:repeat(2,1fr); gap:30px 0; } .frontend-body .ha-statsband > div:nth-child(3){ border-left:0; }
}
@media(max-width:560px){
  .frontend-body .builder-section.home-atlas{ padding:clamp(34px,9vw,50px) 0; }
  .frontend-body .ha-hero__grid{ padding:clamp(28px,8vw,44px) 0 clamp(34px,9vw,50px); }
  .frontend-body .ha-cats,.frontend-body .ha-prods{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .frontend-body .ha-cat{ padding:16px; } .frontend-body .ha-cat__ic{ width:46px; height:46px; margin-bottom:12px; } .frontend-body .ha-cat h4{ font-size:14.5px; }
  .frontend-body .ha-pbody{ padding:14px 14px 16px; } .frontend-body .ha-pbody h4{ font-size:15.5px; } .frontend-body .ha-pbtns{ flex-direction:column; gap:8px; }
  .frontend-body .ha-statsband{ grid-template-columns:repeat(2,1fr); padding:28px 6px; } .frontend-body .ha-statsband > div{ padding:0 16px; }
  .frontend-body .ha-ctaband{ padding:38px 20px; }
}
@media(max-width:360px){ .frontend-body .ha-cats,.frontend-body .ha-prods{ grid-template-columns:1fr; } }

/* ===== Atlas CONTACT page (shares the homepage tokens/theme) ============== */
.frontend-body .ca-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#f5f8ff,transparent 70%); }
.frontend-body .ca-hero::before{ content:""; position:absolute; top:-160px; right:-120px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,#eaf1ff,transparent 66%); pointer-events:none; }
.frontend-body .ca-hero__head{ position:relative; max-width:58ch; }
.frontend-body .ca-hero h1{ font-size:clamp(30px,6vw,58px); line-height:1.04; letter-spacing:-.035em; font-weight:800; margin:14px 0 0; color:#101a2b; }
.frontend-body .ca-hero h1 em{ font-style:normal; color:var(--accent,#285ff2); }
.frontend-body .ca-hero__sub{ font-size:clamp(16px,2.2vw,19px); color:#6b7688; max-width:52ch; margin:20px 0 0; line-height:1.55; }
.frontend-body .ca-info{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(30px,5vw,46px); }
.frontend-body .ca-info__card{ background:#fff; border:1px solid #e8edf3; border-radius:18px; box-shadow:0 1px 2px rgba(16,32,60,.04),0 10px 26px -16px rgba(16,32,60,.14); padding:24px 22px; display:flex; flex-direction:column; gap:6px; text-decoration:none; transition:.18s; }
.frontend-body a.ca-info__card:hover{ transform:translateY(-5px); box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.22); border-color:color-mix(in srgb,var(--accent,#285ff2) 30%,#e8edf3); }
.frontend-body .ca-ic{ width:50px; height:50px; border-radius:14px; background:#eaf1ff; color:var(--accent,#285ff2); display:grid; place-items:center; margin-bottom:10px; flex:none; }
.frontend-body .ca-ic svg{ width:24px; height:24px; }
.frontend-body .ca-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.frontend-body .ca-k{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8a95a6; }
/* break long emails, but keep the whole value readable (no mid-number breaks
   from the old word-break:break-word) and shrink the label to fit narrow cards */
.frontend-body .ca-v{ font-size:15.5px; font-weight:800; color:#101a2b; overflow-wrap:anywhere; line-height:1.35; }

.frontend-body .ca-body{ }
.frontend-body .ca-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start; }
.frontend-body .ca-side h2{ font-size:clamp(22px,3.4vw,34px); letter-spacing:-.03em; font-weight:800; color:#101a2b; margin:12px 0 24px; line-height:1.12; }
.frontend-body .ca-steps{ display:flex; flex-direction:column; gap:18px; }
.frontend-body .ca-step{ display:flex; gap:16px; align-items:flex-start; }
.frontend-body .ca-step__n{ flex:none; width:38px; height:38px; border-radius:12px; background:var(--accent,#285ff2); color:#fff; font-weight:800; display:grid; place-items:center; box-shadow:0 10px 22px -10px rgba(40,95,242,.6); }
.frontend-body .ca-step h4{ font-size:17px; font-weight:800; color:#101a2b; margin:4px 0 4px; }
.frontend-body .ca-step p{ color:#6b7688; font-size:14.5px; line-height:1.55; margin:0; }

/* the real inquiry form, wrapped in a white Atlas card */
.frontend-body .ca-formcard{ background:#fff; border:1px solid #e8edf3; border-radius:24px; box-shadow:0 2px 6px rgba(16,32,60,.05),0 30px 60px -24px rgba(16,32,60,.18); padding:clamp(24px,3vw,38px); }
.frontend-body .ca-formcard .builder-inquiry-form h3{ font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.02em; color:#101a2b; margin:0 0 6px; }
.frontend-body .ca-formcard .builder-inquiry-form__sub{ color:#6b7688; margin:0 0 20px; font-size:15px; }
.frontend-body .ca-formcard .builder-inquiry-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* block labels so the label text and the required * stay on ONE line, with the
   field on the line below (flex-column had put the * and the field on their own
   separate rows). */
.frontend-body .ca-formcard .builder-inquiry-form label{ display:block; font-size:13.5px; font-weight:700; color:#2b3a4d; margin:0 0 16px; }
.frontend-body .ca-formcard .builder-inquiry-form__grid label{ margin:0; }
.frontend-body .ca-formcard .builder-inquiry-form label > input,
.frontend-body .ca-formcard .builder-inquiry-form label > select,
.frontend-body .ca-formcard .builder-inquiry-form label > textarea{ display:block; margin-top:8px; }
.frontend-body .ca-formcard .builder-inquiry-form .req{ color:var(--accent,#285ff2); margin-left:2px; }
.frontend-body .ca-formcard .builder-inquiry-form input[type=text],
.frontend-body .ca-formcard .builder-inquiry-form input[type=email],
.frontend-body .ca-formcard .builder-inquiry-form select,
.frontend-body .ca-formcard .builder-inquiry-form textarea{ width:100%; font:inherit; font-weight:500; font-size:15px; color:#101a2b; background:#f7f9fc; border:1.5px solid #e8edf3; border-radius:12px; padding:12px 14px; transition:.16s; }
.frontend-body .ca-formcard .builder-inquiry-form input:focus,
.frontend-body .ca-formcard .builder-inquiry-form select:focus,
.frontend-body .ca-formcard .builder-inquiry-form textarea:focus{ outline:none; border-color:var(--accent,#285ff2); background:#fff; box-shadow:0 0 0 4px rgba(40,95,242,.12); }
.frontend-body .ca-formcard .builder-inquiry-form textarea{ resize:vertical; min-height:120px; }
/* "Preferred contact" is a segmented BUTTON toggle — no radio dot, no shadow.
   The native radio is hidden; each option is a plain pill button that fills
   solid accent when selected (still real radios underneath for accessibility). */
.frontend-body .ca-formcard .builder-inquiry-form__contact-method{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 22px; }
.frontend-body .ca-formcard .builder-inquiry-form__contact-method-label{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a95a6; margin-right:4px; }
.frontend-body .ca-formcard .builder-inquiry-form__contact-method label{
  display:inline-flex; align-items:center; justify-content:center; margin:0; cursor:pointer; user-select:none;
  padding:9px 20px; border:1.5px solid #e8edf3; border-radius:999px; background:#fff;
  font-weight:700; font-size:14px; color:#2b3a4d; transition:.16s;
}
.frontend-body .ca-formcard .builder-inquiry-form__contact-method label:hover{ border-color:color-mix(in srgb,var(--accent,#285ff2) 45%,#e8edf3); color:var(--accent,#285ff2); }
.frontend-body .ca-formcard .builder-inquiry-form__contact-method label > input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.frontend-body .ca-formcard .builder-inquiry-form__contact-method label:has(input:checked){ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); color:#fff; }
.frontend-body .ca-formcard .builder-inquiry-form__contact-method label:focus-within{ outline:2px solid color-mix(in srgb,var(--accent,#285ff2) 45%,transparent); outline-offset:2px; }
.frontend-body .ca-formcard .builder-inquiry-form__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.frontend-body .ca-formcard .builder-inquiry-form__actions .btn,
.frontend-body .ca-formcard .builder-inquiry-form__actions a{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:15px; padding:13px 26px; border-radius:999px; border:1.5px solid #e8edf3; background:#fff; color:#101a2b; cursor:pointer; transition:.18s; white-space:nowrap; text-decoration:none; }
.frontend-body .ca-formcard .builder-inquiry-form__actions .btn.primary{ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); color:#fff; box-shadow:0 10px 22px -8px rgba(40,95,242,.5); }
.frontend-body .ca-formcard .builder-inquiry-form__actions .btn.primary:hover{ background:var(--accent-d,#1c49c9); }
.frontend-body .ca-formcard .builder-inquiry-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media(max-width:860px){
  .frontend-body .ca-grid{ grid-template-columns:1fr; gap:32px; }
  .frontend-body .ca-info{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
  /* one card per row, laid out horizontally (icon left, label+value right) so
     long phone numbers and emails get the full width and never break mid-token */
  .frontend-body .ca-info{ grid-template-columns:1fr; gap:10px; }
  .frontend-body .ca-info__card{ flex-direction:row; align-items:center; gap:14px; padding:15px 16px; }
  .frontend-body .ca-ic{ width:44px; height:44px; margin-bottom:0; }
  .frontend-body .ca-formcard .builder-inquiry-form__grid{ grid-template-columns:1fr; }
}

/* ===== selectable layout variants (Templates screen) ===================== */
/* Homepage — "Centered Hero" */
.frontend-body .ha-hero--centered .ha-hero__center{ position:relative; text-align:center; max-width:60ch; margin:0 auto; padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,64px); }
.frontend-body .ha-hero--centered .ha-hero__sub{ margin-left:auto; margin-right:auto; }
.frontend-body .ha-hero--centered .ha-cta{ justify-content:center; }
.frontend-body .ha-hero--centered .ha-hstats{ justify-content:center; }
/* Contact — "Centered Form" */
.frontend-body .ca-body--centered .ca-formcard{ max-width:720px; margin:0 auto; }

/* ===== Master Shop Layout (Templates ▸ Shop ▸ Master) — V.157 ===== */
.frontend-body .shop-master{ display:grid; grid-template-columns:290px 1fr; gap:26px; align-items:start; }
/* sidebar on the RIGHT — swap column order + put the aside second */
.frontend-body .shop-master[data-sidebar="right"]{ grid-template-columns:1fr 290px; }
.frontend-body .shop-master[data-sidebar="right"] .sm-side{ order:2; }
.frontend-body .sm-side{ display:flex; flex-direction:column; gap:16px; }
.frontend-body .sm-side--sticky{ position:sticky; top:88px; }
/* mobile filter toggle + mobile sticky CTA — hidden on desktop */
.frontend-body .sm-filtbar{ display:none; }
.frontend-body .sm-mobilecta{ display:none; }

/* Bento product layout — mosaic of the real product cards */
.frontend-body .sm-bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:16px; }
.frontend-body .sm-bento__cell{ display:flex; min-width:0; }
.frontend-body .sm-bento__cell > .builder-product-card{ width:100%; height:100%; }
.frontend-body .sm-bento__cell--lg{ grid-column:span 2; grid-row:span 2; }
.frontend-body .sm-bento__cell--wide{ grid-column:span 2; }
/* let the card fill its bento cell (media grows, body sits at the base) */
.frontend-body .sm-bento .builder-product-card{ display:flex; flex-direction:column; }
.frontend-body .sm-bento .builder-product-card__media,
.frontend-body .sm-bento .builder-product-card__noimage,
.frontend-body .sm-bento .builder-product-card figure,
.frontend-body .sm-bento .builder-product-card .builder-product-card__image{ flex:1 1 auto; min-height:120px; }
@media(max-width:900px){
  .frontend-body .sm-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:190px; }
  .frontend-body .sm-bento__cell--lg{ grid-column:span 2; grid-row:span 2; }
  .frontend-body .sm-bento__cell--wide{ grid-column:span 2; }
}
@media(max-width:560px){
  .frontend-body .sm-bento{ grid-auto-rows:168px; gap:11px; }
  .frontend-body .sm-bento__cell--lg{ grid-column:span 2; grid-row:span 1; }
}
.frontend-body .sm-panel{ background:#fff; border:1px solid #e8edf3; border-radius:16px; box-shadow:0 1px 2px rgba(16,32,60,.04),0 10px 26px -16px rgba(16,32,60,.14); padding:18px; }
.frontend-body .sm-h{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#8a95a6; margin:0 0 12px; font-weight:800; }
/* sidebar search */
.frontend-body .sm-search{ display:flex; align-items:center; gap:9px; background:#f5f7fb; border:1.5px solid #e8edf3; border-radius:999px; padding:10px 15px; position:relative; }
.frontend-body .sm-search__ic{ color:#8a95a6; display:inline-flex; } .frontend-body .sm-search__ic svg{ width:16px; height:16px; }
.frontend-body .sm-search input{ border:0; background:transparent; font:inherit; font-size:14px; color:#101a2b; width:100%; outline:none; }
/* taxonomy nav — list */
.frontend-body .sm-navlist{ display:flex; flex-direction:column; gap:2px; }
.frontend-body .sm-navlink{ display:flex; justify-content:space-between; align-items:center; padding:9px 11px; border-radius:9px; font-weight:600; font-size:14.5px; color:#2b3a4d; text-decoration:none; }
.frontend-body .sm-navlink .n{ color:#8a95a6; font-size:12.5px; font-weight:700; }
.frontend-body .sm-navlink:hover{ background:#f5f8ff; color:var(--accent,#285ff2); }
.frontend-body .sm-navlink.on{ background:#eaf1ff; color:var(--accent,#285ff2); font-weight:800; }
/* taxonomy nav — chips */
.frontend-body .sm-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.frontend-body .sm-chip{ border:1.5px solid #e8edf3; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; color:#2b3a4d; text-decoration:none; }
.frontend-body .sm-chip:hover{ border-color:color-mix(in srgb,var(--accent,#285ff2) 40%,#e8edf3); color:var(--accent,#285ff2); }
.frontend-body .sm-chip.on{ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); color:#fff; }
.frontend-body .sm-chips--main .sm-chip--lg{ padding:9px 16px; font-size:14px; } .frontend-body .sm-chip--lg b{ color:var(--accent,#285ff2); margin-left:4px; } .frontend-body .sm-chip--lg.on b,.frontend-body .sm-chip--lg:hover b{ color:inherit; }
/* taxonomy nav — cards */
.frontend-body .sm-navcards{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.frontend-body .sm-navcard{ display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid #e8edf3; border-radius:12px; text-decoration:none; color:#101a2b; }
.frontend-body .sm-navcard__ic{ color:var(--accent,#285ff2); } .frontend-body .sm-navcard__ic svg{ width:20px; height:20px; }
.frontend-body .sm-navcard__t{ font-weight:700; font-size:13.5px; } .frontend-body .sm-navcard__n{ color:#8a95a6; font-size:12px; font-weight:700; }
.frontend-body .sm-navcard:hover,.frontend-body .sm-navcard.on{ border-color:var(--accent,#285ff2); background:#f5f8ff; }
/* CTA card */
.frontend-body .sm-cta{ background:linear-gradient(160deg,#0f1d3a,#1c3f7a); border:0; color:#fff; }
.frontend-body .sm-cta h4{ color:#c7d3ec; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; font-weight:800; }
.frontend-body .sm-cta p{ color:#aeb9d0; font-size:13.5px; line-height:1.55; margin:0 0 14px; }
.frontend-body .sm-btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; font-weight:700; font-size:14px; padding:11px 16px; border-radius:999px; border:1.5px solid transparent; text-decoration:none; }
.frontend-body .sm-btn--pri{ background:#fff; color:#0f1d3a; }
/* main content */
.frontend-body .sm-blocktitle{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a95a6; margin:18px 0 12px; display:flex; align-items:center; gap:12px; }
.frontend-body .sm-blocktitle::after{ content:""; flex:1; height:1px; background:#e8edf3; }
.frontend-body .sm-blocktitle--mt{ margin-top:30px; }
.frontend-body .sm-cats{ grid-template-columns:repeat(3,1fr); }
.frontend-body .sm-cats[data-cols="2"]{ grid-template-columns:repeat(2,1fr); }
.frontend-body .sm-cats[data-cols="4"]{ grid-template-columns:repeat(4,1fr); }
.frontend-body .sm-mainlist{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.frontend-body .sm-mainrow{ display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid #e8edf3; border-radius:12px; text-decoration:none; color:#101a2b; }
.frontend-body .sm-mainrow__ic{ width:34px; height:34px; border-radius:9px; background:#eaf1ff; color:var(--accent,#285ff2); display:grid; place-items:center; flex:none; } .frontend-body .sm-mainrow__ic svg{ width:18px; height:18px; }
.frontend-body .sm-mainrow__t{ font-weight:700; font-size:15px; flex:1; } .frontend-body .sm-mainrow__n{ color:#8a95a6; font-size:12.5px; font-weight:700; }
.frontend-body .sm-mainrow:hover{ border-color:var(--accent,#285ff2); background:#f5f8ff; }
@media(max-width:900px){
  /* single column; the sidebar COLLAPSES behind the "Filters" button and the
     grids drop to 2-up. */
  .frontend-body .shop-master,
  .frontend-body .shop-master[data-sidebar="right"]{ grid-template-columns:1fr; }
  .frontend-body .shop-master[data-sidebar="right"] .sm-side{ order:0; }
  .frontend-body .sm-filtbar{ display:flex; margin-bottom:14px; }
  .frontend-body .sm-filtbtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:15px; padding:13px 20px; border-radius:999px; border:1.5px solid var(--accent,#285ff2); background:var(--accent,#285ff2); color:#fff; cursor:pointer; box-shadow:0 10px 22px -8px rgba(40,95,242,.5); }
  .frontend-body .sm-side{ display:none; position:static !important; order:-1; margin-bottom:6px; }
  .frontend-body .shop-master.sm-open .sm-side{ display:flex; }
  /* sticky bottom CTA on mobile — always reachable, even with the sidebar
     collapsed (acts like a floating quote button). */
  .frontend-body .sm-mobilecta{ display:flex; align-items:center; justify-content:center; position:fixed; left:12px; right:12px; bottom:12px; z-index:70; padding:15px 20px; border-radius:999px; background:var(--accent,#285ff2); color:#fff; font-weight:800; font-size:15px; text-decoration:none; box-shadow:0 16px 40px -14px rgba(40,95,242,.7); }
  .frontend-body .sm-main{ padding-bottom:64px; } /* clearance for the fixed CTA */
  .frontend-body .ha-cats.sm-cats{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .frontend-body .sm-mainlist,.frontend-body .sm-navcards{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .frontend-body .ha-cats.sm-cats,.frontend-body .sm-mainlist{ grid-template-columns:repeat(2,1fr); }
}

/* PHASE 7 — Sub-category Pills (any taxonomy term page): a small icon-pill row
   of the current term's children, above the products. Wraps on desktop,
   swipes as one row on mobile. Fluid text so it scales cleanly. */
.frontend-body .subcat{ margin:2px 0 clamp(14px,2.4vw,22px); }
.frontend-body .subcat__lab{ font-size:clamp(10px,1.5vw,11.5px); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a95a6; margin-bottom:9px; }
.frontend-body .subcat__row{ display:flex; gap:9px; flex-wrap:wrap; }
.frontend-body .subcat__pill{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; text-decoration:none; color:#101a2b;
  border:1px solid #e6ebf3; background:#fff; border-radius:999px; padding:8px 14px; font-weight:700; font-size:clamp(12px,1.7vw,13.5px); line-height:1; transition:border-color .15s,background .15s; }
.frontend-body .subcat__pill:hover{ border-color:var(--accent,#285ff2); background:#f5f8ff; color:var(--accent,#285ff2); }
.frontend-body .subcat__ic{ width:20px; height:20px; display:grid; place-items:center; color:var(--accent,#285ff2); flex:0 0 auto; }
.frontend-body .subcat__ic svg{ width:18px; height:18px; }
.frontend-body .subcat__pill b{ color:#8a95a6; font-weight:700; font-size:.85em; }
@media(max-width:640px){
  .frontend-body .subcat__row{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .frontend-body .subcat__row::-webkit-scrollbar{ display:none; }
}

/* PHASE 8 — category card with the term's IMAGE (photo-led). Better visual
   than the icon tile when a category has an image; falls back to icon. */
.frontend-body .ha-cat--img{ padding:0; overflow:hidden; }
.frontend-body .ha-cat--img .ha-cat__img{ display:block; aspect-ratio:16/10; background:#eef3fc; overflow:hidden; }
.frontend-body .ha-cat--img .ha-cat__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.frontend-body .ha-cat--img:hover .ha-cat__img img{ transform:scale(1.05); }
.frontend-body .ha-cat--img h4{ margin:16px 18px 4px; }
.frontend-body .ha-cat--img small{ display:block; margin:0 18px 16px; }
@media(max-width:760px){ .frontend-body .ha-cat--img h4{ margin:12px 12px 3px; font-size:14.5px; } .frontend-body .ha-cat--img small{ margin:0 12px 12px; } }

/* PHASE 8 — searchable Attribute Filter panel (sidebar). */
.frontend-body .af__h{ font-size:clamp(13px,1.9vw,14.5px); font-weight:800; margin:0 0 10px; color:#101a2b; }
.frontend-body .af__search{ margin-bottom:10px; }
.frontend-body .af__search input{ width:100%; border:1px solid #e6ebf3; border-radius:9px; padding:8px 11px; font:inherit; font-size:13px; background:#fff; }
.frontend-body .af__search input:focus{ outline:none; border-color:var(--accent,#285ff2); }
.frontend-body .af__list{ display:flex; flex-direction:column; gap:3px; max-height:280px; overflow:auto; }
.frontend-body .af__opt{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; text-decoration:none; color:#26324a; font-weight:600; font-size:13.5px; }
.frontend-body .af__opt:hover{ background:#f5f8ff; }
.frontend-body .af__box{ width:16px; height:16px; border:2px solid #cdd8ea; border-radius:5px; flex:0 0 auto; }
.frontend-body .af__opt.on .af__box{ background:var(--accent,#285ff2); border-color:var(--accent,#285ff2); position:relative; }
.frontend-body .af__opt.on .af__box::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg); }
.frontend-body .af__t{ flex:1; } .frontend-body .af__n{ color:#8a95a6; font-weight:700; font-size:12px; }
.frontend-body .af__opt.on{ color:var(--accent,#285ff2); }
.frontend-body .af__pills{ display:flex; flex-wrap:wrap; gap:8px; }
.frontend-body .af__pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid #e6ebf3; border-radius:999px; padding:7px 13px; text-decoration:none; color:#26324a; font-weight:700; font-size:13px; }
.frontend-body .af__pill.on,.frontend-body .af__pill:hover{ border-color:var(--accent,#285ff2); background:#f5f8ff; color:var(--accent,#285ff2); }
.frontend-body .af__pill b{ color:#8a95a6; font-weight:700; font-size:.85em; }