:root{
  --brand:#0b3b35;
  --muted:#6c757d;
  --bg:#f6f7f9;
  --card:#ffffff;
  --shadow: 0 1px 0 rgba(0,0,0,.05);
}

body{
  background:var(--bg);
  padding-bottom: 350px;
}

/* topbar */
.topbar{ background:#f1f4f6; }

/* store header */
.hero{
  height:140px;
  border-radius:18px;
  overflow:hidden;
  background:#ddd;
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.store-title{ font-weight:800; font-size:28px; line-height:1.1; }
.store-address{ color:var(--muted); margin-top:6px; font-size:13px; }

/* whatsapp inline (NOT sticky) */
.wa-inline{
  width:44px; height:44px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  flex:0 0 auto;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.wa-inline i{ font-size:20px; }

/* fixed header (search + view + tabs) */
.fixed-header{
  position:relative;
  left:auto; right:auto;
  top:auto;
  z-index:5;
  background:transparent;
  padding-top:0;
}
/* scroll-dan sonra fixed */
.fixed-header.is-fixed{
  position:fixed;
  left:0; right:0;
  top:0;
  z-index:1030;
}

.header-card{
  margin-top:12px;
  background:#fff;
  border-radius:18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08), 0 -1px 0 rgba(0,0,0,.06);
}

/* spacer will be set by JS */
#fixedSpacer{ height: 0px; }

.search-pill{
  height:42px;
  border-radius:999px;
  background:#fff;
}
.search-pill input{
  border:0; outline:0; background:transparent;
  font-size:14px;
}

.view-btn{
  width:34px; height:34px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#1f2937;
}
.view-btn.active{
  background: rgba(11,59,53,.12);
  color: var(--brand);
}

.cat-container {
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    touch-action: pan-x;
    scroll-behavior: smooth;
	padding: 10px 0;
	
  &::-webkit-scrollbar {
	height: 5px;
  }
  &::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 12px;
  }
  &::-webkit-scrollbar-thumb {
	background: #ececec;
	border-radius: 12px;
  }
}

.cat-tabs{
  width: 100%;
}
.cat-tabs::-webkit-scrollbar{ display:none; }

.cat-pill{
  border-radius:999px;
  border:1px solid #d9dee3;
  padding:.45rem .85rem;
  font-size:13px;
  color:#344054;
  background:#fff;
  display:inline-flex;
  align-items:center;
}
.cat-pill.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.section-title{
  font-weight:800;
  font-size:20px;
  margin: 18px 0 10px;
}

/* product cards */
.p-card{
  background:var(--card);
  border-radius:14px;
  border:0;
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
}
.p-img{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#eee;
  object-fit:cover;
}
.p-name{ font-weight:700; }
.p-desc{ color:var(--muted); font-size:13px; }
.p-price{ font-weight:800; font-size:13px; }

/* list view rows */
.p-list-item{
  display:flex;
  gap:12px;
  padding:12px;
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.p-list-item img{
  width:84px; height:64px;
  border-radius:12px;
  object-fit:cover;
  background:#eee;
  flex:0 0 auto;
}

/* view switch */
.list-view .p-grid{ display:none !important; }
.grid-view .p-list{ display:none !important; }

/* modal details */
.modal-content-full{
  border:0;
  border-radius:0;
  min-height:100vh;
  background:#fff;
}
.modal-close{
  position:absolute;
  left:12px; top:12px;
  z-index:10;
  width:40px; height:40px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
}
.modal-img{
  width:100%;
  height:240px;
  object-fit:cover;
  background:#eee;
}

.qty{ display:flex; align-items:center; gap:14px; }
.qbtn{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid #dfe5ea;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.qnum{ font-weight:800; min-width:22px; text-align:center; }

.bottom-bar{
  position:sticky;
  bottom:0;
  background:#fff;
  padding:12px;
  border-top:1px solid #eef1f4;
}
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  border-radius:12px;
  font-weight:800;
  padding:12px 14px;
}

/* tiny toast */
.mtoast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  z-index:2000;
  font-size:13px;
}