/* ===== DynamicCom – Final Clean CSS (merged) ===== */

/* Small globals */
[data-zs-product-non-returnable]{display:none!important}
.theme-product-count{display:none!important}

/* --- Base --- */
:root{
  --font-family-base:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --dc-border:rgba(0,0,0,.12);
}
html,body{overflow-x:hidden;}
img,video,svg{max-width:100%;height:auto;}
html,body,
.container,[class*="container"],.zpcontainer-fluid,
h1,h2,h3,h4,h5,h6,p,a,li,small,strong,em,span,label,legend,
.btn,.button,.menu,.breadcrumb,.product-title,.price,input,select,textarea,button{
  font-family:var(--font-family-base)!important;
}

/* --- HERO: true full width, no overlay flash --- */
.dc-hero-fw{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;margin:0!important;padding:0!important;background:transparent!important;}
.dc-hero-fw .container{max-width:100vw!important;margin:0!important;padding:0!important;}
.dc-hero-fw video,.dc-hero-fw iframe{display:block;width:100%;height:70vh;max-height:80vh;background:#000;}

/* --- Home: center “Categories” block --- */
.home .dc-categories-wrap{max-width:1200px;margin:0 auto!important;}
.home .dc-categories-wrap .zptitle,
.home .dc-categories-wrap h2,
.home .dc-categories-wrap h3{ text-align:center!important; }

/* --- Product images: contain, never over-zoom (category grid + film strip) --- */
.theme-productlist .product-image,
[class*="product-card"] .product-image,
.zs-product-image,.zc-product-card .product-image{
  aspect-ratio:4/3; width:100%; overflow:hidden; background:#fff; border-radius:12px;
}
.theme-productlist .product-image img,
[class*="product-card"] .product-image img,
.zs-product-image img,.zc-product-card .product-image img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block;
}

/* Home film strip uses the same frame */
.home [class*="carousel"] .product-image,
.home [class*="slider"] .product-image,
.home .theme-productlist .product-image{ aspect-ratio:4/3; }
.home [class*="carousel"] .product-image img,
.home [class*="slider"] .product-image img,
.home .theme-productlist .product-image img{ object-fit:contain!important; }

/* --- Sort row z-index only (brand UI removed) --- */
.product-sorting,[class*="sortby"],[class*="sort-by"],[class*="sorting"]{position:relative;z-index:10;}
[class*="sort"]:not([class*="support"]){position:relative!important;z-index:4000!important;}
[class*="sort"] [class*="dropdown"],[class*="sort"] [role="listbox"],[class*="sort"] [class*="menu"]{z-index:99999!important;}

/* ---------------- Footer (styling only) ---------------- */

/* Hide any non-custom footer anywhere */
footer.site-footer:not(#dc-footer),
footer:not(#dc-footer){display:none!important;}

/* Our footer base */
#dc-footer{background:#000!important;color:#fff!important;margin:0!important;padding:0!important;border:0!important;}
#dc-footer a{color:inherit;}
#dc-footer .zpcontainer-fluid{max-width:min(100vw - 24px, 1400px)!important;margin:0 auto!important;padding:24px 12px 28px!important;}

/* Single divider look */
#dc-footer .zpdivider-container,.zpdivider-common{opacity:.22;}
#dc-footer .zpdivider-container + .zpdivider-container{display:none!important;}

/* Columns grid — works with either .dc-footer-cols (preferred) or your existing .zprow */
#dc-footer .dc-footer-cols,
#dc-footer .zprow[style*="row-gap"],
#dc-footer .zprow.dc-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 28px; align-items:start;
}
@media (max-width:992px){
  #dc-footer .dc-footer-cols, #dc-footer .zprow[style*="row-gap"], #dc-footer .zprow.dc-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  #dc-footer .dc-footer-cols, #dc-footer .zprow[style*="row-gap"], #dc-footer .zprow.dc-grid{grid-template-columns:1fr;}
}

/* Lists + headings */
#dc-footer ul{list-style:none;margin:0;padding:0;}
#dc-footer li{margin:8px 0;}
#dc-footer h5,#dc-footer .zpaccordion-name{color:#fff!important;font-weight:700!important;margin:0 0 10px!important;}

/* Social */
#dc-footer .zpsocialprofile-container{display:flex!important;flex-wrap:wrap!important;gap:18px!important;justify-content:center!important;align-items:center!important;}
#dc-footer .zpsocialprofile-wrapper{width:52px;height:52px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;}
#dc-footer .zpsocialprofile{width:30px!important;height:30px!important;}
#dc-footer .zpsocialprofile *{fill:currentColor!important;stroke:currentColor!important;}
#dc-footer .zpsocialprofile-instagram svg *{fill:#fff!important;stroke:#fff!important;}

/* Copyright */
#dc-footer .dc-copy{border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding:14px 0 0;text-align:center;opacity:.9;font-size:14px;}
#dc-footer .dc-copy + .zpdivider-container,#dc-footer .dc-copy + .zpelem-divider{display:none!important;}

/* =========================================================
   Components you still need active
   ========================================================= */

/* 1) Generic video carousel wrapper */
.dc-video-carousel{
  --dc-max-vid-h:78vh;
  width:min(95vw,1280px);
  margin:0 auto 28px;
}
.dc-video-carousel .slick-list,
.dc-video-carousel .swiper,
.dc-video-carousel .swiper-wrapper{overflow:visible;}
.dc-video-carousel .slick-slide,
.dc-video-carousel .swiper-slide{display:flex!important;justify-content:center;align-items:center;}
.dc-video-carousel video,
.dc-video-carousel iframe{
  display:block;width:100%;height:auto;max-height:var(--dc-max-vid-h);
  margin:0 auto;background:#000;border-radius:12px;
}
@media (max-width:767.98px){
  .dc-video-carousel video,.dc-video-carousel iframe{border-radius:10px;}
}

/* 2) Video Carousel @ 4:3 — shrink WHOLE carousel on desktop */
.dc-video-4x3{
  --dc-vid-max-h: 78vh;
  width:100%;
  margin:0 auto;
}
@media (min-width:1024px){
  .dc-video-4x3{ width:70% !important; max-width:70% !important; }
}
.dc-video-4x3 .slick-list,
.dc-video-4x3 .swiper,
.dc-video-4x3 .swiper-wrapper{ overflow:visible; }
.dc-video-4x3 .slick-slide,
.dc-video-4x3 .swiper-slide{ display:flex !important; align-items:center; justify-content:center; }
.dc-video-4x3 video,
.dc-video-4x3 iframe{
  display:block; width:100%; height:auto; aspect-ratio:4 / 3; max-height:var(--dc-vid-max-h);
  object-fit:contain; background:#000; border-radius:12px; margin:0 auto;
}
.dc-video-4x3 .slick-track{ display:flex !important; }
.dc-video-4x3 .slick-slide > div{ height:100%; }

/* 3) Top Picks / film strip image fit */
.dc-top-picks{
  --gap:22px; --card-min:240px; --wrap-max:1400px;
}
.dc-top-picks > .container,
.dc-top-picks .container{
  max-width:min(100vw - 24px,var(--wrap-max));margin-left:auto;margin-right:auto;
}
.dc-top-picks .product-card,
.dc-top-picks [class*="product-card"]{display:flex;flex-direction:column;height:100%;}
.dc-top-picks .product-image,
.dc-top-picks [class*="product-card"] .product-image{
  position:relative;width:100%;height:clamp(150px,22vw,240px);
  display:flex;align-items:center;justify-content:center;padding:8px;background:#fff;border-radius:10px;overflow:hidden;
}
.dc-top-picks .product-image img,
.dc-top-picks [class*="product-card"] .product-image img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:transparent!important;
}
.dc-top-picks [class*="actions"]{margin-top:auto;}
@media (max-width:767.98px){
  .dc-top-picks .product-image{height:clamp(120px,36vw,180px);border-radius:8px;}
}

/* 4) Uniform carousel slides (any content/product cards) */
.dc-carousel-fit{ --dc-lh:1.35; --dc-title-lines:2; --dc-text-lines:2; }
.dc-carousel-fit .slick-list,
.dc-carousel-fit .swiper,
.dc-carousel-fit .swiper-wrapper{overflow:visible;}
.dc-carousel-fit .slick-track{display:flex!important;}
.dc-carousel-fit .slick-slide,
.dc-carousel-fit .swiper-slide{height:100%!important;display:flex!important;align-items:stretch;}
.dc-carousel-fit .slick-slide>div{padding:0;}
.dc-carousel-fit [class*="product-card"]{display:flex;flex-direction:column;height:100%;}
.dc-carousel-fit [class*="product-card"] .product-image{
  flex:0 0 auto;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#fff;
}
.dc-carousel-fit [class*="product-card"] .product-image img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
}
.dc-carousel-fit [class*="product-card"] [class*="actions"]{margin-top:auto;}
.dc-carousel-fit .product-title,
.dc-carousel-fit .dc-title{
  margin:0;line-height:var(--dc-lh);
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:var(--dc-title-lines);
  min-height:calc(1em * var(--dc-lh) * var(--dc-title-lines));
}
.dc-carousel-fit .dc-desc,
.dc-carousel-fit .product-desc,
.dc-carousel-fit .product-short-description{
  margin:0;opacity:.9;line-height:var(--dc-lh);
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:var(--dc-text-lines);
  min-height:calc(1em * var(--dc-lh) * var(--dc-text-lines));
}
.dc-carousel-fit .price,
.dc-carousel-fit .dc-price{margin:0;line-height:var(--dc-lh);font-weight:600;}

/* ===== PATCH: stop over-zoom in film strip & category grids ===== */
/* (kept exactly as you had it) */

/* ================================
   Top Product Picks – image fit + heading style
   ================================ */

.dc-top-picks{ --dc-strip-h: clamp(150px, 22vw, 240px); }

.dc-top-picks h3,
.dc-top-picks .zptitle,
.dc-top-picks .section-title{
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.25;
  margin:0 0 12px;
  text-shadow:0 1px 0 #F1C40F;
}

.dc-top-picks .product-card,
.dc-top-picks [class*="product-card"]{ display:flex; flex-direction:column; height:100%; }

.dc-top-picks .product-image,
.dc-top-picks [class*="product-card"] .product-image,
.dc-top-picks .zs-product-image,
.dc-top-picks .zc-product-card .product-image{
  position:relative; width:100%; height:var(--dc-strip-h);
  display:flex; align-items:center; justify-content:center;
  padding:8px; background:#fff; border-radius:10px; overflow:hidden;
}

.dc-top-picks .product-image img,
.dc-top-picks [class*="product-card"] .product-image img,
.dc-top-picks .zs-product-image img,
.dc-top-picks .zc-product-card .product-image img,
.dc-top-picks picture img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center center !important;
  background:transparent !important;
}

.dc-top-picks .product-image[style*="background"],
.dc-top-picks [class*="product-card"] .product-image[style*="background"]{
  background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important;
}

.dc-top-picks [class*="actions"]{ margin-top:auto; }

.dc-top-picks .slick-track{ display:flex !important; }
.dc-top-picks .slick-slide{ display:flex !important; align-items:stretch; }
.dc-top-picks .slick-slide > div{ height:100%; }
.dc-top-picks .swiper-slide{ display:flex !important; align-items:stretch; }

/* Mobile tweaks */
@media (max-width:767.98px){
  .dc-top-picks{ --dc-strip-h: clamp(120px, 36vw, 180px); }
  .dc-top-picks .product-image{ border-radius:8px; padding:6px; }
}

/* ==========================================
   Product Categories grid – same image behavior
   ========================================== */

.theme-productlist .product-image,
[class*="product-list"] .product-image{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  display:flex; align-items:center; justify-content:center;
  padding:8px; background:#fff; border-radius:10px; overflow:hidden;
}
.theme-productlist .product-image img,
[class*="product-list"] .product-image img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important; background:transparent !important;
}
[class*="product-list"] .product-image[style*="background"]{
  background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important;
}
@media (max-width:767.98px){
  .theme-productlist .product-image,
  [class*="product-list"] .product-image{ border-radius:8px; padding:6px; }
}

/* Home film strip thumbs */
.home [class*="carousel"] .product-image,
.home [class*="slider"]   .product-image{ aspect-ratio: 4 / 3 !important; overflow:hidden; border-radius:10px; background:#fff; }
.home [class*="carousel"] .product-image img,
.home [class*="slider"]   .product-image img{ object-fit:contain !important; }

/* ===== CATEGORY GRID — Image Fit (previous hard overrides kept) ===== */
html .theme-category-section [class*="product-list"] .product-image,
html .theme-collection-section [class*="product-list"] .product-image,
html .theme-productlist .product-image{
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(160px, 28vw, 260px);
  padding: 8px !important; background: #fff !important; border-radius: 10px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
html .theme-category-section [class*="product-list"] .product-image > a,
html .theme-collection-section [class*="product-list"] .product-image > a{
  display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important;
}
html .theme-category-section [class*="product-list"] .product-image img,
html .theme-collection-section [class*="product-list"] .product-image img,
html .theme-productlist .product-image img,
html [class*="product-list"] .product-image picture img{
  display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important; object-position: center center !important; background: transparent !important;
}
html [class*="product-list"] .product-image[style*="background"],
html .theme-productlist .product-image[style*="background"]{
  background-size: contain !important; background-position: 50% 50% !important; background-repeat: no-repeat !important;
}
html [class*="product-list"] .product-image img[width],
html [class*="product-list"] .product-image img[height]{
  width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important;
}
@supports selector(:has(*)){
  html [class*="product-list"] .product-image:has(img),
  html [class*="product-list"] .product-image > a:has(img){ background-image: none !important; }
}
html [class*="product-list"] .product-image img{ object-fit: contain !important; }

/* =============================
   CATEGORY / COLLECTION GRID — FINAL HARD FIX
   Paste AT THE VERY END of your stylesheet
   ============================= */

/* 1) Normalise the image frame (4:3) and center contents */
html body .theme-category-section [class*="product-list"] .product-image,
html body .theme-collection-section [class*="product-list"] .product-image,
html body .theme-productlist .product-image{
  aspect-ratio: 4 / 3 !important;        /* match your live card shape */
  width: 100% !important;
  height: auto !important;
  min-height: clamp(180px, 26vw, 260px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* 2) Make the clickable wrapper fill the frame */
html body .theme-category-section [class*="product-list"] .product-image > a,
html body .theme-collection-section [class*="product-list"] .product-image > a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 3) The image itself — contain, never crop/zoom/stretch */
html body .theme-category-section [class*="product-list"] .product-image :is(img, picture > img),
html body .theme-collection-section [class*="product-list"] .product-image :is(img, picture > img),
html body .theme-productlist .product-image :is(img, picture > img){
  width: auto !important;                 /* avoid forced scaling */
  height: auto !important;
  max-width: 100% !important;             /* fit inside the frame */
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: none !important;             /* kill any theme zoom/scale */
}

/* 4) If thumbnails are applied as background images, contain them */
html body [class*="product-list"] .product-image[style*="background"],
html body [class*="product-list"] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 5) Clamp away inline width/height attributes the theme injects */
html body [class*="product-list"] .product-image img[width],
html body [class*="product-list"] .product-image img[height]{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ========= CATEGORY / COLLECTION GRID — FINAL OVERRIDE (append at end) ========= */

/* 1) Use an explicit height band (instead of theme pseudo-square) */
html body .theme-productlist .product-image,
html body [class*="product-list"] .product-image{
  height: clamp(180px, 26vw, 260px) !important;  /* tidy, responsive band */
  aspect-ratio: auto !important;                 /* neutralize ratio forcing */
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* 2) Kill the theme's ::before padding-square trick that causes mismatch */
html body .theme-productlist .product-image::before,
html body [class*="product-list"] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Make every inner holder fill & center (some themes wrap img in spans) */
html body .theme-productlist .product-image > *,
html body [class*="product-list"] .product-image > *,
html body .theme-productlist .product-image .img-holder,
html body [class*="product-list"] .product-image .img-holder,
html body .theme-productlist .product-image picture{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 4) The actual <img>: contain, no crop, no theme transforms */
html body .theme-productlist .product-image img,
html body [class*="product-list"] .product-image img,
html body .theme-productlist .product-image picture > img{
  position: static !important;        /* cancel absolute-center tricks */
  inset: auto !important;
  transform: none !important;         /* cancel any scale/zoom */
  width: auto !important;             /* let max-* drive the fit */
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* 5) If any card still uses background-image thumbnails, contain them */
html body [class*="product-list"] .product-image[style*="background"],
html body [class*="product-list"] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* ========= CATEGORY / COLLECTION GRID — ONE FINAL, HIGH-SPEC OVERRIDE ========= */
/* Paste this at the VERY END of your stylesheet */

:root{ --dc-card-h: clamp(190px, 25vw, 260px); }

/* 1) The product image frame: fixed responsive band, centered content */
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image,
html body .theme-productlist        [data-zs-product-id] .product-image{
  height: var(--dc-card-h) !important;
  aspect-ratio: auto !important;            /* cancel theme's forced ratios   */
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* 2) Kill any :before square-padding hack from the theme */
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before,
html body .theme-productlist        [data-zs-product-id] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Ensure any inner holder (a/span/picture) fills and centers */
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *,
html body .theme-productlist        [data-zs-product-id] .product-image > *{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4) The actual <img>: FIT (no crop/zoom), cancel absolute/transform tricks */
html body .theme-category-section [data-zs-product-id] .product-image img,
html body .theme-category-section [data-zs-product-id] .product-image picture > img,
html body .theme-collection-section [data-zs-product-id] .product-image img,
html body .theme-collection-section [data-zs-product-id] .product-image picture > img,
html body .theme-productlist        [data-zs-product-id] .product-image img,
html body .theme-productlist        [data-zs-product-id] .product-image picture > img{
  position: static !important;
  inset: auto !important;
  transform: none !important;

  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* 5) If any tiles use background-image thumbs, contain them */
html body [data-zs-product-]()

/* ========== CATEGORY / COLLECTION GRID — NUCLEAR FIX (append at end) ========== */
/* One variable so you can tweak the window height if desired */
:root { --dc-card-h: clamp(190px, 25vw, 260px); }

/* 1) The image WINDOW: fixed responsive band, centered contents */
html body .theme-productlist [data-zs-product-id] .product-image,
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image{
  height: var(--dc-card-h) !important;
  aspect-ratio: auto !important;             /* kill theme ratio tricks       */
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* guard against weird min-sizes coming from theme */
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 2) Remove the theme’s pseudo square-padding */
html body .theme-productlist [data-zs-product-id] .product-image::before,
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Any inner holder must fill & center (anchors/spans/picture wrappers) */
html body .theme-productlist [data-zs-product-id] .product-image > *,
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 4) The actual IMG (and picture>img): FIT only — no zoom, no absolute center */
html body .theme-productlist [data-zs-product-id] .product-image img,
html body .theme-productlist [data-zs-product-id] .product-image picture > img,
html body .theme-category-section [data-zs-product-id] .product-image img,
html body .theme-category-section [data-zs-product-id] .product-image picture > img,
html body .theme-collection-section [data-zs-product-id] .product-image img,
html body .theme-collection-section [data-zs-product-id] .product-image picture > img{
  display: block !important;

  /* cancel theme absolute/translate/scale */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;

  /* fit in the window without stretching */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;

  /* guard against forced min-sizes */
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 5) Some themes add a hover scale — neutralize it */
html body .product-card:hover .product-image img{
  transform: none !important;
}

/* 6) If a tile uses background-image instead of <img>, contain it */
html body [data-zs-product-id] .product-image[style*="background"],
html body [data-zs-product-id] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 7) Clamp inline width/height attributes if they’re injected */
html body [data-zs-product-id] .product-image img[width],
html body [data-zs-product-id] .product-image img[height]{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ========= DYNAMICCOM — CATEGORY / COLLECTION GRID IMAGE FIT (FINAL) =========
   Paste AT THE VERY END of your CSS. This only targets category/collection cards.
   It neutralizes theme transforms/inline sizes and forces true "contain" fit.
=============================================================================== */

/* 1) Normalize the tile window to a tidy band (same feel as your 4:3 cards) */
html body .theme-productlist .product-image,
html body [class*="product-list"] .product-image,
html body .theme-category-section [class*="product-list"] .product-image,
html body .theme-collection-section [class*="product-list"] .product-image{
  /* Use a fixed responsive height band so rows are consistent */
  height: clamp(200px, 26vw, 260px) !important;
  aspect-ratio: auto !important;              /* kill any ratio padding tricks */
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  /* Center whatever is inside, regardless of wrappers */
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

/* 2) Themes often use ::before to fake square tiles — disable it */
html body .theme-productlist .product-image::before,
html body [class*="product-list"] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Make every immediate child fill the frame & center (anchors/spans/picture) */
html body .theme-productlist .product-image > *,
html body [class*="product-list"] .product-image > *{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 4) The actual thumbnail <img> (including <picture><img>) — NO ZOOM, NO STRETCH */
html body .theme-productlist .product-image img,
html body .theme-productlist .product-image picture > img,
html body [class*="product-list"] .product-image img,
html body [class*="product-list"] .product-image picture > img{
  /* Neutralize any absolute-centering/scale from the theme */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;

  /* Fit INSIDE the visible window */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* 5) Clamp theme/inline attributes that force sizes */
html body [class*="product-list"] .product-image img[width],
html body [class*="product-list"] .product-image img[height],
html body [class*="product-list"] .product-image img[style*="width"],
html body [class*="product-list"] .product-image img[style*="height"]{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* 6) If any tile uses CSS background images, contain them instead of cover */
html body [class*="product-list"] .product-image[style*="background"],
html body [class*="product-list"] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 7) (Optional) calm hover zooms that can reintroduce “oversize” look */
html body .theme-productlist .product-image img:hover{
  transform: none !important;
}

/* ===== DYNAMICCOM — CATEGORY/COLLECTION GRID: FINAL, SMALL OVERRIDE ===== */
/* Scope: only category/collection product tiles (not dc-top-picks) */

/* 1) Make the visible window a tidy, responsive band and center content */
html body .theme-productlist [data-zs-product-id] .product-image,
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image{
  height: clamp(190px, 25vw, 260px) !important;
  aspect-ratio: auto !important;                 /* kill theme ratio hacks   */
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* guard against theme min-sizes */
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 2) Some themes inject ::before padding to force a square—remove it */
html body .theme-productlist [data-zs-product-id] .product-image::before,
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Ensure any inner holder (a/span/picture wrappers) fills & centers */
html body .theme-productlist [data-zs-product-id] .product-image > *,
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;

  /* kill “crop” wrappers that use absolute positioning/overflow tricks */
  position: static !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 4) The actual image: fit inside the window (no crop, no zoom, no absolute) */
html body .theme-productlist [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-category-section [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-collection-section [data-zs-product-id] .product-image :is(img, picture > img){
  display: block !important;

  /* neutralize theme absolute/translate/scale */
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;

  /* keep proportions; fill as much as possible without cropping */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;

  /* guard against forced minimums */
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 5) If a tile uses background-image instead of <img>, contain it */
html body [data-zs-product-id] .product-image[style*="background"],
html body [data-zs-product-id] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 6) Theme hover zooms can reintroduce oversize—turn them off for grid */
html body .theme-productlist [data-zs-product-id] .product-image img:hover{
  transform: none !important;
}

/* ===== DYNAMICCOM — CATEGORY/COLLECTION GRID: NUCLEAR IMAGE FIX ===== */
/* Scope: only category/collection product tiles (won’t touch .dc-top-picks) */

/* Window: fixed responsive band, centered contents */
html body .theme-productlist [data-zs-product-id] .product-image,
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image{
  height: clamp(190px, 25vw, 260px) !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;         /* removes baseline gaps */
}

/* Kill theme’s square-padding hack */
html body .theme-productlist [data-zs-product-id] .product-image::before,
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before{
  content: none !important;
  display: none !important;
}

/* HARD reset for ALL descendants inside the image box */
html body .theme-productlist [data-zs-product-id] .product-image *,
html body .theme-productlist [data-zs-product-id] .product-image *::before,
html body .theme-productlist [data-zs-product-id] .product-image *::after,
html body .theme-category-section [data-zs-product-id] .product-image *,
html body .theme-collection-section [data-zs-product-id] .product-image *{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  float: none !important;

  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make any immediate child (a/span/picture wrappers) fill & center */
html body .theme-productlist [data-zs-product-id] .product-image > *,
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The actual thumbnails (including <picture><img>) — FIT, no crop/zoom */
html body .theme-productlist [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-category-section [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-collection-section [data-zs-product-id] .product-image :is(img, picture > img){
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  image-rendering: auto !important;
}

/* If a tile uses background-image instead of <img>, contain it */
html body [data-zs-product-id] .product-image[style*="background"],
html body [data-zs-product-id] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* Neutralize hover zooms that reintroduce oversize */
html body .theme-productlist [data-zs-product-id] .product-image img:hover{
  transform: none !important;
}

/* ========= DYNAMICCOM — CATEGORY / COLLECTION GRID IMAGE FIT (ONE-LINER PATCH)
   Paste this as the LAST block in your stylesheet. Keeps dc-top-picks untouched.
=============================================================================== */

:root{ --dc-card-h: clamp(200px, 26vw, 260px); }

/* 1) The visible image window for category/collection tiles */
html body .theme-productlist [data-zs-product-id] .product-image,
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image{
  height: var(--dc-card-h) !important;      /* tidy, responsive band */
  aspect-ratio: auto !important;            /* kill theme’s forced ratio */
  width: 100% !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background:#fff !important;
  overflow:hidden !important;

  /* centre whatever is inside, regardless of wrapper */
  display:grid !important;
  place-items:center !important;
  position:relative !important;
}

/* 2) stop the theme’s square-padding pseudo element */
html body .theme-productlist [data-zs-product-id] .product-image::before,
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before{
  content:none !important; display:none !important;
}

/* 3) make any immediate child (a/span/picture) fill the frame */
html body .theme-productlist [data-zs-product-id] .product-image > *,
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *{
  width:100% !important; height:100% !important;
  display:grid !important; place-items:center !important;
}

/* 4) the actual image: FIT only — no crop, no stretch, no transforms */
html body .theme-productlist [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-category-section [data-zs-product-id] .product-image :is(img, picture > img),
html body .theme-collection-section [data-zs-product-id] .product-image :is(img, picture > img){
  position:static !important; inset:auto !important;
  transform:none !important; scale:1 !important; transition:none !important;

  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:100% !important;

  object-fit:contain !important; object-position:center center !important;
  background:transparent !important;
}

/* 5) if a tile uses a CSS background instead of <img>, contain it */
html body [data-zs-product-id] .product-image[style*="background"],
html body [data-zs-product-id] .product-image > a[style*="background"]{
  background-size:contain !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
}

/* 6) neutralise theme hover zooms that re-introduce oversize look */
html body .product-card:hover .product-image img{
  transform:none !important; scale:1 !important;
}

/* ========== DYNAMICCOM — CATEGORY / COLLECTION GRID: FINAL, SINGLE OVERRIDE =========
   Paste AT THE VERY END of your CSS. This wins the cascade and stops the oversize look.
   Targets only the category/collection product list cards.
=============================================================================== */

:root { --dc-card-h: clamp(200px, 26vw, 260px); }  /* adjust if you want taller/shorter rows */

/* 1) The visible image window (card thumbnail area) */
html body .theme-category-section [data-zs-product-id] .product-image,
html body .theme-collection-section [data-zs-product-id] .product-image,
html body .theme-productlist        [data-zs-product-id] .product-image{
  /* fixed, responsive band so rows are even */
  height: var(--dc-card-h) !important;
  width: 100% !important;
  aspect-ratio: auto !important;         /* cancel any ratio hacks */
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  /* center whatever’s inside */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* kill theme tricks */
  position: relative !important;
}
html body .theme-category-section [data-zs-product-id] .product-image::before,
html body .theme-collection-section [data-zs-product-id] .product-image::before,
html body .theme-productlist        [data-zs-product-id] .product-image::before{
  content: none !important;
  display: none !important;
}

/* 2) Make any inner wrapper (a/span/picture) fill & center */
html body .theme-category-section [data-zs-product-id] .product-image > *,
html body .theme-collection-section [data-zs-product-id] .product-image > *,
html body .theme-productlist        [data-zs-product-id] .product-image > *{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3) The actual <img> (and <picture> > <img>): FIT ONLY — no crop/zoom/stretch */
html body .theme-category-section [data-zs-product-id] .product-image img,
html body .theme-category-section [data-zs-product-id] .product-image picture > img,
html body .theme-collection-section [data-zs-product-id] .product-image img,
html body .theme-collection-section [data-zs-product-id] .product-image picture > img,
html body .theme-productlist        [data-zs-product-id] .product-image img,
html body .theme-productlist        [data-zs-product-id] .product-image picture > img{
  /* neutralize absolute/scale the theme applies */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;

  /* FIT inside the window and stay centered */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;

  /* guard against inline width/height */
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 4) If a tile uses background-image instead of <img>, contain it */
html body [data-zs-product-id] .product-image[style*="background"],
html body [data-zs-product-id] .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 5) Nuke inline attributes the platform injects that re-enlarge images */
html body [data-zs-product-id] .product-image img[width],
html body [data-zs-product-id] .product-image img[height],
html body [data-zs-product-id] .product-image img[style*="width"],
html body [data-zs-product-id] .product-image img[style*="height"]{
  width: 100% !important;
  height: 100% !important;
}

/* ========= DYNAMICCOM — CATEGORY / COLLECTION GRID IMAGE FIT (FINAL) =========
   Append at the VERY END. Fixes oversized/enlarged thumbnails on category pages.
=============================================================================== */

/* 1) Normalize the tile window to a fixed responsive band */
html body :where(.theme-productlist, [class*="product-list"]) .product-image{
  height: clamp(200px, 26vw, 260px) !important;
  aspect-ratio: auto !important;           /* cancel any ratio hacks        */
  width: 100% !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 2) Kill square-padding pseudo elements some themes inject */
html body :where(.theme-productlist, [class*="product-list"]) .product-image::before{
  content: none !important;
  display: none !important;
}

/* 3) Make any immediate wrapper (a/span/picture) fill & center */
html body :where(.theme-productlist, [class*="product-list"]) .product-image > *{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* 4) The actual image — FIT only (no crop/zoom/stretch), cancel transforms */
html body :where(.theme-productlist, [class*="product-list"]) .product-image :is(img, picture > img){
  position: static !important;
  inset: auto !important;
  transform: none !important;
  transition: none !important;

  /* This neutralizes earlier width:100%/height:100% rules */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* 5) If a tile uses CSS background images, contain them */
html body :where(.theme-productlist, [class*="product-list"]) .product-image[style*="background"],
html body :where(.theme-productlist, [class*="product-list"]) .product-image > a[style*="background"]{
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}

/* 6) (Optional) Calm hover zooms that can reintroduce the “oversize” look */
html body :where(.theme-productlist, [class*="product-list"]) .product-image img:hover{
  transform: none !important;
}

/* ===== FINAL – Category/Collection thumbnails: consistent FIT (no oversize) ===== */
html body :where(.theme-productlist,[class*="product-list"]) .product-image{
  height: clamp(200px, 26vw, 260px) !important; /* tidy, even rows */
  aspect-ratio: auto !important;                /* cancel ratio hacks */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
}
html body :where(.theme-productlist,[class*="product-list"]) .product-image::before{
  content:none !important; display:none !important; /* kill pseudo square */
}
html body :where(.theme-productlist,[class*="product-list"]) .product-image > *{
  width:100% !important; height:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
html body :where(.theme-productlist,[class*="product-list"]) .product-image :is(img,picture > img){
  position:static !important; inset:auto !important; transform:none !important;
  width:auto !important; height:auto !important;     /* let max-* control size */
  max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; object-position:center center !important;
  background:transparent !important;
}

[data-zs-product-id] picture img{
    object-fit: contain !important
}

/* ============================
   Hero Slide – Black Preload Background
   ============================ */
.dc-hero-black {
  position: relative;
  background-color: #000 !important;   /* solid black */
  overflow: hidden;
}

/* Make sure video/iframe/image sits above the black background */
.dc-hero-black video,
.dc-hero-black iframe,
.dc-hero-black img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent !important; /* prevent grey fallback */
  object-fit: cover;  /* keep full bleed */
}

/* Optional: smooth fade-in when media loads */
.dc-hero-black video,
.dc-hero-black iframe,
.dc-hero-black img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.dc-hero-black video[src],
.dc-hero-black iframe[src],
.dc-hero-black img[src] {
  opacity: 1;
}

/* === dc-video-4x3: desktop 10% smaller + no carousel background === */

/* Remove any backgrounds from the carousel and its common wrappers */
.dc-video-4x3,
.dc-video-4x3 .slick-list,
.dc-video-4x3 .slick-slide,
.dc-video-4x3 .swiper,
.dc-video-4x3 .swiper-wrapper,
.dc-video-4x3 video,
.dc-video-4x3 iframe{
  background: transparent !important;
  box-shadow: none !important;
}

/* Desktop only: 10% smaller than your existing 70% width (=> 63%) */
@media (min-width: 1024px){
  .dc-video-4x3{
    width: 63% !important;
    max-width: 63% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== Footer trust badges: hard reset (append at END) ===== */
#dc-footer .dc-trust-badges{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;padding:18px 0;margin:6px auto 0;max-width:1200px;}
#dc-footer .dc-badge{
  width:200px;height:84px;display:flex;align-items:center;justify-content:center;
  background:#fff !important;border:1px solid #e6e6e6;border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);padding:8px 12px;overflow:hidden;
  opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;
}
#dc-footer .dc-badge *{opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;}
#dc-footer .dc-badge img{
  display:block !important; width:auto !important; height:auto !important;
  max-height:64px !important; max-width:100% !important; object-fit:contain !important;
  background:transparent !important;
}
/* Guard against any theme rules that fade images inside footer */
#dc-footer img{opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;}