/* ============================================================
   Fire Australia Co. — base stylesheet
   All themeable values are CSS custom properties on :root,
   written live by the theme engine (theme.jsx).
   ============================================================ */

:root {
  /* themeable tokens (defaults = Industrial Blue + Amber) */
  --c-primary: #293d86;
  --c-primary-2: #22326d;
  --c-secondary: #e0392b;
  --c-accent: #f5a01e;
  --c-bg: #f3f4f7;
  --c-surface: #ffffff;
  --c-header: #ffffff;
  --c-nav: #293d86;
  --c-footer: #22326d;
  --c-text: #161a22;
  --c-muted: #5b6472;
  --c-link: #293d86;
  --c-border: #e3e6ec;
  /* computed contrast tokens (set by engine) */
  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-accent: #161a22;
  --on-nav: #ffffff;
  /* typography */
  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-base: 16px;
  --lh-base: 1.6;
  --head-weight: 800;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(16,22,40,.06), 0 1px 3px rgba(16,22,40,.08);
  --shadow-md: 0 6px 18px rgba(16,22,40,.10);
  --shadow-lg: 0 18px 50px rgba(16,22,40,.18);
  /* Use the viewport width, with shared gutters across storefront sections. */
  --maxw: 100%;
  --page-gutter: clamp(24px, 2.5vw, 96px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
a { color: var(--c-link); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--page-gutter); }
.muted { color: var(--c-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--radius);
  padding: 11px 20px; font-weight: 700; font-size: 14px; letter-spacing: .01em; transition: filter .15s, transform .05s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-secondary); color: var(--on-secondary); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-blue { background: var(--c-primary); color: var(--on-primary); }
.btn-blue:hover { filter: brightness(1.08); }
.btn-accent { background: var(--c-accent); color: var(--on-accent); }
.btn-accent:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color: var(--on-primary); }
.btn-outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.pill-accent { background: color-mix(in srgb, var(--c-accent) 22%, white); color: color-mix(in srgb, var(--c-accent) 60%, black); }
.pill-red { background: color-mix(in srgb, var(--c-secondary) 14%, white); color: var(--c-secondary); }
.pill-blue { background: color-mix(in srgb, var(--c-primary) 12%, white); color: var(--c-primary); }
.pill-material { background: #f0f0f0; color: #444; font-size: 11px; font-weight: 600; }
.pcard-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }

/* ---------- placeholder imagery ---------- */
.ph { position: relative; background-color: #eef0f4;
  background-image: repeating-linear-gradient(135deg, rgba(47,65,152,.05) 0 10px, rgba(47,65,152,.10) 10px 20px);
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--c-muted); }
.ph span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; background: rgba(255,255,255,.78); padding: 4px 9px; border-radius: 4px; }
.ph-tall { aspect-ratio: 4/5; }
.ph-sq { aspect-ratio: 1/1; }
.ph-wide { aspect-ratio: 16/9; }

/* ============================================================
   STOREFRONT CHROME
   ============================================================ */
/* top utility bar */
.utility { background: var(--c-primary); color: rgba(255,255,255,.86); font-size: 13px; }
.utility a { color: rgba(255,255,255,.86); }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.utility .u-left { display: flex; gap: 22px; align-items: center; }
.utility .u-right { display: flex; gap: 16px; align-items: center; }
.utility .u-item { display: inline-flex; gap: 7px; align-items: center; }
.u-social { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 5px; background: rgba(255,255,255,.12); }
.u-social:hover { background: rgba(255,255,255,.24); }

/* header */
.site-header { background: var(--c-header); border-bottom: 1px solid var(--c-border); position: relative; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; flex-shrink: 1; min-width: 0; }
.brand-logo { height: 45px; width: 352px; max-width: 100%; display: block; }
.brand-mark { display: inline-flex; gap: 3px; }
.brand-mark b { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 22px; border-radius: 4px; }
.brand-mark .m1 { background: var(--c-secondary); }
.brand-mark .m2 { background: var(--c-primary); }
.brand-name { line-height: 1.05; }
.brand-name strong { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--c-text); display: block; letter-spacing: -.01em; }
.brand-name span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.header-right { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px 16px; flex: 1; min-width: 0; justify-content: flex-end; }
.header-nav { display: flex; align-items: center; gap: 4px; }
.header-navlink { background: none; border: none; cursor: pointer; padding: 8px 14px; border-radius: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--c-text); white-space: nowrap;
  transition: background .15s, color .15s; }
.header-navlink:hover { background: var(--c-surface); color: var(--c-primary); }
.header-navlink.active { color: var(--c-primary); background: var(--c-surface); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-search { display: flex; align-items: center; gap: 8px; background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 11px 16px; width: clamp(280px, 24vw, 340px); color: var(--c-muted); cursor: text; }
.header-search input { border: 0; background: transparent; outline: none; font-size: 14px; width: 100%; min-width: 0; color: var(--c-text); }
.header-search input::placeholder { color: var(--c-muted); opacity: 1; }
.header-search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 14%, transparent); }

/* mobile burger + nav drawer */
.quote-btn-mobile { display: none; }
.burger-btn { display: none; background: none; border: 0; cursor: pointer; padding: 6px; margin: -6px 0; color: var(--c-text);
  align-items: center; justify-content: center; border-radius: 6px; flex: none; }
.burger-btn:hover { background: var(--c-surface); }
.nav-backdrop { display: none; }
.quote-btn { flex: none; white-space: nowrap; position: relative; }

/* Search dropdown */
.search-wrap { position: relative; }
.search-drop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 340px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.13);
  z-index: 200; overflow: hidden; }
.search-drop-section { padding: 10px 0 4px; }
.search-drop-section + .search-drop-section { border-top: 1px solid var(--c-border); }
.search-drop-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted); padding: 0 14px 6px; }
.search-drop-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.search-drop-chip { font-size: 12px; padding: 4px 11px; }
.search-drop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px;
  background: transparent; border: 0; text-align: left; cursor: pointer; transition: background .12s; }
.search-drop-item:hover { background: var(--c-surface); }
.search-drop-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px;
  border: 1px solid var(--c-border); background: var(--c-surface); flex-shrink: 0; }
.search-drop-img-ph { background: var(--c-surface); }
.search-drop-info { min-width: 0; }
.search-drop-name { font-size: 13.5px; font-weight: 600; color: var(--c-text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.search-drop-sub { font-size: 12px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-drop-all { display: block; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-primary); font-size: 13px; font-weight: 600; text-align: left;
  cursor: pointer; transition: background .12s; }
.search-drop-all:hover { background: var(--c-border); }
.search-drop-all em { font-style: normal; }
mark.search-hl { background: #fff3b0; color: inherit; border-radius: 2px; padding: 0 1px; font-weight: inherit; }

/* Wishlist */
.wishlist-wrap { position: relative; }
.icon-btn { background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--c-text); padding: 8px; border-radius: 999px; position: relative; flex: none; }
.icon-btn:hover { background: var(--c-surface); }
.wishlist-btn { width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--c-border);
  background: var(--c-surface); transition: background .12s, border-color .12s, transform .12s; }
.wishlist-btn:hover { background: var(--c-border); border-color: var(--c-primary); transform: translateY(-1px); }
.wishlist-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--c-bg); }
.wishlist-drop { min-width: 300px; }
.wishlist-drop-item { cursor: default; }
.wishlist-drop-item:hover { background: transparent; }
.wishlist-remove { background: none; border: 0; cursor: pointer; color: var(--c-muted); padding: 6px;
  border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; }
.wishlist-remove:hover { background: var(--c-border); color: var(--c-text); }

/* RFQ / contact-form product list */
.rfq-products { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rfq-product-row { display: flex; align-items: center; gap: 10px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: 10px; padding: 8px 10px; }
.rfq-product-img { width: 38px; height: 38px; object-fit: contain; border-radius: 6px;
  border: 1px solid var(--c-border); background: var(--c-surface); flex-shrink: 0; }
.rfq-product-img-ph { background: var(--c-surface); }
.rfq-product-info { flex: 1; min-width: 0; }
.rfq-product-name { font-size: 13.5px; font-weight: 600; color: var(--c-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rfq-qty-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--c-border);
  border-radius: 999px; background: var(--c-surface); flex: none; overflow: hidden; }
.rfq-qty-stepper button { background: none; border: 0; width: 26px; height: 26px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; color: var(--c-text); flex: none; }
.rfq-qty-stepper button:hover:not(:disabled) { background: var(--c-border); }
.rfq-qty-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.rfq-qty-stepper input { width: 34px; border: 0; background: none; text-align: center; font-size: 13px;
  color: var(--c-text); -moz-appearance: textfield; }
.rfq-qty-stepper input::-webkit-outer-spin-button, .rfq-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rfq-search-wrap { position: relative; }
.rfq-search-drop { left: 0; right: 0; width: 100%; min-width: 0; }

/* main nav (blue bar with raised active tab) */
.mainnav { background: var(--c-nav); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(0,0,0,.22); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.mainnav .wrap { display: flex; align-items: stretch; gap: 2px; }
.cats-burger { display: none; }
.mobile-cats-panel { display: none; }
.navlink { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px;
  color: var(--on-nav); font-family: var(--font-head); font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
  background: transparent; border: 0; transition: background .14s; white-space: nowrap; }
.navlink:hover { background: rgba(255,255,255,.10); }
.navlink.active { color: #000; background: var(--c-surface); border-top-left-radius: 8px; border-top-right-radius: 8px;
  margin-top: 6px; height: 46px; box-shadow: 0 -3px 10px rgba(0,0,0,.08); }
.navlink .chev { transition: transform .15s; }
.navlink.open .chev { transform: rotate(180deg); }
.nav-spacer { flex: 1; }
.nav-divider { width: 1px; background: rgba(255,255,255,.2); align-self: stretch; margin: 8px 6px; }
.navlink-cat { font-size: 13px; padding: 0 clamp(8px, 1vw, 14px); }
.nav-cta { align-self: center; }

/* category dropdown */
/* categories shrink to fit the bar: labels wrap onto two lines when space
   runs out instead of pushing the last items off-screen */
.navcat-wrap { position: relative; flex: 0 1 auto; min-width: 0; display: flex; }
.navlink-cat { justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
.cat-drop { position: absolute; top: 100%; left: 0; background: var(--c-surface); box-shadow: var(--shadow-lg); border-radius: 0 0 10px 10px; border-top: 3px solid var(--c-primary); z-index: 300; min-width: 520px; padding: 20px 24px; }
.cat-drop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.cat-drop-title { font-weight: 700; font-size: 15.5px; color: var(--c-text); }
.cat-drop-viewall { font-size: 13px; color: var(--c-secondary); font-weight: 600; }
.cat-drop-viewall:hover { color: var(--c-primary); }
.cat-drop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.cat-drop-col { display: flex; flex-direction: column; }
.cat-drop-link { display: block; padding: 7px 0; font-size: 13.5px; color: var(--c-text); border-radius: 4px; white-space: nowrap; }
.cat-drop-link:hover { color: var(--c-primary); }

/* mega menu */
.mega-backdrop { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 90; background: rgba(10,14,26,.25); }
.mega { position: absolute; left: 16px; right: 16px; top: 100%; margin-top: 2px; background: var(--c-surface); box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-accent); border-radius: 0 0 12px 12px;
  max-height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto; z-index: 95; }
.mega .wrap { display: grid; grid-template-columns: repeat(3, 1fr) 320px; gap: 0; padding: 0 var(--page-gutter); }
.mega-col { padding: 26px 26px; border-right: 1px solid var(--c-border); }
.mega-col h5 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 14px; font-weight: 800; }
.mega-cat { display: block; padding: 7px 0; color: var(--c-text); font-weight: 600; font-size: 14.5px; border-radius: 4px; }
.mega-cat:hover { color: var(--c-secondary); }
.mega-sub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 6px; }
.mega-sub a { font-size: 12.5px; color: var(--c-muted); }
.mega-sub a:hover { color: var(--c-primary); }
.mega-feature { background: var(--c-primary); color: #fff; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.mega-feature h4 { color: #fff; font-size: 19px; }
.mega-feature p { color: rgba(255,255,255,.82); font-size: 13.5px; margin: 0; }

/* footer */
.site-footer { background: var(--c-footer); color: rgba(255,255,255,.82); margin-top: 64px; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 40px; }
.footer-h { font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.footer-h em { color: var(--c-accent); font-style: normal; }
.footer-rule { height: 1px; background: rgba(255,255,255,.18); margin: 14px 0 18px; }
.footer-body { font-size: 14px; line-height: 1.85; text-align: justify; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer-contact { font-size: 14px; line-height: 1.7; }
.footer-contact .lbl { color: var(--c-accent); font-weight: 700; display: block; margin: 14px 0 4px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; font-size: 12.5px; color: rgba(255,255,255,.6);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.footer-map .ph { aspect-ratio: 16/10; background-color: #d9dde6; }

/* inquiry strip in footer */
.foot-inquiry { background: var(--c-primary-2); }
.foot-inquiry .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px var(--page-gutter); flex-wrap: wrap; }
.foot-inquiry h3 { color: #fff; font-size: 24px; }
.foot-inquiry p { color: rgba(255,255,255,.8); margin: 4px 0 0; font-size: 14px; }

/* ============================================================
   STOREFRONT PAGES
   ============================================================ */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); padding: 18px 0; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { opacity: .5; }

/* hero */
.hero { position: relative; background: var(--c-primary); color: #fff; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; grid-template-rows: 1fr auto;
  column-gap: 40px; row-gap: 28px; align-items: start; min-height: 420px; padding: 28px var(--page-gutter) 24px; }
.hero-copy { min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px; }
.hero h1 { font-size: clamp(36px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -.025em; color: #fff; margin: 0; text-wrap: balance; }
.hero h1 em { display: block; margin-top: 20px; max-width: 520px; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.5; letter-spacing: 0; color: var(--c-accent); font-style: normal; font-weight: 500; text-wrap: pretty; }
.hero .hero-subtext { font-size: clamp(18px, 1.65vw, 22px); color: var(--c-accent); margin: 20px 0 0;
  max-width: none; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.hero .hero-subtext-list { padding-left: 22px; }
.hero-subtext-list li + li { margin-top: 10px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; grid-column: 1; }
.hero-art { --hero-art-height: 380px; position: relative; grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 0;
  height: var(--hero-art-height); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Keep one frame size across slides; contain each image with whitespace as needed. */
.hero-image-frame { position: relative; width: 100%; height: calc(100% - 32px); flex-shrink: 0;
  overflow: hidden; border-radius: 18px;
  background: var(--c-surface); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.hero-image-track { display: flex; height: 100%; transition: transform .45s ease; }
.hero-product-image { flex: 0 0 100%; min-width: 0; height: 100%; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.hero-image-controls { width: 100%; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.hero-image-dots { display: flex; flex-shrink: 0; gap: 2px; }
.hero-image-dot { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: transparent; }
.hero-image-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.hero-image-dot.on::before, .hero-image-dot:hover::before { background: #fff; }
.hero-image-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .hero-image-track { transition: none; } }
.hero-art .ph { border-radius: 12px; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background-color: rgba(255,255,255,.08);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 12px, rgba(255,255,255,.12) 12px 24px); color: rgba(255,255,255,.7); }
.hero-art .ph span { background: rgba(255,255,255,.16); color: #fff; }
.hero-badges { position: absolute; bottom: -22px; left: 24px; right: 24px; display: flex; gap: 12px; }
.hero-badge { flex: 1; background: var(--c-surface); color: var(--c-text); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow-md); }
.hero-badge b { display: block; font-family: var(--font-head); font-size: 20px; color: var(--c-primary); }
.hero-badge span { font-size: 12px; color: var(--c-muted); }
.hero-controls { display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 80px; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.hero-dots { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hero-dot { position: relative; width: 24px; height: 32px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hero-dot::before { content: ""; position: absolute; left: 3px; right: 3px; top: 14px; height: 4px;
  border-radius: 999px; background: rgba(255,255,255,.35); transition: background .2s; }
.hero-dot:hover::before { background: rgba(255,255,255,.7); }
.hero-dot.on::before { background: var(--c-accent); }
.hero-nav-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: background .2s; }
.hero-nav-btn:hover { background: rgba(255,255,255,.2); }
.hero-controls button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* section scaffolding */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.section-head .eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-secondary); margin-bottom: 10px; }
.section-head h1, .section-head h2 { font-size: 38px; }
.section-head h1 em, .section-head h2 em { color: var(--c-primary); font-style: normal; }
.section-head p { color: var(--c-muted); margin: 10px 0 0; max-width: 560px; }
.section-alt { background: var(--c-surface); }

/* category feature cards */
.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.featured-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.featured-category-image { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--c-surface); padding: 4px; }
.catcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .18s; }
.catcard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
.catcard .ph { aspect-ratio: 16/10; }
.catcard-body { padding: 20px 22px; }
.catcard-body h3 { font-size: 21px; margin-bottom: 8px; }
.catcard-body p { color: var(--c-muted); font-size: 14px; margin: 0 0 14px; }
.catcard-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--c-secondary); }
.catcard-count { font-size: 12px; color: var(--c-muted); font-weight: 600; }

/* ---------- product cards (variant A/B/C) ---------- */
.prodgrid { display: grid; gap: 22px; }
.prodgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.prodgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.pcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .18s, transform .18s, border-color .18s; position: relative; }
.pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pcard .ph { aspect-ratio: 1/1; }
.pcard-img { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: scale-down; display: block; }
.pcard-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-sku { font-size: 11.5px; font-family: "IBM Plex Mono", monospace; color: var(--c-muted); letter-spacing: .03em; }
.pcard-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.22; color: var(--c-text); }
.pcard-desc { font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.pcard-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-price { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--c-primary); }
.pcard-price small { font-weight: 600; font-size: 11px; color: var(--c-muted); }
.pcard-cta { font-size: 12.5px; font-weight: 700; color: var(--c-secondary); display: inline-flex; gap: 5px; align-items: center; }

/* variant B: minimal / editorial */
.pcard.var-b { border: 0; border-radius: 0; background: transparent; }
.pcard.var-b .ph { border-radius: 10px; border: 1px solid var(--c-border); }
.pcard.var-b .pcard-body { padding: 14px 2px 6px; }
.pcard.var-b:hover { transform: translateY(-3px); box-shadow: none; }
.pcard.var-b .pcard-title { font-size: 15px; }

/* variant C: horizontal list row */
.pcard.var-c { flex-direction: row; align-items: stretch; }
.pcard.var-c .ph { width: 170px; flex: none; aspect-ratio: auto; }
.pcard.var-c .pcard-img { width: 170px; flex: none; aspect-ratio: auto; align-self: stretch; }
.pcard.var-c .pcard-body { padding: 18px 20px; }
.pcard.var-c .pcard-foot { justify-content: flex-start; gap: 16px; }

/* spec mini on card */
.pcard-spec { display: flex; gap: 14px; font-size: 11.5px; color: var(--c-muted); margin-top: 2px; flex-wrap: wrap; }
.pcard-spec b { color: var(--c-text); font-weight: 700; }

/* ---------- category listing layout ---------- */
.listing { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; padding-bottom: 64px; }
.listing.no-side { grid-template-columns: 1fr; }
.cat-banner { background: var(--c-primary); color: #fff; border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 26px; }
.cat-banner .inner { padding: 34px 36px; max-width: 620px; position: relative; z-index: 2; }
.cat-banner h1 { font-size: 38px; color: #fff; margin-bottom: 10px; }
.cat-banner p { color: rgba(255,255,255,.85); margin: 0; font-size: 15px; }
.cat-banner .deco { position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.10) 14px 28px); }

/* sidebar tree */
.sidebar { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; align-self: flex-start; }
.sidebar .tree { flex: 1; min-height: 0; overflow-y: auto; }
.sidebar .sidebar-filter { overflow-y: auto; }
.sidebar-toggle { width: 100%; border: 0; cursor: default; display: flex; align-items: center; justify-content: space-between; font: inherit; text-align: left; }
.sidebar-toggle-chev { transition: transform .15s; }
.sidebar.collapsed .sidebar-toggle-chev { transform: rotate(-90deg); }
.sidebar-h { background: var(--c-primary); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; padding: 14px 18px; display: flex; align-items: center; gap: 9px; }
.tree { padding: 8px 6px; }
.tree-cat > .tree-row { font-weight: 700; }
.tree-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: var(--c-text); }
.tree-row:hover { background: var(--c-bg); }
.tree-row.active { background: color-mix(in srgb, var(--c-primary) 10%, white); color: var(--c-primary); font-weight: 700; }
.tree-row .twirl { transition: transform .15s; color: var(--c-muted); }
.tree-row.open .twirl { transform: rotate(90deg); }
.tree-children { margin-left: 12px; border-left: 1px solid var(--c-border); padding-left: 4px; }
.tree-children .tree-row { font-size: 13.5px; font-weight: 500; color: var(--c-muted); }
.tree-children .tree-row:hover, .tree-children .tree-row.active { color: var(--c-primary); }
.tree-count { font-size: 11px; color: var(--c-muted); background: var(--c-bg); border-radius: 999px; padding: 1px 8px; font-weight: 600; }

.sidebar-filter { padding: 16px 18px; border-top: 1px solid var(--c-border); }
.sidebar-filter h6 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 0 0 10px; font-weight: 700; }
.checkrow { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--c-text); cursor: pointer; }
.checkrow input { accent-color: var(--c-primary); width: 15px; height: 15px; }

/* listing toolbar */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.list-count { font-size: 14px; color: var(--c-muted); }
.list-count b { color: var(--c-text); }

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; padding-bottom: 8px; }
.pg-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); color: var(--c-text); font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.pg-btn:hover:not(:disabled) { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-btn.pg-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }
.pg-ellipsis { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 14px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.select { border: 1px solid var(--c-border); border-radius: 6px; padding: 8px 32px 8px 12px; font-size: 13.5px; background: var(--c-surface); color: var(--c-text);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.viewtoggle { display: inline-flex; border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden; }
.viewtoggle button { width: 36px; height: 36px; border: 0; background: var(--c-surface); color: var(--c-muted); display: grid; place-items: center; }
.viewtoggle button.on { background: var(--c-primary); color: #fff; }

/* browse-pattern banner */
.pattern-note { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--c-accent) 14%, white);
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, white); color: color-mix(in srgb, var(--c-accent) 55%, black);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; }

/* filter chips (pattern C) */
.filterbar { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 22px; }
.filterbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; font-weight: 600; }
.chip:hover { border-color: var(--c-primary); }
.chip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-bottom: 28px; }
.gallery-main { position: relative; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: var(--c-surface); aspect-ratio: 1/1; max-height: 480px; display: flex; align-items: center; justify-content: center; }
.gallery-main .ph { aspect-ratio: 1/1; width: 100%; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-zoomable { cursor: zoom-in; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }

.lightbox-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; cursor: default; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lightbox-close { position: fixed; top: 20px; right: 24px; z-index: 1001; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.gallery-thumb { border: 2px solid var(--c-border); border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.gallery-thumb.on { border-color: var(--c-primary); }
.gallery-thumb .ph { aspect-ratio: 1/1; width: 100%; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pdp-info h1 { font-size: 34px; margin: 8px 0 12px; }
.pdp-sku { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--c-muted); }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.pdp-price .amt { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--c-primary); }
.pdp-price .gst { font-size: 13px; color: var(--c-muted); }
.pdp-quote-only { font-size: 15px; color: var(--c-secondary); font-weight: 700; margin: 16px 0; }
.pdp-lede { font-size: 16px; color: var(--c-text); line-height: 1.65; margin: 14px 0 20px; }
.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.pdp-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; padding: 20px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.pdp-meta-item { font-size: 13.5px; }
.pdp-meta-item .k { color: var(--c-muted); }
.pdp-meta-item .v { font-weight: 700; }
.pdp-meta-list { border-top: 1px solid var(--c-border); margin-top: 20px; }
.pdp-meta-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-border); font-size: 14.5px; }
.pdp-meta-row .k { color: var(--c-muted); min-width: 90px; flex: none; }
.pdp-meta-row .v { font-weight: 700; color: var(--c-text); }
.pdp-features { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.pdp-features h2 { font-size: 22px; margin-bottom: 14px; text-align: left; }
.pdp-features ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pdp-features li { font-size: 14.5px; line-height: 1.4; color: var(--c-text); }
.pdp-specs-section { margin-top: 20px; padding-top: 8px; }
.specs-heading { font-size: 32px; font-weight: 800; font-family: var(--font-head); margin-bottom: 24px; color: var(--c-text); }

.downloads { display: flex; flex-direction: column; gap: 8px; margin: 22px 0; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-border);
  border-radius: 8px; background: var(--c-surface); transition: border-color .15s; }
.dl-row:hover { border-color: var(--c-primary); }
.dl-icon { width: 38px; height: 38px; border-radius: 7px; background: color-mix(in srgb, var(--c-secondary) 12%, white);
  color: var(--c-secondary); display: grid; place-items: center; flex: none; }
.dl-meta { flex: 1; }
.dl-meta b { font-size: 13.5px; font-weight: 700; display: block; }
.dl-meta span { font-size: 12px; color: var(--c-muted); }

/* tabs + spec table */
.pdp-tabs { margin-top: 48px; }
.tabbar { display: flex; gap: 4px; border-bottom: 2px solid var(--c-border); }
.tab { padding: 13px 22px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--c-muted);
  border: 0; background: transparent; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab.on { color: var(--c-primary); border-bottom-color: var(--c-secondary); }
.tabpanel { padding: 28px 0; }

.spectable { width: 100%; border-collapse: collapse;
  border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; font-size: 16px; }
.spectable thead th { background: var(--c-primary); color: var(--on-primary); text-align: left; padding: 13px 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.spectable td { padding: 12px 16px; border-top: 1px solid var(--c-border); }
.spectable tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-primary) 4%, white); }
.spectable tbody tr:hover { background: color-mix(in srgb, var(--c-primary) 10%, white); }
/* Part no. column: shrink-to-fit so the divider hugs its content — width: 1% is
   a shrink-to-fit hint under auto table layout, forcing all of the table's
   slack width onto the other (unset-width) columns instead of this one */
.spectable td:first-child { font-family: var(--font-body); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--c-text);
  width: 1%; white-space: nowrap; padding-right: 16px; border-right: 1px solid var(--c-border); }
.spectable thead th:first-child { width: 1%; white-space: nowrap; padding-right: 16px;
  border-right: 1px solid color-mix(in srgb, var(--on-primary) 30%, transparent); }

/* extra spec columns beyond Part No. / Description (KA, D, STD, L, Size, etc.) —
   give them a compact, evenly distributed width instead of being squeezed by
   auto table layout next to the free-flowing Description column */
.spectable thead th:nth-child(n+3), .spectable td:nth-child(n+3) {
  width: 90px; text-align: center; white-space: nowrap; }

/* Carbon Steel Butt-Weld Fittings: table shouldn't stretch to full width —
   at width:100% the short Description text left a large blank gap before
   the dimension columns (A, C, etc). Shrink-to-fit pulls them in closer. */
.spectable-tight-dims { width: max-content; max-width: 100%; }

/* inline section headings inside the table (e.g. state names) */
.spectable tr.spec-heading-row td { font-family: var(--font-head); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-text); white-space: normal; text-align: center;
  background: color-mix(in srgb, var(--c-primary) 14%, white);
  border-top: 1px solid var(--c-border); border-right: 0; padding: 10px 16px; }
.spectable tbody tr.spec-heading-row:hover { background: transparent; }

/* ============================================================
   BLOG BODY
   ============================================================ */
.blog-body { font-size: 17px; line-height: 1.8; color: var(--c-text); }
.blog-body h2 { font-family: var(--font-head); font-size: 26px; font-weight: 700; margin: 36px 0 12px; color: var(--c-heading, var(--c-text)); line-height: 1.2; }
.blog-body h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin: 26px 0 10px; color: var(--c-heading, var(--c-text)); line-height: 1.3; }
.blog-body p { margin: 0 0 16px; }
.blog-body ul, .blog-body ol { margin: 0 0 16px; padding-left: 24px; }
.blog-body li { margin-bottom: 8px; }
.blog-body strong { font-weight: 700; }
.blog-body a { color: var(--c-primary); text-decoration: underline; }
.blog-body a:hover { opacity: .8; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: #0f1320; }
.adm-side { background: #141a2b; color: #c4cad8; border-right: 1px solid #222a40; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #222a40; }
.adm-brand .brand-mark b { width: 30px; height: 30px; font-size: 17px; }
.adm-brand strong { color: #fff; font-family: var(--font-head); font-size: 16px; }
.adm-brand span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #6f7793; display: block; }
.adm-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.adm-navgroup { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #58607a; padding: 16px 12px 7px; }
.adm-navitem { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 7px; color: #c4cad8;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s; }
.adm-nav .adm-navitem { background-color: transparent; }
.adm-nav .adm-navitem:hover { background-color: #1c2438; color: #fff; }
.adm-nav .adm-navitem.active { background-color: var(--c-primary); color: #fff; }
.adm-navitem .ico { opacity: .9; }
.adm-navitem .badge { margin-left: auto; background: var(--c-secondary); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; }
.adm-side-foot { padding: 14px 18px; border-top: 1px solid #222a40; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.adm-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--c-accent); color: #161a22; display: grid; place-items: center; font-weight: 800; }

.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-topbar { background: #141a2b; border-bottom: 1px solid #222a40; height: 62px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 26px; position: sticky; top: 0; z-index: 20; }
.adm-topbar h1 { color: #fff; font-size: 19px; }
.adm-topbar .crumbs { font-size: 12.5px; color: #6f7793; margin-top: 2px; }
.adm-top-actions { display: flex; align-items: center; gap: 12px; }
.adm-viewsite { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #c4cad8; padding: 8px 14px;
  border: 1px solid #2a3350; border-radius: 7px; }
.adm-viewsite:hover { background: #1c2438; color: #fff; }
.adm-body { padding: 26px; overflow-y: auto; flex: 1; color: #c4cad8; }

.adm-card { background: #161d2e; border: 1px solid #232c44; border-radius: 12px; }
.adm-card-h { padding: 18px 22px; border-bottom: 1px solid #232c44; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.adm-card-h h3 { color: #fff; font-size: 16px; }
.adm-card-h p { color: #8089a3; font-size: 13px; margin: 3px 0 0; }
.adm-card-b { padding: 22px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.stat { background: #161d2e; border: 1px solid #232c44; border-radius: 12px; padding: 20px; }
.stat .ico { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 14px; }
.stat .num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: #fff; }
.stat .lbl { font-size: 13px; color: #8089a3; margin-top: 2px; }
.stat .delta { font-size: 12px; font-weight: 700; margin-top: 8px; display: inline-flex; gap: 5px; align-items: center; }
.delta.up { color: #46d39a; } .delta.down { color: #ff6b6b; }

.adm-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.adm-list { display: flex; flex-direction: column; }
.adm-list-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #232c44; }
.adm-list-row:first-child { border-top: 0; }
.adm-thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; background-color: #222b42;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, rgba(255,255,255,.08) 6px 12px); }
.adm-list-row .nm { color: #fff; font-size: 14px; font-weight: 600; }
.adm-list-row .sub { color: #8089a3; font-size: 12.5px; }
.adm-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.tag-green { background: rgba(70,211,154,.16); color: #46d39a; }
.tag-amber { background: rgba(245,160,30,.16); color: #f5a01e; }
.tag-blue { background: rgba(91,143,214,.16); color: #79a6e6; }

/* admin table (generic) */
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; color: #8089a3; font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; padding: 0 14px 12px; border-bottom: 1px solid #232c44; }
.adm-table td { padding: 13px 14px; border-bottom: 1px solid #1d2538; color: #c4cad8; }
.adm-table tr:hover td { background: #1a2236; }
.adm-table .nm { color: #fff; font-weight: 600; }

/* admin form controls */
.adm-field { margin-bottom: 16px; }
.adm-field label { display: block; font-size: 12.5px; color: #8089a3; margin-bottom: 6px; font-weight: 600; }
.adm-input, .adm-select, .adm-textarea { width: 100%; background: #0f1422; border: 1px solid #2a3350; border-radius: 7px;
  padding: 10px 12px; color: #fff; font-size: 14px; font-family: inherit; }
.adm-input:focus, .adm-textarea:focus, .adm-select:focus { outline: none; border-color: var(--c-primary); }
.adm-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 10px 16px;
  font-weight: 700; font-size: 13.5px; }
.adm-btn-primary { background: var(--c-primary); color: var(--on-primary); }
.adm-btn-primary:hover { filter: brightness(1.1); }
.adm-btn-accent { background: var(--c-secondary); color: var(--on-secondary); }
.adm-btn-ghost { background: #1c2438; color: #c4cad8; border: 1px solid #2a3350; }
.adm-btn-ghost:hover { background: #232c44; color: #fff; }
.adm-btn-sm { padding: 7px 11px; font-size: 12.5px; }

.adm-empty { text-align: center; padding: 48px 24px; color: #6f7793; }
.adm-burger { display: none; }
@media (max-width: 860px) { .adm-burger { display: inline-flex; } }

/* ---- spec builder ---- */
.sb-wrap { display: grid; grid-template-columns: 1fr; gap: 18px; }
.sb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-schema-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-chip { padding: 7px 13px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #1c2438; color: #c4cad8; border: 1px solid #2a3350; }
.sb-chip.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.sb-tablewrap { overflow-x: auto; border: 1px solid #232c44; border-radius: 10px; }
.sb-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.sb-table th, .sb-table td { border: 1px solid #232c44; padding: 0; position: relative; }
.sb-colhead { background: #1a2236; padding: 6px; min-width: 150px; }
.sb-colhead-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sb-colhead-top .grip { cursor: grab; color: #58607a; }
.sb-colhead input { width: 100%; background: #0f1422; border: 1px solid #2a3350; border-radius: 5px;
  padding: 7px 9px; color: #fff; font-size: 13px; font-weight: 700; }
.sb-colhead-actions { display: flex; gap: 4px; }
.sb-mini { width: 26px; height: 24px; border-radius: 5px; border: 1px solid #2a3350; background: #141a2b; color: #8089a3;
  display: grid; place-items: center; font-size: 12px; cursor: pointer; }
.sb-mini:hover { color: #fff; border-color: var(--c-primary); }
.sb-mini.danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.sb-rowhead { background: #1a2236; width: 42px; text-align: center; }
.sb-rowhead .grip { cursor: grab; color: #58607a; }
.sb-cell input { width: 100%; background: transparent; border: 0; padding: 11px 12px; color: #e6e9f2; font-size: 13.5px; }
.sb-cell input:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; background: #0f1422; }
.sb-addcol { background: #1a2236; width: 46px; text-align: center; vertical-align: middle; }
.sb-addrow td { background: #141a2b; text-align: center; padding: 9px; }
.sb-dragging { opacity: .4; }
.sb-drop-target { box-shadow: inset 3px 0 0 var(--c-accent); }
.sb-drop-target-row { box-shadow: inset 0 3px 0 var(--c-accent); }

.sb-preview { border: 1px solid #232c44; border-radius: 10px; overflow: hidden; }
.sb-preview-h { background: #1a2236; padding: 10px 16px; font-size: 12px; color: #8089a3; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* ---- theme engine ---- */
.theme-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.theme-controls { display: flex; flex-direction: column; gap: 14px; }
.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.preset { border: 1px solid #2a3350; border-radius: 9px; padding: 11px; cursor: pointer; background: #161d2e; transition: border-color .14s; }
.preset:hover { border-color: var(--c-primary); }
.preset.on { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.preset-sw { display: flex; gap: 4px; margin-bottom: 9px; }
.preset-sw i { width: 100%; height: 22px; border-radius: 4px; display: block; }
.preset-name { font-size: 12.5px; color: #fff; font-weight: 600; }

.color-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid #1d2538; }
.color-row:last-child { border-bottom: 0; }
.color-sw { width: 34px; height: 34px; border-radius: 7px; border: 1px solid #2a3350; cursor: pointer; flex: none; position: relative; overflow: hidden; }
.color-sw input { position: absolute; inset: -6px; width: 150%; height: 150%; border: 0; padding: 0; cursor: pointer; }
.color-row .meta { flex: 1; }
.color-row .meta .nm { font-size: 13px; color: #e6e9f2; font-weight: 600; }
.color-row .meta .hex { font-size: 11.5px; color: #8089a3; font-family: "IBM Plex Mono", monospace; }
.contrast-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.cb-pass { background: rgba(70,211,154,.16); color: #46d39a; }
.cb-aa { background: rgba(245,160,30,.16); color: #f5a01e; }
.cb-fail { background: rgba(255,107,107,.16); color: #ff6b6b; }

.live-frame { border: 1px solid #232c44; border-radius: 12px; overflow: hidden; background: var(--c-bg); }
.live-frame-bar { background: #1a2236; padding: 9px 14px; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 11px; height: 11px; border-radius: 999px; }
.live-frame-body { max-height: 620px; overflow-y: auto; }

.toggle { position: relative; width: 44px; height: 25px; border-radius: 999px; background: #2a3350; border: 0; transition: background .15s; flex: none; }
.toggle.on { background: var(--c-secondary); }
.toggle i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 999px; background: #fff; transition: left .15s; }
.toggle.on i { left: 22px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #1d2538; }
.toggle-row .tr-meta .nm { color: #fff; font-size: 14px; font-weight: 600; }
.toggle-row .tr-meta .sub { color: #8089a3; font-size: 12.5px; }

/* range */
.adm-range { width: 100%; accent-color: var(--c-primary); }
.range-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.range-row .val { font-size: 12.5px; color: #fff; font-family: "IBM Plex Mono", monospace; }

/* generic helpers */
.flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.grow { flex: 1; } .wrapf { flex-wrap: wrap; }
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb0{margin-bottom:0}
.hide { display: none !important; }

/* storefront form fields */
.ff { width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 11px 13px;
  font-family: inherit; font-size: 14px; color: var(--c-text); background: var(--c-surface); }
.ff:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 14%, transparent); }
textarea.ff { resize: vertical; }

/* scrollbars in admin */
.adm-body::-webkit-scrollbar, .live-frame-body::-webkit-scrollbar, .adm-nav::-webkit-scrollbar, .sb-tablewrap::-webkit-scrollbar { width: 10px; height: 10px; }
.adm-body::-webkit-scrollbar-thumb, .live-frame-body::-webkit-scrollbar-thumb, .adm-nav::-webkit-scrollbar-thumb { background: #2a3350; border-radius: 6px; }

/* ---------- responsive ---------- */
@media (min-width: 1600px) {
  /* Add columns on wide screens instead of stretching square product images. */
  .catgrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .prodgrid.cols-3, .prodgrid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 1100px) {
  .hero-grid { column-gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .catgrid, .prodgrid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .theme-layout { grid-template-columns: 1fr; }
  /* generic marketing-section grids (icon/feature rows, testimonials, blog cards) */
  .g3, .g4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1440px) {
  /* ---- header: tighten spacing so logo, links, search and quote button
     stay on one row instead of wrapping ---- */
  .brand-logo { width: 280px; height: auto; }
  .header-navlink { padding: 8px 10px; }
  .header-search { width: clamp(200px, 18vw, 260px); }
}
@media (max-width: 1240px) {
  .brand-logo { width: 230px; }
  .header-right { gap: 10px 10px; }
  .header-search { width: 200px; }
  .quote-btn { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 10px; }
  .quote-btn .quote-label { display: none; }
}
@media (max-width: 1100px) {
  /* ---- header: logo and menu above a full-width search row ---- */
  .burger-btn { display: inline-flex; order: 2; }
  .brand { order: 1; flex-shrink: 0; }
  /* keep both dimensions on "auto" so only max-width/max-height clamp the
     image — fixing a height with width:auto + a separate max-width caused
     the browser to scale width and height independently ("squished" logo) */
  .brand-logo { height: auto; width: auto; max-height: 34px; max-width: 46vw; }
  .site-header .wrap.header-row { height: auto; flex-wrap: wrap; padding: 10px var(--page-gutter); gap: 10px; }
  .header-right { order: 3; flex: 1 0 100%; min-width: 0; justify-content: flex-end; }

  .header-nav { display: none; }
  .header-nav.mobile-open {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-header); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg); padding: 8px 16px 14px; z-index: 250;
  }
  .header-nav.mobile-open .header-navlink { width: 100%; text-align: left; padding: 12px 10px; }
  /* "Request a Quote" moves into the burger menu on mobile (the standalone
     pill in header-actions gets too cramped next to search) — shown first,
     styled as a primary action so it still reads as the main CTA */
  .header-nav.mobile-open .quote-btn-mobile {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    background: var(--c-primary); color: #fff; border-radius: 6px; font-weight: 700;
    margin-bottom: 6px;
  }
  .nav-backdrop { display: block; position: fixed; inset: 0; top: 0; background: rgba(10,14,26,.35); z-index: 240; }

  .header-actions { width: 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .search-wrap { flex: 1 1 auto; min-width: 0; }
  .header-search { display: flex; width: 100%; padding: 8px 10px; }
  /* Collapse the merged quote button to an icon-only badge on mobile — the
     "Request Quote" label moves into the burger menu's own CTA
     (.quote-btn-mobile) where there's room for it. */
  .quote-btn { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 10px; }
  .quote-btn .quote-label { display: none; }

  /* ---- secondary category bar: burger opens a full vertical category
     list instead of relying on horizontal scrolling to reach every
     category ---- */
  .cats-burger { display: flex; align-items: center; gap: 8px; flex: none; height: 52px; padding: 0 14px;
    background: transparent; border: 0; color: var(--on-nav); font-family: var(--font-head); font-weight: 700;
    font-size: 13.5px; cursor: pointer; }
  .cats-burger:active, .cats-burger.open { background: rgba(255,255,255,.12); }
  .mainnav .wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mainnav .wrap::-webkit-scrollbar { display: none; }
  .navcat-wrap { flex: none; }
  .navlink, .navlink-cat { flex: none; width: auto; white-space: nowrap; }

  .mobile-cats-panel { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
    width: min(320px, 84vw); z-index: 260; background: var(--c-surface); box-shadow: var(--shadow-lg);
    overflow-y: auto; padding: 14px 6px; }
  .mobile-cats-item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 13px 14px; font-size: 14.5px; font-weight: 600; color: var(--c-text); border-radius: 6px; flex: 1; }
  .mobile-cats-item.active { color: var(--c-primary); background: var(--c-surface-2, var(--c-border)); }
  .mobile-cats-row { display: flex; align-items: center; }
  .mobile-cats-expand { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: var(--c-muted); transition: transform .15s; }
  .mobile-cats-expand.open { transform: rotate(180deg); }
  .mobile-cats-children { display: flex; flex-direction: column; padding: 0 0 6px 22px; }
  .mobile-cats-subitem { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 10px 14px; font-size: 13.5px; color: var(--c-muted); border-radius: 6px; }

  /* the hover-driven mega menu / category dropdown don't work on touch —
     the "Categories" burger panel above replaces them on mobile */
  .mega, .mega-backdrop, .cat-drop { display: none !important; }

  /* ---- search dropdown: full-width instead of a fixed 340px min-width ---- */
  .search-drop { left: 0; right: 0; min-width: 0; width: 100%; }

  /* ---- wishlist dropdown: the icon button itself is too narrow to anchor
     a full-width panel to, so on mobile it drops the local positioning
     context and anchors against .site-header instead (full viewport width,
     flush under the whole header) ---- */
  .wishlist-wrap { position: static; }
  .wishlist-drop { max-height: 70vh; overflow-y: auto; z-index: 210; }
}
@media (max-width: 860px) {
  .listing { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr !important; }
  /* generic 2-column marketing/form grids (bollards split, blog featured, inquiry form) */
  .g2 { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; padding: 36px 24px 28px; gap: 24px; }
  .hero-copy { min-height: 260px; }
  .hero-art { grid-column: 1; grid-row: 2; width: 100%; }
  .hero-art { --hero-art-height: 340px; }
  .hero-actions { grid-row: 3; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-cols { grid-template-columns: 1fr; }
  .mega .wrap { grid-template-columns: 1fr 1fr; }
  .admin { grid-template-columns: 1fr; }
  .adm-side { position: fixed; left: -260px; z-index: 60; transition: left .2s; }
  .adm-side.open { left: 0; }


  /* ---- product spec tables: scroll instead of breaking layout ---- */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- listing toolbar: stack on narrow screens ---- */
  .list-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { justify-content: space-between; }
  .toolbar-right .select { flex: 1; }

  /* ---- sidebar: collapsible header only on mobile ---- */
  .sidebar-toggle { cursor: pointer; }

}
@media (max-width: 620px) {
  .prodgrid.cols-3, .prodgrid.cols-4, .catgrid { grid-template-columns: 1fr; gap: 12px; }
  .g3, .g4 { grid-template-columns: 1fr !important; }
  .section-head h1, .section-head h2 { font-size: 30px; }
  .hero .hero-slide-title { font-size: 34px; }
  .hero .hero-subtext { font-size: 18px; margin-top: 16px; }
  .hero-grid { padding: 32px 24px 24px; gap: 20px; }
  /* Reserve room for the longest slide so the image frame stays in place. */
  .hero-copy { min-height: 310px; }
  .hero-art { --hero-art-height: 300px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-actions .btn { font-size: 13px; padding: 13px 10px; justify-content: center; }
  .hero-controls { gap: 8px; min-height: 72px; }
  .hero-dots { flex: 1; gap: 0; justify-content: center; }
  .hero-dot { width: 100%; max-width: 22px; }
  .hero-dot::before { left: 2px; right: 2px; }
  .hero-nav-btn { width: 30px; height: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  .utility .u-left { display: none; }


  /* tighter product cards at 2-up */
  .pcard-body { padding: 10px 12px 12px; gap: 4px; }
  .pcard-title { font-size: 13.5px; }
  .pcard-sku { font-size: 10.5px; }
  .pcard-cta { font-size: 11.5px; }
  .pcard-badge { top: 8px; left: 8px; }
}

/* ============================================================
   Local admin mode (admin-store.jsx)
   Self-contained dark palette — deliberately distinct from the
   site theme so edit chrome never gets lost in it or mistaken
   for real page content.
   ============================================================ */

/* ---- floating bar, present on every page once unlocked ---- */
.admin-bar {
  position: fixed; z-index: 9999; right: 14px; bottom: 14px;
  background: #14161c; color: #e7e9ef; border: 1px solid #2a2d38;
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  font-size: 13px; padding: 8px 10px; max-width: calc(100vw - 28px);
}
.admin-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-switch { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; user-select: none; }
.admin-switch input { accent-color: #4ea1ff; width: 15px; height: 15px; }
.admin-filter-chips { display: flex; gap: 4px; }
.admin-chip {
  background: #1f222c; color: #b9bdc9; border: 1px solid #2a2d38; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.admin-chip.on { background: #2f5fe0; border-color: #2f5fe0; color: #fff; }
.admin-btn {
  background: #1f222c; color: #e7e9ef; border: 1px solid #2a2d38; border-radius: 7px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.admin-btn:disabled { opacity: .5; cursor: default; }
.admin-btn-primary { background: #2f5fe0; border-color: #2f5fe0; }
.admin-btn-primary:disabled { background: #384056; border-color: #384056; }
.admin-lock-btn {
  background: transparent; border: none; color: #8890a3; cursor: pointer;
  display: flex; align-items: center; padding: 4px; border-radius: 6px;
}
.admin-lock-btn:hover { background: #1f222c; color: #fff; }
.admin-bar-error { margin-top: 6px; color: #ff9a9a; font-size: 12px; max-width: 320px; }

/* ---- inline-editable text ---- */
.admin-editable {
  position: relative; cursor: text; display: inline-block;
  outline: 1px dashed rgba(47,95,224,.55); outline-offset: 3px; border-radius: 3px;
}
.admin-editable:hover { background: rgba(47,95,224,.08); }
.admin-editable-pencil { margin-left: 5px; opacity: .55; vertical-align: -2px; }
.admin-editable-empty { color: #9aa1b4; font-style: italic; }
.admin-editable-input {
  font: inherit; color: inherit; background: #fff; border: 1.5px solid #2f5fe0;
  border-radius: 4px; padding: 2px 6px; width: 100%; box-sizing: border-box;
}
textarea.admin-editable-input { min-height: 5em; resize: vertical; }

/* ---- active / inactive toggle ---- */
.admin-active-toggle {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px;
  border: 1px solid; cursor: pointer; line-height: 1;
}
.admin-active-toggle .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.admin-active-toggle.on { background: #eafbf0; border-color: #bfead0; color: #1a7a42; }
.admin-active-toggle.on .dot { background: #1fa955; }
.admin-active-toggle.off { background: #fdecec; border-color: #f5c6c6; color: #a3231f; }
.admin-active-toggle.off .dot { background: #e3453f; }

/* dim inactive items when browsing "All"/"Inactive" filters in admin mode */
.admin-inactive-dim { opacity: .45; }
.admin-inactive-dim::after { content: ""; }

/* ---- image replace overlay ---- */
.admin-image-editable-overlay {
  position: absolute; left: 8px; bottom: 8px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.admin-image-edit-btn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(20,22,28,.85); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 6px 10px; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.admin-image-edit-btn:hover { background: rgba(20,22,28,.95); }
.admin-image-pending {
  background: #2f5fe0; color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 11.5px; font-weight: 600;
}

/* ---- spec table admin extras ---- */
.spectable .admin-active-col { width: 88px; text-align: center; }
.spectable tr.admin-inactive-dim td { opacity: .45; }

/* ---- spec table per-row quote action ---- */
.spectable .spec-quote-col { width: 96px; text-align: center; }
.spec-row-quote { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-size: 12.5px;
  font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.spec-row-quote:hover { border-color: var(--c-primary); color: var(--c-primary); }
.spec-row-quote.on { background: var(--c-primary); border-color: var(--c-primary); color: var(--on-primary, #fff); }
.spec-row-quote:disabled { opacity: .45; cursor: default; }
.spec-row-quote:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.product-quote-add { display: inline-flex; flex: none; }
.quote-part-picker { position: fixed; z-index: 1100; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); box-shadow: var(--shadow-md); }
.quote-part-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--c-border); font-size: 13px; font-weight: 700; flex: none; }
.quote-part-picker-head span { color: var(--c-muted); font-size: 11px; font-weight: 500; }
.quote-part-picker-list { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.quote-part-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.quote-part-option + .quote-part-option { border-top: 1px solid var(--c-border); }
.quote-part-info { flex: 1; min-width: 0; }
.quote-part-info b { display: block; font-size: 13px; }
.quote-part-info small { display: block; margin-top: 3px; color: var(--c-muted); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.quote-part-option .spec-row-quote { flex: none; }
.spec-part-cell { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pdp-specs-section { scroll-margin-top: 120px; }
.spec-quote-hint { margin: -10px 0 20px; color: var(--c-muted); font-size: 14px; }
.rfq-search-result { cursor: default; }
.rfq-search-result .search-drop-info { flex: 1; }
.pcard-foot { flex-wrap: wrap; }

.hero .hero-slide-title { margin: 0; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -.025em; color: #fff; text-wrap: balance; }

/* ============================================================
   Product catalog flipbook (/catalog)
   ============================================================ */
.fb-wrap { padding-top: 16px; padding-bottom: 32px; }
.fb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fb-head h1 { font-size: 30px; margin-bottom: 6px; }
.fb-head p { margin: 0; font-size: 15px; }
.fb-head .fb-download { flex: none; }

.fb-viewer { display: flex; height: max(560px, calc(100vh - 70px)); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); position: relative;
  scroll-margin-top: 70px; }
.fb-viewer.is-fullscreen, .fb-viewer:fullscreen { height: 100vh; border: 0; border-radius: 0; }

/* contents sidebar */
.fb-toc { width: 270px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--c-border); background: var(--c-surface); }
.fb-toc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--c-border);
  font-family: var(--font-head); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-nav); }
.fb-toc-list { overflow-y: auto; flex: 1; padding: 6px 0 16px; overscroll-behavior: contain; }
.fb-toc-cat { border-bottom: 1px solid var(--c-border); }
.fb-toc-cat-row { display: flex; align-items: center; }
.fb-toc-cat-btn { flex: 1; text-align: left; background: none; border: 0; padding: 11px 6px 11px 16px; font-weight: 700; font-size: 14px;
  color: var(--c-text); border-left: 3px solid transparent; line-height: 1.3; }
.fb-toc-cat-btn:hover { color: var(--c-primary); }
.fb-toc-cat.active .fb-toc-cat-btn { color: var(--c-secondary); border-left-color: var(--c-secondary); }
.fb-toc-toggle svg { transition: transform .2s; }
.fb-toc-toggle.expanded svg { transform: rotate(180deg); }
.fb-toc-cat ul { list-style: none; margin: 0; padding: 0 0 8px; }
.fb-toc-cat li button { width: 100%; display: flex; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0;
  padding: 6px 14px 6px 28px; font-size: 13px; line-height: 1.35; color: var(--c-muted); }
.fb-toc-cat li button:hover { color: var(--c-primary); background: var(--c-bg); }
.fb-toc-pg { flex: none; color: var(--c-text); font-weight: 600; font-size: 12px; }
.fb-toc-backdrop { display: none; }

.fb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius);
  border: 1px solid transparent; background: none; color: var(--c-text); flex: none; }
.fb-icon-btn:hover { border-color: var(--c-border); color: var(--c-primary); }
.fb-viewer.toc-hidden .fb-toc { display: none; }
.fb-viewer.toc-hidden .fb-toc-btn { display: inline-flex; }
.fb-icon-btn:disabled { opacity: .35; cursor: default; border-color: transparent; color: var(--c-text); }
.fb-zoom { display: flex; align-items: center; gap: 2px; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1px; }
.fb-zoom .fb-icon-btn { width: 30px; height: 30px; }
.fb-zoom-level { min-width: 52px; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--c-text); padding: 4px; }
.fb-zoom-level:hover { color: var(--c-primary); }

/* main area */
.fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--c-border); min-height: 52px; }
.fb-toc-btn { display: none; }
.fb-indicator { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.fb-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.fb-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #e9ecf2 0%, #d5dae3 100%); overflow: hidden; touch-action: pan-y; }
.fb-status { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--c-muted); text-align: center; padding: 20px; }
.fb-status p { margin: 0; }
.fb-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--c-primary);
  animation: fb-spin .8s linear infinite; display: inline-block; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

.fb-scroll { position: absolute; inset: 0; overflow: auto; display: flex; padding: 12px 64px; overscroll-behavior: contain; }
.fb-scroll.zoomed { cursor: grab; }
.fb-scroll.zoomed:active { cursor: grabbing; }
.fb-scroll.zoomed .fb-half { cursor: inherit; }
.fb-book { position: relative; display: flex; perspective: 2600px; margin: auto; flex: none; }
.fb-half { width: 50%; height: 100%; position: relative; }
.fb-book.single .fb-half { width: 100%; }
.fb-half-left { cursor: w-resize; }
.fb-half-right { cursor: e-resize; }
.fb-page { width: 100%; height: 100%; background: #fff; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(16,22,40,.22); }
.fb-page img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.fb-page.fb-blank { background: transparent; box-shadow: none; }
.fb-page-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* spine shading */
.fb-book.spread .fb-page:not(.fb-blank)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.fb-book.spread .fb-page.fb-left::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0)); }
.fb-book.spread .fb-page.fb-right::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0)); }

/* the turning leaf */
.fb-leaf { position: absolute; top: 0; transform-style: preserve-3d; z-index: 5; pointer-events: none;
  animation-duration: .7s; animation-timing-function: cubic-bezier(.45,.05,.35,1); animation-fill-mode: forwards; }
.fb-leaf.turn-next { left: 50%; transform-origin: left center; animation-name: fb-turn-next; }
.fb-leaf.turn-prev { left: 0; transform-origin: right center; animation-name: fb-turn-prev; }
.fb-leaf.single { left: 0; transform-origin: left center; }
.fb-leaf.single.turn-prev { animation-name: fb-turn-in; }
.fb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-face.fb-back { transform: rotateY(180deg); }
@keyframes fb-turn-next { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes fb-turn-prev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes fb-turn-in { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .fb-leaf { animation-duration: .01s; } }

.fb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--c-surface); color: var(--c-nav); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; }
.fb-nav:hover:not(:disabled) { background: var(--c-nav); color: var(--on-nav); }
.fb-nav:disabled { opacity: .35; cursor: default; }
.fb-nav-prev { left: 14px; }
.fb-nav-next { right: 14px; }

/* bottom bar: section shortcuts + go to page */
.fb-bottombar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--c-border); }
.fb-chips { flex: 1; min-width: 0; display: flex; position: relative; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; }
.fb-chip { flex: none; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fb-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.fb-chip.active { background: var(--c-nav); border-color: var(--c-nav); color: var(--on-nav); }
.fb-jump { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); }
.fb-jump label { white-space: nowrap; }
.fb-jump input { width: 64px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: var(--radius); font: inherit; color: var(--c-text); }

@media (max-width: 1000px) {
  .fb-toc { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: min(320px, 86%); transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .fb-toc.open { transform: none; }
  .fb-toc-close { display: inline-flex; }
  .fb-toc-backdrop { display: block; position: absolute; inset: 0; z-index: 19; background: rgba(10,14,26,.35); }
  .fb-toc-btn { display: inline-flex; }
}
@media (max-width: 620px) {
  .fb-wrap { padding-left: 12px; padding-right: 12px; }
  .fb-head { flex-direction: column; align-items: stretch; }
  .fb-head h1 { font-size: 24px; }
  .fb-head .fb-download { justify-content: center; }
  .fb-viewer { height: calc(100vh - 70px); min-height: 520px; }
  .fb-scroll { padding: 8px; }
  .fb-zoom-level { min-width: 40px; }
  .fb-dl-label { display: none; }
  .fb-nav { width: 38px; height: 38px; opacity: .9; }
  .fb-nav-prev { left: 4px; }
  .fb-nav-next { right: 4px; }
  .fb-bottombar { flex-direction: column; align-items: stretch; gap: 8px; }
  .fb-jump { justify-content: flex-end; }
}

/* ---------- back to top ---------- */
.scroll-top { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--c-secondary); color: var(--on-secondary); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s, filter .15s; }
.scroll-top.visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { filter: brightness(1.08); }
.scroll-top:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
body:has(.admin-bar) .scroll-top { bottom: 84px; }
@media (max-width: 620px) { .scroll-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* Quote action follows catalog browsing once the main toolbar scrolls away. */
.floating-quote { position: fixed; right: 22px; top: 65px; z-index: 90; }
.floating-quote .wishlist-wrap { position: relative; }
.floating-quote .quote-btn { width: auto; height: auto; min-height: 44px; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); }
.floating-quote .quote-label { display: inline; }
.floating-quote .wishlist-drop { top: calc(100% + 10px); bottom: auto; left: auto; right: 0;
  width: min(340px, calc(100vw - 28px)); min-width: 0; max-height: 60vh; overflow-y: auto; }
.floating-quote .quote-btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
@media (max-width: 620px) {
  .floating-quote { right: 14px; }
}