:root{
  --bg:#ebf7ff;
  --card:#ee9226;
  --muted:#566574;
  --brand:#ee9226;
  --text:#022036;
  --accent:#022036;
  --inputcolor:#ffffff;

  /* fluid type */
  --fs-xxs: clamp(11px, 0.68rem + 0.1vw, 12px);
  --fs-xs:  clamp(12px, 0.72rem + 0.2vw, 13.5px);
  --fs-sm:  clamp(13.5px, 0.8rem + 0.3vw, 15px);
  --fs-md:  clamp(15px, 0.9rem + 0.4vw, 17px);
  --fs-lg:  clamp(18px, 1.05rem + 0.6vw, 22px);
  --fs-xl:  clamp(22px, 1.25rem + 1.2vw, 30px);
  --fs-2xl: clamp(26px, 1.5rem + 2vw, 38px);

  --radius: 12px;
  --radius-lg: 16px;

  /* spacing */
  --sp-1: clamp(6px, 0.3rem + 0.2vw, 8px);
  --sp-2: clamp(10px, 0.5rem + 0.3vw, 12px);
  --sp-3: clamp(14px, 0.7rem + 0.5vw, 16px);
  --sp-4: clamp(18px, 0.9rem + 0.7vw, 22px);
  --sp-5: clamp(22px, 1.1rem + 1vw, 28px);
}

/* base */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  font-size:var(--fs-md); line-height:1.5; -webkit-text-size-adjust:100%;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--sp-2)}

/* HEADER */
.header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid rgba(2,32,54,.12);
  box-shadow:0 6px 14px rgba(2,32,54,.06);
}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.brand{display:flex;align-items:center;gap:var(--sp-2)}
.brand img{height:40px;width:auto}
.brand .name{font-weight:800;letter-spacing:.2px;font-size:var(--fs-md)}

/* NAV LINKS */
.navlinks{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}
.navlinks a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(2,32,54,.15);
  background:transparent;color:var(--accent);font-size:var(--fs-sm);
  transition:background .2s ease, border-color .2s ease, transform .1s ease, color .2s ease;
}
.navlinks a:hover{background:rgba(238,146,38,.12);border-color:rgba(238,146,38,.35);transform:translateY(-1px)}
.navlinks a.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* hamburger */
#navCheck{display:none}
.hamb{
  display:none;align-items:center;justify-content:center;
  width:42px;height:38px;border-radius:10px;border:1px solid rgba(2,32,54,.15);
  background:#fff;color:var(--accent);cursor:pointer;font-size:20px;line-height:1;
}

/* TOOLBAR */
.toolbar{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-3)}

/* DESKTOP/TABLET SEARCH */
.search{
  display:flex;align-items:center;gap:8px;
  width:100%; max-width:680px;
  height:48px; padding:0 14px; border-radius:var(--radius);
  background:var(--accent);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 6px rgba(2,32,54,.12);
  min-width:260px; flex:1 1 360px; line-height:1;
}
.search *{margin:0}
.search svg{width:18px;height:18px;opacity:.75;flex:0 0 18px}
.search input{
  all:unset;color:var(--inputcolor);width:100%;
  font-size:16px; height:28px; line-height:28px; letter-spacing:.2px;
}
.search input::placeholder{color:rgba(255,255,255,.65)}
.search:focus-within{
  border-color:rgba(238,146,38,.55);
  box-shadow:0 0 0 3px rgba(238,146,38,.18), inset 0 2px 6px rgba(2,32,54,.12);
}

/* CATEGORY SELECT */
.select{
  appearance:none;background:var(--accent);color:var(--inputcolor);
  border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:var(--radius);
  font-size:var(--fs-sm); height:48px;
}

/* GRID + CARDS */
.grid{
  display:grid;gap:var(--sp-2);padding:var(--sp-4) 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  background:#fff;border:1px solid rgba(2,32,54,.08);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column
}
.card img{width:100%;height:180px;object-fit:cover;background:#e7eef5}
.card .cbody{padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.price{font-weight:700;color:var(--accent);font-size:var(--fs-md)}
.badge{
  display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid rgba(2,32,54,.12);
  font-size:var(--fs-xxs);color:var(--muted);background:#f5fbff
}

/* BUTTONS */
.actions{display:flex;gap:var(--sp-2);margin-top:auto}
.btn{
  flex:1;display:inline-flex;justify-content:center;align-items:center;
  padding:12px var(--sp-2);border-radius:var(--radius);
  border:1px solid rgba(2,32,54,.12);background:#fff;color:var(--accent);
  cursor:pointer;font-weight:600;font-size:var(--fs-sm);
  transition:transform .1s ease, background .2s ease, border-color .2s ease
}
.btn:hover{transform:translateY(-1px);background:#f7fbff;border-color:rgba(2,32,54,.2)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

/* HERO */
.hero{padding:var(--sp-4) 0 0}
.hero h1{margin:10px 0 6px;font-size:var(--fs-2xl);line-height:1.15}
.hero p{margin:0;color:var(--muted);font-size:var(--fs-md)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal.show{display:flex}
.sheet{width:min(720px,96vw);background:#fff;border:1px solid rgba(2,32,54,.12);border-radius:var(--radius-lg);overflow:hidden}
.sheet .top{display:grid;grid-template-columns:320px 1fr}
.sheet img{width:100%;height:100%;object-fit:cover;background:#e7eef5}
.sheet .content{padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.kv{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.kv .pill{
  padding:6px 10px;border-radius:var(--radius);background:#f5fbff;
  border:1px solid rgba(2,32,54,.12);font-size:var(--fs-xxs);color:var(--muted)
}
.whatsapp{display:inline-flex;gap:10px;align-items:center}
.whatsapp svg{height:18px;width:18px}

/* PAGES */
.page{max-width:860px;margin:0 auto;padding:var(--sp-4) 0;line-height:1.65}
.page h1{margin:0 0 6px;font-size:var(--fs-xl)}
.page p{color:var(--muted);font-size:var(--fs-md)}
.form{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
input,textarea{
  background:#fff;border:1px solid rgba(2,32,54,.18);border-radius:var(--radius);
  color:var(--text);padding:12px;font-size:var(--fs-sm)
}
textarea{min-height:140px}
.notice{font-size:var(--fs-xxs);color:var(--muted)}

/* BLOG */
.blog-list{display:grid;gap:var(--sp-2)}
.blog-item{padding:var(--sp-2);border:1px solid rgba(2,32,54,.12);border-radius:var(--radius-lg);background:#fff}
.blog-item h3{margin:0 0 6px;font-size:var(--fs-lg)}
.chips{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.chip{font-size:var(--fs-xxs);padding:4px 8px;border-radius:999px;background:#f5fbff;border:1px solid rgba(2,32,54,.12);color:var(--muted)}

/* FOOTER */
.footer{border-top:1px solid rgba(2,32,54,.12);margin-top:var(--sp-5);padding-bottom:var(--sp-3)}
.footer small{color:var(--muted);font-size:var(--fs-xs)}

/* ---------- MOBILE SEARCH TRIGGERS (icon + button) ---------- */
.search-mobile{display:none; gap:10px; align-items:center}
.search-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(2,32,54,.15); background:#fff; color:var(--accent);
}
.search-btn{
  height:42px; padding:0 14px; border-radius:12px;
  border:1px solid rgba(2,32,54,.15); background:var(--brand);
  color:#fff; font-weight:700; letter-spacing:.2px;
}

/* ===== RESPONSIVE ===== */

/* <= 1024px */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .sheet .top{grid-template-columns:300px 1fr}
}

/* <= 900px */
@media (max-width:900px){
  .btn{padding:12px var(--sp-3);font-size:var(--fs-md)}
  .search{min-width:unset}
  .page{padding:10px}
}

/* <= 780px — mobile nav + icon/button search + overlay */
@media (max-width:780px){
  .brand .name{display:none}
  .hamb{display:inline-flex}

  .navlinks{
    position:absolute;left:0;right:0;top:64px;display:none;
    flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);
    background:var(--bg);border-top:1px solid rgba(2,32,54,.12);
    box-shadow:0 10px 20px rgba(2,32,54,.08);
  }
  .header.nav-open .navlinks{display:flex}
  .navlinks a{width:100%;padding:12px;border-radius:var(--radius);font-size:var(--fs-md)}

  .toolbar{flex-direction:column;align-items:stretch}

  /* switch to triggers */
  .search{display:none !important;}
  .search-mobile{display:flex;}

  .select{width:100%; height:46px}

  /* overlay backdrop (used when body.search-open is set in JS) */
  .search-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:70;
  }
  body.search-open{overflow:hidden}
  body.search-open .search-backdrop{display:block}

  /* show the real search as a floating bar on top when open */
  body.search-open .search{
    display:flex !important;
    position:fixed; left:12px; right:12px; top:12px; z-index:80;
    height:54px !important; padding:0 14px !important; border-radius:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.35);
  }
  body.search-open .search input{
    height:30px !important; line-height:30px !important; font-size:17px !important;
  }
  body.search-open .header{box-shadow:none}
  body.search-open .navlinks{display:none}

  .sheet .top{grid-template-columns:1fr}
  .card img{height:170px}
}

/* <= 560px */
@media (max-width:560px){
  .wrap{padding:0 var(--sp-2)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .hero h1{font-size:var(--fs-xl)}
  .btn{padding:14px var(--sp-3);font-size:var(--fs-md)}
  input,textarea{font-size:var(--fs-md);padding:14px}
  .badge{font-size:var(--fs-xs)}
  .price{font-size:var(--fs-lg)}
  .card img{height:160px}
}

/* <= 380px */
@media (max-width:380px){
  .nav{height:60px}
  .hamb{width:40px;height:36px}
  .navlinks a{padding:10px}
  .grid{grid-template-columns:1fr}
  .card img{height:150px}
  .brand img{height:34px}
}