:root {
  --surface: #faf7f5;
  --surface-alt: #f1ece8;
  --text: #291334;
  --text-muted: #8c6f7e;
  --border: #e2d6cf;
  --accent: #d65db1;
  --accent-hover: #be4d9a;
  --accent-rgb: 214,93,177;
  --hero-from: #fef3f5;
  --hero-to: #fbe9f0;
  --card-shadow: rgba(214,93,177,0.06);
  --card-shadow-hover: rgba(214,93,177,0.12);
  --nav-link: #5b3e53;
  --section-title: #291334;
  --star: #d65db1;
  --body-bg: #faf7f5;
  --navbar-bg: #faf7f5;
  --footer-bg: #291334;
  --footer-text: rgba(255,255,255,0.5);
}

/* ─── Apply theme vars ─── */
body { background: var(--body-bg); color: var(--text); }
.navbar { background: var(--navbar-bg) !important; backdrop-filter: blur(12px); }
.nav-link { color: var(--nav-link) !important; }
.nav-link:hover { color: var(--accent) !important; }
.hero-section { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 50%, var(--hero-from) 100%) !important; }
.card, .card.rounded-4 { background: var(--surface) !important; box-shadow: 0 1px 3px var(--card-shadow); }
.card:hover { box-shadow: 0 4px 12px var(--card-shadow-hover); }
.section-title { color: var(--section-title); }
.text-muted { color: var(--text-muted) !important; }
.border, hr { border-color: var(--border) !important; }
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--border); }
.table th { color: var(--text); }
.list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); }
footer.bg-dark { background: var(--footer-bg) !important; }
footer .text-white-50 { color: var(--footer-text) !important; }
footer a.text-white-50:hover { color: var(--accent) !important; }
.form-control, .form-select { background: var(--surface); color: var(--text); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb),0.15); }
.dropdown-menu { background: var(--surface); border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: var(--surface-alt); color: var(--accent); }
.modal-content { background: var(--surface); color: var(--text); }
[class*="bg-success"] { background-color: var(--accent) !important; }
.btn-success { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.btn-success:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline-success { color: var(--accent); border-color: var(--accent); }
.btn-outline-success:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.text-success { color: var(--accent) !important; }
[class*="bg-opacity"] { background-color: rgba(var(--accent-rgb),0.1) !important; }
.alert-success { background-color: rgba(var(--accent-rgb),0.1); color: var(--accent-hover); border-color: rgba(var(--accent-rgb),0.2); }
.alert-danger { background-color: rgba(239,68,68,0.1); color: #dc2626; border-color: rgba(239,68,68,0.2); }
a.text-success:hover { color: var(--accent-hover) !important; }
.star-rating, [class*="text-warning"] { color: var(--star) !important; }
.dropdown-item:active { background-color: var(--accent); }

/* ─── Theme-safe overrides ─── */
.text-dark { color: var(--text) !important; }
.bg-light { background: var(--surface-alt) !important; }
.badge.text-dark { color: var(--section-title) !important; }
.btn-warning { background: var(--star); border-color: var(--star); color: #fff; }
.btn-warning:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.bg-warning.text-dark { background: var(--star) !important; color: #fff !important; }

/* ─── Utility overrides ─── */
.navbar-brand { letter-spacing: -1px; }
.product-card { transition: transform 0.2s, box-shadow 0.2s; border: none !important; }
.product-card:hover { transform: translateY(-4px); }
.product-card .card-img-top { height: 220px; object-fit: cover; }
.btn-rounded { border-radius: 50px; }
.badge { font-weight: 500; }
.table th { font-weight: 600; border-top: none; }
.table td { vertical-align: middle; }
.product-detail-img { max-height: 500px; object-fit: contain; }
.cart-qty { width: 100px; }
.btn-check:checked + .btn-outline-warning { background-color: var(--star); border-color: var(--star); color: #fff; }

/* ─── Product card hero transition ─── */
.hero-card { cursor: pointer; position: relative; }
.hero-card:hover img { transform: scale(1.05); }
.hero-card img { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
@keyframes heartPop { 0%{transform:scale(1)} 30%{transform:scale(1.3)} 60%{transform:scale(0.9)} 100%{transform:scale(1)} }
.heart-animate { animation:heartPop .35s ease; }

/* ─── Quantity input group ─── */
.qty-group { width:130px; }
.qty-group input[type=number]::-webkit-inner-spin-button,
.qty-group input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-group .btn { padding: 0.375rem 0.75rem; }
.qty-group input:focus { box-shadow: none; }
@media (max-width: 576px) { 
  .qty-group { width:100px; } 
  .qty-group .btn { padding: 0.2rem 0.4rem; font-size:0.8rem; line-height:1; } 
  .qty-group input { height:30px!important; font-size:0.8rem; min-width:30px; }
  .table-responsive .table td, .table-responsive .table th { white-space:nowrap; font-size:0.85rem; }
  .table-responsive .table td:first-child { white-space:normal; min-width:140px; }
}

/* ─── Hero entrance on product detail ─── */
.hero-entrance { animation: heroZoom 0.5s ease both; }
@keyframes heroZoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ─── Smooth scroll ─── */
html { scroll-behavior: smooth; }

/* ─── Wider containers (public pages only) ─── */
body:not(.admin-page) .container { max-width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; }
.container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 992px) {
  body:not(.admin-page) .container, .container-fluid { padding-left: 2rem; padding-right: 2rem; }
}

/* ─── Filter offcanvas ─── */
.offcanvas.offcanvas-end { width: 320px; }
.offcanvas .offcanvas-body { padding-top: 1.25rem; }
.filter-sidebar .form-range::-webkit-slider-thumb { background: var(--accent); }
.filter-sidebar .form-range::-moz-range-thumb { background: var(--accent); }
.price-range-values { font-size: 0.875rem; color: var(--text-muted); }

/* ─── Fade-in animation ─── */
.fade-in { animation: fadeUp 0.5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in:nth-child(1) { animation-delay: 0s; }
.fade-in:nth-child(2) { animation-delay: 0.05s; }
.fade-in:nth-child(3) { animation-delay: 0.1s; }
.fade-in:nth-child(4) { animation-delay: 0.15s; }
.fade-in:nth-child(5) { animation-delay: 0.2s; }
.fade-in:nth-child(6) { animation-delay: 0.25s; }

/* ─── Password toggle ─── */
.pw-group { display:flex; align-items:center; border:1px solid var(--border); border-radius:50rem; background:var(--surface); transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.pw-group:focus-within { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(var(--accent-rgb),0.15); }
.pw-group input { flex:1; border:none!important; background:transparent!important; padding:0.375rem 0.75rem; outline:none!important; color:var(--text); box-shadow:none!important; font-size:inherit; line-height:1.5; }
.pw-group button { border:none!important; background:transparent!important; padding:0.375rem 0.75rem; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; font-size:1.15rem; line-height:1.5; }
.pw-group button:hover { color:var(--accent); }

/* ─── Carousel overlay ─── */
.carousel-item .bg-dark.bg-opacity-50 { backdrop-filter: blur(4px); }

/* ─── Mobile header ─── */
@media (max-width: 991.98px) {
  .mobile-header { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1020; }
  .mobile-brand { text-align:center; padding:8px 16px 4px; }
  .mobile-brand a { font-size:1.25rem; font-weight:700; text-decoration:none; }
  .mobile-nav { display:flex; justify-content:space-around; align-items:center; padding:4px 0 8px; }
  .mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--text-muted); font-size:10px; padding:4px 8px; position:relative; }
  .mobile-nav a i { font-size:1.25rem; }
  .mobile-nav a:active { color:var(--accent); }
  .mobile-nav a.active { color:var(--accent); }
  .mobile-badge { position:absolute; top:0; right:4px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; line-height:1; }
  .mobile-auth { text-align:center; padding:0 16px 6px; font-size:12px; }
  .mobile-auth a { color:var(--accent); text-decoration:none; font-weight:600; }
}
@media (min-width: 992px) {
  .mobile-header { display:none !important; }
}