/* Homepage hero carousel – desktop banners 21:9, mobile banners 1:1 */
.snx-hero { width: 100%; max-width: 100%; margin: 0; }
.snx-hero__viewport { position: relative; overflow: hidden; border-radius: 0; background: #eef1f3; }
.snx-hero__track { position: relative; width: 100%; aspect-ratio: 21 / 9; }
.snx-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.snx-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.snx-hero__slide a, .snx-hero__slide picture { display: block; width: 100%; height: 100%; }
.snx-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.snx-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #17232d; background: rgba(255,255,255,.92); box-shadow: 0 4px 16px rgba(0,0,0,.18); opacity: 0; transition: opacity .2s, background .2s; padding: 0; }
.snx-hero__nav:hover { background: #fff; }
.snx-hero__nav--prev { left: 16px; }
.snx-hero__nav--next { right: 16px; }
.snx-hero__viewport:hover .snx-hero__nav, .snx-hero__nav:focus-visible { opacity: 1; }

.snx-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.snx-hero__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.65); box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; transition: width .25s, background .25s; }
.snx-hero__dots button.is-active { width: 26px; background: #fff; }

/* Tablet: same 90% width */
@media (max-width: 1024px) { .snx-hero__nav { opacity: 1; width: 38px; height: 38px; } }

/* Mobile: 1:1 banners, 100% width with 10px side padding */
@media (max-width: 767px) {
  .snx-hero { width: 100%; max-width: 100%; margin: 10px 0 0; padding: 0 10px; box-sizing: border-box; }
  .snx-hero__viewport { border-radius: 10px; }
  .snx-hero__track { aspect-ratio: 1 / 1; }
  .snx-hero__nav { width: 34px; height: 34px; }
  .snx-hero__nav--prev { left: 8px; } .snx-hero__nav--next { right: 8px; }
  .snx-hero__dots { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .snx-hero__slide { transition: none; } }

/* When the image carousel is the hero, the text intro below it becomes a single, image-less block */
.sn-home-hero--text .sn-hero-grid { grid-template-columns: 1fr; }
.sn-home-hero--text .sn-hero-art { display: none; }
.sn-home-hero--text .sn-hero-copy { padding: 8px 0 4px; max-width: 760px; }
.sn-home-hero--text .sn-hero-copy h1 { max-width: none; font-size: clamp(30px, 3.4vw, 46px); margin: 14px 0; }
.sn-home-hero--text { padding: 28px 0 30px; }

/* Category cards: keep the product image inside its box (it was overflowing below the card) */
.sn-category-card { overflow: hidden; }
.sn-category-card .sn-category-image { position: relative; overflow: hidden; display: block; height: 150px; margin: 6px 6px 16px; }
.sn-category-card .sn-category-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.sn-category-card .sn-category-image > svg { position: absolute; inset: 0; margin: auto; }
@media (max-width: 1024px) { .sn-category-card .sn-category-image { height: 120px; } }
@media (max-width: 767px) { .sn-category-card .sn-category-image { height: 110px; } }