*{box-sizing:border-box}
:root{--green:#2f8c37;--dark-green:#185b32;--text:#20251f;--muted:#72796e;--line:#e9ede6}
html{scroll-behavior:smooth}
body{margin:0;background:#eef1eb;color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.mobile-app{position:relative;width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:#fff;padding-bottom:82px;overflow:hidden;box-shadow:0 8px 35px #1b392018}
.status-bar{height:25px;background:#8ac85a;display:flex;align-items:center;justify-content:space-between;padding:0 21px;font-size:12px;font-weight:700;color:#19341b}
.app-header{padding:0 16px;background:linear-gradient(180deg,#8ac85a 0%,#a7d97b 56%,#e5f3d9 100%)}
.top-row{display:flex;align-items:center;gap:7px;min-height:41px}
.brand{position:relative;display:block;flex:0 0 84px;color:#fff;text-decoration:none;font-size:10px;line-height:1.02;font-weight:900;letter-spacing:.2px;text-shadow:0 1px 2px #315e2940}
.brand-mark{float:left;font-size:22px;line-height:26px;margin-right:3px}.brand-name{display:block;padding-top:3px}.brand small{display:block;padding-left:25px;font-size:6px;letter-spacing:.5px;margin-top:3px}
.delivery-location{flex:1;min-width:0;border:0;background:transparent;color:#193b20;font-size:11px;font-weight:800;white-space:nowrap;text-align:center;padding:0}
.delivery-location small{display:block;width:max-content;max-width:100%;margin:3px auto 0;padding:3px 8px;background:#fff9;border-radius:15px;font-size:9px;font-weight:500}
.header-actions{display:flex;gap:6px}
.round-button{position:relative;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:#263428;text-decoration:none;font-size:15px;padding:0}
.cart-badge{position:absolute;right:-4px;top:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:10px;background:#e84c3d;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}
.search-bar{height:29px;margin:5px 0 8px;border-radius:18px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 11px;color:#626b60}
.search-bar>span{font-size:17px;line-height:1}
.search-bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:12px;color:var(--text);appearance:none}
.search-bar input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-bar button{border:0;background:transparent;color:#65705f;font-size:16px;padding:0;line-height:1}
.hero-slider{display:block;position:relative;width:100%;aspect-ratio:308/131;overflow:hidden;border-radius:17px;background:#eaf4d8;isolation:isolate}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transition:opacity .35s ease}
.hero-slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.hero-slide>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide:nth-child(2)>img{object-position:center}
.hero-slide-caption{position:absolute;left:0;top:0;bottom:0;width:54%;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px;color:#245b2c;background:linear-gradient(90deg,#f0f8e8 0%,#f0f8e8e8 73%,transparent 100%)}
.hero-slide-caption strong{font-size:clamp(14px,4.6vw,19px);line-height:1.04}
.hero-slide-caption small{font-size:9px;line-height:1.3;max-width:135px}
.hero-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:23px;height:28px;border:0;border-radius:15px;background:#ffffffd9;color:#2b5b2d;font-size:22px;line-height:20px;display:grid;place-items:center;padding:0;opacity:0;transition:opacity .2s}
.hero-prev{left:5px}.hero-next{right:5px}
.hero-slider:hover .hero-arrow,.hero-slider:focus-within .hero-arrow{opacity:.9}
.hero-dots{position:absolute;z-index:5;bottom:5px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:4px;pointer-events:none}
.hero-dot{pointer-events:auto;width:4px;height:4px;border:0;border-radius:50%;padding:0;background:#fffbd9;box-shadow:0 0 2px #355b28}
.hero-dot.active{width:12px;border-radius:5px;background:#31863a}
.welcome-panel{display:block;width:calc(100% + 32px);margin:0 -16px;padding:10px 22px 14px;text-align:center;color:#20251f;border-radius:0 0 26px 26px;position:relative}
.welcome-panel h2{margin:0 0 7px;color:#218035;font-size:17px;line-height:20px;font-weight:900}
.welcome-panel p{margin:0 auto;max-width:390px;font-size:12px;line-height:16px}
.welcome-panel strong{font-weight:900;white-space:nowrap}
.content-section{padding:0 20px;margin-top:16px;scroll-margin-top:12px}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-heading h2{font-size:16px;line-height:1.2;margin:0;font-weight:850}
.section-heading a{font-size:10px;color:#5b6557;text-decoration:none;white-space:nowrap}
.product-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:start}
.product-card{min-width:0;overflow:hidden}
.product-image-wrap{height:77px;position:relative;border-radius:11px;overflow:hidden;background:#f3f6ef}
.product-image-wrap img{width:100%;height:100%;display:block;object-fit:cover}
.favorite-button{position:absolute;top:4px;right:4px;width:21px;height:21px;border:0;border-radius:50%;background:#ffffffd9;color:#354333;font-size:16px;line-height:1;padding:0}
.favorite-button.is-favorite{color:#e34848}
.product-name{min-height:24px;margin:5px 0 3px;font-size:10px;line-height:1.12;font-weight:800;overflow-wrap:anywhere}
.product-origin{margin-bottom:4px;font-size:8px;line-height:1.15;min-height:10px;color:#44883b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-origin span{font-size:8px}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}
.product-bottom>div{min-width:0;flex:1 1 42px}
.product-price{display:block;font-size:clamp(8px,2.2vw,10px);line-height:1.2;font-weight:850;white-space:normal;overflow-wrap:anywhere}
.product-bottom small{display:block;font-size:8px;line-height:1.2;color:#6f776b;margin-top:2px}
.add-button{flex:0 0 auto;border:1px solid #80bd68;color:#378b34;background:#fff;border-radius:6px;padding:3px 6px;font-size:9px;line-height:1;font-weight:800;min-width:32px;height:24px}
.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 8px}
.category-card{display:block;min-width:0;text-decoration:none;color:var(--text);text-align:center}
.category-card img{display:block;width:100%;height:79px;object-fit:cover;border-radius:11px;background:#f4f6f1;border:1px solid #f0f2ec}
.category-card span{display:block;font-size:12px;line-height:1.08;font-weight:650;margin-top:6px;min-height:27px}
.promo-banner{display:block;position:relative;min-height:150px;margin:18px 16px 0;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;background:#165b34 url('https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=900&q=85') center/cover no-repeat}
.promo-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#145b35 0%,#145b35f2 52%,#145b3545 100%)}
.promo-copy{position:relative;width:75%;padding:18px}
.promo-copy h2{font-size:17px;line-height:1.08;margin:0 0 8px;font-weight:900}
.promo-copy p{font-size:10px;line-height:1.35;margin:0 0 12px;color:#e7f0e5}
.promo-button{display:inline-block;border-radius:20px;background:#55b62b;color:#fff;padding:6px 13px;font-size:10px;font-weight:850}
.best-sellers{margin-bottom:18px}
.empty-message{grid-column:1/-1;margin:0;padding:18px 8px;border-radius:10px;background:#f7f9f5;color:#72796e;font-size:11px;text-align:center}
.bottom-navigation{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;height:70px;padding:7px 5px max(7px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around}
.nav-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#424a40;text-decoration:none;font-size:9px;padding:2px 0}
.nav-icon{height:24px;font-size:21px;line-height:24px}.nav-item.active{color:#2e963b}
.toast-message{position:fixed;z-index:30;left:50%;bottom:82px;transform:translate(-50%,10px);opacity:0;pointer-events:none;background:#203f28;color:#fff;border-radius:22px;padding:10px 15px;font-size:12px;box-shadow:0 5px 20px #0002;transition:opacity .2s,transform .2s;white-space:nowrap}
.toast-message.visible{opacity:1;transform:translate(-50%,0)}
.image-unavailable{background:linear-gradient(135deg,#f4f7ef,#e8f1df);position:relative}
.image-unavailable:after{content:"Fresh from farm";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#6a8b58;font-size:10px;font-weight:700}
@media(min-width:600px){body{padding:22px 0}.mobile-app{border-radius:30px;min-height:850px}.bottom-navigation{position:absolute;border-radius:0 0 30px 30px}}
@media(max-width:380px){
 .app-header{padding-left:16px;padding-right:16px}
 .brand{flex-basis:78px}
 .delivery-location{font-size:10px}
 .round-button{width:26px;height:26px;font-size:14px}
 .hero-slide-caption{padding:9px;width:57%}
 .hero-slide-caption strong{font-size:14px}
 .hero-slide-caption small{font-size:8px}
 .welcome-panel{padding:10px 18px 13px}
 .content-section{padding-left:20px;padding-right:20px}
 .product-strip{gap:5px}
 .product-image-wrap{height:70px}
 .product-name{font-size:9px}
 .product-bottom{gap:3px}
 .product-bottom>div{flex-basis:38px}
 .product-price{font-size:8px}
 .add-button{min-width:29px;padding:3px 4px}
 .category-grid{gap:10px 7px}
 .category-card img{height:72px}
 .category-card span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide{transition:none}}


/* FINAL HEADER MATCH: soft fade background, visible welcome panel, rounded lower edge */
.mobile-app{overflow:hidden}
.app-header{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:4px 16px 0;
  border-radius:0 0 30px 30px;
  background:
    radial-gradient(ellipse at 9% 14%, rgba(255,255,255,.23) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 92% 78%, rgba(245,255,229,.50) 0%, rgba(245,255,229,0) 48%),
    linear-gradient(180deg, #86c957 0%, #9fd875 35%, #c6e9a8 68%, #eaf5e1 100%);
}
.app-header::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background:
    radial-gradient(ellipse at 6% 12%, rgba(255,255,255,.8) 0 2%, transparent 14%),
    radial-gradient(ellipse at 94% 28%, rgba(255,255,255,.55) 0 1.5%, transparent 13%),
    linear-gradient(135deg, transparent 54%, rgba(255,255,255,.28) 100%);
}
.hero-banner{position:relative;z-index:1;margin-bottom:0}
.welcome-panel{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  margin:0;
  padding:13px 18px 20px;
  text-align:center;
  border:0;
  border-radius:0 0 30px 30px;
  /*background:linear-gradient(180deg, #eef8e5 0%, #e5f3da 100%);*/
  box-shadow:none;
}
.welcome-panel h2{margin:0 0 7px}
.welcome-panel p{margin:0}
.content-section:first-child{margin-top:17px}
@media(min-width:600px){
  .app-header{border-radius:30px}
}