/* === LuxeTopper Full Fallback / Enhancement CSS v4 ===
   Purpose: render page correctly WITHOUT Tailwind. Safe to keep AFTER a real Tailwind build.
   Fixes: button padding/icon spacing (px-8, ml-2), gap utilities, FAQ spacing (space-y-6),
   missing responsive grid utilities, gradient sources, additional colors, etc.
*/

/* -------- Base / reset -------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin:0; color:#111827; background:#F7F4EF;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
::-webkit-scrollbar{display:none;}
html,body{-ms-overflow-style:none;scrollbar-width:none;}

/* -------- Color vars -------- */
:root{
  --cream:#F7F4EF;
  --gray-900:#111827; --gray-700:#374151; --gray-600:#4b5563; --gray-400:#9ca3af; --gray-100:#f3f4f6; --gray-50:#f9fafb;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-600:#ea580c; --orange-700:#c2410c;
  --green-700:#15803d; --white:#ffffff;
}

/* -------- Layout helpers -------- */
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto;}
.mx-auto{margin-left:auto;margin-right:auto;}
.grid{display:grid;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.text-center{text-align:center;}
.object-cover{object-fit:cover;}
.sticky{position:sticky;}
.top-0{top:0;}
.z-50{z-index:50;}
.overflow-hidden{overflow:hidden;}

/* space-x helpers */
.space-x-2 > *:not(:last-child){margin-right:.5rem;}
.space-x-8 > *:not(:last-child){margin-right:2rem;}
/* space-y */
.space-y-6 > * + *{margin-top:1.5rem;}

/* -------- Spacing -------- */
.px-4{padding-left:1rem;padding-right:1rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.p-6{padding:1.5rem;}
.p-8{padding:2rem;}
.mb-2{margin-bottom:.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-12{margin-bottom:3rem;}
.mb-16{margin-bottom:4rem;}
.mt-12{margin-top:3rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-12{gap:3rem;}
.mr-2{margin-right:.5rem;}
.ml-2{margin-left:.5rem;}
/* Needed for CTAs */
.px-8{padding-left:2rem;padding-right:2rem;}

/* -------- Sizing -------- */
.w-8{width:2rem;} .h-8{height:2rem;}
.h-80{height:20rem;} .h-96{height:24rem;}
.h-\[700px\]{height:700px;}

/* -------- Rounded & shadows -------- */
.rounded{border-radius:.25rem;}
.rounded-lg{border-radius:.5rem;}
.rounded-xl{border-radius:.75rem;}
.rounded-2xl{border-radius:1rem;}
.rounded-3xl{border-radius:1.5rem;}
.rounded-full{border-radius:9999px;}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25);}

/* -------- Typography -------- */
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-5xl{font-size:3rem;line-height:1.1;}
.text-6xl{font-size:3.75rem;line-height:1.05;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}
.leading-tight{line-height:1.25;}
.leading-relaxed{line-height:1.625;}

/* -------- Colors -------- */
.bg-cream{background-color:var(--cream);}
.bg-white{background-color:#fff;}
.bg-gray-50{background-color:var(--gray-50);}
.bg-gray-900{background-color:var(--gray-900);}
.bg-orange-50{background-color:var(--orange-50);}
.bg-orange-600{background-color:var(--orange-600);}
.bg-orange-700{background-color:var(--orange-700);}

.text-white{color:#fff;}
.text-gray-900{color:var(--gray-900);}
.text-gray-700{color:var(--gray-700);}
.text-gray-600{color:var(--gray-600);}
.text-gray-400{color:var(--gray-400);}
.text-orange-600{color:var(--orange-600);}
.text-orange-100{color:#ffedd5;}

/* -------- Gradients with graceful fallback -------- */
.bg-gradient-to-br{
  background-color: var(--from, #fff);
  background-image: linear-gradient(135deg, var(--from, #fff) 0%, var(--to, #fff) 100%);
}
.from-cream{--from: var(--cream);}
.to-orange-50{--to: var(--orange-50);}
.from-orange-600{--from: var(--orange-600);}
.to-orange-700{--to: var(--orange-700);}
.from-orange-100{--from: var(--orange-100);} /* used on Queen card */

/* -------- Visibility & transitions -------- */
.hidden{display:none !important;}
.cursor-pointer{cursor:pointer;}
.transition-colors{transition:color .2s ease, background-color .2s ease, border-color .2s ease;}
.hover\:bg-orange-700:hover{background-color:var(--orange-700) !important;}
.hover\:bg-gray-100:hover{background-color:var(--gray-100) !important;}

/* -------- Header / hero -------- */
#header{background:#fff;}
#hero{display:flex; align-items:center;}

/* -------- FAQ card polish (match original look) -------- */
#faq .bg-white.rounded-xl.p-6.shadow-sm{
  background:#fff;
  border-radius:.75rem;
  padding:1.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
#faq h3{margin:0 0 .5rem;}

/* -------- Product/price helpers -------- */
#products .text-orange-600{font-weight:800;}

/* -------- Button-like links (anchors/spans) -------- */
/* Ensure buttons are comfortable: correct padding, line-height, spacing, center alignment */
.inline-flex.items-center{
  align-items:center;
  line-height:1.25;
}
/* Orange filled CTAs */
.bg-orange-600.inline-flex,
.inline-flex.bg-orange-600{
  padding:.9rem 2rem; /* py-4 px-8 */
  border-radius:.5rem;
  color:#fff;
  font-weight:600;
  font-size:1.125rem;
}
/* White CTA variant (CTA section) */
.bg-white.inline-flex,
.inline-flex.bg-white{
  padding:.9rem 2rem;
  border-radius:.5rem;
  font-weight:600;
  font-size:1.125rem;
  color:var(--orange-600);
}
/* icon spacing if ml-2 somehow missing */
.inline-flex i{margin-left:.5rem;}

/* -------- Footer links hover -------- */
.hover\:text-white:hover{color:#fff;}

/* -------- Responsive utilities -------- */
@media (min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
}
@media (min-width:768px){
  .md\:flex{display:flex;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:justify-end{justify-content:flex-end;}
}
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem;}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:order-1{order:1;}
  .lg\:order-2{order:2;}
}


/* === Hotfix: image sizing + icon/text colors === */

/* Image sizing used across hero/products/gallery */
.w-full{ width:100%; }
.h-48{ height:12rem; }   /* gallery cards */
.h-80{ height:20rem; }   /* product cards (already defined? keep for safety) */
.h-96{ height:24rem; }   /* hero image */
.object-cover{ object-fit: cover; }

/* Text colors for hero feature bullets */
.text-green-700{ color:#15803d; }   /* 30-Day Comfort Guarantee, Premium Natural Materials */
.text-orange-600{ color:#ea580c; }  /* Free Shipping (Limited Time) */

/* Ensure Font Awesome icons inherit the parent text color */
.fa, .fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands { color: inherit; }

/* Button spacing/alignment so text doesn’t squash */
.inline-flex{ display:inline-flex; }
.items-center{ align-items:center; }
.gap-4{ gap:1rem; }
.px-8{ padding-left:2rem; padding-right:2rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.ml-2{ margin-left:.5rem; }
.mr-2{ margin-right:.5rem; }

/* Missing gaps & responsive grids used in layout */
.gap-4{ gap:1rem; }
@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .lg\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Extra colors seen on the page */
.text-gray-700{ color:#374151; }
.text-gray-600{ color:#4b5563; }
.text-gray-900{ color:#111827; }
.bg-gray-50{ background-color:#f9fafb; }

/* Gradients (queen card & CTA use these sources) */
.bg-gradient-to-br{
  background-color: var(--from, #fff);
  background-image: linear-gradient(135deg, var(--from,#fff) 0%, var(--to,#fff) 100%);
}
.from-cream{ --from:#F7F4EF; }
.to-orange-50{ --to:#fff7ed; }
.from-orange-100{ --from:#ffedd5; }
.from-orange-600{ --from:#ea580c; }
.to-orange-700{ --to:#c2410c; }


/* === Responsive header & hamburger === */

/* Hover color polish */
#mainNav a{ color:#374151; }
#mainNav a:hover{ color:#111827; }

/* Base states */
#menuToggle{ display:none; }       /* hidden by default; shown on mobile via MQ */
#mobileMenu.hidden{ display:none !important; }

/* Small screens (<768px): show hamburger, hide desktop nav */
@media (max-width: 767px){
  #menuToggle{ display:inline-flex !important; }
  #mainNav{ display:none !important; }
}
/* Desktop (≥768px): hide hamburger & mobile panel, show desktop nav */
@media (min-width: 768px){
  #menuToggle{ display:none !important; }
  #mobileMenu{ display:none !important; }
  #mainNav{ display:flex !important; }
}

/* === Badge ("Most Popular") fix === */
.inline-block { display: inline-block; }             /* make the div shrink-to-fit */
.px-4 { padding-left: 1rem; padding-right: 1rem; }   /* horizontal padding */
.py-2 { padding-top: .5rem; padding-bottom: .5rem; } /* vertical padding */
.text-sm { font-size: .875rem; line-height: 1.25rem; }/* small text size */
.rounded-full { border-radius: 9999px; }             /* pill shape */
.badge { display:inline-block; width:auto; white-space:nowrap; } /* optional helper */


/* === Footer centering hotfix === */
.text-center { text-align: center; }          /* ensure text-center works everywhere */
.flex { display: flex; }                      /* safety: flex utility */
.items-center { align-items: center; }        /* vertical centering */
.justify-center { justify-content: center; }  /* horizontal centering for link row */

/* optional: tighten spacing if needed */
.space-x-2 > *:not(:last-child){ margin-right:.5rem; }
.space-x-8 > *:not(:last-child){ margin-right:2rem; }

/* optional utility patch */
.border-t{ border-top:1px solid #374151; }
.border-gray-700{ border-color:#374151; }


/* === FAQ sizing & centering (match original) === */
.max-w-4xl { max-width: 56rem; }                  /* 4xl = 56rem (896px) */
.mx-auto   { margin-left: auto; margin-right: auto; }  /* ensure centering */

.space-y-6 > * + * { margin-top: 1.5rem; }        /* vertical rhythm between cards */

/* keep card styling tight and consistent */
.bg-white   { background:#ffffff; }
.rounded-xl { border-radius: .75rem; }
.p-6        { padding: 1.5rem; }
.shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* optional: if the cards still feel too wide, try 48rem instead
.max-w-4xl { max-width: 48rem; }  /* 3xl look */
*/

.brand-text { display:flex; align-items:baseline; gap:.25rem; }
.brand-name { font-size:1.5rem; font-weight:700; line-height:1; }
.brand-by   { font-size:.875rem; color:#9ca3af; line-height:1; position:relative; top:.05em; }