/* ===== Tokens ===== */
.mbox-catalog-wrap {
  --mbox-green: #1a7049;
  --mbox-green-dark: #145c3a;
  --mbox-red: #f56565;
  --mbox-red-dark: #c53030;
  --mbox-border: #e6e8e7;
  --mbox-text: #22323f;
  --mbox-muted: #6b7280;
  --mbox-radius: 14px;
  --mbox-yellow: #FFB91F;
  --pastel-1: #f3efff; /* lavender */
  --pastel-2: #fceef3; /* pink */
  --pastel-3: #fff5e8; /* peach */
  --pastel-4: #eaf8ec; /* mint */
  --pastel-5: #e9f1ff; /* blue */
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Hero ===== */
.mbox-hero{margin:8px 0 18px;padding:28px 16px;border-radius:20px;background:#1a7049;text-align:left}
.mbox-hero-title{margin:0 0 6px 0;font-size:42px;color:#FFFFFF;font-weight:700;font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mbox-hero-sub{margin:0;color:#FFFFFF;line-height:1.5;font-size:22px;font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-weight:300}

/* Age pills (top bar) -> circular pastel chips */
.mbox-age-pills{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}
.mbox-age-pill{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.mbox-age-pill input{display:none}

/* Age text: bigger/bold numbers and “Years” */
.mbox-age-pill em{font-style:normal;font-weight:700;font-size:14px;color:#ffffff;text-align:center;line-height:1.2}
.mbox-age-pill em strong{font-size:16px;font-weight:800;display:block}

/* Circular chip */
.mbox-age-chip{display:grid;place-items:center;width:90px;height:90px;border-radius:999px;border:1px solid var(--mbox-border);background:var(--pastel-1);overflow:hidden}
.mbox-age-chip img{width:68px;height:68px;object-fit:contain;border-radius:999px}
.mbox-age-pill:nth-of-type(3) .mbox-age-chip{background:var(--pastel-2)}
.mbox-age-pill:nth-of-type(4) .mbox-age-chip{background:var(--pastel-3)}
.mbox-age-pill:nth-of-type(5) .mbox-age-chip{background:var(--pastel-4)}
.mbox-age-pill:nth-of-type(6) .mbox-age-chip{background:var(--pastel-5)}

.mbox-age-pill--all{flex-direction:column}
.mbox-age-pill--all span{display:grid;place-items:center;width:90px;height:90px;border-radius:999px;border:1px solid var(--mbox-border);background:#fff;font-weight:800}

/* Focus/selected ring */
.mbox-age-pill:has(input:checked) .mbox-age-chip,
.mbox-age-pill--all:has(input:checked) span{outline:3px solid rgba(255,185,31)}

/* ===== Topbar ===== */
.mbox-catalog-filters.mbox-no-sidebar{display:block;margin-bottom:18px}
.mbox-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--mbox-border);border-radius:var(--mbox-radius);padding:10px 12px}
.mbox-topbar input[type="search"]{
  min-height:40px;border:1px solid var(--mbox-border);border-radius:10px;padding:8px 12px;font-size:14px;
  width:min(260px,100%);flex:1 1 180px;
}

.mbox-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;font-weight:600;border:1px solid var(--mbox-border);background:#fff;color:#24323f;cursor:pointer}
.mbox-btn:hover{border-color:var(--mbox-green)}
.mbox-btn-primary{background:var(--mbox-green);border-color:var(--mbox-green);color:#fff}
.mbox-btn-primary:hover{background:var(--mbox-green-dark)}
.mbox-meter{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--mbox-border);border-radius:999px;background:#fff;font-weight:600;color:var(--mbox-green-dark)}
.mbox-meter .count{padding:2px 8px;border-radius:999px;background:#eaf6ef}

/* ===== Modals – circular tiles ===== */
.mbox-filter-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9999}
.mbox-filter-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(820px,92vw);max-height:80vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.mbox-filter-head,.mbox-filter-foot{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--mbox-border)}
.mbox-filter-foot{border-top:1px solid var(--mbox-border);border-bottom:0}
.mbox-filter-content{padding:14px}
.mbox-filter-content.grid-3{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.mbox-filter-content.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.mbox-filter-content.grid-3{grid-template-columns:repeat(2,1fr)}}

.mbox-cat-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:12px;cursor:pointer;border:1px solid transparent}
.mbox-cat-tile input{display:none}
.mbox-cat-tile img{width:64px;height:64px;object-fit:contain;border-radius:999px;background:#fff;border:1px solid var(--mbox-border);padding:8px}
.mbox-cat-tile:hover img{border-color:var(--mbox-yellow)}
.mbox-cat-tile:has(input:checked) img{outline:3px solid rgba(26,112,73,.25)}
.mbox-cat-tile em{font-style:normal;font-weight:700;font-size:14px;text-align:center}
.mbox-cat-tile em strong{font-size:16px;font-weight:800;display:block}

/* ===== Grid & Cards ===== */
.mbox-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1200px){.mbox-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.mbox-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.mbox-grid{grid-template-columns:1fr}}

.mbox-card{background:#fff;border:1px solid var(--mbox-border);border-radius:var(--mbox-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
.mbox-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* Centered image box */
.mbox-thumb{aspect-ratio:1/1;background:#f6f7f9;display:grid;place-items:center}
.mbox-thumb-inner{display:grid;place-items:center;width:100%;height:100%}
.mbox-thumb img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.mbox-thumb .placeholder{font-size:28px;opacity:.4}

/* Balanced slots */
.mbox-card-body{padding:12px;display:flex;flex-direction:column}
.mbox-title{margin:0;font-size:18px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px;}
.mbox-title a{color:#0f172a;text-decoration:none}
.mbox-title a:hover{text-decoration:underline}
.mbox-desc{
  margin:6px 0;color:#556070;font-size:13px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;
}

/* Skills: reserve up to 2 rows */
.mbox-skill-icons{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:52px}
.mbox-skill-icons img{width:36px;height:36px;object-fit:contain;border-radius:4px;background:#fafafa;border:1px solid #eee;padding:2px}

/* Duo action buttons (cart + heart) with new colors */
.mbox-card-actions{margin-top:auto}
.mbox-card-actions.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mbox-icon-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:10px;border:1px solid var(--mbox-border);cursor:pointer;transition:all .2s ease}
.mbox-icon-btn svg{width:20px;height:20px}

/* Cart button (green) */
.mbox-add-basket{background:var(--mbox-green);border-color:var(--mbox-green)}
.mbox-add-basket svg{fill:#fff}
.mbox-add-basket:hover{background:var(--mbox-green-dark);border-color:var(--mbox-green-dark)}

/* Wishlist button (soft red/pink) */
.mbox-add-wishlist{background:var(--mbox-red);border-color:var(--mbox-red)}
.mbox-add-wishlist svg{fill:#fff}
.mbox-add-wishlist:hover{background:var(--mbox-red-dark);border-color:var(--mbox-red-dark)}

/* States */
.mbox-icon-btn.is-in{opacity:1;box-shadow:0 0 0 2px rgba(0,0,0,.05) inset}
.mbox-icon-btn.is-disabled{opacity:.5;cursor:not-allowed}

/* Pagination */
.mbox-pagination{display:flex;gap:8px;justify-content:center;margin:18px 0}
.mbox-pagination .mbox-page{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--mbox-border);background:#fff;color:#24323f;cursor:pointer;font-size:14px;line-height:1}
.mbox-pagination .mbox-page.is-active{background:var(--mbox-green);color:#fff;border-color:var(--mbox-green)}

/* States */
.mbox-loading,.mbox-empty{text-align:center;padding:30px 12px;color:var(--mbox-muted)}
/* Sidecart */
#mbox-sidecart {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
#mbox-sidecart.open { right: 0; }

#mbox-sidecart-overlay {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
}
#mbox-sidecart-overlay.show { display:block; }

.mbox-sidecart-header,
.mbox-sidecart-footer {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}
.mbox-sidecart-header h3 { margin:0; }
.mbox-sidecart-close {
    float:right;
    font-size:20px;
    border:none;
    background:none;
    cursor:pointer;
}
.mbox-sidecart-items {
    flex:1;
    overflow-y:auto;
    padding:15px;
}
.mbox-sidecart-item {
    display:flex;
    align-items:center;
    margin-bottom:10px;
}
.mbox-sidecart-item img {
    width:60px;
    height:60px;
    object-fit:cover;
    margin-right:10px;
}
/* ===== Mobile adjustments ===== */
@media (max-width: 768px) {
  .mbox-topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mbox-topbar input[type="search"] {
    flex: 1 1 100%;
    width: 100%;
  }
  .mbox-btn {
    flex: 1 1 calc(33.3% - 8px);
    font-size: 14px;
    padding: 6px 10px;
  }
  .mbox-meter {
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 6px;
  }
  .mbox-hero-title {
    font-size: 24px;
  }
  .mbox-hero-sub {
    font-size: 14px;
  }
  .mbox-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .mbox-grid {
    grid-template-columns: 1fr;
  }
  .mbox-btn {
    flex: 1 1 100%;
  }
  .mbox-card-actions.duo {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mbox-title {
    font-size: 15px;
  }
}

/* === Sidecart Drawer === */
.mbox-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
}

.mbox-sidecart {
  position: fixed;
  top:0; right:-400px;
  width: 360px;
  max-width: 90%;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}
.mbox-sidecart.open { right: 0; }

.mbox-sidecart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.mbox-tabs { display: flex; gap:10px; }
.mbox-tab {
  padding: 6px 14px;
  border: none;
  background: #f3f3f3;
  border-radius: 20px;
  cursor: pointer;
}
.mbox-tab.is-active { background: #1a7049; color: #fff; }

.mbox-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.mbox-sidecart-body { flex:1; overflow-y: auto; padding: 10px; }
.mbox-sidecart-panel { display: none; }
.mbox-sidecart-panel.is-active { display: block; }

.mbox-sidecart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f1f1;
}
.mbox-sidecart-item img {
  width: 50px; height: 50px; object-fit: cover;
  border-radius: 6px;
}
.mbox-sidecart-item .title { flex:1; font-size: 14px; }
.mbox-sidecart-item .remove {
  background: none; border:none; font-size:18px; cursor:pointer;
}

.mbox-empty { text-align:center; color:#777; padding:20px; }

.mbox-sidecart-footer {
  padding: 10px;
  border-top: 1px solid #eee;
}
.mbox-checkout-btn {
  display: block;
  width: 100%;
  background: #1a7049;
  color:#fff;
  text-align:center;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}
.mbox-checkout-btn:hover { background: #145a3a; }

/* Mobile full width */
@media (max-width:768px){
  .mbox-sidecart { width:100%; }
}

.mbox-hero-title .highlight-grow {
  color: #FFD54F !important; /* Yellow shade from your screenshot */
  font-weight: 700;          /* Keep it bold */
}
/* Center text under icons inside filter tiles */
.mbox-filter-modal .mbox-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Center horizontally */
  text-align: center;    /* Ensure text itself is centered */
}

.mbox-filter-modal .mbox-cat-tile span {
  display: block;
  margin-top: 6px;       /* space between icon and text */
  text-align: center !important;
  width: 100%;
}
/* Product title bold */
.mbox-card .mbox-title,
.catalog-product .product-title {
  font-weight: 700 !important; /* Bold */
}

/* Product description normal */
.mbox-card .mbox-desc,
.catalog-product .product-info .product-categories,
.catalog-product .product-info p {
  font-weight: 400 !important; /* Normal */
}