/* Catalog presentation: uploaded photography and generated demo artwork share a stage. */
.storefront .campaign-slider {
  border-radius: 24px;
  box-shadow: 0 20px 48px #153c2a16;
  isolation: isolate;
}
.storefront .campaign-copy > .eyebrow {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid #ffffff30;
  border-radius: 30px;
  background: #ffffff0e;
  backdrop-filter: blur(8px);
}
.storefront .campaign-copy .button {
  border-radius: 12px;
  box-shadow: 0 6px 22px #001e2726;
  transition: transform .2s, box-shadow .2s;
}
.storefront .campaign-copy .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px #001e273d;
}
.storefront .category-shortcuts { padding-block: 8px 18px; }
.storefront .category-grid { gap: 24px; }
.storefront .category-tile { flex-basis: 115px; gap: 13px; font-size: 12px; }
.storefront .category-art {
  width: 102px;
  height: 102px;
  border-radius: 27px;
  background: linear-gradient(145deg, #fff, #edf5f1);
  box-shadow: 0 5px 16px #163f2b08;
  border-color: #dbe9e2;
}
.storefront .category-art img { width: 92%; height: 92%; padding: 9px; }
.storefront .category-art .icon { color: #117d5d; }
.storefront .category-tile:hover .category-art {
  transform: translateY(-5px) rotate(-2deg);
  box-shadow: 0 12px 25px #163f2b14;
}
.storefront .catalog-shelf { border-radius: 20px; padding: 24px; box-shadow: 0 8px 30px #183b2305; }
.storefront .catalog-shelf .section-heading h2::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  margin-inline-end: 10px;
  border-radius: 5px;
  background: var(--primary);
  vertical-align: -3px;
}
.storefront .product-grid { gap: 14px; }
.storefront .product-card,
.storefront .catalog-shelf .product-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 3px 12px #183b2304;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.storefront .catalog-shelf .product-card:last-child { border-left: 1px solid var(--border); }
.storefront .product-card:hover,
.storefront .product-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px #183b2312;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}
.storefront .product-media,
.storefront[data-mode=light] .product-media {
  background: radial-gradient(ellipse at 50% 80%, #d9ece380, transparent 67%), #f5f8f6;
  height: 205px;
  min-height: 205px;
  border-radius: 12px;
  overflow: hidden;
}
.storefront .generated-product-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 10px 9px #183b2326);
  transition: transform .3s;
}
.storefront .product-media:hover .generated-product-art { transform: translateY(-4px) scale(1.035); }
.storefront .product-card h3 { font-size: 13px; line-height: 1.9; min-height: 48px; }
.storefront .product-card > small { font-size: 10px; }
.storefront .product-card > p { font-size: 11px; line-height: 1.9; }

.storefront .card-bottom .icon-button { color: var(--primary-deep); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); border: 0; }
.storefront .offer-shelf {
  background: radial-gradient(ellipse at top right, #ffffff16, transparent 60%), var(--primary-deep);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 30px #117d5d16;
}
.storefront .offer-products { gap: 10px; border-radius: 0; overflow: auto; padding-bottom: 4px; }
.storefront .offer-products .product-card { border-radius: 14px; }
.storefront .offer-products .product-card:hover { transform: none; }
.storefront .campaign-tile { border-radius: 20px; transition: transform .25s, filter .25s; }
.storefront .campaign-tile:hover { transform: translateY(-3px); }
.storefront .product-image { background: radial-gradient(ellipse at 50% 70%, #e6f1ea, transparent 70%), #fff; }
.storefront .product-image .generated-product-art { height: 430px; max-height: 430px; padding: 35px; }
.storefront .purchase-panel { border-radius: 18px; box-shadow: 0 8px 24px #183b2308; }
.storefront .store-benefits { border-radius: 18px; }
@media (max-width: 1100px) {
  .storefront .product-media { height: 180px; min-height: 180px; }
  .storefront .category-grid { gap: 18px; }
}
@media (max-width: 550px) {
  .storefront .campaign-slider { border-radius: 17px; }
  .storefront .campaign-copy > .eyebrow { padding: 4px 9px; }
  .storefront .category-grid { gap: 12px; }
  .storefront .category-tile { flex-basis: 82px; gap: 10px; font-size: 10px; }
  .storefront .category-art { width: 76px; height: 76px; border-radius: 21px; }
  .storefront .category-art img { padding: 5px; }
  .storefront .catalog-shelf { padding: 16px 12px; border-radius: 17px; }
  .storefront .product-grid { gap: 9px; }
  .storefront .product-card,
  .storefront .catalog-shelf .product-card { padding: 10px; border-radius: 12px; }
  .storefront .product-media,
  .storefront .catalog-results .product-media { height: 145px; min-height: 145px; }
  .storefront .generated-product-art { padding: 8px; }
  .storefront .product-card h3 { font-size: 11px; min-height: 42px; }
  .storefront .product-card > p { font-size: 10px; }
  .storefront .product-card > small { font-size: 9px; }
  .storefront .offer-shelf { padding: 12px; gap: 10px; border-radius: 17px; }
  .storefront .offer-products { gap: 8px; }
  .storefront .campaign-tile { border-radius: 17px; }
  .storefront .product-image .generated-product-art { height: 270px; max-height: 270px; padding: 24px; }
}
@media (max-width: 380px) {
  .storefront .product-media,
  .storefront .catalog-results .product-media { height: 122px; min-height: 122px; }
}
@media (prefers-reduced-motion: reduce) {
  .storefront :is(.product-card,.generated-product-art,.campaign-tile,.category-art,.campaign-copy .button) { transition: none; }
  .storefront :is(.product-card,.product-media,.campaign-tile,.category-tile,.campaign-copy .button):hover,
  .storefront .product-card:focus-within,
  .storefront .product-media:hover .generated-product-art,
  .storefront .category-tile:hover .category-art { transform: none; }
}