/* LYA v17: carousel section fits its own frame; white/red-only controls. */
.site-shell .hero-carousel-section {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: clamp(24px, 4vw, 56px) clamp(12px, 4vw, 48px) clamp(30px, 5vw, 64px);
  display: grid;
  place-items: center;
  background: #ffffff !important;
  color: #b3132b !important;
  border-top: 1px solid #c51632;
  border-bottom: 1px solid #c51632;
}
.site-shell .hero-carousel-section .hero-carousel-heading { display: none !important; }
.site-shell .hero-carousel-section .hero-art {
  width: min(980px, 100%);
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.site-shell .hero-carousel-section .lya-carousel {
  width: 100%;
  max-width: 980px;
  height: clamp(520px, 68vh, 700px);
  min-height: 520px;
  margin: 0 auto;
  border: 1px solid #c51632;
  box-shadow: 0 16px 40px #b3132b24;
}
.site-shell .hero-carousel-section .lya-carousel-visual { min-height: 0; }
.site-shell .hero-carousel-section .lya-carousel-detail {
  color: #b3132b !important;
  background: #ffffff !important;
  border-top: 1px solid #c51632 !important;
  padding: clamp(18px, 3vw, 30px) clamp(18px, 4vw, 42px) clamp(22px, 3vw, 32px);
}
.site-shell .hero-carousel-section .lya-carousel-detail h3,
.site-shell .hero-carousel-section .lya-carousel-detail p {
  color: #b3132b !important;
}
.site-shell .hero-carousel-section .lya-carousel-detail p { opacity: 1 !important; }
/* Every carousel action stays readable on white. */
.site-shell .hero-carousel-section .carousel-checkout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px !important;
  color: #ffffff !important;
  background: #c51632 !important;
  border: 1px solid #c51632 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.site-shell .hero-carousel-section .carousel-checkout svg { stroke: #ffffff !important; }
.site-shell .hero-carousel-section .carousel-expand {
  min-height: 42px;
  margin-left: 10px !important;
  padding: 10px 16px !important;
  color: #c51632 !important;
  background: #ffffff !important;
  border: 1px solid #c51632 !important;
  opacity: 1 !important;
}
.site-shell .hero-carousel-section .carousel-arrow {
  width: 44px !important;
  height: 44px !important;
  color: #ffffff !important;
  background: #c51632 !important;
  border: 1px solid #ffffff !important;
  opacity: 1 !important;
}
.site-shell .hero-carousel-section .carousel-arrow svg { stroke: #ffffff !important; }
.site-shell .hero-carousel-section .carousel-dots button {
  width: 32px !important;
  height: 7px !important;
  min-width: 32px !important;
  padding: 0 !important;
  color: #c51632 !important;
  background: #ffffff !important;
  border: 1px solid #c51632 !important;
  opacity: 1 !important;
}
.site-shell .hero-carousel-section .carousel-dots button.is-active { background: #c51632 !important; }
/* Red, visible X controls for all storefront image/dialog close actions. */
.site-shell .lightbox-close,
.site-shell .lya-carousel-lightbox-close {
  z-index: 20 !important;
  width: 44px !important;
  height: 44px !important;
  color: #c51632 !important;
  background: #ffffff !important;
  border: 2px solid #c51632 !important;
  opacity: 1 !important;
}
.site-shell .lightbox-close svg { stroke: #c51632 !important; }
.site-shell .lya-carousel-lightbox-close { color: #c51632 !important; background: #ffffff !important; border-color: #c51632 !important; }
.site-shell .lya-carousel-lightbox-prev,
.site-shell .lya-carousel-lightbox-next {
  color: #ffffff !important;
  background: #c51632 !important;
  border: 1px solid #ffffff !important;
  opacity: 1 !important;
}
@media (max-width: 850px) {
  .site-shell .hero-carousel-section { padding: 20px 10px 32px; }
  .site-shell .hero-carousel-section .lya-carousel {
    height: min(700px, calc(100svh - 120px));
    min-height: 500px;
  }
}
@media (max-width: 520px) {
  .site-shell .hero-carousel-section { padding: 16px 8px 26px; }
  .site-shell .hero-carousel-section .lya-carousel {
    height: min(680px, calc(100svh - 96px));
    min-height: 500px;
  }
  .site-shell .hero-carousel-section .lya-carousel-detail { padding: 16px 16px 22px; }
  .site-shell .hero-carousel-section .carousel-checkout,
  .site-shell .hero-carousel-section .carousel-expand { min-height: 40px; padding: 9px 12px !important; }
  .site-shell .hero-carousel-section .carousel-arrow { width: 40px !important; height: 40px !important; }
}