/* Zofed Additions - New homepage sections + Store + Recipe Hub - matches existing design system */
:root{ --terracotta:#C84B31; --forest:#2D4F38; --saffron:#F4A261; --forest-light:#3E5A3B; }

/* — Top Announcement — */
.zofed-announce{ background:var(--forest); color:white; font-size:12px; font-weight:600; padding:9px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; letter-spacing:.02em; }
.zofed-announce a{ color:var(--saffron); text-decoration:underline; font-weight:800; }
.zofed-announce a:hover{ color:white; }
@media(max-width:640px){ .zofed-announce{ font-size:11px; justify-content:center; text-align:center; } }

/* — Ecom Header Fix: prevent nav disappearing — */
.header-inner{ gap:14px; }
.nav{ gap:18px; flex-shrink:1; min-width:0; }
.nav a{ white-space:nowrap; font-size:13.5px; }
.header-actions{ flex-shrink:0; gap:8px; }
@media(max-width:1180px){ .nav{ gap:12px; } .nav a{ font-size:12.5px; } .header-actions .btn-ghost{ display:none; } }
@media(max-width:980px){ .nav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; max-width:52vw; padding-bottom:2px; gap:10px; } .nav::-webkit-scrollbar{ display:none; } .nav a{ font-size:12px; padding:6px 2px; } }
@media(max-width:860px){ .nav{ display:none; } .hamburger{ display:grid !important; } }

/* — Ecom Category Bar — */
.z-cat-bar{ background:white; border-bottom:1px solid var(--line-2); position:sticky; top:var(--header-h); z-index:49; }
.z-cat-inner{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:10px 0; align-items:center; }
.z-cat-inner::-webkit-scrollbar{ display:none; }
.z-cat-pill{ white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--cream-2); font-size:12.5px; font-weight:700; cursor:pointer; transition:.2s; }
.z-cat-pill.active{ background:var(--forest); color:white; border-color:var(--forest); }
.z-cat-pill:hover{ border-color:var(--forest); }

/* — Cart Icon in Header — */
.zofed-cart-btn{ position:relative; width:42px; height:42px; border-radius:50%; background:white; border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; transition:all .2s; flex-shrink:0; }
.zofed-cart-btn:hover{ border-color:var(--terracotta); color:var(--terracotta); }
.zofed-cart-badge{ position:absolute; top:-6px; right:-6px; background:var(--terracotta); color:white; font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 4px; line-height:1; }

/* — Identity Section — */
.z-ident{ background:white; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:64px 0; }
.z-ident-head{ text-align:center; max-width:640px; margin:0 auto 36px; }
.z-ident-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:32px; }
.z-ident-grid h4{ font-size:16px; margin-bottom:6px; color:var(--forest); }
.z-ident-grid p{ font-size:13.5px; color:var(--muted); line-height:1.7; }
.z-audience{ background:var(--cream-2); border:1px solid var(--line-2); border-radius:20px; padding:20px; }
.z-audience h4{ text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--forest); margin-bottom:16px; }
.z-aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.z-aud-card{ background:white; border:1px solid var(--line-2); border-radius:14px; padding:16px; }
.z-aud-card b.t{ color:var(--terracotta); font-size:13px; display:block; margin-bottom:6px; }
.z-aud-card p{ font-size:12px; color:#6B6B63; line-height:1.6; }
.z-aud-card b.r{ color:var(--forest); font-size:11.5px; display:block; margin-top:8px; line-height:1.5; }

/* — Store Preview — */
.z-store{ padding:64px 0; background:var(--cream); }
.z-store-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
.z-store-head h2{ font-size:clamp(30px,4vw,40px); }
.z-store-head p{ color:var(--muted); font-size:14px; margin-top:8px; }
.z-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.z-prod{ background:white; border:1px solid var(--line-2); border-radius:18px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; transition:all .3s; box-shadow:var(--shadow-soft); }
.z-prod:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:rgba(200,75,49,.2); }
.z-prod-badge{ background:rgba(45,79,56,.08); color:var(--forest); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:999px; }
.z-prod h3{ font-size:15px; color:var(--forest); margin-top:10px; line-height:1.2; }
.z-prod p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:6px; }
.z-prod-foot{ display:flex; flex-direction:column; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); }
.z-prod-price{ display:flex; justify-content:space-between; align-items:center; }
.z-prod-price strong{ font-size:16px; color:var(--forest); }
.z-prod-price s{ font-size:12px; color:var(--muted); margin-left:6px; }
.z-prod-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.z-btn-cart{ background:white; color:var(--forest); border:1.5px solid var(--forest); padding:10px 10px; border-radius:999px; font-size:12.5px; font-weight:800; cursor:pointer; transition:.2s; min-height:48px; display:inline-flex; align-items:center; justify-content:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.z-btn-cart:hover{ background:var(--forest); color:white; }
.z-btn-cart:active{ transform:scale(0.97); }
.z-btn-buy{ background:var(--terracotta); color:white; border:1.5px solid var(--terracotta); padding:10px 10px; border-radius:999px; font-size:12.5px; font-weight:800; cursor:pointer; transition:.2s; min-height:48px; display:inline-flex; align-items:center; justify-content:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.z-btn-buy:hover{ background:#A93D27; border-color:#A93D27; }
.z-btn-buy:active{ transform:scale(0.97); }
.z-btn-buy:hover{ background:#A93D27; border-color:#A93D27; }
.z-prod-foot button{ transition:.2s; }
.z-quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.z-btn-call{ background:white; color:var(--ink); border:1.5px solid var(--line); padding:8px 10px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; min-height:40px; }
.z-btn-call:hover{ border-color:var(--ink); }
.z-btn-wa{ background:#128C7E; color:white; border:1.5px solid #128C7E; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; min-height:40px; }
.z-btn-wa:hover{ background:#0E7568; }
@media(max-width:480px){ .z-prod-actions{ grid-template-columns:1fr; } .z-quick-actions{ grid-template-columns:1fr; } }

/* — Recipe Hub Preview — */
.z-hub{ background:white; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:64px 0; }
.z-hub-head{ text-align:center; max-width:640px; margin:0 auto 28px; }
.z-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.z-filter{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:white; font-size:12px; font-weight:700; cursor:pointer; transition:.2s; }
.z-filter.active{ background:var(--forest); color:white; border-color:var(--forest); }
.z-filter:hover{ border-color:var(--forest); color:var(--forest); }
.z-filter.active:hover{ color:white; }
.z-recipe-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.z-r-card{ background:var(--cream-2); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; cursor:pointer; transition:all .3s; display:flex; flex-direction:column; }
.z-r-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.z-r-img{ height:160px; overflow:hidden; position:relative; }
.z-r-img img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.z-r-card:hover .z-r-img img{ transform:scale(1.05); }
.z-r-tag{ position:absolute; top:10px; left:10px; background:var(--terracotta); color:white; font-size:10px; font-weight:800; padding:3px 7px; border-radius:999px; }
.z-r-body{ padding:14px 14px 12px; flex:1; }
.z-r-body h4{ font-size:14px; color:var(--forest); line-height:1.3; }
.z-r-body p{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.z-r-foot{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px 14px; font-size:11px; font-weight:700; }
.z-r-foot span:first-child{ color:var(--terracotta); }
.z-r-foot span:last-child{ color:var(--muted); font-size:10px; }

/* — Regulatory strip — */
.z-reg{ background:rgba(45,79,56,.06); border:1px solid var(--line-2); border-radius:14px; padding:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.z-reg strong{ color:var(--forest); }
.z-reg span{ font-size:11px; color:var(--muted); }

/* — Drawer & Modal — */
.z-drawer{ position:fixed; inset:0; z-index:70; display:none; }
.z-drawer.open{ display:block; }
.z-drawer-back{ position:absolute; inset:0; background:rgba(26,26,24,.45); backdrop-filter:blur(4px); }
:root{ --vh:1vh; }
.z-drawer-panel{ position:absolute; top:0; right:0; width:min(420px,92vw); height:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); height:100dvh; height:-webkit-fill-available; background:white; box-shadow:-20px 0 60px rgba(0,0,0,.2); display:flex; flex-direction:column; overflow:hidden; animation:zSlide .32s cubic-bezier(.22,1,.36,1); touch-action:pan-y; }
@keyframes zSlide{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }
.z-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line-2); flex-shrink:0; }
.z-ship{ background:var(--cream-2); border:1px solid var(--line-2); border-radius:12px; padding:12px; margin:14px 20px 0; flex-shrink:0; }
.z-drawer-body{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; min-height:0; overscroll-behavior:contain; touch-action:pan-y; }
.z-ship-bar{ height:6px; background:#E8E2D9; border-radius:999px; overflow:hidden; margin-top:8px; }
.z-ship-fill{ height:100%; background:var(--forest); border-radius:999px; transition:width .3s; }
.z-items{ padding:14px 20px; display:grid; gap:10px; align-content:start; }
.z-drawer-body::-webkit-scrollbar{ width:6px; }
.z-drawer-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.z-item{ display:flex; justify-content:space-between; align-items:center; background:#F9F6F0; border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; font-size:13px; }
.z-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:white; }
.z-qty button{ width:28px; height:28px; border:none; background:white; cursor:pointer; font-weight:800; }
.z-qty span{ padding:0 8px; font-weight:700; font-size:12px; min-width:20px; text-align:center; }
.z-drawer-foot{ padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); background:var(--cream-2); flex-shrink:0; max-height:50vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.z-items::-webkit-scrollbar{ width:6px; }
.z-items::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
.z-sum{ display:grid; gap:6px; font-size:13px; color:var(--muted); margin-bottom:12px; }
.z-sum b{ color:var(--ink); }
.z-sum .total{ display:flex; justify-content:space-between; font-weight:800; color:var(--forest); font-size:15px; border-top:1px solid var(--line); padding-top:8px; }
.z-sum .total span:last-child{ color:var(--terracotta); }
.z-check{ width:100%; background:#128C7E; color:white; border:none; padding:13px; border-radius:999px; font-weight:800; font-size:14px; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; }
.z-check:disabled{ opacity:.5; cursor:not-allowed; }
.z-form{ padding:16px 20px 0; border-top:1px solid var(--line-2); display:grid; gap:10px; }
.z-form h4{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--forest); }
.z-form label{ font-size:11px; font-weight:700; color:#444; }
.z-form input, .z-form select, .z-form textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--cream); font-size:16px; outline:none; }
@media(max-width:720px){ .z-form input, .z-form select, .z-form textarea{ font-size:16px; } }
.z-form input:focus, .z-form select:focus, .z-form textarea:focus{ border-color:var(--forest); background:white; }

/* — Recipe Modal — */
.z-modal{ position:fixed; inset:0; z-index:72; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.z-modal.open{ display:flex; }
.z-modal-card{ background:white; border-radius:20px; max-width:720px; width:100%; max-height:92dvh; max-height:92vh; max-height:calc(var(--vh,1vh)*92); overflow:auto; -webkit-overflow-scrolling:touch; padding:20px; position:relative; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.z-modal-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:white; cursor:pointer; font-size:20px; display:grid; place-items:center; }
.z-modal-img{ height:220px; border-radius:14px; overflow:hidden; background:#eee; margin-bottom:14px; }
.z-modal-img img{ width:100%; height:100%; object-fit:cover; }
.z-tip{ background:#FFFBEB; border-left:4px solid #F59E0B; padding:12px; border-radius:10px; font-size:12.5px; color:#92400E; line-height:1.6; margin-top:14px; }

/* — Payment Gateway Area — */
.z-pay-gateway{ background:white; border:1px solid var(--line-2); border-radius:14px; padding:14px; margin-top:12px; }
.z-pay-option{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:.2s; margin-bottom:8px; }
.z-pay-option.active{ border-color:var(--forest); background:rgba(45,79,56,.06); }
.z-pay-option input{ accent-color:var(--forest); }
.z-pay-note{ font-size:11px; color:var(--muted); background:var(--cream-2); padding:10px 12px; border-radius:10px; margin-top:8px; line-height:1.6; }

/* — Sticky Mobile Cart Bar — */
.z-mobile-cart{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:48; background:white; border-top:1px solid var(--line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(0,0,0,.08); padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
.z-mobile-cart-inner{ display:flex; gap:10px; }
.z-mobile-cart-info{ flex:1; }
.z-mobile-cart-info b{ font-size:13px; color:var(--forest); }
.z-mobile-cart-info span{ font-size:11px; color:var(--muted); }

/* — Hide mobile bars when cart/drawer open — */
.z-drawer.open ~ .z-mobile-cart,
.z-drawer.open ~ .mobile-action-bar,
.drawer.open ~ .z-mobile-cart,
.drawer.open ~ .mobile-action-bar{ display:none !important; }

/* — Smooth scrolling + mobile friendly foundation — */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ overscroll-behavior-y:contain; overflow-x:hidden; }
img{ height:auto; max-width:100%; }
*{ overflow-wrap:break-word; word-break:break-word; }

/* — Android & iOS tap & scroll polish — */
*{ -webkit-tap-highlight-color:transparent; }
button, a{ touch-action:manipulation; }
input, select, textarea{ touch-action:manipulation; }
/* — Fix header overlap seen on Android screenshot — */
@media(max-width:720px){
  .zofed-announce{ padding:8px 10px; gap:6px; }
  .zofed-announce span{ line-height:1.4; }
}
/* Responsive - Ecom Optimized */
@media(max-width:1024px){ .z-prod-grid{ grid-template-columns:repeat(3,1fr);} .z-recipe-grid{ grid-template-columns:repeat(3,1fr);} .z-cat-bar{ top:64px; } }
@media(max-width:720px){
  /* Header brand fix - prevent 3-line wrap seen in screenshot */
  .brand-text span{ display:none; }
  .brand-text strong{ font-size:17px; white-space:nowrap; }
  .brand{ gap:8px; }
  .header-inner{ height:auto; min-height:56px; padding:8px 0; }
  .header-actions{ gap:6px; }
  .header-actions .btn-whatsapp{ padding:8px 14px; font-size:12px; }
  .zofed-cart-btn{ width:38px; height:38px; }
  /* Cat bar - not sticky on mobile to avoid overlap with announcement */
  .z-cat-bar{ position:static; top:auto; }
  .z-ident-grid{ grid-template-columns:1fr; gap:18px; }
  .z-aud-grid{ grid-template-columns:1fr; }
  .z-prod-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .z-recipe-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .z-ident, .z-store, .z-hub{ padding:40px 0; }
  .z-mobile-cart{ display:block; }
  body{ padding-bottom:84px; }
  .z-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
  .z-filters::-webkit-scrollbar{ display:none; }
  .z-filter{ flex:0 0 auto; min-height:44px; scroll-snap-align:start; }
  /* Drawer mobile fixes */
  .z-drawer-panel{ width:100vw; max-width:100vw; height:100dvh; }
  .z-ship{ margin:10px 12px 0; padding:10px; }
  .z-items{ padding:12px; gap:8px; }
  .z-form{ padding:12px 12px 0; }
  .z-drawer-foot{ padding:14px 12px calc(14px + env(safe-area-inset-bottom)); max-height:45vh; }
  .z-drawer-body{ padding-bottom:8px; }
  .z-prod{ padding:12px; }
  .z-prod h3{ font-size:14px; }
  .z-r-img{ height:140px; }
  .z-cat-inner{ padding:8px 12px; gap:8px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; margin:0 -12px; padding-inline:12px; }
  .z-cat-pill{ padding:7px 12px; font-size:12px; min-height:36px; scroll-snap-align:start; }
  .z-btn-cart, .z-btn-buy{ min-height:48px; font-size:14px; }
  .z-btn-call, .z-btn-wa{ min-height:48px; }
  .z-qty button{ width:44px; height:44px; }
  .z-item{ padding:12px; }
  .z-drawer-head, .z-ship, .z-items, .z-form, .z-drawer-foot{ max-width:100%; }
}
@media(max-width:480px){
  .z-prod-grid{ grid-template-columns:1fr; }
  .z-recipe-grid{ grid-template-columns:1fr; }
  .z-drawer-foot{ max-height:42vh; }
  .z-prod h3, .z-r-body h4{ font-size:15px; }
}
/* — Extra mobile polish 360px — */
@media(max-width:360px){
  .container{ width:100% !important; padding-inline:12px; }
  .hero h1{ font-size:26px !important; }
  .z-ship{ font-size:11px; }
}