/* ═══════════════════════════════════════════════════════════
   GlowHaven — Mobile Responsive Supplement
   Ensures ZERO horizontal scroll and perfect fit on all screens
   Breakpoints: xs(<480) sm(480-575) md(576-767) lg(768-991)
                xl(992-1199) xxl(1200+)
═══════════════════════════════════════════════════════════ */

/* ─── GLOBAL OVERFLOW GUARD ──────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}
* {
  min-width: 0;     /* Prevents flex/grid overflow */
  box-sizing: border-box;
}
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* ─── CONTAINER FLUID PADDING ────────────────────────────── */
.container-fluid {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  .container-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 1200px) {
  .container-fluid {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HEADER — Full mobile fix
══════════════════════════════════════════════════════════ */
.topbar { overflow-x: hidden; }
.topbar .container-fluid {
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar .topbar-left span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

.site-header { overflow: visible; }
.header-inner {
  flex-wrap: nowrap;
  overflow: visible;
  gap: 8px;
}

/* Search bar shrinks on small screens */
.header-search {
  min-width: 0;
  flex: 1 1 0;
}
.search-wrap { overflow: hidden; }
.search-input {
  min-width: 0;
  flex: 1;
}

/* Header actions — compact on mobile */
.header-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 4px !important;
}
.header-icon-btn {
  padding: 6px 7px;
}
.header-user-btn {
  padding: 5px 8px;
}

/* ─── MAIN NAV ──────────────────────────────────────────── */
.main-nav { overflow-x: hidden; }
.nav-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}
/* Prevent mega menu from causing scroll */
.mega-menu {
  max-width: calc(100vw - 32px);
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════════ */
.hero-section { overflow: hidden; }
.heroSwiper, .swiper-wrapper, .swiper-slide {
  max-width: 100%;
}
.hero-slide {
  background-attachment: scroll !important; /* prevent parallax issues on mobile */
  overflow: hidden;
}
.hero-image-wrap { overflow: hidden; }
.hero-img-placeholder { max-width: 100%; }

/* ══════════════════════════════════════════════════════════
   ALL SWIPERS — overflow guard
══════════════════════════════════════════════════════════ */
.swiper { overflow: hidden !important; width: 100%; }
.swiper-wrapper { width: 100%; }

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS — responsive grid sizes
══════════════════════════════════════════════════════════ */
.productSwiper .swiper-slide {
  width: 200px;
}
.catSwiper .swiper-slide {
  width: 110px;
}
.brandSwiper .swiper-slide {
  width: 150px;
}

/* Product card internals never overflow */
.product-card { overflow: hidden; min-width: 0; }
.product-card-img-wrap { overflow: hidden; }
.product-name { word-break: break-word; }
.product-price { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   INSTAGRAM GALLERY
══════════════════════════════════════════════════════════ */
.instagram-gallery {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer { overflow-x: hidden; }
.footer-main { overflow: hidden; }
.footer-newsletter .d-flex { flex-wrap: wrap; }
.footer-newsletter input[type="email"] { min-width: 0; }
.payment-icons { flex-wrap: wrap; gap: 6px; }

/* ══════════════════════════════════════════════════════════
   SHOP PAGE
══════════════════════════════════════════════════════════ */
.shop-page { overflow-x: hidden; }
.filter-sidebar { max-width: 100%; }
.shop-toolbar { flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════════════════════
   CART & CHECKOUT
══════════════════════════════════════════════════════════ */
.cart-page, .checkout-page { overflow-x: hidden; }
.cart-row {
  grid-template-columns: 1fr;
  gap: 8px;
}
.order-summary-card { position: static !important; } /* No sticky on mobile */

/* ══════════════════════════════════════════════════════════
   PRODUCT PAGE
══════════════════════════════════════════════════════════ */
.product-page { overflow-x: hidden; }
.product-gallery { position: static !important; } /* No sticky on small screens */
.product-cta { flex-wrap: wrap; }
.product-cta .btn { min-width: 0; flex: 1 1 120px; }

/* Tabs scroll horizontally on small screens */
.tabs-line {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs-line::-webkit-scrollbar { display: none; }
.tabs-line .nav-link {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   ACCOUNT PAGE
══════════════════════════════════════════════════════════ */
.account-page { overflow-x: hidden; }
.account-sidebar { overflow: hidden; }
.account-nav-link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   TABLES — horizontal scroll on small screens
══════════════════════════════════════════════════════════ */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal { overflow-x: hidden; }
.modal-content { max-width: 100%; overflow: hidden; }
.modal-body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════
   SLIDE CART
══════════════════════════════════════════════════════════ */
.slide-cart {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   SLIDE-CART BODY SCROLL
══════════════════════════════════════════════════════════ */
.slide-cart-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT STEPS — wraps cleanly on small screens
══════════════════════════════════════════════════════════ */
.checkout-steps { flex-wrap: wrap; gap: 4px; }
.step-line { min-width: 20px; }

/* ══════════════════════════════════════════════════════════
   BLOG
══════════════════════════════════════════════════════════ */
.blog-article { overflow-x: hidden; }
.blog-content img { max-width: 100%; height: auto; }
.blog-content table { max-width: 100%; overflow-x: auto; display: block; }

/* ══════════════════════════════════════════════════════════
   AUTH CARD
══════════════════════════════════════════════════════════ */
.auth-card { padding: 24px; overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   PROMO CARDS
══════════════════════════════════════════════════════════ */
.promo-card { overflow: hidden; }
.promo-countdown { font-size: 1rem; padding: 6px 10px; }

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: ≤ 480px  (Small phones — iPhone SE etc.)
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Topbar hidden on very small phones */
  .topbar { display: none !important; }

  /* Header compact */
  .header-inner { height: 56px; gap: 6px; }
  .logo-text { font-size: 1.1rem; }
  .header-icon-btn { padding: 5px 6px; font-size: 16px; }
  .header-icon-btn .icon-label { display: none !important; }

  /* Hero */
  .hero-slide {
    min-height: 220px;
    padding: 18px 16px;
    align-items: flex-end;
    padding-bottom: 40px;
  }
  .hero-title { font-size: 1.3rem; line-height: 1.25; }
  .hero-subtitle { display: none; }
  .btn-hero { padding: 9px 20px; font-size: 13px; }
  .hero-badge { font-size: 10px; padding: 3px 10px; margin-bottom: 8px; }
  .hero-prev, .hero-next { display: none !important; }

  /* Sections */
  .section-pad { padding: 22px 0; }
  .section-title { font-size: 1.1rem; }
  .section-header { margin-bottom: 14px; }

  /* Categories */
  .catSwiper .swiper-slide { width: 90px; }
  .category-icon { width: 44px; height: 44px; font-size: 18px; }
  .category-name { font-size: 11px; }
  .category-card { padding: 14px 10px; gap: 6px; border-radius: 12px; }

  /* Products */
  .productSwiper .swiper-slide { width: 160px; }
  .product-card-body { padding: 10px; }
  .product-name { font-size: 12px; }
  .price-current { font-size: 14px; }
  .product-card .btn { font-size: 11px; padding: 6px 8px !important; }

  /* Promo cards stack fully */
  .promo-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: auto;
    padding: 18px;
  }
  .promo-countdown { margin-left: 0; font-size: 0.95rem; }

  /* Brands */
  .brandSwiper .swiper-slide { width: 120px; }
  .brand-card { height: 64px; padding: 8px; }

  /* Testimonials */
  .testimonial-card { padding: 18px; margin: 4px; }
  .testimonial-text { font-size: 13px; }

  /* Instagram */
  .instagram-gallery { grid-template-columns: repeat(3, 1fr); gap: 4px; }

  /* Footer newsletter */
  .footer-newsletter { padding: 24px 0; }
  .footer-newsletter h4 { font-size: 1.1rem; }
  .footer-newsletter .form-control { font-size: 13px; }
  .footer-newsletter .btn { padding: 10px 16px; font-size: 13px; }

  /* Footer main */
  .footer-main { padding: 30px 0 20px; }
  .footer-heading { font-size: 12px; }
  .footer-links a { font-size: 12px; }

  /* Trust strip */
  .trust-item { gap: 8px; }
  .trust-item i { font-size: 1.4rem; }
  .trust-item strong { font-size: 12px; }

  /* Cart */
  .cart-item-img { width: 50px; height: 50px; }
  .cart-item-name a { font-size: 12px; }
  .cart-item { gap: 8px; }

  /* Slide cart width */
  .slide-cart { width: 100vw; }

  /* FAB buttons */
  .fab-btn { width: 44px; height: 44px; font-size: 16px; }
  .floating-actions { bottom: 16px; right: 14px; gap: 8px; }

  /* Auth */
  .auth-card { padding: 20px 16px; border-radius: 16px; }
  .auth-title { font-size: 1.2rem; }

  /* Product page */
  .product-title { font-size: 1.15rem; }
  .price-main { font-size: 1.4rem; }
  .product-cta { gap: 8px; }
  .product-cta .btn { padding: 10px 12px !important; font-size: 13px !important; }
  .shade-option { width: 26px; height: 26px; }
  .size-option { padding: 5px 10px; font-size: 12px; }

  /* Checkout */
  .checkout-card { padding: 16px; }
  .checkout-card-title { font-size: 14px; }
  .delivery-option { padding: 10px; gap: 10px; }
  .payment-option { padding: 10px; gap: 10px; }
  .order-summary-card { padding: 16px; }

  /* Account */
  .account-sidebar { border-radius: 12px; padding: 14px; }
  .account-avatar-lg { width: 58px; height: 58px; font-size: 22px; }
  .account-nav-link { padding: 9px 10px; font-size: 13px; }
  .stat-card i { font-size: 1.3rem; }
  .stat-card strong { font-size: 1.1rem; }

  /* Blog */
  .blog-card .blog-body { padding: 14px; }
  .blog-title { font-size: 14px; }
  .blog-excerpt { font-size: 12px; }

  /* Order success */
  .order-success-card { padding: 24px 16px; }
  .success-icon { width: 65px; height: 65px; font-size: 2rem; }

  /* Mega menu disabled on mobile */
  .mega-menu { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: 481px – 575px  (Large phones)
════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 575px) {
  .hero-slide { min-height: 260px; padding: 24px 20px; }
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 12px; display: block; }
  .section-pad { padding: 28px 0; }
  .section-title { font-size: 1.2rem; }
  .productSwiper .swiper-slide { width: 175px; }
  .catSwiper .swiper-slide { width: 100px; }
  .instagram-gallery { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .slide-cart { width: 340px; }
}

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: 576px – 767px  (Large phones / small tablet)
════════════════════════════════════════════════════════ */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-slide { min-height: 300px; padding: 28px 24px; }
  .hero-title { font-size: 1.7rem; }
  .section-pad { padding: 32px 0; }
  .productSwiper .swiper-slide { width: 185px; }
  .instagram-gallery { grid-template-columns: repeat(3, 1fr); }
  .slide-cart { width: 360px; }
  .cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
}

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: 768px – 991px  (Tablet)
════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide { min-height: 360px; }
  .hero-title { font-size: 2rem; }
  .section-pad { padding: 40px 0; }
  .productSwiper .swiper-slide { width: 200px; }
  .instagram-gallery { grid-template-columns: repeat(6, 1fr); }

  /* Sticky product gallery only on large tablet+ */
  .product-gallery { position: static !important; }

  /* Cart row two-column grid on tablet */
  .cart-table-head { display: none; }
  .cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }
  .cart-product { flex: 0 0 100%; }
  .cart-price, .cart-qty, .cart-total, .cart-remove-wrap {
    flex: 1;
    justify-content: center;
  }

  /* Checkout: sidebar below on tablet */
  .order-summary-card { position: static; }

  /* Account sidebar is shown as horizontal tabs on tablet */
  .account-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px;
    align-items: center;
  }
  .account-user { display: none; } /* Hide profile block in sidebar on tablet */
  .account-nav-link {
    flex-direction: row;
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
  }
  .account-nav-link i { display: none; }
}

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: ≤ 767px  (All phones — shared)
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Main nav hidden — use mobile sidebar */
  .main-nav { display: none !important; }

  /* Show mobile search bar */
  .mobile-search { display: block !important; }

  /* Mega menu never shows on mobile */
  .has-mega .mega-menu { display: none !important; }

  /* Product page layout stacks */
  .product-page .row.g-4 > .col-lg-5,
  .product-page .row.g-4 > .col-lg-4,
  .product-page .row.g-4 > .col-lg-3 {
    width: 100%;
  }

  /* Product gallery no sticky */
  .product-gallery { position: static !important; }

  /* Order summary no sticky */
  .order-summary-card { position: static !important; }

  /* Checkout steps compact */
  .checkout-steps .step-line { min-width: 10px; }

  /* Blog sidebar below on mobile */
  .blog-sidebar { margin-top: 24px; }

  /* Section header wraps on mobile */
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  /* Promo section padding */
  .promo-section { padding: 0 0 24px; }

  /* Footer trust grid */
  .footer-trust .col-6 { margin-bottom: 8px; }
  .trust-item { flex-direction: column; text-align: center; gap: 6px; }
  .trust-item i { font-size: 1.6rem; }

  /* Footer columns collapse */
  .footer-main .col-lg-3,
  .footer-main .col-lg-2 {
    width: 50%;
  }

  /* Account sidebar full width on mobile */
  .account-page .col-lg-3 { width: 100%; }
  .account-page .col-lg-9 { width: 100%; }

  /* Shop page filter sidebar full width below lg */
  .shop-page .col-lg-3 { display: none; }
  .shop-page .col-lg-9 { width: 100%; }

  /* Testimonial cards */
  .testimonialSwiper .swiper-slide { width: 100% !important; }

  /* Review form */
  .write-review { margin-top: 24px; }

  /* Product tabs */
  .product-tabs .tab-content { padding: 16px !important; }

  /* Qty control compact */
  .qty-control { display: inline-flex; }

  /* Sticky header on scroll */
  #siteHeader { top: 0; }

  /* Hide 'Wishlist' label text */
  .icon-label { display: none !important; }

  /* Cart table responsive */
  .cart-table-head { display: none !important; }
  .cart-row {
    display: block !important;
    padding: 14px 12px;
  }
  .cart-product { margin-bottom: 10px; }
  .cart-price::before { content: 'Price: '; font-size: 11px; color: #9ca3af; display: block; }
  .cart-total::before { content: 'Total: '; font-size: 11px; color: #9ca3af; display: block; }
}

/* ════════════════════════════════════════════════════════
   ██  BREAKPOINT: ≥ 992px  (Desktops — reset stickies)
════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  /* Restore product gallery sticky */
  .product-gallery { position: sticky !important; top: 90px; }

  /* Restore order summary sticky */
  .order-summary-card { position: sticky !important; top: 90px; }

  /* Show filter sidebar */
  .shop-page .col-lg-3 { display: block !important; }
  .shop-page .col-lg-9 { width: auto; }

  /* Account cols standard */
  .account-page .col-lg-3 { width: auto; }
  .account-page .col-lg-9 { width: auto; }
}

/* ════════════════════════════════════════════════════════
   ██  PRINT STYLES
════════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .floating-actions,
  .slide-cart, .mobile-sidebar, .admin-sidebar,
  .topbar, .main-nav { display: none !important; }
  body { font-size: 12pt; }
  .order-success-card, .order-summary-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ════════════════════════════════════════════════════════
   ██  TOUCH & PERFORMANCE HELPERS
════════════════════════════════════════════════════════ */

/* Smooth tap highlights */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(124,92,252,.15);
  touch-action: manipulation;
}

/* Smooth scrolling everywhere */
.swiper-wrapper, .mobile-sidebar, .slide-cart-body,
.admin-sidebar, .table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Prevent text size adjust on rotation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ════════════════════════════════════════════════════════
   ██  ADMIN PANEL RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .admin-sidebar {
    transform: translateX(-100%);
    z-index: 1050;
  }
  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }
  .admin-main { margin-left: 0 !important; }
  .admin-content { padding: 16px !important; }
  .admin-topbar { padding: 0 16px; }
}

@media (max-width: 576px) {
  .admin-content { padding: 12px !important; }
  .stat-card-admin { padding: 16px; }
  .stat-value { font-size: 1.3rem; }
  .admin-card-body { padding: 14px; }
  .admin-card-header { padding: 12px 14px; }
  .admin-tabs { gap: 3px; }
  .admin-tab { padding: 6px 12px; font-size: 12px; }

  /* Admin tables scroll */
  .admin-table { font-size: 12px; }
  .admin-table thead th { padding: 8px 10px; }
  .admin-table tbody td { padding: 9px 10px; }

  /* Product form on mobile */
  .admin-card-body .row.g-3 > [class*="col-md"] { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   ██  FORM CONTROL MOBILE FIXES
════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .form-control, .form-select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 10px 12px;
  }
  .input-group .form-control { font-size: 16px !important; }
  .btn-lg { padding: 12px 20px !important; font-size: 15px !important; }
  .btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
}

/* ════════════════════════════════════════════════════════
   ██  SAFE AREA INSETS (notched phones — iPhone X+)
════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .floating-actions {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .slide-cart {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .site-footer .footer-bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════════════════════════
   ██  LANDSCAPE PHONE FIX
════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-slide { min-height: 180px; padding: 14px 20px; }
  .hero-title { font-size: 1.2rem; }
  .hero-subtitle { display: none; }
  .slide-cart { height: 100dvh; }
  .mobile-sidebar { height: 100dvh; }
}

/* ════════════════════════════════════════════════════════
   ██  HIGH-DENSITY / RETINA
════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-slide { background-size: cover; }
}