/* ==========================================================================
   Marji V4 — third-round refinements:
   1.  Minimize header search box (image 1)
   2.  Counter UNDER hero text on the slide (image 2)
   3.  Products section: 2 equal columns, wishlist top-right, arrows CENTERED
       on the active product card (image 3)
   4.  Promo slider — dots only, NO prev/next arrows (image 4)
   5.  Banks: remove the per-tile borders, simple row on white bg (image 5)
   6.  Footer copyright CENTER, enlarge payment icons (image 6)
   7.  Feature icons replaced with the supplied Container PNGs (image 7)
   Loaded AFTER style-v3.css.
   ========================================================================== */

/* --- 1. Search box (image 1) — slimmer, lower-profile --- */
.search input {
  padding:13px 56px 13px 22px;
  font-size:14px;
  background:#F4F4F4;
}
.search input::placeholder { color:#9a9a9a; font-weight:400; }
.search-btn {
  width:38px; height:38px;
  right:8px; left:auto;
  font-size:15px;
}

/* --- 2. Counter UNDER the hero text (image 2) --- */
.hero-slider .hero-counter-top { display:none !important; }

.hero-slide-text .hero-counter-inline {
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,0.06);
  max-width:680px;
}
.hero-slide-text .hero-counter-inline .counter-row {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.hero-slide-text .hero-counter-inline .counter-item { text-align:center; padding:8px 6px 4px; }
.hero-slide-text .hero-counter-inline .counter-num {
  font-size:34px; font-weight:700; color:#1A1A1A; line-height:1; letter-spacing:-0.3px;
}
.hero-slide-text .hero-counter-inline .counter-label {
  font-size:11px; color:#666; letter-spacing:1.2px;
  text-transform:uppercase; font-weight:500; margin-top:8px;
}
.hero-slide-text .hero-counter-inline .counter-dash {
  width:32px; height:3px; background:var(--color-primary);
  margin:12px auto 0; border-radius:2px;
}

/* --- 3. Products section per image 3 — 2 equal columns + center arrows --- */
.products-slider .products-shell { padding:0; }
.products-slider .products-swiper { padding:30px 0 60px; overflow:visible; }

/* Reset the V3 grid — make it 1:1 with the IMAGE on the right */
.product-card-v3 {
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:36px;
  align-items:stretch;
  min-height:520px;
}
.product-card-v3 .pv3-info {
  padding-right:34px;
  border-right:1px solid #f0f0f0;
}
.product-card-v3 .pv3-info .pv3-wishlist {
  top:0; right:0;
  background:#F4F4F4;
}
.product-card-v3 .pv3-media {
  padding:0 0 0 30px;
  position:relative;
}
.product-card-v3 .pv3-media .pv3-image-pagination {
  bottom:8px;
}

/* Arrows: centered over the ACTIVE slide (the focused card) — vertically centered on the product image, half on each side */
.products-slider .swiper-button-prev,
.products-slider .swiper-button-next {
  width:50px; height:50px;
  background:var(--color-primary); color:#fff;
  top:50%; transform:translateY(-50%);
  box-shadow:0 6px 18px rgba(242,106,40,0.35);
  z-index:20;
  margin-top:0;
}
/* Place arrows over the active card edges */
.products-slider .swiper-button-prev { left:calc(50% - 320px); right:auto; }
.products-slider .swiper-button-next { right:calc(50% - 320px); left:auto; }
.products-slider .swiper-button-prev:after,
.products-slider .swiper-button-next:after { font-size:16px; font-weight:900; }

/* hide pagination dots on products carousel — image 3 doesn't show them */
.products-slider > .container ~ .products-shell .swiper-pagination,
.products-slider .products-shell .swiper-pagination { display:none; }

/* Stronger blur on side cards */
.products-slider .swiper-slide { filter:blur(4px); opacity:.35; }
.products-slider .swiper-slide-active { filter:blur(0); opacity:1; }
.products-slider .swiper-slide-prev,
.products-slider .swiper-slide-next { filter:blur(2px); opacity:.55; }

/* --- 4. Promo slider — no arrows, dots only (image 4) --- */
.promo-slider .swiper-button-prev,
.promo-slider .swiper-button-next { display:none !important; }
.promo-slider .swiper-pagination { bottom:20px; }
.promo-slider .swiper-pagination-bullet {
  width:11px; height:11px; background:#888; opacity:1;
  border:1px solid #fff;
}
.promo-slider .swiper-pagination-bullet-active { background:#fff; }

/* --- 5. Banks: remove the per-tile borders (image 5) --- */
.banks-v3, .banks-v2 { background:#ffffff; padding:60px 0 70px; }
.banks-v3 .banks-track img, .banks-v2 .banks-track img {
  background:transparent;
  border:none;
  padding:0;
  width:auto; height:60px;
  box-sizing:content-box;
  margin:0 24px;
}
.banks-v3 .banks-track, .banks-v2 .banks-track { gap:60px; }

/* --- 6. Footer: copyright centered + enlarge payment icons (image 6) --- */
.site-footer .footer-bottom {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:14px;
}
.site-footer .footer-bottom > div:first-child {
  text-align:center;
  grid-column:1 / -1;
  order:1;
}
.site-footer .footer-bottom .pay-icons {
  display:none;
}
.site-footer .footer-bottom-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0 22px;
  gap:12px; flex-wrap:wrap;
}
.site-footer .footer-bottom-row .copyright {
  flex:1; text-align:center; font-size:13px; color:#bdbdbd;
}
.site-footer .footer-bottom-row .copyright .es { color:var(--color-primary); font-weight:700; }
.site-footer .footer-bottom-row .pay-icons-v4 {
  display:inline-flex; gap:18px; align-items:center;
}
.site-footer .footer-bottom-row .pay-icons-v4 i { font-size:44px; color:#dcdcdc; line-height:1; }
.site-footer .footer-bottom-row .pay-icons-v4 i:hover { color:#fff; }

/* --- 7. Feature icons (image 7) — use Container PNGs --- */
.features-v3 .feature-item .feat-icon {
  background:transparent;
  border:none;
  padding:0;
  overflow:hidden;
}
.features-v3 .feature-item .feat-icon img {
  width:74px; height:74px; display:block; object-fit:contain;
}
.features-v3 .feature-item .feat-icon i { display:none; }

/* --- Responsive V4 --- */
@media (max-width: 1199px) {
  .products-slider .swiper-button-prev { left:calc(50% - 280px); }
  .products-slider .swiper-button-next { right:calc(50% - 280px); }
}
@media (max-width: 991px) {
  .product-card-v3 { padding:24px; min-height:auto; grid-template-columns:1fr 1fr; }
  .product-card-v3 .pv3-info { padding-right:16px; border-right:none; }
  .product-card-v3 .pv3-media { padding:0 0 0 16px; }
  .products-slider .swiper-button-prev { left:6px; }
  .products-slider .swiper-button-next { right:6px; }
  .hero-slide-text .hero-counter-inline .counter-num { font-size:26px; }
}
@media (max-width: 767px) {
  .product-card-v3 { grid-template-columns:1fr; gap:18px; }
  .product-card-v3 .pv3-info { padding-right:0; border-right:none; padding-bottom:18px; border-bottom:1px solid #f0f0f0; }
  .product-card-v3 .pv3-media { padding:0; aspect-ratio:4/3; }
  .products-slider .swiper-button-prev,
  .products-slider .swiper-button-next { width:40px; height:40px; }
  .site-footer .footer-bottom-row .pay-icons-v4 i { font-size:32px; }
  .hero-slide-text .hero-counter-inline { max-width:none; margin-top:24px; }
  .hero-slide-text .hero-counter-inline .counter-num { font-size:22px; }
  .hero-slide-text .hero-counter-inline .counter-label { font-size:9px; letter-spacing:.8px; }
  .features-v3 .feature-item .feat-icon img { width:60px; height:60px; }
  .banks-v3 .banks-track img, .banks-v2 .banks-track img { height:42px; margin:0 14px; }
}