/* ============================================================
   Sweet Dime — Responsive overrides
   Uses !important to win against inline JSX styles.
   Breakpoints: tablet ≤ 980px, mobile ≤ 640px
   ============================================================ */

/* ---------- TABLET (≤ 980px) ---------- */
@media (max-width: 980px) {

  /* Hero typography */
  [data-sd="hero-h1"] { font-size: clamp(44px, 8vw, 80px) !important; }
  [data-sd="hero-stats"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Two-column section grids collapse */
  [data-sd="section-2col"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  [data-sd="section-5-7"] {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }

  /* Process strip — packaging boxes wrap */
  [data-sd="process-pack"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Footer — collapse to 2 columns then 1 */
  [data-sd="footer-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  /* Provenance image caption floats inside, not -32 outside */
  [data-sd="provenance-caption"] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: -32px !important;
    margin-left: 24px !important;
    max-width: none !important;
  }

  /* Specs CoA preview — remove rotation on small screens */
  [data-sd="specs-doc"] { transform: none !important; }

  /* Reduce big section padding */
  [data-sd="section"] { padding: 88px 0 !important; }

  /* Nav links shrink and condense */
  [data-sd="nav-links"] { gap: 20px !important; }
  [data-sd="nav-cta"] { display: none !important; }
}

/* ---------- MOBILE (≤ 640px) ---------- */
@media (max-width: 640px) {

  /* Hero typography becomes denser */
  [data-sd="hero-h1"] { font-size: clamp(40px, 11vw, 64px) !important; }
  [data-sd="hero-stats"] { grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding-top: 24px !important; }
  [data-sd="hero-stat-k"] { font-size: 26px !important; }

  /* Section H2s shrink */
  [data-sd="section-h2"] { font-size: clamp(32px, 8.5vw, 44px) !important; }

  /* Product image card shrinks slightly */
  [data-sd="product-name"] { font-size: clamp(46px, 13vw, 64px) !important; }

  /* Footer columns stack fully */
  [data-sd="footer-grid"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-sd="footer-meta"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Tabs (Products) wrap properly */
  [data-sd="product-tabs"] { gap: 4px !important; }

  /* Trade form intro stack: title big copy + form go vertical */
  [data-sd="trade-form-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Buttons full-width on mobile */
  [data-sd="hero-ctas"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-sd="hero-ctas"] > * {
    text-align: center;
    justify-content: center;
  }

  /* Reduce gutters */
  [data-sd="container"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* Marquee speed similar but font smaller */
  [data-sd="marquee-item"] { font-size: 22px !important; }

  /* Card content padding */
  [data-sd="trade-form"] { padding: 24px 22px !important; }
  [data-sd="specs-doc"] { padding: 24px 22px !important; }

  /* Form rows collapse */
  [data-sd="form-2col"] { grid-template-columns: 1fr !important; }

  /* Volume / origin selector becomes 1 column */
  [data-sd="volume-tier"] { grid-template-columns: 1fr !important; }

  /* Process steps stack as 1 column on tightest screens */
  [data-sd="process-grid"] { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Provenance image full width */
  [data-sd="provenance-caption"] {
    margin-top: 16px !important;
    margin-left: 0 !important;
    border-left-width: 2px !important;
  }

  /* Nav: hide regular link bar; show hamburger */
  [data-sd="nav-links"] { display: none !important; }
  [data-sd="nav-hamburger"] { display: inline-flex !important; }
}

/* Hamburger toggle target — hidden by default, shown via media query */
[data-sd="nav-hamburger"] { display: none; }

/* Mobile menu sheet — shown via state */
.sd-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(251, 247, 238, 0.98);
  backdrop-filter: blur(20px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 80px 24px 32px;
  gap: 18px;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-mobile-menu.open { transform: translateY(0); }
.sd-mobile-menu a {
  font-family: var(--sd-font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--sd-cocoa-900);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--sd-border-light);
}
.sd-mobile-menu .close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid var(--sd-border-strong);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--sd-cocoa-900);
}

/* Better default image rendering on mobile */
@media (max-width: 640px) {
  img { max-width: 100%; height: auto; }
}