/*
Single Product page styling — ported 1:1 from the approved ik reference
design (C:\Users\DELL\Downloads\ik), scoped entirely under .dr-sp so it
cannot affect any other template. Uses the theme's existing design tokens
(colors, fonts) defined in style.css; does not redefine or load fonts.
*/

.dr-sp{max-width:100%;overflow-x:hidden;}
.dr-sp *,.dr-sp *::before,.dr-sp *::after{box-sizing:border-box;}
.dr-sp img{max-width:100%;height:auto;display:block;}

.dr-sp-wrap{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad);}
.dr-sp-section{padding:88px 0;}
.dr-sp-kicker{
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--red);
  margin-bottom:16px;display:flex;align-items:center;gap:14px;
}
.dr-sp-kicker::before{content:"";width:34px;height:2px;background:var(--red);display:inline-block;flex-shrink:0;}
.dr-sp-sec-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:38px;line-height:1.05;color:var(--true-black);margin:0;
}
.dr-sp-sec-lead{font-size:18px;color:var(--gray-600);max-width:680px;margin-top:18px;line-height:1.65;}

.dr-sp .dr-btn{
  padding:15px 28px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;border-radius:4px;gap:10px;
}
.dr-sp .dr-btn svg{width:18px;height:18px;flex-shrink:0;}
.dr-sp .dr-btn-outline-red{border-color:var(--red);color:var(--red);background:transparent;}
.dr-sp .dr-btn-outline-red:hover{background:var(--red);color:#fff;}
.dr-sp-secondary-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;}
.dr-sp-secondary-links a{font-size:13px;font-weight:600;color:var(--gray-600);text-decoration:underline;text-underline-offset:2px;}
.dr-sp-secondary-links a:hover{color:var(--red);}

/* ---------- HERO ---------- */
.dr-sp-hero{padding-top:44px;padding-bottom:64px;background:#fff;border-bottom:1px solid var(--gray-border);}
.dr-sp-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gray-600);margin-bottom:34px;
}
.dr-sp-breadcrumb a{text-decoration:none;color:var(--gray-600);transition:color .15s;}
.dr-sp-breadcrumb a:hover{color:var(--red);}
.dr-sp-breadcrumb .sep{color:var(--gray-300);}
.dr-sp-breadcrumb .here{color:var(--red);font-weight:600;}

.dr-sp-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}

/* gallery */
.dr-sp-gallery-main{
  position:relative;aspect-ratio:4/3;background:var(--bg-light);border:1px solid var(--gray-border);overflow:hidden;
}
.dr-sp-gallery-main img{width:100%;height:100%;object-fit:cover;}
.dr-sp-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-top:14px;}
.dr-sp-thumbs button{
  padding:0;border:1px solid var(--gray-border);background:var(--bg-light);aspect-ratio:1;overflow:hidden;
  cursor:pointer;transition:border-color .15s;
}
.dr-sp-thumbs button img{width:100%;height:100%;object-fit:cover;}
.dr-sp-thumbs button.is-active{border-color:var(--red);border-width:2px;}

/* summary */
.dr-sp-tag{
  display:inline-block;background:var(--red-light,#FDEAEA);color:var(--red);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;margin-bottom:16px;
}
.dr-sp-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:46px;line-height:1.0;color:var(--true-black);margin:0;
}
.dr-sp-subtitle{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-600);margin-top:10px;}
.dr-sp-desc{font-size:17px;line-height:1.7;color:var(--gray-700);margin-top:22px;}

.

.dr-sp-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

/* ---------- KEY BENEFITS ---------- */
.dr-sp-benefits{background:var(--bg-light);}
.dr-sp-ben-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:46px;}
.dr-sp-ben{background:#fff;border:1px solid var(--gray-border);border-top:2px solid var(--red);padding:24px 20px;}
.dr-sp-ben-icon{width:32px;height:32px;margin-bottom:16px;object-fit:contain;}
.dr-sp-ben h3{font-family:var(--font-display);font-weight:600;font-size:15px;text-transform:uppercase;color:var(--true-black);line-height:1.2;margin:0;}
.dr-sp-ben p{font-size:13px;color:var(--gray-600);margin:8px 0 0;line-height:1.5;}


/* ---------- WHY CHOOSE ---------- */

.dr-sp-why-choose {
    background: #191919;
    color: #fff;
    padding: 88px 0;
}

.dr-sp-why-head {
    max-width: 780px;
    margin: 0 auto 54px;
    text-align: center;
}

.dr-sp-why-line {
    display: block;
    width: 36px;
    height: 3px;
    background: var(--red);
    margin: 0 auto 20px;
}

.dr-sp-why-head h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    color: #fff;
    margin: 0;
}

.dr-sp-why-head p {
    font-size: 17px;
    line-height: 1.75;
    color: #c9c9c9;
    margin: 18px auto 0;
}

.dr-sp-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
}

.dr-sp-why-grid.is-single {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
}

.dr-sp-why-col h3 {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 16px;
}

.dr-sp-why-copy,
.dr-sp-why-list {
    font-size: 15.5px;
    line-height: 1.8;
    color: #c7c7c7;
}

.dr-sp-why-copy p {
    margin: 0 0 18px;
}

.dr-sp-why-list {
    margin: 20px 0 0;
    padding-left: 20px;
}

.dr-sp-why-list li + li {
    margin-top: 7px;
}

@media (max-width: 640px) {
    .dr-sp-why-choose {
        padding: 56px 0;
    }

    .dr-sp-why-head {
        margin-bottom: 38px;
    }

    .dr-sp-why-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}


/* ---------- QUOTE CTA BAND ---------- */
.dr-sp-quote{background:#fff;position:relative;overflow:hidden;border-top:2px solid var(--red);}
.dr-sp-quote-wmk{position:absolute;right:-60px;top:50%;transform:translateY(-50%);opacity:.05;pointer-events:none;}
.dr-sp-quote .dr-sp-wrap{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:48px;
  flex-wrap:wrap;padding-top:72px;padding-bottom:72px;
}
.dr-sp-quote h2{
  font-family:var(--font-display);font-weight:800;font-size:46px;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--true-black);line-height:1.0;margin:0;
}
.dr-sp-quote h2 .accent{color:var(--red);}
.dr-sp-quote p{font-size:18px;color:var(--gray-600);margin:14px 0 0;max-width:46ch;}

/* ---------- RELATED PRODUCTS ---------- */
.dr-sp-related{background:var(--bg-light);}
.dr-sp-related .dr-related-grid{margin-top:46px;margin-bottom:0;}

/* ---------- MOBILE STICKY CTA ---------- */
.dr-sp-mobile-cta{
  display:none;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--gray-border-2);
  padding:12px 16px;z-index:90;gap:10px;
}
.dr-sp-mobile-cta .dr-btn{flex:1;padding:12px;font-size:13.5px;}

/* ---------- QUOTE MODAL ---------- */
.dr-sp-modal-overlay{
  position:fixed;inset:0;background:rgba(10,10,10,.6);backdrop-filter:blur(3px);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s;
}
.dr-sp-modal-overlay.is-open{display:flex;opacity:1;}
.dr-sp-modal{
  background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.4);border-top:3px solid var(--red);transform:translateY(14px);transition:transform .2s;
}
.dr-sp-modal-overlay.is-open .dr-sp-modal{transform:translateY(0);}
.dr-sp-modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid var(--gray-border);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-600);
  transition:border-color .15s,color .15s;z-index:3;
}
.dr-sp-modal-close:hover{border-color:var(--red);color:var(--red);}
.dr-sp-modal-close svg{width:18px;height:18px;}
.dr-sp-modal-head{padding:30px 34px 22px;position:relative;overflow:hidden;}
.dr-sp-modal-wmk{position:absolute;right:-50px;top:-46px;width:190px;height:190px;opacity:.05;pointer-events:none;}
.dr-sp-modal-kicker{
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--red);
  margin-bottom:10px;display:flex;align-items:center;gap:12px;
}
.dr-sp-modal-kicker::before{content:"";width:28px;height:2px;background:var(--red);}
.dr-sp-modal-head h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:30px;color:var(--true-black);line-height:1;margin:0;
}
.dr-sp-modal-head p{font-size:14px;color:var(--gray-600);margin-top:10px;max-width:42ch;}

.dr-sp-modal .dr-rfq-form-wrap{width:100%;}
.dr-sp-modal .dr-rfq-form{border:none;padding:24px 34px 30px;background:transparent;}
.dr-sp-modal .dr-rfq-field input,
.dr-sp-modal .dr-rfq-field select,
.dr-sp-modal .dr-rfq-field textarea{background:var(--bg-light);border-color:var(--gray-border);border-radius:3px;}
.dr-sp-modal .dr-rfq-field input:focus,
.dr-sp-modal .dr-rfq-field select:focus,
.dr-sp-modal .dr-rfq-field textarea:focus{background:#fff;border-color:var(--red);box-shadow:none;}
.dr-sp-modal .dr-rfq-submit{
  text-transform:uppercase;letter-spacing:.06em;border-radius:4px;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.dr-sp-modal .dr-rfq-submit::after{content:"\2192";font-size:16px;line-height:1;}
.dr-sp-modal .dr-rfq-note{font-size:12px;color:var(--gray-600);margin-top:16px;line-height:1.6;text-align:left;}
.dr-sp-modal .dr-rfq-fineprint{text-align:left;}
.dr-sp-modal .dr-rfq-success{padding:54px 34px 58px;}

/* =========================================================
   RESPONSIVE — ik's own breakpoints (1080 / 640), verified at
   1440 / 1280 / 1024 / 768 / 430 / 390 / 360 with overflow guards
========================================================= */
@media (max-width:1080px){
  .dr-sp-hero-grid{grid-template-columns:1fr;gap:40px;}
  .dr-sp-ben-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1023px){
  .dr-sp-mobile-cta{display:flex;}
}
@media (max-width:640px){
  .dr-sp-wrap{padding-left:22px;padding-right:22px;}
  .dr-sp-section{padding:56px 0;}
  .dr-sp-title{font-size:34px;}
  .dr-sp-ben-grid{grid-template-columns:1fr 1fr;}

  .dr-sp-quote .dr-sp-wrap{padding-top:48px;padding-bottom:48px;}
  .dr-sp-quote h2{font-size:30px;}
}

/* Overflow / small-screen safety nets only — not stylistic redesign */
@media (max-width:430px){
  .dr-sp .dr-btn{flex:1 1 auto;justify-content:center;}
  .dr-sp-modal-head{padding:24px 20px 4px;}
  .dr-sp-modal .dr-rfq-form{padding:20px 20px 24px;}
}
@media (max-width:360px){
  .dr-sp-ben-grid{grid-template-columns:1fr;}
}