/* ============================================================
   CARTPULSE — Responsive & Global Layout
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

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

/* ── Body offset for sticky nav ── */
body > main,
body > .cp-main,
.page-content { padding-top: 72px; }

/* ── Utility display helpers ── */
.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }
.d-grid  { display: grid !important; }

@media (max-width: 768px) {
  .d-md-none   { display: none !important; }
  .d-md-block  { display: block !important; }
  .d-md-flex   { display: flex !important; }
}
@media (max-width: 480px) {
  .d-sm-none   { display: none !important; }
  .d-sm-block  { display: block !important; }
}

/* ── Grid columns ── */
.col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.col-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 1024px) {
  .col-4 { grid-template-columns: repeat(2, 1fr); }
  .col-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .col-2, .col-3, .col-4 { grid-template-columns: 1fr; }
}

/* ── Spacing utilities ── */
.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.pt-0  { padding-top: 0; }
.pt-24 { padding-top: 24px; }
.pt-48 { padding-top: 48px; }
.pt-64 { padding-top: 64px; }

/* ── Text utilities ── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: #747876; }
.text-gold   { color: #e9c349; }
.text-serif  { font-family: 'Playfair Display', serif; }
.fw-bold     { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.text-upper  { text-transform: uppercase; letter-spacing: 0.08em; }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11px; }

/* ── Flex utilities ── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* ── Width utilities ── */
.w-full { width: 100%; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 680px; }
.max-w-lg  { max-width: 900px; }
.max-w-xl  { max-width: 1200px; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* ── Nav / footer padding offsets ── */
@media (max-width: 768px) {
  body > main, body > .cp-main, .page-content { padding-top: 65px; }
  .cp-footer { padding-bottom: 80px; }
}

/* ── Remove dark glassmorphism inline styles ── */
[style*="background: rgba(19,19,21"],
[style*="background:rgba(19,19,21"],
[style*="background: rgba(14,14,16"],
[style*="background:rgba(14,14,16"],
[style*="background: rgba(45,50,80"],
[style*="background:rgba(45,50,80"] {
  background: rgba(250,249,247,0.92) !important;
}

/* Keep search overlay and mobile menu with their own bg */
#search-overlay { background: rgba(250,249,247,0.97) !important; }
#cp-mobile-menu { background: #faf9f7 !important; }

/* ── Print ── */
@media print {
  .cp-nav, .cp-footer, .av-util-bar, .cp-mobile-toggle,
  .cp-mobile-menu, .cp-mobile-bottom-nav { display: none !important; }
  body > main, body > .cp-main { padding-top: 0 !important; }
}

/* ============================================================
   CARTPULSE — Page-Specific Responsive Overrides
   ============================================================ */

/* ── Missing grid class definitions ── */
.bm-cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

/* ── Section padding reduction ── */
@media (max-width: 768px) {
  section[style*="padding:120px"],
  section[style*="padding: 120px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding:100px"],
  section[style*="padding: 100px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding:80px"],
  section[style*="padding: 80px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  .cp-section { padding: 60px 0 !important; }
}
@media (max-width: 480px) {
  section[style*="padding:120px"],
  section[style*="padding: 120px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding:100px"],
  section[style*="padding: 100px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  .cp-section { padding: 48px 0 !important; }
}

/* ── Container horizontal padding on small screens ── */
@media (max-width: 640px) {
  .cp-container, .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Product detail responsive handled in bluemountain.css */

/* ── Cart page ── */
@media (max-width: 900px) {
  .bm-cart-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .bm-cart-table thead { display: none; }
  .bm-cart-table tr { display: block; border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
  .bm-cart-table td { display: block; padding: 4px 0; font-size: 13px; }
  .bm-cart-table td::before { content: attr(data-label); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #747876; display: block; margin-bottom: 2px; }
  .bm-cart-product { flex-direction: column; gap: 8px; }
  .bm-cart-product img { width: 60px !important; height: 60px !important; }
}

/* ── Checkout page ── */
@media (max-width: 900px) {
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 640px) {
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"],
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Register / Login forms ── */
@media (max-width: 640px) {
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:16px"],
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── About page hero image stack ── */
@media (max-width: 768px) {
  div[style*="grid-template-rows:1fr 1fr"] { height: 300px !important; }
}
@media (max-width: 480px) {
  div[style*="grid-template-rows:1fr 1fr"] { height: 220px !important; }
}

/* ── Shop page sidebar ── */
@media (max-width: 900px) {
  .cp-shop-sidebar,
  div[style*="grid-template-columns:220px"] > *:first-child { display: none !important; }
}

/* ── Navigation mobile improvements ── */
@media (max-width: 768px) {
  .cp-nav-links { display: none; }
  .cp-mobile-toggle { display: flex !important; }

  /* Increase touch targets */
  .cp-nav-icon-btn { min-width: 44px; min-height: 44px; }
  .bm-btn-primary, .cp-btn-primary, .cp-btn { min-height: 44px; }

  /* Prevent horizontal overflow */
  .cp-nav { overflow: visible; }
}

/* ── Newsletter form stack on mobile ── */
@media (max-width: 480px) {
  .bm-newsletter-form,
  form[style*="display:flex"][style*="max-width"] {
    flex-direction: column !important;
  }
  .bm-newsletter-input { border-right: 1px solid rgba(255,255,255,0.15) !important; border-bottom: none !important; }
  .bm-newsletter-btn { width: 100%; }
}

/* ── Product grid mobile (shop page already has this, belt-and-suspenders) ── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:32px"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(3,1fr)"][style*="gap:32px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Founder/CEO bio block (about page) ── */
@media (max-width: 640px) {
  div[style*="grid-template-columns:380px"] img { aspect-ratio: 4/5; width: 100%; }
}

/* ── Admin panel responsive ── */
@media (max-width: 768px) {
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; }
  .admin-sidebar.open { display: block !important; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 999; overflow-y: auto; }
  .admin-table { font-size: 13px; }
  .admin-table th:nth-child(n+4),
  .admin-table td:nth-child(n+4) { display: none; }
  .admin-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .admin-stats-grid { grid-template-columns: 1fr !important; }
  .admin-table th:nth-child(n+3),
  .admin-table td:nth-child(n+3) { display: none; }
  .modal-content { padding: 20px !important; margin: 16px !important; }
}

/* ── Ensure images don't overflow ── */
img { max-width: 100%; }
table { width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }

/* ── Blog layout mobile ── */
@media (max-width: 768px) {
  .bm-blog-layout { grid-template-columns: 1fr !important; }
  .bm-blog-sidebar { position: static !important; }
  .bm-blog-grid { grid-template-columns: 1fr !important; }
}

/* ── Shipping info cards ── */
@media (max-width: 640px) {
  .bm-shipping-grid { grid-template-columns: 1fr !important; }
}

/* ── Wishlist / product grid ── */
@media (max-width: 640px) {
  .bm-products-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
}
@media (max-width: 400px) {
  .bm-products-grid { grid-template-columns: 1fr !important; }
}

/* ── Order success / order detail ── */
@media (max-width: 640px) {
  .bm-order-meta { flex-direction: column; gap: 12px; }
  .bm-order-header { padding: 20px; }
}