:root{--brand:#0f766e;--brand-dark:#134e4a;--muted:#64748b;--border:#e5e7eb;--bg:#ffffff}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;color:#0b1020;background:#fff;line-height:1.55}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.header{position:sticky;top:0;z-index:50;background:#fff;backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}.brand img{height:40px;width:auto}.brand .name{font-weight:800;color:var(--brand-dark);letter-spacing:.2px;font-size:14px}
.searchbar{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff;max-width:560px}
.searchbar input{border:0;outline:0;flex:1;font-size:14px}
.searchbar button{border:0;background:var(--brand);color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav a{padding:8px 10px;border-radius:8px}.nav a:hover{background:#ecfeff}
.icon-btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#e6fffb;border:1px solid #99f6e4;font-size:12px;color:var(--brand-dark)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.secondary{background:#e2e8f0;color:#0f172a}.btn.full{width:100%;justify-content:center}
.hero{padding:24px 0 8px;background:linear-gradient(180deg,#f0fdfa 0%, #fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center}
.hero h1{font-size:clamp(26px,5.5vw,44px);margin:0 0 8px;color:var(--brand-dark)}
.hero p{margin:0 0 12px;color:#334155}
.kpi{padding:14px;border-radius:12px;background:#f2fbf8;border:1px dashed #d1fae5}
.section{padding:20px 0}.section h2{margin:0 0 12px;color:var(--brand-dark)}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}.card .inner{padding:14px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card img{width:100%;height:170px;object-fit:cover;background:#f8fafc;border-bottom:1px solid var(--border)}
.price{font-weight:800}.compare{color:#ef4444;text-decoration:line-through;font-weight:600;margin-left:6px}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input,.select,textarea{border:1px solid var(--border);border-radius:10px;padding:10px;background:#fff;font:inherit;width:100%}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.notice{font-size:12px;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;padding:10px;border-radius:10px}
.alert{padding:10px;border:1px solid #fee2e2;background:#fff1f2;color:#b91c1c;border-radius:10px}
.footer{border-top:1px solid var(--border);background:#f8fafc;margin-top:20px}.footer .cols{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:16px;padding:24px 0}.footer small{color:#64748b}
.breadcrumbs{font-size:13px;color:#64748b;margin:8px 0}.breadcrumbs a{color:#64748b}
@media (max-width: 1120px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 780px){ .hero-grid{grid-template-columns:1fr} .product-grid{grid-template-columns:repeat(2,1fr)} .nav{display:none} .brand .name{display:none} .grid-2{grid-template-columns:1fr} }
@media (max-width:420px){ .product-grid{grid-template-columns:1fr} }


/* --- Mobile Web-App UI Enhancements --- */
:root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* Keep primary nav on desktop/tablet, hide on small */
@media (max-width:780px){
  .nav{ display:none; }
}

/* Bottom tab bar */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  height:60px;padding-bottom:var(--safe-bottom);
  background:#ffffff;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  z-index: 9999;
}
.bottom-nav a{
  flex:1; text-align:center; font-size:12px; color:#0f172a;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 0;
}
.bottom-nav .icon{ font-size:18px; line-height:1; }
.bottom-nav a.active{ color:var(--brand); }
body{ padding-bottom: calc(60px + var(--safe-bottom)); } /* prevent content underlap */

/* Cart badge on bottom bar */
.badge-dot{
  position:relative;display:inline-block;
}
.badge-dot .count{
  position:absolute; top:-6px; right:-10px;
  background:#ef4444; color:#fff; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}

/* Mobile header: keep brand + compact cart */
@media (max-width:780px){
  .header-inner{ gap:8px; }
  .searchbar{ max-width:none; }
}

/* Fullscreen search overlay (mobile) */
.search-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.98);
  z-index:90; display:none; flex-direction:column; padding:16px;
}
.search-overlay.active{ display:flex; }
.search-overlay .row{ display:flex; gap:8px; }
.search-overlay .close{ background:#e2e8f0; border:0; border-radius:10px; padding:10px 12px; }

/* Slide-in menu drawer */
.drawer{ position:fixed; top:0; right:0; width:300px; height:100svh; z-index:95; background:#fff; border-left:1px solid var(--border); box-shadow:-6px 0 16px rgba(0,0,0,.06); transition:transform .25s ease; padding:16px; transform:translateX(100%);}
.drawer.open{ transform:translateX(0); }
.drawer a{ display:block; padding:10px 0; border-bottom:1px solid #f1f5f9; color:#0f172a; }
.drawer .close{ position:absolute; top:10px; right:10px; border:0; background:#e2e8f0; border-radius:10px; padding:8px 10px; }

/* Safari momentum scroll */
@supports (-webkit-overflow-scrolling: touch){
  .drawer, .search-overlay{ -webkit-overflow-scrolling: touch; }
}

/* Tighten product card tap targets */
@media (max-width:780px){
  .product-card img{ height:150px; }
  .btn{ padding:10px 12px; }
}

/* Ensure breadcrumbs don't wrap badly on tiny screens */
.breadcrumbs{ overflow:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }


/* v2 tweaks */
.header .build-tag{margin-left:8px;font-size:11px;background:#0ea5a4;color:#fff;border-radius:8px;padding:2px 6px}
@media (max-width:780px){
  .fab-cart{
    position:fixed; right:16px; bottom:76px; /* above bottom bar */
    background:#0f766e; color:#fff; border:0; border-radius:999px;
    padding:12px 14px; box-shadow:0 8px 20px rgba(0,0,0,.15); z-index:9999;
  }
}


/* ---- iOS iPhone 12/14 mobile tuning (v3) ---- */
:root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 430px){
  .bottom-nav{
    height:72px;
    padding-bottom:calc(var(--safe-bottom));
    box-shadow:0 -6px 20px rgba(0,0,0,.06);
  }
  .bottom-nav .icon{ font-size:20px; }
  .bottom-nav a{ font-size:12px; padding-top:10px; }
  body{ padding-bottom: calc(72px + var(--safe-bottom)); }
  .fab-cart{ bottom: calc(92px + var(--safe-bottom)); }
}

/* Full-height overlays using small viewport units for iOS 15+ safari */
.search-overlay{
  height:100svh;
}
.drawer{ position:fixed; top:0; right:0; width:300px; height:100svh; z-index:95; background:#fff; border-left:1px solid var(--border); box-shadow:-6px 0 16px rgba(0,0,0,.06); transition:transform .25s ease; padding:16px; transform:translateX(100%);}

/* When keyboard is open, hide floats to prevent overlap with inputs */
body.keyboard-open .bottom-nav,
body.keyboard-open .fab-cart{
  transform: translateY(140%);
}

/* Bigger Add buttons on small screens */
@media (max-width: 430px){
  .btn{ padding:12px 16px; font-size:15px; }
  .product-card img{ height:160px; }
}

/* Improve header hit area */
.header .icon-btn{ padding:10px 12px; }


/* v4 overflow guard */
html, body { max-width:100%; overflow-x:hidden; }
.container { overflow-x:hidden; }
.bottom-nav { left:0; right:0; width:auto; }


/* ---- v5 iOS top/bottom visibility & overlap fixes ---- */
:root{ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* Give main content breathing room so tabs/header never cover text */
body{ padding-top: calc(8px + var(--safe-top)); }
@media (max-width:430px){
  .bottom-nav{ height:72px; padding-bottom:var(--safe-bottom); }
  body{ padding-bottom: calc(80px + var(--safe-bottom)); } /* a bit more than bar height */
  .fab-cart{ bottom: calc(96px + var(--safe-bottom)); }
}

/* Make the header slightly smaller on tiny screens to fit better */
@media (max-width:430px){
  .header-inner{ padding:8px 0; }
  .brand img{ height:36px; }
}

/* Remove build tag style (and we’ll strip it in HTML) */
.header .build-tag{ display:none !important; }

/* Prevent any stray element from forcing horizontal scroll */
html, body, .container, main{ max-width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; }