/* ============================================================
   Product page: Custom Stainless Steel Round Head Screws with Nuts
   Scope: .gc-rsn
   Note: product-page layout (gallery + buy box + spec sections).
   Not the technical-article template.
   ============================================================ */

.gc-rsn{
  --ink:#16202b;
  --body:#37464f;
  --muted:#64757f;
  --accent:#4a90c4;
  --accent-deep:#2d6a8f;
  --line:#dde5eb;
  --line-soft:#eaf0f4;
  --tint:#f4f8fb;
  --steel:#edf1f4;
  --steel-deep:#dce3e8;
  --max:1180px;
  color:var(--body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
.gc-rsn *{box-sizing:border-box;}
.gc-rsn p{margin:0 0 16px;}
.gc-rsn strong{color:var(--ink);font-weight:650;}
.gc-rsn a{color:var(--accent-deep);text-decoration:none;}
.gc-rsn a:hover{text-decoration:underline;}
.gc-rsn code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--tint);border:1px solid var(--line-soft);
  border-radius:4px;padding:1px 5px;color:var(--accent-deep);white-space:nowrap;
}

/* ---------- breadcrumb ---------- */
.gc-rsn-crumbs{
  max-width:var(--max);margin:0 auto;padding:0 0 14px;
  font-size:13.5px;color:var(--muted);letter-spacing:.01em;
}
.gc-rsn-crumbs a{color:var(--muted);}
.gc-rsn-crumbs span{color:var(--steel-deep);margin:0 7px;}

/* ---------- hero: gallery + buy box ---------- */
.gc-rsn-hero{
  max-width:var(--max);margin:0 auto;padding:0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:44px;align-items:start;
}
.gc-rsn-gallery{position:relative;}
.gc-rsn-main{
  margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#12202b 0%,#1b3040 55%,#0f1b24 100%);
  box-shadow:0 18px 40px -24px rgba(16,38,54,.5);
}
.gc-rsn-main img{display:block;width:100%;height:auto;}
.gc-rsn-thumbs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px;
}
.gc-rsn-thumbs figure{
  margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#0f1b24;transition:border-color .18s,transform .18s;
}
.gc-rsn-thumbs figure:hover{border-color:var(--accent);transform:translateY(-2px);}
.gc-rsn-thumbs img{display:block;width:100%;height:auto;}

.gc-rsn-buy{padding-top:6px;}
.gc-rsn-eyebrow{
  margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-deep);
}
.gc-rsn-buy h2{
  margin:0 0 14px;font-size:34px;line-height:1.2;letter-spacing:-.015em;
  color:var(--ink);font-weight:700;
}
.gc-rsn-lede{font-size:17.5px;color:var(--body);margin:0 0 20px;}

/* key facts */
.gc-rsn-keyfacts{
  list-style:none;margin:0 0 24px;padding:20px 22px;
  background:var(--tint);border:1px solid var(--line-soft);border-radius:12px;
}
.gc-rsn-keyfacts li{
  position:relative;padding-left:20px;margin:0 0 9px;font-size:15.5px;line-height:1.55;
}
.gc-rsn-keyfacts li:last-child{margin-bottom:0;}
.gc-rsn-keyfacts li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);
}
.gc-rsn-keyfacts b{display:block;font-weight:650;color:var(--ink);font-size:14px;letter-spacing:.01em;}

/* CTA button (site standard) */
.gcq-btn{
  display:inline-block;padding:15px 34px;border-radius:8px;
  background:linear-gradient(135deg,#4a90c4 0%,#2d6a8f 100%);
  color:#fff !important;font-size:16px;font-weight:650;letter-spacing:.015em;
  text-decoration:none !important;text-align:center;border:0;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(45,106,143,.65);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.gcq-btn:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 30px -12px rgba(45,106,143,.72);
}
.gc-rsn-buy .gcq-btn{width:100%;margin-top:4px;}
.gc-rsn-buy-note{
  margin:12px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55;
}

/* ---------- fact strip ---------- */
.gc-rsn-strip{
  max-width:var(--max);margin:52px auto 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.gc-rsn-strip div{
  padding:18px 18px 16px;border:1px solid var(--line);border-radius:10px;
  background:#fff;
}
.gc-rsn-strip b{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:6px;
}
.gc-rsn-strip span{display:block;font-size:15px;color:var(--ink);line-height:1.45;}

/* ---------- content column ---------- */
.gc-rsn-body{max-width:var(--max);margin:0 auto;}
.gc-rsn-sec{margin:64px 0 0;scroll-margin-top:24px;}
.gc-rsn-sec > h2{
  margin:0 0 8px;font-size:27px;line-height:1.26;letter-spacing:-.012em;
  color:var(--ink);font-weight:700;
}
.gc-rsn-sec > h2 + p{margin-top:0;}
.gc-rsn-kicker{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.gc-rsn-rule{
  height:3px;width:52px;border-radius:2px;margin:0 0 20px;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
}
.gc-rsn-short{
  border-left:3px solid var(--accent);background:var(--tint);
  padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 20px;
}
.gc-rsn-short p{margin:0;font-size:16.5px;}

/* ---------- spec table ---------- */
.gc-rsn-spec{
  width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15.5px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.gc-rsn-spec caption{
  caption-side:top;text-align:left;font-size:13.5px;color:var(--muted);
  padding:0 0 8px;
}
.gc-rsn-spec th,.gc-rsn-spec td{
  padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft);
}
.gc-rsn-spec thead th{
  background:var(--steel);color:var(--ink);font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.gc-rsn-spec tbody tr:nth-child(even){background:#fbfdfe;}
.gc-rsn-spec tbody tr:last-child td{border-bottom:0;}
.gc-rsn-spec td:first-child{font-weight:650;color:var(--ink);width:27%;}
.gc-rsn-spec td:nth-child(2){width:30%;}

/* ---------- option cards ---------- */
.gc-rsn-opts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:8px 0 8px;
}
.gc-rsn-opts > div{
  border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff;
}
.gc-rsn-opts h3{
  margin:0 0 6px;font-size:16.5px;color:var(--ink);font-weight:650;
}
.gc-rsn-opts p{margin:0;font-size:15px;color:var(--body);}

/* ---------- note ---------- */
.gc-rsn-note{
  border:1px solid var(--line);border-left:3px solid var(--accent-deep);
  background:#fff;border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0;
  font-size:15.5px;
}
.gc-rsn-note p:last-child{margin-bottom:0;}
.gc-rsn-warn{
  border:1px solid #f0e2c8;border-left:3px solid #c08a2e;background:#fdf9f1;
  border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0;font-size:15.5px;
}
.gc-rsn-warn p:last-child{margin-bottom:0;}

/* ---------- figures ---------- */
.gc-rsn-figure{
  margin:22px 0;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:16px 16px 0;overflow:hidden;
}
.gc-rsn-figure svg{display:block;width:100%;height:auto;}
.gc-rsn-figure img{display:block;width:100%;height:auto;border-radius:6px;}
.gc-rsn-figure figcaption{
  font-size:13.5px;color:var(--muted);line-height:1.6;
  padding:12px 2px 14px;border-top:1px solid var(--line-soft);margin-top:12px;
}
.gc-rsn-svgwrap{padding:4px 0 0;}

/* ---------- check list ---------- */
.gc-rsn-check{list-style:none;margin:0 0 18px;padding:0;}
.gc-rsn-check li{
  position:relative;padding-left:26px;margin:0 0 10px;font-size:15.5px;
}
.gc-rsn-check li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:12px;
  border:2px solid var(--accent);border-radius:3px;background:#fff;
}
.gc-rsn-check b{color:var(--ink);}

/* ---------- FAQ ---------- */
.gc-rsn-faq details{
  border:1px solid var(--line);border-radius:10px;margin:0 0 10px;background:#fff;
  padding:0 18px;
}
.gc-rsn-faq summary{
  cursor:pointer;padding:15px 0;font-size:16px;font-weight:650;color:var(--ink);
  list-style:none;position:relative;padding-right:30px;
}
.gc-rsn-faq summary::-webkit-details-marker{display:none;}
.gc-rsn-faq summary::after{
  content:"+";position:absolute;right:2px;top:13px;font-size:20px;font-weight:400;
  color:var(--accent);line-height:1;
}
.gc-rsn-faq details[open] summary::after{content:"\2212";}
.gc-rsn-faq details[open] summary{border-bottom:1px solid var(--line-soft);}
.gc-rsn-faq details p{margin:14px 0;font-size:15.5px;}

/* ---------- CTA band ---------- */
.gc-rsn-cta{
  max-width:var(--max);margin:64px auto 0;padding:40px 40px 38px;
  border-radius:16px;border:1px solid var(--line);
  background:
    radial-gradient(120% 150% at 12% 0%,rgba(74,144,196,.12) 0%,rgba(74,144,196,0) 58%),
    linear-gradient(180deg,#fbfdfe 0%,#f2f7fb 100%);
}
.gc-rsn-cta h2{
  margin:0 0 10px;font-size:26px;line-height:1.28;color:var(--ink);font-weight:700;
}
.gc-rsn-cta p{max-width:760px;margin:0 0 22px;font-size:16px;}
.gc-rsn-cta .gcq-btn{min-width:280px;}
.gc-rsn-cta small{
  display:block;margin-top:14px;font-size:13.5px;color:var(--muted);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .gc-rsn-hero{grid-template-columns:1fr;gap:28px;}
  .gc-rsn-buy h2{font-size:29px;}
  .gc-rsn-strip{grid-template-columns:repeat(2,1fr);}
  .gc-rsn-opts{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .gc-rsn{font-size:16px;}
  .gc-rsn-buy h2{font-size:25px;}
  .gc-rsn-sec > h2{font-size:22px;}
  .gc-rsn-strip{grid-template-columns:1fr;}
  .gc-rsn-spec{font-size:14.5px;}
  .gc-rsn-spec th,.gc-rsn-spec td{padding:11px 12px;}
  .gc-rsn-spec td:first-child{width:38%;}
  .gc-rsn-cta{padding:28px 22px;}
  .gc-rsn-cta .gcq-btn{width:100%;min-width:0;}
  .gc-rsn-thumbs{gap:8px;}
}