.theme-product-details-style-08 [data-zs-product-details-primary-section] .zpcontainer [data-zs-product-primary-details] .theme-product-detail-container .theme-product-coupons {
    border-block-end: none !important;
}
body:has([data-zs-product-details-primary-section]) {
    background: none;
}

#productImageModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

#productImageModal .modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
}

#productImageModal img.modal-main {
  max-width: 80%;
  max-height: 70%;
  margin-bottom: 10px;
}

#modalThumbnails {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

#modalThumbnails img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

#modalThumbnails img.active {
  border-color: yellow;
}

/*new CSS fixes from zoho support 033126 */
/*Weird bloated Header & background image for category */
.theme-section:has(.theme-category-name), .theme-section:has(.theme-collection-name) {
  padding-block-end: 0px !important;
}

/* BG color for category header code */
.theme-category-image-description-conatainer {
    background-color: #fff;
}

/* Breadcrumbs color */
.theme-product-breadcrumb a  {
    color: #000 !important;
}

/* Product photos that are portrait size are getting cut off at the top */
.theme-product-details-style-08 [data-zs-product-details-primary-section] .zpcontainer [data-zs-product-primary-details] .theme-product-detail-image-container .theme-product-detail-image .theme-product-detail-image-inner picture img {
    object-fit: contain;
}

/*AH attempt at video container code */
    /*.video-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 Aspect Ratio 
      overflow: hidden;
    }*/
  /*  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }*/



/* For all videos */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

/* For videos in iframes–no scrollbars */

.video-container iframe {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  display: block;
}

/* For videos 16:9 aspect ratio 
<div class="video-container video-wide">
  <iframe src="..."></iframe>
</div>
*/
.video-wide {
  padding-bottom: 56.25%;
}

/* For videos 4:3 aspect ratio 
<div class="video-container video-fat">
  <iframe src="..."></iframe>
</div>
*/
.video-fat {
  padding-bottom: 75%;
}

/* For videos square aspect ratio 
<div class="video-container video-square">
  <iframe src="..."></iframe>
</div>
*/
.video-square {
  padding-bottom: 100%;
}

/* AH fix line-spacing within bullets for machine formats in product description <ul class="tight-spec-list">*/
.tight-spec-list {
  font-size: 12pt;
  color: #555;
  line-height: 1.15;
  margin: 0;
  padding-left: 1.1em;
}

.tight-spec-list li {
  margin: 0;
  padding: 0;
}

/*AH attempt to fix product home page module */

/* Reset collection container so it doesn't add weird side padding */
.zcs_collection {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Product card: stop forced tall height + big bottom padding */
.zcs_collection .zcs-product-card,
.zcs_collection .zcs-product {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 16px !important; /* tweak as you like */
    box-sizing: border-box;
}

/* Kill any extra bottom margin/padding inside the card */
.zcs_collection .zcs-product-card > *:last-child,
.zcs_collection .zcs-product > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Make sure images don't stretch the card vertically */
.zcs_collection .zcs-product-card img,
.zcs_collection .zcs-product img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

/* Mobile: keep things tight, no extra side padding */
@media screen and (max-width: 768px) {
    .zcs_collection {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .zcs_collection .zcs-product-card,
    .zcs_collection .zcs-product {
        padding: 10px !important;
    }
}