/* Eclipse Mart — global responsive enhancements */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal overflow */
body {
  overflow-x: hidden;
}

/* Fluid containers */
.container {
  width: 100%;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* Header layout — stack gracefully on small screens */
@media (max-width: 1100px) {
  .main-header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 12px;
  }
  .main-header .header-main-nav { display: none !important; }
  .main-header .header-right {
    justify-content: flex-end;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .utility-bar .container {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    font-size: 0.7rem;
  }
  .logo a { font-size: 1rem !important; }
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 40px);
}

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr; }
  footer .newsletter-inline-form {
    flex-direction: column;
  }
  footer .newsletter-inline-form input,
  footer .newsletter-inline-form button {
    border-radius: var(--radius-pill) !important;
    width: 100%;
  }
  footer .newsletter-inline-form input { border-right: 1px solid var(--border) !important; margin-bottom: 8px; }
}

/* Shop page */
@media (max-width: 991px) {
  .shop-layout { flex-direction: column !important; }
  .shop-sidebar { width: 100% !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .shop-hero-banner { padding: 32px 24px !important; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr !important; }
}

/* Cart & checkout */
@media (max-width: 900px) {
  .cart-grid-responsive { grid-template-columns: 1fr !important; }
  .cart-item { flex-direction: column !important; align-items: flex-start !important; }
  .cart-item > div:first-child { width: 100% !important; max-width: 140px; }
}

/* Product detail */
@media (max-width: 900px) {
  .product-detail-grid { grid-template-columns: 1fr !important; }
  .gallery-wrapper { flex-direction: column-reverse !important; }
  .gallery-wrapper .thumbnails {
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto;
    gap: 10px !important;
  }
}

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

@media (max-width: 992px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 576px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-filters { flex-wrap: wrap; gap: 12px !important; justify-content: flex-start !important; }
}

/* Content pages */
.page-content-card {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 576px) {
  .page-content-main { padding: 32px 0 60px; }
  .page-content-card { padding: 24px 18px !important; border-radius: var(--radius) !important; }
}

/* About page */
@media (max-width: 992px) {
  .ab-precision, .ab-footprint-grid { grid-template-columns: 1fr !important; }
  .ab-timeline { grid-template-columns: repeat(2, 1fr) !important; }
  .ab-years { right: 12px !important; bottom: 12px !important; }
}

@media (max-width: 560px) {
  .ab-timeline { grid-template-columns: 1fr !important; }
  .ab-hero-inner { padding: 60px 0 70px !important; }
}

/* Contact page */
@media (max-width: 992px) {
  .ct-grid { grid-template-columns: 1fr !important; }
  .ct-form-row { grid-template-columns: 1fr !important; }
}

/* Home — BlueMountain sections */
@media (max-width: 992px) {
  .tm-hero { padding: 40px 0 56px; }
  .tm-hero-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .tm-hero-visual { order: -1; }
  .tm-brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tm-features-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .tm-promise-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tm-sec-head { flex-direction: column; align-items: flex-start !important; }
}

@media (max-width: 576px) {
  .tm-brands-grid { grid-template-columns: 1fr !important; }
  .tm-hero-btns { flex-direction: column; width: 100%; }
  .tm-hero-btns a { text-align: center; width: 100%; }
  .tm-hero-badge { left: 12px !important; right: 12px; font-size: 0.75rem; }
  .tm-newsletter-form { flex-direction: column; max-width: 100% !important; padding: 0 8px; }
  .tm-newsletter-form input,
  .tm-newsletter-form button {
    border-radius: var(--radius-pill) !important;
    width: 100%;
  }
  .tm-newsletter-form button { margin-top: 8px; }
  .tm-section { padding: 48px 0; }
}

/* Tables scroll on mobile */
@media (max-width: 600px) {
  .specs-table, table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .header-icon-link,
  .tm-prod-cart,
  .sp-btn,
  .btn,
  .mobile-bottom-nav a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Swiper slides equal height */
.swiper-slide { height: auto; }

/* ============================================================
   ECLIPSE MART — Dark theme correction layer (loaded last)
   Midnight deep blue surfaces + solar gold accents.
   ============================================================ */

html, body { background: var(--bg-cream); color: var(--text-dark); }

/* ---- Card & panel surfaces (were white in the old light theme) ---- */
.card,
.product-card,
.testimonial-card,
.filters-sidebar,
.contact-form-card,
.contact-bottom-card,
.page-content-card,
.vs-product-card,
.hero-float-card,
.bm-prod-card,
.bm-drinks-feat,
.bm-sidebar-card,
.bm-shop-card,
.bm-xs-card,
.bm-thumb,
.bm-cart-table-wrap,
.bm-summary-card,
.bm-auth-card,
.bm-content-card,
.bm-account-content,
main .container.card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-dark);
}
.bm-pd-page,
.product-card { border-color: var(--border) !important; }

/* Glassmorphism touch on key panels */
.bm-summary-card,
.bm-auth-card,
.bm-sidebar-card,
.bm-content-card {
  backdrop-filter: blur(12px);
  border: 1px solid rgba(193,197,227,0.10) !important;
}

/* Image wells inside cards */
.product-img-wrapper,
.bm-prod-img,
.bm-shop-card .img-wrap,
.bm-xs-card .img,
.bm-gallery-main,
.bm-cart-product img,
.stock-bar { background: var(--surface-2) !important; }

/* Section backgrounds that were cream/light */
.bm-page,
.bm-shop-page,
.bm-cart-page,
.bm-banners,
.bm-drinks,
.bm-features-section,
.page-content-main,
.bm-auth-page { background: var(--bg-cream) !important; }
.bm-trust,
.bm-feature-card { background: var(--bg-light) !important; }
.bm-feature-card { border: 1px solid var(--border); }

/* ---- Form fields ---- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="date"], select, textarea,
.bm-form-input, .bm-trust-form input, .bm-sort-wrap select,
.bm-cart-promo input, .vs-newsletter-form input, .input-group input,
.input-group select, .input-group textarea {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
.bm-form-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  background: var(--surface-2) !important;
}

/* ---- Gold-filled buttons / chips need dark text ---- */
.btn-primary,
.btn-reset-filters,
.vs-btn-primary,
.vs-add-cart,
.shop-add-cart-btn,
.cart-checkout-btn,
.bm-btn-primary,
.bm-btn-add-cart,
.bm-btn-checkout,
.bm-btn-sage,
.bm-btn-sage-fill,
.bm-prod-cart, .bm-prod-add,
.bm-shop-card .add-btn,
.bm-xs-card .xs-add,
.btn-partner,
.btn-add-to-cart,
.bm-cat-nav a.active,
.bm-cat-nav a.active i,
.bm-btn-reset,
.bm-size-btn.active,
.pagination .active,
.bm-pagination a.active,
.bm-shop-card .badge-sale,
.bm-shop-card .badge-new,
.bm-prod-sale,
.badge-sale,
.badge-bestseller,
.vs-hero-badge,
.vs-badge-new,
.product-card-badge,
.cart-count, .wishlist-count,
.header-icons .cart-count {
  color: var(--on-primary) !important;
}
.bm-shop-card .badge-new,
.bm-gallery-badge,
.product-card-badge { background: var(--gold) !important; }

/* ---- Headings, product names & prices -> light (gold reserved for accents) ---- */
.bm-sec-head h2,
.bm-shop-top h1,
.bm-pd-title,
.bm-cart-title,
.bm-summary-card h3,
.bm-content-card h2,
.bm-features-head h2,
.bm-crosssell-head h2,
.bm-account-content > h2,
.bm-wishlist-head h1,
.bm-empty-state h3,
.bm-sidebar-store,
.page-content-card h1,
.policy-content h2,
.bm-prod-name, .bm-prod-name a,
.bm-shop-card .name, .bm-shop-card .name a,
.bm-xs-card .info h4,
.bm-cart-product h4,
.footer-home-logo,
.section-title,
.product-name { color: var(--text-dark) !important; }

.bm-prod-price,
.bm-shop-card .price,
.bm-cart-price,
.bm-pd-price,
.bm-summary-total span:last-child,
.bm-xs-card .info .price,
.product-price { color: var(--primary) !important; }

/* Muted product copy that used hardcoded greys */
.product-description,
.product-category-tag { color: var(--text-muted) !important; }
.wishlist-btn { color: var(--text-muted); }

/* ---- Soft-tint pills / eyebrows -> gold tint ---- */
.section-label,
.eyebrow,
.hero-badge,
.vs-hero-badge,
.bm-banner-tag,
.bm-trust-label {
  background: rgba(233,195,73,0.12) !important;
  color: var(--primary) !important;
  border-color: rgba(233,195,73,0.35) !important;
}

/* ---- Misc tonal fixes ---- */
.bm-size-btn { background: var(--surface) !important; color: var(--text-dark); }
.bm-summary-divider { border-top-color: var(--border) !important; }
.bm-qty-box, .bm-cart-qty { border-color: var(--border) !important; }
.bm-tabs { border-bottom-color: var(--border) !important; }
.icon-btn { color: var(--text-dark); }
.icon-btn:hover { background: rgba(255,255,255,0.08); }
.bm-secure-bar { background: rgba(233,195,73,0.10) !important; color: var(--primary) !important; }
.bm-ship-box { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.bm-ship-box strong { color: var(--text-dark) !important; }
.bm-content-hero { background: linear-gradient(135deg, var(--secondary) 0%, var(--bg-light) 100%) !important; }
.mobile-bottom-nav { background: var(--surface) !important; border-top-color: var(--border) !important; }
.search-overlay { background: rgba(7,13,35,0.97) !important; }

/* Eclipse "solar flare" glow behind hero content */
.bm-hero-overlay {
  background: radial-gradient(circle at 50% 60%, rgba(233,195,73,0.10), transparent 55%),
              linear-gradient(to bottom, rgba(7,13,35,0.55) 0%, rgba(7,13,35,0.78) 100%) !important;
}

/* ============================================================
   ECLIPSE MART — Full responsive pass (phones → desktops)
   ============================================================ */

/* Safe area + mobile bottom nav clearance */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Checkout layout */
@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .checkout-grid aside > div {
    position: static !important;
  }
}

/* Checkout form fields stack on narrow screens */
@media (max-width: 600px) {
  .checkout-field-row {
    grid-template-columns: 1fr !important;
  }
}

/* Product detail */
@media (max-width: 768px) {
  .bm-pd-page .gallery-wrapper {
    flex-direction: column !important;
  }
  .bm-thumbs {
    flex-direction: row !important;
    overflow-x: auto;
    width: 100% !important;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .bm-pd-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .bm-qty-box {
    width: 100%;
    justify-content: center;
  }
  .bm-breadcrumb {
    font-size: 0.75rem;
    word-break: break-word;
  }
}

/* Policy & content pages */
.policy-content h2 {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  margin-top: 1.75rem;
}
.policy-content p,
.policy-content li {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  line-height: 1.75;
}
.shipping-rates-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bm-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bm-spec-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.6;
}
.bm-spec-list li:last-child { border-bottom: none; }

/* Footer legal links */
.footer-legal-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
}
.footer-legal-inline a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-legal-inline a:hover { color: var(--primary); }
.footer-legal-inline span { color: var(--border); }

@media (max-width: 768px) {
  .footer-dark-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .footer-home-links {
    flex-direction: column;
    gap: 10px;
  }
}

/* Cart table horizontal scroll on small phones */
@media (max-width: 640px) {
  .bm-cart-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bm-cart-table {
    min-width: 520px;
  }
}

/* Hero text scaling */
@media (max-width: 480px) {
  .bm-hero-content h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
  .bm-hero-content p {
    font-size: 0.95rem !important;
  }
  .bm-hero { min-height: 60vh !important; padding-top: 80px !important; }
  .util-right { display: none !important; }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1100px) {
  .bm-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-dark-grid {
    grid-template-columns: 1.2fr 1fr 1fr !important;
  }
}

/* Large touch targets — all interactive elements */
@media (max-width: 768px) {
  .bm-tab,
  .bm-cat-nav a,
  .footer-links a,
  .footer-home-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Order success / account grids */
@media (max-width: 768px) {
  .order-recap [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}