/*
 * Sina UI Commerce — Shop Layout isolation
 *
 * This module owns ONLY the page-level relationship between the filter column
 * and the products column. Card/Grid internals remain owned by their engines.
 */
:root{
  --suc-fixed-header-offset:0px;
  --suc-sticky-header-offset:0px;
  --suc-shop-gap:24px;
  --suc-shop-filter-width:260px;
  --suc-shop-max-width:1724px;
  --suc-shop-sticky-gap:12px;
}

.suc-gen2-stage{
  --suc-stage-base-top:16px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow-x:clip;
  /* The site header already owns its document-flow height. Do not add the
     measured fixed-header height again here; that produced the large blank
     band between the header and Shop. Header measurement remains available
     only for sticky/occlusion behavior. */
  padding-top:var(--suc-stage-base-top)!important;
}

.suc-shop-layout{
  width:min(100%,var(--suc-shop-max-width));
  max-width:100%;
  min-width:0;
  margin-inline:auto;
  display:grid;
  grid-template-columns:var(--suc-shop-filter-width) minmax(0,1fr);
  align-items:start;
  gap:var(--suc-shop-gap);
  box-sizing:border-box;
  direction:rtl;
  isolation:isolate;
}
.suc-shop-layout.is-filter-disabled{grid-template-columns:minmax(0,1fr)}
.suc-shop-layout.is-filter-disabled .suc-shop-filter-region{display:none!important}

.suc-shop-filter-region{
  grid-column:1;
  margin:var(--suc-filter-card-offset,94px) 0 0!important;
  padding:0!important;
  width:var(--suc-shop-filter-width);
  min-width:0;
  max-width:100%;
  align-self:start;
  box-sizing:border-box;
  position:relative;
  z-index:20;
}

.suc-products-region{
  grid-column:2;
  margin:0!important;
  padding:0!important;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:clip;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
  box-sizing:border-box;
}
.suc-shop-layout.is-filter-disabled .suc-products-region{grid-column:1}

/* Products viewport/grid structure is owned by products-grid.css. */

/* Product-region children align to the real product canvas. Toolbar width is
 * the exact width of cards + gaps, never the wider Products Region shell. */
.suc-products-region>[data-suc-toolbar]{
  width:min(100%,var(--suc-grid-required-width,100%));
  max-width:100%;min-width:0;box-sizing:border-box;align-self:flex-start;
}
.suc-products-region>.suc-active-filters,
.suc-products-region>[data-suc-product-display]{
  width:min(100%,var(--suc-grid-required-width,100%));
  max-width:100%;min-width:0;box-sizing:border-box;align-self:flex-start;
}

/* Sticky filters always sit below any actually occupied sticky/fixed site header.
 * The sticky shell itself never owns a native scrollbar. Native scrolling lives
 * inside the dedicated inner body, while the rounded frame clips the surface.
 * This prevents browser scrollbar-corner/resizer artifacts outside the card. */
.suc-shop-filter-region .suc-filter-shell.is-sticky{
  top:var(--suc-filter-sticky-top,0px)!important;
  max-height:none;
  overflow:visible;
}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame{
  max-height:calc(100vh - var(--suc-sticky-header-offset) - var(--suc-shop-sticky-gap) - 12px);
  overflow:hidden;
}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--suc-filter-accent,#E889A6) 18%,transparent) transparent;
}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body::-webkit-scrollbar{width:4px;height:0}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body::-webkit-scrollbar:horizontal{height:0}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body::-webkit-scrollbar-track{background:transparent}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--suc-filter-accent,#E889A6) 18%,transparent);border-radius:999px}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--suc-filter-accent,#E889A6) 34%,transparent)}
.suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body::-webkit-scrollbar-corner{background:transparent}


@media (max-width:1024px){
  .suc-gen2-stage{--suc-stage-base-top:14px}
  .suc-shop-layout{--suc-shop-gap:16px}
}

@media (max-width:767px){
  .suc-gen2-stage{--suc-stage-base-top:10px}
  .suc-shop-layout,
  .suc-shop-layout.is-filter-disabled{
    display:block;
    width:min(100%,var(--suc-shop-max-width));
    max-width:var(--suc-shop-max-width);
    margin-inline:auto;
  }
  .suc-shop-filter-region{
    margin:0!important;
    width:0;
    height:0;
    min-width:0;
    max-width:0;
    overflow:visible;
    position:static;
  }
  .suc-products-region,
  .suc-shop-layout.is-filter-disabled .suc-products-region{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-column:auto;
  }
  .suc-shop-filter-region .suc-filter-shell.is-sticky{
    max-height:none;
    overflow:visible;
  }
  .suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame{
    max-height:none;
    overflow:hidden;
  }
  .suc-shop-filter-region .suc-filter-shell.is-sticky>.suc-filter-frame>.suc-filter-scroll-body{
    overflow:visible;
  }
}