:root{
  --brand-primary:#111111;
  --brand-accent:#16a34a;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
body{background:#f5f7fb;padding-bottom:96px;}
input,textarea,select{outline:none;}

.hide-scrollbar::-webkit-scrollbar{display:none;}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ---------- Glass floating header & mobile island nav ---------- */
.glass{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.4);
}

/* ---------- Hero banner slider ---------- */
.banner-slide{display:none;}
.banner-slide.active{display:block;animation:fade .6s ease;}
@keyframes fade{from{opacity:0;transform:scale(1.03);}to{opacity:1;transform:scale(1);}}

/* ---------- Promo carousel ---------- */
.promo-slide{display:none;}
.promo-slide.active{display:block;animation:fade .6s ease;}
.promo-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.4);transition:.3s;}
.active-promo-dot{width:30px;background:white;}

/* ---------- Category filter pills ---------- */
.category-btn{padding:8px 16px;border-radius:999px;background:white;font-size:12px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.active-category{background:var(--brand-primary);color:white;}

/* ---------- Product cards ---------- */
.product-card{transition:.3s;}
.product-card:hover{transform:translateY(-5px);}

/* ---------- Buttons ---------- */
.brand-btn,.brand-bg{background:var(--brand-primary);}
.brand-text{color:var(--brand-primary);}
.accent-text{color:var(--brand-accent);}

/* ---------- Product detail page ---------- */
.gallery-thumb.active{border:2px solid var(--brand-primary);}
.variant-btn.selected,.variant-btn.active{background:var(--brand-primary);color:#fff;}

/* ---------- Voucher / reward cards ---------- */
.voucher-card{transition:.25s;}
.voucher-card:hover{transform:translateY(-3px);}