/* Theme-independent storefront options. Keep this file after the theme CSS. */
.shop-wrap[data-shop-decimal="."] {--shop-decimal:"."}
.shop-wrap[data-shop-show-sku="0"] [data-product-sku-row] {display:none}
.shop-wrap[data-shop-width="full"] {box-sizing:border-box;max-width:none;width:100%;margin-left:0;margin-right:0}
.shop-wrap[data-shop-width="contained"] {max-width:1240px;margin-left:auto;margin-right:auto}
.shop-wrap .shop-intro-title {margin:0 0 14px}
.shop-wrap .shop-head__subtitle {white-space:pre-line}
@media(min-width:821px) {
  .shop-wrap[data-shop-columns="2"] .shop-products--grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-wrap[data-shop-columns="3"] .shop-products--grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop-wrap[data-shop-columns="4"] .shop-products--grid {grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:521px) and (max-width:820px) {
  .shop-wrap[data-shop-columns] .shop-products--grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px) {
  .shop-wrap[data-shop-columns] .shop-products--grid {grid-template-columns:1fr}
}
.shop-wrap[data-shop-feature-single="1"] .shop-products--grid:has(> .card:only-child) {grid-template-columns:1fr}
/* The widened single card, in every theme (themes may style it further): image on
   the left and details on the right; below 821px a capped image above the details. */
@media(min-width:821px) {
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child {display:grid;grid-template-columns:minmax(240px,42%) 1fr}
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child .card__media {display:flex;align-items:center;justify-content:center;aspect-ratio:auto;min-height:360px;padding:32px}
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child .card__media img {width:auto;max-width:100%;max-height:340px;object-fit:contain}
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child .card__body {display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px}
}
@media(max-width:820px) {
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child .card__media {display:flex;align-items:center;justify-content:center;aspect-ratio:auto;height:300px;padding:20px}
  .shop-wrap[data-shop-feature-single="1"] .shop-products--grid > .card:only-child .card__media img {width:auto;max-width:100%;max-height:100%;object-fit:contain}
}
/* Fewer results than columns (2 or 3 cards in a 3 or 4 column grid): the cards share the whole row. */
@media(min-width:821px) {
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="3"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(3))),
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="4"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(4))) {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  /* The wider cards keep a regular image height (the square media would grow with them). */
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="3"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(3))) > .card .card__media,
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="4"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(4))) > .card .card__media {aspect-ratio:auto;height:340px}
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="3"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(3))) > .card .card__media img,
  .shop-wrap[data-shop-fill-row="1"][data-shop-columns="4"] .shop-products--grid:has(> .card:nth-child(2)):not(:has(> .card:nth-child(4))) > .card .card__media img {max-height:100%;width:auto;object-fit:contain}
}