/* AURIUM — 2026 Quiet Luxury Atelier
   Warm cream, matte charcoal, burnished gold.
   Satin glass, tactile micro-grain, kinetic typography. */

:root {
  --cream: #F5F0EB;
  --charcoal: #1A1A1A;
  --gold: #B8965E;
  --gold-muted: #A8843C;
  --gold-deep: #7A5C1F;
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A4A;
  --surface: #F8F6F2;
  --border: #E8E3DA;
  --panel: rgba(255, 255, 255, 0.9);
  --bg: #F5F0EB;
  --bg2: #EFE8E0;
  --stroke: rgba(26, 26, 26, 0.12);
  --stroke-soft: rgba(26, 26, 26, 0.08);
  --ink: #1A1A1A;
  --brown: #4A3A2E;
  --brown-soft: #7A6A5C;
  --r: 12px;
  --serif: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", -apple-system, sans-serif;
  --mono: "SF Mono", "Fira Code", "Courier New", monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--brown);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* ── 2026 Film Grain & Texture ────────────────────────────── */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.glass {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* ── Top Bar ──────────────────────────────────────────────── */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding-top: calc(12px + var(--safe-t));
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  padding-bottom: 10px;
  background: rgba(245, 240, 235, 0.98);
  border-bottom: 1px solid var(--stroke-soft);
}

.brand {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.3em;
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  flex: 1;
}

.brand span {
  color: var(--gold-deep);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--brown);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.icon-btn:active {
  transform: scale(0.92);
  background: var(--stroke-soft);
}

/* 2026 Currency Pill Switcher */
.curr-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(168, 132, 60, 0.35);
  border-radius: 999px;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-deep);
  cursor: pointer;
  transition: all 0.15s ease;
}

.curr-pill:active {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

.curr-arrow {
  font-size: 11px;
  opacity: 0.7;
}

.gold-seal-btn {
  color: var(--gold-deep);
  font-size: 16px;
  border: 1px solid rgba(168, 132, 60, 0.25);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.6);
}

.vip-btn {
  color: var(--gold-deep);
  font-size: 15px;
  border: 1px solid rgba(168, 132, 60, 0.3);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: rgba(201, 169, 110, 0.1);
}

/* ── Screens Container ────────────────────────────────────── */
#screens {
  flex: 1;
  padding: 8px 16px calc(96px + var(--safe-b));
}

.screen {
  display: none;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Typography & Headers ─────────────────────────────────── */
.sec-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  margin: 22px 2px 10px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.sec-subtitle {
  font-size: 13px;
  color: var(--brown-soft);
  margin: -6px 2px 14px;
  letter-spacing: 0.02em;
}

.cat-header {
  margin-top: 6px;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  padding: 32px 16px;
  margin: 10px 0 18px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: transparent;
  border: none;
}

.hero:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.hero-tag {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--gold-deep);
  text-transform: uppercase;
  font-weight: 600;
}

.hero h1 {
  font-family: var(--serif);
  margin: 14px 0 8px;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.hero h1 em {
  color: var(--gold-deep);
  font-style: italic;
}

.hero p {
  color: var(--brown-soft);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.02em;
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.hero-badge {
  font-size: 11px;
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Quick Categories Row ─────────────────────────────────── */
.quick-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}

.quick-row::-webkit-scrollbar {
  display: none;
}

.quick-row button {
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--brown);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-row button:active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ── Product Cards & Horizontal Scrolls ───────────────────── */
.hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}

.hscroll::-webkit-scrollbar {
  display: none;
}

.card {
  flex: 0 0 164px;
  background: #FFFFFF;
  border: none;
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card:active {
  transform: scale(0.98);
}

.card img {
  width: 100%;
  aspect-ratio: 3/4;
  height: auto;
  object-fit: cover;
  display: block;
  background: var(--bg2);
}

.card .info {
  padding: 10px 12px 12px;
}

.card .t {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  height: 2.7em;
  overflow: hidden;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.card .p {
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 13px;
  margin-top: 5px;
  font-family: var(--sans);
}

.card .was {
  color: var(--brown-soft);
  text-decoration: line-through;
  font-size: 13px;
  margin-left: 6px;
}

.card .off {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}

.card .low {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

.card .wl {
  position: absolute;
  bottom: 56px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: rgba(245, 240, 235, 0.95);
  color: var(--charcoal);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.card .wl.active {
  color: var(--gold-deep);
  font-weight: bold;
}

.card .wl:active {
  transform: scale(0.85);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grid .card {
  flex: none;
}

/* ── Search & Filter Chips ────────────────────────────────── */
.search-wrap {
  position: sticky;
  top: 56px;
  z-index: 40;
  padding: 12px;
  margin: 6px 0 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: var(--r);
}

#searchInput {
  width: 100%;
  background: rgba(26, 26, 26, 0.04);
  border: none;
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  font-family: var(--sans);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: background 0.2s ease;
}

#searchInput::placeholder {
  color: var(--brown-soft);
}

#searchInput:focus {
  background: rgba(26, 26, 26, 0.08);
}

.chips {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  color: var(--brown-soft);
  font-size: 13px;
  background: rgba(26, 26, 26, 0.04);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.chip:active {
  transform: scale(0.95);
}

.chip.on {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

/* ── Categories Collection Grid ───────────────────────────── */
.cat-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.cat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: var(--r);
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.cat-tile:active {
  transform: scale(0.98);
  border-color: var(--gold-deep);
}

.cat-tile-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cat-tile-icon {
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border-radius: 12px;
  color: var(--gold-deep);
}

.cat-tile-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.cat-tile-desc {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 2px;
}

.cat-tile-arrow {
  font-size: 16px;
  color: var(--gold-deep);
}

/* ── Outfits / Complete Look Board ────────────────────────── */
.outfit-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 6px;
}

.outfit-card {
  padding: 18px;
  border-radius: var(--r);
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
}

.outfit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.outfit-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.outfit-desc {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 3px;
}

.outfit-savings-badge {
  background: var(--bg2);
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.outfit-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.outfit-row::-webkit-scrollbar {
  display: none;
}

.outfit-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke-soft);
}

.outfit-total-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.outfit-total-price small {
  display: block;
  font-size: 13px;
  color: var(--brown-soft);
  font-weight: 400;
}

.btn-bundle {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}

.btn-bundle:active {
  opacity: 0.85;
}

/* ── Product Sheet & Gallery ──────────────────────────────── */
.gallery {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--stroke-soft);
  background: #FFFFFF;
}

.gallery .g-main {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  background: var(--bg2);
  cursor: zoom-in;
}

.gallery-zoom-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(26, 26, 26, 0.7);
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.g-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.g-thumbs::-webkit-scrollbar {
  display: none;
}

.g-thumbs img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.5;
  border: 1px solid transparent;
  cursor: pointer;
}

.g-thumbs img.on {
  opacity: 1;
  border-color: var(--gold-deep);
}

.p-info {
  padding: 16px 4px;
}

.p-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.p-price {
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  margin: 10px 0 4px;
}

.p-was {
  color: var(--brown-soft);
  text-decoration: line-through;
  font-size: 15px;
  margin-left: 8px;
}

.p-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.badge-pill {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--stroke);
  color: var(--brown);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-pill.hot {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

.badge-pill.discount {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
  background: rgba(201, 169, 110, 0.12);
  font-weight: 600;
}

.p-meta {
  color: var(--brown-soft);
  font-size: 13px;
  margin: 8px 0;
  line-height: 1.6;
}

/* Provenance Ledger Box */
.provenance-box {
  margin: 16px 0;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
}

.prov-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.prov-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

.btn-passport {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.prov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}

.prov-item span {
  color: var(--brown-soft);
  display: block;
  font-size: 11px;
}

.prov-item b {
  color: var(--ink);
  font-weight: 500;
}

/* Variants & Size Guide Button */
.variant-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 8px;
}

.variant-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.btn-sizeguide {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.variants {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.variant {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--brown);
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.variant.on {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.variant.out {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Verified Reviews Section */
.p-reviews {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke-soft);
}

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reviews-head h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brown-soft);
}

.review-stars {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 2px;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-card {
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
  font-size: 13px;
}

.review-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.verified-badge {
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 3px;
}

.review-text {
  color: var(--brown);
  line-height: 1.5;
}

.btn-all-reviews {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  background: none;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--brown);
  font-size: 13px;
  margin-top: 10px;
  cursor: pointer;
}

/* Complete The Look / Related Rows */
.closer {
  margin-top: 20px;
}

.closer .mini {
  font-size: 11px;
  color: var(--gold-deep);
  margin: 16px 0 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

.closer .row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.closer .card {
  flex: 0 0 126px;
}

.closer .card img {
  height: 128px;
}

/* ── Cart Screen ──────────────────────────────────────────── */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  align-items: center;
}

.cart-item img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.cart-item .ci-info {
  flex: 1;
}

.cart-item .ci-t {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.cart-item .ci-meta {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 2px;
}

.cart-item .ci-p {
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
}

.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: none;
  color: var(--brown);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty button:active {
  background: var(--stroke-soft);
}

.qty .del-btn {
  color: var(--brown-soft);
  margin-left: 4px;
  font-size: 13px;
}

.totals {
  margin: 16px 2px;
  padding: 16px;
  font-size: 13px;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r);
}

.totals .line {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
  color: var(--brown-soft);
}

.totals .line.total {
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  border-top: 1px solid var(--stroke);
  padding-top: 12px;
  margin-top: 10px;
}

.totals .line.free {
  color: var(--gold-deep);
}

/* ── Checkout Screen ──────────────────────────────────────── */
.sec-box {
  margin: 14px 0;
}

.box-title {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  margin: 8px 0;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form input {
  background: var(--bg);
  border: 1px solid var(--stroke);
  color: var(--ink);
  border-radius: 10px;
  padding: 13px;
  font-size: 13px;
  outline: none;
  font-family: var(--sans);
}

.form input::placeholder {
  color: var(--brown-soft);
}

.form input:focus {
  border-color: var(--gold-deep);
}

.promo-wrap {
  display: flex;
  gap: 8px;
}

.promo-wrap input {
  flex: 1;
}

.btn-subtle {
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--bg2);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

/* 2026 Packaging & Presentation */
.packaging-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.packaging-card {
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.packaging-card.on {
  border-color: var(--gold-deep);
  background: rgba(201, 169, 110, 0.05);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

.pkg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.pkg-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.pkg-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.08em;
}

.pkg-desc {
  font-size: 13px;
  color: var(--brown-soft);
  line-height: 1.45;
}

/* Shipping Tiers */
.shipping-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shipping-tier-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shipping-tier-card.on {
  border-color: var(--gold-deep);
  background: rgba(201, 169, 110, 0.05);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

.tier-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tier-desc {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 2px;
}

.tier-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-deep);
  text-align: right;
}

.tier-badge {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tier-badge.ddp {
  background: var(--gold);
  color: var(--ink);
}

.tier-badge.ddu {
  background: var(--bg2);
  color: var(--brown-soft);
  border: 1px solid var(--stroke);
}

/* DDP Landed Cost Accordion */
.landed-cost-accordion {
  margin: 14px 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
}

.accordion-header {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke-soft);
}

.acc-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.gold-seal {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.accordion-body {
  padding: 14px 16px;
  font-size: 13px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  margin: 7px 0;
  color: var(--brown-soft);
}

.cost-row small {
  font-size: 11px;
  opacity: 0.85;
}

.cost-row.total {
  border-top: 1px solid var(--stroke);
  padding-top: 10px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 15px;
}

.cost-row .gold {
  color: var(--gold-deep);
  font-weight: 500;
}

.guarantee-badge {
  margin-top: 12px;
  padding: 10px;
  background: rgba(201, 169, 110, 0.08);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 8px;
  font-size: 13px;
  color: var(--brown);
  line-height: 1.5;
}

.guarantee-badge b {
  color: var(--gold-deep);
}

/* Payment Method Cards */
.pay-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 9px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pay-method:active {
  border-color: var(--gold-deep);
}

.pay-method small {
  display: block;
  color: var(--brown-soft);
  font-weight: 400;
  font-size: 13px;
  margin-top: 3px;
}

/* In-App Payment Sheet (Invoice Box) */
#invoiceBox {
  padding: 20px;
  margin-top: 14px;
  text-align: center;
  background: #FFFFFF;
  border-radius: var(--r);
  border: 1px solid var(--stroke-soft);
}

.invoice-header {
  margin-bottom: 14px;
}

.invoice-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}

.qr-box-wrap {
  margin: 16px auto;
  width: 180px;
  height: 180px;
  background: #FFFFFF;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.qr-box-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--brown-soft);
  margin: 6px 0;
}

.inv-row b {
  color: var(--ink);
}

.address-box {
  background: var(--bg2);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
  margin: 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copy-btn {
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.timer-pill {
  display: inline-block;
  background: rgba(201, 169, 110, 0.15);
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 6px 0 12px;
}

.polling-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brown-soft);
  margin: 12px 0;
}

.polling-ring {
  width: 14px;
  height: 14px;
  border: 2px solid var(--stroke);
  border-top-color: var(--gold-deep);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Orders Screen ────────────────────────────────────────── */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.order-card {
  padding: 16px;
  border-radius: var(--r);
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.order-card:active {
  transform: scale(0.98);
}

.order-card .oh {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.order-card .ost {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-card .prog {
  height: 3px;
  border-radius: 2px;
  background: var(--bg2);
  margin: 12px 0 8px;
  overflow: hidden;
}

.order-card .prog i {
  display: block;
  height: 100%;
  background: var(--gold-deep);
}

.order-card .oi {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 4px;
}

.order-card .oi b {
  color: var(--gold-deep);
}

/* ── Order Detail & Milestone Timeline ────────────────────── */
.order-detail-card {
  padding: 20px;
  border-radius: var(--r);
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
}

.od-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-soft);
}

.od-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

.od-meta {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 4px;
}

.eta-banner {
  background: var(--surface);
  border: 1px solid rgba(201, 169, 110, 0.4);
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.eta-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

.eta-val {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 3px;
}

.tracking-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 16px 0;
  padding-left: 28px;
}

.tracking-timeline:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.milestone {
  position: relative;
  margin-bottom: 22px;
}

.milestone:last-child {
  margin-bottom: 0;
}

.milestone-icon {
  position: absolute;
  left: -28px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--bg2);
  border: 1px solid var(--stroke);
  color: var(--brown-soft);
}

.milestone.completed .milestone-icon {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #FFFFFF;
}

.milestone.active .milestone-icon {
  background: var(--ink);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.25);
}

.milestone-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.milestone-desc {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 2px;
}

/* ── Account Screen ───────────────────────────────────────── */
.acct {
  padding: 18px;
  font-size: 13px;
  line-height: 1.8;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r);
}

.acct b {
  color: var(--ink);
}

/* ── 2026 VIP Clientele Keycard ───────────────────────────── */
.vip-sheet {
  max-width: 440px;
  margin: 0 auto;
}

.vip-card {
  position: relative;
  background: linear-gradient(135deg, #22201E 0%, #151413 50%, #2A2622 100%);
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 18px;
  padding: 24px;
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.vip-shimmer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(201, 169, 110, 0.12) 50%, transparent 60%);
  transform: rotate(25deg);
  pointer-events: none;
}

.vip-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.vip-card-brand {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--gold);
}

.vip-chip {
  width: 32px;
  height: 24px;
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}

.vip-card-tier {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.vip-card-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

.vip-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(245, 240, 235, 0.7);
}

.vip-perks {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--brown);
}

.vip-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
}

.vip-perk-item span {
  color: var(--gold-deep);
  font-size: 15px;
}

/* ── 2026 Provenance Passport Certificate ─────────────────── */
.passport-sheet {
  max-width: 440px;
  margin: 0 auto;
}

.passport-card {
  background: #FAF8F5;
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.passport-watermark {
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-family: var(--serif);
  font-size: 28px;
  color: rgba(201, 169, 110, 0.08);
  font-weight: 700;
  pointer-events: none;
}

.passport-seal {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

.passport-title {
  font-family: var(--serif);
  font-size: 20px;
  text-align: center;
  color: var(--ink);
  margin-bottom: 18px;
}

.passport-table {
  width: 100%;
  font-size: 13px;
  margin-bottom: 14px;
}

.passport-table td {
  padding: 6px 0;
  border-bottom: 1px dashed var(--stroke-soft);
}

.passport-table td:first-child {
  color: var(--brown-soft);
}

.passport-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.passport-hash {
  background: var(--bg2);
  padding: 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown-soft);
  word-break: break-all;
  text-align: center;
  margin-top: 12px;
}

/* ── Sticky Navigation Bar ────────────────────────────────── */
#stickybar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-b));
  z-index: 60;
  display: flex;
  justify-content: space-around;
  padding: 10px 6px;
  border-radius: 22px;
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 169, 110, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

#stickybar button {
  background: none;
  border: none;
  color: rgba(245, 240, 235, 0.55);
  font-size: 11px;
  position: relative;
  width: 52px;
  height: 42px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--sans);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}

#stickybar button:active {
  transform: scale(0.85);
}

#stickybar button.on {
  color: var(--gold);
  font-weight: 600;
}

.badge {
  position: absolute;
  top: 2px;
  right: 6px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ── Toast Notification ───────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  border: 1px solid rgba(201, 169, 110, 0.5);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 99;
  max-width: 85vw;
  text-align: center;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Skeletons & Empty State ──────────────────────────────── */
.skeleton {
  background: linear-gradient(100deg, var(--bg2) 40%, #E6DDD3 50%, var(--bg2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: var(--r);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.card-sk {
  width: 164px;
  height: 238px;
}

.empty {
  text-align: center;
  color: var(--brown-soft);
  padding: 44px 20px;
  font-size: 13px;
}

.empty b {
  display: block;
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--gold-deep);
  font-weight: 400;
}

/* ── Modals: Size Guide, Reviews, Lightbox ─────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.65);
  backdrop-filter: blur(6px);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  animation: fadeIn 0.2s ease;
}

.modal-sheet {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  padding: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.modal-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

.modal-close {
  font-size: 20px;
  color: var(--brown-soft);
}

.unit-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.unit-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: none;
  font-size: 13px;
  cursor: pointer;
  color: var(--brown-soft);
}

.unit-btn.on {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.measure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}

.measure-table th, .measure-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--stroke-soft);
}

.measure-table th {
  color: var(--gold-deep);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.silhouette-box {
  background: #FFFFFF;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--stroke-soft);
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
}

.silhouette-box b {
  color: var(--ink);
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 18, 0.96);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox-close {
  position: absolute;
  top: calc(16px + var(--safe-t));
  right: 16px;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 28px;
  cursor: pointer;
}

.lightbox-content img {
  max-width: 92vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-caption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── In-Mini-App AI Concierge Drawer with Voice ────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(6px);
  z-index: 88;
}

.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84vh;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(201, 169, 110, 0.4);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 14px 16px calc(14px + var(--safe-b));
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.drawer.closing {
  transform: translateY(100%);
}

.drawer-handle-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
  cursor: grab;
}

.drawer-handle {
  width: 42px;
  height: 4px;
  background: var(--stroke);
  border-radius: 3px;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke-soft);
}

.concierge-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gold-diamond {
  color: var(--gold-deep);
  font-size: 20px;
}

.concierge-title {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 600;
}

.concierge-subtitle {
  font-size: 11px;
  color: var(--brown-soft);
}

/* Voice Waveform Recording Visualizer */
.voice-wave-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(201, 169, 110, 0.12);
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 12px;
  margin: 10px 0 4px;
}

.wave-bar {
  width: 4px;
  height: 18px;
  background: var(--gold-deep);
  border-radius: 2px;
  animation: wavePulse 0.8s ease-in-out infinite alternate;
}

.wave-bar:nth-child(2) { animation-delay: 0.15s; height: 26px; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; height: 32px; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; height: 22px; }
.wave-bar:nth-child(5) { animation-delay: 0.6s; height: 14px; }

@keyframes wavePulse {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

.wave-label {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
  margin-left: 8px;
}

.concierge-prompts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.concierge-prompts::-webkit-scrollbar {
  display: none;
}

.prompt-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: #FFFFFF;
  color: var(--brown);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.prompt-chip:active {
  background: var(--ink);
  color: #FFFFFF;
}

.concierge-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}

.msg {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.msg.assistant {
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.msg.user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--cream);
  border-bottom-right-radius: 4px;
}

.concierge-suggestions {
  padding: 8px 0;
  border-top: 1px solid var(--stroke-soft);
}

.sugg-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 6px;
}

.sugg-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sugg-row::-webkit-scrollbar {
  display: none;
}

.sugg-card {
  flex: 0 0 120px;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
}

.sugg-card img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.sugg-card .s-t {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.sugg-card .s-p {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
}

.sugg-card .btn-sugg-add {
  margin-top: 4px;
  width: 100%;
  padding: 4px;
  font-size: 11px;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.concierge-input-wrap {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke-soft);
}

.mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--stroke);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.mic-btn.recording {
  background: var(--gold);
  border-color: var(--gold-deep);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.concierge-input-wrap input {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.concierge-input-wrap input:focus {
  border-color: var(--gold-deep);
}

.concierge-input-wrap button[type="submit"] {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--gold);
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════ 2026 Secret Sauce Styling ════════════════ */

/* 1. Ambient Soundscape Topbar Button */
.audio-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.audio-btn.playing {
  color: var(--gold);
  border-color: var(--gold-deep);
}

.audio-btn.playing .audio-wave {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: audioPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes audioPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 2. The Aurium Drop Banner */
.drop-banner {
  margin: 12px 0 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(198, 167, 105, 0.35);
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(18, 18, 18, 0.98));
  color: #F5F0EB;
  position: relative;
  overflow: hidden;
}

.drop-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.drop-badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.drop-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.drop-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
}

.drop-timer-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.drop-timer-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
}

.drop-timer-digits {
  font-family: monospace;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.05em;
}

.drop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drop-stock-pill {
  font-size: 13px;
  color: var(--gold-light);
  background: rgba(198, 167, 105, 0.12);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(198, 167, 105, 0.25);
}

.btn-drop-notify {
  background: var(--gold);
  color: #121212;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.btn-drop-notify:hover {
  background: var(--gold-light);
}

/* 3. Atelier Stories UGC Feed */
.stories-section {
  margin: 10px 0 16px;
}

.stories-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.stories-scroll {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.stories-scroll::-webkit-scrollbar {
  display: none;
}

.story-sk-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

.story-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.story-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--gold), #E8E3DA, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.story-bubble:hover .story-avatar-wrap {
  transform: scale(1.05);
}

.story-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream);
}

.story-handle {
  font-size: 11px;
  color: var(--ink-soft);
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Story Viewer Modal */
.story-viewer-modal {
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
}

.story-container {
  width: 100%;
  max-width: 420px;
  height: 90vh;
  max-height: 780px;
  background: #121212;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.story-progress-bar {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  z-index: 20;
}

.story-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 5s linear;
}

.story-header {
  position: absolute;
  top: 20px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.story-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-avatar-sm {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
}

.story-author-handle {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  display: block;
}

.story-author-location {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}

.story-media-wrap {
  flex: 1;
  width: 100%;
  height: 100%;
}

.story-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(18, 18, 18, 0.95) 30%);
  color: #FFFFFF;
  z-index: 20;
}

.story-caption {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.story-shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.story-prod-title {
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.story-prod-price {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}

/* 4. 3D Gyroscopic Product Viewer */
.viewer-3d {
  width: 100%;
  height: 380px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  background: radial-gradient(circle at center, #242424 0%, #121212 100%);
  border: 1px solid rgba(198, 167, 105, 0.25);
}

#threeCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.viewer-reflection {
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(198, 167, 105, 0.12), transparent);
  transform: skewX(-25deg);
  animation: reflectionSweep 6s infinite ease-in-out;
  pointer-events: none;
}

@keyframes reflectionSweep {
  0% { left: -100%; }
  30% { left: 200%; }
  100% { left: 200%; }
}

.viewer-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: var(--gold-light);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(198, 167, 105, 0.3);
  pointer-events: none;
  white-space: nowrap;
}

.viewer-toggle-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* 5. Complete the Look (AI Outfit Builder) */
.complete-look-section {
  margin: 20px 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  background: var(--panel);
}

.look-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.look-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ink);
}

.look-subtitle {
  font-size: 13px;
  color: var(--brown-soft);
}

.look-items-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.look-mini-card {
  width: 105px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--stroke-soft);
  padding: 6px;
  cursor: pointer;
}

.look-mini-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 4px;
}

.look-mini-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.look-mini-price {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
}

.look-pricing-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke-soft);
}

.look-bundle-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}

.look-bundle-save {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
  display: block;
}

/* 6. Quantum UI Themes */
html.theme-minimalist {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --gold: #A89578;
  --gold-deep: #8E7A5D;
}

html.theme-bold {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --gold: #D4AF37;
  --gold-deep: #B58A14;
}

/* 7. Style Scout Modal */
.scout-sheet {
  max-height: 85vh;
}

.scout-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(198, 167, 105, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(198, 167, 105, 0.2);
  margin-bottom: 14px;
  font-size: 13px;
}

.scout-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.scout-challenge-box {
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.scout-q-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin-bottom: 4px;
}

.scout-question {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}

.scout-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.scout-opt-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--stroke);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
}

.scout-opt-card.selected {
  border-color: var(--gold-deep);
  background: rgba(198, 167, 105, 0.08);
}

.scout-opt-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.scout-opt-votes {
  font-size: 13px;
  color: var(--brown-soft);
}

.scout-footer {
  text-align: center;
}

.scout-reward-hint {
  font-size: 13px;
  color: var(--brown-soft);
  margin-top: 8px;
}

/* 8. The Aurium Index Modal */
.index-sheet {
  max-height: 85vh;
}

.index-lead {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 16px;
}

.index-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.index-card {
  padding: 14px;
  border-radius: 12px;
  text-align: center;
}

.index-val {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}

.index-label {
  font-size: 11px;
  color: var(--brown-soft);
  line-height: 1.3;
  display: block;
}

.index-seal-note {
  font-size: 13px;
  color: var(--gold-deep);
  text-align: center;
  padding: 10px;
  background: rgba(198, 167, 105, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(198, 167, 105, 0.2);
}

/* 9. Post-Purchase Smart Upsell */
.upsell-sheet {
  max-height: 85vh;
}

.upsell-urgency {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(198, 167, 105, 0.3);
  background: rgba(198, 167, 105, 0.06);
}

.upsell-clock-icon {
  font-size: 20px;
}

.upsell-urgency-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.upsell-urgency-desc {
  font-size: 13px;
  color: var(--ink-soft);
}

.upsell-timer {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-deep);
  margin-top: 2px;
}

.upsell-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upsell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--stroke);
}

.upsell-card img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.upsell-info {
  flex: 1;
}

.upsell-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.upsell-price {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
}

/* 10. Atelier Membership Tiers */
.membership-sheet {
  max-height: 85vh;
}

.tier-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.tier-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: #FFFFFF;
  position: relative;
}

.tier-card.gold-tier {
  border-color: var(--gold);
  background: linear-gradient(135deg, #FFFFFF, rgba(198, 167, 105, 0.08));
}

.tier-card.plat-tier {
  border-color: #121212;
  background: #121212;
  color: #F5F0EB;
}

.tier-card.plat-tier .tier-name,
.tier-card.plat-tier .tier-price {
  color: #FFFFFF;
}

.tier-card.plat-tier .tier-perks li {
  color: rgba(255, 255, 255, 0.8);
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.tier-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.tier-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-deep);
}

.tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.tier-perks li {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.btn-tier {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--bg2);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* 11. AR Try-On & Virtual Try-On */
.ar-modal {
  background: #000000;
  z-index: 10000;
  padding: 0;
}

.ar-container {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ar-topbar {
  position: absolute;
  top: env(safe-area-inset-top, 16px);
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 30;
}

.ar-title {
  color: #FFFFFF;
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.ar-viewport-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#arVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#arCanvas {
  display: none;
}

.ar-reticle {
  position: absolute;
  top: 15%; left: 10%; right: 10%; bottom: 25%;
  border: 1px dashed rgba(198, 167, 105, 0.4);
  border-radius: 20px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-guide-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 8px;
}

.ar-garment-overlay {
  position: absolute;
  top: 25%; left: 20%; right: 20%;
  pointer-events: none;
  opacity: 0.85;
}

.ar-garment-overlay img {
  width: 100%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

.ar-bottom-controls {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 20px);
  left: 20px;
  right: 20px;
  padding: 12px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 18, 18, 0.75);
  backdrop-filter: blur(12px);
  z-index: 30;
}

.ar-prod-pill {
  color: #FFFFFF;
  font-size: 13px;
}

.btn-capture-ar {
  background: var(--gold);
  color: #121212;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* Virtual Try-On */
.virtual-tryon-sheet {
  max-height: 85vh;
}

.v-dropzone {
  border: 2px dashed var(--stroke);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--bg2);
  margin-bottom: 14px;
}

.v-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}

.v-label {
  font-size: 13px;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 10px;
}

.v-sample-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.v-preview-wrap {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #121212;
  margin-bottom: 14px;
}

#vCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v-render-spinner {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 13px;
  gap: 10px;
}

/* 12. Social Lookbook Modal */
.social-sheet {
  max-height: 85vh;
}

.lookbook-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  margin-bottom: 16px;
  background: #FFFFFF;
}

.lb-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  background: #121212;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.lb-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.lb-details {
  padding: 14px;
}

.lb-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.lb-caption {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 10px;
}

.lb-seal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.social-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 13. Stickybar Voice Commerce Button */
.nav-voice-btn {
  background: var(--gold) !important;
  color: #121212 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(198, 167, 105, 0.4);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 4px;
  transition: transform 0.15s ease;
}

.nav-voice-btn:hover {
  transform: scale(1.08);
}

.nav-voice-btn.listening {
  background: #D9534F !important;
  color: #FFFFFF !important;
}

/* ========================================================
   PART 6: HYPERGROWTH & GLOBAL EXPANSION STYLES
   ======================================================== */

/* Global Movement Quick Hub */
.growth-hub-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 14px 14px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.growth-hub-row::-webkit-scrollbar { display: none; }
.growth-hub-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 20px;
  background: rgba(245, 240, 235, 0.85);
  border: 1px solid rgba(201, 169, 110, 0.35);
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}
.growth-hub-pill:hover, .growth-hub-pill:active {
  background: var(--charcoal);
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* Wardrobe Modal */
.wardrobe-sheet {
  max-height: 88vh;
  overflow-y: auto;
  padding-bottom: 30px;
}
.wardrobe-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.w-metric-card {
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.w-metric-val {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
}
.w-metric-val.gold { color: var(--gold-deep); }
.w-metric-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.w-ai-pairing {
  padding: 14px;
  border-left: 3px solid var(--gold);
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.7);
}
.w-ai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.w-ai-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--gold-deep);
}
.w-ai-weather {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--mono);
}
.w-ai-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--charcoal);
  font-style: italic;
}
.w-section-title {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--charcoal);
  font-weight: 600;
  margin: 16px 0 8px 0;
  text-transform: uppercase;
}
.wardrobe-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.wardrobe-item-card {
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.w-item-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  background: #2A2520;
}
.w-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-item-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.w-item-cpw {
  color: var(--gold-deep);
  font-weight: 600;
}
.w-item-wears {
  color: var(--text-secondary);
  font-size: 11px;
}
.btn-log-wear {
  padding: 5px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: var(--charcoal);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-log-wear:active { opacity: 0.7; }
.wardrobe-missing-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}
.w-missing-card {
  flex: 0 0 130px;
  padding: 8px;
  border-radius: 10px;
  text-align: center;
}
.w-missing-card img {
  width: 100%;
  height: 85px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
}
.w-missing-title { font-size: 13px; font-weight: 500; }
.w-missing-price { font-size: 11px; color: var(--gold-deep); }
.w-add-manual-box {
  padding: 12px;
  margin-top: 14px;
}
.manual-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.manual-input-grid input {
  padding: 8px;
  font-size: 13px;
  border: 1px solid var(--stroke-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
}
.manual-input-grid button {
  grid-column: span 2;
}

/* Community Co-Creation Modal */
.cocreate-sheet, .legacy-sheet, .lang-sheet, .editorial-sheet, .network-sheet {
  max-height: 86vh;
  overflow-y: auto;
}
.cocreate-intro {
  padding: 12px;
  margin-bottom: 14px;
  border-left: 3px solid var(--gold);
}
.cocreate-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.cocreate-concepts-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.cocreate-card {
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(201, 169, 110, 0.25);
}
.cocreate-card.voted {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
}
.cocreate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cocreate-concept-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}
.cocreate-concept-votes {
  font-size: 13px;
  color: var(--gold-deep);
  font-weight: 600;
}
.cocreate-concept-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.cocreate-specs-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(26, 26, 26, 0.06);
  color: var(--charcoal);
  display: inline-block;
  align-self: flex-start;
}
.btn-vote-concept {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--gold);
  border: 1px solid var(--gold);
  cursor: pointer;
  font-weight: 500;
}
.btn-vote-concept.voted-btn {
  background: var(--gold);
  color: var(--charcoal);
}

/* Legacy Museum Modal */
.legacy-hero {
  text-align: center;
  padding: 10px 0 16px 0;
}
.legacy-badge {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  font-weight: 600;
  text-transform: uppercase;
}
.legacy-hero h2 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 6px 0 4px 0;
  color: var(--charcoal);
}
.legacy-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 4px 16px 14px;
  position: relative;
  border-left: 2px solid rgba(201, 169, 110, 0.35);
  margin-left: 10px;
  margin-bottom: 20px;
}
.timeline-item {
  position: relative;
  padding-left: 14px;
}
.t-dot {
  position: absolute;
  left: -21px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #F5F0EB;
}
.t-year {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 2px;
}
.t-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.t-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.time-capsule-box {
  padding: 14px;
}
.capsule-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.capsule-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
}
#timeCapsuleInput {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
  resize: none;
}
.capsule-confirmed {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(201, 169, 110, 0.12);
  border: 1px solid var(--gold);
}

/* Language & Market Selector */
.lang-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.lang-btn-opt {
  padding: 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.7);
  color: var(--charcoal);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.lang-btn-opt.active {
  background: var(--charcoal);
  color: var(--gold);
  border-color: var(--gold);
}
.region-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.region-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
}
.region-card.active {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
}
.rc-flag { font-size: 20px; }
.rc-name { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.rc-sub { font-size: 11px; color: var(--text-secondary); }

/* Editorial Journal Modal */
.article-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.article-tab-btn {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  cursor: pointer;
}
.article-tab-btn.active {
  background: var(--charcoal);
  color: var(--cream);
}
.article-view {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.article-header h3 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 0 6px 0;
}
.article-meta {
  font-size: 11px;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.article-view p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--charcoal);
  margin-bottom: 12px;
}

/* Ambassador & Atelier Network */
.network-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}
.net-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.net-val {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}
.net-val.gold { color: var(--gold-deep); }
.net-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.network-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Foundation Cause Selector */
.foundation-cause-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cause-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 13px;
}
.cause-option.active {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
}
.cause-option input { margin: 0; }

/* GDPR Banner */
.gdpr-banner {
  position: fixed;
  bottom: 74px;
  left: 12px;
  right: 12px;
  z-index: 85;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  background: rgba(26, 26, 26, 0.96);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.gdpr-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gdpr-icon { font-size: 20px; }
.gdpr-text { font-size: 13px; line-height: 1.45; color: #E8E3DA; }
.gdpr-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Arabic RTL Support */
html[dir="rtl"], body.rtl {
  direction: rtl;
  text-align: right;
}
body.rtl #topbar { flex-direction: row-reverse; }
body.rtl .top-actions { flex-direction: row-reverse; }
body.rtl .w-ai-pairing { border-left: none; border-right: 3px solid var(--gold); }
body.rtl .legacy-timeline { border-left: none; border-right: 2px solid rgba(201, 169, 110, 0.35); margin-left: 0; margin-right: 10px; padding-left: 4px; padding-right: 14px; }
body.rtl .t-dot { left: auto; right: -21px; }
body.rtl .timeline-item { padding-left: 0; padding-right: 14px; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── VIP Access Gate ───────────────────────────────────────── */
#vipGate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(245, 240, 235, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

.gate-content {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r);
  padding: 32px 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  max-width: 320px;
  width: 100%;
}

.gate-logo {
  height: 54px;
  margin-bottom: 32px;
  object-fit: contain;
}

.gate-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.gate-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.gate-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brown-soft);
  margin-bottom: 8px;
  text-align: left;
}

.gate-input-wrap {
  display: flex;
  gap: 8px;
}

.gate-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--stroke-soft);
  border-radius: 0;
  padding: 10px 4px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.2em; /* wider spacing for password dots */
  transition: border-color 0.2s;
  box-shadow: none;
  -webkit-appearance: none;
}

.gate-input:focus {
  border-bottom-color: var(--gold-deep);
  outline: none;
}

.gate-btn {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--r);
  padding: 0 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}

.gate-error {
  color: #D32F2F;
  font-size: 13px;
  margin-top: 12px;
  height: 14px;
}

/* Private collection: compact, responsive entry panel. */
#vipGate { box-sizing: border-box; overflow-y: auto; background: rgba(245, 240, 235, .94); }
.gate-content { box-sizing: border-box; max-width: 380px; padding: 36px 28px 24px; border-radius: 16px; }
.gate-brand { width: 300px; height: 125px; max-width: 100%; overflow: hidden; position: relative; margin: 0 auto 24px; }
.gate-brand .gate-logo { position: absolute; width: 360px; max-width: none; height: auto; left: 50%; top: -94px; transform: translateX(-50%); margin: 0; filter: drop-shadow(0 2px 4px rgba(26,26,26,0.2)); }
.gate-title { font-size: 28px; letter-spacing: -.02em; }
.gate-subtitle { margin: 12px 0 28px; line-height: 1.65; }
.gate-label { display: block; text-align: left; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.gate-input-wrap { flex-direction: column; gap: 12px; }
.gate-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; font-family: var(--sans); font-size: 16px; border-radius: 8px; }
.gate-btn { min-height: 48px; border-radius: 8px; }
.gate-btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.gate-error { min-height: 18px; height: auto; }


/* --- Aurium Design Audit Patches (Sweep 2) --- */

/* 1. Global modal suppression patch */
[hidden] {
  display: none !important;
}

/* 2. Inputs forced to 16px to prevent iOS zoom */
#searchInput, #gateInput, .gate-input, .admin-input, input, textarea, select {
  font-size: 16px !important;
}

/* 3. Custom Gold Radio Buttons (override iOS native blue) */
.foundation-radio, input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: var(--bg);
  position: relative;
  cursor: pointer;
  outline: none;
  display: inline-block;
  vertical-align: middle;
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* 4. PDP stacked bars clearance */
/* Specificity boost to beat .screen rules without !important */
body #screen-product.screen {
  padding-bottom: 200px;
}

/* 5. Responsive constraints (no Telegram dark theme) */
@media (min-width: 600px) {
  html, body {
    background-color: #EAE6DF; /* Outer canvas color matching the vibe */
  }
  body {
    max-width: 480px;
    margin: 0 auto;
    background: var(--cream);
    min-height: 100vh;
    border-left: 1px solid var(--stroke);
    border-right: 1px solid var(--stroke);
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
    position: relative;
  }
}