:root {
  --forest-deep: #214A3E;
  --forest-hover: #1B3D33;
  --gold: #D9A84C;
  --gold-muted: #97742B;
  --parchment: #F5F0E5;
  --parchment-deep: #EDE5D2;
  --hero-surface: #f2ebe1;
  --header-cream: #f7f5ec;
  --stone-border: #c8c2b3;
  --stone-fill: #e8e2d4;
  --plaque-border: #e0d8c9;
  --search-border: #c9c5b8;
  --ink: #1A1A18;
  --emerald-mid: #1A7165;
  --sage: #8EAF9A;
  --sage-soft: #C7D4CB;
  --rose-fault: #B5564A;

  --grain-dot-forest: rgba(33, 74, 62, 0.025);
  --grain-dot-ink: rgba(26, 26, 24, 0.018);
  --forest-055: rgba(33, 74, 62, 0.055);
  --forest-05: rgba(33, 74, 62, 0.05);
  --forest-07: rgba(33, 74, 62, 0.07);
  --forest-70: rgba(33, 74, 62, 0.7);
  --forest-12: rgba(33, 74, 62, 0.12);
  --sage-45: rgba(142, 175, 154, 0.45);
  --ink-08: rgba(26, 26, 24, 0.08);
  --ink-shadow-08: rgba(26, 26, 24, 0.08);
  --gold-15: rgba(217, 168, 76, 0.15);
  --rose-12: rgba(181, 86, 74, 0.12);
  --emerald-12: rgba(26, 113, 101, 0.12);
  --search-inset-shine: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --shadow-hero-frame: 0 18px 48px var(--forest-07);
  --shadow-search-dropdown: 0 22px 50px var(--ink-shadow-08);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
}

body {
  background-image:
    radial-gradient(var(--grain-dot-forest) 1px, transparent 1px),
    radial-gradient(var(--grain-dot-ink) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

.font-italiana { font-family: 'Italiana', serif; letter-spacing: 0.04em; }
.font-lora { font-family: 'Lora', Georgia, serif; }
.font-work { font-family: 'Work Sans', system-ui, sans-serif; }
.font-bangla { font-family: 'Noto Serif Bengali', serif; }

.text-forest { color: var(--forest-deep); }
.text-gold { color: var(--gold); }
.text-ink { color: var(--ink); }
.text-emerald-mid { color: var(--emerald-mid); }
.text-sage { color: var(--sage); }
.text-parchment { color: var(--parchment); }

.bg-forest { background-color: var(--forest-deep); }
.bg-gold { background-color: var(--gold); }
.bg-parchment { background-color: var(--parchment); }
.bg-parchment-deep { background-color: var(--parchment-deep); }
.bg-emerald-mid { background-color: var(--emerald-mid); }
.bg-sage { background-color: var(--sage); }

.border-sage { border-color: var(--sage); }
.border-sage-soft { border-color: var(--sage-soft); }
.border-forest { border-color: var(--forest-deep); }
.border-gold { border-color: var(--gold); }

/* Paper grain overlay for hero / large surfaces */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.13  0 0 0 0 0.29  0 0 0 0 0.24  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Editorial primary button */
.btn-primary {
  background: var(--forest-deep);
  color: var(--parchment);
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.25s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn-primary::after {
  content: '';
  position: absolute;
  left: 28px; right: 28px;
  bottom: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.btn-primary:hover::after { transform: scaleX(1); }
.btn-primary:hover { background: var(--forest-hover); }

.btn-ghost {
  background: transparent;
  color: var(--forest-deep);
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  padding: 12px 22px;
  border: 1px solid var(--sage);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-ghost:hover { border-color: var(--forest-deep); }

/* Product card */
.product-card {
  background: var(--parchment);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.product-card:hover {
  border-color: var(--sage);
  transform: translateY(-2px);
}
.product-card .img-wrap {
  background: var(--parchment-deep);
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--sage-soft);
}
.product-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.product-card:hover .img-wrap img { transform: scale(1.04); }

/* Tiny dot divider */
.dot-divider {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sage); margin: 0 10px; vertical-align: middle;
}

/* Pill chip */
.size-pill {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--sage);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  color: var(--ink);
}
.size-pill:hover { border-color: var(--forest-deep); }
.size-pill.active {
  background: var(--forest-deep);
  color: var(--parchment);
  border-color: var(--forest-deep);
}

/* Color swatch */
.swatch {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--ink-08);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}
.swatch.active::after {
  content: '';
  position: absolute; inset: -5px;
  border: 1px solid var(--forest-deep);
  border-radius: 999px;
}

/* Ghost SVG striped placeholder */
.placeholder-stripes {
  background-color: var(--parchment-deep);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--forest-05) 0,
    var(--forest-05) 1px,
    transparent 1px,
    transparent 16px
  );
}

/* Subtle line input */
.line-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sage);
  padding: 10px 4px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}
.line-input:focus { border-color: var(--forest-deep); }
.line-input::placeholder { color: var(--sage); font-style: normal; }

.field-input {
  background: var(--parchment);
  border: 1px solid var(--sage);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}
.field-input:focus { border-color: var(--forest-deep); }

/* Wishlist heart */
.heart-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--parchment);
  border: 1px solid var(--sage-soft);
  cursor: pointer;
  transition: all 0.25s ease;
}
.heart-btn:hover { border-color: var(--gold); }
.heart-btn.active { border-color: var(--gold); }
.heart-btn.active svg { fill: var(--gold); stroke: var(--gold); }

/* Cart bounce */
@keyframes cart-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.cart-bounce { animation: cart-bounce 0.5s ease; }

/* Toast */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast {
  position: fixed;
  top: 88px; left: 50%;
  transform: translateX(-50%);
  background: var(--forest-deep);
  color: var(--parchment);
  padding: 14px 22px;
  border-radius: 4px;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--gold);
  animation: toast-in 0.3s ease;
}

/* Page fade */
@keyframes page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-fade { animation: page-fade 0.5s ease both; }
.stagger > * { animation: page-fade 0.5s ease both; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Hero arabesque mark */
.arabesque {
  width: 56px; height: 1px;
  background: var(--sage);
  position: relative;
}
.arabesque::before, .arabesque::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--gold);
  top: -1.5px;
}
.arabesque::before { left: -2px; }
.arabesque::after { right: -2px; }

/* Drawer */
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.drawer { animation: slide-in-right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in 0.3s ease; }

/* Filter range track */
input[type="range"].gold-range {
  -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--sage-soft);
  outline: none; width: 100%;
}
input[type="range"].gold-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--parchment);
  box-shadow: 0 0 0 1px var(--gold);
  cursor: pointer;
}
input[type="range"].gold-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--parchment);
  cursor: pointer;
}

/* Tab underline */
.tab-link {
  position: relative;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
  color: var(--ink);
}
.tab-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s ease;
}
.tab-link.active::after, .tab-link:hover::after { transform: scaleX(1); }

/* Quantity stepper */
.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--sage);
  border-radius: 4px;
}
.qty-stepper button {
  width: 36px; height: 36px;
  background: transparent; border: none;
  cursor: pointer; color: var(--forest-deep);
  font-family: 'Work Sans', sans-serif;
  transition: background 0.2s ease;
}
.qty-stepper button:hover { background: var(--parchment-deep); }
.qty-stepper .count {
  min-width: 36px; text-align: center;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
}

/* Status badge */
.badge {
  display: inline-flex;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: 500;
}
.badge-pending { background: var(--gold-15); color: var(--gold-muted); }
.badge-delivered { background: var(--forest-12); color: var(--forest-deep); }
.badge-cancelled { background: var(--rose-12); color: var(--rose-fault); }
.badge-shipped { background: var(--emerald-12); color: var(--emerald-mid); }

/* Subtle hover-zoom for product image gallery */
.zoom-wrap { overflow: hidden; cursor: zoom-in; }
.zoom-wrap img { transition: transform 0.5s ease; }
.zoom-wrap:hover img { transform: scale(1.15); }

/* Hide scrollbars but keep scroll */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* checkbox + radio refined */
.refined-check {
  width: 14px; height: 14px;
  border: 1px solid var(--sage);
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--parchment);
}
.refined-check.checked {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
}
.refined-check.checked::after {
  content: ''; width: 4px; height: 8px;
  border-right: 1.5px solid var(--parchment);
  border-bottom: 1.5px solid var(--parchment);
  transform: rotate(45deg) translate(-1px, -1px);
}

.refined-radio {
  width: 16px; height: 16px;
  border: 1px solid var(--sage);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--parchment);
}
.refined-radio.checked { border-color: var(--forest-deep); }
.refined-radio.checked::after {
  content: ''; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--forest-deep);
}

/* Ornament divider */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--sage);
}
.ornament .line { flex: 1; height: 1px; background: var(--sage-soft); max-width: 80px; }
.ornament .diamond {
  width: 6px; height: 6px; transform: rotate(45deg);
  border: 1px solid var(--gold);
}