:root{
    --brand:#00C300;
    --ink:#ffffff;
    --ring: rgba(255,255,255,.35);
    --chip-bg: rgba(255,255,255,.14);
    --chip-hover: rgba(255,255,255,.24);
    --shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  *{ box-sizing:border-box; }

  /* ===== Fixed Header ===== */
  .header-fixed{ position:fixed; top:0; left:0; right:0; z-index:1030; }
  .header-fixed.scrolled .shop-header{ box-shadow:var(--shadow); }
  .header-spacer{ height: var(--spacer, 120px); }

  /* ===== Topbar ===== */
  .topbar{ background:var(--brand); color:var(--ink); font-size:.9rem; }
  .topbar a{ color:var(--ink); text-decoration:none; opacity:.9 }
  .topbar a:hover{ opacity:1; text-decoration:underline }

  /* ===== Header/Search ===== */
  .shop-header{ background:var(--brand); color:#fff; padding:10px 0 14px; transition:box-shadow .25s }
  .header-grid{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    column-gap:10px;
    min-width:0;
  }
  .brand-wrap{ display:flex; align-items:center; color:#fff; text-decoration:none; min-width:0 }
.brand-logo-responsive {
  height: auto;       /* ใช้ความสูงจริง */
  width: auto;        /* ใช้ความกว้างจริง */
  display: block;
  max-width: none;    /* desktop ให้แสดงเต็มไฟล์ */
  max-height: none;
}

@media (max-width: 768px) {
  .brand-logo-responsive {
    height: auto;       /* ให้สมส่วน */
  }
}

  .search-cell{ min-width:0 }
  .search-bar{
    display:flex; align-items:center; gap:.5rem; height:40px;
    background:#fff; border-radius:999px; padding:0 6px;
    width:100%; box-shadow:0 0 0 1px var(--ring) inset; overflow:hidden;
  }
  .search-bar input{
    flex:1 1 auto; min-width:0; border:none; outline:none; padding:0 8px; font-size:.95rem;
  }
  .btn-search{
    border:none; width:34px; height:34px; border-radius:50%;
    background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  }
  .btn-search:hover{ filter:brightness(.95) }

  .icon-btn{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.4rem; position:relative; flex:0 0 auto;
  }
  .cart-badge{
    position:absolute; top:-6px; right:-8px; background:#fff; color:var(--brand);
    font-size:.7rem; padding:1px 6px; border-radius:999px; font-weight:700;
    border:1px solid rgba(0,0,0,.05);
  }
  .hamburger-btn{
    display:none;
    border:1px solid rgba(255,255,255,.85); color:#fff; background:transparent;
    width:34px; height:34px; border-radius:10px; align-items:center; justify-content:center; margin:4px;
  }

  /* Keywords */
  .keywords{ margin-top:.55rem; display:flex; gap:.35rem; flex-wrap:wrap }
  .kw-chip{
    white-space:nowrap; color:#fff; background:var(--chip-bg);
    border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:4px 10px; font-size:.85rem;
  }
  .kw-chip:hover{ background:var(--chip-hover); cursor:pointer }

  /* Offcanvas */
  .offcanvas{ z-index:1055; }
  .offcanvas-backdrop{ z-index:1050; }
  .offcanvas-start{ width:260px!important; }
  .offcanvas-header{ background:var(--brand); color:#fff; padding:.75rem 1rem }
  .offcanvas .list-group-item{ border:none; border-bottom:1px solid #f1f1f1; padding:.75rem 1rem }
  .offcanvas .list-group-item i{ width:22px }

  /* Mobile < 994px */
  @media (max-width: 994px){
    .topbar{ display:none!important }
    .keywords{ display:none!important }
    .shop-header .container{ padding-left:12px; padding-right:12px }
    .hamburger-btn{ display:inline-flex }
  }