/* FLIP CORE — use absolute overlays so slide height stays constant */
.sff-card { position: relative; } /* ensure overlay anchoring even without .e-con-inner */
.sff-card > .e-con-inner {
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
  /* height gets locked/unlocked by JS during flip/fetch */
}

/* Front & back occupy the same box */
.sff-card__front,
.sff-card__back {
  position: absolute;
  inset: 0;                   /* top:0 right:0 bottom:0 left:0 */
  transition: transform .28s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Default orientations (front shows, back rotated) */
.sff-card__front { transform: rotateY(0deg);   z-index: 2; }
.sff-card__back  { transform: rotateY(180deg); z-index: 1; overflow: auto; }

/* Flip state toggled on the INNER wrapper */
.sff-card > .e-con-inner.is-flipped .sff-card__front { transform: rotateY(-180deg) !important; }
.sff-card > .e-con-inner.is-flipped .sff-card__back  { transform: rotateY(0deg)    !important; }

/* ALSO flip when the class is on .sff-card (no .e-con-inner in DOM) */
.sff-card.is-flipped .sff-card__front { transform: rotateY(-180deg) !important; }
.sff-card.is-flipped .sff-card__back  { transform: rotateY(0deg)    !important; }

/* And enable clicks on back when flipping via .sff-card */
.sff-card .sff-card__back { pointer-events: none; }
.sff-card.is-flipped .sff-card__back { pointer-events: auto; }

/* Carousel shouldn’t clip 3D transforms */
.swiper-slide { overflow: visible; }

/* Enable clicks on back only when visible */
.sff-card__back { pointer-events: none; }
.sff-card > .e-con-inner.is-flipped .sff-card__back { pointer-events: auto; }

/* Optional: while flipped, also prevent touch-swipe via CSS (JS handles too) */
.sff-no-swipe, .sff-no-swipe * { touch-action: none; }

/* Title clamp on the default (inline) title */
.sff-card__front .product_title.entry-title,
.sff-card__front .product_title.entry-title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
  line-height: 1.25; margin-bottom: 8px;
}

/* ---- Overlay full title (no layout shift) ----
   Requires a sibling container in markup with class .hidden-title */
.sff-card__front .hidden-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  background-color: #fff;
  z-index: 3;
  padding: 16px 16px 18px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none; /* avoid intercepting unless visible */
}

/* Show overlay when explicitly opened (mobile/tap toggle) */
.sff-card.title-open .sff-card__front .hidden-title {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* On pointer/hover devices, allow hover to show it */
@media (hover: hover) {
  .sff-card:hover .sff-card__front .hidden-title,
  .sff-card:focus-within .sff-card__front .hidden-title {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
  }
}

/* Overlay title: do NOT clamp */
.sff-card__front .hidden-title .product_title.entry-title,
.sff-card__front .hidden-title .product_title.entry-title a {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
  max-height: none;
  line-height: 1.25;
  margin-bottom: 8px;
}

/* Don’t show overlay while flipped to the back */
.sff-card.is-flipped .hidden-title,
.sff-card > .e-con-inner.is-flipped .hidden-title {
  display: none !important;
}

/* TABLE STYLES */
.sff-card__back .sff-qdetails-table th,
.sff-card__back .sff-qdetails-table td {
  padding: 5px;
  font-size: 12px;
  text-align: left;
  border: none;
  border-bottom: 1px solid #ccc;
}
.sff-card__back .sff-qdetails-table td {
  border-left: 1px solid #ccc;
}
.sff-card__back table.sff-qdetails-table {
  border-collapse: separate;
  border-spacing: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden; /* enables rounded corners */
}

/* Wider first column */
.sff-qdetails table td:first-child,
.sff-qdetails table th:first-child {
  width: 40%;
  font-weight: 600;
  background: #f9f9f9;
}

/* Back-face content scroller (hide scrollbars) */
.sff-qdetails-slot {
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar for Chrome, Safari, Edge */
.sff-qdetails-slot::-webkit-scrollbar { width: 0; height: 0; }
/* Hide scrollbar for Firefox */
.sff-qdetails-slot { scrollbar-width: none; -ms-overflow-style: none; }

.sff-card .info-fcc-id { font-size: 12px; }
.sff-card .info-oem-number { font-size: 12px; }

/* Limit the extra data block on the card front */
.sff-card__front .addtl-data {
  max-height: 64px;              /* adjust as needed */
  min-height: 64px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;            /* for the fade overlay */
  padding-right: 2px;            /* avoids clipping when scrollbar is hidden */
}

/* Hide scrollbars */
.sff-card__front .addtl-data::-webkit-scrollbar { width: 0; height: 0; }
.sff-card__front .addtl-data { scrollbar-width: none; -ms-overflow-style: none; }

/* Subtle bottom fade to indicate more content (always visible) */
.sff-card__front .addtl-data::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* Tighten spacing for the shortcode items inside */
.sff-card__front .addtl-data .elementor-shortcode {
  line-height: 1.2;
  font-size: 12px;               /* keep small; match your design */
}

/* Force-hover polyfill */
.js-quick-details .elementor-button.is-hovered,
.js-quick-details.is-hovered .elementor-button {
  transform: translateY(-1px);
  filter: brightness(0.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

/* Keep it consistent on mobile (no :hover there) */
@media (hover: none) {
  .js-quick-details .elementor-button.is-hovered,
  .js-quick-details.is-hovered .elementor-button {
    transform: scale(0.99);
  }
}

/* Mobile tweak */
@media (max-width: 768px) {
  .sff-card__front .addtl-data { max-height: 72px; }
  .sff-card__back .sff-qdetails-table th,
  .sff-card__back .sff-qdetails-table td { font-size: 10px; }

  .sff-card__front .hidden-title{
    padding: 10px 6px 17px;
  }

  .sff-card__front :is(.elementor-widget-woocommerce-product-add-to-cart,.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart,.elementor-widget-wc-add-to-cart,.woocommerce div.product .elementor-widget-wc-add-to-cart) form.cart:not(.grouped_form):not(.variations_form){
    row-gap: 0;
  }
}