/* Smell & Smile — stage-zeedog direct v2.1 fixes
   Loaded AFTER zee-direct-v2-0c4e7b6883.css so Theme Editor controls are authoritative. */

/* ---------- Collection grid consistency ---------- */
.zee-detail-plp.is-zee-style .collection-list{
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  -moz-column-gap:var(--zee-plp-gap,20px)!important;
       column-gap:var(--zee-plp-gap,20px)!important;
  row-gap:var(--zee-plp-row-gap,32px)!important;
  align-items:start!important;
}

.zee-detail-plp.is-zee-style .collection-list > .product-item,
.zee-detail-plp.is-zee-style .collection-list > .product-snipet-wrap,
.zee-detail-plp.is-zee-style .collection-list > spz-product-snippet,
.zee-detail-plp.is-zee-style .product-item,
.zee-detail-plp.is-zee-style .product-snipet-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-self:start!important;
  border-radius:0!important;
  overflow:visible!important;
}

/* ---------- Product card: one consistent box for initial and AJAX cards ---------- */
.zee-detail-plp.is-zee-style .product-snippet,
.zee-detail-plp.is-zee-style .product-snippet:hover{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:var(--zee-plp-card-padding,0px)!important;
  box-sizing:border-box!important;
  background:var(--zee-plp-card-bg,var(--v28-surface))!important;
  border:var(--zee-plp-card-border-width,0px) solid var(--zee-plp-border,var(--v28-border))!important;
  border-radius:var(--zee-plp-card-tl,0px) var(--zee-plp-card-tr,0px) var(--zee-plp-card-br,0px) var(--zee-plp-card-bl,0px)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
  overflow:hidden!important;
}

/* Make all four media corners follow editor values; do not inherit Concept X radius. */
.zee-detail-plp.is-zee-style .product-snippet > div:first-child,
.zee-detail-plp.is-zee-style .product-snippet-image-hover,
.zee-detail-plp.is-zee-style .product-snippet-image-container{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  background:var(--zee-plp-image-bg,var(--v28-surface-alt))!important;
  border-radius:var(--zee-plp-img-tl,8px) var(--zee-plp-img-tr,8px) var(--zee-plp-img-br,8px) var(--zee-plp-img-bl,8px)!important;
  overflow:hidden!important;
}

.zee-detail-plp.is-zee-style .product-snippet > div:first-child{
  padding:var(--zee-plp-image-padding,0px)!important;
}

/* Keep product photography stable and inside its media box. */
.zee-detail-plp.is-zee-style .product-snippet-image-container spz-img,
.zee-detail-plp.is-zee-style .product-snippet-main-images,
.zee-detail-plp.is-zee-style .product-snippet-main-images spz-img{
  max-width:100%!important;
  transform:none!important;
  background:transparent!important;
}
.zee-detail-plp.is-zee-style .product-snippet-image-container spz-img img,
.zee-detail-plp.is-zee-style .product-snippet-main-images spz-img img{
  -o-object-fit:var(--zee-plp-image-fit,contain)!important;
     object-fit:var(--zee-plp-image-fit,contain)!important;
}

/* Disable legacy lift / scale / second image motion on PLP. */
.zee-detail-plp.is-zee-style .product-snippet:hover,
.zee-detail-plp.is-zee-style .product-item:hover,
.zee-detail-plp.is-zee-style .product-snipet-wrap:hover,
.zee-detail-plp.is-zee-style .product-snippet-image-hover:hover,
.zee-detail-plp.is-zee-style .product-snippet-image-hover:hover .product-snippet-image-1,
.zee-detail-plp.is-zee-style .product-snippet-image-hover:hover .product-snippet-main-images{
  transform:none!important;
}
.zee-detail-plp.is-zee-style .product-snippet-image-hover .product-snippet-image-2,
.zee-detail-plp.is-zee-style .product-snippet-image-hover:hover .product-snippet-image-2{
  opacity:0!important;
  transform:none!important;
  pointer-events:none!important;
}

/* Text region stays inside the same card and uses identical spacing on every row. */
.zee-detail-plp.is-zee-style .product-snippet > div.mt-3{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin-top:12px!important;
  padding:0!important;
}

/* ---------- Quick add: settings control both initial Liquid and AJAX cards ---------- */
.zee-detail-plp.is-zee-style .product-snippet-add-btn,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn{
  width:var(--zee-plp-atc-size,40px)!important;
  height:var(--zee-plp-atc-size,40px)!important;
  min-width:var(--zee-plp-atc-size,40px)!important;
  min-height:var(--zee-plp-atc-size,40px)!important;
  background-color:var(--zee-plp-atc-bg,var(--v28-accent))!important;
  color:var(--zee-plp-atc-icon,var(--v28-surface))!important;
  border:1px solid var(--zee-plp-atc-border,var(--v28-accent))!important;
  border-radius:var(--zee-plp-atc-radius,20px)!important;
  box-shadow:none!important;
  transform:none!important;
}
.zee-detail-plp.is-zee-style .product-snippet-add-btn svg,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn svg,
.zee-detail-plp.is-zee-style .product-snippet-add-btn svg path,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn svg path{
  color:var(--zee-plp-atc-icon,var(--v28-surface))!important;
  fill:currentColor!important;
  stroke:currentColor;
}
.zee-detail-plp.is-zee-style .product-snippet-add-btn:hover,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn:hover{
  background-color:var(--zee-plp-atc-hover-bg,var(--v28-accent-hover))!important;
  color:var(--zee-plp-atc-hover-icon,var(--v28-surface))!important;
  border-color:var(--zee-plp-atc-hover-bg,var(--v28-accent-hover))!important;
  transform:none!important;
}
.zee-detail-plp.is-zee-style .product-snippet-add-btn:hover svg,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn:hover svg,
.zee-detail-plp.is-zee-style .product-snippet-add-btn:hover svg path,
.zee-detail-plp.is-zee-style .product-snippet-quick-shop-atc-btn:hover svg path{
  color:var(--zee-plp-atc-hover-icon,var(--v28-surface))!important;
  fill:currentColor!important;
  stroke:currentColor;
}

/* Mobile remains compact but uses the same box model. */
@media(max-width:959.98px){
  .zee-detail-plp.is-zee-style .collection-list{
    -moz-column-gap:min(var(--zee-plp-gap,12px),18px)!important;
         column-gap:min(var(--zee-plp-gap,12px),18px)!important;
    row-gap:min(var(--zee-plp-row-gap,24px),36px)!important;
  }
}

/* ---------- v2.2: eliminate false vertical "divider" impression ----------
   The white strip users saw is the CSS grid column-gap showing between tinted
   media panels; it is not a border. Zee.Dog's clean PLP defaults to no tinted
   media panel, so the gap visually disappears on the white page. */
.zee-detail-plp.is-zee-style .collection-list,
.zee-detail-plp.is-zee-style .collection-list > *,
.zee-detail-plp.is-zee-style .product-item,
.zee-detail-plp.is-zee-style .product-snipet-wrap,
.zee-detail-plp.is-zee-style spz-product-snippet{
  background:transparent!important;
  border-left:0!important;
  border-right:0!important;
  outline:0!important;
}
.zee-detail-plp.is-zee-style .collection-list > *::before,
.zee-detail-plp.is-zee-style .collection-list > *::after,
.zee-detail-plp.is-zee-style .product-item::before,
.zee-detail-plp.is-zee-style .product-item::after,
.zee-detail-plp.is-zee-style .product-snipet-wrap::before,
.zee-detail-plp.is-zee-style .product-snipet-wrap::after{
  content:none!important;
  display:none!important;
}
.zee-detail-plp.is-zee-style .collection-list{
  -moz-column-gap:var(--zee-plp-gap,20px)!important;
       column-gap:var(--zee-plp-gap,20px)!important;
  row-gap:var(--zee-plp-row-gap,32px)!important;
}
/* When the media panel is disabled the media area is transparent/white,
   matching the page and therefore removing the vertical seam illusion. */
.zee-detail-plp.is-zee-style .product-snippet > div:first-child,
.zee-detail-plp.is-zee-style .product-snippet-image-hover,
.zee-detail-plp.is-zee-style .product-snippet-image-container,
.zee-detail-plp.is-zee-style .product-snippet-image-container spz-img,
.zee-detail-plp.is-zee-style .product-snippet-main-images{
  background-color:var(--zee-plp-image-bg,transparent)!important;
}


/* ---------- v2.3: filter toolbar -> product grid vertical rhythm ----------
   v2.0 intentionally forced padding-top:0 on the PLP grid, which made the
   first product row sit too close to filters/results. This restores a clean
   Zee.Dog-like breathing space and makes it editable in the section. */
.zee-detail-plp.is-zee-style .collection-list{
  padding-top:var(--zee-plp-toolbar-gap,36px)!important;
}
@media(max-width:959.98px){
  .zee-detail-plp.is-zee-style .collection-list{
    padding-top:var(--zee-plp-toolbar-gap-mobile,20px)!important;
  }
}

/* ---------- v2.4: rounded cards must never clip price / "De" text ---------- */
.zee-detail-plp.is-zee-style .product-snippet,
.zee-detail-plp.is-zee-style .product-snippet:hover{
  overflow:visible!important;
  padding-top:var(--zee-plp-card-padding,0px)!important;
  padding-right:var(--zee-plp-card-padding,0px)!important;
  padding-left:var(--zee-plp-card-padding,0px)!important;
  padding-bottom:max(var(--zee-plp-card-padding,0px),var(--zee-plp-card-bottom-safe,12px))!important;
}

/* v2.6 product metafield + per-product visibility rendering */
.zee-direct-story-card__media img,.zee-direct-usage-card__media img,.zee-direct-feature-row__media img{display:block;width:100%;height:auto;max-width:100%;}
.zee-direct-story-card.no-media,.zee-direct-usage-card.no-media{padding-top:4px;}
.zee-direct-feature-row.no-media{grid-template-columns:1fr;max-width:900px;}
.zee-direct-feature-row.no-media .zee-direct-feature-row__copy{max-width:760px;}
.zee-direct-usage-card .metafield-multi_line_text_field,.zee-direct-story-card .metafield-multi_line_text_field,.zee-direct-feature-row .metafield-multi_line_text_field,.zee-direct-faq .metafield-multi_line_text_field{white-space:pre-line;}

/* v2.7 pure product-metafield modules + spacing controls */
.zee-direct-story--closer .zee-direct-story__heading,
.zee-direct-usage .zee-direct-story__heading,
.zee-direct-feature-rows .zee-direct-story__heading,
.zee-direct-faq .zee-direct-story__heading{
  margin-bottom:var(--zds-heading-gap,var(--zdu-heading-gap,var(--zdfr-heading-gap,var(--zdf-heading-gap,34px))))!important;
}
.zee-direct-story--closer .zee-direct-story-card h3{
  margin-top:var(--zds-title-gap,18px)!important;
  margin-bottom:var(--zds-text-gap,8px)!important;
}
.zee-direct-usage-card{
  padding-bottom:var(--zdu-card-bottom,16px);
}
.zee-direct-usage-card__num{
  margin-top:var(--zdu-media-gap,18px)!important;
  margin-bottom:var(--zdu-number-gap,6px)!important;
}
.zee-direct-usage-card.no-media .zee-direct-usage-card__num{
  margin-top:0!important;
}
.zee-direct-usage-card h3{
  margin-top:0!important;
  margin-bottom:var(--zdu-text-gap,8px)!important;
}
.zee-direct-feature-row{
  margin-bottom:var(--zdfr-row-gap,64px)!important;
}
.zee-direct-feature-row:last-child{
  margin-bottom:0!important;
}
.zee-direct-feature-row__kicker{
  margin-bottom:var(--zdfr-kicker-gap,12px)!important;
}
.zee-direct-feature-row__copy h2{
  margin-bottom:var(--zdfr-title-gap,16px)!important;
}
.zee-direct-faq__item summary{
  padding-top:var(--zdf-item-padding,22px)!important;
  padding-bottom:var(--zdf-item-padding,22px)!important;
}
.zee-direct-faq__answer{
  padding-bottom:var(--zdf-answer-bottom,24px)!important;
}
@media(max-width:959.98px){
  .zee-direct-feature-row,
  .zee-direct-feature-row.is-reverse{
    margin-bottom:min(var(--zdfr-row-gap,64px),56px)!important;
  }
}