/* ===== 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);}
.offcanvas.offcanvas-end{ border-left:1px solid var(--border); }
.offcanvas .nav-link{font-weight:700; padding:.6rem 0;}

/* ===== PRODUCT UI ===== */
.breadcrumb a{text-decoration:none}
.rating{color:#f59e0b}
.price{font-weight:800; font-size:1.4rem}
.old-price{color:var(--muted-2); text-decoration:line-through}
.stock-badge{background:#e8fff1; color:#14532d; font-weight:700; border-radius:999px; padding:.25rem .6rem; display:inline-flex; align-items:center; gap:.35rem;}
.p-gallery .thumbs img{ width:68px; height:68px; object-fit:cover; border-radius:10px; border:1px solid var(--border); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.p-gallery .thumbs img:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.p-gallery .main-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); }
.swatch{display:flex; gap:.5rem; flex-wrap:wrap}
.swatch input{display:none}
.swatch .opt{ border:1px solid var(--border); background:var(--card); border-radius:999px; padding:.35rem .7rem; font-weight:600; cursor:pointer; user-select:none; }
.swatch .opt[data-color]{ padding:.15rem .5rem; display:inline-flex; align-items:center; gap:.45rem; }
.swatch .dot{ width:18px; height:18px; border-radius:50%; border:1px solid #00000020; display:inline-block; }
.swatch input:checked + .opt{ outline:2px solid var(--accent); outline-offset:2px; }
.size-grid{display:flex; gap:.5rem; flex-wrap:wrap}
.size-grid .size{ border:1px solid var(--border); border-radius:10px; padding:.5rem .75rem; font-weight:700; cursor:pointer; background:var(--card); }
.size-grid .size.active{ outline:2px solid var(--accent); outline-offset:2px; }
.qty{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.qty button{border:0; background:transparent; width:38px; height:38px}
.qty input{width:44px; text-align:center; border:0; outline:none}
.btn{border-radius:999px}
.btn-dark{background:var(--fg); border-color:var(--fg)}
.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){ .btn-lg{ padding:.6rem 1rem; font-size:1rem; } }
.nav-pills .nav-link{border-radius:999px}
.nav-pills .nav-link.active{background:var(--fg)}
.spec-table td{padding:.5rem .75rem; border-bottom:1px solid var(--border)}
.spec-table td:first-child{color:var(--muted)}
.soft-card{background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.product-card{ border:1px solid var(--border); border-radius:16px; 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%; }

/* ===== 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)}