/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #1a1a1a;
  --primary-light: #2d2d2d;
  --accent: #c9a84c;
  --accent-light: #e2c36e;
  --success: #2e7d32;
  --success-light: #43a047;
  --danger: #c62828;
  --bg: #f5f5f5;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --border: #e2e8f0;
  --shadow: 0 4px 24px rgba(0,0,0,.10);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --radius: 12px;
  --radius-sm: 8px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ===== LOGO — fixed white background everywhere, always the same ===== */
/* Header logo: white pill so original black logo always shows */
.logo-img-sm {
  filter: none;
  mix-blend-mode: normal;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  height: 36px;
}

/* Footer logo: same white pill */
.footer-logo-img {
  filter: none;
  mix-blend-mode: normal;
  background: #fff;
  border-radius: 6px;
  padding: 3px 7px;
  height: 32px;
}

/* Auth card logo: white background container */
.auth-logo {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 16px;
  padding: 14px 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.auth-logo .logo-img {
  filter: none;
  mix-blend-mode: normal;
}

/* ===== DARK MODE — full auth card theme for phones in dark mode ===== */
@media (prefers-color-scheme: dark) {
  .auth-screen {
    background-color: #0a0a0a !important;
    background: radial-gradient(ellipse at top, #1c1c1c 0%, #0a0a0a 70%) !important;
  }
  .auth-card {
    background: #161616;
    border: 1px solid rgba(201,168,76,.18);
    color: #f0f0f0;
    box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.08);
  }
  /* Logo stays exactly the same in dark mode — white container, original logo */
  .auth-logo {
    background: #fff;
    border-color: #e8e8e8;
  }
  .auth-logo .logo-img {
    filter: none;
    mix-blend-mode: normal;
  }
  .auth-logo-text { color: #fff; }
  .auth-tagline { color: #888; }
  .auth-tabs { background: #222; }
  .auth-tab { color: #888; }
  .auth-tab.active { background: #2d2d2d; color: #fff; box-shadow: none; }
  .auth-form label { color: #bbb; }
  .auth-form input, .auth-form .pw-wrap input {
    background: #1f1f1f;
    border-color: #333;
    color: #f0f0f0;
  }
  .auth-form input::placeholder { color: #555; }
  .auth-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,168,76,.12); }
  .auth-lang { background: #1f1f1f; border-color: #333; }
  .auth-lang .lang-btn { color: #888; }
  .auth-lang .lang-btn.active { background: var(--accent); color: #1a1a1a; }
  .auth-error { color: #f48fb1; }
  .btn-primary { background: var(--accent); color: #1a1a1a; }
  .btn-primary:hover { background: var(--accent-light); }
}

/* ===== AUTH SCREEN ===== */
.auth-screen {
  min-height: 100vh;
  min-height: 100svh;                /* modern mobile viewport fix */
  background-color: #0f0f0f;        /* solid fallback — never white */
  background: radial-gradient(ellipse at 20% 20%, #2a2a2a 0%, #0f0f0f 60%),
              radial-gradient(ellipse at 80% 80%, #1e1e1e 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
/* Subtle animated gold orb in corner */
.auth-screen::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 65%);
  animation: orbFloat 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.auth-screen::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,.07) 0%, transparent 65%);
  animation: orbFloat 8s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes orbFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(20px, -20px) scale(1.08); }
}

.auth-card {
  background: #fff;
  border-radius: 24px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: cardIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-img {
  max-height: 100px;
  max-width: 220px;
  object-fit: contain;
}
.auth-logo-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-logo-text strong { color: var(--accent); }
.auth-tagline { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }

.auth-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 50px;
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}
.auth-tab.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }

.auth-form { text-align: left; }
.auth-error { color: var(--danger); font-size: 13px; min-height: 20px; margin-bottom: 8px; text-align: center; }

.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 15px;
}

/* ===== HEADER ===== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg, #111 0%, #1a1a1a 50%, #111 100%);
  box-shadow: 0 2px 24px rgba(0,0,0,.4), 0 1px 0 rgba(201,168,76,.12);
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.header-inner {
  max-width: 1200px; margin: auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 20px;
}

/* Nav is first in DOM; on desktop restore visual order with CSS order */
.logo               { display: flex; align-items: center; gap: 10px; flex-shrink: 0; order: 1; }
.boutique-back-btn  { order: 2; }
.boutique-header-badge { order: 2; }
#buyerNav, #sellerNav  { order: 3; }
.header-right       { order: 4; }
.logo-img-sm { height: 40px; width: auto; object-fit: contain; }
.logo-text-fallback { font-size: 20px; color: #fff; font-weight: 700; }
.logo-text-fallback strong { color: var(--accent); }

.main-nav { display: flex; gap: 4px; flex: 1; }

.nav-btn, .dash-nav-btn {
  background: transparent;
  border: 2px solid transparent;
  color: rgba(255,255,255,.7);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}
.nav-btn:hover, .dash-nav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-btn.active, .dash-nav-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: var(--accent);
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(201,168,76,.35);
}

.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.user-badge {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== PROFILE ICON + DROPDOWN ===== */
.profile-wrap { position: relative; }

.profile-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.3);
  color: var(--primary);
  font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(201,168,76,.4);
}
.profile-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(201,168,76,.55); }

.profile-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  width: 240px;
  z-index: 2000;
  padding: 14px;
  display: none;
  animation: fadeInDown .15s ease;
}
.profile-dropdown.open { display: block; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-dropdown-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.profile-dropdown-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  color: var(--primary);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.profile-dropdown-info { min-width: 0; }
.profile-dropdown-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-dropdown-email {
  font-size: 11px; color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-dropdown-role {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(201,168,76,.15); color: var(--accent);
  padding: 2px 8px; border-radius: 50px;
}
.profile-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0 8px; }
.profile-dropdown-item {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background .15s;
}
.profile-dropdown-item:hover { background: var(--border); }
.profile-dropdown-item.danger { color: #e53935; }
.profile-dropdown-item.danger:hover { background: #ffebee; }

/* ===== HEADER CHAT ICON ===== */
.header-chat-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: #25D366;
  color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(37,211,102,.4);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.header-chat-btn:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(37,211,102,.6); }

.btn-outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 6px;
}
.btn-outline-white:hover { border-color: #fff; color: #fff; }

.cart-btn {
  position: relative;
  background: var(--accent);
  border: none; color: var(--primary);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 17px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cart-btn:hover { background: var(--accent-light); transform: scale(1.07); }
.cart-count {
  position: absolute; top: -5px; right: -5px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 50%; min-width: 20px; height: 20px;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-count.visible { display: flex; }

/* ===== TAB SECTIONS ===== */
.tab-section { display: none; }
.tab-section.active { display: block; }

/* ===== BANNER / POSTER ===== */
.store-banner {
  width: 100%;
  max-height: 340px;
  overflow: hidden;
  position: relative;
  display: none;
}
.store-banner.visible { display: block; }
.store-banner img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.banner-remove-btn {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  display: none;
}
.banner-remove-btn:hover { background: var(--danger); }

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 40%, #242424 70%, #1a1a1a 100%);
  color: #fff; padding: 80px 24px;
  display: flex; align-items: center; justify-content: center; gap: 48px;
  overflow: hidden; position: relative;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { position: relative; max-width: 560px; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,168,76,.15);
  border: 1px solid rgba(201,168,76,.3);
  color: var(--accent);
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 50px;
  letter-spacing: .06em;
  margin-bottom: 18px;
  text-transform: uppercase;
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.25); }
  50%       { box-shadow: 0 0 0 8px rgba(201,168,76,.0); }
}
.hero-content h1 { font-size: clamp(28px,4vw,52px); font-weight: 800; line-height: 1.12; margin-bottom: 16px; }
.hero-content h1 span { color: var(--accent); }
.hero-content p { font-size: 17px; opacity: .75; margin-bottom: 32px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-graphic { flex-shrink: 0; z-index: 1; }
.hero-icon { font-size: clamp(80px,10vw,140px); color: rgba(255,255,255,.06); }

/* ===== CONTAINER ===== */
.container { max-width: 1200px; margin: auto; padding: 40px 24px; }

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.section-header h2 { font-size: 26px; font-weight: 700; }

.search-bar {
  display: flex; align-items: center; background: #fff;
  border: 1.5px solid var(--border); border-radius: 50px;
  padding: 8px 16px; gap: 10px; min-width: 260px; box-shadow: var(--shadow-sm);
}
.search-bar i { color: var(--text-muted); }
.search-bar input { border: none; outline: none; font-size: 14px; width: 100%; font-family: 'Inter', sans-serif; }

/* ===== CATEGORIES ===== */
.categories { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cat-btn {
  padding: 7px 18px; border-radius: 50px; border: 1.5px solid var(--border);
  background: #fff; color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s; font-family: 'Inter', sans-serif;
}
.cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===== PRODUCTS GRID ===== */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 24px; }

.product-card {
  background: var(--card-bg); border-radius: var(--radius);
  border: 1.5px solid var(--border); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column;
  animation: fadeUp .4s ease both;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
  border-color: rgba(201,168,76,.4);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Stagger each card */
.product-card:nth-child(1)  { animation-delay: .05s; }
.product-card:nth-child(2)  { animation-delay: .10s; }
.product-card:nth-child(3)  { animation-delay: .15s; }
.product-card:nth-child(4)  { animation-delay: .20s; }
.product-card:nth-child(5)  { animation-delay: .25s; }
.product-card:nth-child(6)  { animation-delay: .30s; }
.product-card:nth-child(n+7){ animation-delay: .35s; }

/* Nice scrollbar (desktop) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #c9a84c66; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Smooth focus rings */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.product-img {
  height: 190px;
  background: linear-gradient(135deg, #f7f7f7 0%, #efefef 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.product-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.product-card:hover .product-img img { transform: scale(1.05); }
.product-img .img-placeholder { font-size: 56px; color: var(--primary); opacity: .1; }

.product-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-category {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(201,168,76,.15), rgba(226,195,110,.08));
  border: 1px solid rgba(201,168,76,.2);
  padding: 3px 10px; border-radius: 50px; display: inline-block;
}
.product-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.product-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }
.product-price { font-size: 20px; font-weight: 700; color: var(--primary); }
.product-stock { font-size: 12px; color: var(--text-muted); }
.product-stock.low { color: #e65100; font-weight: 600; }
.product-stock.out { color: var(--danger); font-weight: 600; }

.add-cart-btn {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .18s, transform .12s;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.add-cart-btn:hover { background: var(--primary-light); transform: scale(1.04); }
.add-cart-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

.loading, .empty-state {
  grid-column: 1/-1; text-align: center; padding: 60px 20px;
  color: var(--text-muted); font-size: 16px;
}
.loading i, .empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }

/* ===== MY ORDERS ===== */
.my-order-card {
  background: #fff; border-radius: var(--radius); border: 1.5px solid var(--border);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.my-order-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.my-order-id { font-size: 13px; font-weight: 700; font-family: monospace; color: var(--primary); }
.my-order-date { font-size: 12px; color: var(--text-muted); }
.my-order-items { font-size: 13px; color: var(--text-muted); margin: 8px 0; }
.my-order-total { font-size: 18px; font-weight: 700; color: var(--primary); margin-top: 8px; }

/* ===== CART ===== */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-sidebar {
  position: fixed; right: 0; top: 0; bottom: 0; width: 380px;
  background: #fff; z-index: 201;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.15);
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
  padding: 20px 24px; border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary); color: #fff;
}
.cart-header h3 { font-size: 18px; font-weight: 600; }
.cart-body { flex: 1; overflow-y: auto; padding: 16px; }

.cart-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); margin-bottom: 10px; background: var(--bg);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: 13px; color: var(--text-muted); }

.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.qty-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.qty-num { font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; }

.remove-btn { background: none; border: none; color: #bbb; cursor: pointer; font-size: 16px; padding: 4px; transition: color .15s; }
.remove-btn:hover { color: var(--danger); }

.empty-cart { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-cart i { font-size: 48px; display: block; margin-bottom: 12px; opacity: .3; }

.cart-footer { padding: 16px 24px; border-top: 1.5px solid var(--border); }
.cart-total { display: flex; justify-content: space-between; font-size: 18px; margin-bottom: 14px; }
.cart-total strong { color: var(--primary); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; border: 2px solid transparent;
  cursor: pointer; transition: all .18s; font-family: 'Inter', sans-serif; text-decoration: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #2d2d2d; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.btn-success { background: linear-gradient(135deg, var(--success), var(--success-light)); color: #fff; }
.btn-success:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(46,125,50,.3); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger-sm { background: #ffebee; color: var(--danger); border: 1.5px solid #ffcdd2; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: 'Inter', sans-serif; }
.btn-danger-sm:hover { background: var(--danger); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, transform .15s; }
.btn-danger:hover { background: #b71c1c; transform: scale(1.02); }
.danger-zone { border-color: rgba(198,40,40,.25) !important; }
.danger-zone h4 { color: var(--danger); }

/* ===== ORDER HISTORY ===== */
.history-batch {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.history-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg);
  border-bottom: 1.5px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.history-batch-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.history-batch-title i { color: var(--accent); }
.history-batch-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.history-batch-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.history-orders { padding: 8px 0; }
.history-order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  transition: background .15s;
}
.history-order-row:last-child { border-bottom: none; }
.history-order-row:hover { background: var(--bg); }
.history-order-id       { font-family: monospace; font-weight: 700; font-size: 13px; color: var(--accent); min-width: 90px; }
.history-order-customer { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; min-width: 100px; }
.history-order-items    { font-size: 12px; color: var(--text-muted); }
.history-order-total    { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.history-order-date     { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

[data-theme="dark"] .history-batch-header { background: #111; }
[data-theme="dark"] .history-batch { background: #141414; border-color: #252525; }
[data-theme="dark"] .history-order-row:hover { background: #1a1a1a; }

@media (max-width: 640px) {
  .history-order-row { gap: 8px; }
  .history-order-items, .history-order-date { display: none; }
}
.btn-full { width: 100%; justify-content: center; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: var(--radius); width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: scale(.95); transition: transform .25s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-sm { max-width: 400px; }
.modal-header {
  padding: 20px 24px; border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-body { padding: 24px; }

.close-btn {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.close-btn:hover { background: rgba(255,255,255,.35); }

/* ===== FORMS ===== */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 600; }
.form-group input, .form-group textarea, .form-group select {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif;
  transition: border-color .18s, box-shadow .18s; outline: none; background: #fff; width: 100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--primary); }

.payment-badge {
  display: flex; align-items: center; gap: 14px;
  background: #fff8e1; border: 1.5px solid #ffc107;
  border-radius: var(--radius-sm); padding: 14px; margin: 16px 0;
}
.payment-badge i { font-size: 24px; color: #f57c00; }
.payment-badge strong { display: block; font-size: 14px; }
.payment-badge p { font-size: 12px; color: var(--text-muted); margin: 0; }

.order-summary { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 16px; }
.order-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.order-summary-row.total { font-weight: 700; font-size: 16px; border-top: 1.5px solid var(--border); margin-top: 8px; padding-top: 8px; }

/* ===== SUCCESS MODAL ===== */
.success-modal { text-align: center; padding: 40px 24px; }
.success-icon { font-size: 60px; color: var(--success); margin-bottom: 16px; }
.success-modal h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.success-modal p { color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.order-id-display { font-size: 12px; background: var(--bg); border-radius: 6px; padding: 8px; font-family: monospace; color: var(--text-muted); }

/* ===== SELLER DASHBOARD ===== */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 32px; padding-top: 8px; }
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  border: 1.5px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--primary); }
.stat-icon { float: right; font-size: 28px; opacity: .1; margin-top: -36px; }

.dash-panel { display: none; padding-top: 8px; }
.dash-panel.active { display: block; }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.panel-header h3 { font-size: 20px; font-weight: 700; }
.panel-header select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-family: 'Inter', sans-serif; cursor: pointer; outline: none; }

/* ===== ORDER CARDS ===== */
.order-card { background: #fff; border-radius: var(--radius); border: 1.5px solid var(--border); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.order-card-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.order-id { font-size: 13px; font-weight: 700; font-family: monospace; color: var(--primary); }
.order-date { font-size: 12px; color: var(--text-muted); }
.order-customer { font-size: 14px; font-weight: 600; }
.order-contact { font-size: 13px; color: var(--text-muted); }
.order-total-big { font-size: 20px; font-weight: 800; color: var(--primary); }
.order-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.order-actions select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13px; font-family: 'Inter', sans-serif; cursor: pointer; outline: none; }

.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.status-Pending { background: #fff3e0; color: #e65100; }
.status-Processing { background: #e3f2fd; color: #1565c0; }
.status-Shipped { background: #f3e5f5; color: #6a1b9a; }
.status-Delivered { background: #e8f5e9; color: #2e7d32; }
.status-Cancelled { background: #ffebee; color: #c62828; }

/* ===== SELLER PRODUCTS LIST ===== */
.seller-product-row {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center;
  gap: 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.sp-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f0f0f0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb i { font-size: 22px; color: #ccc; }
.sp-info { flex: 1; min-width: 160px; }
.sp-name { font-size: 15px; font-weight: 600; }
.sp-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sp-price { font-size: 17px; font-weight: 700; color: var(--primary); min-width: 80px; }
.sp-stock { font-size: 13px; min-width: 80px; }
.sp-actions { display: flex; gap: 8px; }
.btn-edit { background: #f5f5f5; color: var(--primary); border: 1.5px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: 'Inter', sans-serif; }
.btn-edit:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== IMAGE PASTE ZONE ===== */
.paste-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 28px 20px; text-align: center; cursor: pointer;
  transition: all .2s; color: var(--text-muted);
  background: #fafafa;
}
.paste-zone:hover, .paste-zone:focus, .paste-zone.active {
  border-color: var(--primary); background: #f5f5f5; outline: none;
}
.paste-zone i { font-size: 28px; display: block; margin-bottom: 10px; opacity: .5; }
.paste-zone p { font-size: 14px; margin: 4px 0; }

.image-preview-wrap { margin-top: 10px; position: relative; display: inline-block; }
.image-preview-wrap img { max-height: 180px; max-width: 100%; border-radius: var(--radius-sm); border: 1.5px solid var(--border); display: block; }
.remove-img-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  border-radius: 6px; padding: 4px 10px; font-size: 12px;
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.remove-img-btn:hover { background: var(--danger); }

/* ===== PRODUCT FORM ===== */
.product-form { max-width: 680px; }

/* ===== SELLERS LIST ===== */
.add-seller-form {
  background: #f9f9f9; border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 24px;
}
.seller-row {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 20px; margin-bottom: 10px; display: flex; align-items: center;
  gap: 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.seller-info { flex: 1; min-width: 160px; }
.seller-name { font-size: 15px; font-weight: 600; }
.seller-email { font-size: 13px; color: var(--text-muted); }
.role-badge { padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.role-admin { background: #fff3e0; color: #e65100; }
.role-seller { background: #e3f2fd; color: #1565c0; }

/* ===== FOOTER ===== */
.footer { background: var(--primary); color: rgba(255,255,255,.7); padding: 40px 24px 20px; margin-top: 60px; }
.footer-inner { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 20px; color: #fff; font-weight: 700; }
.footer-brand strong { color: var(--accent); }
.footer-logo-img { height: 36px; width: auto; object-fit: contain; }
.footer p { font-size: 13px; }
.footer-copy { font-size: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; text-align: center; }

/* ===== BANNER UPLOAD (settings) ===== */
.banner-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  color: var(--text-muted);
  background: #fafafa;
  margin-top: 16px;
}
.banner-upload-zone:hover { border-color: var(--accent); background: #fffbf0; }
.banner-upload-zone i { font-size: 32px; display: block; margin-bottom: 10px; color: var(--accent); opacity: .7; }
.banner-preview-wrap { margin-top: 14px; position: relative; }
.banner-preview-wrap img { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-sm); border: 1.5px solid var(--border); display: block; }
.banner-preview-wrap .remove-img-btn { position: absolute; top: 8px; right: 8px; }

/* ===== PER-BOUTIQUE BANNER ROWS ===== */
.boutique-banner-row { padding: 4px 0; }
.boutique-banner-label {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
}
.boutique-banner-body { }
.banner-upload-zone-sm {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fafafa;
  font-size: 13px; color: var(--text-muted);
  transition: border-color .15s, background .15s;
}
.banner-upload-zone-sm:hover { border-color: var(--accent); background: #fffbf0; color: var(--accent); }
.banner-upload-zone-sm i { font-size: 18px; }
.banner-url-row {
  display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.banner-url-row input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; background: var(--card-bg); color: var(--text);
}
.banner-url-row input:focus { border-color: var(--accent); }
.btn-sm { padding: 8px 14px !important; font-size: 12px !important; white-space: nowrap; }

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 50px;
  padding: 4px 6px;
  border: 1.5px solid rgba(255,255,255,.2);
}
.lang-toggle .sep { color: rgba(255,255,255,.3); font-size: 11px; }

.lang-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 50px;
  transition: all .18s;
  font-family: 'Inter', sans-serif;
  letter-spacing: .06em;
  line-height: 1;
}
.lang-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.lang-btn.active {
  background: var(--accent);
  color: #1a1a1a;
  font-weight: 800;
}

/* Auth screen lang toggle — sits on white card */
.auth-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0f0f0;
  border: 1.5px solid #e0e0e0;
  border-radius: 50px;
  padding: 4px 6px;
  margin: 0 auto 20px;
  width: fit-content;
}
.auth-lang .sep { color: #ccc; font-size: 11px; }
.auth-lang .lang-btn { color: #888; }
.auth-lang .lang-btn:hover { color: var(--primary); background: rgba(0,0,0,.06); }
.auth-lang .lang-btn.active { background: var(--primary); color: #fff; }

/* Hero accent span */
.hero-content h1 .accent { color: var(--accent); }

/* Accent button */
.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 3px 14px rgba(201,168,76,.35);
}
.btn-accent:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 5px 20px rgba(201,168,76,.5);
  transform: translateY(-1px);
}

/* ===== CURRENCY TOGGLE ===== */
.cur-toggle { border-color: rgba(201,168,76,.4); }
.cur-toggle .lang-btn.active { background: var(--accent); color: #1a1a1a; }

/* ===== SETTINGS PANEL ===== */
.settings-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 500px;
  box-shadow: var(--shadow-sm);
}
.settings-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
}
.settings-card h4 i { color: var(--accent); }
.settings-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }

.exchange-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.exchange-display {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}
.exchange-display input {
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  width: 100px;
  outline: none;
  font-family: 'Inter', sans-serif;
  text-align: center;
}
.exchange-display span { color: var(--text-muted); font-size: 14px; }
.rate-saved { color: var(--success); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ===== WHATSAPP FLOAT BUTTON ===== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,.6);
}
.whatsapp-tooltip {
  position: absolute;
  right: 66px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-family: 'Inter', sans-serif;
}
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right: none;
  border-left-color: #1a1a1a;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }

@media (max-width: 640px) {
  .whatsapp-float { bottom: 20px; right: 16px; width: 52px; height: 52px; font-size: 24px; }
  .whatsapp-tooltip { display: none; }
}

/* ===== HAMBURGER BUTTON ===== */
.hamburger-btn {
  display: none;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(255,255,255,.25); }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  display: none;
  background: #1a1a1a;
  border-bottom: 2px solid rgba(255,255,255,.08);
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { max-height: 90vh; overflow-y: auto; }
.mobile-menu-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Profile block */
.mm-profile {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0 12px;
}
.mm-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--primary);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mm-profile-info { min-width: 0; }
.mm-name  { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-email { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-role  {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(201,168,76,.2); color: var(--accent);
  padding: 2px 8px; border-radius: 50px;
}

/* Divider */
.mm-divider { height: 1px; background: rgba(255,255,255,.08); margin: 6px 0; }

/* Nav buttons */
.mm-nav-btn {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85);
  cursor: pointer; font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: background .15s;
}
.mm-nav-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.mm-nav-btn i { width: 20px; text-align: center; opacity: .7; font-size: 15px; }
.mm-nav-btn.mm-whatsapp { color: #25D366; }
.mm-nav-btn.mm-whatsapp i { opacity: 1; }
.mm-nav-btn.mm-whatsapp:hover { background: rgba(37,211,102,.1); }
.mm-nav-btn.mm-primary { color: #fff; font-weight: 600; font-size: 15px; }
.mm-nav-btn.mm-primary i { opacity: 1; color: var(--accent); }
.mm-cart-count { background: var(--accent); color: #1a1a1a; border-radius: 50px; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 4px; }

/* Settings rows */
.mm-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 4px;
}
.mm-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35);
  letter-spacing: .08em; flex-shrink: 0;
}
.mm-theme-toggle {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  padding: 6px 14px; border-radius: 50px;
  font-size: 13px; font-family: 'Inter', sans-serif;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.mm-theme-toggle:hover { background: rgba(255,255,255,.15); }

/* Logout */
.mm-logout {
  width: 100%; background: rgba(229,57,53,.1);
  border: 1.5px solid rgba(229,57,53,.3);
  color: #ef5350; padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: background .15s; margin-top: 4px;
}
.mm-logout:hover { background: rgba(229,57,53,.2); }

/* Legacy selector kept for any remaining refs */
.mobile-menu-user { display: none; }
.mobile-logout-btn {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
.mobile-logout-btn:hover { background: rgba(255,0,0,.25); }

/* ===== ORDER TAG ===== */
.order-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 50px;
  font-weight: 600;
}

/* ===== PUSH NOTIFICATION BELL ===== */
.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.notify-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201,168,76,.08);
}
.notify-btn.active {
  background: rgba(201,168,76,.15);
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="dark"] .notify-btn {
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.55);
}
html[data-theme="dark"] .notify-btn:hover,
html[data-theme="dark"] .notify-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201,168,76,.12);
}

@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 900px) {
  .header-inner { gap: 10px; }
  .user-badge { max-width: 120px; font-size: 12px; }
  .nav-btn, .dash-nav-btn { padding: 7px 12px; font-size: 12px; }
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 640px) {

  /* ── HEADER: nav tabs + cart + hamburger ONLY ── */
  .header-inner {
    flex-wrap: nowrap;
    height: 56px;
    padding: 0 10px;
    gap: 6px;
    align-items: center;
  }

  /* Hide logo, boutique elements, and all header-right except cart+hamburger */
  .logo,
  .boutique-back-btn,
  .boutique-header-badge,
  .header-right .lang-toggle,
  .header-right .cur-toggle,
  .header-chat-btn,
  .profile-wrap,
  .theme-btn,
  .user-badge { display: none !important; }

  /* Nav takes all available space */
  .main-nav { flex: 1; overflow-x: visible; flex-wrap: nowrap; gap: 6px; padding: 0; border-top: none; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .nav-btn, .dash-nav-btn { padding: 8px 14px; font-size: 14px; flex-shrink: 0; white-space: nowrap; }
  #sellerNav .dash-nav-btn span { display: none; }
  #sellerNav .dash-nav-btn { padding: 8px 13px; font-size: 15px; }

  /* Cart */
  .cart-btn { width: 38px; height: 38px; font-size: 15px; flex-shrink: 0; }

  /* Hamburger */
  .hamburger-btn { display: flex; flex-shrink: 0; }
  .mobile-menu { display: block; }

  /* ── AUTH ── */
  .auth-card { padding: 28px 20px; }
  .auth-screen { padding: 16px; }

  /* HERO */
  .hero { flex-direction: column; text-align: center; padding: 40px 16px; gap: 0; }
  .hero-graphic { display: none; }
  .hero-content p { font-size: 15px; }

  /* CONTAINER */
  .container { padding: 24px 14px; }

  /* SECTION HEADER */
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .search-bar { width: 100%; min-width: unset; }

  /* PRODUCTS GRID: 2 columns */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-body { padding: 12px; }
  .product-img { height: 140px; }
  .product-name { font-size: 13px; }
  .product-price { font-size: 16px; }
  .add-cart-btn { padding: 8px 10px; font-size: 12px; }

  /* CART */
  .cart-sidebar { width: 100%; }

  /* MODAL: full screen on mobile */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 92vh;
  }
  .modal-sm { max-width: 100%; }

  /* FORMS */
  .form-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* SELLER DASHBOARD */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 22px; }

  .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .panel-header select { width: 100%; }

  .seller-product-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sp-actions { width: 100%; justify-content: flex-end; }

  /* ORDER CARDS */
  .order-card-header { flex-direction: column; gap: 6px; }
  .order-actions { flex-wrap: wrap; gap: 8px; }
  .order-actions select { flex: 1; min-width: 140px; }

  /* MY ORDERS */
  .my-order-header { flex-direction: column; gap: 4px; }

  /* SELLERS LIST */
  .seller-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .seller-row .btn-danger-sm { width: 100%; text-align: center; justify-content: center; }

  /* FOOTER */
  .footer { padding: 28px 14px 80px; }

  /* Extra bottom padding so content isn't behind mobile browser bar */
  body { padding-bottom: 16px; }
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-btn:hover { background: rgba(255,255,255,.25); transform: rotate(20deg); }

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --card-bg: #141414;
  --text: #e8e8e8;
  --text-muted: #666;
  --border: #252525;
  --shadow: 0 4px 24px rgba(0,0,0,.6);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.5);
}

/* Smooth transition when switching theme */
*, *::before, *::after {
  transition: background-color .3s ease, border-color .3s ease, color .2s ease;
}
/* But don't apply transition to animations */
.confetti-piece, .ripple, .particle { transition: none !important; }

[data-theme="dark"] body { background: var(--bg); color: var(--text); }

[data-theme="dark"] .stat-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .my-order-card,
[data-theme="dark"] .seller-product-row,
[data-theme="dark"] .seller-row,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .add-seller-form { background: #141414; border-color: #252525; color: var(--text); }

[data-theme="dark"] .search-bar { background: #141414; border-color: #252525; }
[data-theme="dark"] .search-bar input { background: transparent; color: var(--text); }
[data-theme="dark"] .search-bar i { color: #555; }

[data-theme="dark"] .cat-btn { background: #141414; border-color: #2a2a2a; color: #888; }
[data-theme="dark"] .cat-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

[data-theme="dark"] .modal { background: #141414; color: var(--text); }
[data-theme="dark"] .cart-sidebar { background: #111; }
[data-theme="dark"] .cart-item { background: #1a1a1a; border-color: #252525; }
[data-theme="dark"] .cart-item-name { color: var(--text); }

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
  background: #1a1a1a;
  border-color: #333;
  color: var(--text);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder { color: #444; }
[data-theme="dark"] .form-group label { color: #bbb; }
[data-theme="dark"] h4 { color: #e0e0e0; }

[data-theme="dark"] .payment-badge { background: #1a1400; border-color: #3d2e00; }
[data-theme="dark"] .order-summary { background: #1a1a1a; }
[data-theme="dark"] .order-summary-row { color: #ccc; }

[data-theme="dark"] .paste-zone { background: #111; border-color: #2a2a2a; color: #666; }
[data-theme="dark"] .paste-zone:hover { background: #1a1a1a; border-color: var(--accent); }

[data-theme="dark"] .panel-header select { background: #1a1a1a; border-color: #333; color: var(--text); }
[data-theme="dark"] .order-actions select { background: #1a1a1a; border-color: #333; color: var(--text); }

[data-theme="dark"] .section-header h2 { color: var(--text); }

/* Neon glow on accent elements in dark mode */
[data-theme="dark"] .nav-btn.active,
[data-theme="dark"] .dash-nav-btn.active {
  box-shadow: 0 0 16px rgba(201,168,76,.5), 0 2px 12px rgba(201,168,76,.3);
}
[data-theme="dark"] .btn-accent {
  box-shadow: 0 0 20px rgba(201,168,76,.5), 0 4px 16px rgba(201,168,76,.3);
}
[data-theme="dark"] .cart-btn {
  box-shadow: 0 0 16px rgba(201,168,76,.4);
}
[data-theme="dark"] .whatsapp-float {
  box-shadow: 0 0 20px rgba(37,211,102,.5);
}
[data-theme="dark"] .profile-dropdown {
  background: var(--primary-light);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .profile-dropdown-item:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .profile-dropdown-item.danger:hover { background: rgba(229,57,53,.15); }
[data-theme="dark"] .stat-card {
  box-shadow: 0 0 0 1px rgba(201,168,76,.1), var(--shadow-sm);
}
[data-theme="dark"] .product-card {
  background: #141414;
  border-color: #252525;
}
[data-theme="dark"] .product-card:hover {
  border-color: rgba(201,168,76,.5);
  box-shadow: 0 0 24px rgba(201,168,76,.15), 0 12px 40px rgba(0,0,0,.5);
}
[data-theme="dark"] .product-name,
[data-theme="dark"] .product-price { color: var(--text); }
[data-theme="dark"] .product-img { background: #1a1a1a; }

[data-theme="dark"] .my-order-id,
[data-theme="dark"] .order-id { color: var(--accent); }

[data-theme="dark"] .btn-outline { background: transparent; border-color: #333; color: #ccc; }
[data-theme="dark"] .btn-outline:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .btn-edit { background: #1a1a1a; color: #ccc; border-color: #333; }
[data-theme="dark"] .btn-edit:hover { background: var(--primary); color: #fff; }

/* ===== CONFETTI ===== */
#confettiContainer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  animation: confettiFall linear forwards;
  border-radius: 2px;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) scale(0.5); opacity: 0; }
}

/* ===== RIPPLE ===== */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: rippleAnim .55s linear;
  pointer-events: none;
  z-index: 10;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ===== PARTICLE BURST ===== */
.particle {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9998;
  animation: particleBurst .5s ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== TAB FADE TRANSITION ===== */
.tab-fade {
  animation: tabFadeIn .3s ease both;
}
.dash-fade {
  animation: tabFadeIn .25s ease both;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===== ANIMATED HERO GRADIENT ===== */
.hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1f00 25%, #1a1a1a 50%, #001a0d 75%, #1a1a1a 100%);
  background-size: 400% 400%;
  animation: heroGradient 10s ease infinite;
  position: relative;
  overflow: hidden;
}
@keyframes heroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== FLOATING HERO PARTICLES ===== */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero > .hero-content,
.hero > .hero-graphic { position: relative; z-index: 1; }
.float-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(201,168,76,.55);
  animation: floatUp linear infinite;
  pointer-events: none;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .4; }
  100% { transform: translateY(-110%) scale(.5); opacity: 0; }
}

/* ===== CURSOR TRAIL ===== */
.cursor-trail {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(201,168,76,.7);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  animation: trailFade .6s ease-out forwards;
}
@keyframes trailFade {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
}

/* Keep card content above any stacking context */
.product-card { position: relative; isolation: isolate; }

/* ===== STAT COUNTER ANIMATION ===== */
.stat-value {
  display: inline-block;
  transition: none;
}
.stat-value.counting {
  animation: statPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes statPop {
  0%   { transform: scale(.8); opacity: .4; }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ===== MAGNETIC BUTTON — visual feedback ===== */
.btn, .nav-btn, .dash-nav-btn, .add-cart-btn {
  transition: transform .15s ease, box-shadow .15s ease, background .2s, border-color .2s, color .2s;
}

/* ===== MOVING GLOW UNDER HEADER ===== */
header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a84c, #e2c36e, #c9a84c, transparent);
  background-size: 200% 100%;
  animation: headerGlow 3s linear infinite;
}
@keyframes headerGlow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
header { position: relative; overflow: visible; }


/* ===== PULSING CART BADGE ===== */
.cart-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); box-shadow: 0 0 8px rgba(201,168,76,.8); }
}

/* ===== CINEMATIC WELCOME SCREEN ===== */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
  overflow: hidden;
}
.welcome-screen.show    { opacity: 1; pointer-events: all; }
.welcome-screen.hiding  { opacity: 0; pointer-events: none; }

/* Film grain / noise overlay */
.welcome-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity: .35;
  pointer-events: none;
  animation: noiseFlicker 1.2s steps(2) infinite;
}
@keyframes noiseFlicker { 0%,100%{opacity:.35} 50%{opacity:.28} }

/* Ambient gold gradient blobs */
.welcome-screen::before {
  content: '';
  position: absolute;
  top: -25%; left: -15%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 65%);
  animation: wOrb 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.welcome-screen::after {
  content: '';
  position: absolute;
  bottom: -25%; right: -15%;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 65%);
  animation: wOrb 11s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes wOrb {
  from { transform: translate(0,0) scale(1);    }
  to   { transform: translate(40px,-40px) scale(1.15); }
}

/* Scan line that sweeps once */
.welcome-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.6) 50%, transparent 100%);
  top: -2px;
  animation: wScan 1.2s cubic-bezier(.4,0,.2,1) .3s forwards;
  pointer-events: none;
}
@keyframes wScan {
  0%   { top: -2px;   opacity: 0; }
  10%  { opacity: 1; }
  100% { top: 102%;  opacity: 0; }
}

.welcome-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ── Card content ── */
.welcome-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 28px;
  max-width: 540px;
  width: 100%;
}

.welcome-logo {
  height: 52px;
  background: #fff;
  border-radius: 10px;
  padding: 5px 14px;
  opacity: 0;
  animation: wLogoIn .6s cubic-bezier(.34,1.56,.64,1) .2s forwards;
}
@keyframes wLogoIn {
  from { opacity:0; transform: scale(.7) translateY(-12px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Gold divider line that draws itself */
.welcome-divider {
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #c9a84c 40%, #f5d98b 60%, #c9a84c, transparent);
  margin: 22px auto 22px;
  animation: wDivider .8s ease .5s forwards;
}
@keyframes wDivider { to { width: 180px; } }

.welcome-greeting {
  font-size: clamp(12px, 2.2vw, 14px);
  font-weight: 600;
  color: rgba(255,255,255,.4);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: 0;
  animation: wFadeUp .5s ease .7s forwards;
  margin-bottom: 10px;
}

/* Name — clip-path reveal from left */
.welcome-name {
  font-size: clamp(42px, 10vw, 82px);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(110deg, #8a6a1e 0%, #c9a84c 30%, #f5d98b 55%, #c9a84c 75%, #8a6a1e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  clip-path: inset(0 100% 0 0);
  animation: wNameReveal .75s cubic-bezier(.77,0,.18,1) .85s forwards,
             wGoldFlow 4s linear 1.6s infinite;
  margin-bottom: 18px;
  letter-spacing: -.02em;
}
@keyframes wNameReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes wGoldFlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.welcome-sub {
  font-size: clamp(13px, 2vw, 15px);
  color: rgba(255,255,255,.38);
  font-weight: 400;
  letter-spacing: .06em;
  opacity: 0;
  animation: wFadeUp .5s ease 1.3s forwards;
  margin-bottom: 30px;
}

/* Progress countdown bar */
.welcome-progress {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  margin: 0 auto 16px;
  overflow: hidden;
  opacity: 0;
  animation: wFadeUp .4s ease 1.5s forwards;
}
.welcome-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #c9a84c, #f5d98b);
  transform-origin: left;
  animation: wProgress 3.2s linear 1.6s forwards;
}
@keyframes wProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.welcome-hint {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  animation: wFadeUp .4s ease 1.8s forwards;
}

@keyframes wFadeUp {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .welcome-logo  { height: 42px; }
  .welcome-divider { animation: wDivider .8s ease .5s forwards; }
}

/* ===== DELIVERY TOGGLE ===== */
.delivery-toggle-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.delivery-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.delivery-option i { font-size: 20px; color: var(--text-muted); transition: color .2s; }
.delivery-option strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.delivery-option span   { font-size: 11px; color: var(--text-muted); }
.delivery-option.active {
  border-color: var(--accent);
  background: rgba(201,168,76,.07);
}
.delivery-option.active i { color: var(--accent); }
.collection-info-box {
  background: rgba(201,168,76,.08);
  border: 1.5px solid rgba(201,168,76,.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.collection-info-box i { color: var(--accent); }

/* ===== CHAT MODAL ===== */
.chat-modal {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  padding: 0;
  overflow: hidden;
  max-width: 480px;
}
.chat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}
.chat-order-info { display: flex; align-items: center; gap: 10px; }
.chat-order-id   { font-weight: 700; font-size: 15px; color: var(--accent); }
.chat-status-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(201,168,76,.12); color: var(--accent);
}

/* Tracking strip inside chat */
.chat-tracking {
  background: var(--bg);
  border-bottom: 1.5px solid var(--border);
  padding: 14px 20px;
  flex-shrink: 0;
  overflow-x: auto;
}
.chat-tracking-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
}
/* Timeline reuse — already defined */

/* Status history list */
.status-history {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.status-history-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.status-history-time { color: var(--text-muted); font-size: 11px; }

/* Chat messages */
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}
.chat-loading { text-align: center; color: var(--text-muted); padding: 20px; }
.chat-empty   { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px 0; }

.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.chat-bubble-wrap.mine  { align-self: flex-end; align-items: flex-end; }
.chat-bubble-wrap.theirs { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-bubble-wrap.mine  .chat-bubble {
  background: var(--accent);
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.chat-bubble-wrap.theirs .chat-bubble {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-meta {
  font-size: 10px; color: var(--text-muted);
  margin-top: 3px; padding: 0 4px;
}
.chat-sender { font-weight: 700; font-size: 11px; margin-bottom: 3px; color: var(--text-muted); }

/* seller tag */
.chat-bubble-wrap.theirs .chat-sender { color: var(--accent); }

/* Input row */
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1.5px solid var(--border);
  background: var(--card-bg);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.chat-input:focus { border-color: var(--accent); }
.chat-send-btn {
  width: 42px; height: 42px;
  background: var(--accent);
  border: none; border-radius: 50%;
  color: #1a1a1a; font-size: 15px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, background .2s;
}
.chat-send-btn:hover { background: var(--accent-light); transform: scale(1.08); }

/* Chat badge on order cards */
.chat-badge-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ef5350;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

[data-theme="dark"] .chat-bubble-wrap.theirs .chat-bubble { background: #1e1e1e; }
[data-theme="dark"] .chat-input { background: #1a1a1a; border-color: #333; color: var(--text); }
[data-theme="dark"] .chat-tracking { background: #111; }
[data-theme="dark"] .delivery-option { border-color: #2a2a2a; }
[data-theme="dark"] .delivery-option.active { background: rgba(201,168,76,.1); }

@media (max-width: 640px) {
  .chat-modal { max-height: 94vh; }
  .delivery-toggle-wrap { grid-template-columns: 1fr; }
}

/* ===== ENHANCED SUCCESS MODAL ===== */
.success-modal-wrap .modal { overflow: hidden; }
.success-modal {
  padding: 36px 28px;
  text-align: center;
}
/* Animated SVG checkmark */
.success-check-ring {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  animation: ringPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ringPop {
  from { transform: scale(0) rotate(-45deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.success-svg { width: 80px; height: 80px; }
.success-circle {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: drawCircle .5s ease .1s forwards;
}
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
.success-tick {
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: drawTick .35s ease .55s forwards;
}
@keyframes drawTick {
  to { stroke-dashoffset: 0; }
}
.success-title {
  font-size: 22px; font-weight: 800;
  color: var(--text);
  animation: fadeSlideUp .4s ease .6s both;
}
.success-subtitle {
  color: var(--text-muted); font-size: 14px; margin: 8px 0 12px;
  animation: fadeSlideUp .4s ease .7s both;
}
.order-id-display {
  font-family: monospace; font-size: 13px;
  background: var(--bg); border: 1.5px dashed var(--border);
  border-radius: 8px; padding: 8px 14px; display: inline-block;
  color: var(--accent); font-weight: 700;
  animation: fadeSlideUp .4s ease .8s both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.success-items {
  margin: 14px 0;
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1.5px solid var(--border);
  padding-top: 12px;
  animation: fadeSlideUp .4s ease .9s both;
  max-height: 140px;
  overflow-y: auto;
}
.success-item-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.success-item-row:last-child { border-bottom: none; }
.success-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px;
  animation: fadeSlideUp .4s ease 1s both;
}

/* ===== ORDER TRACKING TIMELINE ===== */
.order-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 14px 0 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.timeline-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.timeline-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted);
  transition: all .3s;
}
.timeline-dot.done   { background: var(--accent); border-color: var(--accent); color: #1a1a1a; }
.timeline-dot.active { background: var(--accent); border-color: var(--accent); color: #1a1a1a;
  box-shadow: 0 0 0 4px rgba(201,168,76,.2);
  animation: timelinePulse 1.8s ease-in-out infinite;
}
@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201,168,76,.2); }
  50%       { box-shadow: 0 0 0 8px rgba(201,168,76,.1); }
}
.timeline-label {
  font-size: 10px; color: var(--text-muted); font-weight: 600;
  white-space: nowrap;
}
.timeline-line {
  width: 28px; height: 2px;
  background: var(--border);
  flex-shrink: 0;
  margin-bottom: 18px;
}
.timeline-line.done { background: var(--accent); }

/* ===== CHARTS PANEL ===== */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.chart-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.chart-card-full { grid-column: 1 / -1; }
.chart-title {
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap-sm { height: 200px; }

[data-theme="dark"] .chart-card { background: #141414; border-color: #252525; }

@media (max-width: 640px) {
  .charts-grid { grid-template-columns: 1fr; }
  .chart-card-full { grid-column: auto; }
  .chart-wrap { height: 180px; }
}

/* ===== LOGO CLICK ANIMATION ===== */
.logo-img-sm {
  cursor: pointer;
  transform-origin: center bottom;
}
.logo-img-sm.logo-bounce {
  animation: logoBounce .7s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes logoBounce {
  0%   { transform: scale(1)    translateY(0)    rotate(0deg); }
  15%  { transform: scale(1.18) translateY(-14px) rotate(-6deg); }
  30%  { transform: scale(1.22) translateY(-20px) rotate(4deg); }
  50%  { transform: scale(1.15) translateY(-12px) rotate(-3deg); }
  65%  { transform: scale(1.08) translateY(-4px)  rotate(1deg); }
  80%  { transform: scale(1.03) translateY(-1px)  rotate(0deg); }
  100% { transform: scale(1)    translateY(0)    rotate(0deg); }
}

/* ===================================================================
   BOUTIQUE THEMES — override accent per boutique
   =================================================================== */
/* components = default (gold) — no override needed */
[data-boutique="divers"] {
  --accent:       #6366f1;
  --accent-light: #818cf8;
}
[data-boutique="garden"] {
  --accent:       #db2777;
  --accent-light: #f472b6;
}
[data-theme="light"][data-boutique="garden"] {
  --bg:      #fff8fb;
  --card-bg: #ffffff;
}

/* ── Divers hero: deep indigo editorial ── */
[data-boutique="divers"] .hero {
  background: linear-gradient(135deg, #06061a 0%, #0f0e2e 20%, #1a1050 45%, #0f0e2e 70%, #06061a 100%) !important;
  background-size: 400% 400% !important;
  animation: heroDivers 12s ease infinite !important;
}
@keyframes heroDivers {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
[data-boutique="divers"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(99,102,241,.18) 0%, transparent 65%);
  pointer-events: none;
}
[data-boutique="divers"] .float-particle {
  background: rgba(129,140,248,.6) !important;
}
[data-boutique="divers"] .cursor-trail {
  background: rgba(129,140,248,.75) !important;
}

/* ── Garden hero: blooming pink/rose ── */
[data-boutique="garden"] .hero {
  background: linear-gradient(135deg, #1a0516 0%, #3b0a28 20%, #6b1042 50%, #3b0a28 75%, #1a0516 100%) !important;
  background-size: 400% 400% !important;
  animation: heroGarden 10s ease infinite !important;
}
@keyframes heroGarden {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
[data-boutique="garden"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(244,114,182,.14) 0%, transparent 65%);
  pointer-events: none;
}
[data-boutique="garden"] .float-particle {
  background: rgba(249,168,212,.65) !important;
}
[data-boutique="garden"] .cursor-trail {
  background: rgba(244,114,182,.75) !important;
}

/* ── Garden ambient petals overlay — lives INSIDE .hero, clipped by it ── */
.garden-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.garden-ambient-petal {
  position: absolute;
  font-size: 22px;
  opacity: 0;
  animation: gardenPetalFall linear infinite;
  user-select: none;
}
@keyframes gardenPetalFall {
  0%   { transform: translateY(-60px) rotate(0deg);   opacity: 0; }
  8%   { opacity: .6; }
  88%  { opacity: .35; }
  100% { transform: translateY(700px) rotate(540deg); opacity: 0; }
}

/* ── Divers ambient stars overlay — lives INSIDE .hero, clipped by it ── */
.divers-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.divers-ambient-star {
  position: absolute;
  color: #a5b4fc;
  opacity: 0;
  animation: diversStarFloat linear infinite;
  user-select: none;
}
@keyframes diversStarFloat {
  0%   { transform: translateY(700px) scale(.6) rotate(0deg);   opacity: 0; }
  8%   { opacity: .5; }
  90%  { opacity: .25; }
  100% { transform: translateY(-80px) scale(1.1) rotate(360deg); opacity: 0; }
}

/* ===================================================================
   BOUTIQUE LANDING PAGE — rich dark background
   =================================================================== */

/* Seal the gap: make the whole landing section dark so the body bg never shows */
#boutiqueLanding {
  display: flex;
  flex-direction: column;
  background: #06060e;
  min-height: 100vh;
}

/* ── Seal every gap: kill footer margin-top when landing is visible ── */
body.landing-mode .footer { margin-top: 0 !important; }

/* ── Dark mode: body + mainApp + footer all dark ── */
body.landing-mode,
body.landing-mode #mainApp {
  background: #06060e !important;
}
body.landing-mode .footer {
  background: #06060e !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Light mode: body + mainApp + footer all match the light landing ── */
html[data-theme="light"] body.landing-mode,
html[data-theme="light"] body.landing-mode #mainApp {
  background: #f4f6f9 !important;
}
html[data-theme="light"] body.landing-mode .footer {
  background: #e8ecf2 !important;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(30,30,50,.55) !important;
}
html[data-theme="light"] body.landing-mode .footer-brand,
html[data-theme="light"] body.landing-mode .footer-brand strong {
  color: #1a1a2e !important;
}
html[data-theme="light"] body.landing-mode .footer-copy {
  border-top-color: rgba(0,0,0,.07) !important;
  color: rgba(30,30,50,.4) !important;
}

/* ===== BOUTIQUE LANDING — LIGHT MODE OVERRIDES ===== */
html[data-theme="light"] #boutiqueLanding {
  background: #f4f6f9;
}
/* Clean neutral grey-white that breathes — professional, not pastel */
html[data-theme="light"] .boutique-landing {
  background-image: linear-gradient(135deg,
    #f4f6f9 0%,
    #edf0f5 25%,
    #f4f6f9 50%,
    #eef1f6 75%,
    #f4f6f9 100%
  ) !important;
}
/* Aurora wash: soft pastels in light mode */
html[data-theme="light"] .boutique-landing::before {
  background-image: linear-gradient(
    120deg,
    rgba(201,168,76,.15)  0%,
    transparent           22%,
    rgba(99,102,241,.12)  50%,
    transparent           72%,
    rgba(219,39,119,.12)  100%
  ) !important;
}
/* Beam: bright shimmer on light canvas */
html[data-theme="light"] .boutique-landing::after {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.7) 50%,
    transparent 70%
  ) !important;
}

/* Orbs: very subtle tints on neutral canvas — professional, not pastel */
html[data-theme="light"] .bl-orb-gold {
  background: radial-gradient(circle, rgba(201,168,76,.15), transparent 65%) !important;
  filter: blur(100px) !important;
}
html[data-theme="light"] .bl-orb-violet {
  background: radial-gradient(circle, rgba(99,102,241,.12), transparent 65%) !important;
  filter: blur(100px) !important;
}
html[data-theme="light"] .bl-orb-pink {
  background: radial-gradient(circle, rgba(219,39,119,.1), transparent 65%) !important;
  filter: blur(100px) !important;
}

/* Dot grid: finer, darker on light bg */
html[data-theme="light"] .bl-grid-overlay {
  background-image: radial-gradient(circle, rgba(0,0,0,.07) 1px, transparent 1px) !important;
}

/* Aurora overlay: neutral in light mode */
html[data-theme="light"] .boutique-landing::before {
  background-image: linear-gradient(
    120deg,
    rgba(201,168,76,.07)  0%,
    transparent           30%,
    rgba(99,102,241,.06)  55%,
    transparent           75%,
    rgba(30,30,60,.04)    100%
  ) !important;
}

/* Title + subtitle text: dark, professional */
html[data-theme="light"] .bl-title       { color: #0f172a; }
html[data-theme="light"] .bl-title-accent { color: #b8950a; }
html[data-theme="light"] .bl-subtitle    { color: rgba(15,23,42,.45); }

/* Hover effects: same but on lighter canvas */
html[data-theme="light"] .boutique-landing[data-hover="components"] .bl-orb-gold   { filter: blur(55px); opacity: .85; }
html[data-theme="light"] .boutique-landing[data-hover="divers"]     .bl-orb-violet { filter: blur(55px); opacity: .85; }
html[data-theme="light"] .boutique-landing[data-hover="garden"]     .bl-orb-pink   { filter: blur(55px); opacity: .85; }

/* ───────────────────────────────────────────────
   BOUTIQUE CARDS — LIGHT MODE (clean + professional)
   ─────────────────────────────────────────────── */
html[data-theme="light"] .boutique-card {
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
  border: 1.5px solid rgba(0,0,0,.07);
}

/* Coloured top glow-bar stays — it IS the accent */
html[data-theme="light"] .bc-components { border-top: 3px solid #c9a84c; }
html[data-theme="light"] .bc-divers     { border-top: 3px solid #6366f1; }
html[data-theme="light"] .bc-garden     { border-top: 3px solid #db2777; }

html[data-theme="light"] .bc-components:hover { box-shadow: 0 16px 48px rgba(201,168,76,.2); }
html[data-theme="light"] .bc-divers:hover     { box-shadow: 0 16px 48px rgba(99,102,241,.2); }
html[data-theme="light"] .bc-garden:hover     { box-shadow: 0 16px 48px rgba(219,39,119,.2); }

/* Hide dark decorative shapes — too heavy on white */
html[data-theme="light"] .bc-fashion-shapes,
html[data-theme="light"] .bc-circuit-svg  { opacity: .12; }

/* Text */
html[data-theme="light"] .bc-name { color: #0f172a !important; }
html[data-theme="light"] .bc-desc { color: rgba(15,23,42,.55) !important; }

html[data-theme="light"] .bc-components .bc-icon { color: #b8950a; }
html[data-theme="light"] .bc-divers    .bc-icon  { color: #4f46e5; }
html[data-theme="light"] .bc-garden    .bc-icon  { color: #be185d; }

html[data-theme="light"] .bc-components .bc-sub  { color: #b8950a; }
html[data-theme="light"] .bc-divers    .bc-sub   { color: #4f46e5; }
html[data-theme="light"] .bc-garden    .bc-sub   { color: #be185d; }

/* Enter buttons: solid filled, clear CTA */
html[data-theme="light"] .bc-components .bc-enter {
  background: #c9a84c; color: #fff;
  border: none;
}
html[data-theme="light"] .bc-divers .bc-enter {
  background: #6366f1; color: #fff;
  border: none;
}
html[data-theme="light"] .bc-garden .bc-enter {
  background: #db2777; color: #fff;
  border: none;
}

/* Tech tags */
html[data-theme="light"] .bc-tag {
  color: #92720c;
  border-color: rgba(201,168,76,.4);
  opacity: .9;
}

.boutique-landing {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
  /* Animated base gradient — the background itself shifts colour */
  background: linear-gradient(135deg,
    #06060e 0%,
    #0c0520 25%,
    #06060e 50%,
    #140820 75%,
    #06060e 100%
  );
  background-size: 400% 400%;
  animation: landingBgShift 14s ease infinite;
  position: relative;
  overflow: hidden;
}
@keyframes landingBgShift {
  0%   { background-position: 0%   0%;   }
  25%  { background-position: 100% 50%;  }
  50%  { background-position: 50%  100%; }
  75%  { background-position: 0%   50%;  }
  100% { background-position: 0%   0%;   }
}

/* ── Aurora colour wash — stronger, more visible ── */
.boutique-landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(201,168,76,.18)  0%,
    transparent           22%,
    rgba(99,102,241,.16)  50%,
    transparent           72%,
    rgba(219,39,119,.14)  100%
  );
  background-size: 400% 400%;
  animation: landingAurora 16s ease infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes landingAurora {
  0%   { background-position: 0%   50%; opacity: .7; }
  33%  { background-position: 100% 30%; opacity: 1;  }
  66%  { background-position: 60% 100%; opacity: .6; }
  100% { background-position: 0%   50%; opacity: .7; }
}

/* ── Sweeping diagonal beam of light ── */
.boutique-landing::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 60%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.04) 50%,
    transparent 70%
  );
  animation: landingBeamSweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes landingBeamSweep {
  0%   { left: -100%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { left: 160%;  opacity: 1; }
  75%  { opacity: 0; }
  100% { left: 160%;  opacity: 0; }
}

/* Atmospheric glowing orbs */
.bl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  transition: opacity .6s ease, filter .6s ease;
}
.bl-orb-gold   {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,.55), transparent 65%);
  top: -200px; left: -180px;
  animation: orbDrift1 12s ease-in-out infinite;
}
.bl-orb-violet {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(99,102,241,.5), transparent 65%);
  bottom: -200px; right: -160px;
  animation: orbDrift2 15s ease-in-out infinite;
}
.bl-orb-pink   {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(219,39,119,.45), transparent 65%);
  top: 40%; left: 50%; transform: translateY(-50%);
  animation: orbDrift3 10s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%   { transform: translate(0, 0) scale(1);         opacity: .4; }
  30%  { transform: translate(30px, 20px) scale(1.1); opacity: .75; }
  60%  { transform: translate(50px, -10px) scale(.95); opacity: .55; }
  100% { transform: translate(0, 0) scale(1);         opacity: .4; }
}
@keyframes orbDrift2 {
  0%   { transform: translate(0, 0) scale(1);          opacity: .35; }
  25%  { transform: translate(-20px,-30px) scale(1.12); opacity: .7;  }
  55%  { transform: translate(10px, -50px) scale(.9);  opacity: .45; }
  100% { transform: translate(0, 0) scale(1);          opacity: .35; }
}
@keyframes orbDrift3 {
  0%   { transform: translateY(-50%) scale(1);    opacity: .3; }
  35%  { transform: translateY(-62%) scale(1.18); opacity: .65; }
  70%  { transform: translateY(-44%) scale(.92);  opacity: .4; }
  100% { transform: translateY(-50%) scale(1);    opacity: .3; }
}

/* ── Hover: surge the matching orb, kill the others ── */
.boutique-landing[data-hover="components"] .bl-orb-gold   { filter: blur(55px); opacity: 1; }
.boutique-landing[data-hover="components"] .bl-orb-violet { opacity: .08; }
.boutique-landing[data-hover="components"] .bl-orb-pink   { opacity: .08; }

.boutique-landing[data-hover="divers"] .bl-orb-violet { filter: blur(55px); opacity: 1; }
.boutique-landing[data-hover="divers"] .bl-orb-gold   { opacity: .08; }
.boutique-landing[data-hover="divers"] .bl-orb-pink   { opacity: .08; }

.boutique-landing[data-hover="garden"] .bl-orb-pink   { filter: blur(55px); opacity: 1; }
.boutique-landing[data-hover="garden"] .bl-orb-gold   { opacity: .08; }
.boutique-landing[data-hover="garden"] .bl-orb-violet { opacity: .08; }

/* Subtle dot-grid overlay */
.bl-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.boutique-landing-hero {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.bl-logo {
  width: 72px;
  background: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.bl-title {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.05;
}
.bl-title-accent { color: #c9a84c; }
.bl-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,.45);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.boutique-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1020px;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .boutique-cards-grid { grid-template-columns: 1fr; max-width: 440px; }
}

/* ── Base card ── */
.boutique-card {
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.boutique-card:hover {
  transform: translateY(-12px) scale(1.025);
}

/* ══════════════════════════════════
   COMPONENTS — Tech / Circuit board
   ══════════════════════════════════ */
.bc-components {
  background: linear-gradient(160deg, #0c0c0c 0%, #141414 60%, #1c1c1c 100%);
  border: 1px solid rgba(201,168,76,.2);
  box-shadow: 0 0 40px rgba(201,168,76,.07);
}
.bc-components:hover { box-shadow: 0 24px 60px rgba(201,168,76,.18); }

/* Circuit SVG background — breathe */
.bc-circuit-svg {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 180px; height: 160px;
  pointer-events: none;
  opacity: .55;
  animation: decorBreath 10s ease-in-out infinite 0.5s;
}
@keyframes decorBreath {
  0%   { opacity: 1;   transform: scale(1); }
  45%  { opacity: 1;   transform: scale(1); }
  60%  { opacity: 0;   transform: scale(.96); }
  80%  { opacity: 0;   transform: scale(.96); }
  95%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 1;   transform: scale(1); }
}
/* Technical tags */
.bc-tag {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  color: #c9a84c;
  opacity: .5;
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
}
.bc-tag-1 { top: 14px; right: 48px; }
.bc-tag-2 { top: 38px; right: 14px; font-size: 10px; }
.bc-tag-3 { top: 60px; right: 50px; font-size: 9px; }

/* ══════════════════════════════════
   DIVERS — Fashion editorial
   ══════════════════════════════════ */
.bc-divers {
  background: linear-gradient(160deg, #0d0d1a 0%, #15103a 40%, #1a1040 100%);
  border: 1px solid rgba(99,102,241,.25);
  box-shadow: 0 0 40px rgba(99,102,241,.06);
}
.bc-divers:hover { box-shadow: 0 24px 60px rgba(99,102,241,.22); }
/* Fashion abstract shapes — breathe */
.bc-fashion-shapes { position:absolute; inset:0; pointer-events:none; overflow:hidden;
  animation: decorBreath 11s ease-in-out infinite 1.5s; }
.bc-shape {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
}
.bc-shape-1 { width:160px;height:160px; background:#6366f1; top:-40px; right:-40px; }
.bc-shape-2 { width:90px; height:90px;  background:#818cf8; bottom:30px; left:-20px; }
.bc-shape-3 { width:50px; height:130px; background:#4f46e5; top:50%; right:20px; transform:rotate(20deg) translateY(-50%); border-radius:40px; }
/* Floating stars — breathe on offset cycle */
.bc-fashion-stars { position:absolute; inset:0; pointer-events:none;
  animation: decorBreath 7s ease-in-out infinite 3s; }
.bc-star { position:absolute; color:#818cf8; font-size:14px; animation:starPulse 3s ease-in-out infinite; }
.bc-star-1 { top:18px; right:22px; font-size:18px; animation-delay:0s; }
.bc-star-2 { top:52px; right:48px; font-size:10px; animation-delay:.8s; }
.bc-star-3 { bottom:60px; right:28px; font-size:13px; animation-delay:1.6s; }
@keyframes starPulse {
  0%,100% { opacity:.4; transform:scale(1); }
  50%      { opacity:.9; transform:scale(1.3); }
}

/* ══════════════════════════════════
   GARDEN — Botanical / Floral
   ══════════════════════════════════ */
.bc-garden {
  background: linear-gradient(160deg, #1a0516 0%, #3d0b2a 45%, #6b1042 80%, #9c1a5a 100%);
  border: 1px solid rgba(244,114,182,.25);
  box-shadow: 0 0 40px rgba(219,39,119,.07);
}
.bc-garden:hover { box-shadow: 0 24px 60px rgba(244,114,182,.28); }
/* Floating petals — fade group in/out on a cycle */
.bc-petals { position:absolute; inset:0; pointer-events:none; overflow:hidden;
  animation: decorBreath 9s ease-in-out infinite; }
.bc-petal {
  position: absolute;
  font-size: 22px;
  animation: petalFloat 6s ease-in-out infinite;
  opacity: .65;
}
.p1 { top:8px;  right:16px; animation-delay:0s;    font-size:26px; }
.p2 { top:50px; right:10px; animation-delay:1s;    font-size:18px; }
.p3 { top:20px; right:48px; animation-delay:2s;    font-size:15px; }
.p4 { bottom:50px; right:20px; animation-delay:.5s; font-size:20px; }
.p5 { bottom:80px; right:50px; animation-delay:1.5s;font-size:14px; }
.p6 { top:80px;  right:30px; animation-delay:2.5s; font-size:16px; }
@keyframes petalFloat {
  0%,100% { transform: translateY(0) rotate(0deg);  opacity:.65; }
  33%      { transform: translateY(-8px) rotate(8deg);  opacity:.85; }
  66%      { transform: translateY(4px) rotate(-5deg);  opacity:.55; }
}

/* ── Shared glow top edge ── */
.bc-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 22px 22px 0 0;
}
.bc-components .bc-glow { background: linear-gradient(90deg, transparent, #c9a84c, transparent); }
.bc-divers    .bc-glow  { background: linear-gradient(90deg, transparent, #818cf8, transparent); }
.bc-garden    .bc-glow  { background: linear-gradient(90deg, transparent, #f9a8d4, transparent); }

/* ── Content layer ── */
.bc-content {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.bc-icon { font-size: 36px; margin-bottom: 2px; }
.bc-components .bc-icon { color: #c9a84c; }
.bc-divers    .bc-icon  { color: #a5b4fc; }
.bc-garden    .bc-icon  { color: #fce7f3; }

.bc-brand { display:flex; flex-direction:column; gap:3px; }
.bc-name  { font-size:21px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1.15; }
.bc-sub   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.bc-components .bc-sub { color:#c9a84c; }
.bc-divers    .bc-sub  { color:#a5b4fc; }
.bc-garden    .bc-sub  { color:#fce7f3; }

.bc-desc  { font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.65; flex:1; }

.bc-enter {
  display: inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  padding:9px 18px; border-radius:50px; width:fit-content; margin-top:6px;
  transition: gap .25s, background .2s;
}
.boutique-card:hover .bc-enter { gap:14px; }
.bc-components .bc-enter { background:rgba(201,168,76,.15); color:#c9a84c; border:1px solid rgba(201,168,76,.3); }
.bc-divers    .bc-enter  { background:rgba(99,102,241,.18);  color:#a5b4fc; border:1px solid rgba(99,102,241,.3); }
.bc-garden    .bc-enter  { background:rgba(255,255,255,.12); color:#fff;   border:1px solid rgba(255,255,255,.28); }

/* ===== BOUTIQUE HEADER BADGE + BACK BTN ===== */
.boutique-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.boutique-back-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.boutique-header-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.boutique-sub-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .75;
}

/* ===== SELLER BOUTIQUE TABS ===== */
.seller-boutique-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
}
.sb-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
}
.sb-tab:hover { border-color: var(--accent); color: var(--accent); }
.sb-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.boutique-select-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
.boutique-select-input:focus { border-color: var(--accent); }

/* ===== SEARCH-FIRST STATE ===== */
.search-first-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.search-first-state i {
  font-size: 48px;
  opacity: .25;
  display: block;
  margin-bottom: 16px;
}
.search-first-state p {
  font-size: 15px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===================================================================
   PRODUCT DETAIL MODAL
   =================================================================== */
.product-detail-modal {
  max-width: 860px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border-radius: 20px;
}
.pd-close-btn {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px 0 0;
  z-index: 10;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.pd-close-btn:hover { background: var(--card-bg); color: var(--text); }
.pd-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 32px 32px 24px;
  clear: both;
}
@media (max-width: 600px) {
  .pd-main { grid-template-columns: 1fr; }
}
.pd-image-wrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border-radius: 14px;
  min-height: 240px;
  padding: 20px;
  margin-right: 28px;
}
@media (max-width: 600px) { .pd-image-wrap { margin-right: 0; margin-bottom: 20px; min-height: 180px; } }
.pd-image-wrap img { max-height: 260px; max-width: 100%; object-fit: contain; border-radius: 10px; }
.pd-no-img { font-size: 64px; color: var(--text-muted); opacity: .3; }

.pd-info { display: flex; flex-direction: column; gap: 12px; }
.pd-category {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
}
.pd-name { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; margin: 0; }
.pd-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0; }
.pd-price-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}
.pd-price { font-size: 26px; font-weight: 800; color: var(--accent); }
.pd-stock { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 50px;
  background: rgba(46,125,50,.1); color: #2e7d32; }
.pd-stock.out { background: rgba(198,40,40,.1); color: #c62828; }
.pd-stock.low { background: rgba(230,81,0,.1);  color: #e65100; }
.pd-add-btn { margin-top: 8px; font-size: 15px; padding: 13px; }

/* "You might also like" section */
.pd-related-section { padding: 0 32px 32px; border-top: 1.5px solid var(--border); margin-top: 8px; }
.pd-related-title {
  font-size: 16px; font-weight: 700; margin: 22px 0 16px;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.pd-related-title i { color: var(--accent); }
.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 600px) { .pd-related-grid { grid-template-columns: repeat(2, 1fr); } }
.pd-related-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  padding-bottom: 10px;
}
.pd-related-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pd-related-img {
  width: 100%; aspect-ratio: 1;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--text-muted); opacity: .4;
  overflow: hidden;
}
.pd-related-img img { width:100%; height:100%; object-fit:cover; }
.pd-related-name  { font-size: 12px; font-weight: 600; color: var(--text); padding: 8px 10px 2px; line-height: 1.3; }
.pd-related-price { font-size: 12px; font-weight: 700; color: var(--accent); padding: 0 10px; }

/* Product card — pointer cursor for clickability */
.product-card { cursor: pointer; }

/* ===== SEE MORE BANNER ===== */
.see-more-banner {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 20px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  background: var(--card-bg);
}
.see-more-banner p { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.see-more-banner .btn { font-size: 14px; }

/* ===== SEARCH-FIRST STATE ===== */
.search-first-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.search-first-state i { font-size: 48px; opacity:.25; display:block; margin-bottom:16px; }
.search-first-state p { font-size:15px; max-width:320px; margin:0 auto; line-height:1.6; }

/* ===== FC CURRENCY LABELS (seller form) ===== */
.fc-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: rgba(201,168,76,.15);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
  vertical-align: middle;
}
.fc-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(201,168,76,.07);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

/* ===== PRODUCT VARIANTS ===== */

/* Buyer — variant selector in product card */
.variant-select-wrap {
  margin: 10px 0 2px;
}
.variant-select-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.variant-select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.variant-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
@keyframes variantShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.variant-select.variant-shake {
  animation: variantShake .4s ease;
  border-color: var(--danger);
}

/* Seller — "N variants" badge in products list */
.variant-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: rgba(201,168,76,.15);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 50px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Seller — variants toggle checkbox */
.variants-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border);
  transition: border-color .2s;
  user-select: none;
}
.variants-toggle-label:hover { border-color: var(--accent); }
.variants-toggle-label input[type=checkbox] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Seller — variants section header */
.variants-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}

/* Seller — variant rows list */
.variant-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.variant-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  transition: border-color .2s;
}
.variant-row:hover { border-color: var(--accent); }
.variant-row-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
}
.variant-row .form-group { margin: 0; }
.variant-row .form-group label {
  font-size: 11px;
  margin-bottom: 4px;
  color: var(--text-muted);
}
.variant-row .form-group input {
  padding: 7px 10px;
  font-size: 13px;
}
.vr-remove {
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0;
}
@media (max-width: 680px) {
  .variant-row { flex-direction: column; align-items: stretch; }
  .variant-row-fields { grid-template-columns: 1fr 1fr; }
  .vr-remove { align-self: flex-end; }
}