:root {
  --gold: #a65d32;
  --gold-soft: #e4c4a4;
  --gold-deep: #6e3c1f;
  --leaf: #4f5d2c;
  --leaf-soft: #8a9a62;
  --ink: #2a231c;
  --ink-soft: #3d3228;
  --ivory: #f7f1e6;
  --ivory-dark: #ebe3d2;
  --cream: #faf6ee;
  --muted: #7d7368;
  --line: rgba(79, 93, 44, 0.22);
  --shadow: 0 24px 60px rgba(42, 35, 28, 0.16);
  --radius: 18px;
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Outfit", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.announce {
  background: var(--ink);
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
}

.navbar-luxe {
  background: #f7f1e6;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.brand-logo {
  height: 96px;
  width: auto;
  max-width: min(240px, 62vw);
  object-fit: contain;
  object-position: left center;
  display: block;
}

.brand {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  color: var(--leaf) !important;
}

.navbar-brand.brand {
  padding: 0;
}

.navbar-brand.brand:hover,
.navbar-brand.brand:focus {
  color: var(--leaf) !important;
}

.nav-link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 8px 14px !important;
  position: relative;
}

.nav-link:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.nav-link:not(.dropdown-toggle):hover::after,
.nav-link:not(.dropdown-toggle).active::after {
  transform: scaleX(1);
}

.nav-primary {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
}

.nav-primary .nav-link {
  white-space: nowrap;
  padding: 8px 12px !important;
}

.nav-dropdown-luxe .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-dropdown-luxe .dropdown-toggle.active {
  color: var(--gold-deep) !important;
}

.dropdown-menu-luxe {
  margin-top: 0.65rem;
  padding: 0.65rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory);
  box-shadow: var(--shadow);
  min-width: 15rem;
  max-width: min(22rem, 92vw);
}

.dropdown-menu-luxe .dropdown-item {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.55rem 1.25rem;
  white-space: normal;
  line-height: 1.45;
}

.dropdown-menu-luxe .dropdown-item:hover,
.dropdown-menu-luxe .dropdown-item:focus {
  background: rgba(166, 93, 50, 0.1);
  color: var(--gold-deep);
}

.dropdown-menu-luxe .dropdown-item.active {
  background: rgba(79, 93, 44, 0.12);
  color: var(--leaf);
  font-weight: 500;
}

@media (max-width: 991.98px) {
  .nav-primary {
    flex-wrap: wrap;
    padding: 0.75rem 0 0.5rem;
    gap: 0.25rem;
  }

  .nav-primary .nav-link {
    padding: 10px 0 !important;
  }

  .dropdown-menu-luxe {
    position: static !important;
    transform: none !important;
    margin: 0.25rem 0 0.5rem;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 0.75rem;
    border-left: 1px solid var(--line);
  }

  .dropdown-menu-luxe .dropdown-item {
    padding-left: 0.75rem;
  }
}

.cart-pill {
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 6px 14px !important;
}

.cart-pill::after {
  display: none;
}

.auth-top {
  background: #f7f1e6;
  border-bottom: 1px solid var(--line);
}

.auth-top-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  justify-self: start;
  transition: color 0.25s ease;
}

.auth-back:hover {
  color: var(--gold-deep);
}

.auth-mark {
  justify-self: center;
  line-height: 0;
}

.auth-mark img {
  height: 56px;
  width: auto;
  max-width: min(180px, 42vw);
  object-fit: contain;
}

.auth-shell .section {
  padding-top: 2.5rem;
}

.hero {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
}

.hero-media-stack {
  position: absolute;
  inset: 0;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  will-change: transform, opacity;
  filter: saturate(1.18) contrast(1.06);
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-media.is-on {
  opacity: 1;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 80%, rgba(166, 93, 50, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(42, 35, 28, 0.08) 0%, rgba(42, 35, 28, 0.38) 52%, rgba(42, 35, 28, 0.78) 100%);
}

.hero-jaali {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='84' viewBox='0 0 72 84'%3E%3Cpath d='M36 4 L68 21 L68 63 L36 80 L4 63 L4 21 Z' fill='none' stroke='%23e8d5b5' stroke-width='0.7'/%3E%3Ccircle cx='36' cy='42' r='4.5' fill='none' stroke='%23c4a574' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 72px 84px;
  animation: jaali-shift 28s linear infinite;
}

@keyframes jaali-shift {
  from { background-position: 0 0; }
  to { background-position: 72px 84px; }
}

.hero-loom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(232, 213, 181, 0.16) 10px 11px),
    linear-gradient(180deg, transparent, rgba(12, 11, 9, 0.55));
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}

.hero-loom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(196, 165, 116, 0.18) 7px 8px);
  animation: weft 6s linear infinite;
}

@keyframes weft {
  from { transform: translateX(-12px); }
  to { transform: translateX(12px); }
}

.hero-frame {
  position: absolute;
  inset: 18px 18px 22px;
  z-index: 2;
  pointer-events: none;
}

.hero-zari {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(232, 213, 181, 0.35);
}

.hero-zari-draw,
.hero-zari-thread {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}

.hero.is-woven .hero-zari-draw {
  animation: embroider 2.4s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
}

.hero.is-woven .hero-zari-thread {
  stroke-dasharray: 3 9;
  animation: stitch-run 1.4s linear 0.4s infinite;
}

.hero-paisley {
  position: absolute;
  width: 54px;
  height: 80px;
  opacity: 0.72;
}

.hero-paisley-tl { top: 10px; left: 10px; }
.hero-paisley-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.hero-paisley-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.hero-paisley-br { bottom: 10px; right: 10px; transform: scale(-1); }

.hero-lotus {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 86px;
  height: 22px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 100%, #e8d5b5 3px, transparent 4px),
    radial-gradient(circle at 38% 70%, #c4a574 2px, transparent 3px),
    radial-gradient(circle at 62% 70%, #c4a574 2px, transparent 3px),
    linear-gradient(90deg, transparent, #e8d5b5, transparent);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 1px;
  background-repeat: no-repeat;
  background-position: center, center, center, center 70%;
}

@keyframes kenburns {
  from { transform: scale(1.08) translateY(0); }
  to { transform: scale(1.18) translateY(-2%); }
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 96px 0 40px;
  width: 100%;
}

.hero-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 14px;
  border: 1px solid rgba(232, 213, 181, 0.45);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: rgba(12, 11, 9, 0.42);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 6px rgba(138, 109, 59, 0.2);
}

.hero-stamp-mark {
  font-size: 16px;
  line-height: 1;
  color: var(--gold-soft);
}

.hero-stamp-en {
  margin-top: 8px;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 9ch;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(40px, 6.2vw, 76px);
  max-width: 14ch;
  line-height: 1.06;
}

.hero p {
  font-size: 16px;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}

.hero-crafts {
  list-style: none;
  margin: 0 20px 8px auto;
  padding: 8px 0 0;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-crafts li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(12, 11, 9, 0.42);
  border: 1px solid rgba(232, 213, 181, 0.28);
  backdrop-filter: blur(10px);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.hero-craft-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  border: 1px solid rgba(232, 213, 181, 0.35);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  font-size: 12px;
  flex-shrink: 0;
}

.hero-crafts strong {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.hero-crafts em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.craft-slider {
  margin-left: auto;
  max-width: 420px;
  position: relative;
}

.craft-stage {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid rgba(232, 213, 181, 0.35);
  background: rgba(12, 11, 9, 0.45);
  backdrop-filter: blur(12px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.craft-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px) scale(0.98);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s;
  pointer-events: none;
}

.craft-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.craft-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.craft-still,
.craft-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craft-still {
  z-index: 0;
}

.craft-film {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.45s ease;
  background: #120f0c;
}

.craft-slide.is-active.is-filming .craft-film {
  opacity: 1;
}

.craft-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(12, 11, 9, 0.78) 100%);
  pointer-events: none;
  z-index: 2;
}

.craft-slide-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 86px;
  z-index: 2;
  text-shadow: 0 8px 24px rgba(12, 11, 9, 0.55);
}

.craft-slide-copy span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold-soft);
}

.craft-slide-copy h3 {
  margin: 2px 0 0;
  font-size: 28px;
  color: #fff;
}

.craft-slide-copy p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.craft-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 4;
  background: rgba(232, 213, 181, 0.18);
}

.craft-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
}

.craft-slider.is-playing .craft-progress i {
  animation: craft-bar 5.2s linear infinite;
}

@keyframes craft-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.craft-play {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 5;
  border: 1px solid rgba(232, 213, 181, 0.45);
  background: rgba(12, 11, 9, 0.55);
  color: var(--gold-soft);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}

.craft-play.is-hidden {
  display: none;
}

.craft-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(232, 213, 181, 0.4);
  background: rgba(12, 11, 9, 0.35);
  color: var(--gold-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.craft-thumbs {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 0;
}

.craft-thumb {
  appearance: none;
  border: 1px solid rgba(232, 213, 181, 0.25);
  background: rgba(12, 11, 9, 0.4) center/cover no-repeat;
  padding: 0 0 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  overflow: hidden;
  min-height: 58px;
  display: flex;
  align-items: flex-end;
}

.craft-thumb em {
  display: block;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  background: linear-gradient(transparent, rgba(12, 11, 9, 0.85));
  color: #fff;
}

.craft-credit {
  margin: 8px 2px 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 213, 181, 0.7);
}

.craft-thumb .craft-motion {
  position: relative;
  height: 46px;
  display: block;
}

.craft-thumb.is-active {
  border-color: var(--gold);
  color: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.35);
}

/* Papier-mâché */
.craft-motion-mache {
  background:
    radial-gradient(circle at 70% 30%, rgba(196, 80, 70, 0.45), transparent 46%),
    linear-gradient(160deg, #3a221c, #1a1210);
}

.mg-bowl {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 22%;
  height: 42%;
  border: 2px solid rgba(232, 213, 181, 0.55);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.mg-sheet {
  position: absolute;
  left: 30%;
  width: 40%;
  height: 10px;
  background: #e8d5b5;
  opacity: 0.7;
  animation: sheet-fall 2.8s ease-in-out infinite;
}

.mg-sheet.s1 { animation-delay: 0s; }
.mg-sheet.s2 { animation-delay: 0.7s; background: #c4a574; }
.mg-sheet.s3 { animation-delay: 1.4s; background: #f6f1e8; }

.mg-flower {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: radial-gradient(circle, #c45046 30%, transparent 32%),
    radial-gradient(circle at 50% 0, #e8d5b5 18%, transparent 20%),
    radial-gradient(circle at 100% 50%, #e8d5b5 18%, transparent 20%),
    radial-gradient(circle at 50% 100%, #e8d5b5 18%, transparent 20%),
    radial-gradient(circle at 0 50%, #e8d5b5 18%, transparent 20%);
  animation: bloom 3.2s ease-in-out infinite;
}

.mg-brush {
  position: absolute;
  width: 46px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e8d5b5);
  top: 38%;
  left: 20%;
  transform-origin: left;
  animation: brush 2.6s ease-in-out infinite;
}

@keyframes sheet-fall {
  0% { top: 8%; opacity: 0; transform: rotate(-8deg); }
  40% { opacity: 0.85; }
  100% { top: 48%; opacity: 0; transform: rotate(6deg); }
}

@keyframes bloom {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

@keyframes brush {
  0% { transform: rotate(-18deg) scaleX(0.4); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(12deg) scaleX(1); opacity: 0; }
}

/* Needlework */
.craft-motion-needle {
  background:
    repeating-linear-gradient(90deg, rgba(246,241,232,.06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #2a241c, #14110e);
}

.mg-cloth { position: absolute; inset: 10% 8%; width: 84%; height: 70%; }

.mg-stitch {
  fill: none;
  stroke: #e8d5b5;
  stroke-width: 1.6;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: stitch-draw 3.4s linear infinite;
}

.mg-needle {
  position: absolute;
  width: 28px;
  height: 3px;
  background: linear-gradient(90deg, #fff, #c4a574 70%, transparent);
  top: 36%;
  left: 12%;
  animation: needle-run 3.4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(232,213,181,.8));
}

@keyframes stitch-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes needle-run {
  0% { transform: translate(0, 0) rotate(-18deg); }
  50% { transform: translate(110px, 18px) rotate(12deg); }
  100% { transform: translate(150px, 8px) rotate(-8deg); }
}

/* Zardozi */
.craft-motion-zardozi {
  background: radial-gradient(circle at 40% 40%, #3a2a16, #100e0b);
}

.mg-silk {
  position: absolute;
  inset: 18% 14%;
  background: linear-gradient(135deg, rgba(196,165,116,.2), transparent 40%, rgba(232,213,181,.15));
  border: 1px solid rgba(232, 213, 181, 0.2);
}

.mg-coil {
  position: absolute;
  left: 28%;
  top: 30%;
  width: 44%;
  height: 38%;
  border: 2px solid #e8d5b5;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(232, 213, 181, 0.35);
  animation: coil 2.2s ease-in-out infinite;
}

.mg-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff6e0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: spark 1.6s ease-in-out infinite;
}

.mg-spark.a { left: 30%; top: 28%; }
.mg-spark.b { left: 62%; top: 40%; animation-delay: .4s; }
.mg-spark.c { left: 48%; top: 58%; animation-delay: .8s; }

@keyframes coil {
  0%, 100% { transform: rotate(-8deg) scale(0.92); }
  50% { transform: rotate(10deg) scale(1.06); }
}

@keyframes spark {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Block print */
.craft-motion-block {
  background: #1c1612;
}

.mg-cloth-print {
  position: absolute;
  inset: 22% 12% 18%;
  background:
    radial-gradient(circle at 30% 40%, rgba(138, 48, 40, 0.0) 12px, transparent 13px),
    linear-gradient(#2a221c, #2a221c);
  animation: print-reveal 2.4s ease infinite;
}

.mg-stamp {
  position: absolute;
  left: 34%;
  width: 32%;
  height: 28%;
  background: #5a3a22;
  border: 2px solid #e8d5b5;
  animation: stamp 2.4s cubic-bezier(.2,1.4,.3,1) infinite;
}

.mg-ink {
  position: absolute;
  left: 36%;
  top: 48%;
  width: 28%;
  height: 22%;
  background: radial-gradient(circle, rgba(138, 48, 40, 0.7), transparent 70%);
  animation: ink 2.4s ease infinite;
}

@keyframes stamp {
  0%, 100% { top: 8%; }
  45% { top: 38%; }
}

@keyframes ink {
  0%, 40% { opacity: 0; transform: scale(0.4); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.5; }
}

@keyframes print-reveal {
  0%, 40% { background-size: 0 0, 100% 100%; }
  60%, 100% {
    background-image:
      radial-gradient(circle at 30% 40%, rgba(180, 70, 55, 0.85) 10px, transparent 11px),
      radial-gradient(circle at 60% 55%, rgba(180, 70, 55, 0.75) 8px, transparent 9px),
      linear-gradient(#2a221c, #2a221c);
  }
}

/* Loom */
.craft-motion-loom {
  background: #16120e;
}

.mg-warp {
  position: absolute;
  inset: 16% 10%;
  background: repeating-linear-gradient(90deg, rgba(232,213,181,.45) 0 2px, transparent 2px 10px);
}

.mg-weft {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 30%;
  height: 40%;
  background: repeating-linear-gradient(0deg, rgba(196,165,116,.5) 0 2px, transparent 2px 9px);
  animation: weft-lay 1.8s linear infinite;
}

.mg-shuttle {
  position: absolute;
  top: 46%;
  width: 36px;
  height: 8px;
  background: #e8d5b5;
  border-radius: 8px;
  animation: shuttle 1.8s ease-in-out infinite;
}

@keyframes weft-lay {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes shuttle {
  0% { left: 10%; }
  50% { left: calc(90% - 36px); }
  100% { left: 10%; }
}

/* Meenakari */
.craft-motion-meena {
  background: radial-gradient(circle at 50% 40%, #2a2010, #0e0c09);
}

.mg-cell {
  position: absolute;
  width: 28%;
  height: 28%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border: 1px solid rgba(232, 213, 181, 0.4);
  animation: fill-cell 3s ease-in-out infinite;
}

.mg-cell.c1 { left: 36%; top: 18%; background: rgba(180, 40, 50, 0.15); }
.mg-cell.c2 { left: 18%; top: 40%; background: rgba(40, 90, 70, 0.15); animation-delay: .4s; }
.mg-cell.c3 { left: 54%; top: 40%; background: rgba(40, 70, 140, 0.15); animation-delay: .8s; }
.mg-cell.c4 { left: 36%; top: 58%; background: rgba(196, 165, 116, 0.2); animation-delay: 1.2s; }

.mg-gem {
  position: absolute;
  left: 46%;
  top: 44%;
  width: 8%;
  height: 12%;
  background: #e8d5b5;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: spark 1.4s ease-in-out infinite;
}

@keyframes fill-cell {
  0%, 100% { filter: saturate(0.6); }
  50% { filter: saturate(1.4) brightness(1.2); }
}

.craft-thumb .mg-needle { animation-duration: 2s; left: 8%; }
.craft-thumb .mg-shuttle { width: 16px; height: 5px; top: 40%; }

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-gold:hover {
  background: var(--gold-soft);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(196, 165, 116, 0.35);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
}

.btn-ghost:hover {
  background: #fff;
  color: var(--ink);
}

.btn-outline-gold {
  border: 1px solid var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
}

.btn-outline-gold:hover {
  background: var(--ink);
  color: var(--gold-soft);
}

.section {
  padding: 88px 0;
}

.section-title {
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: 12px;
}

.piece-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(circle at 20% 20%, rgba(196,165,116,.12), transparent 40%),
    #fffdf9;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(12, 11, 9, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.piece-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(12, 11, 9, 0.14);
  border-color: var(--gold);
}

.piece-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 22px 18px 8px;
  overflow: hidden;
  background-color: #f3ece1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath fill='none' stroke='%23c4a574' stroke-opacity='0.28' stroke-width='0.8' d='M14 0l14 8v16L14 32 0 24V8zM14 32l14 8v16L14 64 0 56V40z'/%3E%3C/svg%3E");
}

.hex-photo {
  width: 86%;
  aspect-ratio: 0.92;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hex-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.piece-card:hover .hex-photo img,
.cat-tile:hover .hex-photo img,
.product-main:hover img {
  transform: scale(1.18);
}

.hex-outline {
  position: absolute;
  inset: 14px 22px 6px;
  z-index: 2;
  color: var(--gold);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(196,165,116,.35));
}

.hex-base {
  opacity: 0.45;
}

.hex-draw {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
}

.hex-thread {
  stroke-dasharray: 5 11;
  stroke-dashoffset: 0;
  opacity: 0;
}

.weave-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(232, 213, 181, 0.16) 5px 6px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(138, 109, 59, 0.1) 5px 6px);
  mix-blend-mode: soft-light;
  transition: opacity 0.5s ease;
}

.piece-card.is-crafting .weave-veil,
.cat-tile.is-crafting .weave-veil,
.piece-card.is-crafting .hex-photo::before,
.cat-tile.is-crafting .hex-photo::before {
  opacity: 1;
}

.piece-card.is-crafting .hex-thread,
.cat-tile.is-crafting .hex-thread {
  opacity: 1;
}

/* Silk · evening wear */
.craft-silk.is-crafting .hex-draw { animation: embroider 1.7s cubic-bezier(0.45, 0.05, 0.2, 1) forwards; }
.craft-silk.is-crafting .hex-thread { animation: stitch-run 1.15s linear infinite; }
.craft-silk.is-crafting .weave-veil { animation: loom-shift 1.8s ease-in-out; }

/* Jewelry · zardozi */
.craft-jewel.is-crafting .hex-draw { stroke-dashoffset: 0; animation: zari-pulse 1.2s ease-in-out; }
.craft-jewel.is-crafting .hex-thread { stroke-dasharray: 1 14; animation: sparkle-dash 0.7s linear infinite; }
.craft-jewel.is-crafting .hex-outline { filter: drop-shadow(0 0 14px rgba(232,213,181,.85)); }
.craft-jewel.is-crafting .hex-photo img { animation: gild 1.4s ease; }

/* Bags · leather tooling */
.craft-leather.is-crafting .hex-draw { stroke-dashoffset: 0; animation: block-stamp 0.7s cubic-bezier(.2,1.4,.3,1); }
.craft-leather.is-crafting .hex-thread { opacity: 0; }
.craft-leather.is-crafting .hex-outline { animation: block-press 0.7s cubic-bezier(.2,1.4,.3,1); }
.craft-leather.is-crafting .weave-veil { animation: print-ink 1.1s ease; }

/* Fragrance · attar mist */
.craft-scent.is-crafting .hex-draw { animation: embroider 1.3s ease forwards; }
.craft-scent.is-crafting .hex-thread { stroke-dasharray: 2 10; animation: sparkle-dash 1.1s linear infinite; }
.craft-scent.is-crafting .weave-veil { animation: mist-rise 2s ease; }
.craft-scent.is-crafting .hex-photo img { animation: scent-bloom 1.8s ease; }

@keyframes embroider {
  to { stroke-dashoffset: 0; }
}

@keyframes embroider-back {
  from { stroke-dashoffset: -720; }
  to { stroke-dashoffset: 0; }
}

@keyframes stitch-run {
  to { stroke-dashoffset: -80; }
}

@keyframes stitch-back {
  to { stroke-dashoffset: 64; }
}

@keyframes loom-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 18px 0, 0 18px; }
}

@keyframes loom-cross {
  from { background-position: 0 0, 0 0; }
  to { background-position: -16px 16px, 16px -16px; }
}

@keyframes thread-wobble {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.4deg) scale(1.02); }
}

@keyframes zari-pulse {
  0%, 100% { opacity: .55; stroke-width: 1.6; }
  50% { opacity: 1; stroke-width: 3.2; }
}

@keyframes sparkle-dash {
  to { stroke-dashoffset: -30; }
}

@keyframes gild {
  0% { filter: saturate(1); }
  50% { filter: saturate(1.25) contrast(1.08); }
  100% { filter: saturate(1); }
}

@keyframes block-stamp {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes block-press {
  0% { transform: scale(0.82) rotate(-6deg); opacity: 0; }
  70% { transform: scale(1.04) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes print-ink {
  0% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ikat-shift {
  from { background-position: -24px 0, 0 24px; }
  to { background-position: 24px 0, 0 -24px; }
}

@keyframes mist-rise {
  from { opacity: 0; background-position: 0 24px; filter: blur(0); }
  to { opacity: 1; background-position: 0 -18px; }
}

@keyframes scent-bloom {
  0% { transform: scale(1.08); filter: saturate(1); }
  50% { transform: scale(1.14); filter: saturate(1.2) brightness(1.06); }
  100% { transform: scale(1.1); filter: saturate(1); }
}

.hex-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 40%);
  transition: opacity .4s ease;
}

.piece-card.is-crafting .hex-photo::before,
.cat-tile.is-crafting .hex-photo::before {
  opacity: 1;
}

.piece-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(12, 11, 9, 0.82);
  color: var(--gold-soft);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
}

.piece-cta {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  z-index: 3;
  text-align: center;
  background: rgba(246, 241, 232, 0.95);
  color: var(--ink);
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  padding: 11px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.piece-card:hover .piece-cta {
  opacity: 1;
  transform: none;
}

.piece-meta {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.piece-craft {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.piece-cat {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.piece-meta h4 {
  font-size: 24px;
  margin: 0;
  line-height: 1.2;
}

.piece-price {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
}

.piece-price s {
  color: var(--muted);
  font-size: 13px;
}

.price {
  color: var(--gold-deep);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.compare {
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 8px;
  font-size: 13px;
}

.cat-tile {
  position: relative;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 22px;
  min-height: 420px;
  color: #fff;
  border: 1px solid var(--line);
  background-color: #1a1814;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath fill='none' stroke='%23c4a574' stroke-opacity='0.22' stroke-width='0.8' d='M14 0l14 8v16L14 32 0 24V8zM14 32l14 8v16L14 64 0 56V40z'/%3E%3C/svg%3E");
  box-shadow: 0 16px 36px rgba(12, 11, 9, 0.12);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  padding: 24px 16px 22px;
}

.cat-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 50px rgba(12, 11, 9, 0.18);
}

.cat-index {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  color: rgba(232, 213, 181, .35);
}

.cat-hex {
  width: 78%;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}

.cat-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12,11,9,.72) 100%);
}

.cat-hex-outline {
  inset: 18px 28px 88px;
  color: var(--gold-soft);
}

.cat-tile .copy {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.cat-tile h3 {
  font-size: 30px;
  margin-bottom: 6px;
}

.cat-tile p {
  font-size: 13px;
  color: rgba(255,255,255,.78);
  margin-bottom: 12px;
}

.cat-link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.story {
  background: var(--ink);
  color: var(--ivory);
}

.story img {
  border-radius: var(--radius);
  width: 100%;
  height: 520px;
  object-fit: cover;
  animation: floatZoom 10s ease-in-out infinite alternate;
}

@keyframes floatZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.page-hero {
  height: 42vh;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,11,9,.2), rgba(12,11,9,.75));
}

.page-hero .inner {
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}

.product-main {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

.product-main img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  transition: transform 0.8s ease;
  cursor: zoom-in;
}

.product-main.zoomed img {
  transform: scale(1.45);
  cursor: zoom-out;
}

.store-body {
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(107, 45, 60, 0.06), transparent 50%),
    radial-gradient(900px 400px at 100% 0%, rgba(28, 74, 74, 0.07), transparent 46%),
    var(--cream);
}

.devanagari-accent {
  font-family: "Tiro Devanagari Hindi", "Cormorant Garamond", serif;
  letter-spacing: 0.12em;
}

.page-veil {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 2000;
  animation: veilOut 1.1s ease forwards;
  pointer-events: none;
}

@keyframes veilOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.cursor-glow {
  position: fixed;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(166,93,50,.18), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.announce {
  overflow: hidden;
}

.announce-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(232,213,181,.7), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(196,165,116,.5), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 85% 75%, rgba(196,165,116,.45), transparent);
  animation: drift 12s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translateY(0); opacity: .7; }
  to { transform: translateY(-18px); opacity: 1; }
}

.btn-gold {
  position: relative;
  overflow: hidden;
}

.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.4s ease-in-out infinite;
}

@keyframes shine {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

.city-marquee {
  background: var(--ink);
  color: var(--gold-soft);
  overflow: hidden;
  border-top: 1px solid rgba(196,165,116,.2);
  border-bottom: 1px solid rgba(196,165,116,.2);
  padding: 14px 0;
}

.city-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 22s linear infinite;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.lotus-divider {
  width: 120px;
  height: 18px;
  margin: 0 auto 18px;
  background:
    radial-gradient(circle at 50% 100%, var(--gold) 3px, transparent 4px),
    linear-gradient(90deg, transparent, var(--gold), transparent);
  background-size: 100% 100%, 100% 1px;
  background-repeat: no-repeat;
  background-position: center, center;
}

.world-card {
  border-radius: 24px;
  padding: 42px 38px 36px;
  min-height: 300px;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(12, 11, 9, 0.06);
  transition: transform .5s ease, box-shadow .5s ease;
}

.world-ornament {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 54px;
  height: 60px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  opacity: .9;
}

.world-ornament::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #f6f1e8;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.world-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.world-east {
  background:
    linear-gradient(160deg, rgba(107,45,60,.12), rgba(246,241,232,.9)),
    var(--ivory);
}

.world-west {
  background:
    linear-gradient(160deg, rgba(28,74,74,.14), rgba(246,241,232,.9)),
    var(--ivory);
}

.world-label {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.world-card h3 {
  font-size: 36px;
  margin-bottom: 12px;
}

.jaali-line {
  height: 18px;
  background-image: radial-gradient(circle at 8px 8px, rgba(196,165,116,.55) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: .7;
}

.story-frame {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}

.story-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(196,165,116,.45);
  pointer-events: none;
}

.piece-card,
.cat-tile,
.tilt-card {
  transform-style: preserve-3d;
}

.cat-tile .copy {
  transform: translateY(8px);
  transition: transform .45s ease;
}

.cat-tile:hover .copy {
  transform: translateY(0);
}

.origin-pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

@media (hover: none) {
  .piece-cta {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-veil, .announce-track, .city-track, .hero-media, .hero-particles, .btn-gold::after,
  .hex-draw, .hex-thread, .weave-veil, .hero-jaali, .hero-loom::after, .hero-zari-draw, .hero-zari-thread,
  .craft-progress i, .mg-sheet, .mg-flower, .mg-brush, .mg-stitch, .mg-needle, .mg-coil, .mg-spark,
  .mg-stamp, .mg-ink, .mg-weft, .mg-shuttle, .mg-cell, .mg-gem, .craft-slide {
    animation: none !important;
    transition: none !important;
  }
  .hex-draw, .hero-zari-draw, .mg-stitch { stroke-dashoffset: 0; }
  .hex-thread { opacity: 1; }
}

@media (max-width: 768px) {
  .cursor-glow { display: none; }
}

.qty-box {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.qty-box button,
.qty-box input {
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  text-align: center;
}

.form-luxe .form-control,
.form-luxe .form-select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

.form-luxe .form-control:focus,
.form-luxe .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 165, 116, 0.18);
}

.footer-luxe {
  background: var(--ink);
  color: var(--ivory);
  padding: 72px 0 28px;
}

.footer-logo-link { display: inline-block; }

.footer-logo {
  width: min(200px, 100%);
  height: auto;
  margin-bottom: 16px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

.footer-luxe a {
  color: var(--gold-soft);
}

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }
.delay-4 { animation-delay: 0.48s; }
.delay-5 { animation-delay: 0.6s; }

@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.alert-luxe {
  border: 0;
  border-radius: 14px;
}

.badge-gold {
  background: var(--gold);
  color: var(--ink);
  letter-spacing: 0.12em;
  font-size: 10px;
  text-transform: uppercase;
}

.table thead th {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 768px) {
  .hero { min-height: 86vh; }
  .brand-logo { height: 70px; }
  .hero-frame { inset: 10px 10px 14px; }
  .hero-paisley { width: 36px; height: 54px; }
  .hero-stamp { width: 96px; height: 96px; }
  .hero-copy { padding: 96px 0 40px; }
  .hero-crafts { margin-left: 0; max-width: none; }
  .craft-slider { max-width: none; margin: 12px 0 0; }
  .craft-stage { height: 280px; }
  .craft-thumbs { grid-template-columns: repeat(3, 1fr); }
  .craft-thumb em { display: none; }
  .product-main img { height: 420px; }
  .city-track { font-size: 16px; letter-spacing: 0.16em; gap: 32px; }
}

/* Gallery, checkout, and stacked tables on small screens */
.product-thumb {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  width: 72px;
  height: 72px;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumb.is-active {
  outline: 2px solid #b08d57;
  outline-offset: 1px;
}

.order-steps .order-step {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: #f1ede6;
  color: #6b6257;
  font-size: 0.85rem;
}

.order-steps .order-step.done {
  background: #b08d57;
  color: #fff;
}

.pay-option {
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.badge-pending_payment {
  background: #fff3cd;
  color: #7a5b00;
}

@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack tr {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
  }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.25rem 0;
    text-align: right !important;
  }
  .table-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: #6b6257;
  }
  .summary-card { position: static !important; }
  .w-md-auto { width: 100% !important; }
}

@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}

.cart-thumb {
  width: 110px;
  height: 130px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .cart-line {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .cart-thumb { width: 84px; height: 100px; }
  .cart-line h4 { font-size: 1.05rem; }
  .order-steps .order-step { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
  .page-hero h1 { font-size: 2rem; }
  .btn-lg { width: 100%; }
}