:root {
  --bg: #F4F7F7;
  --surface: #FFFFFF;
  --surface2: #E8EEF1;
  --border: #D1E0E0;
  --text: #003B3B;
  --muted: #507D7D;
  --accent: #6b8f92;
  /* Slightly darker teal */
  --accent2: #6b8f92;
  --accentbg: #E8F0F0;
  --green: #2ECC71;
  --wa: #25D366;
  --r: 12px;
  --r-lg: 16px;
  --sh: 0 1px 3px rgba(0, 59, 59, .06), 0 4px 16px rgba(0, 59, 59, .07);
  --sh-lg: 0 8px 40px rgba(0, 59, 59, .13);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fd: 'Open Sans', sans-serif;
  --fb: 'Open Sans', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent
}

body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px
}

/* ═══ HEADER ═══ */
#hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(244, 247, 247, .9);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
}

.logo {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
  transition: transform .2s var(--ease);
}

.logo-img:hover {
  transform: scale(1.05)
}

.hdr-r {
  display: flex;
  align-items: center;
  gap: 8px
}

.lang-btn {
  display: none
}

.cart-pill {
  height: 38px;
  padding: 0 16px 0 12px;
  background: var(--accent);
  border: none;
  border-radius: 38px;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(127, 168, 172, .2);
  transition: all .15s var(--ease);
  white-space: nowrap;
}

.cart-pill:hover {
  background: #5a7b7e;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(107, 143, 146, .3)
}

.badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}

.badge.pop {
  animation: pop .25s var(--ease)
}

@keyframes pop {

  0%,
  100% {
    transform: scale(1)
  }

  40% {
    transform: scale(1.5)
  }
}

/* ═══ HERO ═══ */
#hero {
  background: var(--text);
  padding: 50px 20px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(120, 160, 160, .2), transparent 70%),
    radial-gradient(ellipse at 18% 0%, rgba(238, 28, 37, .1), transparent 60%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(120, 160, 160, .15);
  border: 1px solid rgba(120, 160, 160, .3);
  color: var(--accent2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 14px;
  position: relative;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.8s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .4;
    transform: scale(.65)
  }
}

#hero h1 {
  font-family: var(--fb);
  font-size: clamp(32px, 8vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  position: relative;
}

#hero h1 em {
  font-style: normal;
  color: var(--accent2)
}

#hero p {
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
  position: relative;
  max-width: 360px;
  margin: 0 auto
}

/* ═══ SEARCH ═══ */
#searchWrap {
  max-width: 1000px;
  margin: 20px auto 10px;
  padding: 0 16px;
  position: relative;
}

#srch {
  width: 100%;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 0 20px 0 42px;
  font-family: var(--fb);
  font-size: 15px;
  color: var(--text);
  transition: all .2s var(--ease);
  outline: none;
}

#srch:focus {
  border-color: var(--accent2);
  box-shadow: var(--sh)
}

.srch-ico {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* ═══ CATEGORY BAR ═══ */
#catBar {
  position: sticky;
  top: 75px;
  z-index: 90;
  background: rgba(244, 247, 247, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

#catScroll {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#catScroll::-webkit-scrollbar {
  display: none
}

#catBar{
  position:sticky;top:75px;z-index:90;
  background:var(--bg); border-bottom:1px solid var(--border);
  display:block; /* Container for absolute children */
  height:104px; /* Matches category chip height + padding */
}

#catScroll{
  display:flex;gap:12px;overflow-x:auto;
  padding:12px 18px; /* Room for scroll */
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
#catScroll::-webkit-scrollbar{display:none}

.cat-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:10; cursor:pointer;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,59,59,.1);
  width:36px;height:36px;color:var(--text);
  display:none;align-items:center;justify-content:center;
  transition:all .25s var(--ease);border-radius:50%;
}
/* Floating positioning */
.cat-nav.left{left:10px}
.cat-nav.right{right:10px}

/* Only show on desktop by default, mobile media query will handle display:flex if needed */
.cat-nav:hover{background:#fff;transform:translateY(-50%) scale(1.1);color:var(--accent)}
.cat-nav:active{transform:translateY(-50%) scale(0.9)}
.cat-nav svg{stroke-width:3}

.cat-tab{
  flex-shrink:0;height:42px;padding:0 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:42px;
  font-family:var(--fb);font-size:14px;font-weight:700;color:var(--muted);
  cursor:pointer;transition:all .2s var(--ease);
  display:flex;align-items:center;white-space:nowrap;gap:8px;
  box-shadow: 0 2px 5px rgba(0,59,59,.04);
}
.cat-tab:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
.cat-tab:active{transform:scale(0.92);background:var(--surface2)}
.cat-tab.on{
  background:var(--text);color:#fff;border-color:var(--text);
  box-shadow:0 6px 15px rgba(0,59,59,.15);
}

/* ═══ MENU ═══ */
#menuWrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 16px 100px
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px
}

.sec-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em
}

.sec-count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600
}

.sec-hr {
  border: none;
  border-top: 1.5px solid var(--border);
  margin-bottom: 20px
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: all .2s var(--ease);
  display: flex;
  flex-direction: column;
  /* Enable flex for alignment */
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh);
  border-color: var(--accent2)
}

.card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.card-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  color: var(--text)
}

.card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  /* Push the footer to the bottom */
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto
}

.card-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent)
}

.attr-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase
}

.price-sym {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  margin-right: 1px
}

.add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent2);
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.add-btn:hover {
  background: var(--text);
  transform: scale(1.1)
}

/* ═══ FOOTER ═══ */
#ftr {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 60px 20px 40px;
  text-align: center
}

.f-inner {
  max-width: 600px;
  margin: 0 auto
}

.f-logo {
  font-family: var(--fb);
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: -1px
}

.f-dot {
  color: var(--accent)
}

.f-info p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px
}

.f-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accentbg);
  color: var(--accent);
  padding: 12px 24px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: all .2s;
}

.f-wa:hover {
  background: var(--accent2);
  color: #fff;
  transform: translateY(-2px)
}

.f-copy {
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
  opacity: .7
}

/* ═══ SCRIM ═══ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 59, 59, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.scrim.on {
  opacity: 1;
  pointer-events: all
}

/* ═══ DRAWER ═══ */
#drawer {
  position: fixed;
  inset: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) auto;
  width: min(440px, 100vw);
  background: var(--surface);
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 50px rgba(0, 59, 59, .1);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
}

#drawer.on {
  transform: translateX(0)
}

.d-hdr {
  padding: 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700
}

.x-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface2);
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.x-btn:hover {
  background: var(--border);
  color: var(--text)
}

.d-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px
}

/* ── EMPTY STATE ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.empty-ico {
  font-size: 40px;
  margin-bottom: 14px;
  opacity: 0.8
}

.empty-title {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px
}

.empty-sub {
  font-size: 14px;
  color: var(--muted)
}

/* ── CART ITEM ── */
.ci {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.ci-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px
}

.ci-unit {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px
}

.ci-note {
  width: 100%;
  resize: none;
  height: 36px;
  min-height: 36px;
  font-family: var(--fb);
  font-size: 13px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  outline: none;
  margin-bottom: 8px;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 10px
}

.q-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.q-num {
  font-weight: 700;
  font-size: 14px;
  min-width: 18px;
  text-align: center
}

.ci-total {
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 700;
  padding-top: 2px
}

/* ── DRAWER FOOTER ── */
.d-ftr {
  padding: 16px 18px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface)
}

.f-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block
}

.addr {
  width: 100%;
  font-family: var(--fb);
  font-size: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  outline: none;
  margin-bottom: 12px;
}

.addr:focus {
  border-color: var(--accent2);
  background: #fff
}

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.sum-total {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 700
}

.wa-btn {
  width: 100%;
  height: 52px;
  background: var(--wa);
  border: none;
  border-radius: 14px;
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .15s var(--ease);
}

.wa-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px)
}

.wa-btn:active {
  transform: scale(0.98)
}

/* ═══ MODAL ═══ */
#mWrap {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 59, 59, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

#mWrap.on {
  opacity: 1;
  pointer-events: all
}

#modal {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  /* Removal of fixed padding to ensure it truly hits the bottom, 
     Safe area is handled by the natural flow or specific padding inside */
  padding-bottom: env(safe-area-inset-bottom, 24px);
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}

#mWrap.on #modal {
  transform: translateY(0)
}

.m-inner {
  padding: 24px
}

.m-name {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px
}

.m-desc {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px
}

.m-price {
  font-family: var(--fb);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  color: var(--accent);
  margin-bottom: 24px
}

.m-note {
  width: 100%;
  height: 90px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-family: var(--fb);
  outline: none;
  margin-bottom: 20px;
  font-size: 14px;
}

.m-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
  display: block
}

.m-cta {
  width: 100%;
  height: 52px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

.m-cta:hover {
  background: #5a7b7e
}

/* ── VARIATION CHIPS ── */
.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center
}

.chip {
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.chip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent)
}

/* ═══ TOAST ═══ */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  z-index: 1000;
  opacity: 0;
  transition: all .3s var(--ease);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1
}

/* ═══ ACTIONS ═══ */
#topBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh);
}

#topBtn.on {
  opacity: 1;
  visibility: visible
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:600px) {
  body {
    font-size: 18px
  }

  #hdr {
    height: 75px
  }

  .logo-img {
    height: 48px
  }

  #hero {
    padding: 40px 18px 50px
  }

  .cat-nav{
    display:flex; /* Show floating arrows on mobile */
    width:28px; height:28px; /* Even smaller */
    opacity:0.95;
  }
  .cat-nav svg{width:12px; height:12px; stroke-width:3.5}
  
  #catScroll{
    padding:12px 6px; /* Reduced side padding for small arrows */
    gap:8px;
    scroll-padding:0 30px; /* Aligned with smaller arrows */
  }
  .cat-tab{
    width:calc(25vw - 12px); /* 4 items per view */
    background:var(--surface); border:1px solid var(--border);
    padding:10px 4px; border-radius:18px;
    flex-direction:column; height:auto; min-height:86px;
    justify-content:center; gap:6px;
    box-shadow: 0 4px 12px rgba(0,59,59,.05);
  }
  .cat-tab-ico{font-size:26px; transform:translateY(-2px)} 
  .cat-tab-txt{
    font-size:10px; font-weight:800; line-height:1.2;
    text-align:center; color:var(--text);
    display:-webkit-box; -webkit-line-clamp:2; 
    line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:break-word;
  }
  .cat-tab.on{
    background:var(--text); color:#fff; border-color:var(--text);
    box-shadow:0 8px 18px rgba(0,59,59,.15);
  }
  .cat-tab.on .cat-tab-txt{color:#fff}
  .grid{grid-template-columns:1fr 1fr;gap:14px}

  .card-body {
    padding: 16px
  }

  .card-name {
    font-size: 16px
  }

  .card-desc {
    display: none
  }

  .card-price {
    font-size: 18px;
    color: var(--accent)
  }

  .price-sym {
    font-size: 14px;
    color: var(--accent)
  }

  .add-btn {
    width: 30px;
    height: 30px;
    font-size: 16px
  }
}

@media(max-width:360px) {
  .grid {
    grid-template-columns: 1fr
  }
}

@media(min-width:1001px) {
  #catScroll {
    justify-content: center;
    gap: 12px
  }
}