﻿/* ============================================================
   Your Store — Saree E-Commerce  |  styles.css
   ============================================================ */

/* ── VARIABLES ───────────────────────────────────────────────── */
:root {
  --maroon: #7B1A1A;
  --maroon-dark: #5A1010;
  --gold: #C4922A;
  --gold-light: #E8C86A;
  --cream: #FDFAF5;
  --cream-2: #F5EDD8;
  --dark: #1C0A00;
  --dark-2: #2C1A0A;
  --text: #3A2A1A;
  --text-light: #6A5A4A;
  --border: #E8DCC8;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; transition:color .25s var(--ease); }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:var(--font-body); }
input, select, textarea { font-family:var(--font-body); }

/* ── UTILITIES ───────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 2rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── ANNOUNCEMENT BAR ────────────────────────────────────────── */
.announce-bar {
  position:relative;
  background:var(--dark);
  color:var(--cream-2);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  overflow:hidden;
  height:36px;
  display:flex;
  align-items:center;
}
.announce-track {
  display:flex;
  gap:2rem;
  white-space:nowrap;
  animation:marquee 30s linear infinite;
}
.announce-track span { flex-shrink:0; }
.announce-track .sep { color:var(--gold); }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.announce-close {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--cream-2);
  font-size:1rem;
  opacity:.6;
  transition:opacity .2s;
}
.announce-close:hover { opacity:1; }

/* ── HEADER ──────────────────────────────────────────────────── */
#header {
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--cream);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease);
}
#header.scrolled { box-shadow:var(--shadow-md); }
.header-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 2rem;
  max-width:1400px;
  margin:0 auto;
}
.logo {
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  color:var(--dark);
  letter-spacing:-.02em;
}

/* Main Nav */
.main-nav ul {
  display:flex;
  gap:2rem;
  align-items:center;
}
.nav-lnk {
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text);
  transition:color .2s;
  display:flex;
  align-items:center;
  gap:.3rem;
}
.nav-lnk:hover { color:var(--maroon); }
.sale-lnk { background:none; }
.chev { transition:transform .2s; }
.has-drop { position:relative; }
.nav-drop {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.75rem 0;
  min-width:180px;
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:100;
}
.has-drop:hover .nav-drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.has-drop:hover .chev { transform:rotate(180deg); }
.has-drop:focus-within .nav-drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.has-drop:focus-within .chev { transform:rotate(180deg); }
.nav-drop a {
  display:block;
  padding:.5rem 1.25rem;
  font-size:.8rem;
  font-weight:400;
  color:var(--text);
  transition:background .15s, color .15s;
}
.nav-drop a:hover { background:var(--cream-2); color:var(--maroon); }

/* Header Icons */
.header-icons { display:flex; align-items:center; gap:.75rem; }
.icon-btn {
  position:relative;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background .2s;
}
.icon-btn:hover { background:var(--cream-2); }
.icon-btn svg { width:20px; height:20px; color:var(--dark); }
.icon-badge {
  position:absolute;
  top:-2px;
  right:-2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--maroon);
  color:#fff;
  font-size:.6rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0);
  transition:transform .2s;
}
.icon-badge.visible { transform:scale(1); }

/* Hamburger */
.hamburger { display:none; width:28px; height:20px; flex-direction:column; justify-content:space-between; }
.hamburger span { display:block; width:100%; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }

/* Category Bar */
.cat-bar {
  border-top:1px solid var(--border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cat-bar::-webkit-scrollbar { display:none; }
.cat-bar-inner {
  display:flex;
  gap:.25rem;
  padding:.5rem 2rem;
  max-width:1400px;
  margin:0 auto;
}
.cat-btn {
  flex-shrink:0;
  padding:.4rem 1rem;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-light);
  border:1px solid transparent;
  border-radius:20px;
  transition:all .2s var(--ease);
  white-space:nowrap;
}
.cat-btn:hover { color:var(--maroon); border-color:var(--border); }
.cat-btn.active { background:var(--maroon); color:#fff; border-color:var(--maroon); }

/* ── MOBILE MENU ─────────────────────────────────────────────── */
.mobile-menu {
  position:fixed;
  top:0;
  left:0;
  width:320px;
  height:100vh;
  background:#fff;
  z-index:2000;
  transform:translateX(-100%);
  transition:transform .35s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open { transform:translateX(0); }
.mob-inner { padding:1.5rem; }
.mob-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.mob-close { font-size:1.5rem; color:var(--text); }
.mob-nav { display:flex; flex-direction:column; }
.mob-nav li a {
  display:block;
  padding:.75rem 0;
  font-size:.9rem;
  font-weight:500;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.mob-nav li a:hover { color:var(--maroon); }
.mob-divider {
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-light);
  padding:1.5rem 0 .5rem;
}
.mob-footer { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border); }
.mob-social { font-size:.82rem; color:var(--maroon); }

/* Page Overlay */
.page-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:1500;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.page-overlay.active { opacity:1; pointer-events:auto; }

/* ── SEARCH MODAL ────────────────────────────────────────────── */
.search-modal {
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10vh;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.search-modal.open { opacity:1; pointer-events:auto; }
.search-inner {
  background:#fff;
  width:90%;
  max-width:600px;
  border-radius:12px;
  padding:2rem;
  box-shadow:var(--shadow-lg);
}
.search-bar-wrap {
  display:flex;
  align-items:center;
  gap:.75rem;
  border-bottom:2px solid var(--border);
  padding-bottom:.75rem;
}
.search-bar-wrap input {
  flex:1;
  border:none;
  outline:none;
  font-size:1rem;
  background:transparent;
}
.search-x { font-size:1.25rem; color:var(--text-light); }
.search-results { margin-top:1.5rem; max-height:50vh; overflow-y:auto; }
.search-hint { color:var(--text-light); font-size:.85rem; }
.sr-card {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.75rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
}
.sr-card:hover { background:var(--cream-2); }
.sr-card-img { width:50px; height:66px; border-radius:4px; flex-shrink:0; overflow:hidden; background-size:cover; background-position:center; }
.sr-card-name { font-size:.85rem; font-weight:500; }
.sr-card-price { font-size:.8rem; color:var(--maroon); font-weight:600; }

/* ── SIDEBARS (Cart & Wishlist) ──────────────────────────────── */
.panel-sidebar {
  position:fixed;
  top:0;
  right:0;
  width:380px;
  max-width:90vw;
  height:100vh;
  background:#fff;
  z-index:2000;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  box-shadow:var(--shadow-lg);
}
.panel-sidebar.open { transform:translateX(0); }
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.panel-head h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
.panel-close { font-size:1.5rem; color:var(--text); }
.panel-body { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.panel-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  height:100%;
  color:var(--text-light);
  text-align:center;
}
.panel-empty svg { color:var(--border); }
.panel-foot { padding:1.25rem 1.5rem; border-top:1px solid var(--border); }
.cart-total-row { display:flex; justify-content:space-between; font-weight:600; font-size:1rem; margin-bottom:.5rem; }
.cart-ship-note { font-size:.75rem; color:var(--text-light); margin-bottom:1rem; }

/* Cart Items */
.cart-item {
  display:flex;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.cart-item-img-placeholder {
  width:70px;
  height:88px;
  flex-shrink:0;
  border-radius:4px;
  overflow:hidden;
}
.cart-item-info { flex:1; }
.cart-item-name { font-size:.85rem; font-weight:500; margin-bottom:.25rem; }
.cart-item-price { font-size:.85rem; color:var(--maroon); font-weight:600; margin-bottom:.5rem; }
.cart-item-qty { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.qty-btn {
  width:28px;
  height:28px;
  border:1px solid var(--border);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transition:background .15s;
}
.qty-btn:hover { background:var(--cream-2); }
.qty-num { font-size:.85rem; font-weight:600; min-width:1.5rem; text-align:center; }
.cart-item-remove { font-size:.75rem; color:var(--maroon); text-decoration:underline; cursor:pointer; }

/* Wishlist Items */
.wish-item {
  display:flex;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.wish-item-thumb {
  width:60px;
  height:75px;
  flex-shrink:0;
  border-radius:4px;
  overflow:hidden;
}
.wish-item-info { flex:1; }
.wish-item-name { font-size:.85rem; font-weight:500; margin-bottom:.25rem; }
.wish-item-price { font-size:.85rem; color:var(--maroon); font-weight:600; margin-bottom:.5rem; }
.wish-item-atc {
  display:inline-block;
  padding:.4rem 1rem;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:var(--maroon);
  color:#fff;
  border-radius:4px;
  margin-right:.5rem;
  transition:background .2s;
}
.wish-item-atc:hover { background:var(--maroon-dark); }
.wish-item-rm { font-size:.75rem; color:var(--maroon); text-decoration:underline; cursor:pointer; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  display:inline-block;
  padding:.8rem 2rem;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--maroon);
  color:#fff;
  border-radius:4px;
  transition:background .2s, transform .2s;
}
.btn-primary:hover { background:var(--maroon-dark); transform:translateY(-1px); }
.btn-ghost {
  display:inline-block;
  padding:.8rem 2rem;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1.5px solid #fff;
  color:#fff;
  border-radius:4px;
  transition:background .2s, color .2s;
}
.btn-ghost:hover { background:#fff; color:var(--dark); }
.btn-outline {
  display:inline-block;
  padding:.7rem 1.5rem;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1.5px solid var(--maroon);
  color:var(--maroon);
  border-radius:4px;
  transition:background .2s, color .2s;
}
.btn-outline:hover { background:var(--maroon); color:#fff; }
.btn-outline.sm { padding:.5rem 1rem; font-size:.7rem; }
.full-w { width:100%; text-align:center; }

/* toast — lift above WhatsApp button on mobile */
.toast {
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%) translateY(120%);
  background:var(--dark);
  color:#fff;
  padding:.75rem 1.5rem;
  border-radius:8px;
  font-size:.82rem;
  font-weight:500;
  z-index:9999;
  transition:transform .3s var(--ease);
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  max-width:90vw;
  text-align:center;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }

/* ── HERO SLIDER ─────────────────────────────────────────────── */
.hero-section { position:relative; height:85vh; min-height:500px; overflow:hidden; }
.hero-slider { width:100%; height:100%; position:relative; }
.hero-slide {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.hero-slide.active { opacity:1; z-index:1; }
.slide-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.slide-content {
  position:relative;
  z-index:2;
  padding:3rem 5%;
  max-width:650px;
  color:#fff;
}
.slide-tag {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold-light);
  margin-bottom:1rem;
}
.slide-content h1 {
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 5vw, 4rem);
  font-weight:700;
  line-height:1.1;
  margin-bottom:1rem;
}
.slide-desc {
  font-size:.9rem;
  line-height:1.6;
  opacity:.9;
  margin-bottom:2rem;
}
.slide-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* Hero Arrows & Dots */
.hero-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.hero-arrow:hover { background:rgba(255,255,255,.3); }
.prev-arrow { left:1.5rem; }
.next-arrow { right:1.5rem; }
.hero-dots {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:.5rem;
}
.hdot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background .2s, transform .2s;
}
.hdot.active { background:#fff; transform:scale(1.3); }

/* ── STATS BAR ───────────────────────────────────────────────── */
.stats-bar { background:var(--dark); padding:1.5rem 2rem; }
.stats-inner { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
.stat-item { text-align:center; color:var(--cream-2); }
.stat-n { display:block; font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--gold-light); }
.stat-l { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.page-section { padding:3.5rem 0; }
.bg-cream { background:var(--cream-2); }
.sec-head { text-align:center; margin-bottom:2rem; }
.sec-tag {
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--gold);
  margin-bottom:.5rem;
}
.sec-title {
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:700;
  color:var(--dark);
}
.sec-sub { font-size:.88rem; color:var(--text-light); margin-top:.5rem; }
.sec-head.light .sec-tag { color:var(--gold-light); }
.sec-head.light .sec-title { color:#fff; }
.sec-head.light .sec-sub { color:rgba(255,255,255,.7); }
.sec-cta { text-align:center; margin-top:2.5rem; }

/* ── FILTER TABS ─────────────────────────────────────────────── */
.filter-tabs {
  display:flex;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
  /* horizontal scroll on mobile */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.filter-tabs::-webkit-scrollbar { display:none; }
.ftab {
  padding:.5rem 1.2rem;
  font-size:.72rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-light);
  border:1px solid var(--border);
  border-radius:20px;
  transition:all .2s var(--ease);
  flex-shrink:0; /* never shrink — enables scroll */
  white-space:nowrap;
}
.ftab:hover { border-color:var(--maroon); color:var(--maroon); }
.ftab.active { background:var(--maroon); color:#fff; border-color:var(--maroon); }

/* ── PRODUCT GRID ────────────────────────────────────────────── */
.product-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}

/* ── PRODUCT CARD ────────────────────────────────────────────── */
.pcard:focus-visible { outline:2px solid var(--maroon); outline-offset:2px; box-shadow:var(--shadow-md); }
.pcard { cursor:pointer; border-radius:8px; overflow:hidden; background:#fff; transition:box-shadow .3s, transform .3s; }
.pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.pcard-img-wrap {
  position:relative;
  overflow:hidden;
  aspect-ratio:2/2.75;
  isolation:isolate;
}
.pcard-img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.pcard:hover .pcard-img { transform:scale(1.05); }
.pcard-img-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.pcard:hover .pcard-img-2 { opacity:1; }
.pcard-badge {
  position:absolute;
  top:.75rem;
  left:.75rem;
  padding:.3rem .75rem;
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--maroon);
  color:#fff;
  border-radius:3px;
  z-index:3;
}
.pcard-badge.new { background:var(--gold); color:var(--dark); }
.pcard-badge.custom { background:#2C5F2D; color:#fff; }
.pcard-wish {
  position:absolute;
  top:.75rem;
  right:.75rem;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:background .2s, transform .2s;
}
.pcard-wish:hover { background:#fff; transform:scale(1.1); }
.pcard-wish svg { width:16px; height:16px; color:var(--maroon); }
.pcard-wish.wished svg { fill:var(--maroon); }
.pcard-atc {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:.7rem;
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--maroon);
  color:#fff;
  z-index:3;
  transform:translateY(100%);
  transition:transform .3s var(--ease);
}
.pcard:hover .pcard-atc { transform:translateY(0); }
/* Always show ATC on touch devices */
@media(hover:none) { .pcard-atc { transform:translateY(0); } }
.pcard-info { padding:1rem; }
.pcard-name { font-size:.82rem; font-weight:500; color:var(--dark); margin-bottom:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard-prices { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pcard-price { font-size:.88rem; font-weight:700; color:var(--maroon); }
.pcard-mrp { font-size:.78rem; color:var(--text-light); text-decoration:line-through; }
.pcard-save { font-size:.7rem; font-weight:600; color:#2a7a2a; }

/* ── CAROUSELS ───────────────────────────────────────────────── */
.carousel-wrap { position:relative; }
.car-viewport { overflow:hidden; }
.car-track {
  display:flex;
  gap:1.5rem;
  transition:transform .4s var(--ease);
}
.car-track .pcard { min-width:calc(25% - 1.125rem); flex-shrink:0; }
.car-track .pcard .pcard-img-wrap { aspect-ratio:2/1.6; }
.car-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:var(--dark);
  z-index:5;
  box-shadow:var(--shadow-sm);
  transition:background .2s, box-shadow .2s;
}
.car-arrow:hover { background:var(--cream-2); box-shadow:var(--shadow-md); }
.car-left { left:-20px; }
.car-right { right:-20px; }

/* ── LOOK SECTION ────────────────────────────────────────────── */
.look-section { padding:3.5rem 0; background:#fff; }
.look-inner { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:1200px; margin:0 auto; padding:0 2rem; align-items:center; }
.look-left { position:relative; }
.look-img-wrap { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:var(--cream-2); }
.look-img {
  position:absolute;
  inset:0;
  background:var(--maroon);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.look-img.active { opacity:1; }
.look-img-a { background:linear-gradient(135deg, var(--maroon), var(--gold)); }
.look-img-b { background:linear-gradient(135deg, var(--dark), var(--maroon)); }
.look-img-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:3; }
.ldot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background .2s;
}
.ldot.active { background:#fff; }
.look-right {}
.look-desc { font-size:.9rem; color:var(--text-light); line-height:1.7; margin-bottom:1.5rem; }
.look-products { margin-bottom:1.5rem; }
.look-prod-item {
  display:flex; align-items:center; gap:.75rem; padding:.6rem .5rem;
  border-radius:6px; cursor:pointer; transition:background .15s;
}
.look-prod-item:hover { background:rgba(123,26,26,.06); }
.look-prod-item:hover .look-prod-name { color:var(--maroon); }
.look-prod-thumb { width:44px; height:56px; border-radius:4px; flex-shrink:0; overflow:hidden; }
.look-prod-name { font-size:.82rem; font-weight:500; transition:color .15s; }
.look-prod-price { font-size:.78rem; color:var(--maroon); font-weight:600; margin-left:auto; }
/* Highlight flash when scrolled-to */
@keyframes lookHighlight { 0%,100%{box-shadow:none} 20%,80%{box-shadow:0 0 0 3px var(--maroon)} }
.pcard-highlight { animation:lookHighlight 1.8s ease; }
/* Look image linked product tag */
.look-img-linked { position:relative; }
.look-img-tag {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(28,10,0,.75));
  padding:.5rem .75rem .65rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.look-img-tag span { font-size:.72rem; color:#FFF; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.look-img-tag .lit-price { font-size:.68rem; color:#F5D78A; font-weight:700; }

/* ── FABRICS SECTION ─────────────────────────────────────────── */
.fabrics-section { padding:3.5rem 0; background:var(--dark); }
.fabrics-section .sec-tag { color:var(--gold); }
.fabrics-section .sec-title { color:#FFF; }
.fabrics-section .sec-sub { color:rgba(255,255,255,.65); font-size:.88rem; margin-top:.35rem; }
.fabrics-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.fab-card {
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
  background:var(--dark-2);
}
.fab-card:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,.3); }
.fab-img { height:160px; background:var(--maroon); }
.f-linen { background:linear-gradient(135deg, #8B7355, #C4A882); }
.f-cotton { background:linear-gradient(135deg, #4A6741, #7A9B6A); }
.f-mulmul { background:linear-gradient(135deg, #9B6B8A, #D4A0C0); }
.f-tissue { background:linear-gradient(135deg, #8B6914, #D4A520); }
.f-banarasi { background:linear-gradient(135deg, #7B1A1A, #C4922A); }
.f-maheshwari { background:linear-gradient(135deg, #1A4D22, #5A8B3A); }
.fab-info { padding:1.25rem; color:#fff; }
.fab-info h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:.25rem; }
.fab-info p { font-size:.78rem; opacity:.7; }

/* ── ABOUT SECTION ───────────────────────────────────────────── */
.about-section { padding:3.5rem 0; background:var(--cream-2); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; max-width:1200px; margin:0 auto; padding:0 2rem; align-items:center; }
.about-visual { position:relative; }
.about-img-main { aspect-ratio:3/4; border-radius:12px; background:linear-gradient(135deg, var(--maroon), var(--dark)); }
.about-badge {
  position:absolute;
  bottom:2rem;
  right:-1.5rem;
  background:#fff;
  border-radius:12px;
  padding:1.25rem 1.5rem;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.ab-num { display:block; font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--maroon); }
.ab-txt { font-size:.7rem; color:var(--text-light); line-height:1.4; }
.about-content {}
.about-p { font-size:.88rem; color:var(--text-light); margin-bottom:1rem; line-height:1.7; }
.about-feats { margin:2rem 0; display:flex; flex-direction:column; gap:1rem; }
.feat-item { display:flex; align-items:flex-start; gap:1rem; }
.feat-icon { font-size:1.5rem; flex-shrink:0; }
.feat-item strong { font-size:.85rem; display:block; margin-bottom:.15rem; }
.feat-item p { font-size:.78rem; color:var(--text-light); }

/* ── FAVOURITES ──────────────────────────────────────────────── */
.fav-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.fav-card {
  aspect-ratio:3/4;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  background:var(--cream-2);
  background-size:cover;
  background-position:center;
}
.fav-tissue { background:linear-gradient(135deg, #8B6914, #D4A520); }
.fav-new { background:linear-gradient(135deg, var(--maroon), var(--gold)); }
.fav-cotton { background:linear-gradient(135deg, #4A6741, #7A9B6A); }
.fav-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.5rem;
  color:#fff;
  transition:background .3s;
}
.fav-card:hover .fav-overlay { background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 60%); }
.fav-overlay h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
.fav-overlay span { font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin-top:.5rem; }

/* ── SEEN SECTION ────────────────────────────────────────────── */
.seen-section { padding:3rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.seen-logos { display:flex; justify-content:center; align-items:center; gap:3rem; flex-wrap:wrap; }
.seen-logo {
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-light);
  opacity:.5;
}

/* ── TRUST BAR ───────────────────────────────────────────────── */
.trust-bar { padding:2rem 0; background:#fff; border-top:1px solid var(--border); }
.trust-inner { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; max-width:1100px; margin:0 auto; padding:0 2rem; }
.trust-item { display:flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:500; color:var(--text); }
.trust-item svg { color:var(--maroon); flex-shrink:0; }

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.newsletter-section { padding:3.5rem 0; background:var(--dark); color:#fff; }
.nl-inner { display:grid; grid-template-columns:1.5fr 1fr; gap:4rem; max-width:1100px; margin:0 auto; padding:0 2rem; align-items:center; }
.nl-content h2 { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:.75rem; }
.nl-content > p { font-size:.88rem; opacity:.8; margin-bottom:1.5rem; line-height:1.6; }
.nl-form {}
.nl-row { display:flex; gap:.5rem; }
.nl-row input {
  flex:1;
  padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:4px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.88rem;
}
.nl-row input::placeholder { color:rgba(255,255,255,.5); }
.nl-row .btn-primary { flex-shrink:0; }
.nl-success { font-size:.82rem; margin-top:.75rem; color:var(--gold-light); }
.nl-note { font-size:.72rem; opacity:.5; margin-top:.5rem; }
.nl-social h3 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:1rem; }
.social-cta { display:block; font-size:.88rem; color:var(--gold-light); margin-bottom:1rem; }
.social-stats { display:flex; gap:2rem; }
.ssstat strong { display:block; font-size:1.2rem; font-weight:700; color:#fff; }
.ssstat span { font-size:.72rem; opacity:.6; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer { background:var(--dark-2); padding:4rem 0 0; color:var(--cream-2); }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; max-width:1200px; margin:0 auto; padding:0 2rem 3rem; }
.footer-brand .logo { display:block; margin-bottom:1rem; }
.footer-logo { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:#fff; }
.footer-brand p { font-size:.82rem; opacity:.7; line-height:1.6; margin-bottom:1.5rem; }
.footer-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.5rem; }
.footer-col a { font-size:.82rem; opacity:.7; transition:opacity .2s, color .2s; }
.footer-col a:hover { opacity:1; color:var(--gold-light); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.5rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  font-size:.75rem;
  opacity:.6;
}
.pay-badges { display:flex; gap:.75rem; }
.pay-badges span { padding:.25rem .6rem; border:1px solid rgba(255,255,255,.2); border-radius:3px; font-size:.65rem; font-weight:600; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1100px) {
  .product-grid { grid-template-columns:repeat(3, 1fr); }
  .car-track .pcard { min-width:calc(33.333% - 1rem); }
}
@media(max-width:900px) {
  .main-nav { display:none; }
  .hamburger { display:flex; }
  .header-main { padding:.75rem 1.25rem; }
  .cat-bar-inner { padding:.5rem 1.25rem; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .about-inner { grid-template-columns:1fr; gap:2rem; }
  /* Fix about badge overflow when stacked */
  .about-badge { right:auto; left:50%; transform:translateX(-50%); bottom:-1.5rem; }
  .look-inner { grid-template-columns:1fr; gap:2rem; }
  .nl-inner { grid-template-columns:1fr; gap:2rem; }
  .fabrics-grid { grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:768px) {
  .product-grid { grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .car-track .pcard { min-width:calc(50% - .75rem); }
  /* Landscape fav cards */
  .fav-grid { grid-template-columns:1fr; }
  .fav-card { aspect-ratio:16/7; }
  .stats-inner { gap:1.5rem; }
  .hero-section { height:70vh; }
  .slide-content { padding:2rem 5%; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  /* Sort bar full width on mobile */
  .sort-bar { justify-content:stretch; }
  .sort-select { width:100%; }
}
@media(max-width:480px) {
  .container { padding:0 1rem; }
  .header-main { padding:.75rem 1rem; }
  .cat-bar-inner { padding:.5rem 1rem; }
  .page-section { padding:2rem 0; }
  .hero-section { height:60vh; min-height:340px; }
  .car-left { left:-10px; }
  .car-right { right:-10px; }
  .trust-inner { gap:1.5rem; flex-direction:column; align-items:flex-start; padding:0 1.5rem; }
  .nl-row { flex-direction:column; }
  /* Larger touch targets for qty buttons */
  .qty-btn { width:38px; height:38px; font-size:1rem; }
  /* Toast above WA button */
  .toast { bottom:5.5rem; }
  /* Search modal full-width */
  .search-modal .search-inner { max-width:100%; padding:1.25rem; }
  /* Filter tabs: left-aligned scroll on narrow screens */
  .filter-tabs { justify-content:flex-start; flex-wrap:nowrap; }
  /* about badge reset for very small screens */
  .about-badge { position:relative; left:auto; transform:none; bottom:auto; margin:1.5rem auto 0; width:fit-content; }
}

/* ============================================================
   WHATSAPP FLOAT BUTTON
   ============================================================ */
.wa-float {
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:1500;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.45);
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.wa-float:hover {
  transform:scale(1.1);
  box-shadow:0 6px 24px rgba(37,211,102,.6);
}
.wa-tooltip {
  position:absolute;
  right:68px;
  background:#1C0A00;
  color:#fff;
  font-size:.75rem;
  font-weight:500;
  white-space:nowrap;
  padding:.35rem .75rem;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.wa-tooltip::after {
  content:'';
  position:absolute;
  top:50%;
  right:-6px;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:#1C0A00;
  border-right:0;
}
.wa-float:hover .wa-tooltip { opacity:1; }

/* ============================================================
   CHECKOUT MODAL
   ============================================================ */
.checkout-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.checkout-overlay.open { opacity:1; pointer-events:all; }

.checkout-modal {
  background:#fff;
  width:min(560px, 95vw);
  max-height:90vh;
  overflow-y:auto;
  border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  transform:translateY(20px);
  transition:transform .25s ease;
}
.checkout-overlay.open .checkout-modal { transform:translateY(0); }

.checkout-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.checkout-modal-head h3 { font-family:var(--serif); font-size:1.25rem; margin:0; }

/* Order summary */
.checkout-order-summary {
  background:#f9f6f2;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  font-size:.85rem;
}
.co-summary-items { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.5rem; }
.co-item-row { display:flex; justify-content:space-between; color:#555; }
.co-summary-total {
  display:flex; justify-content:space-between;
  font-weight:600; font-size:.95rem;
  padding-top:.5rem; border-top:1px solid var(--border);
}
.co-summary-shipping { margin-top:.4rem; color:#666; font-size:.78rem; }

/* Form */
#checkoutForm { padding:1.5rem; }
.checkout-section-label { font-family:var(--serif); font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 1rem; color:var(--maroon); }
.checkout-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkout-field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.checkout-field label { font-size:.8rem; font-weight:500; color:#444; }
.checkout-field input,
.checkout-field textarea {
  border:1px solid #ddd; border-radius:4px;
  padding:.6rem .8rem; font-size:.88rem; font-family:var(--sans);
  outline:none; transition:border-color .2s;
  color:var(--ink);
}
.checkout-field input:focus,
.checkout-field textarea:focus { border-color:var(--maroon); }
.checkout-field textarea { resize:vertical; }

.checkout-form-error {
  background:#fef2f2; color:#b91c1c;
  border:1px solid #fca5a5; border-radius:4px;
  padding:.65rem .9rem; font-size:.82rem;
  margin-bottom:1rem;
}

.checkout-secure-note {
  display:flex; align-items:center; gap:.4rem;
  font-size:.73rem; color:#888; margin-top:.75rem;
  justify-content:center; text-align:center;
}

/* Success */
.checkout-success {
  text-align:center;
  padding:3rem 2rem;
}
.checkout-success-icon {
  width:60px; height:60px; border-radius:50%;
  background:var(--maroon); color:#fff;
  font-size:1.8rem; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
}
.checkout-success h3 { font-family:var(--serif); font-size:1.5rem; margin:0 0 .75rem; }
.checkout-success p { color:#555; font-size:.9rem; margin-bottom:1.75rem; line-height:1.6; }

@media(max-width:480px) {
  .checkout-row { grid-template-columns:1fr; }
  .checkout-modal { border-radius:0; width:100vw; max-height:100dvh; margin:0; align-self:flex-end; }
  .checkout-overlay { align-items:flex-end; }
}

/* ── SORT BAR ────────────────────────────────────────────────── */
.sort-bar { display:flex; justify-content:flex-end; margin-bottom:1.5rem; }
.sort-select {
  padding:.4rem .8rem;
  font-size:.78rem;
  font-family:var(--font-body);
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
}
.sort-select:focus { outline:2px solid var(--maroon); outline-offset:2px; }

/* ── PRODUCT DETAIL MODAL ────────────────────────────────────── */
.pmodal-overlay {
  position:fixed; inset:0; z-index:3500;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.pmodal-overlay.open { opacity:1; pointer-events:auto; }
.pmodal {
  background:#fff;
  width:min(860px, 100%);
  max-height:90vh;
  border-radius:10px;
  box-shadow:var(--shadow-lg);
  display:grid;
  grid-template-columns:1fr 1fr;
  transform:translateY(20px);
  transition:transform .25s var(--ease);
  overflow:hidden;
}
.pmodal-overlay.open .pmodal { transform:translateY(0); }
.pmodal-img-side {
  position:relative;
  aspect-ratio:2/2.75;
  background:var(--cream-2);
  overflow:hidden;
}
.pmodal-img-side img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pmodal-close {
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--dark); z-index:2;
  transition:background .2s;
}
.pmodal-close:hover { background:#fff; }
.pmodal-close:focus-visible { outline:2px solid var(--maroon); outline-offset:2px; }
.pmodal-info-side {
  padding:2rem;
  display:flex; flex-direction:column; gap:1rem;
  overflow-y:auto;
}
.pmodal-cat { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-light); }
.pmodal-name { font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--dark); line-height:1.3; }
.pmodal-prices { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.pmodal-price { font-size:1.4rem; font-weight:700; color:var(--maroon); }
.pmodal-mrp { font-size:.9rem; color:var(--text-light); text-decoration:line-through; }
.pmodal-save { font-size:.78rem; font-weight:600; color:#2a7a2a; }
.pmodal-divider { height:1px; background:var(--border); }
.pmodal-features { display:flex; flex-direction:column; gap:.5rem; list-style:none; font-size:.8rem; color:var(--text-light); }
.pmodal-actions { display:flex; flex-direction:column; gap:.75rem; }
.pmodal-wish-row {
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--maroon); cursor:pointer;
  padding:.4rem 0; transition:opacity .2s;
}
.pmodal-wish-row:hover { opacity:.75; }
.pmodal-wish-row:focus-visible { outline:2px solid var(--maroon); outline-offset:2px; border-radius:2px; }
@media(max-width:640px) {
  .pmodal { grid-template-columns:1fr; }
  .pmodal-img-side { aspect-ratio:4/3; }
}

/* ── CHECKOUT PAYMENT NOTICE ─────────────────────────────────── */
.checkout-pay-notice {
  display:flex; align-items:flex-start; gap:.5rem;
  background:#fff8e1; border:1px solid #ffe082;
  color:#795548; font-size:.78rem; line-height:1.5;
  padding:.75rem 1rem; margin:.75rem 1.5rem 0;
  border-radius:4px;
}
.checkout-pay-notice svg { flex-shrink:0; margin-top:1px; color:#f59e0b; }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation:none; }
  .hero-slide { transition:none; }
  .pcard, .fav-card, .fab-card { transition:none; transform:none !important; }
}

/* ── REVIEWS SECTION ─────────────────────────────────────────── */
.reviews-section { background:var(--cream-2); }
.car-track .review-card { /* reset for review cards in carousel track */ }
.review-card {
  min-width:280px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
  width:calc(33.33% - 16px);
}
@media(max-width:1050px) { .review-card { width:calc(50% - 12px); } }
@media(max-width:700px)  { .review-card { width:calc(100% - 0px); min-width:0; } }
.review-stars { font-size:1rem; color:var(--gold); letter-spacing:.1em; }
.review-text {
  font-size:.88rem;
  line-height:1.7;
  color:var(--text);
  font-style:italic;
  flex:1;
}
.review-author {
  display:flex;
  flex-direction:column;
  gap:.15rem;
  font-size:.8rem;
}
.review-author strong { color:var(--dark); font-weight:600; }
.review-author span   { color:var(--text-light); }

/* ── RECENTLY VIEWED ─────────────────────────────────────────── */
#recentlyViewedSection { border-top:1px solid var(--border); }
.rv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.5rem;
}

/* ── CART UPSELL ─────────────────────────────────────────────── */
.cart-upsell {
  border-top:1px solid var(--border);
  padding-top:1.25rem;
  margin-top:1rem;
}
.cart-upsell-title {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-light);
  margin-bottom:.75rem;
}
.cart-upsell-grid { display:flex; gap:.75rem; }
.cart-upsell-card {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  cursor:pointer;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:box-shadow .2s;
}
.cart-upsell-card:hover { box-shadow:var(--shadow-sm); }
.cart-upsell-img {
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  flex-shrink:0;
}
.cart-upsell-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-upsell-info { padding:.5rem .6rem .6rem; display:flex; flex-direction:column; gap:.25rem; }
.cart-upsell-name { font-size:.72rem; font-weight:500; color:var(--text); line-height:1.4; }
.cart-upsell-price { font-size:.78rem; font-weight:700; color:var(--maroon); }
.cart-upsell-btn {
  align-self:flex-start;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--maroon);
  border:1px solid var(--maroon);
  border-radius:3px;
  padding:.2rem .5rem;
  transition:background .2s, color .2s;
}
.cart-upsell-btn:hover { background:var(--maroon); color:#fff; }

/* ── EMPTY STATE IMPROVEMENTS ────────────────────────────────── */
.panel-empty {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:3rem 1.5rem;
  text-align:center;
  color:var(--text-light);
}
.panel-empty svg { opacity:.35; }
.panel-empty p { font-size:.9rem; }
.panel-empty-sub { font-size:.8rem !important; color:var(--text-light); line-height:1.55; }
.panel-empty .btn-outline, .panel-empty .btn-primary {
  margin-top:.5rem;
  font-size:.78rem;
  padding:.55rem 1.25rem;
}

/* ── CARE INSTRUCTIONS ───────────────────────────────────────── */
.pmodal-care {
  border:1px solid var(--border);
  border-radius:6px;
  padding:.6rem .85rem;
  margin-top:.5rem;
  font-size:.82rem;
}
.pmodal-care summary {
  cursor:pointer;
  font-weight:600;
  font-size:.8rem;
  color:var(--text);
  letter-spacing:.03em;
  list-style:none;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.pmodal-care summary::-webkit-details-marker { display:none; }
.pmodal-care summary::before {
  content:'+';
  font-size:.9rem;
  color:var(--text-light);
  transition:transform .2s;
}
.pmodal-care[open] summary::before { content:'\2212'; }
.pmodal-care p {
  margin-top:.6rem;
  color:var(--text-light);
  line-height:1.6;
  font-size:.8rem;
}

/* ── STICKY MOBILE ATC BAR ───────────────────────────────────── */
.pmodal-sticky-bar {
  display:none; /* shown only on mobile via media query */
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:4000;
  background:#fff;
  border-top:1px solid var(--border);
  padding:.85rem 1.25rem;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
.pmodal-sticky-bar[aria-hidden="true"] { display:none !important; }
.psb-price {
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  color:var(--maroon);
}
.psb-atc { flex-shrink:0; }
@media(max-width:640px) {
  .pmodal-overlay.open .pmodal-sticky-bar:not([aria-hidden="true"]) { display:flex; }
  /* Shrink modal info side to not be hidden behind sticky bar */
  .pmodal-info-side { padding-bottom:70px; }
  /* Stack modal to single column on mobile */
  .pmodal { grid-template-columns:1fr; max-height:100dvh; border-radius:0; margin:0; align-self:flex-end; }
  .pmodal-img-side { aspect-ratio:16/9; }
  .pmodal-overlay { padding:0; align-items:flex-end; }
}

/* ── IMAGE ERROR FALLBACK ────────────────────────────────────── */
.pcard-img-wrap.img-err::after {
  content:'\1F9E3'; /* 🧣 */
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  opacity:.35;
}
.pcard-img-wrap { position:relative; }

