/*
 * Sina UI Commerce — Shared Products Grid structure
 * -------------------------------------------------
 * Owns only the structural viewport/grid/card-slot relationship shared by
 * Frontend and Admin Preview. Card appearance and product data are owned by
 * their own modules.
 */
.suc-products-viewport{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:clip;
  box-sizing:border-box;
  contain:inline-size;
}
.suc-gen2-grid-viewport{
  width:min(100%,var(--suc-grid-canvas-width,1440px));
  max-width:100%;
  min-width:0;
  margin-inline:auto;
  overflow-x:auto;
  overflow-y:visible;
  box-sizing:border-box;
  scrollbar-gutter:auto;
  direction:rtl;
  padding:0;
  overscroll-behavior-inline:contain;
  /* Shadow breathing room. Negative inline impact is avoided; vertical-only
     padding keeps first/last row shadows visible in both Preview and Frontend. */
  padding-block:12px;
  margin-block:-12px;
}
.suc-gen2-grid-viewport[data-suc-overflow="0"]{overflow:visible;}
.suc-gen2-grid-viewport[data-suc-overflow="1"]{overflow-x:auto;overflow-y:hidden;}
.suc-gen2-grid{
  width:var(--suc-grid-required-width,100%);
  min-width:var(--suc-grid-required-width,100%);
  max-width:none;
  display:grid;
  grid-template-columns:repeat(var(--suc-grid-cols,5),var(--suc-grid-card-width,260px));
  /* Exact user-owned spacing. Never replace with space-between/space-around;
     spare Products Region width stays outside the grid canvas. */
  column-gap:var(--suc-grid-col-gap,24px);
  row-gap:var(--suc-grid-row-gap,24px);
  box-sizing:border-box;
  align-items:start;
  justify-content:center;
  margin-inline:auto;
  direction:rtl;
}
.suc-gen2-host{
  position:relative;
  width:var(--suc-grid-card-width,260px);
  min-width:var(--suc-grid-card-width,260px);
  max-width:var(--suc-grid-card-width,260px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  box-sizing:border-box;
  overflow:visible;
}
.suc-gen2-display{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex:0 0 auto;
  will-change:transform;
}
@media (max-width:767px){
  .suc-gen2-grid-viewport{scrollbar-gutter:auto}
}