/* Smell & Smile Natural A — Stage 8: Unified Layout Framework
   One canonical storefront frame for sections, images, cards and commerce content.
*/
.ss-unified-frame .page-container,
.ss-unified-frame .md\:page-container,
.ss-unified-frame .lg\:page-container{
  box-sizing:border-box;
}

/* Canonical wrapper used to repair legacy sections that historically escaped page-container. */
.ss-unified-frame .ss-stage8-frame{
  width:100%;
  max-width:var(--page-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--page-padding);
  padding-right:var(--page-padding);
  box-sizing:border-box;
}
.ss-unified-frame .ss-stage8-frame > *{
  max-width:100%;
  box-sizing:border-box;
}

/* Full-width legacy toggles are visually contained while Stage 8 framework is active. */
.ss-unified-frame .ss-stage8-frame .shop-image-container,
.ss-unified-frame .ss-stage8-frame .slideshow-container,
.ss-unified-frame .ss-stage8-frame .newsletter_banner_container,
.ss-unified-frame .ss-stage8-frame .classic-image-grid,
.ss-unified-frame .ss-stage8-frame .countdown-box{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* The collection hero may retain a merchant-defined narrower max width, but never escape the frame. */
.ss-unified-frame .ss-stage8-frame > .content-max-width{
  width:100%;
}

/* Legacy collection/product rails: keep both left and right visual edges inside the canonical frame. */
.ss-unified-frame .collection-roll-carousel-space,
.ss-unified-frame .product-roll-carousel-space{
  padding-left:var(--page-padding);
  padding-right:var(--page-padding);
  box-sizing:border-box;
}
.ss-unified-frame .collection-roll-carousel,
.ss-unified-frame .product-roll-carousel,
.ss-unified-frame .classic-feature-collection-list{
  max-width:100%;
}

/* Media may scale/crop inside its module but may not overflow the section frame. */
.ss-unified-frame .main-content spz-img,
.ss-unified-frame .main-content img,
.ss-unified-frame .main-content video{
  max-width:100%;
}

/* Standardise a few older commerce/page shells to the same box model. */
.ss-unified-frame .commerce-hub,
.ss-unified-frame .commerce-conversion-hub,
.ss-unified-frame .commerce-stage4-shell,
.ss-unified-frame .commerce-wishlist-page{
  box-sizing:border-box;
}

/* Editor-only alignment aid: enable under Theme Settings > Layout. */
.ss-frame-debug .main-content .page-container,
.ss-frame-debug .main-content .ss-stage8-frame,
.ss-frame-debug .main-content .commerce-hub,
.ss-frame-debug .main-content .commerce-conversion-hub,
.ss-frame-debug .main-content .commerce-stage4-shell{
  position:relative;
}
.ss-frame-debug .main-content .page-container::before,
.ss-frame-debug .main-content .ss-stage8-frame::before,
.ss-frame-debug .main-content .commerce-hub::before,
.ss-frame-debug .main-content .commerce-conversion-hub::before,
.ss-frame-debug .main-content .commerce-stage4-shell::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:999;
  top:0;bottom:0;
  left:var(--page-padding);right:var(--page-padding);
  border-left:1px dashed rgba(220,38,38,.40);
  border-right:1px dashed rgba(220,38,38,.40);
}

/* If merchants intentionally disable Stage 8 unified frame, legacy full-width controls work as before. */
body:not(.ss-unified-frame) .ss-stage8-frame{display:contents;}

@media(max-width:959.98px){
  .ss-unified-frame .collection-roll-carousel-space,
  .ss-unified-frame .product-roll-carousel-space{
    padding-left:var(--page-padding);
    padding-right:var(--page-padding);
  }
}