/* ═══════════════════════════════════════════════════════════════
   CatchySpot Mobile CSS — Clean Rebuild
   Loaded after style.css. Uses !important only where inline
   styles from block_renderer must be overridden.
   ═══════════════════════════════════════════════════════════════ */

/* ── Global ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* ══ 1024px Tablet landscape ══════════════════════════════════ */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* All .blk-grid elements → 2 columns */
  .blk-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }

  /* Brand grid stays 3 col */
  .blk-brand-grid.blk-grid { grid-template-columns: repeat(3,1fr) !important; }

  /* Stats stays 2 col */
  .blk-stats-inner.blk-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0 !important; }

  /* Hero split: hide photo, stack */
  .blk-hero-split { grid-template-columns: 1fr !important; }
  .blk-hero-photo { display: none !important; }

  /* Growing banner: always stack vertically */
  .blk-growing-banner { flex-direction: column !important; }
  .blk-banner-img { width: 100% !important; min-height: 220px !important; order: -1; }
  .blk-banner-content { width: 100% !important; }

  /* Vendor CTA: stack */
  .blk-vendor-cta-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ══ 768px Mobile ═════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 16px !important; }

  /* Hide desktop header + topbar entirely on mobile */
  .topbar  { display: none !important; }
  .header  { display: none !important; }

  /* Navbar sits right under the new mobile header */
  .navbar  { top: var(--mheader-h, 104px) !important; }

  /* Mobile nav menu */
  .nav-menu {
    display: none !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 56px !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important;
    background: #3a1470 !important;
    z-index: 600 !important;
    padding: 8px 0 80px !important;
    overflow-y: auto !important;
  }
  .nav-menu.open { display: flex !important; }
  .nav-menu > li > a { padding: 13px 20px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  .dropdown {
    position: static !important; opacity: 1 !important; visibility: visible !important;
    transform: none !important; box-shadow: none !important; border: none !important;
    background: rgba(255,255,255,.06) !important; display: none !important; border-radius: 0 !important;
  }
  .has-dropdown.open .dropdown { display: block !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* ALL grids → 2 columns */
  .blk-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }

  /* Override specific blocks */
  .blk-two-cols.blk-grid   { grid-template-columns: 1fr !important; }
  .blk-three-cols.blk-grid { grid-template-columns: 1fr !important; }
  .blk-feature-strip.blk-grid { grid-template-columns: repeat(2,1fr) !important; }
  .blk-brand-grid.blk-grid { grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; }
  .blk-stats-inner.blk-grid { grid-template-columns: repeat(2,1fr) !important; gap: 0 !important; }

  /* Growing banner */
  .blk-growing-banner { flex-direction: column !important; min-height: auto !important; }
  .blk-banner-img     { width: 100% !important; min-height: 220px !important; order: -1; }
  .blk-banner-content { width: 100% !important; padding: 28px 20px !important; }
  .blk-banner-actions { flex-wrap: wrap !important; }

  /* Vendor CTA */
  .blk-vendor-cta-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .blk-vendor-perks    { grid-template-columns: repeat(2,1fr) !important; }

  /* Typography scale */
  h1 { font-size: clamp(24px,7vw,36px) !important; }
  h2 { font-size: clamp(20px,5vw,28px) !important; }
  .section-title { font-size: clamp(20px,5vw,26px) !important; }
}

/* ══ 480px Small phones ═══════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 14px !important; }

  /* Grids on small phones */
  .blk-grid                       { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .blk-products.blk-grid          { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .blk-why-grid.blk-grid          { grid-template-columns: 1fr !important; }
  .blk-feature-strip.blk-grid     { grid-template-columns: 1fr !important; }
  .blk-testimonials-grid.blk-grid { grid-template-columns: 1fr !important; }
  .blk-features.blk-grid          { grid-template-columns: 1fr !important; }
  .blk-stats-inner.blk-grid       { grid-template-columns: repeat(2,1fr) !important; }
  .blk-brand-grid.blk-grid        { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .blk-vendor-perks               { grid-template-columns: 1fr !important; }

  /* Growing banner */
  .blk-banner-img     { min-height: 180px !important; }
  .blk-banner-content { padding: 22px 16px !important; }
  .blk-banner-content h2 { font-size: clamp(20px,6vw,28px) !important; }
  .blk-banner-actions a { width: 100% !important; justify-content: center !important; }

  /* CTA */
  .blk-cta-actions   { flex-direction: column !important; gap: 10px !important; }
  .blk-cta-actions a { width: 100% !important; justify-content: center !important; }

  /* Newsletter */
  .blk-newsletter-form { flex-direction: column !important; border-radius: 8px !important; overflow: visible !important; box-shadow: none !important; }
  .blk-newsletter-form input  { border-radius: 8px !important; margin-bottom: 8px; border: 1.5px solid #e0d8f0 !important; }
  .blk-newsletter-form button { border-radius: 8px !important; width: 100% !important; padding: 13px !important; }

  /* Hero slider actions */
  .blk-hero-slider-actions   { flex-direction: column !important; gap: 8px !important; }
  .blk-hero-slider-actions a { width: 100% !important; justify-content: center !important; text-align: center !important; }

  /* Stats border fix */
  .blk-stats-inner.blk-grid > div { border-right: none !important; padding: 16px 10px !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }

  /* Typography */
  h1 { font-size: clamp(20px,7vw,28px) !important; }
  h2 { font-size: clamp(18px,5vw,24px) !important; }
}

/* ══ 360px Very small ═════════════════════════════════════════ */
@media (max-width: 360px) {
  .container { padding: 0 12px !important; }
  .blk-grid { grid-template-columns: 1fr !important; }
  .blk-products.blk-grid   { grid-template-columns: repeat(2,1fr) !important; }
  .blk-brand-grid.blk-grid { grid-template-columns: repeat(2,1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE HEADER — compact two-row header, mobile only
   ═══════════════════════════════════════════════════════════════ */

/* Hidden everywhere by default (desktop/tablet use .header instead) */
.mheader { display: none; }

@media (max-width: 768px) {
  :root { --mheader-h: 104px; }

  .mheader {
    display: block;
    position: sticky;
    top: 0;
    z-index: 500;
    background: #fff;
    border-bottom: 1.5px solid #e0d8f0;
    box-shadow: 0 2px 10px rgba(74,28,140,.06);
  }

  .mheader-row1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
  }

  .mheader-burger {
    width: 36px; height: 36px;
    border: none;
    background: #f8f4ff;
    border-radius: 9px;
    color: #4a1c8c;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    justify-self: start;
  }

  .mheader-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 0;
    justify-self: center;
  }
  .mheader-logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
  }

  .mheader-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    justify-self: end;
  }
  .mheader-icon {
    position: relative;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    color: #4a1c8c;
    font-size: 16px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mheader-icon:active { background: #f0e8ff; }
  .mheader-badge {
    position: absolute;
    top: 1px; right: 1px;
    min-width: 15px; height: 15px;
    background: #4a1c8c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #fff;
  }
  .mheader-badge.green { background: #16a34a; }

  .mheader-row2 {
    padding: 0 14px 10px;
  }
  .mheader-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f4ff;
    border: 1.5px solid #e8e0fa;
    border-radius: 10px;
    padding: 9px 13px;
  }
  .mheader-search i {
    color: #9090b0;
    font-size: 13px;
    flex-shrink: 0;
  }
  .mheader-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: #1a1a2e;
    min-width: 0;
  }
  .mheader-search input::placeholder { color: #b0a8c8; }
}

@media (max-width: 360px) {
  .mheader-logo img { height: 32px; }
}


/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL COMPACT SPACING — applies to every block's outer
   section/div. Uses !important since block_renderer outputs
   inline padding; per-block <style id="blk-X"> rules with their
   own !important still win because they're more specific AND
   load after this stylesheet in source order isn't guaranteed —
   so blocks needing different mobile padding set it via their
   own #blk-{id} rule which has higher specificity than this
   plain-class fallback.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [id^="blk-"] > section,
  [id^="blk-"] > div.blk-section-padded {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 480px) {
  [id^="blk-"] > section,
  [id^="blk-"] > div.blk-section-padded {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
}