@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Lato:wght@300;400;700&display=swap');

body {
  font-family: 'Lato', sans-serif;
}

.font-heading {
  font-family: 'Playfair Display', serif;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.toast.show {
  display: flex !important;
}

.auth-form.active {
  display: block !important;
}
.auth-form.hidden {
  display: none !important;
}

#cart-sidebar.translate-x-full {
  transform: translateX(100%);
}
#cart-sidebar.translate-x-0 {
  transform: translateX(0);
}

#search-modal {
  display: none;
}
#search-modal.open {
  display: flex !important;
}
#search-modal .scale-95 {
  transform: scale(0.95);
}
#search-modal.open .scale-95 {
  transform: scale(1);
}

#product-modal.open {
  display: flex !important;
}
#auth-modal.open {
  display: flex !important;
}
#admin-modal.open {
  display: flex !important;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Preheader (Marquee) ────────────────────────── */
.preheader-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
}

.marquee-track span {
  display: inline-block;
  padding: 0 1.5rem;
  white-space: nowrap;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Cart Badge ────────────────────────────────── */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #7B113A;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px rgba(123, 17, 58, 0.4);
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid rgba(255,255,255,0.3);
  line-height: 1;
  box-sizing: border-box;
}

.cart-badge.show {
  transform: scale(1);
  opacity: 1;
}

/* On hover, gently pulse */
#cart-toggle:hover .cart-badge.show {
  animation: badgePulse 0.8s ease-in-out;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ─── 2025 Design Refresh ────────────────────────────── */

/* Smoother group-hover scale */
.group:hover .group-hover\:scale-108 { transform: scale(1.08); }

/* Admin sidebar dark theme */
#admin-sidebar { background: #1A1A2E; }

/* Better table row hover */
tbody tr { transition: background-color 0.15s ease; }

/* Pill category tabs active glow */
.category-pill-active { box-shadow: 0 4px 14px rgba(123,17,58,0.25); }

/* Product card hover polish */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* Admin layout fill height properly */
#app-main > div[class*="flex h-screen"] {
  height: calc(100vh - 60px);
}

/* Input focus ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123,17,58,0.15);
}

/* Smooth section reveal base */
section[style*="opacity: 0"] { will-change: opacity, transform; }

/* Mobile admin tab bar */
@media (max-width: 1023px) {
  #app-main > div[class*="flex h-screen"] {
    height: auto;
    min-height: 100vh;
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLAMM FASHION — Premium homepage redesign (v2)
   ═══════════════════════════════════════════════════════════ */
:root{
  --maroon:#7B113A; --maroon-dark:#5a0c2a; --gold:#D4AF37;
  --peach:#FDF8F5; --dark:#1A1A1A; --header-h:76px;
}
@media (max-width:1023px){ :root{ --header-h:68px; } }

/* ── HEADER (light, solid, truly fixed on scroll — ecommerce standard) ── */
/* display:contents frees the sticky header from its short placeholder parent
   so it stays pinned for the whole page instead of scrolling away. */
#header-placeholder{ display:contents; }
.site-header{ background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.07); }
.site-header .header-nav a,
.site-header .header-icons{ color:#2b2b2b; }
.site-header .nav-link{ color:#2b2b2b; }
.site-header .nav-link:hover{ color:var(--maroon); }
/* logo keeps its original colours — no recolouring */
.header-logo{ filter:none; }
.hamburger-line{ background:#2b2b2b; }
.header-badge{
  position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px;
  background:var(--maroon); color:#fff; font-size:10px; font-weight:800; line-height:17px;
  text-align:center; border-radius:9px; transform:scale(0); transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.header-badge.show{ transform:scale(1); }

/* ── MEGA MENU ── */
.mega-trigger .mega-panel{
  position:absolute; left:50%; top:calc(100% + 18px); transform:translateX(-50%) translateY(10px);
  width:min(820px,90vw); opacity:0; visibility:hidden; transition:all .3s ease; z-index:950;
}
.mega-trigger:hover .mega-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-trigger:hover .mega-caret{ transform:rotate(180deg); }
.mega-inner{
  background:#fff; border-radius:16px; padding:28px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.14); border:1px solid #f0e9e9;
}
.mega-panel::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }

/* ── ACCOUNT DROPDOWN ── */
.account-menu{
  position:absolute; right:0; top:calc(100% + 14px); width:230px; background:#fff;
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.16); border:1px solid #f0e9e9;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .25s ease; z-index:960; overflow:hidden;
}
.account-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.account-item{
  display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:14px; color:#333;
  transition:background .2s,color .2s; cursor:pointer;
}
.account-item:hover{ background:var(--peach); color:var(--maroon); }

/* ── HERO (sits below the solid header) ── */
.hero{
  position:relative; min-height:78vh; overflow:hidden; background:var(--peach);
}
.hero-bg{ position:absolute; inset:0; background:url('../images/hero-banner.svg') no-repeat right center; background-size:cover; }
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(253,248,245,.97) 0%, rgba(253,248,245,.9) 28%, rgba(253,248,245,.45) 46%, rgba(253,248,245,0) 62%);
}
.hero-inner{
  position:relative; z-index:10; max-width:1400px; margin:0 auto;
  padding:24px; min-height:78vh; display:flex; align-items:center;
}
@media (min-width:640px){ .hero-inner{ padding-left:48px; padding-right:48px; } }
.hero-content{ max-width:470px; }
.hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(123,17,58,.25); display:inline-block; transition:all .3s; }
.hero-dot.active{ width:26px; border-radius:5px; background:var(--maroon); }
@media (max-width:640px){
  .hero{ min-height:84vh; }
  .hero-bg{ background-position:74% center; }
  .hero-scrim{ background:linear-gradient(180deg, rgba(253,248,245,.92) 0%, rgba(253,248,245,.5) 42%, rgba(253,248,245,.72) 100%); }
}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px; background:var(--maroon); color:#fff;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(123,17,58,.28); transition:all .3s;
}
.btn-primary:hover{ background:var(--maroon-dark); transform:translateY(-2px); box-shadow:0 14px 32px rgba(123,17,58,.36); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--dark); color:var(--dark);
  padding:13px 28px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase; transition:all .3s;
}
.btn-ghost:hover{ background:var(--dark); color:#fff; }
.btn-outline{
  display:inline-block; border:1.5px solid var(--maroon); color:var(--maroon);
  padding:11px 30px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; transition:all .3s;
}
.btn-outline:hover{ background:var(--maroon); color:#fff; }

/* ── CATEGORY CARDS ── */
.cat-card{ display:block; }
.cat-card-img{
  aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#eee;
  box-shadow:0 6px 18px rgba(0,0,0,.06); transition:all .35s;
}
.cat-card:hover .cat-card-img{ box-shadow:0 16px 36px rgba(0,0,0,.14); transform:translateY(-5px); }

/* ── CAROUSEL ── */
.carousel-track{
  display:flex; align-items:stretch; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-item{ flex:0 0 auto; display:flex; width:78%; max-width:280px; scroll-snap-align:start; }
.carousel-item > .product-card{ width:100%; }
@media (min-width:640px){ .carousel-item{ width:42%; } }
@media (min-width:1024px){ .carousel-item{ width:23%; } }
.carousel-arrow{
  position:absolute; top:42%; z-index:5; width:44px; height:44px; border-radius:50%; background:#fff;
  color:var(--maroon); box-shadow:0 6px 20px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center;
  transition:all .25s; border:1px solid #f0e9e9;
}
.carousel-arrow:hover{ background:var(--maroon); color:#fff; }
@media (max-width:640px){ .carousel-arrow{ display:none; } }

/* ── PRODUCT CARD (override) ── */
.product-card{
  background:#fff; border-radius:16px; overflow:hidden; border:1px solid #f1ecec;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column; height:100%;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#f6f2f2; flex:0 0 auto; }
.product-badge{ position:absolute; top:12px; left:12px; background:var(--maroon); color:#fff; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.product-discount{ position:absolute; top:12px; right:12px; background:var(--gold); color:var(--dark); font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; }
/* ── Product Action Icons (Eye + Wishlist stacked on top-right) ── */
.product-action-icons{
  position:absolute; top:10px; right:10px;
  display:flex; flex-direction:column; gap:7px; z-index:4;
}
.product-action-btn{
  width:36px; height:36px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#888; font-size:15px;
  box-shadow:0 3px 12px rgba(0,0,0,.14);
  transition:all .25s; border:none; cursor:pointer;
  transform:translateX(6px); opacity:0;
}
.product-card:hover .product-action-btn{ transform:translateX(0); opacity:1; }
.product-action-btn:hover{ background:var(--maroon); color:#fff; box-shadow:0 5px 16px rgba(123,17,58,.35); }
.product-action-btn.wishlist-btn.active{ color:var(--maroon); opacity:1; transform:translateX(0); }
.product-action-btn.wishlist-btn.active:hover{ background:var(--maroon); color:#fff; }
/* Always show on touch/mobile */
@media (hover:none){
  .product-action-btn{ transform:translateX(0); opacity:1; }
}
/* Legacy quick-view (modal button kept for backward compat) */
.product-hover{ position:absolute; inset:0; background:rgba(26,26,26,.28); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.product-card:hover .product-hover{ opacity:1; }
.quick-view{ background:#fff; color:var(--dark); padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600; display:inline-flex; gap:7px; align-items:center; transition:all .25s; }
.quick-view:hover{ background:var(--maroon); color:#fff; }
/* Legacy wishlist-btn (kept for any component that still uses it) */
.wishlist-btn{ cursor:pointer; }
.product-body{ padding:16px; display:flex; flex-direction:column; flex:1 1 auto; }
.product-cat{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#a9a0a0; margin-bottom:4px; }
.product-name{ font-size:15px; font-weight:600; color:#2b2b2b; line-height:1.35; height:2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-price-row{ display:flex; align-items:center; gap:9px; margin-top:6px; }
.product-price{ color:var(--maroon); font-weight:800; font-size:17px; }
.product-original{ color:#b9b1b1; text-decoration:line-through; font-size:13px; }
.add-cart-btn{ width:100%; margin-top:auto; padding-top:0; background:var(--maroon); color:#fff; padding:11px; border-radius:999px; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .25s; }
.add-cart-btn{ margin-top:14px; }
.add-cart-btn:hover{ background:var(--maroon-dark); }
.add-cart-btn:disabled{ background:#e2dcdc; color:#a89f9f; cursor:not-allowed; box-shadow:none; }
.add-cart-btn:disabled:hover{ background:#e2dcdc; }

/* ── PRODUCT CARD: ratings & stock signals ── */
.product-rating{ display:flex; align-items:center; gap:6px; margin-top:5px; }
.product-stars{ color:var(--gold); font-size:11px; letter-spacing:1.5px; }
.product-rating-count{ font-size:11.5px; color:#aea5a5; }
.product-low-stock{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#c2410c; margin-top:6px; }
.product-low-stock::before{ content:""; width:6px; height:6px; border-radius:50%; background:#f59e0b; flex:0 0 6px; }
.product-oos-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; z-index:2; }
.product-oos-overlay span{ background:var(--dark); color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:7px 18px; border-radius:999px; }
.product-card.is-out-of-stock .product-media img{ filter:grayscale(.4); opacity:.8; }

/* ── PROMO BANNERS ── */
.promo{ position:relative; border-radius:20px; overflow:hidden; min-height:230px; display:flex; align-items:center; transition:transform .35s, box-shadow .35s; }
.promo:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.16); }
.promo-dark{ background:linear-gradient(120deg,#241016,#3a121f 60%,#1a1a1a); }
.promo-light{ background:linear-gradient(120deg,var(--peach),#f3e3df); }
.promo-text{ padding:38px 40px; }
.promo-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:11px 26px;
  border-radius:999px; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; transition:all .3s;
}
.promo-dark .promo-link{ background:var(--gold); color:#1a1a1a; }
.promo-dark .promo-link:hover{ background:#fff; }
.promo-light .promo-link{ background:var(--maroon); color:#fff; }
.promo-light .promo-link:hover{ background:var(--maroon-dark); }

/* ── QUALITY BANNER ── */
.quality-banner{
  background:linear-gradient(115deg,#1a1a1a 0%,#2a1118 55%,#3a121f 100%);
  border-radius:24px; padding:48px 44px; display:grid; grid-template-columns:1fr; gap:34px;
}
@media (min-width:900px){ .quality-banner{ grid-template-columns:1.1fr .9fr; align-items:center; } }
.quality-right{ display:flex; flex-direction:column; gap:22px; }
.quality-icon{ width:48px; height:48px; flex:0 0 48px; border-radius:12px; background:rgba(212,175,55,.15); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:19px; }

/* ── REVIEWS ── */
.review-card{ background:#fff; border-radius:18px; padding:26px; border:1px solid #f1ecec; box-shadow:0 4px 16px rgba(0,0,0,.04); transition:all .3s; }
.review-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.1); transform:translateY(-4px); }

/* ── INSTAGRAM ── */
.ig-tile{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#eee; display:block; }
.ig-overlay{ position:absolute; inset:0; background:rgba(123,17,58,.55); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.ig-tile:hover .ig-overlay{ opacity:1; }

/* ── FOOTER ── */
.footer-dark{ background:#141114; color:#fff; position:relative; }
.footer-logo{ filter:none; }
.footer-head{ font-family:'Playfair Display',serif; font-size:15px; letter-spacing:.5px; color:#fff; margin-bottom:16px; position:relative; }
.footer-head::after{ content:""; position:absolute; left:0; bottom:-7px; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.footer-link{ color:rgba(255,255,255,.6); font-size:14px; transition:color .25s, padding-left .25s; }
.footer-link:hover{ color:var(--gold); padding-left:4px; }
.footer-social{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .3s; }
.footer-social:hover{ background:var(--gold); color:var(--dark); transform:translateY(-3px); }
.footer-news{ margin-top:42px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
@media (min-width:768px){ .footer-news{ flex-direction:row; align-items:center; justify-content:space-between; } }
.back-to-top{ position:fixed; bottom:92px; right:20px; z-index:50; width:44px; height:44px; border-radius:50%; background:var(--maroon); color:#fff; box-shadow:0 8px 22px rgba(123,17,58,.4); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:all .3s; }
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ background:var(--maroon-dark); transform:translateY(-3px); }

/* ═══════════ SHOP PAGE ═══════════ */
.shop-banner{ background:linear-gradient(120deg, var(--peach) 0%, #f5e7e3 100%); border-bottom:1px solid #f0e3df; }
.shop-filter-card{ background:#fff; border:1px solid #f1ecec; border-radius:16px; padding:18px 18px 16px; }
.shop-filter-title{ font-family:'Playfair Display',serif; font-size:15px; color:var(--dark); margin-bottom:12px; position:relative; padding-bottom:8px; }
.shop-filter-title::after{ content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background:var(--gold); border-radius:2px; }
.shop-cat{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; border-radius:10px; font-size:14px; color:#555; transition:all .2s;
}
.shop-cat:hover{ background:var(--peach); color:var(--maroon); }
.shop-cat.active{ background:var(--maroon); color:#fff; font-weight:600; }
.shop-cat.active .shop-cat-count{ background:rgba(255,255,255,.25); color:#fff; }
.shop-cat-count{ font-size:11px; background:#f1ecec; color:#998; padding:1px 8px; border-radius:999px; min-width:24px; text-align:center; }
.shop-subcat{ padding-left:20px; font-size:13px; color:#777; }
.shop-price{
  display:block; width:100%; text-align:left; padding:8px 12px; border-radius:10px;
  font-size:14px; color:#555; transition:all .2s;
}
.shop-price:hover{ background:var(--peach); color:var(--maroon); }
.shop-price.active{ background:var(--maroon); color:#fff; font-weight:600; }

/* ── Filter chips (active filters row) ── */
.shop-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--peach); color:var(--maroon);
  border:1px solid #f0e0d8; padding:7px 8px 7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  transition:all .2s;
}
.shop-chip i{ width:18px; height:18px; border-radius:50%; background:rgba(123,17,58,.12); display:inline-flex; align-items:center; justify-content:center; font-size:9px; transition:all .2s; }
.shop-chip:hover i{ background:var(--maroon); color:#fff; }
.shop-chip-clear{ font-size:12.5px; font-weight:700; color:#a89f9f; text-decoration:underline; text-underline-offset:2px; transition:color .2s; }
.shop-chip-clear:hover{ color:var(--maroon); }
.filter-count-badge{ background:var(--maroon); color:#fff; font-size:10px; font-weight:800; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-left:6px; }

/* ── Pagination ── */
.shop-pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:44px; flex-wrap:wrap; }
.shop-page-btn{
  min-width:38px; height:38px; padding:0 9px; border-radius:10px; border:1px solid #f1ecec; background:#fff;
  font-size:13px; font-weight:600; color:#555; display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.shop-page-btn:hover:not(:disabled):not(.active){ background:var(--peach); color:var(--maroon); border-color:#f0e0d8; }
.shop-page-btn.active{ background:var(--maroon); color:#fff; border-color:var(--maroon); }
.shop-page-btn:disabled{ opacity:.35; cursor:not-allowed; }
.shop-page-dots{ color:#bbb; padding:0 4px; font-size:13px; }

/* ── Mobile filter drawer + desktop sticky sidebar ── */
.shop-sidebar-overlay{ position:fixed; inset:0; background:rgba(20,17,20,.55); z-index:9999; opacity:0; pointer-events:none; transition:opacity .3s; }
.shop-sidebar-overlay.show{ opacity:1; pointer-events:auto; }
.shop-sidebar-mobile-head{ display:flex; align-items:center; justify-content:space-between; }
.shop-sidebar-mobile-head h3{ font-family:'Playfair Display',serif; font-size:19px; color:var(--dark); }
.shop-sidebar-mobile-head button{ width:36px; height:36px; border-radius:50%; background:#f6f2f2; color:#555; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.shop-sidebar-mobile-head button:hover{ background:var(--peach); color:var(--maroon); }
@media (max-width:1023px){
  .shop-sidebar{
    position:fixed; top:0; left:0; height:100%; width:86%; max-width:340px; z-index:10000;
    background:#fff; transform:translateX(-105%); transition:transform .35s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column; padding:20px 18px 0; box-shadow:0 25px 70px rgba(0,0,0,.25);
  }
  .shop-sidebar.open{ transform:translateX(0); }
  .shop-sidebar-mobile-head{ padding-bottom:16px; border-bottom:1px solid #f1ecec; margin-bottom:16px; flex:0 0 auto; }
  .shop-sidebar-body{ flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-bottom:16px; }
  .shop-sidebar-mobile-foot{ flex:0 0 auto; padding:14px 0 20px; border-top:1px solid #f1ecec; }
}
@media (min-width:1024px){
  .shop-sidebar{ display:flex; flex-direction:column; gap:20px; position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto; }
  .shop-sidebar-mobile-head, .shop-sidebar-mobile-foot{ display:none; }
  .shop-sidebar-body{ display:flex; flex-direction:column; gap:20px; }
}

/* ═══════════ CATEGORIES PAGE ═══════════ */
.category-tile{ display:block; }
.category-tile-img{
  position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:#eee;
  box-shadow:0 6px 20px rgba(0,0,0,.08); transition:all .4s;
}
.category-tile:hover .category-tile-img{ box-shadow:0 20px 44px rgba(0,0,0,.18); transform:translateY(-5px); }
.category-tile-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.category-tile:hover .category-tile-img img{ transform:scale(1.08); }
.category-tile-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,20,0) 38%, rgba(20,17,20,.82) 100%); }
.category-count-badge{
  position:absolute; top:14px; right:14px; z-index:3; background:rgba(255,255,255,.92); color:var(--maroon);
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px; backdrop-filter:blur(4px);
}
.category-tile-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:18px 18px 20px; }
.category-tile-name{ font-family:'Playfair Display',serif; color:#fff; font-size:21px; font-weight:700; letter-spacing:.3px; }
.category-sub-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.category-sub-chip{ font-size:10.5px; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); padding:3px 10px; border-radius:999px; }
.category-sub-more{ background:rgba(212,175,55,.9); border-color:transparent; color:var(--dark); font-weight:700; }
.category-tile-cta{
  display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; margin-top:12px; opacity:0; transform:translateY(6px); transition:all .3s;
}
.category-tile:hover .category-tile-cta{ opacity:1; transform:translateY(0); }
@media (max-width:639px){
  .category-tile-name{ font-size:16px; }
  .category-tile-overlay{ padding:14px; }
  .category-sub-chip{ font-size:9.5px; padding:2px 8px; }
}

/* ═══════════ NEW ARRIVALS PAGE ═══════════ */
.newarrival-pills{ display:flex; align-items:center; gap:10px; overflow-x:auto; padding:2px 2px 18px; scrollbar-width:none; -ms-overflow-style:none; }
.newarrival-pills::-webkit-scrollbar{ display:none; }
.newarrival-pill{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #f1ecec;
  color:#555; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:999px; transition:all .2s; white-space:nowrap;
}
.newarrival-pill:hover{ border-color:var(--maroon); color:var(--maroon); }
.newarrival-pill.active{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.newarrival-pill-count{ font-size:11px; background:#f1ecec; color:#998; padding:1px 8px; border-radius:999px; }
.newarrival-pill.active .newarrival-pill-count{ background:rgba(255,255,255,.25); color:#fff; }

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE  (pd-*)
   ═══════════════════════════════════════════════════════════ */

.pd-page { max-width:1400px; margin:0 auto; padding:24px 20px 60px; }
@media (min-width:640px){ .pd-page{ padding:32px 40px 80px; } }

/* Breadcrumb */
.pd-breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:#a0a0a0; margin-bottom:28px;
}
.pd-breadcrumb a{ color:#a0a0a0; transition:color .2s; }
.pd-breadcrumb a:hover{ color:var(--maroon); }
.pd-breadcrumb span{ color:#555; font-weight:600; }

/* Grid */
.pd-grid{
  display:grid; grid-template-columns:1fr;
  gap:36px; align-items:start; margin-bottom:56px;
}
@media (min-width:900px){ .pd-grid{ grid-template-columns:1fr 1fr; gap:56px; } }

/* ── Gallery ── */
.pd-gallery{ display:flex; gap:12px; align-items:flex-start; }
.pd-thumbs{
  display:flex; flex-direction:column; gap:10px; flex:0 0 72px;
}
.pd-thumb{
  width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; transition:all .2s; flex:0 0 auto;
  background:#f6f2f2;
}
.pd-thumb.active{ border-color:var(--maroon); box-shadow:0 0 0 2px rgba(123,17,58,.18); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-thumb:hover:not(.active){ border-color:#ddd; }

.pd-main-img-wrap{
  position:relative; flex:1; border-radius:20px; overflow:hidden;
  background:#f9f5f5; aspect-ratio:1/1;
}
.pd-main-img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .25s;
}
.pd-discount-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  background:var(--maroon); color:#fff; font-size:11px; font-weight:800;
  padding:5px 12px; border-radius:999px; letter-spacing:.5px;
}
.pd-badge-label{
  position:absolute; top:14px; right:14px; z-index:3;
  background:var(--gold); color:var(--dark); font-size:10px; font-weight:800;
  padding:4px 10px; border-radius:999px; letter-spacing:.5px; text-transform:uppercase;
}
.pd-img-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9);
  color:var(--dark); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.14); transition:all .2s; border:none; cursor:pointer;
}
.pd-img-prev{ left:10px; }
.pd-img-next{ right:10px; }
.pd-img-arrow:hover{ background:var(--maroon); color:#fff; }

/* Mobile: thumbs go horizontal below main image */
@media (max-width:639px){
  .pd-gallery{ flex-direction:column-reverse; }
  .pd-thumbs{ flex-direction:row; overflow-x:auto; flex:unset; width:100%; padding-bottom:4px; }
  .pd-thumb{ width:60px; height:60px; flex:0 0 60px; }
}

/* ── Info panel ── */
.pd-meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.pd-category{
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--maroon);
  font-weight:700; transition:opacity .2s;
}
.pd-category:hover{ opacity:.75; }
.pd-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.4px; padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px;
}
.pd-tag-gold{ background:#fdf6e3; color:#b8860b; }
.pd-tag-green{ background:#ecfdf5; color:#047857; }

.pd-title{
  font-family:var(--font-heading, serif); font-size:26px; font-weight:800;
  color:var(--dark); line-height:1.25; margin-bottom:12px;
}
@media (min-width:640px){ .pd-title{ font-size:30px; } }

.pd-rating-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; margin-bottom:16px;
}
.pd-stars{ color:var(--gold); font-size:13px; letter-spacing:1.5px; }
.pd-rating-num{ font-weight:700; color:#444; }
.pd-review-count{ color:#aaa; }
.pd-dot{ color:#ddd; }
.pd-views{ color:#aaa; }

.pd-price-block{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.pd-price{ font-size:30px; font-weight:900; color:var(--maroon); }
.pd-original{ font-size:18px; color:#c0b8b8; text-decoration:line-through; }
.pd-save-badge{
  font-size:12px; font-weight:700; background:#fff0f4; color:var(--maroon);
  padding:4px 10px; border-radius:999px; border:1px solid #f8d0dc;
}

.pd-stock-row{ margin-bottom:14px; }
.pd-stock{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px;
}
.pd-stock-in{ background:#ecfdf5; color:#047857; }
.pd-stock-low{ background:#fff7ed; color:#c2410c; }
.pd-stock-out{ background:#f9f9f9; color:#999; }

.pd-short-desc{ font-size:14px; color:#666; line-height:1.65; margin-bottom:18px; }

/* Options */
.pd-option-group{ margin-bottom:18px; }
.pd-option-label{
  font-size:13px; font-weight:700; color:#333; margin-bottom:10px;
}
.pd-option-selected{ font-weight:400; color:var(--maroon); margin-left:4px; }
.pd-size-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-size-btn{
  min-width:44px; height:40px; padding:0 14px; border-radius:8px;
  border:1.5px solid #e0d8d8; font-size:13px; font-weight:600; color:#444;
  transition:all .2s; cursor:pointer; background:#fff;
}
.pd-size-btn:hover{ border-color:var(--maroon); color:var(--maroon); }
.pd-size-btn.active{ background:var(--maroon); color:#fff; border-color:var(--maroon); }

.pd-color-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-color-btn{
  width:32px; height:32px; border-radius:50%; border:2.5px solid transparent;
  transition:all .2s; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.pd-color-btn.active{ border-color:var(--maroon); transform:scale(1.15); box-shadow:0 0 0 3px rgba(123,17,58,.2); }

/* Quantity */
.pd-qty-wrap{
  display:flex; align-items:center; gap:0; border:1.5px solid #e0d8d8;
  border-radius:999px; overflow:hidden; width:fit-content;
}
.pd-qty-btn{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:#555; font-size:14px; border:none; cursor:pointer;
  transition:background .2s, color .2s;
}
.pd-qty-btn:hover{ background:var(--maroon); color:#fff; }
.pd-qty-input{
  width:52px; height:42px; text-align:center; font-size:15px; font-weight:700;
  border:none; border-left:1px solid #eee; border-right:1px solid #eee;
  color:#333; background:#fff; outline:none; -moz-appearance:textfield;
}
.pd-qty-input::-webkit-inner-spin-button{ display:none; }

/* CTAs */
.pd-cta-row{ display:flex; gap:12px; margin-bottom:14px; }
.pd-btn-cart{
  flex:1; height:52px; border-radius:999px; background:var(--maroon); color:#fff;
  font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .3s; box-shadow:0 8px 24px rgba(123,17,58,.25); border:none; cursor:pointer;
}
.pd-btn-cart:hover:not(:disabled){ background:var(--maroon-dark); transform:translateY(-2px); box-shadow:0 12px 30px rgba(123,17,58,.35); }
.pd-btn-cart:disabled{ background:#e2dcdc; color:#a89f9f; cursor:not-allowed; box-shadow:none; }
.pd-btn-wish{
  width:52px; height:52px; border-radius:50%; border:1.5px solid #e0d8d8;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  color:#aaa; background:#fff; transition:all .25s; cursor:pointer;
  flex:0 0 52px;
}
.pd-btn-wish:hover{ border-color:var(--maroon); color:var(--maroon); }
.pd-btn-wish.active{ background:var(--maroon); color:#fff; border-color:var(--maroon); }

.pd-btn-buynow{
  width:100%; height:48px; border-radius:999px;
  border:2px solid var(--maroon); color:var(--maroon); background:transparent;
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .3s; cursor:pointer; margin-bottom:22px;
}
.pd-btn-buynow:hover{ background:var(--maroon); color:#fff; }

/* Trust badges */
.pd-trust{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:#fdf9f6; border:1px solid #f0e8e8; border-radius:14px;
  padding:16px; margin-bottom:20px;
}
.pd-trust-item{
  display:flex; align-items:center; gap:9px;
  font-size:12px; color:#555; font-weight:500;
}
.pd-trust-item i{ color:var(--maroon); font-size:16px; flex:0 0 auto; }

/* Share */
.pd-share-row{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.pd-share-label{ font-size:12.5px; font-weight:700; color:#888; }
.pd-share-btn{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:all .2s; text-decoration:none;
}
.pd-share-wa{ background:#25d366; color:#fff; }
.pd-share-wa:hover{ background:#1db954; }
.pd-share-ig{ background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.pd-share-ig:hover{ opacity:.85; }
.pd-share-copy{ background:#f0f0f0; color:#555; }
.pd-share-copy:hover{ background:var(--maroon); color:#fff; }

.pd-meta-info{
  display:flex; flex-wrap:wrap; gap:14px;
  font-size:12.5px; color:#999; border-top:1px solid #f0eaea; padding-top:14px;
}
.pd-meta-info strong{ color:#666; }

/* ── Tabs ── */
.pd-tabs-section{ margin-bottom:60px; }
.pd-tabs-nav{
  display:flex; gap:0; border-bottom:2px solid #f0eaea; overflow-x:auto;
  scrollbar-width:none; margin-bottom:28px;
}
.pd-tabs-nav::-webkit-scrollbar{ display:none; }
.pd-tab{
  padding:14px 22px; font-size:13.5px; font-weight:700; color:#999;
  border:none; background:transparent; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s;
}
.pd-tab:hover{ color:#555; }
.pd-tab.active{ color:var(--maroon); border-bottom-color:var(--maroon); }

.pd-tab-pane{ display:none; }
.pd-tab-pane.active{ display:block; animation:fadeInUp .3s ease; }

.pd-desc-text{ font-size:14.5px; color:#555; line-height:1.75; max-width:720px; }

.pd-detail-table{ width:100%; max-width:600px; border-collapse:collapse; font-size:14px; }
.pd-detail-table td{ padding:11px 16px; border-bottom:1px solid #f3eeee; }
.pd-detail-table td:first-child{ color:#888; font-weight:600; width:160px; background:#fdfbfb; }
.pd-detail-table td:last-child{ color:#333; }

.pd-review-summary{ display:flex; align-items:center; gap:20px; }
.pd-review-big{ font-size:52px; font-weight:900; color:var(--maroon); line-height:1; }
.pd-stars-lg{ color:var(--gold); font-size:18px; letter-spacing:2px; margin-bottom:4px; }
.pd-review-count-lg{ font-size:13px; color:#aaa; }

.pd-shipping-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .pd-shipping-grid{ grid-template-columns:1fr; } }
.pd-shipping-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px; background:#fdfbfb; border-radius:12px; border:1px solid #f0eaea;
}
.pd-shipping-item i{ font-size:22px; color:var(--maroon); flex:0 0 auto; margin-top:2px; }
.pd-shipping-item strong{ font-size:14px; color:#333; display:block; margin-bottom:4px; }
.pd-shipping-item p{ font-size:12.5px; color:#888; margin:0; }

/* ── Related products ── */
.pd-related{ }
.pd-related-title{
  font-family:var(--font-heading, serif); font-size:24px; font-weight:800;
  color:var(--dark); text-align:center; margin-bottom:24px;
}
.pd-related-title::after{
  content:''; display:block; width:48px; height:3px;
  background:var(--maroon); margin:10px auto 0; border-radius:2px;
}
.pd-related-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
@media (min-width:640px){ .pd-related-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px){ .pd-related-grid{ grid-template-columns:repeat(6, 1fr); } }

.pd-related-card{
  background:#fff; border-radius:14px; overflow:hidden;
  border:1px solid #f1ecec; transition:all .3s; text-decoration:none;
  display:block;
}
.pd-related-card:hover{ transform:translateY(-5px); box-shadow:0 14px 32px rgba(0,0,0,.1); }
.pd-related-img-wrap{ aspect-ratio:1/1; overflow:hidden; background:#f6f2f2; }
.pd-related-img{ width:100%; height:100%; object-fit:cover; }
.pd-related-body{ padding:12px; }
.pd-related-name{ font-size:13px; font-weight:600; color:#2b2b2b; margin-bottom:6px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pd-related-price{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--maroon); }
.pd-related-orig{ font-size:11.5px; color:#c0b8b8; text-decoration:line-through; font-weight:400; }

/* ── Skeleton ── */
.pd-skeleton .skel-line, .pd-skeleton .skel-img, .pd-skeleton .skel-thumb{
  background:linear-gradient(90deg, #f0eaea 25%, #faf5f5 50%, #f0eaea 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px;
  display:block;
}
.skel-thumb{ width:72px; height:72px; border-radius:10px; }
.skel-img{ aspect-ratio:1/1; width:100%; border-radius:20px; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }

/* ── Link style on product cards ── */
.product-img-link{ display:block; width:100%; height:100%; }