/* The merchant's default density remains stable when a category has few items.
   Loaded after all storefront themes, including Original. The visitor can still
   select the existing compact view; list layout deliberately remains one row. */
.store-page { --catalog-owner-columns: 3; --catalog-mobile-columns: 1; }
.store-page.columns-2 { --catalog-owner-columns: 2; }
.store-page.columns-3 { --catalog-owner-columns: 3; }
.store-page.columns-4 { --catalog-owner-columns: 4; }
.store-page.product-mobile-columns-2 { --catalog-mobile-columns: 2; }
.store-page[class]:not(.catalog-layout-list) .shop-grid.sdisplay-grid {
  grid-template-columns: repeat(var(--catalog-owner-columns),minmax(0,1fr));
  justify-content: stretch;
  align-items: stretch;
}
.store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
.store-page[class]:not(.catalog-layout-list) .shop-grid.sdisplay-grid > .sdisplay-card:not([hidden]),
.store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact > .sdisplay-card:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.store-page[class]:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .shop-card-media { min-height: 0; display: block; }
.store-page[class]:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .shop-card-media > img { max-height: none; aspect-ratio: var(--product-ratio,1); }
.store-page[class]:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .sdisplay-card h3,
.store-page.columns-4 .sdisplay-card h3 { font-size: clamp(17px,1.65vw,23px); line-height: 1.55; }
.store-page[class]:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .sdisplay-card > div:not(.shop-card-media) { padding: 20px; }
.store-page[class].cards-clean:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .sdisplay-card > div:not(.shop-card-media),
.store-page[class].storefront-style-atelier:not(.catalog-layout-list) .sdisplay-grid[data-visible-count='1'] .sdisplay-card > div:not(.shop-card-media) { padding-inline: 0; }
.store-page[class] .shop-grid.sdisplay-grid > [hidden] { display: none !important; }

/* Modern storefronts keep the same tile when filtering down to one result.
   The earlier display sheet's 900px feature treatment must not leak through. */
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier):not(.catalog-layout-list) .shop-grid.sdisplay-grid { align-items: start; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid > .sdisplay-card:not([hidden]) { background: var(--paper); border: 1px solid var(--studio-line); align-items: stretch; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).cards-clean .shop-grid.sdisplay-grid > .sdisplay-card:not([hidden]),
.store-page[class].storefront-style-atelier .shop-grid.sdisplay-grid > .sdisplay-card:not([hidden]) { background: transparent; border: 0; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).cards-elevated .shop-grid.sdisplay-grid > .sdisplay-card:not([hidden]) { border-color: transparent; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media) { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 18px; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).cards-clean .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media),
.store-page[class].storefront-style-atelier:not(.cards-elevated) .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media) { padding: 16px 0 0; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid .sdisplay-card h3 { font-size: clamp(18px,1.6vw,22px); line-height: 1.55; margin-block: 6px 8px; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid .sdisplay-card footer { margin-block: 4px 0; padding-top: 14px; gap: 12px; flex-wrap: wrap; }
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid .sdisplay-card footer [data-product-price] { font-size: 16px; }
/* A genuinely one-product catalog is centered, at the selected density's width.
   Filtering a larger catalog never triggers this reflow. Grid columns stay intact. */
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier):not(.catalog-layout-list) .shop-grid.sdisplay-grid > .sdisplay-card:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(420px,calc((100% - (var(--catalog-owner-columns) - 1) * 22px) / var(--catalog-owner-columns)));
}
.store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact > .sdisplay-card:only-child { grid-column: 1 / -1; justify-self: center; width: min(420px,calc((100% - 54px) / 4)); }
@media (max-width:1050px) and (min-width:641px) {
  .store-page[class]:not(.catalog-layout-list) .shop-grid.sdisplay-grid,
  .store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier):not(.catalog-layout-list) .shop-grid.sdisplay-grid > .sdisplay-card:only-child,
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact > .sdisplay-card:only-child { width: min(420px,calc((100% - 22px) / 2)); }
}
@media (max-width:640px) {
  .store-page[class]:not(.catalog-layout-list) .shop-grid.sdisplay-grid { grid-template-columns: repeat(var(--catalog-mobile-columns),minmax(0,1fr)); gap: 24px 12px; }
  .store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card > div:not(.shop-card-media),
  .store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card > div:not(.shop-card-media) { padding: 13px 11px; }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card h3,
  .store-page[class] .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card h3 { font-size: 16px; line-height: 1.6; }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card > div > p { font-size: 14px; line-height: 1.8; }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card footer { gap: 8px; margin-top: 12px; padding-top: 12px; flex-wrap: wrap; }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card footer :is(b,[data-product-price]) { font-size: 13px; }
  .store-page[class].product-mobile-columns-2:not(.catalog-layout-list) .sdisplay-card footer button { min-width: 44px; min-height: 44px; }
  .store-page[class].product-mobile-columns-2.cards-clean:not(.catalog-layout-list) .sdisplay-card > div:not(.shop-card-media),
  .store-page[class].product-mobile-columns-2.storefront-style-atelier:not(.catalog-layout-list) .sdisplay-card > div:not(.shop-card-media) { padding-inline: 0; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier):not(.catalog-layout-list) .shop-grid.sdisplay-grid > .sdisplay-card:only-child { width: min(420px,calc((100% - (var(--catalog-mobile-columns) - 1) * 12px) / var(--catalog-mobile-columns))); }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact > .sdisplay-card:only-child { width: calc((100% - 12px) / 2); }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media),
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card > div:not(.shop-card-media) { padding: 13px 11px; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2.cards-clean .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media),
  .store-page[class].storefront-style-atelier.product-mobile-columns-2:not(.cards-elevated) .shop-grid.sdisplay-grid .sdisplay-card > div:not(.shop-card-media) { padding-inline: 0; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .shop-grid.sdisplay-grid .sdisplay-card h3,
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card h3 { font-size: 16px; line-height: 1.6; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .shop-grid.sdisplay-grid .sdisplay-card footer,
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card footer { gap: 8px; padding-top: 12px; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .shop-grid.sdisplay-grid .sdisplay-card footer [data-product-price],
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .shop-grid.sdisplay-grid.sdisplay-compact .sdisplay-card footer [data-product-price] { font-size: 13px; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .studio-product-add-label,
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .sdisplay-compact .studio-product-add-label { display: none; }
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier).product-mobile-columns-2 .shop-card footer button.studio-product-add,
  .store-page[class]:is(.storefront-style-studio,.storefront-style-atelier) .sdisplay-compact .shop-card footer button.studio-product-add { width: 44px; padding: 10px; gap: 0; }
}