/* ExclusiveWave — base component styles */

/* ── Contrast fix: readable text inside all dark sections ── */
.bg-gray-900 .text-gray-400,
.bg-gray-900 .text-gray-500,
[style*="background:#1c1c28"] .text-gray-400,
[style*="background:#1c1c28"] .text-gray-500,
[style*="background: #1c1c28"] .text-gray-400,
[style*="background: #1c1c28"] .text-gray-500 {
    color: #d1d5db !important; /* gray-300 — passes WCAG AA on dark bg */
}
.bg-gray-900 .text-gray-600,
[style*="background:#1c1c28"] .text-gray-600 {
    color: #9ca3af !important;
}
/* Footer base text — override Tailwind default gray-400 → gray-300 */
footer.bg-gray-900 { color: #d1d5db !important; }
footer.bg-gray-900 a { color: #d1d5db !important; }
footer.bg-gray-900 a:hover { color: #fff !important; }
/* Section headings stay white */
.bg-gray-900 .text-gray-200,
[style*="background:#1c1c28"] .text-gray-200 { color: #f3f4f6 !important; }
/* ────────────────────────────────────────────────────── */

/* ── Mobile touch targets: all interactive elements ≥ 44px ── */
button, [type="submit"], [type="button"],
.btn-amber, .qty-btn {
    min-height: 44px;
}
/* Hamburger menu buttons */
#mobileMenuBtn {
    min-height: 44px;
    min-width: 44px;
}

/* ── Sticky CTA bar: safe-area for iPhone notch / home indicator ── */
.sticky-cta {
    padding-bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
}

/* ── Cookie banner: safe-area ── */
#cookieBanner {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom, .75rem));
}

/* ── Article page: space for sticky CTA ── */
body:has(.sticky-cta) main {
    padding-bottom: 5rem;
}

/* ── Spec label on product pages: wrap on very small screens ── */
@media(max-width:400px){
    .spec-row { flex-direction: column !important; gap: .25rem; }
    .spec-label { width: auto !important; }
}

/* ── Product card names/prices: smaller on mobile ── */
@media(max-width:480px){
    .prod-name  { font-size: 1.1rem !important; }
    .prod-price { font-size: 1.35rem !important; }
}

/* ── Shop & article hero headings: scale down on mobile ── */
@media(max-width:640px){
    .font-syne.text-4xl  { font-size: 1.75rem !important; }
    .font-syne.text-5xl  { font-size: 2rem !important; }
}

/* ── Newsletter form on homepage: stack on mobile ── */
@media(max-width:420px){
    #newsletterForm .flex { flex-direction: column; }
    #newsletterForm .flex button { width: 100%; }
}

/* ─────────────────────────────────────────────────────── */
body{font-family:'Inter',system-ui,sans-serif;}
.font-serif{font-family:'Playfair Display',Georgia,serif;}
.prose h2{font-family:'Playfair Display',Georgia,serif;font-size:1.375rem;font-weight:700;color:#111827;margin:1.75rem 0 .6rem;}
.prose h3{font-size:1.05rem;font-weight:700;color:#1f2937;margin:1.25rem 0 .4rem;}
.prose p{line-height:1.8;color:#374151;margin-bottom:1rem;}
.prose ul,.prose ol{color:#374151;margin-bottom:1rem;padding-left:1.5rem;}
.prose li{line-height:1.7;margin-bottom:.3rem;}
.prose ul li{list-style-type:disc;}
.prose ol li{list-style-type:decimal;}
.prose a{color:#e11d48;text-decoration:underline;}
.prose strong{color:#111827;font-weight:700;}