/* ============================================================
   GIMAKX — Shared Stylesheet
   Design system + components for all pages
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#08111F;--navy-mid:#0D1A2E;--navy-card:#111E30;
  --gold:#C8922A;--gold-light:#E8A83A;--gold-pale:#FFC84A;
  --white:#FFFFFF;--slate:#7A90B0;
}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:linear-gradient(to bottom,rgba(8,17,31,0.92) 0%,transparent 100%);backdrop-filter:blur(2px);transition:background 0.3s}
nav.scrolled,nav.solid{background:rgba(8,17,31,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-logo{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:4px;text-transform:uppercase;color:var(--white);text-decoration:none;display:flex;align-items:center}
.nav-logo span{color:var(--gold)}
.nav-logo img{height:42px;width:auto;display:block}
.nav-center{display:flex;gap:0;list-style:none;height:68px}
.nav-center li a{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.55);text-decoration:none;padding:0 20px;height:100%;display:flex;align-items:center;transition:color 0.2s;position:relative}
.nav-center li a::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform 0.2s}
.nav-center li a:hover{color:var(--white)}
.nav-center li a:hover::after{transform:scaleX(1)}
.nav-center li a.active{color:var(--white)}
.nav-center li a.active::after{transform:scaleX(1)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:68px;left:0;background:rgba(8,17,31,0.98);border:1px solid rgba(255,255,255,0.07);border-top:2px solid var(--gold);min-width:200px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all 0.2s}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.nav-dropdown-menu a{display:block;padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.55);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.2s,background 0.2s}
.nav-dropdown-menu a:hover{color:var(--gold);background:rgba(200,146,42,0.06)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-badge{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.4);border-radius:2px}
.nav-rfq{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:10px 22px;background:var(--gold);color:var(--navy);text-decoration:none;border-radius:2px;transition:background 0.2s}
.nav-rfq:hover{background:var(--gold-light)}

/* ── BUTTONS ── */
.btn-gold{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:15px 32px;background:var(--gold);color:var(--navy);text-decoration:none;border-radius:2px;transition:all 0.2s;border:none;cursor:pointer}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:14px 28px;border:1.5px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.7);text-decoration:none;border-radius:2px;transition:all 0.2s;background:transparent;cursor:pointer}
.btn-outline:hover{border-color:rgba(255,255,255,0.5);color:var(--white)}

/* ── TICKER ── */
.ticker{background:var(--gold);padding:11px 0;overflow:hidden}
.ticker-track{display:flex;gap:48px;animation:ticker 22s linear infinite;white-space:nowrap}
.ticker-item{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--navy);flex-shrink:0;display:flex;align-items:center;gap:24px}
.ticker-dot{width:5px;height:5px;background:rgba(8,17,31,0.3);border-radius:50%}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SHARED SECTION ── */
.s-wrap{padding:100px 5%}
.s-eye{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.s-eye::before{content:'';width:20px;height:2px;background:var(--gold)}
.s-h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,5vw,68px);font-weight:900;text-transform:uppercase;line-height:0.95;margin-bottom:12px}
.s-h2 em{font-style:italic;color:var(--gold)}

/* ── BREADCRUMB ── */
.breadcrumb{padding:96px 5% 0;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.breadcrumb a{color:rgba(255,255,255,0.4);text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:rgba(255,255,255,0.2)}
.breadcrumb .current{color:var(--gold)}

/* ── PRODUCT HERO ── */
.product-hero{padding:40px 5% 90px;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.product-summary .s-eye{margin-top:0}
.product-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(48px,6vw,88px);font-weight:900;text-transform:uppercase;line-height:0.9;margin-bottom:18px}
.product-title em{font-style:italic;color:var(--gold)}
.product-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pbadge{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(200,146,42,0.3);color:var(--gold);border-radius:2px;background:rgba(200,146,42,0.06)}
.product-lead{font-size:16px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.5);margin-bottom:32px}
.quick-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.07);margin-bottom:32px}
.quick-spec{background:var(--navy);padding:18px 20px}
.quick-spec-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:6px}
.quick-spec-val{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;color:var(--white)}
.product-cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ── GALLERY ── */
.gallery{position:sticky;top:90px}
.gallery-main{aspect-ratio:4/5;background:linear-gradient(160deg,#0D1A2E,#172C4E);border:1px solid rgba(255,255,255,0.07);border-left:3px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.gallery-main video,.gallery-main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-main-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-align:center}
.gmp-icon{width:52px;height:52px;border:2px solid rgba(200,146,42,0.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px}
.gmp-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.2);line-height:1.5}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.gallery-thumb{aspect-ratio:1;background:linear-gradient(160deg,#0F1E35,#172C4E);border:1px solid rgba(255,255,255,0.07);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color 0.2s}
.gallery-thumb:hover,.gallery-thumb.active{border-color:var(--gold)}
.gallery-thumb span{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.18)}

/* ── VARIANT TABS ── */
.variant-tabs-section{background:var(--navy-mid);padding:90px 5%}
.variant-tabs{display:flex;gap:0;border:1px solid rgba(255,255,255,0.07);width:fit-content;margin:32px 0 40px;flex-wrap:wrap}
.variant-tab{padding:16px 32px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);cursor:pointer;border:none;border-right:1px solid rgba(255,255,255,0.07);background:transparent;transition:all 0.2s;text-align:left}
.variant-tab:last-child{border-right:none}
.variant-tab small{display:block;font-size:10px;font-weight:600;color:rgba(255,255,255,0.25);margin-top:4px;letter-spacing:1px}
.variant-tab.active{background:var(--gold);color:var(--navy)}
.variant-tab.active small{color:rgba(8,17,31,0.6)}
.variant-panel{display:none;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.variant-panel.active{display:grid}
.variant-panel-media{aspect-ratio:16/10;background:linear-gradient(160deg,#0F1E35,#172C4E);border:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;position:relative}
.variant-panel-media video,.variant-panel-media img{width:100%;height:100%;object-fit:cover}
.vpm-badge{position:absolute;top:14px;left:14px;padding:6px 14px;background:rgba(8,17,31,0.85);border:1px solid rgba(200,146,42,0.4);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border-radius:2px}
.variant-panel-body h3{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;text-transform:uppercase;color:var(--white);margin-bottom:8px}
.variant-panel-body .vgsm{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.variant-panel-body p{font-size:15px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.5);margin-bottom:24px}
.variant-panel-tags{display:flex;flex-wrap:wrap;gap:8px}
.vtag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.4);border-radius:2px}

/* ── COLOR PICKER ── */
.color-picker-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:center;margin-top:48px}
.color-preview{aspect-ratio:1;border-radius:8px;border:1px solid rgba(255,255,255,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:background 0.3s;position:relative;overflow:hidden}
.color-preview-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:rgba(8,17,31,0.7);padding:8px 18px;border-radius:2px;color:var(--white)}
.color-preview-note{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:rgba(8,17,31,0.7);padding:5px 12px;border-radius:2px}
.swatch-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.swatch-track{display:flex;width:max-content;animation:swatchScroll 42s linear infinite}
.swatch-marquee:hover .swatch-track{animation-play-state:paused}
@keyframes swatchScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.swatch{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto;width:150px;margin-right:18px}
.swatch-dot{width:150px;height:150px;border-radius:6px;border:2px solid transparent;transition:all 0.2s;position:relative}
.swatch:hover .swatch-dot{transform:scale(1.08);border-color:rgba(255,255,255,0.5)}
.swatch.selected .swatch-dot{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,146,42,0.3)}
.swatch-dot.special::after{content:'★';position:absolute;top:-6px;right:-6px;font-size:10px;color:var(--gold);background:var(--navy-mid);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:16px}
.swatch-name{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);text-align:center;line-height:1.3}

/* ── SPEC TABLE ── */
.spec-table{width:100%;border-collapse:collapse;margin-top:40px;border:1px solid rgba(255,255,255,0.07)}
.spec-table tr{border-bottom:1px solid rgba(255,255,255,0.05)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{text-align:left;padding:18px 24px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);background:rgba(8,17,31,0.5);width:38%;border-right:1px solid rgba(255,255,255,0.05);vertical-align:top}
.spec-table td{padding:18px 24px;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--white)}

/* ── FEATURES ── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.05);margin-top:56px;border:1px solid rgba(255,255,255,0.05)}
.feature-box{background:var(--navy);padding:40px 32px;transition:background 0.25s}
.feature-box:hover{background:rgba(200,146,42,0.04)}
.feature-icon{width:36px;height:2px;background:var(--gold);margin-bottom:24px}
.feature-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;text-transform:uppercase;color:var(--white);margin-bottom:10px}
.feature-desc{font-size:13px;font-weight:300;line-height:1.75;color:rgba(255,255,255,0.4)}

/* ── PRODUCT BLOCK (category pages) ── */
.product-block{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0;border-top:1px solid rgba(255,255,255,0.06)}
.product-block:first-of-type{border-top:none}
.product-block.reverse .pb-media{order:2}
.pb-media{aspect-ratio:4/3;background:linear-gradient(160deg,#0D1A2E,#172C4E);border:1px solid rgba(255,255,255,0.07);border-left:3px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;position:relative}
.product-block.reverse .pb-media{border-left:none;border-right:3px solid var(--gold)}
.pb-media video,.pb-media img{width:100%;height:100%;object-fit:cover}
.pb-cat{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.pb-cat::before{content:'';width:20px;height:2px;background:var(--gold)}
.pb-name{font-family:'Barlow Condensed',sans-serif;font-size:clamp(34px,4vw,56px);font-weight:900;text-transform:uppercase;line-height:0.95;margin-bottom:8px}
.pb-sub{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:20px}
.pb-desc{font-size:15px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.5);margin-bottom:24px}
.pb-options{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.pb-options li{display:flex;align-items:flex-start;gap:14px;font-size:14px;font-weight:400;color:rgba(255,255,255,0.6);line-height:1.6}
.pb-options li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:7px}

/* ── RELATED ── */
.related-section{background:var(--navy-mid);padding:80px 5%}
.related-card{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;background:var(--navy-card);border:1px solid rgba(255,255,255,0.06);border-left:3px solid var(--gold);padding:40px;margin-top:40px;text-decoration:none;transition:border-color 0.25s}
.related-card:hover{border-color:rgba(200,146,42,0.4)}
.related-media{aspect-ratio:1;background:linear-gradient(160deg,#0F1E35,#172C4E);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.06)}
.related-media span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.15);font-family:'Barlow Condensed',sans-serif}
.related-media img{width:100%;height:100%;object-fit:cover}
.related-body h3{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900;text-transform:uppercase;color:var(--white);margin-bottom:10px}
.related-body p{font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,0.45);margin-bottom:18px}
.related-arrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}

/* ── RFQ ── */
.rfq-section{background:var(--navy);padding:0;display:grid;grid-template-columns:1fr 1fr}
.rfq-left{background:var(--gold);padding:80px 5%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rfq-left::before{content:'GIMAKX';font-family:'Barlow Condensed',sans-serif;font-size:180px;font-weight:900;color:rgba(8,17,31,0.08);position:absolute;bottom:-20px;right:-10px;line-height:1;letter-spacing:-4px;white-space:nowrap}
.rfq-left h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(40px,4.5vw,68px);font-weight:900;text-transform:uppercase;color:var(--navy);line-height:0.95;margin-bottom:16px;position:relative;z-index:1}
.rfq-left p{font-size:15px;font-weight:500;color:rgba(8,17,31,0.55);max-width:340px;position:relative;z-index:1;line-height:1.7}
.rfq-right{background:var(--navy-mid);padding:80px 5%;border-left:3px solid var(--gold)}
.rfq-right h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;margin-bottom:32px;color:var(--white)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid.full{grid-template-columns:1fr}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3)}
.form-field input,.form-field select,.form-field textarea{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);padding:12px 14px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--white);border-radius:2px;outline:none;transition:border-color 0.2s;width:100%;-webkit-appearance:none}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(200,146,42,0.5)}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(255,255,255,0.2)}
.form-field select option{background:var(--navy-mid)}
.form-field textarea{resize:vertical;min-height:90px}
.rfq-form-body{display:flex;flex-direction:column;gap:14px}
.submit-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;flex-wrap:wrap;gap:12px}
.submit-note{font-size:11px;color:rgba(255,255,255,0.25);line-height:1.5}
.btn-submit{padding:15px 36px;background:var(--gold);border:none;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);cursor:pointer;border-radius:2px;transition:background 0.2s}
.btn-submit:hover{background:var(--gold-light)}

/* ── FOOTER ── */
footer{background:var(--navy-mid);border-top:1px solid rgba(255,255,255,0.06)}
.footer-main{padding:56px 5% 40px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.footer-brand .logo{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.8);text-decoration:none;display:block;margin-bottom:16px}
.footer-brand .logo img{height:34px;width:auto;display:block}
.footer-brand .logo span{color:var(--gold)}
.footer-brand p{font-size:13px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.3);max-width:260px}
.footer-col h4{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:13px;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;font-weight:400}
.footer-col ul a:hover{color:var(--gold)}
.footer-payment{padding:28px 5%;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:32px}
.payment-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.25)}
.payment-methods{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.payment-pill{display:flex;align-items:center;gap:11px;padding:12px 20px;border:1px solid rgba(255,255,255,0.12);border-radius:5px;background:rgba(255,255,255,0.03)}
.payment-pill-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.payment-pill-icon svg{width:100%;height:100%}
.payment-pill-name{font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);letter-spacing:0.5px}
.payment-pill .pay-logo{height:22px;width:auto;display:block}
.footer-bottom{padding:20px 5%;border-top:1px solid rgba(255,255,255,0.04);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:11px;color:rgba(255,255,255,0.18);letter-spacing:0.5px}
.footer-links-row{display:flex;gap:24px;list-style:none}
.footer-links-row a{font-size:11px;color:rgba(255,255,255,0.2);text-decoration:none;transition:color 0.2s}
.footer-links-row a:hover{color:var(--gold)}
.footer-contact{display:flex;gap:20px;flex-wrap:wrap}
.footer-contact a{font-size:12px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.2s;display:inline-flex;align-items:center;gap:5px}
.footer-contact a:hover{color:var(--gold)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .swatches-grid{grid-template-columns:repeat(6,1fr)}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-center{display:none}
  .product-hero{grid-template-columns:1fr;gap:40px}
  .gallery{position:static}
  .variant-panel.active{grid-template-columns:1fr}
  .color-picker-wrap{grid-template-columns:1fr;gap:32px}
  .product-block,.product-block.reverse .pb-media{grid-template-columns:1fr;order:0}
  .related-card{grid-template-columns:1fr}
  .rfq-section{display:flex;flex-direction:column}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .swatches-grid{grid-template-columns:repeat(4,1fr)}
  .form-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .quick-specs{grid-template-columns:1fr}
  .variant-tabs{width:100%}
  .variant-tab{flex:1}
}

/* ── Size Guide (moved from landing page) ── */
.size-section{background:var(--navy-mid);padding:80px 5%}
.size-tabs{display:flex;gap:0;border:1px solid rgba(255,255,255,0.07);width:fit-content;margin:32px 0 40px;flex-wrap:wrap}
.size-tab{padding:12px 32px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35);cursor:pointer;border-right:1px solid rgba(255,255,255,0.07);transition:all 0.2s;background:transparent;border-top:none;border-bottom:none;border-left:none;font-family:'Barlow',sans-serif}
.size-tab:last-child{border-right:none}
.size-tab.active{background:var(--gold);color:var(--navy)}
.size-panel{display:none}
.size-panel.active{display:block}
.size-table-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,0.07)}
.size-table{width:100%;border-collapse:collapse;font-size:11px;min-width:900px}
.size-table th{background:var(--navy);padding:10px 8px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,255,255,0.06);text-align:center;white-space:nowrap;font-size:11px}
.size-table th.row-head{background:rgba(200,146,42,0.08);color:rgba(255,255,255,0.6);font-size:10px}
.size-table td{padding:8px 6px;border:1px solid rgba(255,255,255,0.04);text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:rgba(255,255,255,0.55);background:var(--navy-card)}
.size-table td:first-child{background:rgba(8,17,31,0.8);color:rgba(255,255,255,0.4);font-size:10px;letter-spacing:0.5px;white-space:nowrap}
.size-table td.a0{color:#64B5F6}.size-table td.a1{color:#81C784}.size-table td.a2{color:var(--gold-light)}.size-table td.a3{color:#FF8A65}.size-table td.a4{color:#CE93D8}
.size-table td.w1{color:#F48FB1}.size-table td.w2{color:#80DEEA}.size-table td.w3{color:#A5D6A7}.size-table td.w4{color:#FFCC02}
.size-table td.k0{color:#90CAF9}.size-table td.k1{color:#A5D6A7}.size-table td.k2{color:var(--gold-light)}.size-table td.k3{color:#FF8A65}.size-table td.k4{color:#CE93D8}

/* ── Animated gold beam border (hover + always-on) ── */
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes beamspin{to{--beam:360deg}}
.nav-center li a::before,
.feature-box::before,
.variant-card::before,
.btn-gold::before,
.btn-outline::before,
.nav-rfq::before,
.btn-submit::before,
.evosoft-visual::before,
.evo-spec-row::before,
.gallery-main::before,
.pb-media::before{
  content:'';position:absolute;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:4;
  background:conic-gradient(from var(--beam),transparent 0deg,rgba(200,146,42,0.05) 40deg,var(--gold) 85deg,var(--gold-pale) 110deg,var(--gold) 135deg,rgba(200,146,42,0.05) 180deg,transparent 225deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 3px rgba(200,146,42,0.6));
  animation:beamspin 3.6s linear infinite;
}
/* fallback: if @property/mask unsupported, no broken visuals */
@supports not (background:conic-gradient(from var(--beam),#000,#000)){
  .nav-center li a::before,.feature-box::before,.variant-card::before,.btn-gold::before,.btn-outline::before,.nav-rfq::before,.btn-submit::before,.evosoft-visual::before,.evo-spec-row::before,.gallery-main::before,.pb-media::before{display:none}
}
/* Small objects (nav items + buttons) — beam on hover, ~30% faster, white-gold so it reads on gold buttons */
.btn-gold,.btn-outline,.nav-rfq,.btn-submit{position:relative}
.nav-center li a::before{inset:15px 4px;border-radius:5px;opacity:0;transition:opacity .3s;animation-duration:2.5s}
.nav-center li a:hover::before{opacity:1}
.btn-gold::before,.btn-outline::before,.nav-rfq::before,.btn-submit::before{inset:0;opacity:0;transition:opacity .3s;animation-duration:2.5s;
  background:conic-gradient(from var(--beam),transparent 0deg,rgba(255,255,255,0.05) 40deg,var(--gold-pale) 80deg,#FFF6E0 110deg,var(--gold-pale) 140deg,rgba(255,255,255,0.05) 180deg,transparent 225deg,transparent 360deg);
  filter:drop-shadow(0 0 3px rgba(255,236,184,0.7));}
.btn-gold:hover::before,.btn-outline:hover::before,.nav-rfq:hover::before,.btn-submit:hover::before{opacity:1}
/* Feature boxes — beam ring on hover */
.feature-box{position:relative}
.feature-box::before{inset:0;opacity:0;transition:opacity .3s;animation-duration:4.2s}
.feature-box:hover::before{opacity:1}
/* GiPro variant cards — beam always on; middle (featured) spins in reverse */
.variant-card::before{inset:0;opacity:1;animation-duration:4.8s}
.variant-card.featured::before{animation-direction:reverse}
/* Inner-page product images — always-on beam */
.gallery-main::before,.pb-media::before{inset:0;opacity:1;animation-duration:5.2s}
/* Homepage Evosoft section — image, spec row & button glow continuously */
.evosoft-visual,.evo-spec-row{position:relative}
.evosoft-visual{overflow:hidden}
.evosoft-visual::before,.evo-spec-row::before{inset:0;opacity:1;animation-duration:5.2s}
.evosoft-content .btn-gold::before{opacity:1}