@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#fbfaf7;
  --panel:#ffffff;
  --ink:#201f1c;
  --muted:#848074;
  --line:#e8e4d8;
  --accent:#1f6f64;
  --accent-soft:#e3efec;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  padding-bottom:76px;
}

.brandbar{
  background:var(--accent);
  color:#fff;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brandbar .logo{ font-weight:800; font-size:15.5px; letter-spacing:.01em; }
.brandbar .tag{
  font-size:11px;
  background:rgba(255,255,255,.16);
  padding:4px 10px;
  border-radius:100px;
  font-weight:600;
}

.hero{ padding:26px 18px 18px; max-width:1100px; margin:0 auto; }
.hero h1{ font-size:clamp(24px,5vw,34px); font-weight:800; margin:0 0 6px; letter-spacing:-0.01em; }
.hero p{ color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 16px; max-width:52ch; }
.search-row{ display:flex; gap:8px; }
.search-row input{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); font-family:inherit; font-size:14px;
}
.search-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.kepekatan{
  max-width:1100px; margin:0 auto; padding:16px 18px 4px;
  display:flex; gap:8px; overflow-x:auto;
}
.kepekatan button{
  flex:none; border:1px solid var(--line); background:var(--panel);
  padding:8px 15px; border-radius:100px; font-family:inherit; font-size:13px;
  font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.kepekatan button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.subtabs{
  max-width:1100px; margin:0 auto; padding:12px 18px 0;
  display:flex; gap:18px; border-bottom:1px solid var(--line);
}
.subtabs button{
  border:none; background:none; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--muted); padding:10px 2px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.gramasi-filter{ padding-top:2px; }

.catalog{
  max-width:1100px; margin:0 auto; padding:20px 18px 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media(min-width:640px){ .catalog{grid-template-columns:repeat(5,1fr);} }
@media(min-width:960px){ .catalog{grid-template-columns:repeat(7,1fr);} }

.tee-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 10px 12px; text-align:center; cursor:pointer;
}
.tee-svg{
  width:100%; max-width:96px; margin:0 auto; display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.tee-divider{ height:1px; background:var(--line); margin:10px 0 8px; }
.gramasi-row{ display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.gramasi-dot{
  display:flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600;
  color:var(--muted); position:relative; padding-left:14px;
}
.gramasi-dot::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line); background:var(--panel);
}
.gramasi-dot.is-available{ color:var(--ink); }
.gramasi-dot.is-available::before{ border-color:var(--accent); background:var(--accent); }
.gramasi-dot .check-icon{
  position:absolute; left:1.5px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; color:#fff; display:none;
}
.gramasi-dot.is-available .check-icon{ display:block; }
.tee-name{ font-size:13px; font-weight:800; }
.tee-card[hidden]{ display:none; }

.section-label{
  max-width:1100px; margin:0 auto; padding:22px 18px 4px;
  display:flex; align-items:center; gap:10px;
}
.section-label .swatch-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }
.section-label span{ font-size:12.5px; font-weight:700; color:var(--muted); }
.section-label .rule{ flex:1; height:1px; background:var(--line); }
.section-label[hidden]{ display:none; }

.empty-state{
  text-align:center; color:var(--muted); font-size:13.5px; padding:40px 18px;
}

.sheet-backdrop{ position:fixed; inset:0; background:rgba(20,20,18,.4); display:none; z-index:20; }
.sheet-backdrop.open{ display:block; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; background:var(--panel);
  border-radius:18px 18px 0 0; padding:20px 20px 28px; z-index:21;
  transform:translateY(100%); transition:transform .2s ease;
}
.sheet.open{ transform:translateY(0); }
.sheet .grabber{ width:36px; height:4px; background:var(--line); border-radius:4px; margin:0 auto 16px; }
.sheet .row{ display:flex; gap:16px; align-items:center; }
.chip-lg-svg{ width:64px; height:64px; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.sheet .gramasi-row{ justify-content:flex-start; margin-top:8px; margin-bottom:0; }
.sheet h3{ margin:0 0 4px; font-size:17px; font-weight:800; }
.sheet .meta{ color:var(--muted); font-size:13px; }
.sheet .stock-badge{
  display:inline-block; margin-top:8px; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:100px; background:var(--accent-soft); color:var(--accent);
}
.sheet .stock-badge.out{ background:#f4e3e0; color:#a33; }
.sheet .actions{ margin-top:18px; display:flex; gap:10px; }
.sheet .actions button, .sheet .actions a{
  flex:1; padding:12px; border-radius:10px; border:none;
  font-family:inherit; font-weight:700; font-size:13.5px; cursor:pointer;
  text-align:center; text-decoration:none; display:block;
}
.sheet .actions .primary{ background:var(--accent); color:#fff; }
.sheet .actions .secondary{ background:var(--bg); color:var(--ink); border:1px solid var(--line); }

.bottomnav{
  position:fixed; left:0; right:0; bottom:0; background:var(--panel);
  border-top:1px solid var(--line); display:flex; z-index:15;
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 0 8px; color:var(--muted); text-decoration:none; font-size:10.5px; font-weight:600;
}
.bottomnav a.active{ color:var(--accent); }
.bottomnav svg{ width:20px; height:20px; }