/* =====================================================================
   ControlUnits Single Product — code-built layout.
   Two columns (gallery 40% | summary 60%), custom "Choose your service"
   radio cards over WooCommerce's (hidden) variation form, full-width trust
   bar, then tabs + related. Scoped under .cu-sp.
   ===================================================================== */
.cu-sp{ --cu-red:#be1622; --cu-ink:#1c1d20; --cu-body:#41454e; --cu-line:#e7e8ec; --cu-radius:7px;
  max-width:1350px; margin:0 auto; }

/* Reach the menu like v3: WoodMart adds .wd-content-layout{padding-block:40px},
   and our wrapper isn't :first-child (so it keeps the 40px top gap). Cancel the
   top padding on single-product pages so the breadcrumb bar sits under the menu. */
body.single-product .wd-content-layout{ padding-top:0 !important; }

/* breadcrumb + notices: no background, just a divider below (in the line colour) */
.cu-sp-topbar{ margin:0 0 24px; padding:14px 0; border-bottom:1px solid var(--cu-line); }
.cu-sp-breadcrumb{ margin:0; font-size:13px; }
.cu-sp-notices{ margin:0; }

/* subtle notices (replaces WooCommerce's big coloured bars) */
.cu-sp-notices .woocommerce-message,
.cu-sp-notices .woocommerce-info,
.cu-sp-notices .woocommerce-error{
  margin:10px 0 0; padding:10px 14px 10px 38px; position:relative; min-height:0;
  border:1px solid #d8dbe0; border-radius:var(--cu-radius);
  background:#fff; color:var(--cu-ink); font-size:13.5px; line-height:1.45; list-style:none;
}
.cu-sp-notices .woocommerce-message::before,
.cu-sp-notices .woocommerce-info::before,
.cu-sp-notices .woocommerce-error::before{
  left:14px; top:13px; margin:0; font-size:15px; color:inherit;
}
.cu-sp-notices .woocommerce-message{ background:#f3f9f4; border-color:#cde8d3; color:#236b39; }
.cu-sp-notices .woocommerce-info{ background:#eef4fb; border-color:#cfe0f1; color:#1f5f99; }
.cu-sp-notices .woocommerce-error{ background:#fdf3f3; border-color:#f1cfcf; color:#b3261e; }
.cu-sp-notices .button,
.cu-sp-notices .wc-forward{
  float:right; margin:0 0 0 14px; padding:0; min-height:0;
  background:none !important; border:0 !important; box-shadow:none !important;
  color:inherit !important; font-size:13px; font-weight:700; text-transform:none;
  text-decoration:underline; letter-spacing:normal;
}

/* ---- top: gallery | summary (40 / 60) ---- */
.cu-sp-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
  margin:0 0 36px;
}
.cu-sp-gallery{ min-width:0; position:sticky; top:20px; }
.cu-sp-summary{ min-width:0; }

.cu-sp-title{ font-size:30px; line-height:1.2; margin:0 0 10px; font-weight:800; color:var(--cu-ink); }
.cu-sp-rating{ margin:0 0 14px; min-height:20px; text-align:left; display:flex; justify-content:flex-start; }
.cu-sp-rating > *,
.cu-sp-rating .reviews-io-rating-bar-widget{ margin-left:0 !important; justify-content:flex-start !important; text-align:left !important; }
.cu-sp-sku{ font-size:12.5px; color:#8a909c; margin:0 0 10px; }
.cu-sp-sku-val{ font-weight:700; color:var(--cu-ink); }
.cu-sp-desc{ margin:0 0 18px; line-height:1.6; color:var(--cu-body); font-size:15px; }

.cu-sp-price-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin:0; }
.cu-sp-price{ font-size:30px; font-weight:800; color:var(--cu-red); margin:0; }
.cu-sp-price .cu-sp-from{ font-size:15px; font-weight:600; color:var(--cu-body); vertical-align:middle; }
.cu-sp-price .price{ color:var(--cu-red); }
.cu-sp-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.cu-sp-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--cu-ink); }
.cu-sp-badge > i{ font-size:18px; color:var(--cu-red); flex:0 0 auto; }
.cu-sp-badge-text{ display:flex; flex-direction:column; line-height:1.25; }
.cu-sp-badge-title{ font-weight:600; }
.cu-sp-badge-sub{ font-weight:400; font-size:12px; color:#5b616e; }
/* Fast Turnaround badge: green tick with a pulsing-dot ring (expands + fades) */
.cu-sp-badge--pulse > i{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; color:#1a9e4b;
  animation:cu-sp-pulse 1.6s ease-out infinite;
}
@keyframes cu-sp-pulse{
  0%{ box-shadow:0 0 0 0 rgba(26,158,75,.5); }
  70%{ box-shadow:0 0 0 9px rgba(26,158,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(26,158,75,0); }
}
@media (prefers-reduced-motion:reduce){ .cu-sp-badge--pulse > i{ animation:none; } }

/* ---- service selector ---- */
.cu-sp-service{ margin:18px 0 16px; }
.cu-sp-service-head{ font-size:15px; font-weight:700; color:var(--cu-ink); margin-bottom:10px; }
.cu-sp-service-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cu-sp-service-card{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:12px 13px; border:2px solid var(--cu-line); border-radius:9px;
  background:#fff; cursor:pointer; transition:.15s;
}
.cu-sp-service-card:hover{ border-color:#c9ccd3; }
.cu-sp-service-card.is-selected{ border-color:var(--cu-red); background:#fdf2f3; }
/* selection dot pinned to the TOP-LEFT corner; the icon stays vertically centred */
.cu-sp-card-radio{
  position:absolute; top:11px; left:11px; width:16px; height:16px; border-radius:50%;
  border:2px solid #c4c8d0; background:#fff;
}
.cu-sp-service-card.is-selected .cu-sp-card-radio{ border-color:var(--cu-red); background:radial-gradient(circle at 50% 50%, var(--cu-red) 0 4px, #fff 5px); }
.cu-sp-card-icon{ flex:0 0 auto; width:50px; height:50px; object-fit:contain; }
.cu-sp-card-body{ display:flex; flex-direction:column; min-width:0; }
.cu-sp-card-titlerow{ display:flex; align-items:center; gap:6px; }
.cu-sp-card-title{ font-size:15px; font-weight:700; color:var(--cu-ink); }
/* (i) info icon + tooltip with the full service description */
.cu-sp-card-info{ position:relative; display:inline-flex; align-items:center; color:#8a909c; cursor:help; }
.cu-sp-card-info i{ font-size:14px; }
.cu-sp-card-info:hover, .cu-sp-card-info:focus{ color:var(--cu-red); outline:none; }
.cu-sp-card-tip{
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translate(-50%,4px); z-index:6;
  width:240px; max-width:72vw; padding:10px 12px;
  background:#1c1d20; color:#fff; font-size:12px; line-height:1.45; font-weight:400; text-align:left;
  border-radius:7px; box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:.15s; pointer-events:none; white-space:normal;
}
.cu-sp-card-tip::after{ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#1c1d20; }
.cu-sp-card-info:hover .cu-sp-card-tip,
.cu-sp-card-info:focus .cu-sp-card-tip,
.cu-sp-card-info.is-open .cu-sp-card-tip{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.cu-sp-card-sub{ font-size:12px; color:#5b616e; line-height:1.4; margin:2px 0 6px; min-height:2.5em; }
/* "Call" stays in the normal sub font; only the number is bold + red */
.cu-sp-card-num{ font-weight:800; color:var(--cu-red); text-decoration:none; white-space:nowrap; }
.cu-sp-card-num:hover{ text-decoration:underline; }
.cu-sp-card-price{ font-size:15px; font-weight:800; color:var(--cu-red); }

/* ---- add to cart (WC form: hide native dropdown / duplicate price / stock) ---- */
.cu-sp-cart{ margin:6px 0 4px; }
.cu-sp-cart .variations,
.cu-sp-cart .reset_variations,
.cu-sp-cart .woocommerce-variation-price,
.cu-sp-cart .woocommerce-variation-availability,
.cu-sp .stock,
.cu-sp-cart .woocommerce-variation-description{ display:none !important; }
.cu-sp-cart .single_variation_wrap{ display:block; }
/* qty + a wide "Add to Order" button on one row (variable + simple forms) */
.cu-sp-cart .woocommerce-variation-add-to-cart,
.cu-sp-cart form.cart{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.cu-sp-cart .quantity{ flex:0 0 auto; }
.cu-sp-cart .single_add_to_cart_button{ flex:1 1 auto; min-width:240px; }

.cu-sp-call{ margin:10px 0 16px; font-size:14px; color:var(--cu-body); text-align:center; }
.cu-sp-call a{ color:var(--cu-red); font-weight:700; }

/* tab-link pills (Common faults / Matching Vehicles) */
.cu-sp-links{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; }
.cu-sp-reviews{ margin-top:18px; }
.cu-sp-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid var(--cu-line); border-radius:var(--cu-radius);
  font-size:13px; font-weight:600; color:var(--cu-ink); cursor:pointer; transition:.15s;
}
.cu-sp-link:hover{ border-color:var(--cu-red); color:var(--cu-red); }
.cu-sp-link i{ color:var(--cu-red); font-size:15px; }

/* ---- product tabs: boxed / card style, left-aligned ---- */
.cu-sp-tabs{ margin:44px 0; scroll-margin-top:110px; } /* offset for the sticky header when pills jump here */
.cu-sp-tabs .woocommerce-tabs{ margin:0; }
.cu-sp-tabs .wd-nav-wrapper,
.cu-sp-tabs .wd-nav-tabs-wrapper.text-center{ text-align:left !important; margin:0 0 18px !important; }
.cu-sp-tabs ul.wd-nav-tabs{
  display:flex !important; flex-wrap:wrap; justify-content:flex-start !important;
  gap:8px; margin:0 !important; padding:0 !important;
  list-style:none !important; border:0 !important;
}
.cu-sp-tabs ul.wd-nav-tabs > li{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; }
.cu-sp-tabs ul.wd-nav-tabs > li::before,
.cu-sp-tabs ul.wd-nav-tabs > li::after{ display:none !important; }
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link{
  display:block; padding:11px 20px !important; margin:0 !important; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--cu-ink) !important;
  background:#f4f5f7 !important; border:1px solid var(--cu-line) !important;
  border-radius:9px !important; box-shadow:none !important; transition:.15s;
}
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link::before,
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link::after,
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link .nav-link-text::before,
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link .nav-link-text::after{ display:none !important; content:none !important; }
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link{ padding-top:11px !important; } /* cancel underline-reverse's extra top padding */
.cu-sp-tabs ul.wd-nav-tabs .wd-tabs-title{ text-transform:none !important; letter-spacing:normal !important; }
.cu-sp-tabs ul.wd-nav-tabs .wd-nav-link:hover{ background:#eef0f3 !important; border-color:#c4c8d0 !important; }
.cu-sp-tabs ul.wd-nav-tabs > li.active .wd-nav-link{ background:var(--cu-red) !important; border-color:var(--cu-red) !important; color:#fff !important; }
.cu-sp-tabs ul.wd-nav-tabs > li.active .wd-tabs-title{ color:#fff !important; }
/* panel rendered as a card */
.cu-sp-tabs .woocommerce-Tabs-panel{
  padding:26px !important; font-size:15px; line-height:1.75; color:var(--cu-body);
  border:1px solid var(--cu-line); border-radius:12px; background:#fff;
}
.cu-sp-tabs .woocommerce-Tabs-panel > h2:first-child{ font-size:21px; line-height:1.3; margin:0 0 14px; color:var(--cu-ink); }
.cu-sp-tabs .woocommerce-Tabs-panel h2,
.cu-sp-tabs .woocommerce-Tabs-panel h3{ color:var(--cu-ink); }
.cu-sp-tabs .woocommerce-Tabs-panel p{ margin:0 0 14px; }
/* accordion headers (mobile only) — hidden on desktop */
.cu-sp-acc-header{ display:none; }
.cu-sp-related{ margin:48px 0 24px; }
/* show 5 related products across on desktop — override WoodMart's inline --wd-col-lg:4 */
.cu-sp-related .wd-carousel{ --wd-col-lg:5 !important; }

/* ---- responsive ---- */
@media (max-width:1024px){
  .cu-sp-main{ grid-template-columns:1fr; gap:24px; }
  .cu-sp-gallery{ position:static; }

  /* tabs -> clean accordion on mobile.
     WoodMart hides .tabs-layout-tabs at <=1024px (expects its own accordion
     layout we don't render), so force the block visible and swap the
     horizontal nav for our injected accordion headers. Panel visibility is
     driven entirely by .cu-sp-acc-open (set by JS) so a tab can also close. */
  .cu-sp-tabs .tabs-layout-tabs,
  .cu-sp-tabs .woocommerce-tabs{ display:block !important; }
  .cu-sp-tabs .wd-nav-wrapper,
  .cu-sp-tabs ul.wd-nav-tabs{ display:none !important; }

  /* plain title rows + separators — no boxes, no colours */
  .cu-sp-acc-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:16px 2px; margin:0; scroll-margin-top:90px;
    font-family:inherit; font-size:16px; font-weight:700; line-height:1.3; text-align:left;
    color:var(--cu-ink); background:none !important;
    border:0; border-bottom:1px solid var(--cu-line); border-radius:0; cursor:pointer;
    -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  }
  /* no grey button bg on tap/focus (leftover from the theme's <button> styles) */
  .cu-sp-acc-header:hover,
  .cu-sp-acc-header:focus,
  .cu-sp-acc-header:active{ background:none !important; box-shadow:none !important; }
  .cu-sp-acc-header .cu-sp-acc-label{ flex:1 1 auto; }
  .cu-sp-acc-arrow{
    flex:0 0 auto; width:9px; height:9px; margin:-3px 4px 0;
    border-right:2px solid var(--cu-body); border-bottom:2px solid var(--cu-body);
    transform:rotate(45deg); transition:transform .2s;
  }
  .cu-sp-acc-header.is-open .cu-sp-acc-arrow{ transform:rotate(-135deg); margin:3px 4px 0; }

  /* only the open panel shows; clean, no card */
  .cu-sp-tabs .woocommerce-Tabs-panel{
    display:none !important; margin:0; padding:18px 2px !important;
    border:0 !important; border-radius:0 !important; background:none !important;
  }
  .cu-sp-tabs .woocommerce-Tabs-panel.cu-sp-acc-open{ display:block !important; }
}
@media (max-width:560px){
  .cu-sp-service-cards{ grid-template-columns:1fr; }
}