/* ==========================================================================
   Marji V2 — Overrides & new components per design notes (images 1-11)
   Loaded AFTER style.css so its rules win.
   ========================================================================== */

/* --- Topbar (image 1): contact left, language right --- */
.topbar { background:#1A1A1A; color:#fff; padding:10px 0; font-size:12px; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.topbar-left { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.topbar-left .info-item { display:inline-flex; align-items:center; gap:8px; opacity:.92; }
.topbar-left .info-item i { color:var(--color-primary); }
.topbar-left .social-block { display:inline-flex; align-items:center; gap:12px; }
.topbar-left .social-block .label { opacity:.85; }
.topbar-left .social-block a { width:24px; height:24px; border-radius:50%; background:#2a2a2a; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; transition:background .2s; }
.topbar-left .social-block a:hover { background:var(--color-primary); }
.topbar-right { display:inline-flex; align-items:center; gap:8px; }
.topbar-right .lang-link { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:500; padding:4px 8px; border-radius:4px; }
.topbar-right .lang-link:hover { color:var(--color-primary); }
.topbar-right .lang-link img { width:22px; height:14px; object-fit:cover; border-radius:2px; }

/* --- Header (image 2) --- */
.site-header { background:#fff; border-bottom:1px solid #f0f0f0; }
.header-main { display:flex; align-items:center; gap:36px; padding:22px 0; }
.brand img { height:64px; width:auto; }

.search { flex:1; position:relative; max-width:none; margin:0; }
.search input { width:100%; padding:18px 60px 18px 26px; border:none; border-radius:var(--radius-pill); background:#f3f3f3; font-size:15px; font-weight:500; }
.search input::placeholder { color:#888; font-weight:400; }
.search input:focus { outline:none; background:#ebebeb; box-shadow:0 0 0 2px rgba(242,106,40,0.15); }
.search-btn { position:absolute; top:50%; transform:translateY(-50%); right:8px; left:auto; width:42px; height:42px; border-radius:50%; background:transparent; color:#1A1A1A; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.search-btn:hover { color:var(--color-primary); background:transparent; }

.header-actions { display:flex; align-items:center; gap:14px; }
.header-icon { width:54px; height:54px; border-radius:50%; background:#f3f3f3; color:#1A1A1A; display:inline-flex; align-items:center; justify-content:center; font-size:20px; position:relative; transition:background .2s, color .2s; }
.header-icon:hover { background:#1A1A1A; color:#fff; }
.header-icon i { font-weight:900; }
.header-icon .badge { position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.cart-total { font-weight:700; font-size:15px; color:#1A1A1A; margin:0 6px; }
.menu-toggle { width:54px; height:54px; border-radius:50%; background:#f3f3f3; color:#1A1A1A; display:inline-flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; border:none; }
.menu-toggle:hover { background:#1A1A1A; color:#fff; }

/* Header dropdowns */
.has-dropdown { position:relative; }
.dropdown-panel { position:absolute; top:calc(100% + 12px); right:0; left:auto; min-width:260px; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); box-shadow:0 12px 36px rgba(0,0,0,0.12); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s; z-index:80; }
.has-dropdown.open .dropdown-panel { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a.dropdown-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; font-size:14px; font-weight:500; color:#1A1A1A; }
.dropdown-panel a.dropdown-item i { color:var(--color-primary); width:18px; text-align:center; }
.dropdown-panel a.dropdown-item:hover { background:#f7f7f7; color:var(--color-primary); }
.dropdown-panel .divider { height:1px; background:#eee; margin:6px 4px; }

/* Search auto-suggest */
.search-suggest { position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); box-shadow:0 12px 36px rgba(0,0,0,0.12); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s; z-index:60; max-height:420px; overflow-y:auto; }
.search.open .search-suggest { opacity:1; visibility:visible; transform:translateY(0); }
.search-suggest .sug-group-title { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--color-muted); padding:8px 12px 4px; font-weight:600; }
.search-suggest a.sug-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:#1A1A1A; }
.search-suggest a.sug-item:hover { background:#f7f7f7; color:var(--color-primary); }
.search-suggest a.sug-item img { width:40px; height:40px; object-fit:contain; background:#f7f7f7; border-radius:6px; padding:4px; }
.search-suggest a.sug-item .sug-meta { flex:1; }
.search-suggest a.sug-item .sug-name { font-size:14px; font-weight:600; margin:0 0 2px; }
.search-suggest a.sug-item .sug-cat { font-size:12px; color:var(--color-muted); }
.search-suggest a.sug-item .sug-price { color:var(--color-primary); font-weight:700; font-size:13px; }

/* Cart popup */
.cart-popup { min-width:340px; padding:14px; }
.cart-popup h4 { margin:0 0 12px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--color-muted); }
.cart-popup .cart-line { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0f0; align-items:center; }
.cart-popup .cart-line:last-of-type { border-bottom:0; }
.cart-popup .cart-line img { width:50px; height:50px; object-fit:contain; background:#f7f7f7; border-radius:6px; padding:4px; }
.cart-popup .cart-line .cl-info { flex:1; }
.cart-popup .cart-line .cl-info h5 { margin:0 0 4px; font-size:13px; }
.cart-popup .cart-line .cl-info small { color:var(--color-muted); font-size:12px; }
.cart-popup .cart-line .cl-price { font-weight:700; color:var(--color-primary); font-size:13px; }
.cart-popup .cart-line .cl-remove { color:#aaa; cursor:pointer; }
.cart-popup .cart-line .cl-remove:hover { color:var(--color-danger); }
.cart-popup .cart-empty { text-align:center; padding:20px 10px; color:var(--color-muted); }
.cart-popup .cart-empty i { font-size:32px; color:#ccc; display:block; margin-bottom:6px; }
.cart-popup .cart-popup-total { display:flex; justify-content:space-between; padding:12px 0; font-weight:700; }
.cart-popup .cart-popup-actions { display:flex; gap:8px; }
.cart-popup .cart-popup-actions a { flex:1; padding:10px; font-size:13px; }

/* Burger mega-menu drawer */
.mega-menu { position:fixed; top:0; right:0; bottom:0; width:380px; background:#fff; box-shadow:-10px 0 40px rgba(0,0,0,0.2); transform:translateX(100%); transition:transform .35s ease; z-index:200; display:flex; flex-direction:column; }
.mega-menu.open { transform:translateX(0); }
.mega-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:190; }
.mega-overlay.open { opacity:1; visibility:visible; }
.mega-menu .mega-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #eee; }
.mega-menu .mega-head h3 { margin:0; font-size:16px; }
.mega-menu .mega-close { width:36px; height:36px; border-radius:50%; background:#f3f3f3; color:#1A1A1A; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
.mega-menu .mega-close:hover { background:#1A1A1A; color:#fff; }
.mega-menu .mega-body { flex:1; overflow-y:auto; padding:10px 0; }
.mega-menu .mega-cat { border-bottom:1px solid #f5f5f5; }
.mega-menu .mega-cat > a { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; font-weight:600; color:#1A1A1A; cursor:pointer; }
.mega-menu .mega-cat > a:hover { color:var(--color-primary); background:#fafafa; }
.mega-menu .mega-cat > a i { color:#999; transition:transform .2s; }
.mega-menu .mega-cat.open > a i { transform:rotate(90deg); color:var(--color-primary); }
.mega-menu .mega-sub { max-height:0; overflow:hidden; transition:max-height .3s ease; background:#fafafa; }
.mega-menu .mega-cat.open .mega-sub { max-height:600px; }
.mega-menu .mega-sub a { display:block; padding:10px 36px; font-size:14px; color:var(--color-text); }
.mega-menu .mega-sub a:hover { color:var(--color-primary); background:#fff; }
.mega-menu .mega-foot { padding:18px 20px; border-top:1px solid #eee; }

/* Remove legacy main-nav (image 3) when V2 header is used */
body.has-v2-header .main-nav { display:none !important; }

/* --- Hero slider (image 4 + 5) --- */
.hero-slider { position:relative; padding:50px 0 0; background:linear-gradient(180deg, #FFF8F0 0%, #ffffff 100%); overflow:hidden; }
.hero-slide { padding:30px 0 40px; }
.hero-slide .row { align-items:center; }
.hero-slide-media { position:relative; }
.hero-slide-media img, .hero-slide-media video { width:100%; height:auto; max-height:560px; object-fit:contain; }
.hero-slide-media .video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,0.95); color:var(--color-primary); display:inline-flex; align-items:center; justify-content:center; font-size:28px; cursor:pointer; transition:transform .2s; box-shadow:0 10px 30px rgba(0,0,0,0.2); border:none; }
.hero-slide-media .video-play:hover { transform:translate(-50%,-50%) scale(1.08); }
.hero-slide-text .eyebrow-v2 { color:var(--color-primary); font-size:13px; font-weight:500; letter-spacing:.5px; margin-bottom:18px; display:inline-block; }
.hero-slide-text h1 { font-size:60px; line-height:1.12; letter-spacing:-1.5px; margin-bottom:22px; font-weight:700; color:#1A1A1A; }
.hero-slide-text h1 .accent { color:var(--color-primary); }
.hero-slide-text .hero-sub { color:var(--color-muted); font-size:15px; max-width:480px; margin-bottom:30px; }
.hero-slide-text .hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-slide-text .btn-primary { padding:16px 30px; border-radius:var(--radius-pill); font-weight:600; }
.hero-slide-text .btn-outline-pill { padding:14px 26px; border:1px solid #d8d8d8; border-radius:var(--radius-pill); color:#1A1A1A; font-weight:600; display:inline-flex; align-items:center; gap:10px; background:#fff; }
.hero-slide-text .btn-outline-pill:hover { border-color:var(--color-primary); color:var(--color-primary); }
.hero-slide-text .play-circle { width:56px; height:56px; border-radius:50%; background:var(--color-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; border:none; }
.hero-slide-text .play-circle:hover { background:var(--color-primary-hover); }

.hero-slider .swiper-pagination { position:absolute; bottom:auto; top:auto; left:0; right:0; text-align:center; padding:0; margin-top:10px; z-index:5; position:relative; }
.hero-slider .swiper-pagination-bullet { width:24px; height:4px; border-radius:2px; background:#d8d8d8; opacity:1; margin:0 4px !important; transition:width .25s, background .25s; }
.hero-slider .swiper-pagination-bullet-active { background:var(--color-primary); width:32px; }

/* Counter row inside the hero */
.hero-counter { padding:30px 0 60px; border-top:1px solid rgba(0,0,0,0.06); margin-top:10px; }
.hero-counter .counter-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:680px; }
.hero-counter .counter-item { text-align:center; padding:14px 10px 6px; }
.hero-counter .counter-num { font-size:40px; font-weight:800; color:#1A1A1A; line-height:1; }
.hero-counter .counter-label { font-size:11px; color:#1A1A1A; letter-spacing:1.6px; text-transform:uppercase; font-weight:500; margin-top:6px; }
.hero-counter .counter-dash { width:60px; height:3px; background:var(--color-primary); margin:14px auto 0; border-radius:2px; }

/* Features V2 (image 7) */
.features-v2 { padding:40px 0 60px; background:#fff; }
.features-v2 .feature-item { display:flex; align-items:center; gap:14px; padding:18px 12px; }
.features-v2 .feature-item .feat-icon { width:62px; height:62px; min-width:62px; border-radius:50%; border:1px solid #e5e5e5; display:inline-flex; align-items:center; justify-content:center; font-size:22px; color:#1A1A1A; background:#fff; }
.features-v2 .feature-item .feat-title { font-size:16px; font-weight:700; color:#1A1A1A; margin:0 0 2px; }
.features-v2 .feature-item .feat-desc { font-size:13px; color:var(--color-muted); margin:0; }

/* Products slider (image 8) */
.products-slider { padding:50px 0 30px; }
.products-slider .products-swiper { padding:30px 60px 60px; overflow:hidden; }
.products-slider .swiper-slide { transition:filter .35s, opacity .35s, transform .35s; filter:blur(3px); opacity:.45; }
.products-slider .swiper-slide-active { filter:blur(0); opacity:1; }
.products-slider .swiper-slide-prev,
.products-slider .swiper-slide-next { filter:blur(2px); opacity:.7; }
.products-slider .product-card { background:#fff; border:1px solid #ececec; border-radius:var(--radius-lg); padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; height:auto; min-height:420px; }
.products-slider .product-card .product-media { background:#fff; aspect-ratio:1/1; padding:0; box-shadow:none; border:none; }
.products-slider .product-card .product-info-side { display:flex; flex-direction:column; }
.products-slider .swiper-button-prev, .products-slider .swiper-button-next { width:54px; height:54px; border-radius:50%; background:var(--color-primary); color:#fff; box-shadow:0 8px 24px rgba(242,106,40,0.35); z-index:10; }
.products-slider .swiper-button-prev:hover, .products-slider .swiper-button-next:hover { background:var(--color-primary-hover); }
.products-slider .swiper-button-prev:after, .products-slider .swiper-button-next:after { font-size:17px; font-weight:900; }
.products-slider .swiper-pagination { bottom:10px; }
.products-slider .swiper-pagination-bullet { width:10px; height:10px; background:#d8d8d8; opacity:1; }
.products-slider .swiper-pagination-bullet-active { background:var(--color-primary); }
@media (max-width:767px) { .products-slider .product-card { grid-template-columns:1fr; } .products-slider .products-swiper { padding:20px 10px 60px; } }

/* Full-width promo slider (image 9) */
.promo-slider { padding:30px 0; }
.promo-slider .swiper { border-radius:var(--radius-lg); overflow:hidden; }
.promo-slider .promo-slide { position:relative; aspect-ratio:1400/420; max-height:520px; }
.promo-slider .promo-slide img, .promo-slider .promo-slide video { width:100%; height:100%; object-fit:cover; display:block; }
.promo-slider .swiper-button-prev, .promo-slider .swiper-button-next { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.9); color:#1A1A1A; }
.promo-slider .swiper-button-prev:after, .promo-slider .swiper-button-next:after { font-size:16px; font-weight:900; }
.promo-slider .swiper-pagination-bullet { background:#fff; opacity:.6; }
.promo-slider .swiper-pagination-bullet-active { background:var(--color-primary); opacity:1; }

/* Banks infinite loop (image 10) */
.banks-v2 { padding:60px 0; background:#fff; }
.banks-v2 .banks-title { text-align:center; font-size:28px; font-weight:700; color:#1A1A1A; margin-bottom:36px; }
.banks-v2 .banks-loop { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.banks-v2 .banks-track { display:flex; gap:60px; align-items:center; width:max-content; animation:banks-scroll 30s linear infinite; }
.banks-v2 .banks-track img { height:60px; max-width:200px; width:auto; object-fit:contain; flex-shrink:0; }
@keyframes banks-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.banks-v2 .banks-loop:hover .banks-track { animation-play-state:paused; }

/* WhatsApp expanding float */
.wa-float { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.wa-float .wa-main { width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 12px 30px rgba(37,211,102,0.4); cursor:pointer; border:none; }
.wa-float .wa-main:hover { transform:scale(1.05); color:#fff; }
.wa-float .wa-channels { display:flex; flex-direction:column; align-items:flex-end; gap:10px; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s; }
.wa-float.open .wa-channels { opacity:1; visibility:visible; transform:translateY(0); }
.wa-float .wa-channel { display:inline-flex; align-items:center; gap:10px; }
.wa-float .wa-channel .wa-label { background:#fff; color:#1A1A1A; font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--radius-pill); box-shadow:0 6px 14px rgba(0,0,0,0.12); white-space:nowrap; }
.wa-float .wa-channel a.wa-icon { width:46px; height:46px; border-radius:50%; background:#25D366; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 6px 16px rgba(37,211,102,0.4); }
.wa-float .wa-channel a.wa-icon:hover { background:#1eba59; color:#fff; }
.wa-float.open .wa-main .wa-i { display:none; }
.wa-float .wa-main .wa-x { display:none; font-size:24px; }
.wa-float.open .wa-main .wa-x { display:inline-flex; }

/* Hide legacy float when V2 is on page */
.whatsapp-float { display:none !important; }

/* Footer V2 (image 11) */
.site-footer { background:#2B2B2B; color:#dcdcdc; padding:60px 0 0; }
.site-footer .row { gap:0; }
.site-footer h4 { color:#fff; font-size:17px; font-weight:700; margin:0 0 6px; padding:0; }
.site-footer h4::after { content:none; }
.site-footer .h4-line { display:flex; gap:6px; align-items:center; margin-bottom:22px; }
.site-footer .h4-line span { display:inline-block; height:3px; background:var(--color-primary); border-radius:2px; }
.site-footer .h4-line span:nth-child(1) { width:40px; }
.site-footer .h4-line span:nth-child(2) { width:14px; }
.site-footer .h4-line span:nth-child(3) { width:14px; opacity:.6; }
.site-footer ul li { margin-bottom:10px; }
.site-footer ul li a { color:#dcdcdc; font-size:14px; display:inline-flex; align-items:center; gap:10px; }
.site-footer ul li a::before { content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--color-primary); font-size:11px; }
.site-footer ul li a:hover { color:var(--color-primary); }
.site-footer .footer-brand img { height:70px; margin-bottom:18px; }
.site-footer .footer-brand p { color:#bdbdbd; font-size:13px; line-height:1.7; max-width:300px; }
.site-footer .newsletter-form { display:block; max-width:340px; background:transparent; border-radius:0; overflow:visible; margin-top:14px; }
.site-footer .newsletter-form input { width:100%; padding:14px 18px; background:#fff; color:#222; border:none; border-radius:var(--radius-md); font-size:14px; margin-bottom:10px; }
.site-footer .newsletter-form button { width:100%; padding:13px; background:var(--color-primary); color:#fff; font-weight:700; font-size:13px; letter-spacing:1px; border-radius:var(--radius-md); border:none; cursor:pointer; }
.site-footer .newsletter-form button:hover { background:var(--color-primary-hover); }
.site-footer .footer-bottom { margin-top:50px; padding:20px 0; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#bdbdbd; }
.site-footer .footer-bottom .es { color:var(--color-primary); font-weight:700; }
.site-footer .footer-bottom .pay-icons { display:inline-flex; gap:16px; align-items:center; }
.site-footer .footer-bottom .pay-icons i { font-size:30px; color:#bdbdbd; }
.site-footer .footer-bottom .pay-icons i:hover { color:#fff; }

/* Responsive */
@media (max-width: 991px) {
  .hero-slide-text h1 { font-size:38px; }
  .header-main { gap:14px; }
  .brand img { height:50px; }
  .search { order:5; flex-basis:100%; max-width:none; margin-top:10px; }
  .topbar-left { gap:14px; font-size:11px; }
  .features-v2 .feature-item { padding:12px 6px; }
}
@media (max-width: 767px) {
  .topbar-left .info-item:not(:first-child) { display:none; }
  .header-actions { gap:8px; }
  .header-icon, .menu-toggle { width:44px; height:44px; font-size:16px; }
  .cart-total { display:none; }
  .mega-menu { width:88%; }
  .hero-slide-text h1 { font-size:30px; }
  .hero-counter .counter-row { grid-template-columns:repeat(3,1fr); gap:8px; }
  .hero-counter .counter-num { font-size:24px; }
  .hero-counter .counter-label { font-size:9px; letter-spacing:1px; }
  .products-slider .product-card { grid-template-columns:1fr; }
  .promo-slider .promo-slide { aspect-ratio:16/9; }
  .site-footer .row > [class*="col-"] { margin-bottom:30px; }
}