/* ==========================================================================
   INTACT — Single Product Page Styles
   Rewritten to match the ACTUAL markup in content-single-product.php.
   Everything is scoped under body.single-product so it can never overlap
   with shop-archive.css (which only loads on the Shop/category archives).
   ========================================================================== */

:root{
  --red:#BD1F08;
  --red-dark:#C4330F;
  --black:#0E0E0E;
  --line-light:#E4E1D9;
  --gray-text:#5A5A57;
  --gray-text-dark:#9C9C97;
  --off-white:#F5F3EF;
  --off-white-2:#F0EEE7;
  --green-ok:#4C8F5C;
}

body.single-product{ background:#fff; color:var(--black); }

/* ============ WRAP / CONTAINER ============
   shop-archive.css defines .intact-wrap for shop/category pages, but that
   file never loads here — so this file must define its own, scoped so it
   can't clash if both stylesheets are ever present on the same page. */
body.single-product .intact-wrap{
  max-width:1180px;margin:0 auto;padding:0 6vw;
}

body.single-product .intact-section{ padding:50px 0; }

/* ============ SHARED BUTTON STYLES ============
   (shop-archive.css defines .intact-btn globally for shop pages; redefine
   scoped copy here since that file isn't loaded on single product pages) */
body.single-product .intact-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:13px;letter-spacing:0.4px;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;white-space:nowrap;cursor:pointer;border:none;
  text-decoration:none;
}
body.single-product .intact-btn svg{ width:13px;height:13px; }
body.single-product .intact-btn-solid{ background:var(--red);color:#fff; }
body.single-product .intact-btn-solid:hover{ background:var(--red-dark);color:#fff; }
body.single-product .intact-btn-outline{ background:transparent;color:var(--black);border:1.5px solid var(--black); }
body.single-product .intact-btn-outline:hover{ background:var(--black);color:#fff; }

/* ============ BREADCRUMB BANNER (.intact-shop-banner reused here) ============
   shop-archive.css styles this too, but again isn't loaded on product pages,
   so give it a slim scoped treatment matching what this template needs
   (crumb only — no h1/lede here). */
body.single-product .intact-shop-banner{
  background:var(--black);
  padding:22px 0;
}
body.single-product .intact-shop-banner .intact-crumb{
  font-size:12.5px;color:rgba(255,255,255,0.6);
}
body.single-product .intact-shop-banner .intact-crumb a{ color:rgba(255,255,255,0.6); }
body.single-product .intact-shop-banner .intact-crumb a:hover{ color:#fff; }
body.single-product .intact-shop-banner .intact-crumb .accent{ color:var(--red);font-weight:700; }
body.single-product .intact-shop-banner .intact-crumb .current{ color:#fff;font-weight:700; }

/* ============ PRODUCT HERO ============
   .intact-wrap is the direct grid parent of .intact-gallery-col and
   .intact-summary-col in the template — grid must live here, not on a
   separate ".intact-p-hero-grid" class that doesn't exist in the markup. */
body.single-product .intact-hero .intact-wrap{
  display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;align-items:flex-start;
}
@media (max-width:900px){
  body.single-product .intact-hero .intact-wrap{ grid-template-columns:1fr;gap:36px; }
}

body.single-product .intact-gallery-col{ position:relative; }
body.single-product .intact-gallery-badge{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,0.92);
  color:var(--black);font-size:10.5px;font-weight:800;letter-spacing:0.5px;
  text-transform:uppercase;padding:5px 10px;border-radius:3px;
}

/* Real WooCommerce gallery — reset WC's default spacing/borders so it
   sits flush inside our layout, keep its zoom/lightbox behaviour. */
body.single-product .intact-gallery-col.woocommerce div.images,
body.single-product .intact-gallery-col div.images{ margin:0; }
body.single-product .woocommerce-product-gallery__wrapper{
  border-radius:10px;overflow:hidden;background:var(--off-white-2);
}
body.single-product .woocommerce-product-gallery__image img{
  border-radius:10px;width:100%;height:auto;display:block;
}
body.single-product .flex-control-thumbs{
  display:flex;gap:12px;overflow: visible !important;padding:0;list-style:none;flex-wrap:wrap;
}
body.single-product .flex-control-thumbs li{ width:76px;height:76px; }
body.single-product .flex-control-thumbs img{
  width:100%;height:100%;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid transparent;opacity:1;
}
body.single-product .flex-control-thumbs img.flex-active{ border-color:var(--red); }

body.single-product .intact-cat{
  font-size:11.5px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;
  color:var(--red);margin-bottom:10px;
}
body.single-product .intact-title{
  font-weight:900;font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;
  line-height:1.15;letter-spacing:-0.3px;margin:0 0 4px;
}

body.single-product .intact-rating{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gray-text);margin-top:12px;
}
body.single-product .intact-rating .stars{ color:#F2A623;font-size:14px;letter-spacing:1px; }

/* Real WC price markup, in case theme outputs it inside the summary col */
body.single-product .intact-summary-col .price{ font-weight:900;font-size:28px;color:var(--black);margin-top:16px;display:block; }
body.single-product .intact-summary-col .price del{ color:var(--gray-text-dark);font-weight:400;font-size:16px;margin-right:8px; }
body.single-product .intact-summary-col .price ins{ text-decoration:none; }

body.single-product .intact-desc{ font-size:14.5px;color:var(--gray-text);margin-top:16px;max-width:520px; }
body.single-product .intact-desc p:last-child{ margin-bottom:0; }

body.single-product .intact-chips{ display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }
body.single-product .intact-chips span{
  font-size:11.5px;font-weight:700;color:var(--black);background:var(--off-white);
  padding:7px 14px;border-radius:4px;text-transform:uppercase;letter-spacing:0.3px;
}

body.single-product .intact-avail{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--green-ok);font-weight:700;margin-top:20px;
}
body.single-product .intact-avail svg{ width:15px;height:15px;stroke:var(--green-ok);fill:none;stroke-width:2.2; }
body.single-product .intact-out-of-stock{ color:#B23A3A; }

/* ============ WOOCOMMERCE ADD-TO-CART FORM ============
   NOTE: the template calls woocommerce_template_single_add_to_cart()
   directly inside .intact-summary-col — there is no .intact-buy-row
   wrapper in the markup. Target the real form.cart in place. */
body.single-product .intact-summary-col form.cart{
  display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin-top:26px;
}
body.single-product .intact-summary-col .quantity{
  display:flex;align-items:stretch;border:1.5px solid var(--black);border-radius:2px;overflow:hidden;
}
body.single-product .intact-summary-col .quantity .qty{
  width:70px;height:52px;text-align:center;border:none;
  border-left:1.5px solid var(--black);border-right:1.5px solid var(--black);
  font-size:15px;font-weight:800;color:var(--black);font-family:inherit;outline:none;
  -moz-appearance:textfield;
}
body.single-product .intact-summary-col .quantity .qty::-webkit-outer-spin-button,
body.single-product .intact-summary-col .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }

/* +/- steppers injected by intact-product.js — purely cosmetic */
body.single-product .intact-summary-col .intact-qty-btn{
  width:40px;background:#fff;border:none;font-size:18px;font-weight:700;cursor:pointer;
  color:var(--black);font-family:inherit;
}
body.single-product .intact-summary-col .intact-qty-btn:hover{ background:var(--off-white); }

body.single-product .intact-summary-col button.single_add_to_cart_button{
  flex:1;min-width:180px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--red);color:#fff;border:none;
  font-weight:800;font-size:13px;letter-spacing:0.4px;text-transform:uppercase;
  padding:0 30px;border-radius:2px;cursor:pointer;font-family:inherit;
}
body.single-product .intact-summary-col button.single_add_to_cart_button:hover{ background:var(--red-dark); }
body.single-product .intact-summary-col button.single_add_to_cart_button.disabled{ opacity:0.5;cursor:not-allowed; }
body.single-product .intact-summary-col p.stock{ width:100%;font-size:12.5px;color:var(--gray-text);margin-top:8px; }

/* ============ ROW 2 — Get A Quote / Download Datasheet ============ */
body.single-product .intact-actions{ display:flex;gap:14px;margin-top:14px;flex-wrap:wrap; }
body.single-product .intact-actions .intact-btn{ flex:1;min-width:180px; }

body.single-product .intact-trust-row{
  display:flex;gap:26px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line-light);flex-wrap:wrap;
}
body.single-product .intact-trust-item{ display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--gray-text); }
body.single-product .intact-trust-item svg{ width:20px;height:20px;stroke:var(--red);fill:none;stroke-width:1.7;flex-shrink:0; }

/* ============ DETAILS + QUOTE ============
   .intact-wrap here is the direct grid parent of the details column div
   and the [intact_quote_form] output (.intact-quote-card). */
body.single-product .intact-details .intact-wrap{
  display:grid;grid-template-columns:1.4fr 0.9fr;gap:56px;align-items:start;
}
@media (max-width:960px){
  body.single-product .intact-details .intact-wrap{ grid-template-columns:1fr; }
}

body.single-product .intact-d-block{ margin-bottom:44px; }
body.single-product .intact-d-block:last-child{ margin-bottom:0; }
body.single-product .intact-d-title{
  font-weight:900;font-size:17px;text-transform:uppercase;
  margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--black);
}
body.single-product .intact-d-block p{ font-size:14.5px;color:var(--gray-text);margin-bottom:14px; }
body.single-product .intact-d-block p:last-child{ margin-bottom:0; }

body.single-product .intact-spec-table{ width:100%;border-collapse:collapse;font-size:13.5px; }
body.single-product .intact-spec-table tr{ border-bottom:1px solid var(--line-light); }
body.single-product .intact-spec-table tr:last-child{ border-bottom:none; }
body.single-product .intact-spec-table td{ padding:12px 0; }
body.single-product .intact-spec-table td:first-child{ color:var(--gray-text);width:45%; }
body.single-product .intact-spec-table td:last-child{ font-weight:700;color:var(--black); }

body.single-product .intact-feat-list{ list-style:none;margin:0;padding:0; }
body.single-product .intact-feat-list li{
  display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--gray-text);padding:10px 0;
}
body.single-product .intact-feat-list svg{ width:17px;height:17px;stroke:var(--red);fill:none;stroke-width:2.2;flex-shrink:0;margin-top:2px; }

/* ============ GET A QUOTE SIDEBAR ============
   Markup comes from the [intact_quote_form] shortcode (functions.php) —
   already outputs .intact-quote-card, .intact-field, etc. matching below. */
body.single-product .intact-quote-card{
  background:var(--black);color:#fff;border-radius:10px;padding:34px 30px;
  position:sticky;top:24px;
}
body.single-product .intact-quote-card h3{
  font-weight:900;font-size:18px;text-transform:uppercase;margin:0 0 8px;
}
body.single-product .intact-quote-card p{ font-size:13px;color:rgba(255,255,255,0.65);margin:0 0 22px; }
body.single-product .intact-quote-success{
  background:rgba(76,143,92,0.15);border:1px solid var(--green-ok);color:#8FD3A0;
  font-size:13px;padding:12px 14px;border-radius:6px;margin-bottom:20px;display:none;
}
body.single-product .intact-quote-success.show{ display:block; }
body.single-product .intact-quote-error{
  background:rgba(178,58,58,0.15);border:1px solid #B23A3A;color:#F0A8A8;
  font-size:13px;padding:12px 14px;border-radius:6px;margin-bottom:20px;display:none;
}
body.single-product .intact-quote-error.show{ display:block; }
body.single-product .intact-field{ margin-bottom:14px; }
body.single-product .intact-field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;
  color:rgba(255,255,255,0.6);margin-bottom:7px;
}
body.single-product .intact-field input,
body.single-product .intact-field select,
body.single-product .intact-field textarea{
  width:100%;background:#1C1C1C;border:1px solid #2A2A2A;border-radius:4px;
  padding:12px 13px;font-size:13.5px;color:#fff;outline:none;font-family:inherit;box-sizing:border-box;
}
body.single-product .intact-field input:focus,
body.single-product .intact-field select:focus,
body.single-product .intact-field textarea:focus{ border-color:var(--red); }
body.single-product .intact-field textarea{ resize:vertical;min-height:70px; }
body.single-product .intact-quote-card .intact-btn{ width:100%;padding:15px;margin-top:6px; }
body.single-product .intact-quote-note{ font-size:11.5px;color:rgba(255,255,255,0.45);margin-top:14px;text-align:center; }

/* ============ RELATED PRODUCTS ============
   woocommerce_output_related_products() reuses .intact-p-grid /
   .intact-p-card — those come from shop-archive.css's card component,
   but that file isn't loaded here either. Scoped copy so cards match. */
body.single-product .related.products{ background:var(--off-white);padding:60px 6vw; }
body.single-product .related.products > h2{
  font-weight:900;font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;
  max-width:1180px;margin:0 auto 30px;
}
body.single-product .related.products ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  max-width:1180px;margin:0 auto;list-style:none;padding:0;
}
@media (max-width:960px){ body.single-product .related.products ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ body.single-product .related.products ul.products{ grid-template-columns:1fr; } }
body.single-product .related.products li.product{
  border:1px solid var(--line-light);border-radius:10px;overflow:hidden;
  background:#fff;transition:transform .18s ease, box-shadow .18s ease;
}
body.single-product .related.products li.product:hover{ transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,0.09); }
body.single-product .related.products li.product img{ width:100%;height:220px;object-fit:cover;display:block; }
body.single-product .related.products li.product .woocommerce-loop-product__title{
  font-weight:600;font-size:14px;text-transform:uppercase;margin:16px 16px 10px;
}
body.single-product .related.products li.product .price{ margin:0 16px 14px;font-weight:800;color:var(--black); }
body.single-product .related.products li.product .button{
  display:block;margin:0 16px 16px;text-align:center;background:var(--red);color:#fff;
  font-weight:800;font-size:12px;letter-spacing:0.4px;text-transform:uppercase;
  padding:12px;border-radius:2px;text-decoration:none;
}
body.single-product .related.products li.product .button:hover{ background:var(--red-dark); }

/* ============ STICKY MOBILE CTA ============ */
body.single-product .intact-sticky-cta{
  position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line-light);
  padding:14px 6vw;display:none;align-items:center;justify-content:space-between;gap:14px;
  z-index:20;box-shadow:0 -6px 20px rgba(0,0,0,0.08);
}
body.single-product .intact-sticky-name{ font-size:13px;font-weight:800;text-transform:uppercase; }
@media (max-width:900px){
  body.single-product .intact-sticky-cta{ display:flex; }
  body.single-product{ padding-bottom:76px; }
}

/* ============ FULL WIDTH / CENTERING FALLBACK ============
   Strictly scoped to body.single-product so this can never touch
   Elementor Canvas / page-builder templates elsewhere on the site —
   that was the source of the "Elementor pages look left-aligned" issue. */
body.single-product #primary,
body.single-product .content-area{
  width:100% !important;max-width:100% !important;float:none !important;margin:0 auto !important;
}
body.single-product #secondary,
body.single-product .widget-area{
  display:none !important;
}
body.single-product.ast-page-builder-template .site-content > .ast-container{
  max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important;
}