/* One Night Miracle — responsive.css
   Desktop styles are inline; these rules override at tablet/phone widths.
   Uses !important to win over inline styles. */

/* ── ALWAYS-ON SAFETY GUARDS ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Prevent long words/emails from breaking layout */
p, span, a, h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }

/* ── HAMBURGER MENU (hidden on desktop) ── */
.onm-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: transparent;
  z-index: 200;
}
.onm-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #A6812D;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.onm-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.onm-hamburger.is-open span:nth-child(2) { opacity: 0; }
.onm-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.onm-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(251,241,236,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.onm-nav-overlay.is-open {
  display: flex;
  opacity: 1;
}
.onm-nav-overlay a, .onm-nav-overlay span {
  font-size: 18px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: #7A4A56 !important;
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
}
.onm-nav-overlay .onm-home-btn {
  margin-top: 12px;
  padding: 12px 28px !important;
  border: 1.5px solid rgba(201,162,75,.6) !important;
  border-radius: 30px !important;
  color: #A6812D !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* ── TABLET ( ≤ 1024px ) ── */
@media (max-width: 1024px) {
  header {
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  header nav {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 14px 18px !important;
  }
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Services 3-col → 2-col */
  [style*="repeat(3, 1fr)"][style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── LARGE PHONE / SMALL TABLET ( ≤ 820px ) ── */
@media (max-width: 820px) {
  /* Show hamburger, hide inline nav */
  .onm-hamburger { display: flex !important; }
  header nav { display: none !important; }

  /* Header layout */
  header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 18px 5vw !important;
    gap: 0 !important;
  }

  /* All multi-column grids → 1 column */
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
  [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(270px, 1fr)"], [style*="minmax(270px,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  /* Products page: side-by-side cards → stack */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Product hero cards: reduce min-height on mobile */
  a[style*="min-height:440px"], a[style*="min-height: 440px"] {
    min-height: 300px !important;
  }

  /* Headings scale */
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 28px !important; line-height: 1.15 !important; }
  h3 { font-size: 22px !important; }
  .onm-home-title { font-size: 30px !important; }
  .onm-tagline { font-size: 24px !important; }

  /* Home page hero */
  [style*="width:min(92vw,600px)"], [style*="width: min(92vw, 600px)"] {
    width: 90vw !important;
  }

  /* Footer padding */
  footer[style*="padding:60px 40px"], footer[style*="padding: 60px 40px"] {
    padding: 40px 24px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Footer heading */
  footer [style*="font-size:36px"], footer [style*="font-size: 36px"] {
    font-size: 26px !important;
  }
}

/* ── PHONE ( ≤ 520px ) ── */
@media (max-width: 520px) {
  /* Contact popup 2-col → 1-col */
  [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Edible product cards: image + text → stack */
  article[style*="display:flex"][style*="gap:22px"],
  article[style*="display: flex"][style*="gap: 22px"] {
    flex-direction: column !important;
    gap: 0 !important;
  }
  article[style*="display:flex"][style*="gap:22px"] > [style*="width:140px"],
  article[style*="display: flex"][style*="gap: 22px"] > [style*="width: 140px"] {
    width: 100% !important;
    height: 200px !important;
    border-radius: 14px 14px 0 0 !important;
  }
  article[style*="display:flex"][style*="gap:22px"] > [style*="flex:1"],
  article[style*="display: flex"][style*="gap: 22px"] > [style*="flex: 1"] {
    padding: 16px !important;
  }

  /* Headings */
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  .onm-home-title { font-size: 26px !important; }
  .onm-tagline { font-size: 21px !important; }

  /* Skincare quote */
  blockquote[style*="font-size:30px"], blockquote[style*="font-size: 30px"] {
    font-size: 20px !important;
  }

  /* Skincare title */
  h1[style*="font-size:60px"], h1[style*="font-size: 60px"] {
    font-size: 32px !important;
    letter-spacing: .06em !important;
  }

  /* Section padding */
  section { padding-left: 5vw !important; padding-right: 5vw !important; }

  /* Hero section padding */
  section[style*="padding:78px"], section[style*="padding: 78px"] {
    padding-top: 48px !important;
  }
  section[style*="padding:74px"], section[style*="padding: 74px"] {
    padding-top: 48px !important;
  }

  /* CTA buttons — full-width on very small screens */
  footer a[style*="padding:15px 38px"], footer a[style*="padding: 15px 38px"] {
    padding: 14px 28px !important;
    font-size: 11px !important;
  }

  /* Quality cert row — smaller gap */
  [style*="display:flex;flex-wrap:wrap;justify-content:center;gap:38px"],
  [style*="display: flex; flex-wrap: wrap; justify-content: center; gap: 38px"] {
    gap: 20px !important;
  }

  /* Services page: last card in 3-col that became 1-col looks fine */
  /* Web-dev screenshot */
  [style*="border-radius:18px;overflow:hidden"][style*="box-shadow:0 36px"] {
    border-radius: 12px !important;
  }
}

/* ── VERY SMALL PHONE ( ≤ 360px ) ── */
@media (max-width: 360px) {
  .onm-home-title { font-size: 22px !important; }
  h1 { font-size: 24px !important; }
  header { padding: 14px 4vw !important; }
}