/* Product layout available before first paint; migrated unchanged from product template. */

  /* Page-scoped: PDP only */
  body.page-type-product .productView{ contain: none; }

  /* Validation message footprint (no shift) */
  body.page-type-product .validationErrorMsg{
    visibility: hidden;
    min-height: 1.25rem;
  }
  body.page-type-product .validationErrorMsg.is-visible{ visibility: visible; }

  /* Price/CTA/Options rows stay steady while data streams in */
  body.page-type-product .productView-price{ min-height: 2rem; }
  body.page-type-product .add-to-cart-wrapper{ min-height: 3rem; }
  body.page-type-product .option-accordion-wrap{ min-height: 3rem; }

  /* SKU/UPC row never wraps */
  body.page-type-product .productView-meta{
    display:inline-flex; align-items:baseline; gap:1rem; white-space:nowrap;
  }

  /* === MAIN IMAGE: square frame + belt-and-suspenders on img === */
  body.page-type-product figure.productView-image{
    aspect-ratio:1/1;
    width:100%;
    max-width:600px;
    margin:0;
    display:block;
    overflow:hidden;
  }
  /* Fill the hero frame regardless of what the gallery swaps in */
body.page-type-product figure.productView-image img[data-main-image]{
  aspect-ratio: 1 / 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

body.page-type-product .productView-image .easyzoom-flyout img{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: initial !important;
  aspect-ratio: auto !important;
}

/* Make sure wrappers also stretch to the frame */
body.page-type-product figure.productView-image a,
body.page-type-product figure.productView-image .productView-img-container{
  display:block;
  height:100%;
}


  /* === Left column sticky (optional) === */
  @media (min-width:990px){
    .product-left-section{
      position:sticky;
      top:90px;
      align-self:start;
    }
  }
  

@media (min-width:990px){

  /* knobs */
  :root{
    --fs-pdp-thumb-w:   88px;   /* visible thumbnail width */
    --fs-pdp-gap:        8px;   /* space between thumbnails */
    --fs-pdp-gutter:    18px;   /* reserved space for the scrollbar (18–20) */
  }

  /* Two columns: [rail] [main image] */
  .fs-pdp-gallery{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* OUTER rail owns the ONLY scrollbar (+ gutter so bar never covers thumbs) */
  .fs-pdp-rail{
    flex: 0 0 calc(var(--fs-pdp-thumb-w) + var(--fs-pdp-gutter)) !important;
    width:     calc(var(--fs-pdp-thumb-w) + var(--fs-pdp-gutter)) !important;
    padding-right: var(--fs-pdp-gutter) !important;
    box-sizing: content-box !important;

    /* HARD height so the rail must clip & scroll; fallback if the var isn't set yet */
    height:     min(var(--fs-thumb-rail-h, 600px), 80vh) !important;
    max-height: min(var(--fs-thumb-rail-h, 600px), 80vh) !important;

    overflow-y: auto !important;      /* hides bar when not needed */
    scrollbar-gutter: stable both-edges;  /* keeps width stable when bar appears */
    overflow-x: hidden !important;

    /* make sure nothing is suppressing the scrollbar */
    -ms-overflow-style: auto !important;  /* old Edge/IE */
    scrollbar-width: thin !important;     /* Firefox */
  }
  .fs-pdp-rail::-webkit-scrollbar{ width: 8px !important; }
  .fs-pdp-rail::-webkit-scrollbar-thumb{ background:#d7dfeb; border-radius:8px; }
  .fs-pdp-rail::-webkit-scrollbar{ display: initial !important; }

  /* ≤6 images: simple stack with gaps */
  .fs-pdp-rail:not(.slick-initialized){
    display: flex !important;
    flex-direction: column !important;
    gap: var(--fs-pdp-gap) !important;
  }

  /* >6 images: keep track stacked; NO inner scroller */
  .fs-pdp-rail.slick-initialized .slick-list{
    overflow: visible !important; /* all scrolling happens on OUTER rail */
    height: auto !important;
    max-height: none !important;
  }
  .fs-pdp-rail.slick-initialized .slick-track{
    display: flex !important;
    flex-direction: column !important;
    gap: var(--fs-pdp-gap) !important;
    height: auto !important;
    transform: none !important;   /* no translateY that fakes height */
  }
  .fs-pdp-rail.slick-initialized .slick-slide{ float:none !important; width:auto !important; }

  /* Tidy thumb boxes */
  .fs-pdp-rail .productView-thumbnail{ margin:0 !important; padding:0 !important; }
  .fs-pdp-rail .productView-thumbnail-link{
    display:block !important;
    width: var(--fs-pdp-thumb-w) !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #e5e7eb; border-radius:6px; overflow:hidden; background:#fff;
  }
  .fs-pdp-rail img{ width:100%; height:100%; object-fit:contain; display:block; }

  /* We use native scroll; hide Slick arrows */
  .fs-pdp-rail .slick-prev, .fs-pdp-rail .slick-next{ display:none !important; }

  /* Fallback for browsers without flex gap */
  @supports not (gap: 1px){
    .fs-pdp-rail:not(.slick-initialized) .productView-thumbnail{ margin-bottom: var(--fs-pdp-gap) !important; }
    .fs-pdp-rail:not(.slick-initialized) .productView-thumbnail:last-child{ margin-bottom:0 !important; }
    .fs-pdp-rail.slick-initialized .slick-track > .slick-slide{ margin-bottom: var(--fs-pdp-gap) !important; }
    .fs-pdp-rail.slick-initialized .slick-track > .slick-slide:last-child{ margin-bottom:0 !important; }
  }
}


@media (max-width: 989.98px){

  /* === MOBILE WRAPPER === */
  .fs-pdp .productView-images{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:92vw !important;
  }

  /* === HERO IMAGE — NO SQUARE ON MOBILE === */
.fs-pdp figure.productView-image{
  width:min(92vw, 420px) !important;
  margin:0 auto 12px !important;
  aspect-ratio:auto !important;
  height:auto !important;
  overflow:visible !important;
}
.fs-pdp figure.productView-image img{
  display:block !important;
  width:100% !important;
  height:auto !important;        /* applies after swaps too */
  object-fit:contain !important;
  margin:0 auto !important;
}

  /* === THUMBNAILS — NATIVE HORIZONTAL SCROLL === */
  .fs-pdp .productView-thumbnails{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:6px 8px 10px !important;
    margin:0 auto 10px !important;
    width:100% !important;
    max-width:420px !important;
    scroll-snap-type:x proximity !important;
  }

  /* If Slick is present, make the inner .slick-list the scroller */
  .fs-pdp .productView-thumbnails.slick-initialized .slick-list{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .fs-pdp .productView-thumbnails.slick-initialized .slick-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    transform:none !important;       /* disable Slick’s transform so native scroll works */
    width:max-content !important;
  }
  .fs-pdp .productView-thumbnails .slick-slide{
    width:auto !important;           /* shrink to thumb width */
    float:none !important;
  }
  .fs-pdp .productView-thumbnails .slick-prev,
  .fs-pdp .productView-thumbnails .slick-next{
    display:none !important;         /* finger scroll only on mobile */
  }

  .fs-pdp .productView-thumbnail-link{
    flex:0 0 auto !important;
    width:72px !important;
    height:72px !important;
    scroll-snap-align:start !important;
    border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; background:#fff;
  }
  .fs-pdp .productView-thumbnail-link img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; }

  /* === CENTER PRICE / SKU === */
  .fs-pdp .productView-price,
  .fs-pdp .productView-meta{
    text-align:center !important;
    justify-content:center !important;
    width:100% !important;
  }

  /* === CENTER QTY + ADD‑TO‑CART === */
  .fs-pdp .productView-form .form-field--increments{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 auto 10px !important;
  }
  .fs-pdp .add-to-cart-wrapper{
    display:flex !important;
    justify-content:center !important;
  }
  .fs-pdp #form-action-addToCart{
    display:block !important;
    margin:0 auto !important;
    width:min(92vw, 420px) !important;
    text-align:center !important;
  }

  /* === SMALL TIDY-UP (optional) === */
  .fs-pdp .productView-details{ padding:8px 0 16px !important; }
}


@media (max-width: 989.98px){
  /* Breadcrumbs → hero image */
  .product-breadcrumbs{
    margin-bottom: 8px !important;
  }
  .fs-pdp .productView,
  .fs-pdp .productView-images{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .fs-pdp figure.productView-image{
    margin-top: 0 !important;
  }

  /* Add‑to‑Cart → description tabs */
  .fs-pdp .productView-form{      /* the whole form block */
    margin-bottom: 8px !important;
  }
  .fs-pdp .add-to-cart-wrapper{   /* the CTA row itself */
    margin-bottom: 8px !important;
  }
  .fs-pdp .product-tabs.container{ /* the tabs wrapper */
    margin-top: 12px !important;
  }
}


/* Desktop: show originals; hide the mobile copy */
@media (min-width: 990px){
  .product-specs-mobile{ display:none !important; }
}

/* Mobile: hide originals in product-data; show the copy under the CTA */
@media (max-width: 989.98px){
  /* Hide original variation summary above the CTA */
  .productView-details.product-data .productView-variations-list{ display:none !important; }

  /* Hide original custom fields + short specs */
  .productView-details.product-data .productView-custom-fields,
  .productView-details.product-data .fs-productView-info{
    display:none !important;
  }

  /* Show mobile copy under CTA */
  .product-specs-mobile{ display:block !important; margin-top:8px; }
  .product-specs-mobile .productView-variations-list--mobile{ margin-bottom:8px; }
}


  @media (max-width: 989.98px){
    /* tighten gap under the Add-to-Cart block */
    .fs-pdp .productView-details.product-options{
      margin-bottom: 6px !important;
    }

    /* spec block gets lines above/below + small padding */
    .fs-pdp .product-specs-mobile{
      margin-top: 6px !important;
      padding: 8px 0 6px !important;
      border-top: 1px solid #e5e7eb !important;
      border-bottom: 1px solid #e5e7eb !important;
    }

    /* small internal breathing room inside the mobile specs block */
    .fs-pdp .product-specs-mobile .productView-variations-list--mobile,
    .fs-pdp .product-specs-mobile .productView-custom-fields,
    .fs-pdp .product-specs-mobile .fs-productView-info{
      margin: 6px 0 !important;
    }

    /* tighten gap before Description tabs */
    .fs-pdp .product-tabs.container{
      margin-top: 10px !important;
    }
  }


  @media (max-width: 989.98px){
    /* Tighten gap under the Add-to-Cart area */
    .fs-pdp .productView-details.product-options{
      margin-bottom: 2px !important;
      padding-bottom: 0 !important;
    }
    .fs-pdp .productView-options form{ margin-bottom: 0 !important; }
    .fs-pdp .add-to-cart-wrapper{ margin: 0 0 2px !important; }

    /* Specs block: keep lines + snug spacing */
    .fs-pdp .product-specs-mobile{
      display: block !important;              /* ensure it shows */
      margin-top: 4px !important;             /* closer to CTA */
      padding: 8px 0 6px !important;
      border-top: 1px solid #e5e7eb !important;
      border-bottom: 1px solid #e5e7eb !important;
    }
    .fs-pdp .product-specs-mobile > *:first-child{ margin-top: 0 !important; }
    .fs-pdp .product-specs-mobile > *:last-child{  margin-bottom: 0 !important; }

    /* Slightly reduce space before Description tabs */
    .fs-pdp .product-tabs.container{
      margin-top: 6px !important;
    }
  }
  

.fsTrustBadgesTop img { height: calc(64px * 553 / 300); aspect-ratio: 300 / 553; }