/* Homepage product imagery. The store's existing type and colors stay in styles.css. */
.store-hero-visual {
  height: 350px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
  gap: 12px;
  padding: 14px;
  border-radius: 28px;
  background: #f7f6fb;
}
.store-hero-main,
.store-hero-mini {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.store-hero-main { padding: 12px; }
.store-hero-mini-stack {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.store-hero-mini { padding: 8px; }
.store-hero-photo {
  width: 100%;
  min-height: 0;
  flex: 1;
  background: #fff;
}
.store-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 14px;
}
.store-hero-mini .store-hero-photo img { padding: 12px; }
.store-hero-main strong,
.store-hero-mini strong {
  display: block;
  line-height: 1.25;
  color: var(--blue-ink);
}
.store-hero-main strong { padding: 4px 4px 2px; font-size: 17px; }
.store-hero-mini strong { padding: 0 4px 2px; font-size: 12px; }

.hero-categories { padding: 6px 0 38px; scroll-margin-top: 120px; }
.hero-category-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.hero-category-tile {
  min-width: 0;
  min-height: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 11px 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--blue-ink);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.hero-category-tile:hover,
.hero-category-tile:focus-visible { border-color: var(--orange); }
.hero-category-photo {
  display: block;
  width: 106px;
  height: 106px;
  max-width: 100%;
  flex: none;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.hero-category-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 12px;
}
.product-view .hero-carousel,
.product-view .hero-categories { display: none; }

@media (max-width: 1000px) {
  .hero-carousel .hero-slide { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hero-category-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-category-tile { min-height: 148px; }
}
@media (max-width: 700px) {
  .hero-carousel .hero-slide { display: block; }
  .store-hero-visual { height: 288px; margin-top: 25px; gap: 8px; padding: 10px; }
  .store-hero-main { padding: 8px; }
  .store-hero-mini-stack { gap: 8px; }
  .store-hero-mini { padding: 6px; }
  .store-hero-main strong { font-size: 14px; }
  .store-hero-mini strong { font-size: 11px; }
  .store-hero-photo img { padding: 12px; }
  .store-hero-mini .store-hero-photo img { padding: 12px; }
  .hero-categories { padding-top: 4px; padding-bottom: 27px; }
  .hero-category-row {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }
  .hero-category-tile { flex: 0 0 122px; min-height: 150px; scroll-snap-align: start; }
}
@media (max-width: 360px) {
  .store-hero-visual { height: 254px; }
  .store-hero-main strong { font-size: 13px; }
  .store-hero-mini strong { font-size: 10px; }
}

/* Keep the existing hero geometry while containing each product photo. */
.store-hero-photo,.hero-category-photo{overflow:hidden;background:#fff}
.store-hero-photo img,.store-hero-mini .store-hero-photo img{width:100%;height:100%;object-fit:contain;object-position:center;padding:8%;transform:none}
.hero-category-photo{aspect-ratio:1 / 1;height:auto;padding:10%}
.hero-category-photo img{width:100%;height:100%;padding:0;object-fit:contain;object-position:center;transform:none}