/* Organic Food screenshot theme v2 — loaded AFTER gz-polish.css, so these rules win.
   Palette (user screenshot, 'Cooking Essentials'):
   cream page #FDF8F0, white cards #FFFFFF, dark text #0F172A,
   orange primary/price/CTA #F97316 (hover #EA580C, light #FB923C),
   green ONLY for Save/discount badges #10B981, struck price #9CA3AF.
   Green is NOT the main CTA/price colour any more (v1 green theme replaced).
   Design-only override; no routes, DB, prices, products or payment logic changed. */

/* --- Page + header --- */
body.bg-white{background-color:#FDF8F0 !important}
body{color:#0F172A}
header{background-color:#FFFFFF !important}
header button[onclick="openCart()"]{background-color:#F97316 !important;color:#FFFFFF !important}
#cartCount{background-color:#FFFFFF !important;color:#F97316 !important}
header div.relative > button{background-color:#F97316 !important;color:#FFFFFF !important}
header a.bg-slate-900,header button.bg-slate-900{background-color:#0F172A !important}

/* --- Primary CTA (hero, notice bar, checkout, cart drawer) : solid orange --- */
.bg-cta{background-color:#F97316 !important;color:#FFFFFF !important}
a.bg-cta,button.bg-cta{background-color:#F97316 !important;color:#FFFFFF !important}
.cta-h:hover,.bg-cta:hover{background-color:#EA580C !important;color:#FFFFFF !important}
:focus-visible{outline:3px solid #F97316 !important;outline-offset:2px}

/* --- Prices + badges --- */
.text-price{color:#F97316 !important}
.dark .text-price{color:#FB923C !important}
.bg-off{background-color:#F97316 !important;color:#FFFFFF !important}
.of-save{background-color:#10B981 !important;color:#FFFFFF !important}
.gz-card-price .line-through{color:#9CA3AF !important}

/* --- Product card (screenshot layout) : white card, square image on white,
       left-aligned name, left-aligned orange price, equal heights --- */
.gz-card{background-color:#FFFFFF !important;border-color:#E7E5E4 !important;box-shadow:0 1px 3px rgba(0,0,0,.06) !important}
.gz-card:hover{box-shadow:0 8px 24px rgba(249,115,22,.14) !important}
.gz-card a img,.gz-card a > div{aspect-ratio:1/1 !important;object-fit:contain !important;background-color:#FFFFFF !important;padding:1rem !important}
.gz-card-name{text-align:left !important;text-transform:none !important;color:#0F172A !important}
.gz-card-price{justify-content:flex-start !important;text-align:left !important}
.gz-card-price .text-price{font-size:1.125rem !important}
/* Screenshot Add To Cart : full-width orange-outline button with cart icon */
.of-add{border:2px solid #F97316 !important;background-color:#FFFFFF !important;color:#F97316 !important;border-radius:.5rem !important;min-height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:.5rem !important;font-weight:700 !important;width:100% !important}
.of-add:hover{background-color:#FFF7ED !important;color:#EA580C !important;border-color:#EA580C !important}

/* --- Section headers (screenshot) : left title, short orange underline.
       The home headers are centred with line spans; hide the lines and
       left-align, with an orange bar under the title. --- */
div.flex.items-center.gap-4.mb-6,div.flex.items-center.gap-4.mt-12.mb-6{justify-content:flex-start !important}
div.flex.items-center.gap-4.mb-6 > span.h-px,div.flex.items-center.gap-4.mt-12.mb-6 > span.h-px{display:none !important}
div.flex.items-center.gap-4.mb-6 > h2,div.flex.items-center.gap-4.mt-12.mb-6 > h2{position:relative !important;padding-bottom:.6rem !important;text-align:left !important}
div.flex.items-center.gap-4.mb-6 > h2::after,div.flex.items-center.gap-4.mt-12.mb-6 > h2::after{content:"" !important;position:absolute !important;left:0 !important;bottom:0 !important;width:2.5rem !important;height:4px !important;background-color:#F97316 !important;border-radius:9999px !important}
.of-viewall{color:#F97316 !important;font-weight:700 !important;font-size:.875rem !important;letter-spacing:.05em !important;white-space:nowrap !important}
.of-viewall:hover{color:#EA580C !important}

/* --- Footer styling only (copy untouched) : warm dark footer, orange hovers --- */
footer{background-color:#1C1917 !important;color:#E7E5E4 !important}
footer a:hover{color:#FB923C !important}
footer a.hover\:bg-cta:hover{background-color:#F97316 !important}

/* --- Cart drawer, floating actions, back-to-top : orange --- */
#toTop{background-color:#F97316 !important;color:#FFFFFF !important;left:1rem !important;right:auto !important}
#cartDrawer .bg-cta{background-color:#F97316 !important;color:#FFFFFF !important}

/* --- Forms / checkout accents --- */
main input:focus,main select:focus,main textarea:focus{border-color:#F97316 !important}

/* --- Dark mode : muted warm-dark version of the same palette --- */
.dark body.bg-white,.dark body{background-color:#1C1917 !important;color:#F5F5F4 !important}
.dark header{background-color:#1C1917 !important}
.dark .gz-card{background-color:#292524 !important;border-color:#44403C !important}
.dark .gz-card a img,.dark .gz-card a > div{background-color:#FFFFFF !important}
.dark .gz-card-name{color:#FAFAF9 !important}
.dark .of-add{background-color:transparent !important;color:#FB923C !important;border-color:#FB923C !important}
.dark .of-add:hover{background-color:#431407 !important;color:#FDBA74 !important}
.dark footer{background-color:#0C0A09 !important}
.dark div.flex.items-center.gap-4.mb-6 > h2,.dark div.flex.items-center.gap-4.mt-12.mb-6 > h2{color:#FAFAF9 !important}

/* --- 360px mobile check : cards stay 2-up, names/price readable --- */
@media (max-width:480px){
  .gz-card a img,.gz-card a > div{padding:.75rem !important}
  .gz-card-name{font-size:13px !important}
  .gz-card-price .text-price{font-size:1rem !important}
}

/* --- Homepage premium polish v3 (cream/orange, Save-green only) --- */
body{overflow-x:clip}
main > section.of-hero{background-color:#1C1917 !important;background-image:radial-gradient(60rem 20rem at 85% 0%,rgba(249,115,22,.28),transparent 60%) !important;padding:4.5rem 1rem !important}
main > section.of-hero h1{font-size:clamp(1.9rem,4.5vw,3.25rem) !important;line-height:1.15 !important;letter-spacing:-.01em !important}
main > section.of-hero p{max-width:36rem !important;font-size:1.05rem !important;line-height:1.6 !important}
main > section.of-hero a.bg-cta{min-height:48px !important;display:inline-flex !important;align-items:center !important;padding-left:1.75rem !important;padding-right:1.75rem !important;border-radius:.75rem !important;box-shadow:0 8px 24px rgba(249,115,22,.35) !important}
#heroSlider .hero-img-h{height:clamp(320px,55vw,520px) !important}
#heroSlider .hero-slide h1{font-size:clamp(1.75rem,4.5vw,3.25rem) !important;line-height:1.15 !important}
#heroSlider button{width:44px !important;height:44px !important}
#noticeBar{min-height:40px !important}
#noticeBar > button{width:44px !important;height:44px !important;flex-shrink:0 !important}
.of-cat-section{padding-top:2.75rem !important;padding-bottom:2.75rem !important}
.of-cat-section a.group > span.rounded-full{border:2px solid #FED7AA !important;box-shadow:0 4px 14px rgba(0,0,0,.08) !important;transition:transform .3s,border-color .3s,box-shadow .3s !important}
.of-cat-section a.group:hover > span.rounded-full{border-color:#F97316 !important;box-shadow:0 8px 24px rgba(249,115,22,.25) !important}
.of-cat-section a.group > span:last-child{font-size:.95rem !important;line-height:1.4 !important}
.of-sec-head{display:flex !important;justify-content:space-between !important;align-items:flex-end !important;gap:1rem !important;flex-wrap:wrap !important;margin-bottom:1.5rem !important}
.of-sec-head > h2{position:relative !important;padding-bottom:.6rem !important;text-align:left !important}
.of-sec-head > h2::after{content:"" !important;position:absolute !important;left:0 !important;bottom:0 !important;width:2.5rem !important;height:4px !important;background-color:#F97316 !important;border-radius:9999px !important}
.gz-card{border-radius:1rem !important;transition:transform .25s,box-shadow .25s !important}
.gz-card:hover{transform:translateY(-2px) !important}
.gz-card-body{padding:1rem !important}
.gz-card-name{min-height:2.75em !important;line-height:1.4 !important}
.gz-card-price{min-height:1.75rem !important}
.of-gallery{padding-top:2.75rem !important;padding-bottom:2.75rem !important}
.of-gallery img{border-radius:1rem !important;box-shadow:0 4px 16px rgba(0,0,0,.10) !important;transition:transform .3s,box-shadow .3s !important}
.of-gallery img:hover{transform:scale(1.02) !important;box-shadow:0 10px 28px rgba(249,115,22,.22) !important}
.of-subscribe{padding-top:3rem !important;padding-bottom:3rem !important}
.of-subscribe h2{font-size:clamp(1.4rem,3.5vw,2rem) !important;line-height:1.3 !important}
.of-subscribe form input{font-size:16px !important;min-height:48px !important}
.of-subscribe form button{min-height:48px !important;display:inline-flex !important;align-items:center !important}
nav > div > a,nav > div > span > a{min-height:44px !important;display:inline-flex !important;align-items:center !important}
nav > div{scrollbar-width:none !important}
nav > div::-webkit-scrollbar{display:none !important}
.of-pill-active{background-color:#F97316 !important;color:#FFFFFF !important;border-color:#F97316 !important}
.of-pill-active:hover{background-color:#EA580C !important;color:#FFFFFF !important}
.dark .of-cat-section a.group > span:last-child{color:#FAFAF9 !important}
.dark .of-sec-head > h2{color:#FAFAF9 !important}
.dark main > section.of-hero{background-color:#0C0A09 !important}
.dark nav > div > a,.dark nav > div > span > a{color:#F5F5F4 !important}
.dark .of-pill-active{color:#FFFFFF !important}
@media (max-width:480px){
  main > section.of-hero{padding:3rem 1rem !important}
  main > section.of-hero a.bg-cta{width:100% !important;justify-content:center !important}
  .of-sec-head > h2{font-size:1.15rem !important}
  .of-viewall{font-size:.75rem !important}
  .of-cat-section{padding-top:2rem !important;padding-bottom:2rem !important}
  .gz-card-body{padding:.75rem !important}
  .gz-card-name{font-size:13px !important}
  .of-gallery{padding-top:2rem !important;padding-bottom:2rem !important}
  .of-subscribe form{flex-direction:column !important}
  .of-subscribe form input{border-radius:.5rem !important}
  .of-subscribe form button{border-radius:.5rem !important;width:100% !important;justify-content:center !important}
}