@import url("../../../layout1/front/css/layout-bem.css");

/* =====================================================
   LAYOUT2: CLASSIC SHOP - BEM COMPONENT OVERRIDES
   Structure only - User colors preserved
   ===================================================== */

/* Hero/Slider z-index fix - ensure not covered by other elements */
.hero,
.saf_hero_wrapper,
.saf_banner_wrapper {
  position: relative;
  z-index: 10;
  overflow: visible;
  display: block;
  width: 100%;
}

.hero .swiper-container,
.saf_hero_slider,
.saf_banner_slider {
  z-index: 1;
  overflow: hidden;
  display: block;
  width: 100%;
  position: relative;
}

/* Ensure slides are visible */
.hero__slide,
.saf_hero_slide {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure swiper-container has position relative for absolute children */
.hero__slider,
.saf_hero_slider,
#home-hero-swiper {
  position: relative !important;
}

/* Hero slider arrows - squared style for Layout2 */
/* Arrows are children of .hero__slider, not .hero */
.hero__slider .hero__next,
.hero__slider .hero__prev,
.saf_hero_slider .hero__next,
.saf_hero_slider .hero__prev,
#home-hero-swiper .hero__next,
#home-hero-swiper .hero__prev {
  width: 50px !important;
  height: 50px !important;
  border-radius: 8px !important;
  opacity: 0.9 !important;
}

.hero__slider .hero__next:hover,
.hero__slider .hero__prev:hover,
.saf_hero_slider .hero__next:hover,
.saf_hero_slider .hero__prev:hover,
#home-hero-swiper .hero__next:hover,
#home-hero-swiper .hero__prev:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.hero__slider .hero__prev,
.saf_hero_slider .hero__prev,
#home-hero-swiper .hero__prev {
  left: 20px !important;
}

.hero__slider .hero__next,
.saf_hero_slider .hero__next,
#home-hero-swiper .hero__next {
  right: 20px !important;
}

/* Hero pagination dots */
.hero__slider .hero__pagination .swiper-pagination-bullet,
.hero__slider .swiper-pagination .swiper-pagination-bullet,
.saf_hero_slider .hero__pagination .swiper-pagination-bullet,
.saf_hero_slider .swiper-pagination .swiper-pagination-bullet,
#home-hero-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.hero__slider .hero__pagination .swiper-pagination-bullet-active,
.hero__slider .swiper-pagination .swiper-pagination-bullet-active,
.saf_hero_slider .hero__pagination .swiper-pagination-bullet-active,
.saf_hero_slider .swiper-pagination .swiper-pagination-bullet-active,
#home-hero-swiper .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 6px;
  opacity: 1;
}

/* Cards */
.layout-page .card {
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Section spacing */
.layout-page__section {
  padding: 60px 0;
}

/* Product grid */
.layout-page .product-grid {
  gap: 24px;
}