/* MyHerbals Smart Shop */
.mhss{
  --mh-green:#007A33;
  --mh-green-dark:#005f27;
  --mh-green-soft:#edf8f1;
  --mh-text:#17211b;
  --mh-muted:#6c756f;
  --mh-line:#e5e9e6;
  --mh-bg:#ffffff;
  --mh-soft:#f7f9f7;
  color:var(--mh-text);
  font-family:inherit;
}
.mhss *{box-sizing:border-box}
.mhss button,.mhss input,.mhss select{font:inherit}
.mhss-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px;
  min-height:42px;padding:10px 0;font-size:13px;color:var(--mh-muted)
}
.mhss-breadcrumb a{color:var(--mh-green);text-decoration:none;font-weight:700}
.mhss-breadcrumb a:hover{color:var(--mh-green-dark);text-decoration:underline}
.mhss-breadcrumb-sep{color:#9aa49d}
.mhss-toolbar{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.mhss-count{margin-right:auto;font-size:14px;color:var(--mh-muted)}
.mhss-count strong{color:var(--mh-text)}
.mhss-sort-wrap select{
  min-height:44px;border:1px solid var(--mh-line);border-radius:8px;background:#fff;
  padding:0 38px 0 12px;color:var(--mh-text)
}
.mhss-filter-toggle{
  display:none;min-height:44px;padding:0 14px;border:1px solid var(--mh-green);
  border-radius:8px;background:#fff;color:var(--mh-green);font-weight:700;cursor:pointer
}
.mhss-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}
.mhss-sidebar{position:sticky;top:20px;border:1px solid var(--mh-line);border-radius:12px;background:#fff;overflow:hidden}
.mhss-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--mh-line)}
.mhss-sidebar-head strong{font-size:17px}
.mhss-close{display:none;border:0;background:transparent;font-size:30px;line-height:1;color:var(--mh-text);cursor:pointer}
.mhss-filter-block{padding:17px 18px;border-bottom:1px solid var(--mh-line)}
.mhss-filter-title{display:block;margin-bottom:11px;font-weight:700;font-size:14px}
.mhss-filter-block input[type="search"],
.mhss-filter-block input[type="number"]{
  width:100%;min-height:44px;border:1px solid #cfd6d1;border-radius:8px;background:#fff;padding:9px 11px;
  outline:none;color:var(--mh-text)
}
.mhss-filter-block input:focus,.mhss-sort-wrap select:focus{border-color:var(--mh-green);box-shadow:0 0 0 3px rgba(0,122,51,.12)}
.mhss-check-list{display:grid;gap:9px}
.mhss-scroll-list{max-height:190px;overflow:auto;padding-right:4px}
.mhss-check{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.35;cursor:pointer}
.mhss-check input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--mh-green);flex:0 0 auto}
.mhss-price-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mhss-price-row label span{display:block;font-size:12px;color:var(--mh-muted);margin-bottom:5px}
.mhss-filter-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 18px}
.mhss-clear,.mhss-apply{min-height:43px;border-radius:8px;font-weight:700;cursor:pointer}
.mhss-clear{border:1px solid var(--mh-line);background:#fff;color:var(--mh-text)}
.mhss-apply{border:1px solid var(--mh-green);background:var(--mh-green);color:#fff}
.mhss-apply:hover{background:var(--mh-green-dark);border-color:var(--mh-green-dark)}
.mhss-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;min-height:0}
.mhss-chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid #b9ddc7;background:var(--mh-green-soft);
  color:var(--mh-green-dark);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700
}
.mhss-chip button{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;font-size:15px;line-height:1}

.mhss-brand-list{display:grid;gap:9px}
.mhss-brand-row{display:flex;align-items:center;gap:6px;min-width:0}
.mhss-brand-check{flex:1;min-width:0}
.mhss-brand-check > span:not(.mhss-brand-count){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhss-brand-count{
  margin-left:auto;min-width:22px;text-align:center;color:var(--mh-muted);
  font-size:11px;font-weight:700
}
.mhss-brand-link{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:var(--mh-green);text-decoration:none;font-weight:800;flex:0 0 auto
}
.mhss-brand-link:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}
.mhss-more-brands{margin-top:9px}
.mhss-more-brands[hidden]{display:none!important}
.mhss-more-brands-toggle{
  width:100%;margin-top:10px;min-height:38px;border:1px solid #b9ddc7;border-radius:7px;
  background:#fff;color:var(--mh-green);font-weight:800;cursor:pointer
}
.mhss-more-brands-toggle:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}

.mhss-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mhss-card{min-width:0;border:1px solid var(--mh-line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.mhss-card:hover{border-color:#b8d9c4;transform:translateY(-2px)}
.mhss-card-image{position:relative;display:block;aspect-ratio:1/1;background:var(--mh-soft);overflow:hidden}
.mhss-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.mhss-sale,.mhss-fulfilled{position:absolute;left:9px;border-radius:5px;padding:5px 7px;font-size:10px;font-weight:800;line-height:1.15}
.mhss-sale{top:9px;background:var(--mh-green);color:#fff}
.mhss-fulfilled{bottom:9px;background:#fff;color:var(--mh-green);border:1px solid #b8d9c4;max-width:calc(100% - 18px)}
.mhss-card-body{padding:12px}
.mhss-category{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--mh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.mhss-product-title{font-size:14px;line-height:1.3;margin:0 0 5px;min-height:36px}
.mhss-product-title a{color:var(--mh-text);text-decoration:none}
.mhss-product-title a:hover{color:var(--mh-green)}
.mhss-vendor{font-size:11px;color:var(--mh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}
.mhss-rating{display:flex;align-items:center;gap:4px;font-size:11px;margin-bottom:7px}
.mhss-stars{color:#7a6200;font-weight:700}
.mhss-rating-count{color:var(--mh-muted)}
.mhss-price{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--mh-text)}
.mhss-price del{font-weight:400;color:#8b948e;font-size:12px}
.mhss-price ins{text-decoration:none;color:var(--mh-green)}
.mhss-stock{font-size:10px;font-weight:700;margin-bottom:9px}
.mhss-stock.is-in{color:var(--mh-green)}
.mhss-stock.is-out{color:#9b2c2c}
.mhss-cart.button{
  display:flex!important;align-items:center;justify-content:center;width:100%;min-height:40px!important;
  padding:8px 10px!important;border:1px solid var(--mh-green)!important;border-radius:7px!important;
  background:var(--mh-green)!important;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:800!important;
  line-height:1.2!important
}
.mhss-cart.button:hover{background:var(--mh-green-dark)!important;border-color:var(--mh-green-dark)!important;color:#fff!important}
.mhss-loader,.mhss-end{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 8px;color:var(--mh-muted);font-size:13px}
.mhss-loader[hidden],.mhss-end[hidden]{display:none!important}
.mhss-spinner{width:18px;height:18px;border:2px solid #d8dfda;border-top-color:var(--mh-green);border-radius:50%;animation:mhss-spin .7s linear infinite}
@keyframes mhss-spin{to{transform:rotate(360deg)}}
.mhss-sentinel{height:1px}
.mhss-overlay{display:none}
.mhss-notice{padding:16px;border:1px solid #e3e3e3;border-radius:8px}

@media(max-width:1200px){
  
.mhss-brand-list{display:grid;gap:9px}
.mhss-brand-row{display:flex;align-items:center;gap:6px;min-width:0}
.mhss-brand-check{flex:1;min-width:0}
.mhss-brand-check > span:not(.mhss-brand-count){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhss-brand-count{
  margin-left:auto;min-width:22px;text-align:center;color:var(--mh-muted);
  font-size:11px;font-weight:700
}
.mhss-brand-link{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:var(--mh-green);text-decoration:none;font-weight:800;flex:0 0 auto
}
.mhss-brand-link:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}
.mhss-more-brands{margin-top:9px}
.mhss-more-brands[hidden]{display:none!important}
.mhss-more-brands-toggle{
  width:100%;margin-top:10px;min-height:38px;border:1px solid #b9ddc7;border-radius:7px;
  background:#fff;color:var(--mh-green);font-weight:800;cursor:pointer
}
.mhss-more-brands-toggle:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}

.mhss-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .mhss-layout{grid-template-columns:1fr}
  .mhss-filter-toggle{display:inline-flex;align-items:center;gap:7px}
  .mhss-sidebar{
    position:fixed;z-index:99992;left:0;top:0;bottom:0;width:min(88vw,340px);
    border-radius:0;transform:translateX(-105%);transition:transform .22s ease;overflow:auto
  }
  .mhss.is-filter-open .mhss-sidebar{transform:translateX(0)}
  .mhss-close{display:block}
  .mhss-overlay{
    position:fixed;z-index:99991;inset:0;border:0;background:rgba(0,0,0,.38);cursor:pointer
  }
  .mhss.is-filter-open .mhss-overlay{display:block}
  body.mhss-no-scroll{overflow:hidden}
}
@media(max-width:680px){
  .mhss-toolbar{gap:8px;flex-wrap:wrap}
  .mhss-count{order:3;width:100%;margin:0}
  .mhss-sort-wrap{margin-left:auto}
  .mhss-sort-wrap select{max-width:180px}
  
.mhss-brand-list{display:grid;gap:9px}
.mhss-brand-row{display:flex;align-items:center;gap:6px;min-width:0}
.mhss-brand-check{flex:1;min-width:0}
.mhss-brand-check > span:not(.mhss-brand-count){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhss-brand-count{
  margin-left:auto;min-width:22px;text-align:center;color:var(--mh-muted);
  font-size:11px;font-weight:700
}
.mhss-brand-link{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:var(--mh-green);text-decoration:none;font-weight:800;flex:0 0 auto
}
.mhss-brand-link:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}
.mhss-more-brands{margin-top:9px}
.mhss-more-brands[hidden]{display:none!important}
.mhss-more-brands-toggle{
  width:100%;margin-top:10px;min-height:38px;border:1px solid #b9ddc7;border-radius:7px;
  background:#fff;color:var(--mh-green);font-weight:800;cursor:pointer
}
.mhss-more-brands-toggle:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}

.mhss-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mhss-card-body{padding:9px}
  .mhss-product-title{font-size:12px;min-height:32px}
  .mhss-price{font-size:13px}
  .mhss-cart.button{font-size:11px!important;padding:7px 5px!important}
}
@media(max-width:360px){
  
.mhss-brand-list{display:grid;gap:9px}
.mhss-brand-row{display:flex;align-items:center;gap:6px;min-width:0}
.mhss-brand-check{flex:1;min-width:0}
.mhss-brand-check > span:not(.mhss-brand-count){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhss-brand-count{
  margin-left:auto;min-width:22px;text-align:center;color:var(--mh-muted);
  font-size:11px;font-weight:700
}
.mhss-brand-link{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:var(--mh-green);text-decoration:none;font-weight:800;flex:0 0 auto
}
.mhss-brand-link:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}
.mhss-more-brands{margin-top:9px}
.mhss-more-brands[hidden]{display:none!important}
.mhss-more-brands-toggle{
  width:100%;margin-top:10px;min-height:38px;border:1px solid #b9ddc7;border-radius:7px;
  background:#fff;color:var(--mh-green);font-weight:800;cursor:pointer
}
.mhss-more-brands-toggle:hover{background:var(--mh-green-soft);color:var(--mh-green-dark)}

.mhss-product-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mhss-card,.mhss-sidebar,.mhss-spinner{transition:none;animation:none}
}


/* v1.3 dynamic filter state */
.mhss-breadcrumb{
  min-height:36px;
  margin-bottom:14px;
}
#mhss-breadcrumb-filters{
  display:contents;
}
.mhss-breadcrumb-filter{
  color:var(--mh-text);
  font-weight:700;
}
.mhss-filter-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
  min-height:0;
}
.mhss-filter-summary:empty{
  display:none;
}
.mhss-active-filters{
  flex:1;
  margin:0;
}
.mhss-filtered-count{
  flex:0 0 auto;
  padding-top:6px;
  font-size:12px;
  font-weight:700;
  color:var(--mh-green);
  white-space:nowrap;
}
.mhss-filtered-count[hidden]{
  display:none!important;
}
.mhss-filter-count{
  margin-left:auto;
  min-width:24px;
  text-align:right;
  color:var(--mh-muted);
  font-size:11px;
  font-weight:700;
}
.mhss-brand-row{
  cursor:pointer;
}
.mhss-brand-link{
  display:none!important;
}
.mhss-check{
  width:100%;
}
.mhss-check > span:not(.mhss-filter-count){
  min-width:0;
}
.mhss-check input:checked + span{
  color:var(--mh-green);
  font-weight:800;
}
.mhss-check:has(input:checked){
  color:var(--mh-green);
}
@media(max-width:680px){
  .mhss-filter-summary{
    display:block;
  }
  .mhss-filtered-count{
    padding-top:8px;
    white-space:normal;
  }
  .mhss-breadcrumb{
    font-size:12px;
    gap:6px;
  }
}

/* v1.4 full category tree with +/- expand for subcategories */
.mhss-cat-tree,.mhss-cat-list{display:grid;gap:3px}
.mhss-cat-node{width:100%}
.mhss-cat-row{display:flex;align-items:flex-start;gap:7px}
.mhss-cat-toggle{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;border:1px solid var(--mh-line);
  border-radius:6px;background:#fff;color:var(--mh-green);font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px
}
.mhss-cat-toggle:hover{background:var(--mh-green-soft);border-color:#b9ddc7}
.mhss-cat-toggle[aria-expanded="true"]{background:var(--mh-green-soft);border-color:#b9ddc7;color:var(--mh-green-dark)}
.mhss-cat-spacer{flex:0 0 auto;width:22px;height:22px}
.mhss-cat-row .mhss-check{flex:1;min-width:0;width:auto}
.mhss-cat-children{
  margin:4px 0 4px 22px;padding-left:11px;border-left:1px dashed var(--mh-line);
  display:grid;gap:3px
}
.mhss-cat-children[hidden]{display:none!important}
.mhss-check-empty{opacity:.5}
.mhss-check-empty input{cursor:not-allowed}