/* ==========================================================
   SPI Custom Product Page Styles
   Pixel-perfect match to the Surpass Industrial design.
   ========================================================== */

/* ── Design Tokens ── */
:root {
  --spi-navy:    #0b1129;
  --spi-blue:    #2670aa;
  --spi-gold:    #f5c873;
  --spi-bg:      #edf3f9;
  --spi-surface: #f6f5f2;
  --spi-white:   #ffffff;
  --spi-text:    #3c3f46;
  --spi-muted:   #5f6269;
  --spi-border:  rgba(11,17,41,0.1);
  --spi-shadow:  0 1px 4px rgba(11,17,41,0.08);
  --spi-shadow-card: 0 8px 28px rgba(11,17,41,0.14);

  --spi-font-heading: 'Teko', sans-serif;
  --spi-font-body:    'Roboto', sans-serif;

  --spi-radius-sm:  6px;
  --spi-radius-md:  12px;
  --spi-radius-lg:  16px;
  --spi-radius-xl:  20px;
  --spi-radius-pill: 999px;

  --spi-pad-x: 64px;
  --spi-nav-h: 0px; /* Set by JS after nav init */
      --spi-maxw: 1440px !important;
    --spi-gutter: max(var(--spi-pad-x, 64px), calc((100% - var(--spi-maxw)) / 2));
}

.spi-product-wrap .spi-breadcrumb         { padding: 20px var(--spi-gutter) 0; }
.spi-product-wrap .spi-hero               { padding: 36px var(--spi-gutter) 64px; }
.spi-product-wrap .spi-section-nav__inner { padding: 0 var(--spi-gutter); }
.spi-product-wrap .spi-section            { padding: 60px var(--spi-gutter); }
.spi-product-wrap .spi-related            { padding: 60px var(--spi-gutter); }

/* ── Reset in scope ── */
.spi-product-wrap *,
.spi-product-wrap *::before,
.spi-product-wrap *::after {
  box-sizing: border-box;
}
.spi-product-wrap {
  width: 100%;
  background: var(--spi-surface);
  color: var(--spi-navy);
  font-family: var(--spi-font-body);
}
.spi-product-wrap a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */
.spi-breadcrumb {
  padding: 20px var(--spi-pad-x) 0;
  font-family: var(--spi-font-body);
  font-size: 13px;
  color: rgb(120,123,130);
}
.spi-breadcrumb a:hover {
  color: var(--spi-blue);
}
.spi-breadcrumb__current {
  color: var(--spi-navy);
  font-weight: 600;
}

/* ==========================================================
   HERO
   ========================================================== */
.spi-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 36px var(--spi-pad-x) 64px;
}

/* ── Gallery ── */
.spi-hero__gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0; /* grid items default to minmax(auto,1fr) — without this the
                   column won't shrink below the thumbnail row's content width */
}

.spi-gallery {
  position: relative;
  border-radius: var(--spi-radius-xl);
  overflow: hidden;
  min-height: 560px;
  background: var(--spi-white);
}
.spi-gallery__main {
  position: relative;
  width: 100%;
  height: 560px;
}
.spi-gallery__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.spi-gallery__slide.is-active {
  opacity: 1;
}
.spi-gallery__slide--placeholder {
  background-color: var(--spi-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spi-gallery__placeholder-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  color: var(--spi-muted);
  max-width: 320px;
}
.spi-gallery__placeholder-msg svg {
  opacity: 0.4;
}
.spi-gallery__placeholder-msg p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.spi-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(11,17,41,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spi-navy);
  transition: background 0.15s ease, transform 0.15s ease;
}
.spi-gallery__arrow--prev { left: 18px; }
.spi-gallery__arrow--next { right: 18px; }
/* Hello Elementor's reset.css sets button:hover/:focus { background:#cc3366; color:#fff }
   at specificity 0,1,1. Our 0,2,0 selectors beat it, but only for properties we actually
   declare — so colour has to be pinned on every interactive state, not just background.
   Without the :focus pair the circle turns pink on click; without `color` the glyph goes
   white, which reads as "the arrows disappeared on hover". */
.spi-gallery__arrow:hover,
.spi-gallery__arrow:focus,
.spi-gallery__arrow:active {
  background: var(--spi-white);
  color: var(--spi-navy);
}
.spi-gallery__arrow:hover {
  transform: translateY(-50%) scale(1.06);
}
.spi-gallery__arrow:focus-visible {
  outline: 2px solid var(--spi-blue);
  outline-offset: 2px;
}
/* The glyph is stroke="currentColor"; restate it so the reset cannot reach it. */
.spi-gallery__arrow:hover svg,
.spi-gallery__arrow:focus svg,
.spi-gallery__arrow:active svg {
  stroke: var(--spi-navy);
}

/* Gallery videos ---------------------------------------------------------
 * Product-gallery attachments can be videos. They fill the slide the same way
 * a background image does; object-fit keeps the aspect ratio without letterbox
 * bars. The slide gets a dark ground so a poster-less video is not a white
 * flash before the first frame paints.
 */
.spi-gallery__slide--video {
  background: var(--spi-navy);
}
.spi-gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play badge on video thumbnails. WordPress does not generate stills from
   video, so a thumb with no poster shows the badge on the navy ground. */
.spi-gallery__thumb--video {
  position: relative;
  background-color: var(--spi-navy);
}
.spi-gallery__thumb-play {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(11,17,41,0.72);
  color: var(--spi-white);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.spi-gallery__counter {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  background: rgba(11,17,41,0.78);
  color: var(--spi-white);
  font-family: var(--spi-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: var(--spi-radius-pill);
}

.spi-gallery__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.spi-gallery__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(11,17,41,0.25);
  transition: background 0.2s ease;
}
.spi-gallery__dot.is-active {
  background: var(--spi-navy);
}

.spi-gallery__thumbs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spi-gallery__thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1 1 0;
  min-width: 0; /* flex items default to min-width:auto, which lets them grow past
                   the container instead of shrinking + scrolling internally */
}
.spi-gallery__thumbs::-webkit-scrollbar { display: none; }
.spi-gallery__thumb {
  flex: 0 0 140px;
  width: 140px;
  height: 92px;
  border-radius: var(--spi-radius-md);
  cursor: pointer;
  border: none;
  background-size: cover;
  background-position: center;
  background-color: var(--spi-bg);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  margin: 6px 0 3px;
}
/* Thumbnail scroll arrows are not in the design at any width — the strip is
   swipeable/scrollable on its own. Hidden rather than deleted so the markup and
   its JS keep working if they're ever wanted back. */
.spi-gallery__thumbs-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--spi-white);
  box-shadow: 0 2px 8px rgba(11,17,41,0.15);
  /* Not in the design at any width — the strip scrolls/swipes on its own.
     Styles kept so this is one line to reverse if they're ever wanted. */
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--spi-navy);
  transition: background 0.15s ease, opacity 0.15s ease;
}
.spi-gallery__thumbs-arrow:hover { background: var(--spi-bg); }
.spi-gallery__thumbs-arrow[hidden] { display: none; }
.spi-gallery__thumbs-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.spi-gallery__thumb.is-active {
  box-shadow: 0 0 0 2.5px var(--spi-blue);
}
.spi-gallery__thumb:hover {
  transform: translateY(-2px);
}
.spi-gallery__thumb:focus-visible {
  outline: 2px solid var(--spi-blue);
  outline-offset: 2px;
}

/* ── Hero Summary ── */
.spi-hero__badge {
  font-family: var(--spi-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--spi-blue);
  margin-bottom: 18px;
}
.spi-hero__title {
  margin: 0;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 76px !important;
  line-height: 0.84;
  letter-spacing: -0.01em;
  color: #000;
}
.spi-hero__desc {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--spi-text);
  max-width: 520px;
}
.spi-hero__desc p {
  margin: 0;
}

/* ── Stats ── */
.spi-stats {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}
.spi-stats__item {
  flex: 1 1 0;
  background: var(--spi-surface);
  border-radius: var(--spi-radius-md);
  box-shadow: inset 0 0 0 1px var(--spi-border);
  padding: 16px 18px;
}
.spi-stats__value {
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--spi-navy);
}
.spi-stats__unit {
  font-size: 18px;
}
.spi-stats__label {
  font-size: 12px;
  color: var(--spi-muted);
  margin-top: 4px;
  line-height: 14px;
}

/* ── CTA Buttons ── */
/* Price + order number occupy a full row of .spi-hero__cta, so the quantity
   stepper and Add to cart wrap onto the line below rather than sitting beside
   the price. flex-basis 100% forces the break; the container already wraps. */
.spi-hero__pricerow {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.spi-hero__pricerow .price { margin: 0; }
.spi-hero__sku {
  font-family: var(--spi-font-body);
  font-size: 13px;
  color: var(--spi-muted);
}

.spi-hero__cta {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.spi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 36px;
  border-radius: var(--spi-radius-pill);
  font-family: var(--spi-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.spi-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.spi-btn:focus-visible {
  outline: 2px solid var(--spi-gold);
  outline-offset: 2px;
}
.spi-btn--primary {
  color: var(--spi-white) !important;
  background: linear-gradient(158deg, rgb(20,102,152) 0%, rgb(52,152,201) 58%, rgb(144,224,255) 130%);
}
.spi-btn--outline {
  color: var(--spi-navy);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(11,17,41,0.5);
  letter-spacing: 0.04em;
}

/* WooCommerce purchasable CTA area */
.spi-hero__cta .woocommerce-Price-amount,
.spi-hero__cta .price {
  font-family: var(--spi-font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--spi-navy);
  margin-bottom: 16px;
}
.spi-hero__cta form.cart {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Quantity Selector ── */
.spi-hero__cta .quantity {
  display: flex;
  align-items: center;
  height: 54px;
  border: 2px solid var(--spi-border);
  border-radius: var(--spi-radius-pill);
  background: var(--spi-white);
  overflow: hidden;
  gap: 0;
}
.spi-hero__cta .quantity input.qty {
  width: 52px;
  height: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-family: var(--spi-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--spi-navy);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.spi-hero__cta .quantity input.qty::-webkit-inner-spin-button,
.spi-hero__cta .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
/* +/− buttons injected by WooCommerce themes — style them if present */
.spi-hero__cta .quantity .qty-btn,
.spi-hero__cta .quantity button[class*="minus"],
.spi-hero__cta .quantity button[class*="plus"] {
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 300;
  color: var(--spi-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.spi-hero__cta .quantity .qty-btn:hover,
.spi-hero__cta .quantity button[class*="minus"]:hover,
.spi-hero__cta .quantity button[class*="plus"]:hover {
  background: var(--spi-bg);
}
.spi-hero__cta .button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 36px;
  border-radius: var(--spi-radius-pill);
  font-family: var(--spi-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--spi-white);
  background: linear-gradient(158deg, rgb(20,102,152) 0%, rgb(52,152,201) 58%, rgb(144,224,255) 130%);
  border: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.spi-hero__cta .button.single_add_to_cart_button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* ── Trust Bullets ── */
.spi-trust-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spi-trust-list__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--spi-text);
}

/* ==========================================================
   SECTION NAV (STICKY TABS)
   ========================================================== */
.spi-section-nav {
  position: sticky;
  top: 0;
  z-index: 45;
  background: var(--spi-blue);
  box-shadow: 0 2px 10px rgba(11,17,41,0.12);
}
.spi-section-nav__inner {
  display: flex;
  gap: 4px;
  padding: 0 var(--spi-pad-x);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.spi-section-nav__inner::-webkit-scrollbar { display: none; }

.spi-section-nav__tab {
  display: inline-block;
  padding: 20px 24px;
  font-family: var(--spi-font-heading);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.78);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.spi-section-nav__tab:hover,
.spi-section-nav__tab.is-active {
  color: var(--spi-white) !important;
  border-bottom-color: var(--spi-gold) !important;
}

/* ==========================================================
   SECTION COMMON
   ========================================================== */
.spi-section-anchor {
  scroll-margin-top: 80px;
}
.spi-section {
  padding: 60px var(--spi-pad-x);
}
.spi-section--bg {
  background: var(--spi-bg);
}
.spi-section__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.spi-section__heading {
  margin: 0;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--spi-navy);
}

/* ==========================================================
   OVERVIEW
   ========================================================== */
.spi-overview-card {
  background: var(--spi-white);
  border-radius: var(--spi-radius-xl);
  padding: 56px 64px;
  box-shadow: var(--spi-shadow);
}
.spi-overview-card__heading {
  margin: 0;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 46px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  max-width: 900px;
}
.spi-overview-card__content {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--spi-text);
  max-width: 940px;
}

/* ==========================================================
   FEATURES & BENEFITS
   ========================================================== */
.spi-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  border-bottom: 1px solid var(--spi-border);
}
.spi-features-grid__item {
  display: flex;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--spi-border);
}
.spi-features-grid .spi-features-grid__title {
  margin: 0;
  font-family: var(--spi-font-heading);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.05;
  color: var(--spi-navy);
}
.spi-features-grid__desc {
  margin: 4px 0 0;
  font-family: var(--spi-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #3c3f46;
}

/* ==========================================================
   TECHNICAL DATA
   ========================================================== */
.spi-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  background: var(--spi-white);
  border-radius: var(--spi-radius-lg);
  padding: 20px 40px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.spi-tech-grid__row {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid rgba(11,17,41,0.07);
  gap: 20px;
}
.spi-tech-grid__row:last-child,
.spi-tech-grid__row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
.spi-tech-grid__label {
  font-size: 16px;
  color: var(--spi-text);
}
.spi-tech-grid__value {
  font-weight: 600;
  font-size: 15px;
  color: var(--spi-navy);
  text-align: right;
}

/* ==========================================================
   APPLICATION AREAS
   ========================================================== */
.spi-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.spi-apps-grid__card {
  background: var(--spi-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--spi-shadow);
  padding: 22px 24px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.spi-apps-grid__card:hover {
  filter: brightness(1.02);
  transform: translateY(-2px);
}
.spi-apps-grid__number {
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--spi-navy);
  line-height: 1;
  margin-bottom: 8px;
}
.spi-apps-grid__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--spi-text);
}

/* ==========================================================
   FINANCING
   ========================================================== */
.spi-financing__intro {
  margin: 0 0 36px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--spi-text);
  max-width: 720px;
}
.spi-financing__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 780px;
}

/* Rate table */
.spi-rate-table-wrap {
  border-radius: 14px;
  overflow: hidden;
}
.spi-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.spi-rate-table thead tr {
  background: var(--spi-navy);
}
.spi-rate-table th {
  padding: 14px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--spi-white);
}
.spi-rate-table th:not(:first-child) { text-align: center; }
.spi-rate-table td {
  padding: 14px 20px;
  color: var(--spi-text);
}
.spi-rate-table td:not(:first-child) { text-align: center; }
.spi-rate-table__row--even td { background: var(--spi-white); }
.spi-rate-table__row--odd  td { background: rgb(248,248,246); }
.spi-rate-table__term { font-weight: 700; color: var(--spi-navy) !important; }
.spi-rate-table__rate { font-weight: 700; color: var(--spi-navy) !important; }

/* Example block */
.spi-financing__example {
  padding: 16px 20px;
  background: rgba(38,112,170,0.07);
  border-left: 3px solid var(--spi-blue);
  border-radius: var(--spi-radius-sm);
  font-size: 16px;
  line-height: 1.7;
  color: #28343a;
}
.spi-financing__example strong { color: var(--spi-navy); }

/* Details */
.spi-financing__details {
  background: var(--spi-white);
  border-radius: var(--spi-radius-md);
  padding: 26px 28px;
}
.spi-financing__details-heading {
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 24px;
  color: var(--spi-navy);
  margin: 0 0 14px;
}
.spi-financing__details ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spi-financing__details li {
  font-size: 16px;
  color: var(--spi-text);
  line-height: 1.5;
}

/* Contact */
.spi-financing__contact {
  background: var(--spi-white);
  border-radius: var(--spi-radius-md);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.spi-financing__contact-heading {
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--spi-navy);
  margin: 0 0 12px;
}
.spi-financing__contact-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--spi-navy);
  margin: 0 0 2px;
}
.spi-financing__contact-info p {
  font-size: 16px;
  color: var(--spi-navy);
  margin: 0 0 2px;
}
.spi-financing__contact-link {
  display: block;
  font-size: 16px;
  color: var(--spi-navy);
  margin-top: 8px;
  text-decoration: none;
}
.spi-financing__contact-link:hover { text-decoration: underline; }
.spi-financing__contact-email {
  font-size: 13px;
  word-break: break-all;
}
.spi-financing__contact-logo {
  text-align: right;
}
.spi-financing__contact-administered {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--spi-navy);
  margin: 0 0 12px;
}
.spi-financing__logo-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-left: auto;
  display: block;
}
.spi-financing__contact-website {
  font-size: 12px;
  color: var(--spi-navy);
  margin: 10px 0 0;
}

/* ==========================================================
   FAQS
   ========================================================== */
.spi-faqs {
  max-width: 920px;
}
.spi-faq {
  border-bottom: 1px solid var(--spi-border);
}
.spi-faq__question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  font-family: var(--spi-font-heading);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--spi-navy);
  user-select: none;
  transition: color 0.18s ease;
}
.spi-faq__question::-webkit-details-marker { display: none; }
.spi-faq__question:hover { color: var(--spi-blue); }

.spi-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: var(--spi-font-body);
  font-weight: 300;
  line-height: 1;
  color: var(--spi-navy);
  transition: transform 0.2s ease, color 0.2s ease;
}
.spi-faq[open] .spi-faq__icon {
  color: rgb(220,216,224);
  transform: rotate(45deg);
}
.spi-faq__answer {
  padding: 0 4px 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--spi-text);
  animation: spi-faq-open 0.28s ease both;
}
@keyframes spi-faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   RELATED PRODUCTS
   ========================================================== */
.spi-related {
  background: var(--spi-white);
  padding: 60px var(--spi-pad-x);
}
.spi-related__header {
  /* Design left-aligns both carousel headers; the old centred treatment
     did not match Product Detail.dc.html. */
  text-align: left;
  margin-bottom: 44px;
}
.spi-related__heading {
  margin: 0;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--spi-navy);
}
.spi-related__track {
  display: flex;
  gap: 22px;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 4px 28px;
}
.spi-related__track::-webkit-scrollbar { display: none; }

.spi-related__card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: block;
  background: var(--spi-white);
  border-radius: var(--spi-radius-lg);
  overflow: hidden;
  box-shadow: var(--spi-shadow-card);
  transition: filter 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.spi-related__card:hover {
  filter: brightness(1.03);
  transform: translateY(-3px);
}
.spi-related__card-img {
  height: 340px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--spi-white);
}
.spi-related__card-body {
  padding: 24px 40px 40px;
}
.spi-related__card-cat {
  font-size: 15px;
  line-height: 1.3;
  color: rgb(38, 112, 170);
  margin-bottom: 6px;
}
.spi-related__card-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--spi-navy);
}

.spi-related__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.spi-related__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--spi-navy);
  background: transparent;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.2s ease;
}
.spi-related__dot.is-active { background: var(--spi-navy); }

/* ==========================================================
   RESPONSIVE — TABLET (max 1024px)
   ========================================================== */
@media (max-width: 1024px) {
  :root { --spi-pad-x: 36px; }
  .spi-hero { gap: 32px; }
  .spi-gallery { min-height: 420px; }
  .spi-gallery__main { height: 420px; }
  .spi-hero__title { font-size: 58px !important; }
  .spi-overview-card { padding: 40px 40px; }
  .spi-features-grid { gap: 0 36px; }
  .spi-tech-grid { gap: 0 36px; padding: 16px 28px; }
}

/* ==========================================================
   RESPONSIVE — MOBILE (max 767px)
   ========================================================== */
@media (max-width: 767px) {
  :root { --spi-pad-x: 18px; }

  .spi-breadcrumb { padding: 14px 18px 0; }

  .spi-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 18px 18px 36px;
  }
  .spi-gallery { min-height: 300px; }
  .spi-gallery__main { height: 300px; }
  .spi-gallery__arrow { display: none; }
  .spi-gallery__dots { display: flex; }

  /* The design keeps the thumbnail strip on mobile *alongside* the dots —
     measured at 375px it renders 76x92 thumbs under the stage. Only the
     scroll arrows are dropped; the strip itself stays swipeable. */
  .spi-gallery__thumbs-wrap { display: flex; }
  .spi-gallery__thumbs-arrow { display: none; }
  .spi-gallery__thumb { flex: 0 0 76px; width: 76px; height: 92px; }

  .spi-hero__title { font-size: 40px !important; line-height:40px !important; }
  .spi-hero__desc { font-size: 15px; }

  .spi-stats { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .spi-stats__item { flex: 1 1 28%; padding: 10px 12px; }
  .spi-stats__value { font-size: 22px; }
  .spi-stats__unit { font-size: 13px; }
  .spi-stats__label { font-size: 11px;  }

  .spi-hero__cta { flex-direction: column; }
  .spi-btn { width: 100%; }

  .spi-section-nav { top: 0; }
  .spi-section-nav__inner { padding: 0 18px; }
  .spi-section-nav__tab { padding: 16px 14px; font-size: 20px; }

  .spi-section { padding: 36px 18px; }
  .spi-section__heading { font-size: 28px; }

  .spi-overview-card { padding: 28px 22px; }
  .spi-overview-card__heading { font-size: 32px; }

  .spi-features-grid { grid-template-columns: 1fr; gap: 0; }
  .spi-tech-grid { grid-template-columns: 1fr; gap: 0; padding: 12px 22px; }
  .spi-tech-grid__row:last-child { border-bottom: none; }
  .spi-apps-grid { grid-template-columns: 1fr; }

  .spi-rate-table td,
  .spi-rate-table th { padding: 12px 8px; font-size: 14px; }

  .spi-faq__question { font-size: 22px; gap: 16px; padding: 20px 2px; }

  .spi-financing__contact { grid-template-columns: 1fr; }

  .spi-related { padding: 36px 18px; }
  .spi-related__heading { font-size: 30px; }
  .spi-related__card { flex: 0 0 100%; }
  .spi-related__card-img { height: 240px; }
  .spi-related__card-body { padding: 16px 22px 22px; }
  .spi-related__card-title { font-size: 19px; }
  .spi-related__dots { display: flex; }
}

@media (max-width: 440px) {
  .spi-hero__title { font-size: 34px !important; }
}

/* ==========================================================
   PLACEHOLDER STYLES — remove once real content is populated
   ========================================================== */
.spi-product-wrap .spi-hero__badge {
  /* badge placeholder inherits badge styling, nothing extra needed */
}
/* Highlight any element whose visible text starts with [PLACEHOLDER] */
.spi-stats__label,
.spi-stats__value,
.spi-trust-list__item,
.spi-overview-card__heading,
.spi-overview-card__content,
.spi-features-grid__title,
.spi-features-grid__desc,
.spi-tech-grid__label,
.spi-tech-grid__value,
.spi-apps-grid__desc,
.spi-faq__question,
.spi-faq__answer,
.spi-financing__intro,
.spi-financing__contact-name {
  /* placeholder highlight applied via class below */
}
.spi-placeholder-hint,
.spi-hero__desc p[style],
.spi-gallery__placeholder-msg p {
  background: rgba(180, 72, 0, 0.06);
  outline: 2px dashed rgba(180, 72, 0, 0.35);
  border-radius: 4px;
  padding: 8px 12px !important;
}

/* =========================================================
 * SERVICE & SUPPORT
 * Two-column list with hairline separators, per the design —
 * deliberately not the boxed-card treatment used by
 * .spi-apps-grid, so the two sections don't read as the same
 * thing twice on one page.
 * ========================================================= */
.spi-service__intro {
  margin: 12px 0 0;
  font-family: var(--spi-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--spi-muted, #5f6269);
  max-width: 620px;
}
.spi-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  margin-top: 20px;
  border-bottom: 1px solid rgba(11, 17, 41, 0.12);
}
.spi-service-grid__card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 26px 0;
  border-top: 1px solid rgba(11, 17, 41, 0.12);
}
/* Uploaded icons sit in the same 24px slot the built-in SVGs occupy, so a mix
   of custom and default icons still lines up across the grid. */
.spi-service-grid__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  object-fit: contain;
  display: block;
}

.spi-service-grid__card > svg { flex-shrink: 0; margin-top: 2px; }
.spi-service-grid__body { min-width: 0; }
.spi-service-grid .spi-service-grid__title {
  margin: 0 0 6px;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--spi-navy);
  /* Elementor's kit sets `.elementor-kit-12 h3` to uppercase/700 at specificity
     0,1,1. Scoped through the grid so it wins without !important. */
  text-transform: none;
}
.spi-service-grid__desc {
  margin: 0;
  font-family: var(--spi-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: #3c3f46;
}

@media (max-width: 767px) {
  .spi-service-grid { grid-template-columns: 1fr; gap: 0; }
  .spi-service-grid__card { padding: 20px 0; }
}

/* =========================================================
 * FEATURES — checklist paired with a product shot
 * Design: 1.25fr / 1fr. The image column collapses entirely
 * when no image is set, rather than leaving a dead gap.
 * ========================================================= */
.spi-features-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}
.spi-features-layout--no-image { grid-template-columns: 1fr; }
.spi-features-figure {
  min-height: 540px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
 * APPLICATION AREAS — photo tiles
 * ========================================================= */
.spi-apps-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.spi-apps-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(11, 17, 41, 0.1);
  background: var(--spi-white, #fff);
  text-decoration: none;
}
.spi-apps-tile__img {
  aspect-ratio: 4 / 3;
  background-color: #dfe6ee;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.spi-apps-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 17, 41, 0) 30%, rgba(11, 17, 41, 0.82) 100%);
}
.spi-apps-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px 15px;
  font-family: var(--spi-font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
}

/* =========================================================
 * CAROUSEL HEADINGS — accessories / related
 * The design sets these two at 48px, larger than the 40px
 * used by the in-page sections above them.
 * ========================================================= */
.spi-related__intro {
  margin: 10px 0 0;
  font-family: var(--spi-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--spi-muted, #5f6269);
  max-width: 620px;
}
.spi-related--accessories { background: var(--spi-white, #fff); }

@media (max-width: 1024px) {
  .spi-features-layout { grid-template-columns: 1fr; gap: 32px; }
  .spi-features-figure { min-height: 360px; }
  .spi-apps-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .spi-apps-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .spi-apps-tile__label { font-size: 18px; padding: 12px; }
  .spi-features-figure { min-height: 280px; }
}

/* Section header variants ------------------------------------------------
 * .spi-section__header is flex/baseline so a heading and a short label sit on
 * one line. Service & Support puts its intro *under* the heading instead, so
 * that section opts out rather than the base rule changing for everyone.
 */
.spi-section__header--stacked {
  display: block;
}
.spi-section__heading--lg { font-size: 44px; }

@media (max-width: 767px) {
  .spi-section__heading--lg { font-size: 30px; }
  .spi-features-grid__item {
    display: flex;
    gap: 16px;
    padding: 15px 0;
    border-top: none;
}
}

/* Section headings vs the Elementor kit -----------------------------------
 * `.elementor-kit-12 h2/h3` sets font-weight:700 and text-transform:uppercase
 * globally (specificity 0,1,1), which outranks a single class. The design uses
 * weight 600 and does its own casing in the content, so these rules are scoped
 * one level deeper to win without !important.
 *
 * Measured against Product Detail.dc.html:
 *   section heading   Teko 600 40px  (44px service, 46px overview)
 *   text-transform    none — headings are already capitalised in the content
 */
.spi-section .spi-section__heading,
.spi-overview-card .spi-overview-card__heading,
.spi-related .spi-related__heading {
  font-weight: 600;
  text-transform: none;
}

/* Gallery controls vs the Elementor kit ------------------------------------
 * `.elementor-kit-12 button` applies padding:20px and border-radius:28px to
 * every button on the site (specificity 0,1,1). With box-sizing:border-box a
 * 9px dot cannot render smaller than its 40px of padding — which is why the
 * mobile dots came out as large circles and the desktop arrows ballooned.
 *
 * The gallery sets its own sizes (dot 9px, arrow 48px, thumb arrow 32px); these
 * rules only strip the inherited padding and radius, scoped through
 * .spi-hero__gallery so they outrank the kit without !important.
 */
.spi-hero__gallery .spi-gallery__dot,
.spi-hero__gallery .spi-gallery__arrow,
.spi-hero__gallery .spi-gallery__thumbs-arrow {
  padding: 0;
  border-radius: 50%;
  min-width: 0;
  min-height: 0;
  line-height: 0;
}

/* Thumbnails are square-ish cards, not pills — the kit's 28px radius is close
   enough to be invisible on a 140px thumb, but pin it to the design's 14px. */
.spi-hero__gallery .spi-gallery__thumb {
  padding: 0;
  border-radius: 14px;
}

/* Carousel section backgrounds -------------------------------------------
 * Measured from Product Detail.dc.html:
 *   ACCESSORIES      background #fff
 *   RELATED PRODUCTS background rgb(237,243,249)  — the blue panel
 * so the two carousels read as separate bands rather than one long white run.
 */
.spi-related--related { background: var(--spi-bg); }