/*
Theme Name: Micro-Ray Electronics
Theme URI: https://micro-ray.com
Author: Micro-Ray Electronics Inc.
Description: Custom theme for Micro-Ray Electronics - industrial connectors and custom cable assemblies. Dark charcoal and gold design system, WooCommerce ready.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: micro-ray
Tags: ecommerce, custom-colors, custom-menu, dark-mode
WooCommerce: true
*/
/* =========================================================
   MICRO-RAY ELECTRONICS — Design System v2 (vivid)
   Palette: saturated blues + greens, grays, white, black.
   Every value maps to a Breakdance Global Style.
   ========================================================= */
:root{
  /* --- core --- */
  --black:#08111F; --black-soft:#0E1B2E; --ink:#14213A;

  /* --- blues (vivid) --- */
  --blue:#0A5FE0;            /* primary action */
  --blue-dark:#0742A8;
  --blue-deep:#062D75;
  --blue-bright:#2E86FF;     /* highlights on dark */
  --blue-light:#DCEAFF;
  --blue-tint:#EFF5FF;

  /* --- greens (vivid) --- */
  --green:#00A868;
  --green-dark:#017B4D;
  --green-bright:#2FD68F;
  --green-light:#D8F7E8;

  /* --- supporting accents (still blue/green family) --- */
  --teal:#0B9AAE;
  --teal-light:#D6F3F7;
  --cyan:#0089D0;
  --cyan-light:#D8EFFB;

  /* --- neutrals --- */
  --page:#E9F0F8;            /* PAGE BACKGROUND — tinted, not white */
  --panel:#FFFFFF;
  --gray-50:#F4F8FC;
  --gray-100:#E7EEF6;
  --gray-200:#CFDCEA;
  --gray-400:#7C8DA3;
  --gray-600:#41546E;
  --white:#FFFFFF;

  --amber-bg:#FFF4DC; --amber-line:#E9A21B; --amber-text:#8A5300;

  --radius:16px;
  --shadow-sm:0 1px 2px rgba(8,17,31,.05),0 3px 10px rgba(8,17,31,.07);
  --shadow-md:0 6px 16px rgba(8,17,31,.09),0 14px 32px rgba(8,17,31,.10);
  --shadow-lg:0 12px 28px rgba(8,17,31,.13),0 28px 60px rgba(8,17,31,.16);
  --shadow-blue:0 8px 22px rgba(10,95,224,.30);
  --shadow-green:0 8px 22px rgba(0,168,104,.30);
  --maxw:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--gray-600);
  background:var(--page);
  background-image:linear-gradient(180deg, rgba(10,95,224,.05), rgba(10,95,224,0) 520px);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4,h5{font-family:'Space Grotesk','Inter',sans-serif;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section--tight{padding:52px 0}

/* Section rhythm: tinted page vs solid white panels */
.bg-gray{background:var(--white);border-block:1px solid var(--gray-200)}
.bg-black{
  background:linear-gradient(135deg,var(--black) 0%,#0C2247 55%,var(--blue-deep) 130%);
  color:#B4C6DD;position:relative;overflow:hidden;
}
.bg-black::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;pointer-events:none;
}
.bg-black > *{position:relative;z-index:1}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black h4{color:#fff}

/* ---------- MOCKUP CHROME ---------- */
.mockup-banner{
  background:linear-gradient(90deg,#08111F,#0742A8 60%,#017B4D);
  color:#DCEAFF;font-size:13px;padding:9px 24px;text-align:center;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.mockup-banner strong{color:#fff}
.toggle-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-size:12px;font-weight:600;padding:5px 13px;border-radius:20px;cursor:pointer;transition:.2s}
.toggle-btn:hover{background:rgba(255,255,255,.3)}
body.clean .bd-note,body.clean .anno{display:none!important}
.bd-note{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dark);background:var(--blue-light);border:1px solid rgba(10,95,224,.25);padding:5px 11px;border-radius:6px;margin-bottom:18px}
.bg-black .bd-note{background:rgba(46,134,255,.2);border-color:rgba(46,134,255,.4);color:#9CC6FF}
.anno{background:var(--amber-bg);border-left:4px solid var(--amber-line);color:var(--amber-text);font-size:13.5px;line-height:1.6;padding:14px 20px;border-radius:0 10px 10px 0;max-width:var(--maxw);margin:0 auto 26px;box-shadow:var(--shadow-sm)}
.anno strong{color:#6B3F00}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:15px 30px;border-radius:11px;border:2px solid transparent;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);white-space:nowrap;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:linear-gradient(135deg,#1470F5,var(--blue-dark));transform:translateY(-3px);box-shadow:0 12px 30px rgba(10,95,224,.42)}
.btn-green{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;box-shadow:var(--shadow-green)}
.btn-green:hover{background:linear-gradient(135deg,#08C57C,var(--green-dark));transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,168,104,.42)}
.btn-secondary{background:var(--gray-100);color:var(--gray-600);border-color:var(--gray-200)}
.btn-secondary:hover{border-color:var(--blue);background:var(--blue);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-blue)}
.btn-on-dark{background:#fff;color:var(--blue-dark)}
.btn-on-dark:hover{background:var(--green);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-green)}
.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost-light:hover{background:#fff;color:var(--blue-dark);border-color:#fff;transform:translateY(-3px)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn-lg{padding:17px 36px;font-size:16px}
.btn-block{width:100%}

/* ---------- UTILITY BAR ---------- */
.utility{background:var(--black);color:#95AAC4;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.08)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px;flex-wrap:wrap}
.utility a:hover{color:var(--green-bright)}
.utility-left{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.utility-badge{display:inline-flex;align-items:center;gap:7px}
.utility-badge svg{color:var(--green-bright)}

/* ---------- HEADER — deliberately a different color from everything else ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(100deg,var(--blue-deep) 0%,var(--blue-dark) 45%,var(--blue) 100%);
  border-bottom:3px solid var(--green);
  box-shadow:0 6px 24px rgba(6,45,117,.35);
}
header.site::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;pointer-events:none;
}
header.site .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 24px}
.logo-link{display:flex;align-items:center;flex-shrink:0;background:#fff;padding:7px 13px;border-radius:11px;box-shadow:0 3px 12px rgba(0,0,0,.22);transition:.22s}
.logo-link:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.logo-img{height:44px;width:auto}
.logo-fallback{display:none;align-items:center;gap:11px}
.logo-mark{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,var(--blue-deep),var(--blue));display:grid;place-items:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:19px;flex-shrink:0}
.logo-fallback .name{font-family:'Space Grotesk';font-weight:700;font-size:19px;color:var(--ink);display:block;line-height:1.1;white-space:nowrap}
.logo-fallback .sub{font-size:10px;color:var(--gray-400);letter-spacing:.11em;text-transform:uppercase;font-weight:600;white-space:nowrap}

nav.main{display:flex;gap:2px;align-items:center;flex:1;justify-content:center}
nav.main > .navitem{position:relative}
nav.main a.navlink{font-size:14.5px;font-weight:600;color:#DCEAFF;padding:10px 13px;border-radius:9px;transition:.18s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
nav.main a.navlink:hover{background:rgba(255,255,255,.18);color:#fff}
nav.main a.navlink.active{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(0,168,104,.4)}
.caret{width:9px;height:9px;opacity:.7}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.35);font-size:14px;font-weight:600;color:#fff;transition:.2s;background:rgba(255,255,255,.12)}
.cart-btn:hover{background:#fff;color:var(--blue-dark);transform:translateY(-2px)}
.cart-count{background:var(--green-bright);color:var(--black);font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.header-cta .btn-primary{background:#fff;color:var(--blue-dark);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.header-cta .btn-primary:hover{background:var(--green);color:#fff;box-shadow:var(--shadow-green)}

/* Mega menu */
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);background:#fff;border:1px solid var(--gray-200);border-top:4px solid var(--green);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px;width:660px;display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;opacity:0;visibility:hidden;transition:.22s;z-index:60}
.navitem:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-item{position:relative}
.mega-main{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;transition:.18s}
.mega-main:hover{background:var(--blue-tint);transform:translateX(3px)}
.mega .mi{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.mega-item:nth-child(6n+1) .mi{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.mega-item:nth-child(6n+2) .mi{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.mega-item:nth-child(6n+3) .mi{background:linear-gradient(135deg,var(--cyan),var(--blue-dark))}
.mega-item:nth-child(6n+4) .mi{background:linear-gradient(135deg,var(--teal),var(--green-dark))}
.mega-item:nth-child(6n+5) .mi{background:linear-gradient(135deg,var(--blue-bright),var(--blue))}
.mega-item:nth-child(6n+6) .mi{background:linear-gradient(135deg,var(--green-bright),var(--green))}
.mega strong{display:block;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.3}
.mega span{font-size:12.5px;color:var(--gray-400);line-height:1.4}
.mega-foot{grid-column:1/-1;border-top:1px solid var(--gray-200);margin-top:10px;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:14px}

/* Electronic Connectors subcategory flyout (RJ45 / USB / HDMI / etc.) */
.mega-item.has-children>.mega-main::after{content:'';margin-left:auto;align-self:center;width:7px;height:7px;border-right:2px solid var(--gray-400);border-bottom:2px solid var(--gray-400);transform:rotate(-45deg);flex-shrink:0}
.mega-sub{position:absolute;top:calc(100% + 2px);left:0;width:270px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:70}
.mega-item.has-children:hover .mega-sub,.mega-item.has-children:focus-within .mega-sub{opacity:1;visibility:visible;transform:translateY(0)}
.mega-sub a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink);white-space:nowrap;transition:.15s}
.mega-sub a:hover{background:var(--blue-tint)}
.mega-sub a span{font-size:12px;color:var(--gray-400);flex-shrink:0}
/* ---------- IMAGE TREATMENT — richer, not washed out ---------- */
.ph{position:relative;overflow:hidden;background:#fff;display:block}
.ph img{
  width:100%;height:100%;object-fit:contain;
  filter:contrast(1.14) saturate(1.35) brightness(1.03);
  transition:transform .5s cubic-bezier(.4,0,.2,1),filter .3s;
}
.ph.cover img{object-fit:cover}
.ph:hover img{transform:scale(1.06);filter:contrast(1.18) saturate(1.5) brightness(1.05)}
.ph::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(8,17,31,.07);pointer-events:none}
.ph-fallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;color:var(--blue-dark);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:18px;background:linear-gradient(140deg,var(--blue-tint),var(--teal-light))}
.ph.failed .ph-fallback{display:grid}

/* ---------- BREADCRUMB / PAGE HEAD ---------- */
.crumbs{background:var(--white);border-bottom:1px solid var(--gray-200);font-size:13.5px}
.crumbs .wrap{display:flex;gap:9px;align-items:center;padding:13px 24px;flex-wrap:wrap}
.crumbs a{color:var(--blue-dark);font-weight:500}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs .sep{color:var(--gray-400)}
.crumbs .cur{color:var(--ink);font-weight:700}
.pagehead{
  padding:58px 0 50px;
  background:linear-gradient(135deg,var(--white) 0%,var(--blue-tint) 55%,var(--teal-light) 130%);
  border-bottom:1px solid var(--gray-200);position:relative;overflow:hidden;
}
.pagehead::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(10,95,224,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,95,224,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 45%,#000);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000);
}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{font-size:clamp(30px,3.8vw,46px);font-weight:700;color:var(--ink);margin-bottom:14px}
.pagehead p{font-size:18px;max-width:760px}

.eyebrow{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:8px 16px;border-radius:100px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,168,104,.28)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#fff}
.eyebrow.blue{background:linear-gradient(135deg,var(--blue),var(--blue-dark));box-shadow:0 4px 12px rgba(10,95,224,.28)}

.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(27px,3.2vw,39px);font-weight:700;margin-bottom:14px;color:var(--ink)}
.sec-head p{font-size:17.5px;line-height:1.62}
.bg-black .sec-head h2{color:#fff}
.bg-black .sec-head p{color:#B4C6DD}

/* ---------- GRIDS ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* ---------- CATEGORY CARDS ---------- */
.cat-card{background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s,border-color .26s;display:flex;flex-direction:column;position:relative}
.cat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;z-index:2;transition:.26s}
.cat-card:nth-child(6n+1)::before{background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
.cat-card:nth-child(6n+2)::before{background:linear-gradient(90deg,var(--green),var(--green-bright))}
.cat-card:nth-child(6n+3)::before{background:linear-gradient(90deg,var(--cyan),var(--blue-bright))}
.cat-card:nth-child(6n+4)::before{background:linear-gradient(90deg,var(--teal),var(--green-bright))}
.cat-card:nth-child(6n+5)::before{background:linear-gradient(90deg,var(--blue-dark),var(--blue))}
.cat-card:nth-child(6n+6)::before{background:linear-gradient(90deg,var(--green-dark),var(--green))}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:rgba(10,95,224,.45)}
.cat-card .ph{height:186px;background:#fff}
.cat-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.cat-card h3{font-size:18.5px;margin-bottom:8px}
.cat-card p{font-size:14.5px;line-height:1.6;flex:1;margin-bottom:15px}
.cat-link{font-size:14.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:7px;transition:gap .2s}
.cat-card:hover .cat-link{gap:12px}
.stock-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--green);padding:5px 11px;border-radius:6px;margin-bottom:11px;align-self:flex-start;box-shadow:0 2px 8px rgba(0,168,104,.3)}
.stock-tag .pip{width:6px;height:6px;border-radius:50%;background:#fff}
.stock-tag.blue{background:var(--blue);box-shadow:0 2px 8px rgba(10,95,224,.3)}
.stock-tag.gray{background:var(--gray-400);box-shadow:none}

/* ---------- PRODUCT GRID ---------- */
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:34px;align-items:start}
.filters{background:var(--panel);border:1px solid var(--gray-200);border-top:4px solid var(--blue);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:96px}
.filters h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;color:var(--blue-dark)}
.fgroup{border-top:1px solid var(--gray-200);padding-top:16px;margin-top:16px}
.fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fgroup h5{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}
.fopt{display:flex;align-items:center;gap:9px;font-size:14px;padding:6px 8px;margin:0 -8px;border-radius:7px;cursor:pointer;color:var(--gray-600);transition:.15s}
.fopt:hover{color:var(--blue-dark);background:var(--blue-tint)}
.fopt input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
.fopt .n{margin-left:auto;font-size:12px;color:#fff;background:var(--gray-400);border-radius:20px;padding:1px 8px;font-weight:600}
.fopt input:checked ~ .n{background:var(--blue)}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;padding:14px 18px;background:var(--panel);border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-sm)}
.shop-toolbar .count{font-size:14.5px}
.shop-toolbar .count strong{color:var(--blue-dark)}
.shop-toolbar select{font:inherit;font-size:14px;padding:9px 14px;border:1px solid var(--gray-200);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod-card{background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.26s;display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue)}
.prod-card .ph{height:170px;background:#fff}
.prod-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.sku{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--teal);margin-bottom:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prod-card h3{font-size:16px;margin-bottom:8px;line-height:1.35}
.prod-card h3 a:hover{color:var(--blue)}
.prod-meta{font-size:13px;color:var(--gray-600);margin-bottom:12px;line-height:1.5}
.price{font-family:'Space Grotesk';font-size:22px;font-weight:700;color:var(--blue-dark);margin-bottom:13px}
.price small{font-size:12.5px;font-weight:500;color:var(--gray-400);font-family:'Inter'}
.prod-actions{display:flex;gap:8px;margin-top:auto}
.prod-actions .btn{flex:1;padding:10px 12px;font-size:13.5px}

/* ---------- SINGLE PRODUCT ---------- */
.pdp{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.mr-buy-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:20px}
.mr-buy-row .buybox{margin:0}
.mr-buy-price{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.mr-buy-row-full{margin-top:8px}
@media(max-width:700px){.mr-buy-row{grid-template-columns:1fr;gap:16px}}
.gallery-main{border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-md)}
.gallery-main .ph{aspect-ratio:1/1;height:auto;max-width:520px;margin:0 auto;background:#fff}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px}
.gallery-docs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.gdoc{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1.5px solid var(--gray-200);border-radius:10px;background:var(--panel);text-decoration:none;transition:.2s;box-shadow:var(--shadow-sm)}
.gdoc:hover{border-color:var(--blue-bright);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gdoc:hover .gdoc-label{color:var(--blue-dark)}
.gdoc-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.03em;border-radius:7px;border:1.5px solid transparent;color:#fff}
.gdoc-label{font-size:13px;font-weight:600;color:var(--ink);transition:.2s}
.gdoc-pdf .gdoc-badge{background:#E8433A;border-color:#B92E27}
.gdoc-dwg .gdoc-badge{background:var(--blue);border-color:var(--blue-dark)}
.gdoc-info .gdoc-badge{background:var(--gray-600);border-color:var(--ink)}
body.theme-dark .gdoc{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.16)}
body.theme-dark .gdoc-label{color:#fff}
body.theme-dark .gdoc:hover .gdoc-label{color:var(--green-bright)}
.gallery-thumbs .ph{width:78px;height:78px;border:2px solid var(--gray-200);border-radius:10px;background:#fff;cursor:pointer;transition:.2s;flex-shrink:0}
.gallery-thumbs .ph.sel,.gallery-thumbs .ph:hover{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.pdp h1{font-size:clamp(26px,3vw,36px);font-weight:700;color:var(--ink);margin-bottom:12px}
.pdp-price{font-family:'Space Grotesk';font-size:36px;font-weight:700;color:var(--blue-dark);margin:18px 0 6px}
.pdp-price small{font-size:14px;font-weight:500;color:var(--gray-400);font-family:'Inter'}
.tier-table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.tier-table th,.tier-table td{padding:10px 13px;text-align:left;border:1px solid var(--gray-200)}
.tier-table th{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#fff;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;border-color:var(--blue-dark)}
.tier-table td:last-child{font-weight:700;color:var(--green-dark)}
.varselect{display:grid;gap:14px;margin:20px 0}
.varselect label{font-size:13px;font-weight:800;color:var(--ink);display:block;margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em}
.varselect select,.qty-input{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--gray-200);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.buybox{background:linear-gradient(135deg,var(--blue-tint),var(--teal-light));border:1px solid var(--blue-light);border-radius:var(--radius);padding:22px;margin:22px 0}
.buy-row{display:flex;gap:12px;align-items:stretch}
.qty-input{width:96px;text-align:center;font-weight:700}
.buy-row .btn{flex:1}
.buy-note{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-top:14px;color:var(--gray-600)}
.buy-note svg{flex-shrink:0;margin-top:3px;color:var(--green)}

/* Tabs */
.tabs{border-bottom:2px solid var(--gray-200);display:flex;gap:4px;margin-bottom:28px;overflow-x:auto}
.tab{padding:14px 20px;font-family:'Space Grotesk';font-weight:600;font-size:15.5px;color:var(--gray-600);border-bottom:4px solid transparent;cursor:pointer;white-space:nowrap;transition:.2s;background:none;border-top:0;border-left:0;border-right:0;margin-bottom:-2px}
.tab:hover{color:var(--blue);background:var(--blue-tint)}
.tab.on{color:var(--blue-dark);border-bottom-color:var(--green);background:var(--blue-tint)}
.tabpanel{display:none}
.tabpanel.on{display:block}

.spec-table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.spec-table tr:nth-child(odd){background:var(--blue-tint)}
.spec-table th{text-align:left;padding:12px 16px;font-weight:700;color:var(--ink);width:38%;border:1px solid var(--gray-200)}
.spec-table td{padding:12px 16px;border:1px solid var(--gray-200)}

/* Downloads */
.dl-list{display:grid;gap:11px}
.dl{display:flex;align-items:center;gap:15px;padding:16px 18px;border:1px solid var(--gray-200);border-radius:12px;background:#fff;transition:.22s;box-shadow:var(--shadow-sm)}
.dl:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateX(5px)}
.dl-ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.03em;color:#fff}
.dl-ico.pdf{background:linear-gradient(135deg,#E14434,#B32A1C)}
.dl-ico.xls{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.dl-ico.dwg{background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
.dl-ico.zip{background:linear-gradient(135deg,var(--teal),#0A6C7C)}
.dl-ico.info{background:linear-gradient(135deg,var(--amber-line),var(--amber-text))}
.dl-body{flex:1;min-width:0}
.dl-body strong{display:block;font-size:15px;color:var(--ink);font-weight:600;line-height:1.35}
.dl-body span{font-size:13px;color:var(--gray-400)}

/* ---------- CART ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 356px;gap:34px;align-items:start}
.cart-table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.cart-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-weight:700;padding:13px 16px;background:linear-gradient(135deg,var(--blue-dark),var(--blue))}
.cart-table th:first-child{border-radius:var(--radius) 0 0 0}
.cart-table th:last-child{border-radius:0 var(--radius) 0 0}
.cart-row td{padding:18px 16px;border-bottom:1px solid var(--gray-200);vertical-align:middle}
.cart-item{display:flex;gap:16px;align-items:center}
.cart-item .ph{width:82px;height:82px;border:1px solid var(--gray-200);border-radius:10px;background:#fff;flex-shrink:0}
.cart-item h4{font-size:15.5px;margin-bottom:4px}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--gray-200);border-radius:10px;overflow:hidden;background:#fff}
.qty-stepper button{width:34px;height:38px;border:0;background:var(--blue-tint);color:var(--blue-dark);font-size:17px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.qty-stepper button:hover{background:var(--blue);color:#fff}
.qty-stepper input{width:52px;height:38px;border:0;border-inline:1px solid var(--gray-200);text-align:center;font:inherit;font-weight:700;color:var(--ink)}
.line-total{font-family:'Space Grotesk';font-weight:700;font-size:17px;color:var(--blue-dark);text-align:right}
.rm{background:none;border:0;color:var(--gray-400);cursor:pointer;padding:6px 9px;border-radius:7px;transition:.18s;font-family:inherit}
.rm:hover{color:#fff;background:#E14434}
.summary{background:var(--panel);border:1px solid var(--gray-200);border-top:5px solid var(--green);border-radius:var(--radius);padding:26px;position:sticky;top:96px;box-shadow:var(--shadow-md)}
.mr-pdp .summary{top:0}
.summary h3{font-size:19px;margin-bottom:18px;color:var(--ink)}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15px}
.sum-row.total{border-top:2px solid var(--gray-200);margin-top:10px;padding-top:16px;font-family:'Space Grotesk';font-size:24px;font-weight:700;color:var(--blue-dark)}
.sum-row .free{color:var(--green-dark);font-weight:700}
.promo{display:flex;gap:8px;margin:16px 0}
.promo input{flex:1;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--gray-200);border-radius:9px;min-width:0}
.trust-strip{display:grid;gap:9px;margin-top:18px;padding:16px;border-radius:11px;background:var(--green-light)}
.trust-strip div{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--green-dark)}
.trust-strip svg{flex-shrink:0;margin-top:3px;color:var(--green-dark)}

/* ---------- CHECKOUT ---------- */
.steps{display:flex;gap:0;margin-bottom:36px;border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow-md)}
.step{flex:1;padding:17px 18px;display:flex;gap:11px;align-items:center;border-right:1px solid var(--gray-200);font-size:14.5px;font-weight:700;color:var(--gray-400)}
.step:last-child{border-right:0}
.step .n{width:27px;height:27px;border-radius:50%;background:var(--gray-100);color:var(--gray-400);display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.step.done{color:#fff;background:linear-gradient(135deg,var(--green),var(--green-dark))}
.step.done .n{background:#fff;color:var(--green-dark)}
.step.on{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.step.on .n{background:#fff;color:var(--blue-dark)}
.co-layout{display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);padding:26px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.panel h3{font-size:19px;margin-bottom:6px;color:var(--ink)}
.panel .hint{font-size:14px;color:var(--gray-600);margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:7px}
.field label .opt{font-weight:500;color:var(--gray-400);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:10px;background:#fff;color:var(--ink);transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-light)}
.field textarea{min-height:96px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.pay-opt{display:flex;gap:13px;align-items:flex-start;padding:16px;border:1.5px solid var(--gray-200);border-radius:12px;margin-bottom:11px;cursor:pointer;transition:.2s;background:#fff}
.pay-opt:hover{border-color:var(--blue);background:var(--blue-tint)}
.pay-opt.sel{border-color:var(--blue);background:var(--blue-tint);box-shadow:0 0 0 3px var(--blue-light)}
.pay-opt input{margin-top:4px;accent-color:var(--blue);width:17px;height:17px;flex-shrink:0}
.pay-opt strong{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.pay-opt span{font-size:13.5px;color:var(--gray-600);line-height:1.5}
.badge-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--blue-dark);background:#fff;border:1.5px solid var(--blue-light);border-radius:9px;padding:9px 14px;box-shadow:var(--shadow-sm)}
.badge svg{color:var(--green)}
.mini-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-200)}
.mini-item .ph{width:52px;height:52px;border:1px solid var(--gray-200);border-radius:9px;background:#fff;flex-shrink:0}
.mini-item .mi-body{flex:1;min-width:0}
.mini-item strong{font-size:14px;color:var(--ink);display:block;line-height:1.35}
.mini-item .mi-price{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--blue-dark)}

/* ---------- DROPZONE ---------- */
.dropzone{border:2.5px dashed var(--blue-light);border-radius:14px;padding:30px;text-align:center;background:linear-gradient(135deg,var(--blue-tint),var(--teal-light));transition:.22s;cursor:pointer}
.dropzone:hover{border-color:var(--blue);background:var(--blue-light);transform:translateY(-2px)}
.dropzone svg{color:var(--blue);margin:0 auto 12px}
.dropzone strong{display:block;font-size:15.5px;color:var(--blue-dark);margin-bottom:5px}
.dropzone span{font-size:13.5px;color:var(--gray-600)}

/* ---------- WHY / ICON LIST ---------- */
.why-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.why-visual{border-radius:var(--radius);overflow:hidden;height:420px;border:2px solid rgba(46,134,255,.3);box-shadow:var(--shadow-lg)}
.why-visual .ph{height:100%;background:var(--black-soft)}
.why-visual .ph img{object-fit:cover;filter:contrast(1.16) saturate(1.3) brightness(.95)}
.why-list{display:grid;gap:5px}
.why-item{display:flex;gap:16px;align-items:flex-start;padding:15px;border-radius:12px;transition:.22s}
.why-item:hover{background:rgba(46,134,255,.12)}
.why-check{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 3px 10px rgba(0,168,104,.4)}
.why-item h4{font-size:16.5px;margin-bottom:4px;color:#fff}
.why-item p{font-size:14.5px;line-height:1.58;color:#A9BDD6}
.icon-list{display:grid;gap:14px}
.icon-list .il{display:flex;gap:14px;align-items:flex-start}
.icon-list .ilc{width:33px;height:33px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 9px rgba(0,168,104,.3)}
.icon-list h4{font-size:16px;margin-bottom:3px}
.icon-list p{font-size:14.5px;line-height:1.55}

/* ---------- STATS ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{text-align:center;padding:32px 20px;background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:5px}
.stat:nth-child(1)::before{background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
.stat:nth-child(2)::before{background:linear-gradient(90deg,var(--green),var(--green-bright))}
.stat:nth-child(3)::before{background:linear-gradient(90deg,var(--cyan),var(--teal))}
.stat:nth-child(4)::before{background:linear-gradient(90deg,var(--teal),var(--green))}
.stat .num{font-family:'Space Grotesk';font-size:46px;font-weight:700;line-height:1;margin-bottom:9px;letter-spacing:-.03em;color:var(--blue-dark)}
.stat:nth-child(2) .num{color:var(--green-dark)}
.stat .num .unit{color:var(--green)}
.stat:nth-child(2) .num .unit{color:var(--blue)}
.stat .lbl{font-size:14.5px;font-weight:700;color:var(--gray-600)}
.stat.placeholder{border:2px dashed var(--amber-line);background:var(--amber-bg)}
.stat.placeholder::before{background:var(--amber-line)}
.stat.placeholder .num{color:var(--amber-text)}
.placeholder-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--amber-line);padding:4px 10px;border-radius:6px;margin-top:9px}

/* ---------- INDUSTRIES ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.ind-card{background:var(--panel);border:1px solid var(--gray-200);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;transition:.24s;box-shadow:var(--shadow-sm)}\n.ind-card .ph{height:138px}\n.ind-card .ind-body{display:flex;flex-direction:column;gap:5px;padding:16px 18px 18px}\n.ind-card .ind-desc{font-size:13px;line-height:1.5;color:var(--gray-600);margin:0;font-weight:400}
.ind-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green)}
.ind-card .ico{width:41px;height:41px;border-radius:10px;color:#fff;display:grid;place-items:center;flex-shrink:0;transition:.24s}
.ind-card:nth-child(6n+1) .ico{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.ind-card:nth-child(6n+2) .ico{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.ind-card:nth-child(6n+3) .ico{background:linear-gradient(135deg,var(--cyan),var(--blue-dark))}
.ind-card:nth-child(6n+4) .ico{background:linear-gradient(135deg,var(--teal),var(--green-dark))}
.ind-card:nth-child(6n+5) .ico{background:linear-gradient(135deg,var(--blue-bright),var(--blue))}
.ind-card:nth-child(6n+6) .ico{background:linear-gradient(135deg,var(--green-bright),var(--green))}
.ind-card:hover .ico{transform:scale(1.1) rotate(-4deg)}
.ind-card span{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}

/* ---------- TESTIMONIALS ---------- */
.testi{border:2px dashed var(--amber-line);border-radius:var(--radius);padding:28px 26px;background:var(--amber-bg);box-shadow:var(--shadow-sm)}
.testi .qm{font-family:'Space Grotesk';font-size:46px;line-height:1;color:var(--amber-line);margin-bottom:4px}
.testi p{font-size:15.5px;line-height:1.65;color:#8A6118;font-style:italic;margin-bottom:20px}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#F0D399,var(--amber-line));flex-shrink:0}
.testi .who div{font-size:13.8px;line-height:1.35}
.testi .who strong{color:var(--amber-text);display:block;font-weight:800}
.testi .who span{color:#A87616}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--gray-200);border-radius:12px;margin-bottom:12px;background:var(--panel);overflow:hidden;transition:.22s;box-shadow:var(--shadow-sm)}
.faq-item[open]{box-shadow:var(--shadow-md);border-color:var(--blue);border-left:5px solid var(--green)}
.faq-item summary{padding:19px 24px;cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;font-family:'Space Grotesk'}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue)}
.faq-plus{width:28px;height:28px;border-radius:8px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex-shrink:0;font-size:19px;line-height:1;font-weight:700;transition:.24s}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-body{padding:0 24px 22px;font-size:15.5px;line-height:1.68}
.faq-body a{color:var(--blue);font-weight:600}
.faq-body .todo{color:var(--amber-text);background:var(--amber-bg);border:1px solid var(--amber-line);padding:2px 9px;border-radius:6px;font-size:14px;font-weight:700}

/* ---------- INDUSTRY TABS ---------- */
.itabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;justify-content:center}
.itab{padding:10px 18px;border:1.5px solid var(--gray-200);border-radius:100px;font-size:14px;font-weight:600;color:var(--gray-600);background:var(--panel);cursor:pointer;transition:.2s;font-family:inherit}
.itab:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint);transform:translateY(-2px)}
.itab.on{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-color:var(--blue-dark);color:#fff;box-shadow:var(--shadow-blue)}

/* ---------- FINAL CTA ---------- */
.final-cta{background:linear-gradient(125deg,var(--black) 0%,var(--blue-deep) 45%,var(--blue-dark) 100%);position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px}
.final-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,134,255,.16),transparent 55%,rgba(0,168,104,.18))}
.final-cta .wrap{position:relative;z-index:1;text-align:center;max-width:800px}
.final-cta h2{font-size:clamp(27px,3.4vw,41px);color:#fff;margin-bottom:16px}
.final-cta p{font-size:18px;color:#C6D8EE;margin-bottom:30px}
.final-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer.site{background:linear-gradient(180deg,var(--black) 0%,#050C16 100%);color:#94A9C2;padding:60px 0 0;font-size:14.5px;border-top:4px solid var(--green)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:42px}
footer.site h4{font-size:14px;color:var(--green-bright);margin-bottom:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.foot-logo{background:#fff;border-radius:11px;padding:9px 13px;display:inline-block;margin-bottom:15px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.foot-logo img{height:44px;width:auto}
.foot-tagline{font-style:italic;color:#7D93AE;margin-bottom:17px;font-size:14px}
.foot-contact{display:grid;gap:9px}
.foot-contact div{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.foot-contact svg{flex-shrink:0;margin-top:3px;color:var(--green-bright)}
.foot-contact a{color:var(--blue-bright)}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site ul a:hover{color:var(--green-bright);padding-left:4px;display:inline-block;transition:.18s}
.newsletter{display:flex;gap:8px;margin-top:13px}
.newsletter input{flex:1;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:9px;padding:11px 14px;color:#fff;font-size:14px;font-family:inherit;min-width:0}
.newsletter input::placeholder{color:#71879F}
.newsletter input:focus{outline:none;border-color:var(--green-bright);background:rgba(255,255,255,.16)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#71879F}
.foot-bottom a:hover{color:var(--green-bright)}
.foot-legal{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- MOBILE STICKY ---------- */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:3px solid var(--green);padding:12px 16px;box-shadow:0 -6px 22px rgba(8,17,31,.18);gap:10px}
.mobile-cta .btn{flex:1}

/* ---------- GUIDE ---------- */
.guide{background:var(--panel);border-radius:var(--radius);padding:40px 46px;box-shadow:var(--shadow-md);border-top:5px solid var(--blue)}
.guide h2{margin-top:44px;margin-bottom:14px;font-size:29px;color:var(--blue-dark);padding-bottom:10px;border-bottom:3px solid var(--blue-light)}
.guide h3{margin-top:28px;margin-bottom:10px;font-size:20px;color:var(--ink)}
.guide p{margin-bottom:15px;font-size:16px;line-height:1.72}
.guide ul,.guide ol{margin:0 0 18px 22px}
.guide li{margin-bottom:9px;line-height:1.65}
.guide li::marker{color:var(--blue);font-weight:700}
.guide code{background:var(--blue-tint);border:1px solid var(--blue-light);border-radius:6px;padding:2px 8px;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue-dark);font-weight:600}
.guide table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;box-shadow:var(--shadow-sm);border-radius:10px;overflow:hidden}
.guide table th{background:linear-gradient(135deg,var(--blue-dark),var(--blue));text-align:left;padding:12px 15px;border:1px solid var(--blue-dark);font-weight:700;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.guide table td{padding:11px 15px;border:1px solid var(--gray-200);vertical-align:top;background:#fff}
.guide table tr:nth-child(even) td{background:var(--blue-tint)}
.callout{background:linear-gradient(135deg,var(--blue-tint),var(--teal-light));border-left:5px solid var(--blue);padding:18px 22px;border-radius:0 12px 12px 0;margin:22px 0;font-size:15px;color:var(--blue-dark);line-height:1.65;box-shadow:var(--shadow-sm)}
.toc{background:linear-gradient(135deg,var(--blue-deep),var(--blue-dark));border-radius:var(--radius);padding:26px 30px;margin-bottom:20px;color:#DCEAFF;box-shadow:var(--shadow-md)}
.toc h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;color:var(--green-bright)}
.toc ol{margin:0 0 0 20px}
.toc li::marker{color:var(--green-bright)}
.toc a{color:#DCEAFF}
.toc a:hover{color:#fff;text-decoration:underline}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  nav.main{display:none}
  .shop-layout,.cart-layout,.co-layout{grid-template-columns:1fr}
  .filters,.summary{position:static}
  .pdp{grid-template-columns:1fr;gap:34px}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .why-visual{height:280px}
  .grid-4,.stats-grid,.ind-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .guide{padding:30px 26px}
}
@media(max-width:860px){
  .section{padding:58px 0}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .header-cta .btn-primary{display:none}
  .utility-left .hide-sm{display:none}
  .steps{flex-direction:column}
  .step{border-right:0;border-bottom:1px solid var(--gray-200)}
  .step:last-child{border-bottom:0}
  .gallery-main .ph{aspect-ratio:1/1;height:auto;max-width:340px;margin:0 auto}
}
@media(max-width:560px){
  body{font-size:15.5px}
  .grid-4,.stats-grid,.ind-grid,.prod-grid{grid-template-columns:1fr}
  .mobile-cta{display:flex}
  footer.site{padding-bottom:76px}
  .logo-img{height:36px}
  .field-row,.field-row-3{grid-template-columns:1fr}
  .final-actions{flex-direction:column;align-items:stretch}
  .cart-table thead{display:none}
  .cart-row{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 0}
  .cart-row td{padding:0;border:0}
  .line-total{text-align:left}
  .guide{padding:24px 18px}
}

/* =========================================================
   THEME B — DARK + AMBER  (matches the branding.ai reference)
   Applied via <body class="theme-dark">. Token overrides do
   most of the work; component overrides follow.
   In Breakdance this is the same build with different
   Global Style values — no structural change.
   ========================================================= */
body.theme-dark{
  /* neutrals → warm charcoal */
  --page:#121216;
  --panel:#1B1B21;
  --panel-2:#232329;
  --ink:#FFFFFF;
  --black:#0B0B0E;
  --black-soft:#17171C;
  --gray-50:#1B1B21;
  --gray-100:#26262E;
  --gray-200:#33333D;
  --gray-400:#7A7A88;
  --gray-600:#ADADBA;

  /* primary accent → amber / gold */
  --blue:#D4AF37;
  --blue-dark:#A8821F;
  --blue-deep:#6B5214;
  --blue-bright:#F3DC96;
  --blue-light:#332A11;
  --blue-tint:#1F1A0C;

  /* secondary → keep a green for stock/status legibility */
  --green:#2FBF71;
  --green-dark:#1E9455;
  --green-bright:#5FE39A;
  --green-light:#14311F;

  --teal:#C9A227; --teal-light:#241E0D;
  --cyan:#E8CC74; --cyan-light:#241E0D;

  --amber-bg:#2A2310; --amber-line:#D4AF37; --amber-text:#EBD68F;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 3px 10px rgba(0,0,0,.35);
  --shadow-md:0 6px 18px rgba(0,0,0,.45),0 16px 36px rgba(0,0,0,.4);
  --shadow-lg:0 14px 34px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.5);
  --shadow-blue:0 8px 26px rgba(212,175,55,.36);
  --shadow-green:0 8px 24px rgba(47,191,113,.32);

  --radius:20px;

  background:var(--page);
  background-image:linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,0) 560px);
  background-repeat:no-repeat;
  color:var(--gray-600);
}

/* --- pill buttons, like the reference --- */
body.theme-dark .btn{border-radius:100px;font-weight:700}
body.theme-dark .btn-primary{
  background:linear-gradient(135deg,#F3DC96 0%,#D4AF37 34%,#A8821F 66%,#E4CE7E 100%);
  color:#1A1505;border-color:transparent;
  box-shadow:0 8px 26px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.45);}
body.theme-dark .btn-primary:hover{background:linear-gradient(135deg,#F0D68A,#F0A93B);color:#1A1505}
body.theme-dark .btn-green{background:linear-gradient(135deg,#3ED685,var(--green-dark));color:#04140B}
body.theme-dark .btn-secondary{background:transparent;color:var(--blue);border-color:rgba(212,175,55,.45)}
body.theme-dark .btn-secondary:hover{background:var(--blue);color:#1A1505;border-color:var(--blue)}
body.theme-dark .btn-on-dark{background:var(--blue);color:#1A1505}
body.theme-dark .btn-on-dark:hover{background:#fff;color:var(--black)}
body.theme-dark .btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
body.theme-dark .btn-ghost-light:hover{background:var(--blue);color:#1A1505;border-color:var(--blue)}

/* --- header: dark, glass, amber underline + amber pill CTA --- */
body.theme-dark header.site{
  background:rgba(15,15,19,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(212,175,55,.32);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
}
body.theme-dark header.site::before{background-image:none}
body.theme-dark .logo-link{background:rgba(255,255,255,.95);border-radius:14px}
body.theme-dark nav.main a.navlink{color:#C8C8D4;font-weight:600;border-radius:100px}
body.theme-dark nav.main a.navlink:hover{background:rgba(212,175,55,.16);color:var(--blue-bright)}
body.theme-dark nav.main a.navlink.active{background:rgba(212,175,55,.2);color:var(--blue);box-shadow:none}
body.theme-dark .header-cta .btn-primary{background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505;box-shadow:var(--shadow-blue)}
body.theme-dark .header-cta .btn-primary:hover{background:#F0D68A;color:#1A1505}
body.theme-dark .cart-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#E4E4EC;border-radius:100px}
body.theme-dark .cart-btn:hover{background:var(--blue);color:#1A1505;border-color:var(--blue)}
body.theme-dark .cart-count{background:var(--blue);color:#1A1505}
body.theme-dark .utility{background:#0B0B0E;color:#8C8C9B;border-bottom:1px solid rgba(255,255,255,.06)}
body.theme-dark .utility a:hover{color:var(--blue)}
body.theme-dark .utility-badge svg{color:var(--blue)}

/* --- surfaces --- */
body.theme-dark .bg-gray{background:var(--panel);border-block:1px solid var(--gray-200)}
body.theme-dark .bg-black{background:linear-gradient(140deg,#0B0B0E,#1C1808 60%,#282213);color:#B4B4C2}
body.theme-dark .bg-black::before{background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px)}
body.theme-dark .crumbs{background:var(--panel);border-bottom:1px solid var(--gray-200)}
body.theme-dark .crumbs a{color:var(--blue)}
body.theme-dark .crumbs .cur{color:#fff}
body.theme-dark .pagehead{
  background:linear-gradient(135deg,#101014 0%,#1A1608 60%,#241F0E 130%);
  border-bottom:1px solid rgba(212,175,55,.22);
}
body.theme-dark .pagehead::before{background-image:linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px)}
body.theme-dark .pagehead h1{color:#fff}
body.theme-dark .pagehead p{color:var(--gray-600)}

body.theme-dark .eyebrow{background:rgba(212,175,55,.16);color:var(--blue);box-shadow:none;border:1px solid rgba(212,175,55,.35)}
body.theme-dark .eyebrow .dot{background:var(--blue)}
body.theme-dark .eyebrow.blue{background:rgba(212,175,55,.16);color:var(--blue);box-shadow:none}
body.theme-dark .sec-head h2{color:#fff}

/* --- cards --- */
body.theme-dark .cat-card,
body.theme-dark .prod-card,
body.theme-dark .panel,
body.theme-dark .filters,
body.theme-dark .stat,
body.theme-dark .ind-card,
body.theme-dark .faq-item,
body.theme-dark .summary,
body.theme-dark .shop-toolbar,
body.theme-dark .dl,
body.theme-dark .gallery-main,
body.theme-dark .steps,
body.theme-dark .cart-table{background:var(--panel);border-color:var(--gray-200)}
body.theme-dark .cat-card h3,body.theme-dark .prod-card h3,body.theme-dark .panel h3,
body.theme-dark .ind-card span,body.theme-dark .dl-body strong,body.theme-dark .faq-item summary,
body.theme-dark .summary h3,body.theme-dark .icon-list h4,body.theme-dark .mini-item strong{color:#fff}
body.theme-dark .cat-card:hover,body.theme-dark .prod-card:hover{border-color:var(--blue)}
body.theme-dark .cat-link{color:var(--blue)}
body.theme-dark .price,body.theme-dark .pdp-price,body.theme-dark .line-total,
body.theme-dark .sum-row.total,body.theme-dark .mini-item .mi-price{color:var(--blue)}
body.theme-dark .sku{color:var(--blue-bright)}
body.theme-dark .pdp h1{color:#fff}

/* product photos stay on a light tile so parts pop off the dark page */
body.theme-dark .ph{background:#F2F2F4}
body.theme-dark .ph-fallback{background:linear-gradient(140deg,#2A2011,#1C1610);color:var(--blue)}

/* --- forms --- */
body.theme-dark .field input,body.theme-dark .field select,body.theme-dark .field textarea,
body.theme-dark .varselect select,body.theme-dark .promo input,body.theme-dark .shop-toolbar select,
body.theme-dark .qty-stepper input{background:#15151A;border-color:var(--gray-200);color:#fff}
body.theme-dark .field input::placeholder,body.theme-dark .field textarea::placeholder,
body.theme-dark .promo input::placeholder{color:#5E5E6B}
body.theme-dark .field input:focus,body.theme-dark .field select:focus,body.theme-dark .field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(212,175,55,.18)}
body.theme-dark .field label{color:#E4E4EC}
body.theme-dark .qty-stepper{background:#15151A;border-color:var(--gray-200)}
body.theme-dark .qty-stepper button{background:rgba(212,175,55,.14);color:var(--blue)}
body.theme-dark .qty-stepper button:hover{background:var(--blue);color:#1A1505}
body.theme-dark .pay-opt{background:#15151A;border-color:var(--gray-200)}
body.theme-dark .pay-opt:hover,body.theme-dark .pay-opt.sel{background:rgba(212,175,55,.1);border-color:var(--blue);box-shadow:0 0 0 3px rgba(212,175,55,.16)}
body.theme-dark .pay-opt strong{color:#fff}
body.theme-dark .dropzone{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.4)}
body.theme-dark .dropzone:hover{background:rgba(212,175,55,.14)}
body.theme-dark .dropzone strong{color:var(--blue)}
body.theme-dark .badge{background:#15151A;border-color:var(--gray-200);color:#E4E4EC}
body.theme-dark .badge svg{color:var(--blue)}

/* --- tables --- */
body.theme-dark .spec-table{background:var(--panel)}
body.theme-dark .spec-table tr:nth-child(odd){background:rgba(212,175,55,.05)}
body.theme-dark .spec-table th{color:#fff;border-color:var(--gray-200)}
body.theme-dark .spec-table td{border-color:var(--gray-200)}
body.theme-dark .tier-table{background:var(--panel)}
body.theme-dark .tier-table th{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:#1A1505;border-color:var(--blue-dark)}
body.theme-dark .tier-table td{border-color:var(--gray-200)}
body.theme-dark .tier-table td:last-child{color:var(--green-bright)}
body.theme-dark .cart-table th{background:linear-gradient(135deg,#241E0D,#332A11);color:var(--blue)}
body.theme-dark .cart-row td{border-bottom-color:var(--gray-200)}
body.theme-dark .cart-item h4{color:#fff}

/* --- accents --- */
body.theme-dark .stat .num,body.theme-dark .stat:nth-child(2) .num{color:var(--blue)}
body.theme-dark .stat .num .unit,body.theme-dark .stat:nth-child(2) .num .unit{color:var(--green-bright)}
body.theme-dark .stat.placeholder{background:rgba(212,175,55,.08);border-color:var(--blue)}
body.theme-dark .stat.placeholder .num{color:var(--blue-bright)}
body.theme-dark .placeholder-tag{background:var(--blue);color:#1A1505}
body.theme-dark .buybox{background:linear-gradient(135deg,rgba(212,175,55,.11),rgba(212,175,55,.04));border-color:rgba(212,175,55,.32)}
body.theme-dark .trust-strip{background:rgba(47,191,113,.1)}
body.theme-dark .trust-strip div,body.theme-dark .trust-strip svg{color:var(--green-bright)}
body.theme-dark .faq-plus{background:rgba(212,175,55,.16);color:var(--blue)}
body.theme-dark .faq-item[open]{border-color:var(--blue);border-left-color:var(--blue)}
body.theme-dark .faq-item[open] .faq-plus{background:var(--blue);color:#1A1505}
body.theme-dark .faq-body a{color:var(--blue)}
body.theme-dark .tab{color:var(--gray-400)}
body.theme-dark .tab:hover{background:rgba(212,175,55,.09);color:var(--blue)}
body.theme-dark .tab.on{background:rgba(212,175,55,.12);color:var(--blue);border-bottom-color:var(--blue)}
body.theme-dark .tabs{border-bottom-color:var(--gray-200)}
body.theme-dark .itab{background:var(--panel);border-color:var(--gray-200);color:var(--gray-600)}
body.theme-dark .itab:hover{background:rgba(212,175,55,.1);border-color:var(--blue);color:var(--blue)}
body.theme-dark .itab.on{background:linear-gradient(135deg,#E6C55C,var(--blue));border-color:var(--blue);color:#1A1505}
body.theme-dark .fopt:hover{background:rgba(212,175,55,.1);color:var(--blue)}
body.theme-dark .fopt input:checked ~ .n{background:var(--blue);color:#1A1505}
body.theme-dark .filters h4{color:var(--blue)}
body.theme-dark .fgroup h5{color:#E4E4EC}
body.theme-dark .why-visual{border-color:rgba(212,175,55,.3)}
body.theme-dark .why-item:hover{background:rgba(212,175,55,.1)}
body.theme-dark .why-check{background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505;box-shadow:0 3px 12px rgba(212,175,55,.4)}
body.theme-dark .icon-list .ilc{background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505;box-shadow:0 3px 10px rgba(212,175,55,.32)}
body.theme-dark .stock-tag{background:var(--green);color:#04140B;box-shadow:none}
body.theme-dark .stock-tag .pip{background:#04140B}
body.theme-dark .stock-tag.blue{background:var(--blue);color:#1A1505;box-shadow:none}
body.theme-dark .stock-tag.blue .pip{background:#1A1505}
body.theme-dark .mega{background:var(--panel-2);border-color:var(--gray-200);border-top-color:var(--blue)}
body.theme-dark .mega a:hover{background:rgba(212,175,55,.1)}
body.theme-dark .mega strong{color:#fff}
body.theme-dark .mega .mi,
body.theme-dark .mega a:nth-child(6n+1) .mi,body.theme-dark .mega a:nth-child(6n+2) .mi,
body.theme-dark .mega a:nth-child(6n+3) .mi,body.theme-dark .mega a:nth-child(6n+4) .mi,
body.theme-dark .mega a:nth-child(6n+5) .mi,body.theme-dark .mega a:nth-child(6n+6) .mi{
  background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505}
body.theme-dark .ind-card:hover{border-color:var(--blue)}
body.theme-dark .ind-card .ico,
body.theme-dark .ind-card:nth-child(6n+1) .ico,body.theme-dark .ind-card:nth-child(6n+2) .ico,
body.theme-dark .ind-card:nth-child(6n+3) .ico,body.theme-dark .ind-card:nth-child(6n+4) .ico,
body.theme-dark .ind-card:nth-child(6n+5) .ico,body.theme-dark .ind-card:nth-child(6n+6) .ico{
  background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.1));color:var(--blue)}
body.theme-dark .cat-card::before,
body.theme-dark .cat-card:nth-child(6n+1)::before,body.theme-dark .cat-card:nth-child(6n+2)::before,
body.theme-dark .cat-card:nth-child(6n+3)::before,body.theme-dark .cat-card:nth-child(6n+4)::before,
body.theme-dark .cat-card:nth-child(6n+5)::before,body.theme-dark .cat-card:nth-child(6n+6)::before{
  background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
body.theme-dark .stat::before,
body.theme-dark .stat:nth-child(1)::before,body.theme-dark .stat:nth-child(2)::before,
body.theme-dark .stat:nth-child(3)::before,body.theme-dark .stat:nth-child(4)::before{
  background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
body.theme-dark .step.done{background:linear-gradient(135deg,#3ED685,var(--green-dark));color:#04140B}
body.theme-dark .step.done .n{background:#04140B;color:var(--green-bright)}
body.theme-dark .step.on{background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505}
body.theme-dark .step.on .n{background:#1A1505;color:var(--blue)}
body.theme-dark .step{border-right-color:var(--gray-200);color:var(--gray-400)}
body.theme-dark .step .n{background:var(--gray-100);color:var(--gray-400)}
body.theme-dark .testi{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.4)}
body.theme-dark .testi p{color:var(--blue-bright)}
body.theme-dark .testi .who strong{color:var(--blue)}
body.theme-dark .testi .who span{color:#A89769}
body.theme-dark .testi .avatar{background:linear-gradient(135deg,#4E4018,#332A11)}
body.theme-dark .testi .qm{color:var(--blue)}
body.theme-dark .final-cta{background:linear-gradient(130deg,#0B0B0E,#1C1808 48%,#2A2310)}
body.theme-dark .final-cta::after{background:linear-gradient(180deg,rgba(212,175,55,.10),transparent 50%,rgba(212,175,55,.16))}
body.theme-dark .final-cta p{color:#C4C4D2}
body.theme-dark footer.site{background:linear-gradient(180deg,#0B0B0E,#08080A);border-top:2px solid rgba(212,175,55,.4);color:#8C8C9B}
body.theme-dark footer.site h4{color:var(--blue)}
body.theme-dark footer.site ul a:hover{color:var(--blue)}
body.theme-dark .foot-contact svg{color:var(--blue)}
body.theme-dark .foot-contact a{color:var(--blue-bright)}
body.theme-dark .newsletter input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
body.theme-dark .newsletter input:focus{border-color:var(--blue)}
body.theme-dark .foot-bottom a:hover{color:var(--blue)}
body.theme-dark .mobile-cta{background:var(--panel);border-top:2px solid var(--blue)}
body.theme-dark .bd-note{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.35);color:var(--blue)}
body.theme-dark .anno{background:rgba(212,175,55,.1);border-left-color:var(--blue);color:var(--blue-bright)}
body.theme-dark .anno strong{color:var(--blue)}
body.theme-dark .anno a{color:var(--blue)}
body.theme-dark .guide{background:var(--panel);border-top-color:var(--blue)}
body.theme-dark .guide h2{color:var(--blue);border-bottom-color:rgba(212,175,55,.3)}
body.theme-dark .guide h3{color:#fff}
body.theme-dark .guide code{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.3);color:var(--blue-bright)}
body.theme-dark .guide table th{background:linear-gradient(135deg,#332A11,#4E4018);color:var(--blue);border-color:var(--gray-200)}
body.theme-dark .guide table td{background:var(--panel-2);border-color:var(--gray-200)}
body.theme-dark .guide table tr:nth-child(even) td{background:rgba(212,175,55,.05)}
body.theme-dark .callout{background:rgba(212,175,55,.1);border-left-color:var(--blue);color:var(--blue-bright)}
body.theme-dark .toc{background:linear-gradient(135deg,#1F1A0C,#332A11);color:#D8D8E2}
body.theme-dark .toc h4,body.theme-dark .toc li::marker{color:var(--blue)}
body.theme-dark .toc a{color:#D8D8E2}
body.theme-dark .guide li::marker{color:var(--blue)}
body.theme-dark .mockup-banner{background:linear-gradient(90deg,#0B0B0E,#332A11 60%,#6B5214);color:#E8D3AC}

/* ---------- HERO + LOGO BAR (shared, theme-aware) ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 82px;background:linear-gradient(180deg,var(--white) 0%,var(--blue-tint) 100%)}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(10,95,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(10,95,224,.06) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,#000,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero-card{background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.hero-float{position:absolute;top:26px;left:-30px;background:var(--black);color:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:15px 20px;display:flex;align-items:center;gap:13px;z-index:2}
.logobar{background:var(--white);border-block:1px solid var(--gray-200);padding:30px 0}
.brand-chip{background:var(--panel);border:1px solid var(--gray-200);border-radius:100px;padding:13px 28px;font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--ink);box-shadow:var(--shadow-sm);transition:.2s;display:inline-block}
.brand-chip:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.brand-chip.ghost{color:var(--gray-400);border-style:dashed;background:transparent;box-shadow:none;font-size:13px;font-weight:500;font-family:'Inter'}
.brand-chip.ghost:hover{transform:none;box-shadow:none;border-color:var(--gray-200)}

/* dark-theme hero — flat wash, no circular glow */
body.theme-dark .hero{
  background:linear-gradient(180deg,#101014 0%,#181410 100%);
}
body.theme-dark .hero::before{
  background-image:linear-gradient(rgba(212,175,55,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.07) 1px,transparent 1px);
}
body.theme-dark .hero-card{background:var(--panel-2);border-color:rgba(212,175,55,.25);box-shadow:0 20px 60px rgba(0,0,0,.6)}
body.theme-dark .hero-card h4{color:#fff}
body.theme-dark .hero-float{background:linear-gradient(135deg,#E6C55C,var(--blue));color:#1A1505;box-shadow:0 10px 30px rgba(212,175,55,.45)}
body.theme-dark .hero-float span{color:#1A1505!important}
body.theme-dark .logobar{background:var(--panel);border-block-color:var(--gray-200)}
body.theme-dark .brand-chip{background:var(--panel-2);border-color:var(--gray-200);color:#fff}
body.theme-dark .brand-chip:hover{border-color:var(--blue)}
body.theme-dark .brand-chip.ghost{color:var(--gray-400);background:transparent}

/* theme toggle chip in the mockup banner */
.theme-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;font:inherit;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.theme-btn:hover{background:#fff;color:#0B0B0E}

/* =========================================================
   LOGO LOCKUP — the real Micro-Ray logo sits on a WHITE plate
   with a gold frame, so it stays legible on the black theme.
   ========================================================= */
.logo-link{padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;flex-shrink:0}
.mr-lockup{
  display:inline-flex;align-items:center;gap:12px;
  background:#FFFFFF;
  padding:8px 18px 8px 12px;
  border-radius:14px;
  border:2px solid #D4AF37;
  box-shadow:0 6px 22px rgba(0,0,0,.42), 0 0 0 1px rgba(212,175,55,.35), inset 0 0 0 1px rgba(255,255,255,.9);
  transition:.24s;
}
.logo-link:hover .mr-lockup{
  box-shadow:0 10px 30px rgba(212,175,55,.45), 0 0 0 1px #D4AF37, inset 0 0 0 1px #fff;
  transform:translateY(-2px);
}
.mr-plate{display:inline-grid;place-items:center}
.mr-real{display:block;width:auto}
.mr-fallback{display:none}
.mr-lockup.no-img .mr-real{display:none}
.mr-lockup.no-img .mr-fallback{display:block}

/* wordmark — dark on the white plate, gold sub-line */
.mr-words{display:flex;flex-direction:column;line-height:1.05}
.mr-name{
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:21px;letter-spacing:.4px;
  color:#12100A;white-space:nowrap;
}
.mr-sub2{
  font-family:Inter,sans-serif;font-size:9.2px;font-weight:700;letter-spacing:3.2px;
  color:#A8821F;white-space:nowrap;margin-top:3px;
}
/* If the real logo already contains the company name, hide the typeset words:
   just delete the next rule. */
.mr-lockup:not(.no-img) .mr-words{display:none}
.mr-lockup:not(.no-img){padding:8px 14px}

/* footer uses the same white plate so the logo reads on the dark footer */
.foot-logo{background:transparent;box-shadow:none;padding:0;border:0;display:inline-block}
.foot-logo .mr-lockup{box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.4)}

/* light theme: softer frame, same white plate */
body:not(.theme-dark) .mr-lockup{
  border-color:rgba(212,175,55,.75);
  box-shadow:0 3px 12px rgba(8,17,31,.12), 0 0 0 1px rgba(212,175,55,.2);
}
@media(max-width:1180px){.mr-name{font-size:19px}.mr-sub2{font-size:8.4px;letter-spacing:2.6px}}
@media(max-width:620px){.mr-words{display:none}.mr-lockup{padding:7px 11px}}

/* product artwork tiles read as studio shots on both themes */
.ph{background:#0F0F14}
body.theme-dark .ph{background:#0F0F14}
.cat-card .ph,.prod-card .ph,.res-card .ph,.gallery-main .ph,.hero-card .ph{background:#0F0F14}
.ph img{filter:contrast(1.06) saturate(1.12) brightness(1.02)}
.ph:hover img{filter:contrast(1.1) saturate(1.22) brightness(1.05)}
.gallery-thumbs .ph{background:#0F0F14}
.cart-item .ph,.mini-item .ph{background:#0F0F14}
/* artwork should never crop — these are drawn to frame */
.why-visual .ph img{object-fit:contain}
.hero-card .ph img,.cat-card .ph img,.prod-card .ph img,.res-card .ph img{object-fit:contain}

/* content layers sit above the background trace.
   .wrap is transparent, so the trace still shows through the empty space
   inside it — but every word, image and card paints on top of the trace. */
header.site,footer.site,.mockup-banner,.mobile-cta,.utility{position:relative;z-index:40}
.wrap,.wrap-narrow,.anno,.ph,img,h1,h2,h3,h4,h5,p,ul,ol,table,form,
.sec-head,.icon-list,.why-list,.foot-grid,.foot-bottom{position:relative;z-index:2}
.cat-card,.prod-card,.panel,.filters,.summary,.stat,.faq-item,.ind-card,
.testi,.res-card,.gallery-main,.cart-table,.steps,.guide,.toc,.dl,.hero-card,
.brand-chip,.badge,.btn{position:relative;z-index:3}

/* =========================================================
   BORDER-FOLLOWING PULSE — single, criss-crossing
   ONE bright amber pulse. It enters at the TOP LEFT of the page, runs along
   the borders of the first row of frames left to right, drops down the right
   edge, runs the next row right to left, drops down the left edge, and keeps
   criss-crossing until it exits at the BOTTOM RIGHT.
   Frame positions are read from the live layout, so it adapts to any page.
   Breakdance: one Code Block in the global Header template.
   ========================================================= */
.lpath{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
.lpath svg{display:block;overflow:visible}
.lpath path{fill:none;stroke-linecap:round;stroke-linejoin:round}

.lp-base{stroke:var(--blue);stroke-width:.9;opacity:.11}

/* ONE pulse, built from three concentric dashes travelling together so the
   front and back fade away softly instead of ending on a hard edge. */
.lp-halo{           /* soft leading and trailing edge */
  stroke:#C6B181;stroke-width:2.6;opacity:.22;stroke-linecap:round;
  filter:blur(1.8px);
  animation:lpRun 140s linear infinite;
}
.lp-flow{           /* mid body */
  stroke:#D2BD8B;stroke-width:2.3;opacity:.44;stroke-linecap:round;
  filter:blur(.7px);
  animation:lpRun 140s linear infinite;
}
.lp-comet{          /* bright core */
  stroke:#E2CE9C;stroke-width:2.1;opacity:.88;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(226,206,156,.45));
  animation:lpRun 140s linear infinite;
}
@keyframes lpRun{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:calc(var(--period,1200) * -1px)}
}
/* solder vias at every corner of the L */
.lp-via{
  fill:none;stroke:var(--blue);stroke-width:1;opacity:.35;
  filter:none;
  animation:none;
}
.lp-via:nth-child(even){animation-delay:-2.3s}
@keyframes viaPulse{
  0%,100%{opacity:.45;r:3.4}
  50%{opacity:.9;r:4.8}
}

/* light theme: the same route, in blue */
body:not(.theme-dark) .lp-base{stroke:var(--blue);opacity:.16}
body:not(.theme-dark) .lp-halo{stroke:#8FB6EC;opacity:.14}
body:not(.theme-dark) .lp-flow{stroke:#84AEE9;opacity:.26}
body:not(.theme-dark) .lp-comet{stroke:#79A8E6;opacity:.55;filter:drop-shadow(0 0 3px rgba(121,168,230,.3))}
body:not(.theme-dark) .lp-via{stroke:var(--blue);filter:drop-shadow(0 0 5px rgba(10,95,224,.45))}

@media(max-width:1000px){.lpath{display:none}}
@media (prefers-reduced-motion: reduce){
  .lp-halo,.lp-flow,.lp-comet,.lp-via{animation:none}
  .lp-halo,.lp-flow,.lp-comet{opacity:0}
  .lp-base{opacity:.25}
}


/* =========================================================
   LIVE SHIPPING RATES + CARD FORM
   ========================================================= */
.rates-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rates-live{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--green-dark);background:var(--green-light);border-radius:8px;padding:8px 13px}
.rates-live .pip{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,168,104,.7);animation:pipPulse 2s ease-out infinite}
@keyframes pipPulse{0%{box-shadow:0 0 0 0 rgba(0,168,104,.55)}70%{box-shadow:0 0 0 8px rgba(0,168,104,0)}100%{box-shadow:0 0 0 0 rgba(0,168,104,0)}}
body.theme-dark .rates-live{color:var(--green-bright);background:rgba(47,191,113,.13)}

.rate-opt{align-items:center;gap:14px}
.carrier{
  width:62px;height:38px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#fff;
}
.carrier.ups{background:linear-gradient(135deg,#6B4A28,#3E2A14);color:#F0C24B}
.carrier.fedex{background:linear-gradient(135deg,#4D148C,#2E0C55);color:#FF7A2F;font-size:11px}
.carrier.usps{background:linear-gradient(135deg,#1B3D8F,#0E2456);color:#fff;font-size:11px}
.carrier.own{background:var(--gray-100);color:var(--gray-600)}
body.theme-dark .carrier.own{background:#26262E;color:var(--gray-400)}
.rate-body{flex:1;min-width:0}
.rate-body strong{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.rate-body span{font-size:13px;color:var(--gray-600);line-height:1.45}
body.theme-dark .rate-body strong{color:#fff}
.rate-price{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--blue);flex-shrink:0}

/* card entry */
.cardmarks{display:flex;gap:6px;align-items:center;margin-left:auto;flex-shrink:0}
.cm{
  height:24px;min-width:38px;padding:0 7px;border-radius:5px;display:grid;place-items:center;
  font-family:Inter,sans-serif;font-size:9px;font-weight:800;font-style:normal;letter-spacing:.04em;color:#fff;
}
.cm.visa{background:#1A1F71}
.cm.mc{background:linear-gradient(90deg,#EB001B 0 50%,#F79E1B 50% 100%)}
.cm.amex{background:#006FCF}
.cm.disc{background:#F26E21;color:#3A1B00}
.cm.live{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.card-input{position:relative}
.card-input input{padding-right:66px;letter-spacing:1.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card-form{
  border:1.5px solid var(--blue);border-top:0;
  border-radius:0 0 12px 12px;
  padding:20px 18px 18px;margin:-13px 0 14px;
  background:var(--blue-tint);
}
body.theme-dark .card-form{background:rgba(212,175,55,.06)}
.secured{
  display:flex;gap:9px;align-items:flex-start;font-size:12.8px;line-height:1.5;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-200);color:var(--gray-600);
}
.secured svg{flex-shrink:0;margin-top:2px;color:var(--green)}
.secured a{color:var(--blue);font-weight:600}
@media(max-width:620px){
  .rate-opt{flex-wrap:wrap}
  .rate-price{width:100%;text-align:right}
  .cardmarks{display:none}
}

/* ---- Made to Order ---- */
.mto-badge{display:inline-block;padding:4px 11px;border-radius:999px;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.45);color:var(--blue-bright);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.mto-badge-tile{position:absolute;top:12px;left:12px;z-index:4}
.mto-block{margin:14px 0 18px;padding:14px 16px;border:1px solid rgba(212,175,55,.28);border-left:3px solid var(--blue);border-radius:8px;background:rgba(212,175,55,.05)}
.mto-lead{font-weight:600;color:var(--ink);margin-left:6px}
.mto-stock{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:var(--green-light);color:var(--green-dark);font-size:12px;font-weight:700;vertical-align:middle}
.mto-note{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--gray-400)}
.mto-note a{color:var(--blue-bright);text-decoration:underline}
.price-on-request{font-weight:700;color:var(--blue-bright)}
.btn-quote{display:inline-block;margin-top:6px}
ul.products li.product{position:relative}
p.stock.made-to-order{color:var(--blue-bright);font-weight:600}

/* ---- Spreadsheet catalogue ---- */
.mr-viewbar{display:flex;align-items:center;gap:8px;margin:0 0 16px;position:relative;z-index:3}
.mr-viewbar-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400)}
.mr-viewbtn{display:inline-block;padding:6px 14px;border:1px solid rgba(212,175,55,.32);border-radius:7px;font-size:13px;font-weight:600;color:var(--gray-400);text-decoration:none}
.mr-viewbtn:hover{border-color:rgba(212,175,55,.6);color:var(--ink)}
.mr-viewbtn.is-on{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.7);color:var(--blue-bright)}
.mr-tablewrap{position:relative;z-index:3;overflow-x:auto;border:1px solid rgba(212,175,55,.2);border-radius:10px;background:rgba(18,20,23,.55)}
table.mr-parts{width:100%;border-collapse:collapse;font-size:13.5px;min-width:880px}
table.mr-parts thead th{position:sticky;top:0;z-index:2;background:#15181c;color:var(--blue-bright);text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid rgba(212,175,55,.3);white-space:nowrap}
table.mr-parts th.sortable{cursor:pointer;user-select:none}
table.mr-parts th.sortable:hover,table.mr-parts th.sorted{color:#fff}
table.mr-parts tbody tr{border-bottom:1px solid rgba(255,255,255,.055);cursor:pointer;transition:background .13s ease}
table.mr-parts tbody tr:hover{background:rgba(212,175,55,.07)}
table.mr-parts td{padding:11px 14px;vertical-align:middle}table.mr-parts td.c-img{width:104px;min-width:104px;padding:8px 10px}
table.mr-parts td.c-img img{width:84px;height:84px;min-width:84px;min-height:84px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,.05);display:block}
.mr-part{font-family:'Space Grotesk',Inter,sans-serif;font-weight:600;font-size:13.5px;color:var(--blue-bright);text-decoration:none;white-space:nowrap}
.mr-part:hover{text-decoration:underline}
table.mr-parts td.c-desc{max-width:430px}
.mr-title{display:block;color:var(--ink);text-decoration:none;font-weight:500;line-height:1.35}
.mr-title:hover{color:var(--blue-bright)}
.mr-blurb{display:block;margin-top:3px;color:var(--gray-400);font-size:12.3px;line-height:1.45}
.mr-doc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;font-family:'Space Grotesk',Inter,sans-serif;font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;text-decoration:none;box-shadow:var(--shadow-sm);border:1.5px solid transparent;transition:.15s}
.mr-doc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mr-doc-pdf{background:#E8433A;border-color:#B92E27}
.mr-doc-dwg{background:var(--blue);border-color:var(--blue-dark)}
.mr-doc-info{background:var(--gray-600);border-color:var(--ink)}
.mr-none{color:var(--gray-400);opacity:.6;font-size:13px}
table.mr-parts td.c-price{white-space:nowrap;font-weight:600;color:var(--ink)}
table.mr-parts td.c-avail{white-space:nowrap}
.mr-lead{display:block;margin-top:4px;font-size:11.5px;color:var(--gray-400)}
.mr-instock{color:#6FCF97;font-weight:600}
.mr-out{color:var(--gray-400)}
.mr-buy{display:flex;gap:6px;align-items:center;margin:0}
.mr-qty{width:58px;padding:6px 8px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.05);color:var(--ink);font-size:13px;text-align:center}
table.mr-parts td.c-buy{white-space:nowrap}
.mr-parts .btn-sm{padding:6px 13px;font-size:12.5px}
@media(max-width:900px){.mr-tablewrap{border-radius:8px}table.mr-parts{font-size:12.5px}table.mr-parts td.c-desc{max-width:260px}.mr-blurb{display:none}}
/* ================= MR-WC-SKIN : WooCommerce cart & checkout ================= */
.mr-wc .woocommerce{max-width:none}
.mr-wc-inner{position:relative;z-index:3}
.mr-wc .woocommerce-notices-wrapper .woocommerce-message,
.mr-wc .woocommerce-info,.mr-wc .woocommerce-error{list-style:none;margin:0 0 20px;padding:14px 18px;border-radius:10px;border:1px solid var(--gray-200);background:var(--panel);color:var(--ink);font-size:14px}
.mr-wc .woocommerce-message{border-left:3px solid var(--green);}
.mr-wc .woocommerce-info{border-left:3px solid var(--blue)}
.mr-wc .woocommerce-error{border-left:3px solid #E4572E}

/* --- tables (cart + order review) --- */
.mr-wc table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;background:var(--panel);margin:0 0 26px}
.mr-wc table.shop_table th{background:var(--panel-2);color:var(--blue-bright);text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:13px 16px;border-bottom:1px solid var(--gray-200)}
.mr-wc table.shop_table td{padding:15px 16px;border-bottom:1px solid var(--gray-100);color:var(--ink);font-size:14px;vertical-align:middle}
.mr-wc table.shop_table tr:last-child td{border-bottom:none}
.mr-wc table.shop_table img{width:56px;height:56px;min-width:56px;min-height:56px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,.05)}
.mr-wc .product-name a{color:var(--ink);text-decoration:none;font-weight:600}
.mr-wc .product-name a:hover{color:var(--blue-bright)}
.mr-wc .product-price,.mr-wc .product-subtotal,.mr-wc td.product-total{font-weight:600;white-space:nowrap}
.mr-wc .variation,.mr-wc dl.variation{margin:6px 0 0;font-size:12.5px;color:var(--gray-400)}
.mr-wc dl.variation dt,.mr-wc dl.variation dd{display:inline;margin:0 4px 0 0}
.mr-wc a.remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--gray-100);color:var(--gray-400)!important;text-decoration:none;font-size:16px;line-height:1}
.mr-wc a.remove:hover{background:#E4572E;color:#fff!important}
/* --- form fields --- */
.mr-wc .form-row{display:block;margin:0 0 16px;padding:0}
.mr-wc .form-row label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--gray-600)}
.mr-wc .required{color:var(--blue)}
.mr-wc input[type=text],.mr-wc input[type=email],.mr-wc input[type=tel],.mr-wc input[type=password],
.mr-wc input[type=number],.mr-wc textarea,.mr-wc select,.mr-wc .select2-selection{
  width:100%;padding:11px 13px;border:1px solid var(--gray-200);border-radius:9px;
  background:var(--panel-2);color:var(--ink);font-size:14px;font-family:inherit;line-height:1.4}
.mr-wc textarea{min-height:96px;resize:vertical}
.mr-wc input:focus,.mr-wc textarea:focus,.mr-wc select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(212,175,55,.16)}
.mr-wc .select2-container--default .select2-selection--single{height:auto;border:1px solid var(--gray-200);background:var(--panel-2)}
.mr-wc .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.4;padding-left:0}
.mr-wc .form-row-first,.mr-wc .form-row-last{width:48.5%;float:left}
.mr-wc .form-row-last{float:right}
.mr-wc .clear{clear:both}

/* --- panels: contact / shipping / payment --- */
.mr-wc #customer_details{display:grid;grid-template-columns:1fr;gap:0}
.mr-wc .woocommerce-billing-fields,.mr-wc .woocommerce-shipping-fields,
.mr-wc .woocommerce-additional-fields,.mr-wc #order_review{
  background:var(--panel);border:1px solid var(--gray-200);border-radius:14px;padding:24px 26px;margin:0 0 22px}
.mr-wc h3,.mr-wc .woocommerce-billing-fields h3,.mr-wc #order_review_heading{
  margin:0 0 18px;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mr-wc #order_review_heading{margin-top:0}

/* --- shipping method rows --- */
.mr-wc #shipping_method{list-style:none;margin:0;padding:0}
.mr-wc #shipping_method li{display:flex;align-items:center;gap:10px;padding:13px 15px;margin:0 0 9px;
  border:1px solid var(--gray-200);border-radius:10px;background:var(--panel-2);cursor:pointer}
.mr-wc #shipping_method li:hover{border-color:rgba(212,175,55,.55)}
.mr-wc #shipping_method li label{margin:0;font-size:14px;font-weight:500;color:var(--ink);flex:1;cursor:pointer}
.mr-wc #shipping_method li input{width:auto;margin:0}
.mr-wc #shipping_method .amount{font-weight:700;color:var(--blue-bright)}
/* --- payment methods --- */
.mr-wc .wc_payment_methods{list-style:none;margin:0 0 18px;padding:0}
.mr-wc .wc_payment_method{padding:14px 16px;margin:0 0 10px;border:1px solid var(--gray-200);border-radius:10px;background:var(--panel-2)}
.mr-wc .wc_payment_method>label{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.mr-wc .wc_payment_method input[type=radio]{width:auto;margin:0}
.mr-wc .payment_box{margin:12px 0 0;padding:13px 15px;border-radius:9px;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.25);font-size:13.5px;line-height:1.6;color:var(--gray-600)}
.mr-wc .payment_box p:last-child{margin-bottom:0}
.mr-wc .woocommerce-terms-and-conditions-wrapper{margin:14px 0 0;font-size:13px;color:var(--gray-600)}

/* --- totals / summary --- */
.mr-wc .cart_totals,.mr-wc #order_review{background:var(--panel);border:1px solid rgba(212,175,55,.3);border-radius:14px;padding:24px 26px}
.mr-wc .cart_totals h2{margin:0 0 16px;font-size:18px;color:var(--ink)}
.mr-wc .cart_totals table,.mr-wc #order_review table.shop_table{border:none;background:none;margin:0}
.mr-wc .cart_totals table th,.mr-wc #order_review table.shop_table tfoot th{background:none;text-transform:none;letter-spacing:0;font-size:14px;color:var(--gray-600);border:none;padding:9px 0;font-weight:500}
.mr-wc .cart_totals table td,.mr-wc #order_review table.shop_table tfoot td{border:none;padding:9px 0;text-align:right;font-weight:600}
.mr-wc .order-total th,.mr-wc .order-total td{border-top:1px solid var(--gray-200)!important;padding-top:15px!important;font-size:17px!important;color:var(--ink)!important;font-weight:700!important}
.mr-wc .order-total .amount{color:var(--blue-bright)}

/* --- buttons --- */
.mr-wc .button,.mr-wc button.button,.mr-wc input.button,.mr-wc #place_order,
.mr-wc .checkout-button{display:inline-block;padding:13px 26px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#17140A;font-weight:700;
  font-size:15px;letter-spacing:.01em;cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .12s ease,box-shadow .12s ease}
.mr-wc .button:hover,.mr-wc #place_order:hover,.mr-wc .checkout-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(212,175,55,.28);color:#17140A}
.mr-wc #place_order,.mr-wc .checkout-button{width:100%;padding:15px 26px;font-size:16px}
.mr-wc .coupon .button,.mr-wc button[name=update_cart]{background:transparent;border:1px solid var(--gray-200);color:var(--ink);font-weight:600}
.mr-wc .coupon{display:flex;gap:9px;align-items:center;margin:0 0 18px}
.mr-wc .coupon input[type=text]{max-width:230px}
.mr-wc .actions{padding:18px 0 0}

/* --- two-column checkout on wide screens --- */
@media(min-width:981px){
  .mr-wc form.checkout{display:grid;grid-template-columns:1.35fr .9fr;gap:30px;align-items:start}
  .mr-wc form.checkout #customer_details{grid-column:1;margin:0}
  .mr-wc form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px}
  .mr-wc form.checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:96px;margin:0}
  .mr-wc .cart-collaterals{display:flex;justify-content:flex-end}
  .mr-wc .cart_totals{width:420px}
}
@media(max-width:980px){.mr-wc .form-row-first,.mr-wc .form-row-last{width:100%;float:none}}
.cart-count:empty{display:none}

/* =====================================================================
   SEAHAWKS LIGHT PALETTE
   College Navy #002244 - Action Green #00A868 - Wolf Grey #A5ACAF
   Page sits on light grey; cards stay white so they lift off it.
   The dark charcoal-and-gold palette above is untouched and still
   available from Appearance > Customise > Micro-Ray Colour Scheme.
   ===================================================================== */
body.theme-light{
  --page:#E8ECEF;
  --panel:#FFFFFF;
  --panel-2:#F2F5F7;
  --ink:#0B1B2E;
  --black:#002244;
  --black-soft:#00182F;
  --gray-50:#F4F6F8;
  --gray-100:#E6EAEE;
  --gray-200:#CDD5DA;
  --gray-400:#7C8A93;
  --gray-600:#41525E;
  --white:#FFFFFF;

  --blue:#002244;
  --blue-dark:#001A34;
  --blue-deep:#000F20;
  --blue-bright:#0B4F91;
  --blue-light:#DBE5EF;
  --blue-tint:#EDF2F7;

  --green:#00A868;
  --green-dark:#017B4D;
  --green-bright:#2FD68F;
  --green-light:#D8F7E8;

  --teal:#A5ACAF;
  --teal-light:#EFF1F2;
  --cyan:#0B4F91;
  --cyan-light:#E6EEF6;

  --amber-bg:#FFF4DC; --amber-line:#E9A21B; --amber-text:#8A5300;
  --shadow-blue:0 8px 22px rgba(0,34,68,.28);
  --shadow-green:0 8px 22px rgba(0,168,104,.34);

  background:var(--page);
  background-image:linear-gradient(180deg,rgba(0,34,68,.055),rgba(0,34,68,0) 540px);
  color:var(--gray-600);
}
body.theme-light .ph,body.theme-light .hero{background-color:var(--panel-2)}
body.theme-light h1,body.theme-light h2,body.theme-light h3,body.theme-light h4{color:var(--ink)}
body.theme-light footer.site{background:linear-gradient(180deg,#002244 0%,#00152B 100%);color:#B9C6D4;border-top:4px solid var(--green)}
body.theme-light footer.site a{color:#DCE6F0}
/* --- light theme: the moving trace becomes Action Green --- */
/* (green trace replaced by the silver trace at the end of this file) */

/* --- light theme: badges, table and buttons --- */
body.theme-light .mto-badge{background:rgba(0,168,104,.14);border-color:rgba(0,168,104,.55);color:#017B4D}
body.theme-light .mto-block{border-color:rgba(0,34,68,.16);border-left-color:var(--green);background:rgba(0,168,104,.06)}
body.theme-light .mto-lead{color:var(--ink)}
body.theme-light .mto-note a{color:var(--blue-bright)}
body.theme-light .price-on-request{color:#0B4F91}

body.theme-light .mr-viewbtn{border-color:var(--gray-200);color:var(--gray-600);background:#fff}
body.theme-light .mr-viewbtn:hover{border-color:var(--blue);color:var(--ink)}
body.theme-light .mr-viewbtn.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
body.theme-light .mr-tablewrap{border-color:var(--gray-200);background:#fff;box-shadow:var(--shadow-sm)}
body.theme-light table.mr-parts thead th{background:#002244;color:#fff;border-bottom:2px solid var(--green)}
body.theme-light table.mr-parts th.sortable:hover,body.theme-light table.mr-parts th.sorted{color:#2FD68F}
body.theme-light table.mr-parts tbody tr{border-bottom:1px solid var(--gray-100)}
body.theme-light table.mr-parts tbody tr:hover{background:#F1F7EA}
body.theme-light table.mr-parts td{color:var(--gray-600)}
body.theme-light table.mr-parts td.c-img img{background:var(--gray-50)}
body.theme-light .mr-part{color:var(--blue-bright)}
body.theme-light .mr-title{color:var(--ink)}
body.theme-light .mr-title:hover{color:var(--blue-bright)}
body.theme-light .mr-blurb,body.theme-light .mr-none{color:var(--gray-400)}

body.theme-light .mr-lead{color:var(--gray-400)}
body.theme-light .mr-instock{color:#017B4D}
body.theme-light .mr-qty{background:#fff;border-color:var(--gray-200);color:var(--ink)}

/* --- light theme: WooCommerce skin --- */
body.theme-light .mr-wc table.shop_table{background:#fff;border-color:var(--gray-200)}
body.theme-light .mr-wc table.shop_table th{background:#002244;color:#fff;border-bottom:2px solid var(--green)}
body.theme-light .mr-wc table.shop_table img{background:var(--gray-50)}
body.theme-light .mr-wc input,body.theme-light .mr-wc textarea,body.theme-light .mr-wc select{background:#fff}
body.theme-light .mr-wc input:focus,body.theme-light .mr-wc textarea:focus,body.theme-light .mr-wc select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,168,104,.18)}
body.theme-light .mr-wc #shipping_method li,body.theme-light .mr-wc .wc_payment_method{background:#fff}
body.theme-light .mr-wc #shipping_method li:hover{border-color:var(--green)}
body.theme-light .mr-wc .payment_box{background:rgba(0,168,104,.07);border-color:rgba(0,168,104,.3)}
body.theme-light .mr-wc .cart_totals,body.theme-light .mr-wc #order_review{border-color:rgba(0,34,68,.18)}
body.theme-light .mr-wc .order-total .amount{color:var(--blue)}
body.theme-light .mr-wc .button,body.theme-light .mr-wc #place_order,body.theme-light .mr-wc .checkout-button{
  background:linear-gradient(135deg,#00A868,#017B4D);color:#fff}
body.theme-light .mr-wc .button:hover,body.theme-light .mr-wc #place_order:hover,body.theme-light .mr-wc .checkout-button:hover{
  box-shadow:0 8px 20px rgba(0,168,104,.34);color:#fff}
body.theme-light .mr-wc .coupon .button,body.theme-light .mr-wc button[name=update_cart]{background:#fff;border:1px solid var(--gray-200);color:var(--ink)}
/* Buttons use a deepened Action Green so white text clears WCAG AA.
   The true brand green #00A868 stays on badges, borders, rules and the
   moving trace, where it is decoration rather than text. */
body.theme-light .btn-primary,
body.theme-light .mr-wc .button,
body.theme-light .mr-wc #place_order,
body.theme-light .mr-wc .checkout-button,
body.theme-light .btn-green{
  background:linear-gradient(135deg,#017B4D,#01623E);color:#fff;border-color:transparent}
body.theme-light .btn-primary:hover,
body.theme-light .mr-wc .button:hover,
body.theme-light .mr-wc #place_order:hover,
body.theme-light .mr-wc .checkout-button:hover,
body.theme-light .btn-green:hover{
  background:linear-gradient(135deg,#08C57C,#017B4D);color:#fff;
  box-shadow:0 8px 20px rgba(74,140,23,.34)}
body.theme-light .btn-secondary{background:var(--gray-100);border:1px solid var(--gray-200);color:var(--gray-600)}
body.theme-light .btn-secondary:hover{background:var(--blue);color:#fff}
body.theme-light .mto-badge{color:#017B4D}
/* --- light theme: no white page bands. Everything full-width sits on grey;
       only cards, tables and panels stay white so they lift off it. --- */
body.theme-light{--page:#E8ECEF}
body.theme-light .pagehead{
  background:linear-gradient(135deg,#EFF2F4 0%,#E4E9EE 55%,#DEE5EB 130%);
  border-bottom:1px solid var(--gray-200)}
body.theme-light .pagehead::before{
  background-image:linear-gradient(rgba(0,34,68,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,34,68,.05) 1px,transparent 1px)}
body.theme-light .hero{
  background:linear-gradient(180deg,#EFF2F4 0%,#E4E9EE 62%,#E8ECEF 100%)}
body.theme-light .hero::before{
  background-image:linear-gradient(rgba(0,34,68,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,34,68,.055) 1px,transparent 1px)}
body.theme-light .logobar{background:#EDF0F3;border-block-color:var(--gray-200)}
body.theme-light .sec,body.theme-light section{background-color:transparent}
body.theme-light .final-cta{
  background:linear-gradient(125deg,#00152B 0%,#002244 48%,#00305F 100%)}body.theme-light .crumbs{background:#EDF0F3;border-bottom:1px solid var(--gray-200)}
body.theme-light .crumbs a{color:var(--blue-bright)}
body.theme-light .ph{background:#F4F6F8}
body.theme-light .cat-card .ph,body.theme-light .prod-card .ph,body.theme-light .gallery-main .ph,
body.theme-light .gallery-thumbs .ph,body.theme-light .cart-item .ph,body.theme-light .mini-item .ph{background:#F4F6F8}
/* --- light theme: GREEN TRACE ----------------------------------------
   Same moving pulse as the gold one on the dark palette, in Action Green.
   Only stroke colour and opacity are set here; stroke widths, the round
   caps and the 140s animation are inherited from the base .lp-* rules,
   so both palettes move identically.
   To go back to brushed silver, swap these four strokes for:
     base #B4BEC7 / halo #9AA7B2 / flow url(#mrSilver) / comet #59687A
   The #mrSilver gradient is still defined in header.php. */
body.theme-light .lp-base{stroke:#002244;opacity:.10}
body.theme-light .lp-halo{stroke:#2FD68F;opacity:.30}
body.theme-light .lp-flow{stroke:#00A868;opacity:.50}
body.theme-light .lp-comet{stroke:#00A868;opacity:.92;filter:drop-shadow(0 0 5px rgba(0,168,104,.45))}
body.theme-light .lp-vias circle{fill:#00A868;stroke:#EDF0F3}

/* ---- Products dropdown: scroll cap so all categories fit the card ---- */
.mega{max-height:min(74vh,660px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mega::-webkit-scrollbar{width:9px}
.mega::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:9px}
.mega::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}
.mega a strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.mega{width:94vw;grid-template-columns:1fr;max-height:70vh}}

/* =====================================================================
   MR-SHOP  -  WooCommerce pages inside the Micro-Ray design system.
   Appended last so it wins over WooCommerce's own stylesheets.
   ===================================================================== */

/* ---- 1. one type stack on every page, form controls included ---- */
body,button,input,select,textarea,optgroup,
.woocommerce,.woocommerce-page,
.woocommerce input,.woocommerce button,.woocommerce select,.woocommerce textarea,
.woocommerce-page input,.woocommerce-page button,.woocommerce-page select,.woocommerce-page textarea{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5,.product_title,.woocommerce-loop-product__title,
.woocommerce-products-header__title,.page-title,.mr-pdp .tab{
  font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.015em}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- 2. strip WooCommerce's default page furniture ---- */
#primary.content-area,#main.site-main{max-width:none;width:auto;margin:0;padding:0;float:none}
.mr-wc .woocommerce-breadcrumb{display:none}
.mr-wc .woocommerce-notices-wrapper:empty{display:none}
.woocommerce .mr-wc,.woocommerce-page .mr-wc{max-width:none}
.mr-wc-pdp>.woocommerce-notices-wrapper{max-width:var(--maxw);margin:22px auto 0;padding:0 24px}

/* ---- 3. product detail page ---- */
.woocommerce div.product.mr-pdp{margin:0;padding:0}
.woocommerce div.product.mr-pdp div.summary{float:none;width:auto;margin:0;display:flex;flex-direction:column;align-items:flex-start}
.woocommerce div.product.mr-pdp .gallery-main,
.woocommerce div.product.mr-pdp .gallery-thumbs{float:none;width:auto;opacity:1}
.mr-pdp .product_title{font-size:clamp(25px,2.7vw,34px);line-height:1.2;color:var(--ink);margin:0 0 12px}
.mr-pdp .pdp-short{margin:12px 0 0;color:var(--gray-600);font-size:16px;line-height:1.65}
.mr-pdp .pdp-short p{margin:0 0 10px}
.mr-pdp .pdp-short p:last-child{margin:0}
.mr-pdp .stock-tag.made-to-order{background:var(--amber-line);box-shadow:0 2px 8px rgba(233,162,27,.35)}
.mr-pdp .stock-tag.out{background:var(--gray-400);box-shadow:none}

/* price - WooCommerce nests its own spans inside our .pdp-price */
.woocommerce div.product.mr-pdp .pdp-price{width:100%}
.woocommerce div.product.mr-pdp .pdp-price .price,
.woocommerce div.product.mr-pdp .pdp-price span.amount,
.woocommerce div.product.mr-pdp .pdp-price bdi{font-size:inherit;font-weight:inherit;color:inherit;margin:0;display:inline}
.mr-pdp .pdp-price del{opacity:.45;font-weight:500;font-size:.62em;margin-right:9px}
.mr-pdp .pdp-price ins{text-decoration:none;color:var(--blue-dark)}
.mr-pdp .moq-chip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 12px;border-radius:7px;background:var(--blue-light);color:var(--blue-dark);font-size:12.5px;font-weight:700}
.mr-pdp .moq-chip svg{flex-shrink:0}
body.theme-dark .mr-pdp .moq-chip{background:rgba(47,134,255,.14);color:var(--blue-bright)}
.mr-pdp .pdp-price .price-on-request{font-size:22px;font-weight:600;color:var(--gray-600);font-family:'Inter',sans-serif}
.mr-pdp .mto-block{width:100%}

/* ---- 4. buy box: WooCommerce's real add-to-cart form, themed ---- */
.mr-pdp .buybox{width:100%}
.woocommerce div.product.mr-pdp form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 4px}
.woocommerce div.product.mr-pdp form.cart.variations_form{display:block;margin:0}
.woocommerce div.product.mr-pdp form.cart div.quantity{display:inline-flex;align-items:center;float:none;margin:0;
  border:1px solid var(--gray-200);border-radius:10px;overflow:hidden;background:#fff}
.woocommerce div.product.mr-pdp form.cart .quantity input.qty{width:82px;height:48px;padding:0 6px;border:none;background:transparent;
  text-align:center;font-size:15px;font-weight:600;color:var(--ink);box-shadow:none}
.woocommerce div.product.mr-pdp form.cart button.single_add_to_cart_button,
.mr-pdp .buybox a.mr-quote-btn,.mr-pdp .buybox .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 28px;
  border-radius:11px;border:2px solid transparent;font-weight:600;font-size:15px;line-height:1;cursor:pointer;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);color:#fff;box-shadow:var(--shadow-blue);
  transition:all .22s cubic-bezier(.4,0,.2,1);text-decoration:none;float:none;margin:0}
.woocommerce div.product.mr-pdp form.cart button.single_add_to_cart_button:hover,
.mr-pdp .buybox a.mr-quote-btn:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff}
.mr-pdp .buybox .btn-secondary{background:var(--white);color:var(--blue-dark);border-color:var(--blue-light);box-shadow:none}
.mr-pdp .buy-note:first-of-type{margin-top:14px}

/* variations - styled to match the mock-up's .varselect blocks */
.woocommerce div.product.mr-pdp table.variations{width:100%;border:none;background:none;margin:0 0 16px;display:grid;gap:14px}
.woocommerce div.product.mr-pdp table.variations tbody,
.woocommerce div.product.mr-pdp table.variations tr{display:contents}
.woocommerce div.product.mr-pdp table.variations th,
.woocommerce div.product.mr-pdp table.variations td{display:block;width:auto;padding:0;border:none;background:none;text-align:left}
.woocommerce div.product.mr-pdp table.variations th.label label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gray-600)}
.woocommerce div.product.mr-pdp table.variations select{width:100%;height:46px;padding:0 38px 0 13px;border:1px solid var(--gray-200);
  border-radius:10px;background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8DA3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/14px;
  -webkit-appearance:none;appearance:none;font-size:14.5px;color:var(--ink);cursor:pointer}
.woocommerce div.product.mr-pdp table.variations select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.woocommerce div.product.mr-pdp .woocommerce-variation-price{margin:0 0 14px;font-family:'Space Grotesk';font-size:26px;font-weight:700;color:var(--blue-dark)}
.woocommerce div.product.mr-pdp .reset_variations{display:inline-block;margin:6px 0 0;font-size:12.5px;color:var(--gray-400)}
.woocommerce div.product.mr-pdp .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* grouped products */
.woocommerce div.product.mr-pdp table.woocommerce-grouped-product-list{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;margin:0 0 16px}
.woocommerce div.product.mr-pdp table.woocommerce-grouped-product-list td{padding:12px 14px;border-bottom:1px solid var(--gray-100);vertical-align:middle}

/* ---- 5. tabs ---- */
.tabwrap{position:relative;z-index:3}
.mr-pdp .tabpanel.on{display:block}
.mr-pdp .tab.on{color:var(--blue-dark);border-bottom-color:var(--blue)}
.mr-pdp .tab:hover{color:var(--ink)}
.mr-pdp .pdp-desc{max-width:900px;font-size:16.5px;line-height:1.72;color:var(--gray-600)}
.mr-pdp .pdp-desc p{margin:0 0 14px}
.mr-pdp .pdp-desc h2,.mr-pdp .pdp-desc h3,.mr-pdp .pdp-desc h4{color:var(--ink);margin:26px 0 10px;font-size:19px}
.mr-pdp .pdp-desc ul,.mr-pdp .pdp-desc ol{margin:0 0 16px 22px}
.mr-pdp .pdp-desc li{margin:0 0 6px}
.mr-pdp .pdp-desc img{max-width:100%;height:auto;border-radius:10px}
.mr-pdp .pdp-desc a{color:var(--blue);font-weight:600}
.mr-pdp .spec-table th{width:38%}
.mr-pdp .spec-note{margin:16px 0 0;font-size:13.5px;color:var(--gray-400);max-width:820px}
.mr-pdp .spec-note a{color:var(--blue);font-weight:600}

/* ---- 6. data tables inside a product description ------------------
   Matches the catalog spreadsheet view: navy header, green underline,
   zebra rows, green hover, scrolls sideways on a phone.               */
.mr-pdp .pdp-desc table{display:block;max-width:100%;overflow-x:auto;
  border-collapse:collapse;margin:22px 0;font-size:14px;background:#fff;
  border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-sm)}
.mr-pdp .pdp-desc table thead,.mr-pdp .pdp-desc table tbody{display:table;width:100%;min-width:520px}
.mr-pdp .pdp-desc table th{background:var(--blue);color:#fff;text-align:left;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:12px 15px;white-space:nowrap;border:none}
.mr-pdp .pdp-desc table thead tr:last-child th{border-bottom:3px solid var(--blue)}
.mr-pdp .pdp-desc table td{padding:11px 15px;border-bottom:1px solid var(--gray-100);color:var(--gray-600);
  vertical-align:middle;border-left:none;border-right:none}
.mr-pdp .pdp-desc table tbody tr:nth-child(even){background:var(--gray-50)}
.mr-pdp .pdp-desc table tbody tr:hover{background:var(--blue-light)}
.mr-pdp .pdp-desc table tbody tr:last-child td{border-bottom:none}
.mr-pdp .pdp-desc table td:first-child{font-weight:600;color:var(--ink)}
.mr-pdp .pdp-desc table caption{caption-side:top;text-align:left;padding:0 0 8px;font-size:13px;color:var(--gray-400)}
/* rows that only carry a part number read better in the mono-ish face */
.mr-pdp .pdp-desc table td:last-child{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;color:var(--ink)}

/* ---- 7. shop + category archives ---- */
.mr-wc .woocommerce-products-header{margin:0 0 8px}
.mr-wc .woocommerce-products-header__title,.mr-wc h1.page-title{font-size:clamp(26px,3vw,36px);color:var(--ink);margin:0 0 10px}
.mr-wc .term-description{max-width:820px;color:var(--gray-600);font-size:16px;line-height:1.7;margin:0 0 22px}
.mr-wc .woocommerce-result-count{float:none;margin:0;font-size:13.5px;color:var(--gray-400)}
.mr-wc .woocommerce-ordering{float:none;margin:0}
.mr-wc .woocommerce-ordering select{height:42px;padding:0 34px 0 13px;border:1px solid var(--gray-200);border-radius:10px;background:#fff;
  font-size:14px;color:var(--ink);cursor:pointer}
.mr-wc .shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 22px}
.woocommerce .mr-wc ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.woocommerce .mr-wc ul.products::before,.woocommerce .mr-wc ul.products::after{display:none}
.woocommerce .mr-wc ul.products li.product{width:auto;float:none;margin:0;padding:0;clear:none;
  background:var(--panel);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.26s;display:flex;flex-direction:column;text-align:left}
.woocommerce .mr-wc ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-light)}
.woocommerce .mr-wc ul.products li.product a img{margin:0;border-radius:0;background:var(--panel-2)}
.woocommerce .mr-wc ul.products li.product .woocommerce-loop-product__title{padding:0;font-size:16px;line-height:1.35;color:var(--ink);margin:0 0 8px}
.woocommerce .mr-wc ul.products li.product>a:first-of-type{display:block}
.woocommerce .mr-wc ul.products li.product .price{color:var(--blue-dark);font-family:'Space Grotesk';font-size:19px;font-weight:700;margin:0 0 12px;display:block}
.woocommerce .mr-wc ul.products li.product .button{margin:auto 0 0;align-self:flex-start}
.woocommerce .mr-wc ul.products li.product .mto-badge-tile{margin:14px 16px 0}
.woocommerce .mr-wc ul.products li.product .woocommerce-loop-product__link{padding:0}
.woocommerce .mr-wc ul.products li.product .woocommerce-loop-product__title,
.woocommerce .mr-wc ul.products li.product .price,
.woocommerce .mr-wc ul.products li.product .button,
.woocommerce .mr-wc ul.products li.product .mr-loop-sku{margin-left:16px;margin-right:16px}
.mr-wc .mr-loop-sku{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);margin-top:14px;display:block}
.woocommerce .mr-wc nav.woocommerce-pagination{margin:34px 0 0;text-align:center}
.woocommerce .mr-wc nav.woocommerce-pagination ul{border:none;display:inline-flex;gap:7px;margin:0;padding:0}
.woocommerce .mr-wc nav.woocommerce-pagination ul li{border:none;margin:0;overflow:visible}
.woocommerce .mr-wc nav.woocommerce-pagination ul li a,
.woocommerce .mr-wc nav.woocommerce-pagination ul li span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--gray-200);border-radius:10px;background:#fff;color:var(--gray-600);font-weight:600;font-size:14px}
.woocommerce .mr-wc nav.woocommerce-pagination ul li a:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.woocommerce .mr-wc nav.woocommerce-pagination ul li span.current{background:var(--blue);border-color:var(--blue);color:#fff}

@media(max-width:980px){
  .mr-pdp .pdp{grid-template-columns:1fr;gap:32px}
  .mr-pdp .summary{position:static;top:0}
  .woocommerce .mr-wc ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-pdp .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .woocommerce .mr-wc ul.products{grid-template-columns:1fr}
  .mr-pdp .prod-grid{grid-template-columns:1fr}
  .woocommerce div.product.mr-pdp form.cart{gap:9px}
  .woocommerce div.product.mr-pdp form.cart button.single_add_to_cart_button{flex:1 1 100%}
}

/* ---- 8. Seahawks light-theme corrections for the shop skin ---- */
body.theme-light .mr-pdp .pdp-desc table th{background:#002244}
body.theme-light .mr-pdp .pdp-desc table thead tr:last-child th{border-bottom-color:var(--blue)}
body.theme-light .mr-pdp .pdp-desc table tbody tr:hover{background:#F1F7EA}
body.theme-light .mr-pdp .tab.on{color:#002244;border-bottom-color:var(--blue)}
body.theme-light .mr-pdp .stock-tag{background:#0742A8;box-shadow:0 2px 8px rgba(10,95,224,.32)}
body.theme-light .mr-pdp .stock-tag.made-to-order{background:var(--amber-line);box-shadow:0 2px 8px rgba(233,162,27,.35)}

/* ---- MR override: PDP-only green -> blue accents (heading card, made-to-order, lead-time block, buy-note icons) ---- */
.mr-pdp .summary{border-top-color:var(--blue)}
.mr-pdp .buy-note svg{color:var(--blue)}
.mr-pdp .mto-stock{background:var(--blue-light);color:var(--blue-dark)}
body.theme-light .mr-pdp .mto-badge{background:rgba(10,95,224,.14);border-color:rgba(10,95,224,.55);color:#0742A8}
body.theme-light .mr-pdp .mto-block{border-color:rgba(0,34,68,.16);border-left-color:var(--blue);background:rgba(10,95,224,.06)}
body.theme-light .mr-wc .button,body.theme-light .mr-wc button.button,
body.theme-light .mr-wc input.button,body.theme-light .mr-wc #place_order,
body.theme-light .mr-wc .checkout-button{color:#fff}
body.theme-light .mr-wc #shipping_method li:hover{border-color:rgba(0,168,104,.6)}
body.theme-light .mr-wc .payment_box{background:rgba(0,168,104,.07);border-color:rgba(0,168,104,.28)}
body.theme-light .mr-wc .cart_totals,body.theme-light .mr-wc #order_review{border-color:var(--gray-200)}
body.theme-light .mr-wc .button:hover,body.theme-light .mr-wc #place_order:hover,
body.theme-light .mr-wc .checkout-button:hover{box-shadow:0 8px 20px rgba(0,34,68,.26)}

/* =====================================================================
   MR-TABLE-RULES  -  spreadsheet legibility pass
   Two weights of grey do the work: a DARKER rule between rows, a
   LIGHTER rule between columns, laid over alternating white / pale
   grey bands. Retune every table on the site from the variables below.
   ===================================================================== */
:root{
  --mr-band:#F2F5F7;                /* pale band, even rows           */
  --mr-rule:#C3CDD4;                /* darker  - horizontal row rule  */
  --mr-rule-soft:#E3E9ED;           /* lighter - vertical column rule */
  --mr-head:#002244;                /* header block                   */
  --mr-rowhead:rgba(0,34,68,.045);  /* first-column tint              */
  --mr-hover:#D8F7E8;               /* action-green row hover         */
}
body.theme-dark{
  --mr-band:rgba(255,255,255,.030);
  --mr-rule:rgba(255,255,255,.145);
  --mr-rule-soft:rgba(255,255,255,.06);
  --mr-head:#15181C;
  --mr-rowhead:rgba(255,255,255,.035);
  --mr-hover:rgba(212,175,55,.09);
}

/* ---- part-number tables inside a product description ---- */
.mr-pdp .pdp-desc table{border:1px solid var(--mr-rule);border-radius:12px;box-shadow:var(--shadow-sm)}
.mr-pdp .pdp-desc table th{background:var(--mr-head);border-right:1px solid rgba(255,255,255,.16)}
.mr-pdp .pdp-desc table th:last-child{border-right:none}
.mr-pdp .pdp-desc table thead tr:last-child th{border-bottom:3px solid var(--blue)}
.mr-pdp .pdp-desc table tbody tr{background:#fff}
.mr-pdp .pdp-desc table tbody tr:nth-child(even){background:var(--mr-band)}
.mr-pdp .pdp-desc table td{border-bottom:none;border-top:none;border-right:1px solid var(--mr-rule-soft)}
.mr-pdp .pdp-desc table td:last-child{border-right:none}
.mr-pdp .pdp-desc table tbody tr+tr td{border-top:1px solid var(--mr-rule)}
.mr-pdp .pdp-desc table tbody td:first-child{background:var(--mr-rowhead);font-weight:700;color:var(--ink)}
.mr-pdp .pdp-desc table tbody tr:hover{background:var(--mr-hover)}
.mr-pdp .pdp-desc table tbody tr:hover td:first-child{background:transparent}
.mr-pdp .pdp-desc table tbody tr:hover td{border-top-color:#9FE0C7}
body.theme-dark .mr-pdp .pdp-desc table tbody tr{background:transparent}
body.theme-dark .mr-pdp .pdp-desc table tbody tr:hover td{border-top-color:rgba(212,175,55,.35)}

/* ---- specification table (label / value) ---- */
.mr-pdp .spec-table{border:1px solid var(--mr-rule);border-radius:12px;overflow:hidden}
.mr-pdp .spec-table tr{background:#fff}
.mr-pdp .spec-table tr:nth-child(even){background:var(--mr-band)}
.mr-pdp .spec-table tr+tr th,.mr-pdp .spec-table tr+tr td{border-top:1px solid var(--mr-rule)}
.mr-pdp .spec-table th{background:var(--mr-rowhead);color:var(--ink);font-weight:700;font-size:13.5px;
  text-align:left;padding:12px 16px;border-right:1px solid var(--mr-rule-soft);vertical-align:top}
.mr-pdp .spec-table td{padding:12px 16px;color:var(--gray-600);font-size:14.5px}
.mr-pdp .spec-table tr:hover{background:var(--mr-hover)}
.mr-pdp .spec-table tr:hover th{background:transparent}
body.theme-dark .mr-pdp .spec-table tr{background:transparent}

/* ---- catalog spreadsheet view ---- */
table.mr-parts thead th{border-right:1px solid rgba(255,255,255,.16)}
table.mr-parts thead th:last-child{border-right:none}
table.mr-parts tbody tr{border-bottom:none}
table.mr-parts tbody tr:nth-child(even){background:var(--mr-band)}
table.mr-parts tbody tr+tr td{border-top:1px solid var(--mr-rule)}
table.mr-parts td{border-right:1px solid var(--mr-rule-soft)}
table.mr-parts td:last-child{border-right:none}
table.mr-parts tbody tr:hover{background:var(--mr-hover)}
table.mr-parts tbody tr:hover td{border-top-color:#9FE0C7}
body.theme-light table.mr-parts tbody tr{border-bottom:none}
body.theme-light table.mr-parts tbody tr:hover{background:var(--mr-hover)}
body.theme-dark table.mr-parts tbody tr:hover td{border-top-color:rgba(212,175,55,.35)}

/* ---- cart / checkout tables pick up the same ladder ---- */
.mr-wc table.shop_table{border-color:var(--mr-rule)}
.mr-wc table.shop_table tbody tr:nth-child(even){background:var(--mr-band)}
.mr-wc table.shop_table td{border-bottom:none}
.mr-wc table.shop_table tbody tr+tr td{border-top:1px solid var(--mr-rule)}
.mr-wc table.shop_table th{border-right:1px solid var(--mr-rule-soft)}
.mr-wc table.shop_table th:last-child{border-right:none}

/* ---------------------------------------------------------------------
   MR-TABLE-SITEWIDE
   Every remaining data table on the site inherits the same ladder:
   navy header, green underline, alternating bands, darker rule between
   rows, lighter rule between columns. Layout tables (variation pickers,
   grouped-product rows, order totals) are excluded and restored below.
   ------------------------------------------------------------------ */
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts),
.panel table,
.entry-content table,
.tier-table{
  width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;
  border:1px solid var(--mr-rule);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-sm);margin:22px 0}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) th,
.panel table th,.entry-content table th,.tier-table th{
  background:var(--mr-head);color:#fff;text-align:left;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:12px 15px;white-space:nowrap;
  border:none;border-right:1px solid rgba(255,255,255,.16)}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) th:last-child,
.panel table th:last-child,.entry-content table th:last-child,.tier-table th:last-child{border-right:none}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) thead tr:last-child th,
.panel table thead tr:last-child th,.entry-content table thead tr:last-child th,
.tier-table tr:first-child th{border-bottom:3px solid var(--green)}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) td,
.panel table td,.entry-content table td,.tier-table td{
  padding:11px 15px;color:var(--gray-600);vertical-align:middle;
  border:none;border-right:1px solid var(--mr-rule-soft)}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) td:last-child,
.panel table td:last-child,.entry-content table td:last-child,.tier-table td:last-child{border-right:none}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) tr+tr td,
.panel table tr+tr td,.entry-content table tr+tr td,.tier-table tr+tr td{border-top:1px solid var(--mr-rule)}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) tbody tr:nth-child(even),
.panel table tbody tr:nth-child(even),.entry-content table tbody tr:nth-child(even),
.tier-table tr:nth-child(odd){background:var(--mr-band)}
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts) tbody tr:hover,
.panel table tbody tr:hover,.entry-content table tbody tr:hover,.tier-table tr:hover{background:var(--mr-hover)}
.tier-table tr:first-child:hover{background:none}
.section table td:first-child,.panel table td:first-child,
.entry-content table td:first-child,.tier-table td:first-child{font-weight:700;color:var(--ink)}

/* ---- layout tables: keep them borderless ---- */
.cart_totals table,.cart_totals table th,.cart_totals table td,
table.variations,table.variations th,table.variations td,
table.woocommerce-grouped-product-list{
  background:none;box-shadow:none;border-radius:0}
.cart_totals table,table.variations{border:none}
.cart_totals table tr+tr th,.cart_totals table tr+tr td{border-top:none}

/* ---------------------------------------------------------------------
   MR-FIX-BLUE
   1. Shadows carry the theme's navy instead of neutral black.
   2. Anything sitting on a filled blue/navy button gets white lettering.
      (a gold-era rule was leaving near-black text on the navy buttons)
   ------------------------------------------------------------------ */
body.theme-light{
  --shadow-sm:0 1px 2px rgba(0,34,68,.06),0 3px 10px rgba(0,34,68,.10);
  --shadow-md:0 6px 16px rgba(0,34,68,.12),0 14px 32px rgba(0,34,68,.14);
  --shadow-lg:0 12px 28px rgba(0,34,68,.17),0 28px 60px rgba(0,34,68,.20);
  --shadow-blue:0 8px 22px rgba(0,34,68,.30);
}

.mr-wc .button,.mr-wc button.button,.mr-wc input.button,
.mr-wc #place_order,.mr-wc .checkout-button,
.mr-wc .button:hover,.mr-wc button.button:hover,.mr-wc input.button:hover,
.mr-wc #place_order:hover,.mr-wc .checkout-button:hover,
.btn-quote,.btn-quote:hover,
.mr-pdp .buybox .btn-primary,.mr-pdp .buybox .btn-primary:hover,
body.theme-light .btn-primary,body.theme-light .btn-primary:hover,
body.theme-light .btn-on-dark:hover,
body.theme-light .btn-green,body.theme-light .btn-green:hover,
body.theme-light .header-cta .btn-primary,body.theme-light .header-cta .btn-primary:hover,
body.theme-light .eyebrow,body.theme-light .eyebrow.blue,
body.theme-light .stock-tag,
body.theme-light .final-cta h2,body.theme-light .final-cta a.btn-ghost-light{color:#fff}
body.theme-light .stock-tag .pip,body.theme-light .eyebrow .dot{background:#fff}
.mr-wc .button:hover,.mr-wc #place_order:hover,.mr-wc .checkout-button:hover{
  box-shadow:0 8px 20px rgba(0,34,68,.30)}
/* white-faced buttons keep their navy lettering */
body.theme-light .btn-secondary,body.theme-light .btn-ghost-light:hover{color:var(--blue-dark)}
body.theme-light .mr-wc .coupon .button,body.theme-light .mr-wc button[name=update_cart]{color:var(--ink)}

/* ---------------------------------------------------------------------
   MR-SEARCH  -  part search box and results
   ------------------------------------------------------------------ */
.mr-search{display:flex;align-items:center;gap:0;position:relative;background:#fff;
  border:1px solid var(--gray-200);border-radius:12px;box-shadow:var(--shadow-sm);
  overflow:hidden;max-width:640px;width:100%}
.mr-search-ico{display:grid;place-items:center;width:44px;flex:none;color:var(--gray-400)}
.mr-search input[type=search]{flex:1;min-width:0;height:46px;border:none;background:transparent;
  padding:0 8px 0 0;font-size:15px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.mr-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.mr-search input[type=search]::placeholder{color:var(--gray-400)}
.mr-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.mr-search-go{flex:none;height:46px;padding:0 22px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.02em;transition:filter .18s ease}
.mr-search-go:hover{filter:brightness(1.12);color:#fff}
.mr-search-lg{max-width:760px}
.mr-search-lg input[type=search]{height:54px;font-size:16px}
.mr-search-lg .mr-search-ico{width:50px}
.mr-search-lg .mr-search-go{height:54px;padding:0 26px;font-size:15px}

/* header slot */
.header-search{flex:1;max-width:340px;margin:0 18px}
.header-search .mr-search{box-shadow:none;border-radius:10px}
.header-search .mr-search input[type=search]{height:40px;font-size:14px}
.header-search .mr-search-ico{width:38px}
.header-search .mr-search-go{height:40px;padding:0 16px;font-size:13px}
@media(max-width:1180px){
  .header-search{
    display:block;
    order:4;
    flex-basis:100%;
    width:100%;
    max-width:none;
    margin:10px 0 0;
  }
}

/* toolbar above the catalog and category listings */
.mr-shopsearch{margin:0 0 22px;position:relative;z-index:3}

/* results */
.mr-results td.c-part{white-space:nowrap}
.mr-results .mr-blurb em{color:var(--gray-400);font-style:normal;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.mr-noresults{padding:34px 36px;max-width:820px}
.mr-noresults h2{margin:0 0 12px;font-size:22px;color:var(--ink)}
.mr-noresults p{margin:0 0 16px;color:var(--gray-600);line-height:1.7}
.mr-noresults ul{margin:0 0 22px 20px;color:var(--gray-600)}
.mr-noresults li{margin:0 0 7px;line-height:1.6}
.mr-noresults .final-actions{display:flex;flex-wrap:wrap;gap:12px}

/* pagination on the results page */
.navigation.pagination{margin:30px 0 0;text-align:center}
.navigation.pagination .nav-links{display:inline-flex;gap:7px;flex-wrap:wrap;justify-content:center}
.navigation.pagination .page-numbers{min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 12px;border:1px solid var(--gray-200);border-radius:10px;
  background:#fff;color:var(--gray-600);font-weight:600;font-size:14px;text-decoration:none}
.navigation.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.navigation.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------------
   MR-FONT-ARIAL
   One type family across the whole site. This deliberately overrides
   every earlier font-family rule (Inter / Space Grotesk), so it must
   stay last in this file. To change the face later, edit --mr-font.
   ------------------------------------------------------------------ */
:root{
  --mr-font:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",Arimo,sans-serif;
  --mr-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
}
*,*::before,*::after{font-family:var(--mr-font) !important}
code,kbd,pre,samp,tt{font-family:var(--mr-mono) !important}

/* Headings keep the original display face; body copy is Arial. */
h1,h2,h3,h4,h5,h6,
.product_title,.pagehead h1,.sec-head h1,.sec-head h2,.sec-head h3,
.woocommerce-loop-product__title,.woocommerce-products-header__title,
.page-title,.mr-pdp .tab,.final-cta h2,.mr-noresults h2,
.prod-card h3,.panel h2,.panel h3,.mr-wc h2,.mr-wc h3{
  font-family:'Space Grotesk','Inter',var(--mr-font) !important}

/* small uppercase labels keep their wide tracking */
.eyebrow,.stock-tag,.mto-badge,.sku,.mr-loop-sku,
.mr-search-go,.badge,
table.mr-parts thead th,
.mr-pdp .pdp-desc table th,
.section table th,.panel table th,.entry-content table th,.tier-table th,
.mr-wc table.shop_table th{letter-spacing:.06em}

/* the part-number columns stay bold rather than borrowing a display face */
.mr-part,.mr-pdp .pdp-desc table td:last-child,
.mr-pdp .spec-table th{font-weight:700}

/* ---------------------------------------------------------------------
   MR-CONTRAST
   1. Full-width bands stop being white - the page reads light grey and
      only cards, panels and tables stay white.
   2. Table rows alternate two visible greys instead of white / near-white.
   ------------------------------------------------------------------ */
body.theme-light .bg-gray{background:var(--page);border-block:1px solid var(--gray-200)}
body.theme-light .section--tight.bg-gray{background:var(--page)}
body.theme-light .ph,body.theme-light .hero{background-color:var(--page)}

:root{
  --mr-row:#F5F8F9;   /* light grey - odd rows  */
  --mr-band:#E4EAEE;  /* grey       - even rows */
}
body.theme-dark{
  --mr-row:transparent;
  --mr-band:rgba(255,255,255,.05);
}

/* odd rows */
.mr-pdp .pdp-desc table tbody tr,
.mr-pdp .spec-table tr,
table.mr-parts tbody tr,
.section table tbody tr,.panel table tbody tr,.entry-content table tbody tr,
.tier-table tr,
.mr-wc table.shop_table tbody tr{background:var(--mr-row)}

/* even rows */
.mr-pdp .pdp-desc table tbody tr:nth-child(even),
.mr-pdp .spec-table tr:nth-child(even),
table.mr-parts tbody tr:nth-child(even),
.section table tbody tr:nth-child(even),
.panel table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
.tier-table tr:nth-child(odd),
.mr-wc table.shop_table tbody tr:nth-child(even){background:var(--mr-band)}

/* hover still wins */
.mr-pdp .pdp-desc table tbody tr:hover,
.mr-pdp .spec-table tr:hover,
table.mr-parts tbody tr:hover,
.section table tbody tr:hover,.panel table tbody tr:hover,
.entry-content table tbody tr:hover,.tier-table tr:hover,
.mr-wc table.shop_table tbody tr:hover{background:var(--mr-hover)}
.tier-table tr:first-child,.tier-table tr:first-child:hover{background:none}

/* the tinted first column layers over whichever band it sits on */
.mr-pdp .pdp-desc table tbody td:first-child{background:rgba(0,34,68,.05)}
.mr-pdp .spec-table th{background:rgba(0,34,68,.05)}
.mr-pdp .pdp-desc table tbody tr:hover td:first-child,
.mr-pdp .spec-table tr:hover th{background:transparent}

/* table shells sit on grey, so keep their own surface neutral */
body.theme-light .mr-tablewrap{background:var(--mr-row)}
.mr-pdp .pdp-desc table,
.section table:not(.variations):not(.woocommerce-grouped-product-list):not(.shop_table):not(.mr-parts),
.panel table,.entry-content table,.tier-table,.mr-pdp .spec-table{background:var(--mr-row)}

/* ---------------------------------------------------------------------
   MR-TABLE-ALIGN
   A table cannot be display:block (to scroll) and still line its header
   up with its body - the head and the body end up measuring their
   columns separately. Scrolling now lives on the .mr-scroll wrapper and
   the table goes back to being a real table, so columns line up and the
   row bands run the full width of the row.
   ------------------------------------------------------------------ */
.mr-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:22px 0;border:1px solid var(--mr-rule);border-radius:12px;
  box-shadow:var(--shadow-sm);background:var(--mr-row)}
.mr-scroll::-webkit-scrollbar{height:9px}
.mr-scroll::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:9px}
.mr-scroll::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}

.mr-scroll>table,
.mr-pdp .pdp-desc table,
.entry-content table,.panel table,
.section table:not(.variations):not(.woocommerce-grouped-product-list){
  display:table;width:100%;table-layout:auto;border-collapse:collapse}
.mr-scroll>table{min-width:520px;margin:0;border:none;border-radius:0;box-shadow:none}
.mr-scroll>table>thead,.mr-pdp .pdp-desc table>thead,
.entry-content table>thead,.panel table>thead{display:table-header-group;width:auto;min-width:0}
.mr-scroll>table>tbody,.mr-pdp .pdp-desc table>tbody,
.entry-content table>tbody,.panel table>tbody{display:table-row-group;width:auto;min-width:0}
.mr-scroll>table>thead>tr,.mr-scroll>table>tbody>tr{display:table-row}
.mr-scroll>table th,.mr-scroll>table td{display:table-cell}

/* the band has to run the whole row, so no cell paints over it */
.mr-pdp .pdp-desc table tbody td:first-child,
.mr-pdp .pdp-desc table tbody tr:hover td:first-child,
.section table td:first-child,.panel table td:first-child,
.entry-content table td:first-child,.tier-table td:first-child{background:transparent}
.mr-pdp .spec-table th{background:transparent}

/* keep the header block solid across every column */
.mr-scroll>table>thead>tr>th{background:var(--mr-head);color:#fff}

/* ---------------------------------------------------------------------
   MR-DEPTH
   The page had flattened to one grey, which is what read as washed out.
   This puts three clear levels back:

       page   #E3E9ED   the grey the whole site sits on
       band   #F4F7F9   alternating full-width sections, near-white
       card   #FFFFFF   panels, tables, product cards - pure white

   plus crisper borders, darker text and a real shadow under the cards.
   ------------------------------------------------------------------ */
body.theme-light{
  --page:#E3E9ED;
  --panel:#FFFFFF;
  --panel-2:#F4F7F9;
  --gray-50:#F7F9FA;
  --gray-100:#DFE5EA;
  --gray-200:#C2CBD2;
  --gray-400:#6E7C87;
  --gray-600:#384956;
  --ink:#08182A;
  --mr-rule:#B9C3CB;
  --mr-rule-soft:#DCE2E7;
  --shadow-sm:0 1px 2px rgba(0,34,68,.06),0 4px 12px rgba(0,34,68,.10);
  --shadow-md:0 8px 20px rgba(0,34,68,.13),0 18px 38px rgba(0,34,68,.14);
  --shadow-lg:0 14px 32px rgba(0,34,68,.18),0 32px 64px rgba(0,34,68,.20);
  color:#384956;
  background-image:linear-gradient(180deg,rgba(0,34,68,.075),rgba(0,34,68,0) 640px);
}

/* --- the alternating band comes back, near-white rather than stark --- */
body.theme-light .bg-gray,
body.theme-light .section--tight.bg-gray{
  background:var(--panel-2);border-block:1px solid var(--gray-200)}
body.theme-light .ph{background-color:var(--panel-2)}
body.theme-light .hero{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--panel-2) 58%,var(--page) 100%)}

/* --- cards lift off the page instead of blending into it --- */
body.theme-light .panel,
body.theme-light .prod-card,
body.theme-light .cat-card,
body.theme-light .hero-card,
body.theme-light .ind-card,
body.theme-light .res-card,
body.theme-light .stat,
body.theme-light .guide,
body.theme-light .mr-tablewrap,
body.theme-light .mr-scroll,
body.theme-light .gallery-main,
body.theme-light .woocommerce ul.products li.product,
body.theme-light .mr-wc table.shop_table,
body.theme-light .mr-search{
  background:var(--panel);border-color:var(--gray-200);box-shadow:var(--shadow-sm)}
body.theme-light .prod-card:hover,
body.theme-light .cat-card:hover,
body.theme-light .ind-card:hover,
body.theme-light .woocommerce ul.products li.product:hover{
  border-color:var(--blue-light);box-shadow:var(--shadow-md)}

/* --- type carries more weight --- */
body.theme-light h1,body.theme-light h2,body.theme-light h3,body.theme-light h4{color:var(--ink)}
body.theme-light p,body.theme-light li{color:var(--gray-600)}
body.theme-light .lede,body.theme-light .sec-head p{color:#45596B}
body.theme-light .mr-title,body.theme-light .prod-card h3 a{color:var(--ink)}

/* dark bands keep their light type */
body.theme-light .bg-black h1,body.theme-light .bg-black h2,
body.theme-light .bg-black h3,body.theme-light .bg-black h4,
body.theme-light .final-cta h1,body.theme-light .final-cta h2,
body.theme-light footer.site h2,body.theme-light footer.site h3,
body.theme-light footer.site h4{color:#fff}
body.theme-light .bg-black p,body.theme-light .bg-black li,
body.theme-light .bg-black .sec-head p{color:#B4C6DD}
body.theme-light .final-cta p{color:#C6D8EE}
body.theme-light footer.site p,body.theme-light footer.site li{color:#B9C6D4}

/* --- a green hairline under section headings gives the page a beat --- */
body.theme-light .sec-head h2{padding-bottom:16px;position:relative}
body.theme-light .sec-head h2::after{
  content:'';position:absolute;left:0;bottom:0;width:54px;height:4px;
  border-radius:4px;background:var(--green)}
body.theme-light .sec-head.center h2::after{left:50%;transform:translateX(-50%)}
body.theme-light .final-cta h2{padding-bottom:0}
body.theme-light .final-cta h2::after{display:none}

/* --- crisper edges where sections meet --- */
body.theme-light .crumbs{background:var(--panel);border-bottom:1px solid var(--gray-200)}
body.theme-light header.site{border-bottom:1px solid var(--gray-200)}


/* ---- MR override: Add to Cart buttons -> green (site-wide), leaving Quote/Options buttons untouched ---- */
.woocommerce div.product.mr-pdp form.cart button.single_add_to_cart_button{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  box-shadow:var(--shadow-blue);
}
.woocommerce div.product.mr-pdp form.cart button.single_add_to_cart_button:hover{
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-dark));
}
table.mr-parts td.c-buy button.btn-primary,
table.mr-parts td.c-buy form.mr-buy button{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  box-shadow:var(--shadow-green);
}
table.mr-parts td.c-buy button.btn-primary:hover,
table.mr-parts td.c-buy form.mr-buy button:hover{
  background:linear-gradient(135deg,var(--green-bright),var(--green-dark));
}


/* ---- MR override: "Details" button on related products -> grey, blue on hover ---- */
.btn-details{background:var(--gray-100);color:var(--gray-600);border-color:var(--gray-200)}
.btn-details:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-blue)}

body.theme-light .btn-on-dark{color:var(--blue-dark)}

/* Real category photos in the mega menu (overrides the gradient icon backgrounds) */
.mega .mi-photo{background:#fff !important;padding:6px;border:1px solid var(--gray-200,#e5e7eb)}
.mega .mi-photo img{display:block}


/* ====== Mobile / tablet navigation (menu + Products dropdown) ====== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:40px;
  height:40px;
  border:0;
  border-radius:9px;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:#DCEAFF;
  border-radius:2px;
  transition:.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1180px){
  .nav-toggle{display:flex}
  header.site .wrap{flex-wrap:wrap}
  nav.main{
    display:none;
    order:10;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
    background:var(--blue-dark);
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:13px;
    padding:8px 0 16px;
  }
  nav.main.nav-open{display:flex}
  .navitem{width:100%}
  .navlink{width:100%;justify-content:space-between;padding:13px 10px;border-radius:0}
  .caret{width:14px;height:14px;transition:transform .18s;cursor:pointer}
  .navitem.open .caret{transform:rotate(180deg)}
  .mega{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    width:auto;
    grid-template-columns:1fr;
    border:0;
    border-radius:12px;
    box-shadow:none;
    padding:10px;
    margin:6px 10px 14px;
    background:#fff;
    color:#1a1a1a;
  }
  .mega-main strong{color:#1a1a1a}
  .mega-main span{color:#5b6472}
  .mega-list .mega-main:nth-child(odd){background:var(--gray-50)}
  .mega-list .mega-main:nth-child(even){background:var(--gray-100)}
  .mega-list .mega-main:active{background:var(--blue-tint)}
  .navitem:hover .mega{display:none;transform:none;left:auto}
  .navitem.open .mega{display:grid;transform:none;left:auto}
  .mega-item{position:static}
  .mega-item.has-children>.mega-main::after{margin-left:8px}
  .mega-sub{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    width:auto;
    box-shadow:none;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
    margin:0 0 8px 46px;
    gap:0;
  }
  .mega-sub a{padding:9px 10px;font-size:13.5px;color:#1a1a1a;border-bottom:1px solid var(--gray-100)}
  .mega-sub a:last-child{border-bottom:0}
  .mega-sub a span{color:#5b6472}
  body.nav-locked{overflow:hidden}
}
/* Individual top-level category nav items with thumbnail-style subcategory dropdowns (nav restructure v2). */
@media(min-width:1181px){
  .mega.mega-list{grid-template-columns:1fr;padding:8px;gap:2px;left:0;transform:translateY(-8px)}
  .navitem:hover .mega.mega-list{transform:translateY(0)}
  .mega-list.cols-1{width:320px}
  .mega-list.cols-2{width:620px;grid-template-columns:1fr 1fr}
  .mega-list.cols-3{width:900px;grid-template-columns:1fr 1fr 1fr}
  .mega-list .mega-main{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;text-decoration:none;transition:.15s}
  .mega-list .mega-main:nth-child(odd){background:var(--gray-50)}
  .mega-list .mega-main:nth-child(even){background:var(--gray-100)}
  .mega-list.cols-2 .mega-main,.mega-list.cols-3 .mega-main{background:none}
  .mega-list.cols-2 .mega-main.band-a,.mega-list.cols-3 .mega-main.band-a{background:var(--gray-50)}
  .mega-list.cols-2 .mega-main.band-b,.mega-list.cols-3 .mega-main.band-b{background:var(--gray-100)}
  .mega-list .mega-main:hover{background:var(--blue-tint) !important;transform:translateX(3px)}
  .mega-list .mi{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#fff;overflow:hidden}
  .mega-list a:nth-child(6n+1) .mi{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
  .mega-list a:nth-child(6n+2) .mi{background:linear-gradient(135deg,var(--green),var(--green-dark))}
  .mega-list a:nth-child(6n+3) .mi{background:linear-gradient(135deg,var(--cyan),var(--blue-dark))}
  .mega-list a:nth-child(6n+4) .mi{background:linear-gradient(135deg,var(--teal),var(--green-dark))}
  .mega-list a:nth-child(6n+5) .mi{background:linear-gradient(135deg,var(--blue-bright),var(--blue))}
  .mega-list a:nth-child(6n+6) .mi{background:linear-gradient(135deg,var(--green-bright),var(--green))}
  .mega-list .mi-photo{background:#fff;border:1px solid var(--gray-200)}
  .mega-list .mega-main strong{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.3;white-space:normal}
  .mega-list .mega-main>span:last-child>span{font-size:11.5px;color:var(--gray-400);line-height:1.4}
}

/* With 10 category items now in the top nav (vs. the old single "Products" link), the row is too
   wide to share the header row with the logo/search/cart above ~1180px. Drop nav to its own full-width
   row below them and let it wrap there instead of overlapping the logo. */
@media(min-width:1181px){
  .site .wrap{flex-wrap:wrap;row-gap:10px}
  nav.main{flex:1 1 100%;order:3;flex-wrap:wrap;row-gap:6px;justify-content:center}
}

/* Two-row top header: logo + nav share row 1 (logo far left, nav filling the rest of
   that row and wrapping its own items if needed); search + cart + quote move to row 2,
   grouped together and pushed to the right, sitting under the nav. */
@media(min-width:1181px){
  header.site .wrap{align-items:center;padding-left:16px}
  .logo-link{flex:0 0 auto;margin-left:0}
  nav.main{flex:1 1 auto;order:1;flex-wrap:wrap;row-gap:6px;justify-content:center;margin-left:8px;gap:2px}
  nav.main a.navlink{font-size:13px;padding:8px 10px;gap:4px}
  nav.main .caret{width:8px;height:8px}
  .header-search{order:2;margin:8px 12px 0 auto;flex:0 1 340px}
  .header-cta{order:3;margin-top:8px}
}
/* Longer availability note on the Shop by Category tiles. The base .stock-tag is a
   two-word uppercase chip, so relax the casing and tracking here and let this one
   wrap onto a second line instead of running off the card. */
.stock-tag--note{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:700;line-height:1.4;align-items:flex-start;max-width:100%;padding:6px 12px;margin-bottom:12px}
.stock-tag--note .pip{margin-top:5px;flex:0 0 auto}


/* --- mr-xcol-typesize: part numbers in the table views were too small to read
   (Ray, repeatedly - raised again 2026-09-01 on the AMP page). Both tables use
   .mr-parts, so one block covers the catalogue and the search results. These
   must out-specify the inline wp_head block in catalog-table.php and the
   responsive table.mr-parts{font-size:12.5px} rule further up this file. --- */
table.mr-parts .mr-part,
table.mr-parts .mr-jst{font-size:17px;line-height:1.3}
table.mr-parts .mr-jst{font-weight:700}
table.mr-parts a.mr-jst{text-decoration:none}
table.mr-parts a.mr-jst:hover{text-decoration:underline}
table.mr-parts .mr-jst-series{font-size:12.5px;letter-spacing:.05em}
table.mr-parts .mr-jst-more{font-size:12px}
@media (max-width:900px){table.mr-parts .mr-part,table.mr-parts .mr-jst{font-size:16px}}

/* --- mr-xcol-typesize-pdp: the same complaint applies on the product page,
   where part numbers sit in the spec table and in the description tables. --- */
.mr-pdp .spec-table td{font-size:16px}
.mr-pdp .spec-table th{font-size:14.5px}
.mr-pdp .pdp-desc table{font-size:15.5px}