/* ============================================================
   AÉTHER Parfums — Responsive Overrides
   ============================================================ */

/* ═══════════════════════════════════════
   DESKTOP BASELINE — horizontal nav fix
   ═══════════════════════════════════════ */
@media(min-width:992px){
  .navbar-collapse {
    position: static !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    z-index: auto !important;
  }
  .navbar-collapse::before { display: none !important; }
  .navbar-nav { flex-direction: row !important; }
  .nav-icons { display: flex !important; }
  .nav-sidebar-close,
  .nav-mobile-extras { display: none !important; }
  body { padding-bottom: 0 !important; }
  .mobile-cta-bar { display: none !important; }
}

/* ---- 1200px and below ---- */
@media(max-width:1199px){
  :root { --section-pad: 80px; }
  .cat-card { height: 280px; }
  .collection-card { height: 340px; }
  .combos-grid { grid-template-columns: repeat(2,1fr); }
  .trust-grid { grid-template-columns: repeat(3,1fr); }
}

/* ---- 991px and below (tablet / mobile) ---- */
@media(max-width:991px){
  :root {
    --section-pad: 70px;
    --header-height: 64px;
  }

  /* Header solid on scroll / inner pages */
  .site-header.header-solid,
  body.page-inner .site-header { background: var(--header-solid); box-shadow: var(--shadow-sm); }
  body.page-inner { padding-top: var(--header-height); }

  /* Brand */
  .brand { color: var(--header-text-solid)!important; font-size: 1.25rem; letter-spacing: 5px; }

  /* ---- Mobile header icons row ---- */
  /* The right-side group: wishlist | cart | hamburger — all inline, no fixed positioning */
  .mobile-nav-right { gap: 4px; }
  .mobile-nav-right .nav-icon {
    width: 38px;
    height: 38px;
    font-size: .9rem;
    color: var(--header-text-solid) !important;
  }
  /* On hero pages header is transparent — white icons */
  .header-hero:not(.is-scrolled) .mobile-nav-right .nav-icon { color: var(--white)!important; }
  .header-hero:not(.is-scrolled) .brand { color: var(--white)!important; }

  /* Hamburger — inline, NOT fixed */
  .navbar-toggler {
    position: static;
    width: 38px;
    height: 38px;
    background: transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    flex-shrink: 0;
  }
  .navbar-toggler:focus { box-shadow: none; outline: none; }
  .navbar-toggler-icon {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817,17,17,0.9%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
  }
  .header-hero:not(.is-scrolled) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
  }
  [data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240,240,240,0.9%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
  }

  /* ---- Slide-in sidebar — complete redesign ---- */
  .navbar-collapse {
    position: fixed;
    top: 0;
    right: -100%;       /* start fully off-screen */
    width: 280px;       /* narrower — doesn't dominate the screen */
    max-width: 80vw;
    height: 100vh;
    background: #fff !important;
    padding: 0;         /* padding handled by inner sections */
    box-shadow: -6px 0 32px rgba(0,0,0,.22);
    transition: right var(--t-premium);
    z-index: 1055;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
  .navbar-collapse.show { right: 0; }
  .navbar-collapse,
  .navbar-collapse .navbar-nav,
  .nav-sidebar-close,
  .nav-mobile-extras { background: #fff !important; }

  /* Backdrop overlay */
  .navbar-collapse::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
  }
  .navbar-collapse.show::before { opacity: 1; pointer-events: auto; }

  /* ---- Sidebar Header (brand + close) ---- */
  .navbar-collapse .navbar-nav {
    flex: 1;
    padding: 0 20px 16px;
  }

  /* Sidebar top bar with brand + close button */
  .navbar-collapse::after {
    content: '';
    display: none; /* use JS-rendered close button instead */
  }

  /* Nav links — compact, elegant */
  .main-header .nav-link {
    color: var(--text) !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem !important;
    letter-spacing: 1.5px;
    font-weight: 600;
    transition: color var(--t-fast), padding-left var(--t-fast);
  }
  .main-header .nav-link:hover { color: var(--gold) !important; padding-left: 4px !important; }
  .main-header .nav-link::after { display: none; }

  /* Mega menu items inside sidebar */
  .mega-menu {
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    margin-top: 0;
  }
  .mega-menu .row { flex-direction: column; gap: 0; }
  .mega-col { padding: 0; margin-bottom: 0; }
  .mega-col h6 { display: none; }
  .mega-col ul { margin: 0; padding-left: 14px; }
  .mega-col a {
    padding: 9px 0;
    font-size: .8rem;
    border-bottom: 1px solid var(--border);
    display: block;
    color: var(--text-muted) !important;
    transition: color var(--t-fast), padding-left var(--t-fast);
  }
  .mega-col a:hover { color: var(--gold) !important; padding-left: 6px; }
  .mega-img, .mega-trust-row { display: none; }

  /* Mobile extras — theme / search / account — bottom of sidebar */
  .nav-mobile-extras {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;   /* push to bottom */
    background: var(--bg-alt);
  }
  .nav-mobile-extras .nav-icon {
    color: var(--text) !important;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--border);
    font-size: .9rem;
  }
  .nav-mobile-extras .nav-icon:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
  }

  /* Desktop nav-icons inside sidebar (shown only in sidebar context) */
  .nav-icons {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    justify-content: flex-start;
    margin-top: 0;
    gap: 8px;
    background: var(--bg-alt);
  }
  .nav-icons .nav-icon {
    color: var(--text) !important;
    width: 40px;
    height: 40px;
    font-size: .95rem;
  }

  /* ---- Sidebar close button ---- */
  .nav-sidebar-close {
    position: sticky;    /* stick at top of sidebar */
    top: 0;
    z-index: 5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--text);
    cursor: default;     /* brand text — not clickable */
    flex-shrink: 0;
  }
  /* Override em5.css round button style */
  .nav-sidebar-close.d-lg-none {
    border-radius: 0 !important;
    background: var(--card-bg) !important;
  }

  /* Layout */
  .hero { min-height: 85vh; }
  .insta-grid { grid-template-columns: repeat(3,1fr); }
  .newsletter-box { padding: 36px 28px; text-align: center; }
  .footer-bottom { text-align: center; }
  .footer-trust-items { gap: 12px; }
  .footer-trust-item { min-width: 130px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .footer-pay-strip { justify-content: center; margin-top: 8px; }
  .footer-cod-badge { margin: 8px auto 0; display: flex; width: fit-content; }

  /* Category circles: 3 per row */
  #categoryGrid .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }

  /* Body bottom pad for mobile CTA bar */
  body { padding-bottom: 0; }
}

/* ── Collection slider (dark section) — inactive dots were invisible on
      the black background; give them a light tint. ── */
.collection-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.35); opacity: 1; }
.collection-swiper .swiper-pagination-bullet-active { background: var(--gold); }

/* ── Private Blends slider — hide the edge arrows below desktop; they
      overlap the product cards on phones/tablets. Pagination dots show
      instead (visible up to lg). ── */
@media(max-width:991px){
  .private-blend-swiper .pb-prev,
  .private-blend-swiper .pb-next { display: none !important; }
}

/* ---- 767px and below (phones) ---- */
@media(max-width:767px){
  :root {
    --section-pad: 40px;
    --header-height: 60px;
  }

  /* Announce bar — visible on mobile too, slightly more compact */
  .announce-bar { height: 34px; }
  .announce-track { height: 34px; }
  .announce-item { font-size: .62rem; padding: 0 20px; letter-spacing: 1px; }
  .announce-item::after { margin-left: 20px; }
  body.page-inner { padding-top: var(--header-height); }

  /* Hero images — sharp portrait crops are served via JS (home.js); here we
     just keep a light dark overlay so the white text stays readable. */
  .hero { min-height: 85vh; }
  .hero h1 { font-size: 1.85rem; line-height: 1.2; }
  .hero p { font-size: .88rem; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; text-align: center; justify-content: center; }
  .section-title { font-size: 1.35rem; }

  /* Remove extra padding from section-pad on mobile */
  .section-pad { padding: 32px 0; }

  /* ---- Product cards — 2 per row always ---- */
  #bestSellers > div,
  #newArrivals > div,
  #featuredProducts > div { padding: 4px; flex: 0 0 50%; max-width: 50%; }

  .product-card { border-radius: var(--radius-md); }
  .product-card-img { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .product-card-body { padding: 10px 8px 12px; }
  .product-card-actions { opacity: 1; transform: translateX(0); }
  .product-card-hover-btns { transform: none; position: relative; padding: 8px; background: transparent; }
  .product-card-hover-btns .btn { font-size: .62rem; padding: 7px 5px; }
  .p-action { width: 30px; height: 30px; font-size: .7rem; }
  .p-meta-row { flex-wrap: wrap; gap: 2px; }
  .p-meta-label { font-size: .6rem; }
  .p-name { font-size: .85rem; margin: 3px 0 4px; }
  .p-price { font-size: .9rem; }
  .p-original { font-size: .75rem; }
  .p-disc { font-size: .62rem; }
  .p-size-selector { gap: 3px; margin: 5px 0 4px; }
  .p-size-chip { font-size: .58rem; padding: 3px 6px; }
  .p-cod-tag { font-size: .56rem; padding: 2px 5px; }
  .p-rating { font-size: .7rem; margin-bottom: 4px; }
  .p-rating i { font-size: .65rem; }
  .p-tags { gap: 3px; margin: 3px 0; }
  .p-tag { font-size: .58rem; padding: 2px 6px; }

  /* Category circles (old round style — hidden, replaced by new scroll) */
  .cat-card { height: 200px; }
  #categoryGrid { display: none; } /* replaced by catCirclesScroll */

  /* Cart drawer full width */
  .cart-drawer { width: 100%; right: -100%; border-radius: 0; }

  /* Newsletter — stacked column: undo Bootstrap input-group child rules
     (width:1%, negative margin, one-sided radius) so the input & button
     render as clean full-width fields */
  .newsletter-box { padding: 28px 16px; }
  .newsletter-form .input-group { flex-direction: column; gap: 8px; align-items: stretch; }
  .newsletter-form .input-group .form-control,
  .newsletter-form .input-group .btn-gold {
    width: 100% !important;
    margin-left: 0 !important;
    border-radius: var(--radius-md) !important;
  }

  /* Misc */
  .stats-row { gap: 16px; }
  .breadcrumb-bar { padding: 12px 0; }
  .insta-grid { grid-template-columns: repeat(2,1fr); gap: 3px; }
  .combos-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust-item { padding: 20px 12px; }
  .trust-icon { width: 48px; height: 48px; font-size: 1rem; }

  /* Footer */
  .footer-trust-items { flex-direction: column; gap: 12px; }
  .footer-trust-item { width: 100%; }
  .app-badge { padding: 7px 10px; }
  .footer-app-badges { gap: 6px; }

  /* Collections page — full-width stacked banners on phones
     (2 skinny tall columns look bad on small screens) */
  .collection-col { padding-left: 4px !important; padding-right: 4px !important; }
  .collection-hero-card {
    height: 200px;
    margin-bottom: 10px;
    border-radius: var(--radius-lg, 16px);
  }
  .collection-hero-body { padding: 18px 16px; }
  .collection-hero-body h2 { font-size: 1.15rem; margin-bottom: 4px; }
  .collection-hero-body p {
    font-size: .73rem;
    margin-bottom: 8px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .collection-hero-body span { font-size: .73rem; }

  /* Private banner — smaller on mobile */
  .private-banner { min-height: 240px; }
  .private-content { padding: 32px 20px; max-width: 100%; }
  .private-content h2 { font-size: 1.4rem; }
  .private-content p { font-size: .82rem; }

  /* Marquee bar — smaller */
  .marquee-bar { padding: 7px 0; }
  .marquee-track span { font-size: .65rem; padding: 0 20px; }

  /* ---- Float buttons ---- */
  .float-whatsapp {
    bottom: 72px !important;
    left: 16px !important;
    right: auto !important;
    width: 48px; height: 48px; font-size: 1.25rem;
  }
  .float-whatsapp::before { display: none; }
  .scroll-top { bottom: 72px !important; right: 16px !important; left: auto !important; width: 42px; height: 42px; font-size: .85rem; }
  .float-call { display: none !important; }
}

/* ---- 575px and below (small phones) ---- */
@media(max-width:575px){
  .hero h1 { font-size: 1.65rem; }
  /* Hero dots — centered on phones, clear of the mobile CTA strip.
     The redundant scroll chevron is hidden so dots sit clean & centered. */
  .hero-dots {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 84px;
  }
  .hero-scroll { display: none !important; }
  .popup-content { padding: 26px 16px; }

  /* Combos 1 col on very small */
  .combos-grid { grid-template-columns: 1fr; }
}

/* ---- 767px and below — also hide chevron on tablets so dots are never
      overlapped or doubled-up with the hero CTA strip ---- */
@media(max-width:767px){
  .hero-scroll { display: none !important; }
}

/* ---- Mobile (767px and below) — toasts clear the sticky CTA bar ---- */
@media(max-width:767px){
  .toast-container {
    bottom: 84px;              /* above mobile-cta-bar + WhatsApp float */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    max-width: 420px;
  }
  .toast-item {
    white-space: normal;       /* long messages wrap instead of overflowing */
    text-align: center;
    justify-content: center;
    padding: 12px 18px;
    font-size: .8rem;
    line-height: 1.45;
  }
}

/* ---- Print ---- */
@media print {
  .main-header, .announce-bar, .scroll-top, .loader-screen,
  .cart-drawer, .float-btn, .float-whatsapp, .popup-modal,
  .scroll-progress, .mobile-cta-bar { display: none!important; }
  body { background: #fff; color: #000; padding-bottom: 0!important; }
}