/*
 * Slider utama & carousel produk (Swiper). Berlaku untuk semua tema warna.
 * Ruang Mart
 */
.hero-slider { width: 100%; border-radius: 4px; overflow: hidden; --swiper-theme-color: #fff; --swiper-navigation-size: 26px; }
.hero-slider .swiper-slide { position: relative; }
.hero-slider .swiper-slide > img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.hero-caption {
  position: absolute; left: 0; bottom: 0; max-width: 55%; padding: 18px 24px;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.hero-caption h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.hero-caption div { font-size: 13px; line-height: 1.5; }
.hero-caption div p { margin: 0 0 8px; color: #eee; }
.hero-button { display: inline-block; margin-top: 8px; padding: 6px 14px; background: #fff; color: #222 !important; font-size: 12px; text-decoration: none; text-transform: uppercase; }
@media (max-width: 640px) {
  .hero-caption { position: static; max-width: 100%; padding: 10px 14px; }
  .hero-caption h2 { font-size: 16px; }
  .hero-caption div { display: none; }
}

.product-slider { position: relative; padding: 0 4px 6px; --swiper-theme-color: #555; --swiper-navigation-size: 18px; }
.product-slider ul.swiper-wrapper { margin: 0; padding: 0; list-style: none; float: none; width: 100%; }
.product-slider .swiper-slide { height: auto; float: none; margin-left: 0; margin-right: 0; list-style: none; }
.product-slider .swiper-slide img { max-width: 100%; height: auto; }
.product-slider .swiper-button-prev, .product-slider .swiper-button-next {
  top: -34px; width: 24px; height: 24px; margin: 0; background: #eee; border: 1px solid #ddd;
}
.product-slider .swiper-button-prev { left: auto; right: 34px; }
.product-slider .swiper-button-next { right: 4px; }
.product-slider .swiper-button-prev::after, .product-slider .swiper-button-next::after { font-size: 11px; font-weight: bold; }

.share-links { margin: 10px 0; font-size: 12px; }
.share-links a { display: inline-block; margin-left: 6px; padding: 3px 10px; border: 1px solid #ddd; border-radius: 3px; color: #444; text-decoration: none; }
.share-links a:hover { background: #f1f1f1; }
.hero-caption, .hero-caption p, .hero-caption div, .hero-caption h2 { color: #fff !important; }