::selection { background-color: #1c1917; color: #ffffff; }

/* ── Brand accent ────────────────────────────────────────────── */
:root {
    --accent:       #9D4B6A;
    --accent-hover: #7D3A52;
    --accent-light: #fdf0f4;
    --accent-glow:  rgba(157,75,106,0.18);
}
html.dark {
    --accent:       #C87A96;
    --accent-hover: #d9a0b5;
    --accent-light: #3a1a26;
    --accent-glow:  rgba(200,122,150,0.18);
}

/* ── Toasts ─────────────────────────────────────────────────── */
@keyframes slideIn  { from { transform: translateX(110%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes slideOut { from { transform: translateX(0);    opacity: 1 } to { transform: translateX(110%); opacity: 0 } }
.toast-enter { animation: slideIn  0.3s ease-out; }
.toast-exit  { animation: slideOut 0.3s ease-in  forwards; }

/* ── Product card ────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
.fade-up { animation: fadeUp 0.4s ease-out forwards; opacity: 0; }
.product-card:hover .product-img { transform: scale(1.05); }
.product-card:hover { box-shadow: 0 8px 32px var(--accent-glow), 0 2px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.product-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }

/* ── Hero section ────────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(160deg, #fff8f9 0%, #fdf4f7 40%, #f5f0ff 100%);
}
html.dark .hero-gradient {
    background: linear-gradient(160deg, #1a0e12 0%, #180e1a 40%, #12101e 100%);
}
.hero-title {
    background: linear-gradient(135deg, #1c1917 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html.dark .hero-title {
    background: linear-gradient(135deg, #f5f5f4 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Category filters ────────────────────────────────────────── */
.category-filter { border: 1.5px solid transparent; }
.category-filter:not(.bg-stone-900):not([style*="background"]) {
    border-color: #e7e5e4;
}
html.dark .category-filter:not(.bg-stone-900) {
    border-color: #44403c;
}

/* ── Accent buttons ──────────────────────────────────────────── */
.btn-accent {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
}
.btn-accent:hover {
    background: var(--accent-hover) !important;
    box-shadow: 0 4px 20px var(--accent-glow);
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.fade-in { animation: fadeIn 0.25s ease-out; }

/* ── Product detail popup ────────────────────────────────────── */
@keyframes popIn { from { opacity:0; transform: scale(0.97) translateY(12px) } to { opacity:1; transform: scale(1) translateY(0) } }
#product-detail .popup-card { animation: popIn 0.28s cubic-bezier(.34,1.2,.64,1) forwards; }

.detail-image-panel {
    background: linear-gradient(160deg, #f9f0f4 0%, #ede8f5 100%);
    position: relative;
    overflow: hidden;
}
html.dark .detail-image-panel {
    background: linear-gradient(160deg, #2a1520 0%, #1a1428 100%);
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg) } }
.animate-spin { animation: spin 1s linear infinite; }

/* ── Admin panel ─────────────────────────────────────────────── */
@keyframes panelSlide { from { transform: translateX(100%) } to { transform: translateX(0) } }
.panel-slide-in { animation: panelSlide 0.3s ease-out; }

/* ── Stock badge ─────────────────────────────────────────────── */
.stock-pill { font-size: 10px; padding: 3px 10px; border-radius: 9999px;
              font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Search: hide native X button ───────────────────────────── */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Colour selector dots ────────────────────────────────────── */
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #e7e5e4;
             cursor: pointer; transition: all 0.18s; flex-shrink: 0;
             box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.color-dot:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.color-dot.selected { border-color: var(--accent) !important; transform: scale(1.18);
                      box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.2); }

/* ── Size pills ──────────────────────────────────────────────── */
.size-pill { font-size: 12px; padding: 7px 16px; border-radius: 10px; border: 1.5px solid #e7e5e4;
             font-weight: 600; cursor: pointer; transition: all 0.18s; background: #fff; }
.size-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.size-pill.selected { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ── Detail panel scrollbar ──────────────────────────────────── */
.detail-scroll::-webkit-scrollbar       { width: 4px; }
.detail-scroll::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }

/* ── Related products horizontal scroll ─────────────────────── */
.related-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.related-scroll::-webkit-scrollbar { display: none; }
.related-card { min-width: 110px; max-width: 110px; cursor: pointer; flex-shrink: 0; }
.related-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; }

/* ── Sort dropdown ───────────────────────────────────────────── */
.sort-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
               background-repeat: no-repeat; background-position: right 10px center;
               padding-right: 28px !important; }

/* ── Load-more button ────────────────────────────────────────── */
#load-more-btn { transition: all 0.2s; }

/* =========================================================
   DARK MODE
   ========================================================= */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0c0a09; }
html.dark #admin-dashboard { background-color: #0c0a09; }
html.dark .modal-backdrop { background: rgba(0,0,0,0.82); }
html.dark ::selection { background-color: #f5f5f4; color: #1c1917; }

html.dark .color-dot { border-color: #57534e; }
html.dark .color-dot:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
html.dark .color-dot.selected { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3); }
html.dark .size-pill  { border-color: #57534e; background: #1c1917; color: #d6d3d1; }
html.dark .size-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
html.dark .size-pill.selected { border-color: var(--accent); background: var(--accent); color: #fff; }
html.dark #theme-toggle { color: #d6d3d1 !important; }
html.dark .detail-scroll::-webkit-scrollbar-thumb { background: #57534e; }

html.dark .admin-tab.border-stone-900 { border-color: #e7e5e4 !important; }
html.dark .admin-tab.text-stone-900   { color:        #e7e5e4 !important; }

html.dark .stock-pill.bg-emerald-100 { background-color: #022c22 !important; color: #6ee7b7 !important; }
html.dark .stock-pill.bg-amber-100   { background-color: #451a03 !important; color: #fcd34d !important; }
html.dark .stock-pill.bg-red-100     { background-color: #450a0a !important; color: #fca5a5 !important; }

html.dark .category-filter.bg-stone-900 { background-color: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.category-filter.bg-stone-900 { background-color: var(--accent) !important; color: #fff !important; }

/* ── Focus ring accent ───────────────────────────────────────── */
input:focus, select:focus, textarea:focus { outline-color: var(--accent) !important; }
input:focus-visible { ring-color: var(--accent); }

html.dark input[type="text"],  html.dark input[type="email"],
html.dark input[type="password"], html.dark input[type="number"],
html.dark input[type="search"], html.dark input[type="file"],
html.dark textarea, html.dark select {
    background-color: #292524 !important; border-color: #57534e !important; color: #f5f5f4 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #78716c !important; }
html.dark input[type="file"]::file-selector-button { background: #44403c; color: #f5f5f4; }

html.dark .bg-amber-50    { background-color: #451a03 !important; }
html.dark .border-amber-100 { border-color:   #92400e !important; }
html.dark .text-amber-800  { color:           #fbbf24 !important; }
html.dark .text-amber-600  { color:           #d97706 !important; }
html.dark .sort-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* ── Search input focus accent ───────────────────────────────── */
#search-input:focus { box-shadow: 0 0 0 2px var(--accent-glow); border-color: var(--accent) !important; }

/* ── Header vibrancy on scroll (feel alive) ──────────────────── */
header { transition: box-shadow 0.3s; }

/* ── Loading spinner accent ──────────────────────────────────── */
#products-loading .border-t-stone-900 { border-top-color: var(--accent) !important; }

/* ── Retry button accent ─────────────────────────────────────── */
#products-error button { background: var(--accent) !important; }
#products-error button:hover { background: var(--accent-hover) !important; }

/* ── WhatsApp receipt button ─────────────────────────────────── */
html.dark .bg-emerald-600 { background-color: #059669 !important; }

/* ── Detail thumbnail active border → accent ─────────────────── */
#detail-thumb-1.border-stone-900,
#detail-thumb-2.border-stone-900 { border-color: var(--accent) !important; }

/* ── Related card hover ──────────────────────────────────────── */
.related-card:hover img { opacity: 0.88; transform: scale(1.04); transition: all 0.2s; }

/* ── Product grid overall feel ───────────────────────────────── */
#products-grid { gap: 16px; }
@media (min-width: 640px) { #products-grid { gap: 20px; } }

/* ── Smooth in-page scrolling (nav anchors) ──────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Hide scrollbars on horizontal strips ────────────────────── */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Horizontal scroll row (New Arrivals, etc.) ──────────────── */
.h-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > .product-card { min-width: 168px; max-width: 168px; }
@media (min-width: 640px) { .h-scroll > .product-card { min-width: 210px; max-width: 210px; } }

/* ── Skeleton loading cards ──────────────────────────────────── */
.skeleton-shimmer {
    background: linear-gradient(90deg, #e7e5e4 25%, #f0efee 37%, #e7e5e4 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}
html.dark .skeleton-shimmer {
    background: linear-gradient(90deg, #292524 25%, #34302d 37%, #292524 63%);
    background-size: 400% 100%;
}
@keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ── Category cards (Shop by Category) ───────────────────────── */
.category-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/3.4; cursor: pointer; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.category-card:hover img { transform: scale(1.06); }
.category-card .category-card-label {
    position: absolute; inset: auto 0 0 0; padding: 10px 8px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: center;
}

/* ── Wishlist heart button ───────────────────────────────────── */
.wishlist-btn { transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease; }
.wishlist-btn:hover { transform: scale(1.12); }
.wishlist-btn.active { color: var(--accent) !important; }
.wishlist-btn.active i { fill: var(--accent); }
#detail-wishlist-btn.active { color: var(--accent) !important; }
#detail-wishlist-btn.active i { fill: var(--accent); }

/* ── Quick add button on product card ────────────────────────── */
.quick-add-btn {
    opacity: 0; transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-card:hover .quick-add-btn,
.product-card:focus-within .quick-add-btn { opacity: 1; transform: translateY(0); }
@media (hover: none) { .quick-add-btn { opacity: 1; transform: none; } }

/* ── Header shrink on scroll ──────────────────────────────────── */
#site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
#site-header.is-scrolled #site-header-inner { height: 3.25rem; }

/* ── Mobile nav drawer ────────────────────────────────────────── */
#mobile-menu.open { transform: translateX(0); }

/* ── Product detail: full-bleed on mobile ────────────────────── */
@media (max-width: 639px) {
    #product-detail .popup-card { box-shadow: none !important; }
}