/* ===== Stainless Steel Hex Socket Screws — product page (scope: .gc-ss only) ===== */
.gc-ss{--steel:#1e2b38;--steel-2:#2c3e50;--ink:#22303d;--silver:#9fb0bd;--silver-2:#cdd6df;
  --line:#dde3ea;--bg:#f4f6f9;--card:#fff;--muted:#5d6b78;--accent:#2f6fb0;--accent-d:#22568c;
  --bolt:#c8632a;--ok:#2e7d5b;--warn:#b06a17;
  color:var(--ink);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.68;font-size:16px;-webkit-font-smoothing:antialiased;max-width:1100px;margin:0 auto;padding:0 20px 64px;}
.gc-ss *{box-sizing:border-box;}
.gc-ss img{max-width:100%;height:auto;display:block;}
.gc-ss a{color:var(--accent);text-decoration:none;}
.gc-ss a:hover{text-decoration:underline;}

/* HERO — datasheet style */
.gc-ss-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  background:linear-gradient(135deg,#e9eef3,#dde5ec);border:1px solid var(--line);border-radius:16px;
  padding:30px;margin:26px 0 30px;}
.gc-ss-hero__media{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.gc-ss-hero__media img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/2;}
.gc-ss-hero__title{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--steel);margin:0 0 12px;}
.gc-ss-hero__sub{font-size:15.5px;color:var(--muted);margin:0 0 18px;}
.gc-ss-hero__sub strong{color:var(--ink);font-weight:600;}
.gc-ss-specbar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin:0;padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:10px;}
.gc-ss-specbar div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;border-bottom:1px dashed var(--line);padding-bottom:5px;}
.gc-ss-specbar dt{color:var(--muted);font-weight:600;}
.gc-ss-specbar dd{margin:0;color:var(--ink);font-weight:600;text-align:right;}

/* H2 / H3 */
.gc-ss .gc-h2{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--steel);margin:42px 0 12px;
  padding-bottom:9px;border-bottom:2px solid var(--steel);}
.gc-ss .gc-h3{font-size:19px;font-weight:700;color:var(--steel-2);margin:24px 0 8px;}
.gc-ss p{margin:10px 0;}
.gc-ss .gc-lead{font-size:16.5px;color:var(--ink);}

/* Figures */
.gc-ss-fig{margin:20px 0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(30,43,56,.06);}
.gc-ss-fig img{width:100%;}
.gc-ss-fig--wide img{aspect-ratio:3/2;object-fit:cover;}
.gc-ss-fig--sq img{aspect-ratio:1/1;object-fit:cover;}
.gc-ss-fig figcaption{padding:10px 14px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);background:#fbfcfd;}
.gc-ss-figgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;}

/* Datasheet table */
.gc-ss-tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.gc-ss-tbl caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);padding:0 0 8px;font-weight:600;}
.gc-ss-tbl th,.gc-ss-tbl td{border-bottom:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;}
.gc-ss-tbl thead th{background:var(--steel);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.01em;}
.gc-ss-tbl tbody tr:nth-child(even){background:#f7f9fb;}
.gc-ss-tbl td:first-child,.gc-ss-tbl th:first-child{font-weight:600;color:var(--steel-2);}
.gc-ss-tbl--num td:not(:first-child),.gc-ss-tbl--num th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.gc-ss-note{font-size:13.5px;color:var(--muted);background:#eef3f8;border-left:3px solid var(--accent);padding:11px 14px;border-radius:0 8px 8px 0;margin:14px 0;}
.gc-ss-note--warn{background:#fbf2e8;border-left-color:var(--warn);}

/* 304 vs 316 compare cards */
.gc-ss-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0;}
.gc-ss-cmp__c{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;padding:18px;}
.gc-ss-cmp__c h3{margin:0 0 4px;font-size:18px;color:var(--steel);}
.gc-ss-cmp__c .gc-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--accent-d);background:#eaf1f8;border-radius:20px;padding:2px 10px;margin-bottom:10px;}
.gc-ss-cmp__c ul{margin:8px 0 0;padding-left:18px;}
.gc-ss-cmp__c li{margin:6px 0;font-size:14.5px;}

/* Material swatches */
.gc-ss-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0;}
.gc-ss-sw__c{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.gc-ss-sw__sw{height:54px;}
.gc-ss-sw__sw--304{background:linear-gradient(135deg,#cfd6dd,#aeb7c0);}
.gc-ss-sw__sw--316{background:linear-gradient(135deg,#c4ccd4,#9aa4ae);}
.gc-ss-sw__sw--other{background:linear-gradient(135deg,#d9dee3,#b9c0c8);}
.gc-ss-sw__b{padding:11px 13px;}
.gc-ss-sw__b h4{margin:0 0 3px;font-size:15px;color:var(--steel);}
.gc-ss-sw__b p{margin:0;font-size:13px;color:var(--muted);}

/* Application grid */
.gc-ss-app{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0;}
.gc-ss-app__c{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 16px;}
.gc-ss-app__c h3{margin:0 0 5px;font-size:16px;color:var(--steel);}
.gc-ss-app__c p{margin:0;font-size:13.5px;color:var(--muted);}

/* QC checklist */
.gc-ss-qc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.gc-ss-qc__c{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px;}
.gc-ss-qc__c h3{margin:0 0 6px;font-size:15.5px;color:var(--steel);display:flex;align-items:center;gap:8px;}
.gc-ss-qc__c h3::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ok);flex:none;}
.gc-ss-qc__c ul{margin:0;padding-left:18px;font-size:14px;}
.gc-ss-qc__c li{margin:4px 0;}

/* Drawing requirements list */
.gc-ss-draw{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin:16px 0;counter-reset:dr;}
.gc-ss-draw li{list-style:none;padding:9px 0 9px 38px;position:relative;border-bottom:1px solid var(--line);font-size:14.5px;}
.gc-ss-draw li:last-child{border-bottom:none;}
.gc-ss-draw li::before{counter-increment:dr;content:counter(dr);position:absolute;left:0;top:9px;width:24px;height:24px;
  background:var(--steel);color:#fff;border-radius:50%;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.gc-ss-draw li b{color:var(--steel-2);}

/* FAQ */
.gc-ss-faq{margin:20px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.gc-ss-faq__i{border-bottom:1px solid var(--line);}
.gc-ss-faq__i:last-child{border-bottom:none;}
.gc-ss-faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:15px 44px 15px 18px;
  font-size:16px;font-weight:700;color:var(--steel);position:relative;font-family:inherit;}
.gc-ss-faq__q::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent);font-weight:700;}
.gc-ss-faq__i[data-open="1"] .gc-ss-faq__q::after{content:"\2212";}
.gc-ss-faq__a{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 18px;}
.gc-ss-faq__i[data-open="1"] .gc-ss-faq__a{max-height:520px;padding:0 18px 16px;}
.gc-ss-faq__a p{margin:6px 0;font-size:14.5px;color:var(--ink);}

/* CTA + related */
.gc-ss-cta{background:linear-gradient(135deg,var(--steel),var(--steel-2));color:#fff;border-radius:14px;padding:28px;text-align:center;margin:34px 0;}
.gc-ss-cta h2{color:#fff;margin:0 0 8px;font-size:24px;border:none;}
.gc-ss-cta p{color:var(--silver-2);margin:0 0 18px;font-size:15px;}
.gc-ss-related{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 0;}
.gc-ss-related a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:14.5px;font-weight:600;color:var(--steel);}
.gc-ss-related a:hover{border-color:var(--accent);text-decoration:none;background:#f6f9fc;}
.gc-ss-related a span{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px;}

/* Modal (site-level reusable) */
.gc-ss #gcqModal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(10,20,35,.72);align-items:center;justify-content:center;padding:20px;}
.gc-ss #gcqModal.gcq-show{display:flex;}
.gc-ss .gcq-modal__box{position:relative;width:100%;max-width:880px;height:86vh;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);}
.gc-ss .gcq-modal__close{position:absolute;top:10px;right:12px;z-index:5;width:34px;height:34px;border:none;border-radius:50%;background:var(--steel);color:#fff;font-size:19px;line-height:1;cursor:pointer;}
.gc-ss .gcq-modal__box iframe{width:100%;height:100%;border:0;display:block;}

.gc-ss-btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:13px 30px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;}
.gc-ss-btn:hover{background:var(--accent-d);}
.gc-ss-btn--ghost{background:#fff;color:var(--accent);border:2px solid var(--accent);padding:11px 26px;}

@media (max-width:780px){
  .gc-ss-hero{grid-template-columns:1fr;}
  .gc-ss-cmp,.gc-ss-sw,.gc-ss-app,.gc-ss-qc,.gc-ss-related,.gc-ss-figgrid{grid-template-columns:1fr;}
  .gc-ss-hero__title{font-size:27px;}
  .gc-ss .gc-h2{font-size:23px;}
  .gc-ss-specbar{grid-template-columns:1fr;}
}