/* Sofia Springs — mobile & tablet fixes (layered over the Claude Design export) */

/* ---------- Tablet (≤ 980px) ---------- */
@media (max-width: 980px) {
  #dc-root section[style*="padding: 96px"] { padding-top: 72px !important; }
  #dc-root header nav { flex-wrap: nowrap !important; gap: 18px !important; }
  #dc-root header nav a { white-space: nowrap; }
  #dc-root header + section > img { object-position: 80% 100% !important; }
  #dc-root header + section > div:nth-child(2) {
    background: linear-gradient(90deg, rgba(247,244,235,.98) 0%, rgba(247,244,235,.93) 55%,
                rgba(247,244,235,.35) 85%, rgba(247,244,235,0) 100%) !important;
  }
  #staples > div:nth-child(2) { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {
  body { overflow-x: clip; }

  /* Announcement bar */
  #dc-root .sc-host > div > div:first-child {
    font-size: 9.5px !important; letter-spacing: .12em !important;
    padding: 8px 14px !important; line-height: 1.5 !important;
  }

  /* Header: logo left, icons right, menu as one swipeable row underneath */
  #dc-root header > div {
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px !important; padding: 8px 16px 6px !important;
  }
  #dc-root header > div > a { grid-column: 1; grid-row: 1; justify-self: start; }
  #dc-root header > div > a { transform: scale(.85); transform-origin: left center; }
  #dc-root header > div > div:last-child { grid-column: 2; grid-row: 1; gap: 0 !important; }
  #dc-root header > div > div:last-child button { width: 44px !important; height: 44px !important; }
  #dc-root header nav {
    grid-column: 1 / -1; grid-row: 2;
    flex-wrap: nowrap !important; justify-content: space-between !important;
    gap: 18px !important; overflow-x: auto; scrollbar-width: none;
    padding: 8px 0 4px; border-top: 1px solid rgba(58,69,48,.12);
  }
  #dc-root header nav::-webkit-scrollbar { display: none; }
  #dc-root header nav a { white-space: nowrap; padding: 6px 0; }

  /* Hero: readable text over the photo, photo shows at the bottom */
  #dc-root header + section { min-height: 0 !important; align-items: flex-start !important; }
  #dc-root header + section > img { object-position: 70% 100% !important; }
  #dc-root header + section > div:nth-child(2) {
    background: linear-gradient(180deg, rgba(247,244,235,.98) 0%, rgba(247,244,235,.95) 72%,
                rgba(247,244,235,.6) 86%, rgba(247,244,235,.1) 100%) !important;
  }
  #dc-root header + section > div:nth-child(3) { padding: 36px 20px 170px !important; }
  #dc-root header + section h1 { font-size: 42px !important; }
  #dc-root header + section p { font-size: 16px !important; }
  #dc-root header + section a, #dc-root header + section button { min-height: 48px; }

  /* Section rhythm + headings */
  #dc-root section[style*="padding: 96px"] { padding: 56px 16px 0 !important; }
  #dc-root section[style*="margin: 96px auto"] { margin-top: 56px !important; padding: 0 16px !important; }
  #dc-root section[style*="margin-top: 96px"] { margin-top: 56px !important; }
  #dc-root footer { margin-top: 56px !important; }
  #dc-root section h2 { font-size: 34px !important; }
  #dc-root section > div:first-child[style*="margin-bottom: 40px"] { margin-bottom: 28px !important; }

  /* Shop by harvest + Bestsellers: swipeable carousels */
  #staples > div:nth-child(2),
  #bestsellers > div:nth-child(2) {
    display: grid !important; grid-template-columns: none !important;
    grid-auto-flow: column; grid-auto-columns: 74%;
    gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none;
  }
  #staples > div:nth-child(2)::-webkit-scrollbar,
  #bestsellers > div:nth-child(2)::-webkit-scrollbar { display: none; }
  #staples > div:nth-child(2) > a,
  #bestsellers > div:nth-child(2) > div > div { scroll-snap-align: start; }

  /* Full range: 2 products per row */
  #shop > div:nth-child(3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  #shop > div:nth-child(2) { margin-bottom: 24px !important; }

  /* Compact product cards (bestsellers + full range) */
  #bestsellers > div:nth-child(2) > div > div > div:last-child,
  #shop > div:nth-child(3) > div > div > div:last-child { padding: 12px 12px 14px !important; gap: 4px !important; }
  #shop > div:nth-child(3) > div > div > div:last-child > div:nth-child(1) { font-size: 13px !important; letter-spacing: .02em !important; }
  #shop > div:nth-child(3) > div > div > div:last-child > div:nth-child(2) { font-size: 8.5px !important; letter-spacing: .1em !important; }
  #shop > div:nth-child(3) > div > div > div:last-child > div:nth-child(3) { margin-top: 6px !important; }
  #shop > div:nth-child(3) span[style*="font: 500 18px"] { font-size: 15px !important; }
  #shop > div:nth-child(3) button[aria-label^="Add"] { width: 38px !important; height: 38px !important; flex-shrink: 0; }
  #bestsellers span[style*="height: 22px"], #shop span[style*="height: 22px"] { font-size: 8.5px !important; padding: 0 8px !important; height: 20px !important; }
  #shop > div:nth-child(3) div[style*="top: 14px"] { top: 8px !important; left: 8px !important; }

  /* Pantry Ritual box */
  #ritual > div { padding: 24px 18px !important; }

  /* Large story photos: shorter on phones */
  #dc-root section div[style*="aspect-ratio: 657"] { aspect-ratio: 4 / 3 !important; }

  /* Testimonials */
  #dc-root figure { padding: 22px !important; }
  #dc-root figure blockquote { font-size: 18px !important; }

  /* Comfortable tap targets */
  #dc-root form input { min-height: 46px; font-size: 16px !important; }
}