@charset "utf-8";
/*
Theme Name: GP Power
Theme URI: https://www.shgopi.com
Author: Shanghai Gongpin Industrial Co., Ltd.
Description: Industrial-catalogue theme for power-electronics distribution. Custom CSS, no framework, mobile-first.
Version: 1.0.0
Requires PHP: 7.0
License: proprietary
Text Domain: gopi
Tags: business, e-commerce, custom-menu
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --ink:#11191F;            /* headers, dark bands, headings */
  --ink-2:#1D2831;          /* raised dark surface */
  --muted:#64707A;          /* secondary text */
  --line:#DAD6CE;           /* hairline borders */
  --line-soft:#E8E4DC;
  --paper:#F5F3EF;          /* page background */
  --surface:#FFFFFF;        /* cards, inputs */
  --well:#EFECE6;           /* recessed fill (table heads, chips) */
  --copper:#B0632B;         /* the one accent */
  --copper-dk:#8F4E1F;
  --copper-soft:#F3E4D6;    /* copper tint fill */
  --green:#2F6F4F;          /* "tested / in stock" only */

  --band:#11191F;           /* dark section backgrounds (hero/footer/rfq) */
  --band-2:#1D2831;         /* raised dark */
  --body:#252C33;           /* long-form text on light surface */
  --body-2:#3D464E;

  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,"Liberation Mono",monospace;

  --radius:3px;
  --gutter:16px;
  --maxw:1180px;
  --header-h:64px;
  --tr:120ms ease;
}

/* ============================================================
   Light / dark mode — "band" tokens keep dark sections dark in
   both modes; paper/surface/ink tokens flip.
   ============================================================ */
html[data-theme="dark"]{
  --ink:#E9E3D7; --ink-2:#D8D2C6; --muted:#8E9AA4;
  --paper:#0D1318; --surface:#151D24; --well:#1A242D;
  --line:#28333C; --line-soft:#1F2932;
  --copper:#C2763A; --copper-dk:#E0925A; --copper-soft:#312414;
  --body:#C3CACF; --body-2:#A9B2B9;
}

/* visibility utility (mobile-first) */
.hidden-xs{display:none}
@media (min-width:640px){.hidden-xs{display:inline}}

/* line icons must flow with text, never block-wrap */
.gp-i{display:inline-block;vertical-align:-3px;flex:none}

/* ==========================================================================
   2. Reset / baseline
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--tr)}
a:hover{color:var(--copper-dk)}
p{margin:0 0 1.1em}
h1,h2,h3,h4,h5,h6{margin:0 0 .55em;font-weight:700;line-height:1.25;letter-spacing:-.011em;color:var(--ink)}
h1{font-size:clamp(1.7rem,4.6vw,2.35rem)}
h2{font-size:clamp(1.35rem,3.6vw,1.7rem)}
h3{font-size:1.17rem}
h4{font-size:1.05rem}
ul,ol{margin:0 0 1.1em;padding-left:1.35em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
table{border-collapse:collapse;width:100%;margin:0 0 1.4em;font-size:.95rem}
th,td{border:1px solid var(--line);padding:.55em .8em;text-align:left;vertical-align:top}
th{background:var(--well);font-weight:600}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em;background:var(--well);border:1px solid var(--line-soft);border-radius:2px;padding:.08em .35em}
pre{background:var(--band);color:#E9E4DA;padding:1em 1.2em;border-radius:var(--radius);overflow:auto;font-size:.85rem}
pre code{background:none;border:0;color:inherit}
blockquote{margin:0 0 1.2em;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--copper);color:var(--muted)}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
::selection{background:var(--copper);color:#fff}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.wp-container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.gp-section{padding:52px 0}
.gp-section--tight{padding:36px 0}

/* small-caps mono label — the recurring "instrument panel" voice */
.gp-label{
  font:600 11px/1.4 var(--font-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
.gp-label--rule{display:flex;align-items:center;gap:14px;width:100%}
.gp-label--rule::after{content:"";flex:1;height:1px;background:var(--line)}

.gp-btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.62em 1.25em;border-radius:var(--radius);border:1px solid var(--copper);
  background:var(--copper);color:#fff;font-weight:600;font-size:.95rem;
  text-decoration:none;transition:background var(--tr),border-color var(--tr),color var(--tr);
  cursor:pointer;
}
.gp-btn:hover{background:var(--copper-dk);border-color:var(--copper-dk);color:#fff}
.gp-btn--ghost{background:transparent;color:var(--copper)}
.gp-btn--ghost:hover{color:#fff;background:var(--copper)}
.gp-btn--onink{border-color:rgba(255,255,255,.28);background:transparent;color:#fff}
.gp-btn--onink:hover{border-color:var(--copper);background:var(--copper);color:#fff}
.gp-btn--sm{padding:.42em .9em;font-size:.85rem}

.gp-tag{
  display:inline-block;font:600 10.5px/1 var(--font-mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);background:var(--well);
  border:1px solid var(--line-soft);border-radius:2px;padding:.38em .55em;
}
.gp-tag--green{color:#fff;background:var(--green);border-color:var(--green)}
.gp-tag--copper{color:var(--copper-dk);background:var(--copper-soft);border-color:#E4CBB2}

/* ==========================================================================
   4. Utility bar + site header
   ========================================================================== */
/* one graphite ladder: util(ink-2) → header(white+copper rule) → hero(ink) */
.gp-util{background:var(--band-2);color:#B9C2C9;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.06)}
.gp-util a{color:#D7DEE3;text-decoration:none}
.gp-util a:hover{color:var(--copper)}
.gp-util-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.gp-util-left{display:flex;gap:20px;align-items:center;min-width:0}
.gp-util-left span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gp-util-left .hidden-xs{display:none}
@media (min-width:640px){.gp-util-left .hidden-xs{display:inline-flex}}
.gp-util-right{display:flex;gap:0;align-items:center}
.gp-lang{padding:2px 9px;font:600 11px/1.8 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#9AA6AF;text-decoration:none;border-left:1px solid rgba(255,255,255,.12)}
.gp-lang:first-child{border-left:0}
.gp-lang:hover,.gp-lang.is-active{color:#fff}
.gp-lang.is-active{color:var(--copper)}
.gp-util-sep{color:rgba(255,255,255,.22)}

/* white catalogue header, closed with the copper rule — ties the dark
   util strip, the header and the accent into one system */
.gp-header{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:2px solid var(--copper)}
.gp-header-inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h);padding-top:8px;padding-bottom:8px}
.gp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.gp-logo img{height:54px;width:auto}
@media (max-width:640px){.gp-logo img{height:44px}}
.gp-logo-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;background:var(--band);color:var(--copper);font:700 13px/1 var(--font-mono);letter-spacing:.03em;border-radius:var(--radius)}
.gp-logo-txt{display:flex;flex-direction:column;line-height:1.15}
.gp-logo-txt strong{font-size:15px;letter-spacing:-.01em}
.gp-logo-txt small{font:600 9.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gp-header-spacer{flex:1}

/* main nav */
.gp-nav{display:none;position:relative}
.gp-nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.gp-nav > ul > li{margin:0}
.gp-nav > ul > li > a{
  display:block;padding:calc((var(--header-h) - 19px) / 2) 12px;
  font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;transition:color var(--tr),border-color var(--tr);
}
.gp-nav > ul > li > a:hover{color:var(--copper)}
.gp-nav > ul > li.current > a{color:var(--copper);border-bottom-color:var(--copper)}

/* mega panel — anchored to the whole nav so it always opens centered */
.gp-mega{
  position:absolute;left:50%;transform:translateX(-50%) translateY(6px);
  top:100%;width:min(92vw,880px);background:var(--surface);
  border:1px solid var(--line);border-top:2px solid var(--copper);
  border-radius:0 0 var(--radius) var(--radius);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 140ms ease,transform 140ms ease,visibility 140ms;
  box-shadow:0 12px 28px rgba(17,25,31,.10);
  z-index:70;
}
.gp-nav li.gp-has-mega:hover .gp-mega,
.gp-nav li.gp-has-mega:focus-within .gp-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.gp-mega .wp-container{padding:18px var(--gutter) 14px}
.gp-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.gp-mega-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--surface);padding:.68em .9em;text-decoration:none;color:var(--ink)}
.gp-mega-item:hover{background:var(--copper-soft);color:var(--copper-dk)}
.gp-mega-name{font-weight:600;font-size:.92rem}
.gp-mega-count{font:500 10.5px/1.4 var(--font-mono);color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.gp-mega-all{display:inline-block;margin-top:12px;font:600 12px/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}

/* header search */
.gp-hsearch{display:none;flex:0 1 300px;position:relative}
.gp-hsearch input{
  width:100%;padding:.5em 2.3em .5em .8em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);color:var(--ink);
  font:500 .85rem/1.5 var(--font-mono);
}
.gp-hsearch input::placeholder{color:var(--muted);text-transform:none;font-family:var(--font-mono);letter-spacing:.02em}
.gp-hsearch input:focus{border-color:var(--copper);background:var(--surface)}
.gp-hsearch button{
  position:absolute;right:0;top:0;bottom:0;width:2.4em;border:0;background:none;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;
}
.gp-hsearch button:hover{color:var(--copper)}

/* burger + drawer */
.gp-burger{
  display:grid;place-items:center;width:42px;height:42px;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  color:var(--ink);cursor:pointer;
}
.gp-burger:hover{border-color:var(--copper);color:var(--copper)}
.gp-burger .bars,.gp-burger .bars::before,.gp-burger .bars::after{
  content:"";display:block;width:18px;height:2px;background:currentColor;transition:transform var(--tr),opacity var(--tr);
}
.gp-burger .bars::before{position:absolute;margin-top:-6px}
.gp-burger .bars::after{position:absolute;margin-top:6px}
.gp-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);z-index:90;
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform 220ms ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.gp-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.gp-drawer-x{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.gp-drawer-x:hover{color:var(--copper)}
.gp-drawer ul{list-style:none;margin:0;padding:0}
.gp-drawer > ul > li > a,.gp-drawer .gp-m-sub > summary > a,.gp-drawer .gp-m-sub > summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:.85em 18px;font-weight:600;font-size:1rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line-soft);cursor:pointer;list-style:none;
}
.gp-drawer .gp-m-sub summary::-webkit-details-marker{display:none}
.gp-drawer .gp-m-sub[open] > summary .chev{transform:rotate(90deg)}
.gp-drawer .gp-m-sub .chev{transition:transform var(--tr);color:var(--muted)}
.gp-drawer .gp-m-sub ul{padding:6px 0 10px;background:var(--paper)}
.gp-drawer .gp-m-sub ul a{display:flex;justify-content:space-between;padding:.5em 18px .5em 30px;font-size:.92rem;color:var(--ink);text-decoration:none}
.gp-drawer .gp-m-sub ul a:hover{color:var(--copper)}
.gp-drawer-foot{margin-top:auto;padding:16px 18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.gp-drawer-foot .gp-tag{margin-bottom:8px}
.gp-drawer .gp-hsearch{display:block;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.gp-scrim{position:fixed;inset:0;background:rgba(17,25,31,.45);z-index:80;opacity:0;transition:opacity 200ms;visibility:hidden}
body.gp-nav-open{overflow:hidden}
body.gp-nav-open .gp-drawer{transform:translateX(0)}
body.gp-nav-open .gp-scrim{opacity:1;visibility:visible}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.gp-hero{position:relative;background:var(--band);color:#fff;overflow:hidden}
.gp-hero::before{ /* fine engineering grid */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  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:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.25) 70%,transparent);
}
.gp-hero::after{ /* copper bus trace, top right */
  content:"";position:absolute;top:-120px;right:-120px;width:340px;height:340px;
  border:1px solid rgba(176,99,43,.55);border-radius:50%;
  box-shadow:0 0 0 44px rgba(176,99,43,.12);
  pointer-events:none;display:none;
}
.gp-hero-inner{position:relative;display:grid;gap:26px;padding:44px 0 40px}
.gp-hero h1{color:#fff;max-width:18ch}
.gp-hero-sub{color:#B9C2C9;max-width:56ch;margin:0}
.gp-hero .gp-label{color:#D08A4E}
.gp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}

/* part search */
.gp-psearch{position:relative;max-width:640px}
.gp-psearch input[type=search],.gp-psearch input[type=text]{
  width:100%;padding:.95em 3.4em .95em 1em;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);font:500 .95rem/1.5 var(--font-mono);
}
.gp-psearch input::placeholder{color:var(--muted)}
.gp-psearch input:focus{border-color:var(--copper)}
.gp-psearch button{
  position:absolute;right:6px;top:6px;bottom:6px;width:2.9em;border:0;border-radius:2px;
  background:var(--copper);color:#fff;cursor:pointer;display:grid;place-items:center;
}
.gp-psearch button:hover{background:var(--copper-dk)}
.gp-psearch-hint{font:500 11.5px/1.5 var(--font-mono);color:#8D99A3;margin-top:10px;letter-spacing:.03em}
.gp-psearch-hint b{color:var(--copper);font-weight:600}

/* slider variant of hero (when ACF slides exist) */
.gp-slider{position:relative}
.gp-slider-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gp-slider-rail::-webkit-scrollbar{display:none}
.gp-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;aspect-ratio:16/9;max-height:520px;overflow:hidden;background:var(--band)}
.gp-slide img{width:100%;height:100%;object-fit:cover;opacity:.92}
.gp-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 0 20px;background:linear-gradient(transparent,rgba(17,25,31,.78))}
.gp-slider-dots{display:flex;gap:8px;justify-content:center;padding:14px 0}
.gp-slider-dots button{width:26px;height:3px;border:0;padding:0;background:rgba(17,25,31,.2);cursor:pointer;transition:background var(--tr)}
.gp-slider-dots button.is-active{background:var(--copper)}
.gp-hero .gp-slider-dots button{background:rgba(255,255,255,.28)}
.gp-hero .gp-slider-dots button.is-active{background:var(--copper)}

/* ==========================================================================
   6. Brand strip
   ========================================================================== */
.gp-brands{border-bottom:1px solid var(--line);background:var(--surface)}
.gp-brands-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;padding:0 var(--gutter)}
.gp-brand{
  flex:1 0 auto;display:grid;place-items:center;min-width:110px;
  padding:16px 20px;font:600 12.5px/1.35 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  margin-left:-1px;
}
.gp-brands-note{width:100%;text-align:center;padding:0 0 14px;font:500 10.5px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#A9A49B}

/* ==========================================================================
   7. Section headers & grids (home + archives)
   ========================================================================== */
.gp-sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.gp-sect-head .gp-label{margin-bottom:6px}
.gp-sect-head h2{margin:0}
.gp-sect-more{display:inline-flex;align-items:center;gap:.4em;font:600 12px/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap}

/* category tiles */
.gp-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.gp-cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color var(--tr),transform var(--tr)}
.gp-cat:hover{border-color:var(--copper);transform:translateY(-1px)}
.gp-cat a{display:block;text-decoration:none;color:inherit;height:100%}
.gp-cat-media{aspect-ratio:16/9.5;background:var(--well);position:relative;overflow:hidden}
.gp-cat-media img{width:100%;height:100%;object-fit:cover;transition:transform 240ms ease}
.gp-cat:hover .gp-cat-media img{transform:scale(1.02)}
.gp-cat-fallback{position:absolute;inset:0;display:grid;place-items:center;font:700 26px/1 var(--font-mono);color:#C8C3B9;letter-spacing:.1em}
.gp-cat-body{padding:.85em .95em;border-top:1px solid var(--line-soft)}
.gp-cat-name{font-weight:700;font-size:.95rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gp-cat-count{font:500 10.5px/1.8 var(--font-mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

/* product cards */
.gp-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.gp-part{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:border-color var(--tr)}
.gp-part:hover{border-color:var(--copper)}
.gp-part a{display:block;text-decoration:none;color:inherit}
.gp-part-media{aspect-ratio:4/3;background:var(--well);overflow:hidden}
.gp-part-media img{width:100%;height:100%;object-fit:contain;padding:7% 10%;transition:transform 240ms ease}
.gp-part:hover .gp-part-media img{transform:scale(1.02)}
.gp-part-body{padding:.8em .95em 1em;border-top:1px solid var(--line-soft)}
.gp-part-name{font-weight:600;font-size:.93rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gp-part:hover .gp-part-name{color:var(--copper-dk)}
.gp-part-cat{margin-top:.5em}

/* article rows */
.gp-posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gp-post{border-bottom:1px solid var(--line)}
.gp-post a{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 4px;text-decoration:none;color:inherit;transition:background var(--tr)}
.gp-post a:hover{background:var(--surface)}
.gp-post-date{font:500 11px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gp-post-title{font-weight:600;font-size:1.02rem;line-height:1.45}
.gp-post a:hover .gp-post-title{color:var(--copper-dk)}
.gp-post-excerpt{color:var(--muted);font-size:.9rem;display:none}

/* ==========================================================================
   8. About / capability band
   ========================================================================== */
.gp-about{display:grid;gap:26px}
.gp-about-media{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--well)}
.gp-about-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gp-about-media::after{content:"";position:absolute;inset:auto 12px 12px auto;width:34%;height:3px;background:var(--copper)}
.gp-about h2{max-width:22ch}
.gp-about p{color:var(--body-2)}
.gp-caps{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.gp-caps li{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-soft);font-size:.93rem;line-height:1.5}
.gp-caps svg{flex:none;margin-top:3px;color:var(--copper)}
.gp-caps b{font-weight:600}

/* cert teaser row inside about */
.gp-certs{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.gp-certs p{margin:0;font-size:.88rem;color:var(--muted);flex:1}

/* ==========================================================================
   9. RFQ band
   ========================================================================== */
.gp-rfq{background:var(--band);color:#fff;position:relative;overflow:hidden}
.gp-rfq::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
}
.gp-rfq-inner{position:relative;display:grid;gap:24px;padding:46px 0}
.gp-rfq h2{color:#fff}
.gp-rfq p{color:#B9C2C9;margin:0}
.gp-rfq-rows{display:grid;gap:14px;align-content:start}
.gp-rfq-row{display:flex;gap:12px;align-items:baseline}
.gp-rfq-row .k{font:600 11px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8D99A3;flex:0 0 92px}
.gp-rfq-row .v{font-family:var(--font-mono);font-size:.93rem;word-break:break-word}
.gp-rfq-row .v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.gp-rfq-row .v a:hover{color:var(--copper);border-color:var(--copper)}

/* ==========================================================================
   10. Breadcrumbs & page banner
   ========================================================================== */
.gp-crumbs{background:var(--surface);border-bottom:1px solid var(--line-soft);font:500 12px/1.9 var(--font-mono);letter-spacing:.02em;color:var(--muted);padding:9px 0}
.gp-crumbs a{color:var(--muted);text-decoration:none}
.gp-crumbs a:hover{color:var(--copper)}
.gp-crumbs [aria-current]{color:var(--ink)}
.gp-crumb-sep{margin:0 8px;color:#C8C3B9}

.gp-banner{position:relative;background:var(--band);color:#fff;overflow:hidden}
.gp-banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;opacity:.6}
.gp-banner img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.gp-banner-inner{position:relative;padding:38px 0;display:grid;gap:8px}
.gp-banner h1{color:#fff;margin:0}
.gp-banner .gp-label{color:#8D99A3}
.gp-banner p{color:#B9C2C9;max-width:70ch;margin:0}

/* ==========================================================================
   11. Page shell: content + sidebar
   ========================================================================== */
.gp-layout{display:grid;gap:28px;padding:36px 0 56px}
.gp-content{min-width:0}
.gp-content > .gp-entry h1{font-size:clamp(1.45rem,3.4vw,1.9rem)}
.gp-entry-content{font-size:1rem;color:var(--body)}
.gp-entry-content h2{margin-top:1.6em}
.gp-entry-content h3{margin-top:1.4em}
.gp-entry-content img{border-radius:var(--radius)}
.gp-entry-content table{font-size:.9rem}
.gp-entry-content a{overflow-wrap:anywhere}
.gp-entry-meta{display:flex;gap:16px;flex-wrap:wrap;font:500 11.5px/1.6 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px}
.gp-entry-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}

/* product page */
.gp-part-hero{display:grid;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
@media (min-width:640px){.gp-part-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
@media (min-width:900px){.gp-part-hero{grid-template-columns:5fr 6fr;gap:32px;padding:28px}}
.gp-part-fig{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--well);overflow:hidden}
.gp-part-fig img{width:100%;max-height:420px;object-fit:contain;padding:6%}
.gp-part-facts{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)}
.gp-part-facts li{display:flex;gap:14px;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.gp-part-facts .k{font:600 11px/1.7 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gp-part-facts .v{text-align:right}

/* sidebar */
.gp-side{align-self:start;display:grid;gap:18px}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.widget-title{
  margin:0;padding:12px 16px;font:700 11.5px/1.5 var(--font-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.widget-title::before{content:"";width:14px;height:2px;background:var(--copper);flex:none}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{border-bottom:1px solid var(--line-soft)}
.widget li:last-child{border-bottom:0}
.widget li a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:.62em 16px;font-size:.92rem;color:var(--ink);text-decoration:none;line-height:1.4}
.widget li a:hover{color:var(--copper-dk);background:var(--copper-soft)}
.widget li .count{font:500 10.5px/1.6 var(--font-mono);color:var(--muted);letter-spacing:.04em}
.widget li.current-cat > a,.widget li.current-cat > a:hover{color:var(--copper-dk);background:var(--copper-soft);font-weight:600}
.widget li.current-cat .count{color:var(--copper-dk)}
.widget .children{padding-left:14px}
.widget .gp-mini-posts a{display:block;line-height:1.45}
.widget .gp-mini-date{display:block;font:500 10.5px/1.6 var(--font-mono);color:var(--muted);letter-spacing:.04em}

/* ==========================================================================
   12. Pagination / archive heads
   ========================================================================== */
.gp-pagination{margin-top:30px}
.gp-pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;
  margin-right:6px;margin-top:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);text-decoration:none;
  font:600 .88rem/1 var(--font-mono);
}
.gp-pagination .page-numbers:hover{border-color:var(--copper);color:var(--copper)}
.gp-pagination .page-numbers.current{background:var(--band);border-color:var(--ink);color:#fff}
.gp-pagination .page-numbers.dots{border:0;background:none}
.gp-archive-note{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 20px;font-size:.9rem;color:var(--muted)}
.gp-archive-note .n{font:600 11px/1.6 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}

/* prev / next article */
.gp-postnav{display:grid;gap:10px;margin-top:26px}
@media (min-width:640px){.gp-postnav{grid-template-columns:1fr 1fr}}
.gp-postnav-link{
  display:grid;gap:4px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);
}
.gp-postnav-link:hover{border-color:var(--copper)}
.gp-postnav-link .gp-post-title{font-size:.95rem}

/* ==========================================================================
   13. Search / 404
   ========================================================================== */
.gp-noresult{text-align:left;padding:34px 0 60px}
.gp-404{padding:64px 0 84px;text-align:center}
.gp-404 .code{font:700 64px/1 var(--font-mono);color:var(--copper);letter-spacing:.06em}
.gp-404 p{color:var(--muted);max-width:44ch;margin:10px auto 26px}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.gp-footer{background:var(--band);color:#9AA6AF;font-size:.92rem;margin-top:0}
.gp-footer a{color:#D7DEE3;text-decoration:none}
.gp-footer a:hover{color:var(--copper)}
.gp-footer-cols{display:grid;gap:30px;padding:52px 0 40px}
.gp-f-title{font:700 11.5px/1.5 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.gp-f-brand p{color:#9AA6AF;max-width:40ch}
.gp-f-brand .gp-logo-txt strong{color:#fff}
.gp-f-brand .gp-logo-txt small{color:#8D99A3}
.gp-f-list{list-style:none;margin:0;padding:0}
.gp-f-list li{margin:.55em 0}
.gp-f-contact{list-style:none;margin:0;padding:0}
.gp-f-contact li{display:flex;gap:10px;margin:.7em 0;line-height:1.5;align-items:baseline}
.gp-f-contact svg{flex:none;align-self:center;color:var(--copper)}
.gp-f-contact .mono{font-family:var(--font-mono);font-size:.86rem;overflow-wrap:anywhere}
.gp-flinks{border-top:1px solid rgba(255,255,255,.09);padding:16px 0}
.gp-flinks summary{cursor:pointer;font:600 11px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#8D99A3}
.gp-flinks ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem}
.gp-flinks a{color:#8D99A3}
.gp-btm{border-top:1px solid rgba(255,255,255,.09)}
.gp-btm-inner{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;padding:18px 0;font:500 11.5px/1.7 var(--font-mono);letter-spacing:.03em;color:#77838C}
.gp-btm a{color:#9AA6AF}

/* floating action stack: contact / theme / back-to-top */
.gp-floats{position:fixed;right:14px;bottom:16px;z-index:50;display:grid;gap:8px}
.gp-float,.gp-top{
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--band);color:#D7DEE3;border:1px solid var(--band-2);
  border-radius:var(--radius);cursor:pointer;text-decoration:none;
  transition:background var(--tr),border-color var(--tr),color var(--tr),opacity var(--tr),visibility var(--tr);
}
.gp-float:hover,.gp-top:hover{background:var(--copper);border-color:var(--copper);color:#fff}
.gp-top{display:none}
.gp-top.is-show{display:grid;animation:gp-fade-in 160ms ease}
@keyframes gp-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.i-when-dark{display:none}
html[data-theme="dark"] .i-when-dark{display:grid;place-items:center}
html[data-theme="dark"] .i-when-light{display:none}

/* the logo artwork is dark-on-transparent; keep it readable in dark mode */
html[data-theme="dark"] .gp-logo img{filter:invert(92%) hue-rotate(180deg) saturate(.85)}

/* align */
.aligncenter{margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:6px 18px 12px 0;max-width:48%}
.alignright{float:right;margin:6px 0 12px 18px;max-width:48%}

/* ==========================================================================
   15. Breakpoints — 640 / 900 / 1200
   ========================================================================== */
@media (min-width:640px){
  :root{--gutter:24px}
  .gp-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .gp-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .gp-about{grid-template-columns:5fr 6fr;align-items:start}
  .gp-post a{grid-template-columns:1fr auto;align-items:baseline}
  .gp-post-date{order:2;text-align:right;white-space:nowrap}
  .gp-post-excerpt{display:block}
  .gp-rfq-inner{grid-template-columns:1.2fr 1fr}
  .gp-hero::after{display:block}
  .gp-footer-cols{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .gp-nav{display:block}
  .gp-hsearch{display:block}
  .gp-burger,.gp-drawer,.gp-scrim{display:none}
  .gp-util-left{gap:26px}
  .gp-hero-inner{grid-template-columns:1.15fr .85fr;align-items:center;padding:64px 0}
  .gp-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gp-parts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gp-layout{grid-template-columns:minmax(0,1fr) 300px}
  .gp-layout--rev{grid-template-columns:280px minmax(0,1fr)}
  .gp-section{padding:64px 0}
  .gp-brand{font-size:13px}
}

@media (min-width:1200px){
  :root{--gutter:28px}
  .gp-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gp-parts{grid-template-columns:repeat(5,minmax(0,1fr))}
  .gp-layout{grid-template-columns:minmax(0,1fr) 320px}
  .gp-layout--rev{grid-template-columns:300px minmax(0,1fr)}
}

/* grids inside the sidebar layout get their own rhythm (narrower column) */
@media (min-width:900px){
  .gp-layout .gp-parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gp-layout .gp-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
  .gp-layout .gp-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ==========================================================================
   16. Small screens fine-tuning
   ========================================================================== */
@media (max-width:400px){
  .gp-cats,.gp-parts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gp-part-name{font-size:.85rem}
}