/* Empire main-page alignment layer.
   Product pages still own their model logic; this layer keeps the store visually tied
   to the refreshed root index.html palette, cards, spacing, and controls. */
:root{
  --empire-blue:#106eea;
  --empire-blue-dark:#0e56d6;
  --empire-blue-ink:#0b4fb3;
  --ink:#0f172a;
  --muted:#475569;
  --line:#d9e2f2;
  --bg:#f6f7fb;
  --soft:#eef4ff;
  --soft-blue:#e9f2ff;
  --panel:#ffffff;
  --panel-soft:#fbfdff;
  --r:14px;
  --shadow:0 12px 28px rgba(2,10,30,.10);
  --shadow-sm:0 8px 18px rgba(2,10,30,.08);
}

html body{
  color:var(--ink) !important;
  background:
    radial-gradient(circle at top left, rgba(16,110,234,.05), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 55%, #f4f7fb 100%) !important;
  font-family:"Open Sans", sans-serif !important;
}

a{ color:var(--empire-blue); }
a:hover{ color:var(--empire-blue-dark); }

.store-wrap,
.store-shell > .container,
main .store-shell > .container{
  max-width:1180px !important;
}

#header{
  height:78px !important;
  min-height:78px !important;
  box-shadow:0 2px 15px rgba(0,0,0,.08) !important;
}

#header .logo{
  display:flex !important;
  align-items:center !important;
}

#header .logo img{
  max-height:54px !important;
  width:auto !important;
  padding:0 !important;
}

#header .store-nav-actions .nav-pill,
.nav-pill{
  border:1px solid rgba(16,110,234,.22) !important;
  background:rgba(16,110,234,.10) !important;
  color:var(--empire-blue-dark) !important;
  box-shadow:0 10px 22px rgba(2,10,30,.10) !important;
  font-family:"Roboto", sans-serif !important;
  font-weight:900 !important;
  text-decoration:none !important;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

#header .store-nav-actions .nav-pill:hover,
.nav-pill:hover{
  background:rgba(16,110,234,.14) !important;
  border-color:rgba(16,110,234,.45) !important;
  color:var(--empire-blue-dark) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 14px 30px rgba(2,10,30,.12) !important;
}

#header .store-nav-actions .nav-pill.nav-cart,
.nav-pill.nav-cart{
  background:#f1f6fe !important;
  border-color:#d9e2f2 !important;
  color:#334155 !important;
}

#header .store-nav-actions .nav-pill.nav-cart:hover,
.nav-pill.nav-cart:hover{
  background:#eef4ff !important;
  border-color:rgba(16,110,234,.45) !important;
  color:#0f172a !important;
}

#header .store-nav-actions .nav-pill .count,
.nav-pill .count{
  background:var(--empire-blue) !important;
  color:#fff !important;
  border-radius:8px !important;
  font-weight:900 !important;
}

.store-shell{
  background:
    radial-gradient(circle at top right, rgba(16,110,234,.08), transparent 28%),
    linear-gradient(180deg, #eef6ff 0%, #ffffff 42%, #f6f7fb 100%) !important;
  border-top:1px solid rgba(16,110,234,.08) !important;
  padding:30px 0 64px !important;
}

.store-hero,
.pdp-card,
.panel,
.right-head,
.p-card,
.emp-details,
.emp-modal,
.co-box{
  border:1px solid rgba(16,110,234,.14) !important;
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  border-radius:18px !important;
  box-shadow:0 16px 34px rgba(15,23,42,.06) !important;
  overflow:hidden;
}

.pdp-card:hover,
.panel:hover{
  border-color:rgba(16,110,234,.20) !important;
  box-shadow:0 22px 40px rgba(15,23,42,.08) !important;
}

.p-card{
  transition:border-color .18s ease;
}

.p-card:hover,
.p-card:focus-within{
  border-color:var(--empire-blue) !important;
}

.store-hero-top,
.chapter-card .head,
.resource-card .top,
.emp-modal-h,
.emp-cart-head,
.emp-config-head,
.config-panel > div[style*="rgba(16,110,234"]{
  background:linear-gradient(135deg, #0d5cc9 0%, #106eea 58%, #3d8af0 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.emp-config-head{
  min-height:75px !important;
  padding:16px 20px !important;
  margin:-25px -25px 20px -25px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}

.store-hero-title,
.store-hero-sub,
.emp-config-head h1,
.emp-config-head span,
.config-panel > div[style*="rgba(16,110,234"] h1,
.config-panel > div[style*="rgba(16,110,234"] span{
  color:#fff !important;
}

.emp-config-head h1{
  margin:0 !important;
  font-family:"Poppins","Roboto",Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  line-height:1.15 !important;
}

.emp-config-head h1 + span,
.emp-config-head span{
  display:block !important;
  margin-top:3px !important;
  font-family:"Poppins","Roboto",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  opacity:.88 !important;
}

.store-badge,
.emp-config-head > div:last-child,
.config-panel > div[style*="rgba(16,110,234"] > div:last-child{
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.10) !important;
  border-radius:10px !important;
  color:#fff !important;
  font-weight:800 !important;
}

.panel-h,
.right-head .pad,
.emp-cart-foot,
.price-box,
.p-foot{
  background:linear-gradient(180deg, rgba(16,110,234,.06), rgba(255,255,255,.95)) !important;
  border-color:rgba(16,110,234,.10) !important;
}

.panel-h .h,
.right-title,
.p-name,
.emp-cart-head .t,
.emp-cart-name,
.section-label,
.form-group label{
  color:#0b1220 !important;
}

.right-desc,
.p-copy,
.cat-desc,
.emp-cart-specs,
.emp-spec-line,
.form-group small{
  color:var(--muted) !important;
}

.cat-card,
.backup-item,
.location-item,
.emp-chip{
  border:1px solid rgba(16,110,234,.13) !important;
  background:rgba(255,255,255,.72) !important;
  border-radius:12px !important;
}

.cat-card:hover{
  border-color:rgba(16,110,234,.28) !important;
  background:rgba(16,110,234,.05) !important;
}

.cat-card.active{
  border:2px solid var(--empire-blue) !important;
  background:rgba(16,110,234,.08) !important;
}

.cat-count,
.p-media .tag,
.emp-chip{
  background:rgba(16,110,234,.10) !important;
  border-color:rgba(16,110,234,.22) !important;
  color:var(--empire-blue-dark) !important;
}

.viewer-container{
  border:1px solid rgba(16,110,234,.24) !important;
  border-radius:14px !important;
  box-shadow:0 16px 34px rgba(15,23,42,.08) !important;
  background:
    linear-gradient(rgba(16,110,234,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,110,234,.12) 1px, transparent 1px),
    linear-gradient(rgba(16,110,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,110,234,.045) 1px, transparent 1px),
    radial-gradient(circle at 28% 22%, rgba(16,110,234,.06), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px, auto, auto !important;
  background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px, center, center !important;
}

.viewer-hint,
.weight-badge{
  border:1px solid rgba(16,110,234,.14) !important;
  background:rgba(255,255,255,.88) !important;
  border-radius:10px !important;
  box-shadow:0 10px 22px rgba(2,10,30,.08) !important;
  color:var(--muted) !important;
  backdrop-filter:blur(8px);
}

.weight-badge{
  border-left:4px solid var(--empire-blue) !important;
}

.view-btn,
.align-btn,
.mode-btn,
.btn-clear,
.subchip{
  border:1px solid rgba(16,110,234,.22) !important;
  background:rgba(16,110,234,.08) !important;
  color:var(--empire-blue-dark) !important;
  border-radius:10px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(2,10,30,.06) !important;
}

.view-btn:hover,
.align-btn:hover,
.mode-btn:hover,
.btn-clear:hover,
.subchip:hover{
  background:rgba(16,110,234,.14) !important;
  border-color:rgba(16,110,234,.45) !important;
  color:var(--empire-blue-dark) !important;
}

.view-btn.clean-view-btn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  border-radius:8px !important;
}

.view-btn.clean-view-btn.active{
  background:var(--empire-blue) !important;
  border-color:var(--empire-blue) !important;
  color:#fff !important;
}

.view-btn.reset-btn,
.align-btn.active,
.mode-btn.active,
.subchip.active,
.p-btn.primary,
.btn-add,
.pay-btn.active{
  background:var(--empire-blue) !important;
  border-color:var(--empire-blue) !important;
  color:#fff !important;
}

.view-btn.reset-btn:hover,
.p-btn.primary:hover,
.btn-add:hover{
  background:var(--empire-blue-dark) !important;
  border-color:var(--empire-blue-dark) !important;
  color:#fff !important;
}

.p-btn,
.cap-btn,
.btn-mini{
  border:1px solid rgba(16,110,234,.22) !important;
  background:rgba(16,110,234,.10) !important;
  color:var(--empire-blue-dark) !important;
  border-radius:12px !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.p-btn:hover,
.cap-btn:hover,
.btn-mini:hover{
  background:rgba(16,110,234,.14) !important;
  color:var(--empire-blue-dark) !important;
}

.form-control-emp,
.co-input,
.emp-field input,
.searchbox input,
.select{
  border:1px solid rgba(16,110,234,.24) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0b1220 !important;
  font-weight:700 !important;
}

.form-control-emp:focus,
.co-input:focus,
.emp-field input:focus,
.searchbox input:focus,
.select:focus{
  border-color:var(--empire-blue) !important;
  box-shadow:0 0 0 3px rgba(16,110,234,.10) !important;
}

.section-label{
  border-bottom:1px solid rgba(16,110,234,.12) !important;
  color:#64748b !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
}

.price-display,
.p-price,
.emp-cart-lineprice,
.emp-chip .v{
  color:var(--empire-blue-dark) !important;
}

.emp-cart-drawer{
  border-left:1px solid rgba(16,110,234,.14) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.35) !important;
}

.emp-cart-close,
.emp-modal-close{
  border:1px solid rgba(16,110,234,.22) !important;
  background:rgba(16,110,234,.10) !important;
  color:var(--empire-blue-dark) !important;
  border-radius:12px !important;
}

#footer-micro{
  background:#fff !important;
  border-top:1px solid rgba(16,110,234,.10) !important;
  color:#64748b !important;
}

@media (max-width:768px){
  #header{
    height:72px !important;
    min-height:72px !important;
  }

  #header .logo img{
    max-height:46px !important;
  }

  .store-shell{
    padding:20px 0 42px !important;
  }

  .viewer-container{
    min-height:380px;
    height:min(62vh, 520px) !important;
  }

  .store-hero,
  .pdp-card,
  .panel,
  .right-head,
  .p-card{
    border-radius:12px !important;
  }
}
/* Header matched to empiremetalproducts.com, September 2026. */
body #topbar { display:none !important; }
body #header { height:74px !important; min-height:74px !important; padding:0 !important; background:#fff !important; border-top:6px solid #106eea; border-bottom:1px solid rgba(16,110,234,.26) !important; box-shadow:0 4px 14px rgba(15,23,42,.055) !important; backdrop-filter:none; position:relative; z-index:1000; }
body #header .container,body #header .store-wrap { width:100%; max-width:1180px !important; height:68px; margin:auto; padding:0 14px; display:flex; align-items:center; justify-content:space-between; }
body #header .logo img { max-height:46px !important; width:auto; }
body #header #navbar > ul { display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
body #header #navbar > ul > li > a { font-family:Poppins,Arial,sans-serif; color:#0f172a; font-size:14px; font-weight:800; border-radius:999px; padding:9px 11px; text-decoration:none; }
body #header #navbar a:hover { color:#0e56d6; background:#eef4ff; }
body #header #navbar a:before { display:none; }
body #header .cart-link .count { margin-left:6px; background:#106eea; color:white; border-radius:20px; padding:3px 7px; }
body #header #navbar .store-nav-entry { display:flex; align-items:center; gap:4px; }
body #header #navbar .store-nav-entry .store-link { padding-right:2px; }
body #header #navbar .store-cart-count { display:grid; place-items:center; min-width:32px; min-height:36px; padding:0 4px; border:0; background:transparent; cursor:pointer; border-radius:8px; }
body #header #navbar .store-cart-count .count { display:inline-grid; place-items:center; min-width:23px; height:23px; padding:0 6px; border-radius:14px; background:#106eea; color:white; font:700 12px/1 Arial,sans-serif; }
body #header #navbar .store-cart-count:hover { background:#e6f0ff; }
body #header #navbar .store-cart-count:focus-visible { outline:2px solid #106eea; outline-offset:2px; }
.store-menu-toggle { display:none; border:1px solid #b9d5fa; background:#fff; color:#106eea; border-radius:4px; padding:9px 12px; font-weight:800; }
body #empMobileToggle { display:none !important; }
body .store-hero-top { padding:32px; color:#fff !important; }
body .store-hero-title { font:800 clamp(26px,4vw,38px)/1.12 Poppins,Arial,sans-serif; letter-spacing:-.035em; }
body .store-hero-sub { max-width:620px; margin-top:12px; font-weight:500; line-height:1.6; color:#fff !important; }
body .store-hero-top .store-hero-title { color:#fff !important; }
body .store-hero-top .pill, body .store-hero-top .store-badge { color:#fff !important; background:#ffffff14 !important; border-color:#ffffff73 !important; }
.emp-cart-head .t { color:white !important; }
.emp-cart-head .emp-cart-close { background:white !important; }
.estimate-detail { margin-top:20px; padding:14px; border:1px solid #d9e2f2; border-radius:10px; background:#eef4ff; color:#475569; font-size:12px; line-height:1.65; }
body.emp-quote-mode:not(.emp-priced-product) .price-display,body.emp-quote-mode:not(.emp-priced-product) #total-display,body.emp-quote-mode .p-price { display:none !important; }
body.emp-quote-mode:not(.emp-priced-product) .price-box .text-muted.small { display:none !important; }
body.emp-quote-mode:not(.emp-priced-product) .price-box div:has(> #total-display) { display:none !important; }
body.emp-quote-mode .price-box { gap:12px; flex-wrap:wrap; }
body.emp-quote-mode .price-display { font-size:22px; }
.emp-cart-controls { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.emp-cart-controls > button { background:none; border:0; color:#b91c1c; }
#quote-review { width:min(660px,calc(100% - 32px)); border:1px solid #d9e2f2; border-radius:18px; padding:26px; color:#0f172a; }
#quote-review::backdrop { background:rgba(15,23,42,.6); }
#quote-review textarea { width:100%; padding:12px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }
.quote-review-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.quote-review-actions button,.quote-review-actions a { border:1px solid #d9e2f2; border-radius:8px; padding:10px; background:#eef4ff; color:#0e56d6; cursor:pointer; }
:focus-visible { outline:3px solid #106eea; outline-offset:3px; }
@media(max-width:991px) {
 .store-menu-toggle { display:block; margin-left:auto; }
 body #header #navbar > ul { display:none !important; }
 body #header #navbar.store-menu-open > ul { display:flex !important; position:absolute; top:68px; right:14px; min-width:240px; flex-direction:column; align-items:stretch; padding:12px; border:1px solid #d9e2f2; border-radius:12px; background:#fff; box-shadow:0 18px 34px rgba(15,23,42,.16); }
 body #header #navbar { position:static; padding:0; }
 body #header #navbar a { display:flex; }
 body #header #navbar .dropdown ul { display:none; }
 body .store-hero-top { padding:24px; flex-wrap:wrap; }
 body #header .logo img { max-width:180px; object-fit:contain; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
/* Product pictures and names are destinations, just like Customize. */
.p-media{width:100%;padding:0;border:0;cursor:pointer;color:inherit;text-decoration:none!important;overflow:hidden}.p-media .tag{z-index:1}.p-media:focus-visible{outline:3px solid #106eea;outline-offset:-3px}.p-name a{color:inherit;text-decoration:none}.p-name a:hover{color:#106eea}

/* Quote catalog: compact navigation, static model images and clear project context. */
body .store-hero-top{padding:20px 24px}
body .store-hero-title{font-size:28px}
body .store-hero-sub{max-width:780px;margin-top:8px;line-height:1.5}
.cat-main,.cat-title,.cat-desc{display:block}
.cat-card .cat-desc{font-size:12px;line-height:1.45;margin-top:4px;color:#64748b;font-weight:400}
.cat-card .cat-count{white-space:nowrap;width:auto;min-width:42px;flex-shrink:0;border-radius:14px;padding:4px 8px}
.upcoming-families{margin-top:18px}
.upcoming-families summary{font-size:12px;font-weight:700;color:#64748b;cursor:pointer;margin-bottom:12px}
.search-row{grid-template-columns:minmax(0,1fr) auto!important}
.search-row .btn-clear{width:auto;min-width:84px}
.coming-soon{font-size:12px;color:#64748b;padding:10px 0}
.product-family{font-size:11px;color:#64748b;margin:0 0 5px}
.p-card mark{background:#dcecff;color:inherit}
.p-media img{object-fit:contain}
.product-page-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.store-breadcrumb{margin:0;font:700 13px/1.4 'Open Sans',Arial,sans-serif}
.store-breadcrumb a{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid #c8dcfa;border-radius:10px;background:#fff;color:#0e56d6;text-decoration:none;box-shadow:0 2px 8px rgba(15,60,120,.06);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.store-breadcrumb a::before{content:'←';font:700 18px/1 Arial,sans-serif}
.store-breadcrumb a:hover{background:#eef5ff;border-color:#87b8ff;box-shadow:0 4px 12px rgba(15,60,120,.1);color:#0b4fc7;text-decoration:none}
.store-breadcrumb a:focus-visible{outline:3px solid #106eea;outline-offset:3px}
.store-config-jump{display:none}
@media(max-width:991px){
  .config-grid{display:flex!important;flex-direction:column;align-items:stretch!important;gap:0!important}
  .config-grid>:first-child{display:contents}
  .config-grid>:first-child>:first-child{order:1}
  .config-grid>:nth-child(2){order:2;width:100%}
  .config-grid>:first-child>:nth-child(2){order:3;width:100%}
  .store-config-jump{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 13px;border-radius:999px;background:#106eea;color:#fff;font:700 13px/1.4 'Open Sans',Arial,sans-serif;text-decoration:none;box-shadow:0 2px 8px rgba(15,60,120,.12)}
  .store-config-jump:hover{background:#0e56d6;color:#fff;text-decoration:none}
  .store-config-jump:focus-visible{outline:3px solid #106eea;outline-offset:3px}
  #configure-fitting{scroll-margin-top:14px}
}
@media(max-width:600px){
  body .viewer-container{min-height:330px;height:min(47vh,390px)!important}
  .product-page-actions{margin-bottom:12px}
  .store-back-prefix{display:none}
}
.construction-profile{padding:16px;border:1px solid #d9e2f2;border-radius:10px;background:#f8fbff;margin:0 0 22px}
.construction-profile p{font-size:12px;line-height:1.5;color:#64748b;margin:10px 0}
.construction-profile summary{font-size:12px;color:#106eea;font-weight:600;cursor:pointer}
.construction-profile details .form-group{margin-top:12px}
.construction-profile label{display:block;margin-bottom:6px}
.construction-profile input,.construction-profile select{width:100%}
.quote-project{margin-bottom:20px}
@media(max-width:600px){body .store-hero-top{padding:18px}body .store-hero-title{font-size:25px}.construction-profile{padding:12px}}