/* ══════════════════════════════════════════════════════════
   WOOCOMMERCE SINGLE PRODUCT OVERRIDE
══════════════════════════════════════════════════════════ */

.custom-single-product-layout {
  display: block;
}

/* HERO SECTION */
.sp-hero {
  background-color: var(--black, #0a0a0a);
  color: var(--white, #ffffff);
  /* Top padding accounts for fixed header + extra clearance below the logo */
  padding-top: clamp(200px, 22vw, 320px);
  padding-bottom: clamp(40px, 5vw, 80px);
}

/* .sp-container, .sp-breadcrumb-wrap, .sp-title-wrapper, .sp-sprungmarke,
   .sp-hero-title moved to shop.css — shared with the cart page and the
   request-a-quote page's breadcrumb+title, not single-product-specific. */

.sp-hero-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Regular */
  font-size: clamp(18px, 2.5vw, 28px);
  line-height: 1.333;
  color: var(--white, #ffffff);
  max-width: 1194px;
}

/* BOTTOM SECTION (WHITE) */
.sp-bottom-section {
  background-color: var(--white, #ffffff);
  color: var(--black, #0a0a0a);
  padding-top: clamp(40px, 5vw, 100px);
  padding-bottom: clamp(50px, 6vw, 120px);
}

.sp-bottom-section .sp-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
}

@media (min-width: 992px) {
  .sp-bottom-section .sp-container {
    grid-template-columns: 50% auto;
    align-items: start;
    gap: clamp(60px, 8vw, 120px);
  }
}

/* PRODUCT GALLERY */
.sp-gallery-col {
  width: 100%;
}
.sp-gallery-col .woocommerce-product-gallery {
  /* Override basic woo layout if needed, it usually defaults to 48% */
  width: 100% !important;
  float: none !important;
}

.sp-gallery-flex {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Plain native-scroll container — no carousel library. "Max 3 visible" comes
   from capping this box's size (height here, width below 1200px) with
   overflow:auto; the chevrons in .sp-gallery-thumbs-wrap just scroll it by
   one thumbnail at a time (single-product.js). */
.sp-gallery-thumbs-wrap {
  position: relative;
  flex-shrink: 0;
  width: 120px;
}

.sp-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 384px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}

.sp-gallery-thumbs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.sp-gallery-thumb {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  border: 1px solid var(--black, #0a0a0a);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
}

.sp-gallery-thumb.is-active {
  border-color: var(--red, #EB280F);
}

.sp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sp-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Height is locked by single-product.js (lockGalleryMainHeight) to the
   tallest image in the gallery at the current container width, so
   switching between images of different aspect ratios doesn't jump the
   layout — the image itself just centers within that fixed box. */
.sp-gallery-main .sc-gallery-main__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Chevron arrows */
.sp-gallery-arrow {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: var(--white, #ffffff);
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: 50%;
  color: var(--black, #0a0a0a);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease;
}

.sp-gallery-arrow svg {
  width: 18px;
  height: 18px;
}

.sp-gallery-arrow:hover {
  opacity: 0.7;
}

.sp-gallery-arrow.is-disabled {
  display: none;
}

.sp-gallery-arrow.is-hidden {
  display: none;
}

.sp-gallery-arrow--prev {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.sp-gallery-arrow--next {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.sc-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: rgba(10, 10, 10, 0.05);
  color: rgba(10, 10, 10, 0.4);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}

/* Below 1200px: thumbnails move below the main image, horizontal orientation
   (left-to-right chevrons instead of up/down) — see single-product.js for
   the matching Slick re-init at this same breakpoint. */
@media (max-width: 1199px) {
  .sp-gallery-flex {
    flex-direction: column;
  }

  .sp-gallery-main {
    order: 0;
  }

  .sp-gallery-thumbs-wrap {
    order: 1;
    width: 100%;
    margin-top: 20px;
  }

  .sp-gallery-thumbs {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
  }

  .sp-gallery-thumb {
    width: 64px;
    height: 64px;
  }

  .sp-gallery-arrow--prev {
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
  }

  .sp-gallery-arrow--next {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -16px;
    transform: translateY(-50%);
  }
}

/* DETAILS COLUMN */
.sp-summary-col {
  display: flex;
  flex-direction: column;
}

.sp-summary-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Bold */
  font-size: clamp(24px, 3vw, 28px);
  color: var(--black, #0a0a0a);
  margin-bottom: 24px;
  line-height: 1.333;
}

.sp-short-description {
  font-family: 'Inter', sans-serif;
  font-weight: 300; /* Light */
  font-size: 18px;
  color: var(--black, #0a0a0a);
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 30px;
}

/* ADD TO CART & PRICE */
.sp-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 40px;
}

.sp-price-prefix,
.sp-price-suffix,
.sp-price-wrap .woocommerce-Price-amount {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 28px;
  color: var(--black, #0a0a0a);
}

.sp-price-wrap del {
  opacity: 0.5;
  font-weight: normal;
}

.sp-price-wrap ins {
  text-decoration: none;
}

.sp-price-wrap .price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sp-add-to-cart-wrap form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.sp-add-to-cart-wrap button.single_add_to_cart_button {
  background-color: #0b855e;
  color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif;
  font-weight: 600; /* Semi Bold */
  font-size: clamp(18px, 1.5vw, 24px);
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.sp-add-to-cart-wrap button.single_add_to_cart_button:hover {
  opacity: 0.9;
}

/* Custom EasyJob price/qty/add-to-cart markup used by single-rental.php */
.sp-product-number,
.sp-product-category {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.6);
  margin: 0 0 8px;
}

.sp-cat-link {
  color: inherit;
}

.sp-key-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-key-facts li {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--black, #0a0a0a);
  padding-left: 22px;
  position: relative;
}

.sp-key-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--red, #eb280f);
}

.sp-price-wrap .sp-price-amount,
.sp-price-wrap .sp-price-unit {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--black, #0a0a0a);
}

.sp-price-wrap.sp-price-on-request {
  font-weight: 600;
  font-size: 20px;
}

.sp-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-qty-controls button {
  width: 36px;
  height: 36px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--black, #0a0a0a);
  background: transparent;
  border-radius: 6px;
  font-size: 18px;
}

.sp-qty-controls .sc-qty-input {
  width: 56px;
  height: 36px;
  text-align: center;
  border: 1px solid var(--black, #0a0a0a);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
}

.sp-add-to-cart-wrap .sc-add-to-cart-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.sp-add-to-cart-wrap button.sc-add-to-cart {
  background-color: #0b855e;
  color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.sp-add-to-cart-wrap button.sc-add-to-cart:hover {
  opacity: 0.9;
}

.sp-add-to-cart-wrap button.sc-add-to-cart:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Success state: shop-connector's own JS (markAddToCartSuccess) replaces the
   button with an <a class="sc-add-to-cart button is-added">, carrying none of
   the button.sc-add-to-cart rules above (different tag, no matching selector)
   — without this it fell back to the browser's default gray button look. */
.sp-add-to-cart-wrap .sc-add-to-cart.is-added {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #262626;
  color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.sc-cart-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 16px 24px;
  border-radius: 8px;
  background-color: var(--black, #0a0a0a);
  color: var(--white, #ffffff);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.sc-cart-notification.sc-notif-error {
  background-color: var(--red, #EB280F);
}

/* ACCESSORIES LIST */
.sp-accessories {
  margin-top: clamp(30px, 4vw, 50px);
}

.sp-accessories-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--black, #0a0a0a);
  margin: 0 0 16px;
}

.sp-accessories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-accessory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}

.sp-accessory-name {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--black, #0a0a0a);
}

/* CSS-only tooltip. Plain inline-flex + vertical-align (not a flex child of
   .sp-accessory-name) so it flows as part of the text and stays attached
   right after the last word even when the name wraps onto two lines. */
.sp-info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.4);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-style: normal;
  color: rgba(10, 10, 10, 0.6);
  cursor: help;
}

/* Outer wrapper touches the icon directly (bottom: 100%, no gap) and its
   padding-bottom acts as an invisible bridge down to the icon, so moving the
   mouse from the icon up into the bubble never leaves .sp-info-icon's own
   DOM subtree — otherwise that gap is a dead zone where :hover drops before
   the cursor reaches the popover. The actual visible bubble is the nested
   .sp-tooltip-inner, offset from the icon purely via this wrapper's padding. */
.sp-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding-bottom: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.sp-tooltip-inner {
  display: block;
  background-color: var(--black, #0a0a0a);
  color: var(--white, #ffffff);
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 6px;
}

.sp-info-icon:hover .sp-tooltip,
.sp-info-icon:focus .sp-tooltip,
.sp-tooltip:hover,
.sp-tooltip:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.sp-tooltip-link {
  display: block;
  margin-top: 8px;
  color: var(--white, #ffffff);
  text-decoration: underline;
  font-weight: 600;
}

/* No short description: plain link (diagonal arrow) straight to the product,
   instead of an info icon with nothing to show in its tooltip. */
.sp-info-icon--link {
  border-color: rgba(10, 10, 10, 0.4);
  color: rgba(10, 10, 10, 0.6);
  cursor: pointer;
  text-decoration: none;
}

.sp-info-icon--link:hover {
  border-color: var(--black, #0a0a0a);
  color: var(--black, #0a0a0a);
}

.sp-info-icon--link svg {
  width: 12px;
  height: 12px;
}

.sp-accessory-add-to-cart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black, #0a0a0a);
  background-color: transparent;
  border: 1px solid var(--black, #0a0a0a);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sp-accessory-add-to-cart:hover {
  background-color: #262626;
  border-color: #262626;
  color: var(--white, #ffffff);
}

.sp-accessory-add-to-cart:disabled {
  opacity: 0.6;
  cursor: default;
}

.sp-accessory-add-to-cart.is-added {
  background-color: #262626;
  border-color: #262626;
  color: var(--white, #ffffff);
  cursor: default;
  opacity: 1;
}

.sp-accessory-add-to-cart-check {
  width: 16px;
  height: 16px;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #0b855e;
}

.sp-accessory-add-to-cart-check svg {
  width: 10px;
  height: 10px;
}

/* TABBED CONTENT SECTION (DARK — continues the hero's black background) */
.sp-tabs-section {
  background-color: var(--black, #0a0a0a);
  color: var(--white, #ffffff);
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(50px, 6vw, 120px);
}

.sp-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.sp-tab-btn {
  background-color: transparent;
  border: 1.5px solid var(--white, #ffffff);
  border-radius: 999px;
  padding: 10px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  text-transform: uppercase;
  color: var(--white, #ffffff);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.sp-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.sp-tab-btn.is-active {
  background-color: var(--white, #ffffff);
  border-color: var(--white, #ffffff);
  color: var(--black, #0a0a0a);
}

.sp-tab-btn.is-active:hover {
  background-color: var(--white, #ffffff);
}

.sp-tab-panel {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--white, #ffffff);
  max-width: 900px;
  padding-left: 1em;
}

.sp-tab-panel p {
  margin-bottom: 1.5em;
}

.sp-tab-panel ul {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.sp-tab-panel.is-active {
  display: block;
}

.sp-tab-panel h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
}

.sp-tech-table {
  width: auto;
  border-collapse: collapse;
}

.sp-tech-table th,
.sp-tech-table td {
  border: none;
  padding: 8px 24px 8px 0;
  text-align: left;
}

.sp-tech-table th {
  font-weight: 600;
  min-width: 160px;
}

.sp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 30px;
}

.sp-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 14px 0;
}

.sp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.sp-faq-item summary::-webkit-details-marker {
  display: none;
}

.sp-faq-chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
}

.sp-faq-item[open] .sp-faq-chevron {
  transform: rotate(90deg);
}

.sp-faq-answer {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.75);
}

/* .sp-tab-panel ul (bullet-list indent for WYSIWYG content) has higher
   specificity than a plain .sp-downloads-list rule and would otherwise win —
   qualify with .sp-tab-panel here so this list stays flush left. */
.sp-tab-panel .sp-downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-downloads-heading {
  margin-top: 60px;
}

.sp-downloads-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sp-download-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white, #ffffff);
  text-decoration: underline;
  text-align: left;
}

.sp-download-icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}