/* ===== THEME / TOKENS ===== */
:root{
  --bg:#ffffff; --fg:#0b1220; --muted:#6b7280; --muted-2:#9aa3af;
  --border:#e5e7eb; --card:#ffffff;
  --accent:#4f46e5; --accent-50:#eef2ff; --accent-700:#4338ca;
  --ok:#22c55e;
  --shadow:0 10px 30px rgba(2,6,23,.06);
  --shadow-lg:0 20px 50px rgba(2,6,23,.10);
}
html,body{background:var(--bg); color:var(--fg)}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing:antialiased;}

/* ===== NAVBAR + DRAWER ===== */
.navbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 1px 0 var(--border);
}
.navbar-brand{letter-spacing:-.02em}
.nav-link{font-weight:600; position:relative}
.nav-link:after{
  content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
  background:var(--accent); transition:width .25s ease;
}
.nav-link:hover:after{width:100%}
.offcanvas.offcanvas-start{ width:84vw; max-width:380px; border-right:1px solid var(--border); background:rgba(255,255,255,.95); backdrop-filter:saturate(1.2) blur(8px); box-shadow:var(--shadow-lg);}
body.dark .offcanvas.offcanvas-start{ background:rgba(11,16,32,.85); }
.offcanvas.offcanvas-end{ border-left:1px solid var(--border); }
.offcanvas .nav-link{font-weight:700; padding:.6rem 0;}

/* ===== CONTROLS BAR ===== */
.controls-wrap{ position:sticky; top:60px; z-index:1015; }
@media (min-width:992px){ .controls-wrap{ top:72px; } }

.controls-bar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:.6rem .8rem;
}
.page-title{letter-spacing:-.01em; margin:0;}
.count-badge{
  background:var(--accent-50); color:#374151; border-radius:999px;
  padding:.2rem .6rem; font-weight:700; font-size:.8rem;
}
.toolbar-actions{ display:flex; align-items:center; gap:.5rem; }
.sort-group .input-group-text{ background:#fff; border-right:0; }
.sort-group .form-select{
  border-left:0;
  padding-left:.25rem; padding-right:2rem;
  background-position: right .6rem center;
}
.filter-btn{ white-space:nowrap; }

#activeChips{
  gap:.4rem; overflow:auto; scrollbar-width:none; -ms-overflow-style:none;
}
#activeChips::-webkit-scrollbar{ display:none; }
.filter-chip{border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; background:var(--card)}

/* ===== LISTING / SIDEBAR ===== */
.sidebar .card{border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow)}
.sidebar .form-check{margin-bottom:.4rem}
.sidebar .form-range::-webkit-slider-thumb{background:var(--accent)}
.sidebar .form-range::-moz-range-thumb{background:var(--accent)}
.sidebar .badge-dot{width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid #00000022; margin-right:.35rem}

/* Product cards */
.product-card{
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.product-img{aspect-ratio:4/5; object-fit:cover; width:100%}
.price{font-weight:800}
.old-price{color:var(--muted-2); text-decoration:line-through}
.rating{color:#f59e0b}
.btn{border-radius:999px}
.btn-outline-dark{border-color:var(--fg); color:var(--fg)}
.btn-outline-dark:hover{background:var(--fg); color:#fff}
.btn-dark{background:var(--fg); border-color:var(--fg); color:#fff}
.btn-dark:hover{filter:brightness(.92)}
.whatsapp{background:var(--ok)!important; border-color:var(--ok)!important; color:#fff}
.whatsapp:hover{filter:brightness(.94)}
@media (max-width: 576px){
  .product-card .d-grid{ gap:.4rem; }
  .product-card .d-grid .btn{ padding:.45rem .75rem; font-size:.9rem; }
}

/* ===== FOOTER ===== */
.footer{background:#0b1020; color:#cbd5e1}
.footer a{color:#cbd5e1}
.footer a:hover{color:#fff}
.footer hr{opacity:.15}
.footer .footer-heading{ cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; }
.footer .footer-heading .chev{ transition: transform .2s ease; }
.footer .footer-heading[aria-expanded="true"] .chev{ transform: rotate(180deg); }
@media (min-width:768px){
  .footer .collapse{ display:block !important; height:auto !important; }
  .footer .footer-heading{ cursor: default; }
}
.footer .pay-logos img{ height:18px; }
.footer .pay-logos{ gap:.5rem; flex-wrap: wrap; }

.cart-count-badge{position:absolute; top:-6px; right:-10px}
/* ===== MOBILE STICKY CTA ===== */
.sticky-cta{position:fixed; right:1rem; bottom:1rem; z-index:1040}
.sticky-cta .btn{box-shadow:var(--shadow-lg)}

/* ===== DARK MODE ===== */
body.dark{
  --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8; --muted-2:#64748b; --border:#1f2937; --card:#0f162e;
  --accent:#8b5cf6; --accent-50:#1c1b33; --accent-700:#7c3aed;
  --shadow:0 10px 30px rgba(15,23,42,.5); --shadow-lg:0 20px 60px rgba(15,23,42,.65);
}
body.dark .navbar{background:rgba(11,16,32,.75); box-shadow:0 1px 0 var(--border)}
body.dark .controls-bar{background:rgba(15,22,46,.9)}

/* ===== MOBILE: compact & centered buttons ===== */
@media (max-width: 576px){
  .product-card .d-grid{
    display: block !important;
  }
  .product-card .d-grid .btn{
    display: block;
    width: 100%;
    padding: .38rem .7rem;
    font-size: .82rem;
    line-height: 1.25;
    text-align: center;
    border-radius: 999px;
  }
  .product-card .d-grid .btn + .btn{ margin-top: .45rem; }
  .product-card .d-grid .btn.whatsapp{
    padding: .36rem .68rem; font-weight: 600; font-size: .8rem;
  }
}