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

/* Safety net: nothing on the site should be able to force horizontal
   scrolling on small screens. Anything that legitimately needs to scroll
   sideways (thumbnail rails, tab strips) sets its own overflow-x:auto on
   an inner wrapper, so this is safe globally. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}
#page-content {
  animation: pageFadeIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #page-content { animation: none; }
}

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;
  }
}

:root{
  --maroon:#7B113A; --maroon-dark:#5a0c2a; --gold:#D4AF37;
  --peach:#FDF8F5; --dark:#1A1A1A; --header-h:76px;
}
@media (max-width:1023px){ :root{ --header-h:68px; } }

#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); }
.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:88vh; overflow:hidden; background:#f6eee9;
}
.hero-link{
  position:absolute; inset:0; display:block; color:inherit; text-decoration:none;
}

.hero-slide{
  position:absolute; inset:0; opacity:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  /* 5 slides × 5s each = 25s total */
  animation: heroFade 25s infinite;
}

/* ── 5 slides (no slide 2) ── */
.hero-slide-1 { background-image:url('../images/hero-bg1.jpg'); animation-delay:0s; }
.hero-slide-3 { background-image:url('../images/hero-bg3.jpg'); animation-delay:5s; }
.hero-slide-4 { background-image:url('../images/hero-bg4.jpg'); animation-delay:10s; }
.hero-slide-5 { background-image:url('../images/hero-bg5.jpg'); animation-delay:15s; }
.hero-slide-6 { background-image:url('../images/hero-bg6.jpg'); animation-delay:20s; }

/* ── Dots (5 indicators) ── */
.hero-dots{
  position:absolute; z-index:5; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.35); backdrop-filter:blur(8px);
}
.hero-dots span{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.72);
  box-shadow:0 1px 5px rgba(0,0,0,.18);
  animation: heroDot 25s infinite;
}
/* Dot delays – now 5 dots */
.hero-dots span:nth-child(1) { animation-delay:0s; }
.hero-dots span:nth-child(2) { animation-delay:5s; }
.hero-dots span:nth-child(3) { animation-delay:10s; }
.hero-dots span:nth-child(4) { animation-delay:15s; }
.hero-dots span:nth-child(5) { animation-delay:20s; }

/* ── Keyframes: crossfade between 5 slides ──
   Each slide visible for ~4.5s, with 0.5s fade in/out.
   Total cycle 25s (5 × 5s). */
@keyframes heroFade {
  0%    { opacity:0; }
  4%    { opacity:1; }   
  2%    { opacity:1; }   
  20%   { opacity:1; }   
  22%   { opacity:0; }  
  100%  { opacity:0; }
}

/* ── Dot animation: grow to indicate active slide ── */
@keyframes heroDot {
  0%    { width:9px; border-radius:50%; background:rgba(255,255,255,.72); }
  2%    { width:24px; border-radius:999px; background:#fff; }
  20%   { width:24px; border-radius:999px; background:#fff; }
  22%   { width:9px; border-radius:50%; background:rgba(255,255,255,.72); }
  100%  { width:9px; border-radius:50%; background:rgba(255,255,255,.72); }
}

/* ── Responsive tweaks ── */
@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); }

/* ── Hero overlay text (shown on all screen sizes: mobile, tablet, laptop, desktop) ── */
.hero-mobile-overlay{
  display:block;
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
}
.hero-mobile-content{
  display:block;
  position:absolute; z-index:3;
  left:clamp(20px, 6vw, 80px);
  right:clamp(20px, 6vw, 80px);
  max-width:520px;
  bottom:clamp(38px, 9vh, 110px);
  color:#fff;
}
.hero-mobile-title{
  display:block;
  font-family:'Playfair Display', serif;
  font-size:clamp(22px, 4vw, 48px); line-height:1.15; font-weight:800;
  margin:0 0 4px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero-mobile-accent{
  display:block;
  font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
  font-size:clamp(16px, 2.2vw, 28px); opacity:.95;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}

@media (max-width:640px){
  /* Full-bleed photo band, sized to the mobile screen (not full viewport
     height) — matches the reference hero's proportions. */
  .hero{
    min-height:0;
    height:53vw;
    min-height:210px;
    max-height:320px;
    margin:0;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
  }
  .hero-slide-1{ background-position:68% center; }
  .hero-slide-3{ background-position:74% center; }  /* was slide-2 */
  .hero-slide-4{ background-position:70% center; }  /* adjust if needed */
  /* Add background-position overrides for slides 5 and 6 if needed */
  .hero-dots{ bottom:14px; }

  /* Subtle darkening on the left so the overlay text stays readable
     regardless of which slide is showing. */
  .hero-mobile-overlay{
    display:block;
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%);
  }

  .hero-mobile-content{
    display:block;
    position:absolute; z-index:3; left:20px; right:20px; bottom:38px;
    color:#fff;
  }
  .hero-mobile-title{
    display:block;
    font-family:'Playfair Display', serif;
    font-size:22px; line-height:1.15; font-weight:800;
    margin:0 0 4px;
    text-shadow:0 2px 10px rgba(0,0,0,.4);
  }
  .hero-mobile-accent{
    display:block;
    font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
    font-size:16px; opacity:.95;
    text-shadow:0 2px 8px rgba(0,0,0,.4);
  }
}

/* ── 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; text-decoration:none; cursor:pointer; }
.add-cart-btn{ margin-top:14px; }
.add-cart-btn:hover{ background:var(--maroon-dark); color:#fff; }
.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-light{ background:#F7F1EA; color:var(--dark); position:relative; border-top:1px solid rgba(123,17,58,.08); }
.footer-logo{ filter:none; }
.footer-head{ font-family:'Playfair Display',serif; font-size:15px; letter-spacing:.5px; color:var(--maroon); 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(26,26,26,.62); font-size:14px; transition:color .25s, padding-left .25s; }
.footer-link:hover{ color:var(--maroon); padding-left:4px; }
.footer-social{ width:38px; height:38px; border-radius:50%; background:rgba(123,17,58,.08); display:flex; align-items:center; justify-content:center; color:var(--maroon); 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(0,0,0,.08); 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; width:100%; box-sizing:border-box; }
@media (min-width:640px){ .pd-page{ padding:32px 40px 80px; } }
@media (max-width:479px){ .pd-page{ padding:16px 16px 40px; } }

/* 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;
  width:100%; max-width:100%; min-width:0;
}
@media (min-width:900px){ .pd-grid{ grid-template-columns:1fr 1fr; gap:56px; } }
@media (max-width:479px){ .pd-grid{ gap:16px; margin-bottom:32px; } }

/* ── Gallery ──
   min-width:0 here too: as the FIRST grid item in .pd-grid, .pd-gallery
   would otherwise fall back to its content's intrinsic (min-content) width
   for the purpose of grid track sizing. That's normally harmless because
   its children isolate their own overflow (thumbs scroll, main image is
   overflow:hidden), but a differently-shaped product image/thumbnail set
   than what shipped here could still nudge the column wider than the
   viewport. Pinning it to 0 guarantees the column can never be stretched
   by gallery content, matching the same safety net already used on
   .pd-info below. */
.pd-gallery{ display:flex; gap:12px; align-items:flex-start; width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.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: like Amazon/Flipkart — the whole product stays visible inside a
   compact tile (no crop, no stretch, no excess zoom). object-fit:contain
   letterboxes on the shorter side instead of cropping, and max-height caps
   the tile so it can never balloon to fill most of the screen the way a
   plain square (full-width) tile does on narrower phones — title, price,
   variants and Add to Cart stay visible without excess scrolling. Thumbnails
   move below and scroll horizontally so they stay usable without competing
   for vertical space. */
@media (max-width:639px){
  .pd-gallery{ flex-direction:column-reverse; gap:10px; }
  .pd-thumbs{ flex-direction:row; overflow-x:auto; flex:unset; width:100%; padding-bottom:4px; gap:8px; -webkit-overflow-scrolling:touch; }
  .pd-thumb{ width:56px; height:56px; flex:0 0 56px; border-radius:8px; }
  .pd-main-img-wrap{
    width:100%;
    aspect-ratio:1/1;
    max-height:46vh;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .pd-main-img{
    width:100%; height:100%;
    object-fit:contain;
    object-position:center;
  }
}
@media (max-width:479px){
  .pd-thumb{ width:48px; height:48px; flex:0 0 48px; }
  .pd-main-img-wrap{ border-radius:12px; max-height:38vh; }
}
@media (max-width:359px){
  .pd-main-img-wrap{ max-height:34vh; }
}

/* ── Info panel ──
   min-width:0 is required here: as a grid/flex child, .pd-info would
   otherwise default to min-width:auto (its content's intrinsic width),
   which lets long titles/descriptions push it — and everything inside it —
   wider than the viewport instead of wrapping. Every direct text block
   inside also gets overflow-wrap so long words/names never force width. */
.pd-info{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.pd-info *{ min-width:0; }
.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;
  overflow-wrap:anywhere; word-break:break-word;
}
@media (min-width:640px){ .pd-title{ font-size:30px; } }
@media (max-width:479px){ .pd-title{ font-size:21px; } }
@media (max-width:359px){ .pd-title{ font-size:19px; } }

.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; white-space:normal;
}
@media (max-width:479px){
  .pd-price{ font-size:24px; }
  .pd-original{ font-size:15px; }
}

.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; overflow-wrap:anywhere; word-break:break-word; }

/* 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-size-btn-out{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.pd-size-btn-out:hover{ border-color:#e0d8d8; color:#444; }

.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; width:100%; max-width:100%; box-sizing:border-box; }
.pd-btn-cart{
  flex:1 1 0%; min-width:0; max-width:100%; 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;
  box-sizing:border-box; padding:0 10px; white-space:normal; text-align:center; overflow-wrap:anywhere;
}
.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%; max-width:100%; height:48px; border-radius:999px; box-sizing:border-box;
  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; overflow-wrap:anywhere;
}
.pd-btn-buynow:hover{ background:var(--maroon); color:#fff; }

/* Mobile: keep both CTA buttons fully inside the viewport with breathing
   room on either side, instead of letting flex-basis/content force them
   wider than the available width. */
@media (max-width:640px){
  .pd-cta-row{ gap:10px; }
  .pd-btn-cart{ font-size:13.5px; gap:6px; padding:0 6px; }
  .pd-btn-wish{ width:48px; height:48px; flex:0 0 48px; font-size:16px; }
}
@media (max-width:359px){
  .pd-cta-row{ flex-wrap:wrap; }
  .pd-btn-cart{ flex:1 1 100%; }
  .pd-btn-wish{ flex:0 0 48px; }
}

/* 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; min-width:0;
}
.pd-trust-item span{ overflow-wrap:anywhere; word-break:break-word; }
.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; flex-wrap:wrap;
}
.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;
  max-width:100%;
}
.pd-meta-info span{ overflow-wrap:anywhere; word-break:break-word; }
.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:100%; overflow-wrap:anywhere; word-break:break-word; }

/* The spec table has a fixed-width label column, so on narrow phones it can
   need more room than the screen has. Rather than let that stretch the
   whole page sideways, the table itself becomes the thing that scrolls. */
.pd-detail-table-wrap{ width:100%; max-width:600px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pd-detail-table{ width:100%; min-width:420px; 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; overflow-wrap:break-word; word-break:break-word; }
@media (max-width:479px){
  .pd-detail-table{ min-width:0; }
  .pd-detail-table td:first-child{ width:110px; padding:10px; font-size:12.5px; }
  .pd-detail-table td:last-child{ padding:10px; font-size:12.5px; }
}

.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%; }

/* ── Admin modal overlay (merged from admin.css to save an HTTP request) ── */
.admin-modal-overlay.open{ display:flex !important; }

/* ── Mobile: match the home hero's compact, full-bleed, left-aligned
   layout on every other page's top banner too. ── */
@media (max-width:640px){
  .about-hero{ min-height:0; }
  .about-hero-content{ padding:44px 24px 52px; text-align:left; margin:0; }
  .about-hero-desc{ margin:0 0 24px; text-align:left; }
  .about-hero-pills{ justify-content:flex-start; }

  .contact-hero{ min-height:0; }
  .contact-hero-content{ padding:44px 24px; text-align:left; margin:0; }
  .contact-hero-desc{ margin:0; text-align:left; }

  .wishlist-hero,
  .cart-hero{ padding:40px 24px 28px; text-align:left; }
}