/* ==========================================================================
   MONEYCLAN — Homepage stylesheet
   Premium minimal · black/white/leather palette · Cinzel + Jost
   ========================================================================== */

:root {
  --paper:      #faf8f4;
  --paper-tint: #f3efe7;
  --ink:        #1a1712;
  --ink-soft:   #5b564c;
  --line:       #e5dfd2;
  --tan:        #a87844;
  --tan-soft:   #c9a97e;
  --dark:       #17140f;
  --dark-2:     #211c14;
  --cream:      #f0e9dc;
  --cream-soft: #b9b0a0;
  --gold:       #d4af5f;
  --live:       #e04b3a;

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", sans-serif;

  --container: 1200px;
  --radius: 4px;
  --shadow: 0 18px 50px -18px rgba(23, 20, 15, .22);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Type helpers ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 14px;
  font-weight: 500;
}
.eyebrow.light { color: var(--tan-soft); }

.note {
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 10px;
}
.note.center { text-align: center; margin-top: 34px; }
.note.light { color: var(--cream-soft); }

.sub { max-width: 620px; margin: 14px auto 0; color: var(--cream-soft); }
.sub.dark { color: var(--ink-soft); margin: 14px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: all .25s ease;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--tan); border-color: var(--tan); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-light { border-color: var(--cream); color: var(--cream); margin-top: 30px; }
.btn-light:hover { background: var(--cream); color: var(--ink); }

.text-link {
  display: inline-block;
  margin-top: 18px;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tan);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.text-link:hover { border-color: var(--tan); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all .2s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--ink); }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--dark);
  color: var(--cream);
  text-align: center;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(23,20,15,.35); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-crown { width: 26px; height: 16px; align-self: center; color: var(--tan); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand-sub {
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--ink-soft);
  font-weight: 500;
}

.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.main-nav a:hover { border-color: var(--tan); color: var(--tan); }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Burger (mobile) */
.burger { display: none; flex-direction: column; gap: 5px; width: 26px; flex: none; position: relative; z-index: 95; }
.burger span { display: block; width: 100%; height: 2px; background: var(--ink); transition: all .3s; }
body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Language switcher ---------- */
.lang { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 40px;
  font-size: .8rem;
  letter-spacing: .1em;
  font-weight: 500;
  transition: border-color .2s;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-flag svg, .lang-menu svg {
  width: 22px; height: 15px;
  border-radius: 2px;
  display: block;
  outline: 1px solid rgba(23,20,15,.12);
}
.lang-btn .chev { width: 10px; height: 7px; transition: transform .25s; }
.lang.open .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all .22s ease;
}
.lang.open .lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s;
}
.lang-menu li:hover { background: var(--paper-tint); }
.lang-menu li.active { background: var(--paper-tint); font-weight: 500; }
.lang-menu li.active::after {
  content: "✓";
  margin-left: auto;
  color: var(--tan);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero { padding: 84px 0 96px; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}

.ornament { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; max-width: 340px; }
.ornament .rule { height: 1px; flex: 1; background: var(--ink); opacity: .75; }
.ornament .crown { width: 34px; height: 21px; color: var(--ink); flex: none; }

.hero h1 { margin-bottom: 24px; }
.lede { font-size: 1.12rem; font-weight: 300; color: var(--ink-soft); max-width: 480px; margin-bottom: 36px; }

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-points { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-points li {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-points li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--tan);
  transform: rotate(45deg);
}

.hero-visual { position: relative; }
.arch {
  border-radius: 300px 300px var(--radius) var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-width: 480px;
  margin-left: auto;
}
.arch img { width: 100%; height: 560px; object-fit: cover; }

.hero-chip {
  position: absolute;
  bottom: -26px;
  left: 4px;
  width: 140px;
  background: #fff;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  transform: rotate(-5deg);
}

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 16px 0;
  background: var(--paper);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 42px;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track i { font-style: normal; color: var(--tan); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-33.333%); } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-tinted { background: var(--paper-tint); }

.section-head { text-align: center; margin-bottom: 54px; }
.section-head.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  gap: 24px;
}
.scroller-nav { display: flex; gap: 10px; }

/* ---------- Categories ---------- */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 44px;
}
.aud-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 26px 30px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.aud-card h3 { font-size: 1.3rem; letter-spacing: .1em; }
.aud-card .arrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  opacity: 0;
  transform: translateX(-6px);
  transition: all .3s;
}
.aud-card:hover { border-color: var(--tan-soft); transform: translateY(-3px); box-shadow: var(--shadow); }
.aud-card:hover .arrow { opacity: 1; transform: translateX(0); }

.cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cat-card figure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-tint);
}
.cat-card img { transition: transform .5s ease; }
.cat-card:hover img { transform: scale(1.045); }
.cat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 0;
}
.cat-meta h3 { font-size: 1.05rem; letter-spacing: .06em; }
.cat-meta .arrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  opacity: 0;
  transform: translateX(-6px);
  transition: all .3s;
}
.cat-card:hover .arrow { opacity: 1; transform: translateX(0); }

/* ---------- Brand story ---------- */
.story { background: var(--dark); color: var(--cream); padding: 110px 0; }
.story-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 76px;
  align-items: center;
}
.story .frame {
  border: 1px solid rgba(240, 233, 220, .18);
  padding: 14px;
  border-radius: var(--radius);
}
.story .frame img { width: 100%; height: 520px; object-fit: cover; border-radius: 2px; }
.frame-cap {
  margin-top: 14px;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-soft);
  text-align: center;
}
.story h2 { margin-bottom: 22px; color: var(--cream); }
.story p { color: var(--cream-soft); max-width: 520px; }
.story p + p { margin-top: 14px; }

.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; color: var(--cream); font-weight: 300; }
.ticks li::before { content: "✓"; color: var(--gold); font-weight: 600; }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 42px 34px;
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step-num {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--tan);
  letter-spacing: .3em;
  display: block;
  margin-bottom: 18px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 12px; }
.step p { color: var(--ink-soft); font-weight: 300; font-size: .98rem; }

/* ---------- Reviews ---------- */
.reviews-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 340px);
  gap: 22px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--tan) transparent;
}
.review-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.review-media {
  position: relative;
  height: 210px;
  background: var(--paper-tint);
}
.review-media img { width: 100%; height: 100%; object-fit: cover; }
.review-media.video { background: linear-gradient(135deg, #2b251b, #17140f); }
.review-media.placeholder-a { background: linear-gradient(160deg, #e9e2d4, #d9cfba); }
.review-media.placeholder-b { background: linear-gradient(160deg, #d9d3c6, #c1b6a1); }
.review-media .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(240, 233, 220, .16);
  border: 1px solid rgba(240, 233, 220, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
}
.review-media .play svg { width: 20px; height: 20px; margin-left: 3px; }
.badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  letter-spacing: .08em;
  padding: 5px 11px;
  border-radius: 30px;
  background: rgba(250, 248, 244, .92);
  color: var(--ink);
  font-weight: 500;
}
.badge svg { width: 13px; height: 13px; }
.badge.video-badge { background: rgba(23, 20, 15, .82); color: var(--cream); }
.review-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.stars { color: var(--gold); letter-spacing: 3px; font-size: 1rem; }
.stars i { font-style: normal; color: var(--line); }
.review-body p { font-weight: 300; font-size: .97rem; color: var(--ink-soft); flex: 1; }
.review-body footer { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  letter-spacing: .06em;
  font-weight: 500;
  flex: none;
}
.review-body footer strong { display: block; font-size: .9rem; font-weight: 500; }
.review-body footer em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }

/* ---------- Live ---------- */
.live { background: var(--dark-2); color: var(--cream); padding: 100px 0; }
.live h2 { color: var(--cream); }
.live .section-head { margin-bottom: 48px; }
.live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.live-card {
  border: 1px solid rgba(240, 233, 220, .14);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(240, 233, 220, .03);
  transition: transform .3s, border-color .3s;
}
.live-card:hover { transform: translateY(-5px); border-color: rgba(240, 233, 220, .32); }
.live-thumb {
  position: relative;
  height: 200px;
}
.live-thumb.t1 { background: radial-gradient(120% 120% at 20% 10%, #4a3d28 0%, #241e14 58%, #17140f 100%); }
.live-thumb.t2 { background: radial-gradient(120% 120% at 80% 15%, #3c4550 0%, #1d2126 60%, #14161a 100%); }
.live-thumb.t3 { background: radial-gradient(120% 120% at 50% 0%, #4d3134 0%, #241a1b 60%, #171213 100%); }
.live-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px; height: 46px;
  border: 1px solid rgba(240, 233, 220, .35);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(240,233,220,.14) 0 40%, transparent 41%);
}
.live-badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--live);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  padding: 5px 12px;
  border-radius: 30px;
}
.live-badge i {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; transform: scale(.8); } }
.viewers {
  position: absolute;
  bottom: 12px; right: 12px;
  font-size: .74rem;
  letter-spacing: .06em;
  background: rgba(23, 20, 15, .72);
  padding: 5px 11px;
  border-radius: 30px;
  color: var(--cream);
}
.upcoming-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(240, 233, 220, .14);
  border: 1px solid rgba(240, 233, 220, .3);
  color: var(--cream);
  padding: 5px 12px;
  border-radius: 30px;
}
.live-meta { padding: 20px 22px 24px; }
.live-meta h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--cream); }
.live-meta p { font-size: .85rem; color: var(--cream-soft); letter-spacing: .04em; }

/* ---------- Awards / podium ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
  max-width: 980px;
  margin: 0 auto;
}
.podium-card {
  position: relative;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 46px 26px 34px;
}
.podium-card.first {
  border-color: var(--tan-soft);
  box-shadow: var(--shadow);
  padding-top: 64px;
  padding-bottom: 52px;
}
.crown.gold { width: 40px; height: 24px; color: var(--gold); margin: 0 auto 14px; display: block; }
.medal {
  position: absolute;
  top: -17px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.podium-card.first .medal { background: var(--gold); color: var(--dark); }
.podium-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.loc { font-size: .82rem; color: var(--ink-soft); letter-spacing: .06em; margin-bottom: 12px; }
.score { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }
.award-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan);
  border: 1px solid var(--tan-soft);
  padding: 6px 14px;
  border-radius: 30px;
}

/* ---------- Wholesale duo ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.duo-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 42px;
  transition: transform .3s, box-shadow .3s;
}
.duo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.duo-icon { width: 40px; height: 40px; color: var(--tan); margin-bottom: 20px; }
.duo-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.duo-card p { color: var(--ink-soft); font-weight: 300; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--dark); color: var(--cream); padding: 76px 0; }
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.newsletter h2 { color: var(--cream); margin-bottom: 8px; }
.newsletter p { color: var(--cream-soft); font-weight: 300; }
.newsletter form { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter input {
  flex: 1;
  min-width: 220px;
  background: transparent;
  border: 1px solid rgba(240, 233, 220, .35);
  border-radius: var(--radius);
  padding: 15px 18px;
  color: var(--cream);
  font: inherit;
  outline: none;
  transition: border-color .2s;
}
.newsletter input::placeholder { color: var(--cream-soft); }
.newsletter input:focus { border-color: var(--cream); }
.newsletter .btn-solid { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.newsletter .btn-solid:hover { background: var(--tan); border-color: var(--tan); color: var(--cream); }
.form-msg {
  flex-basis: 100%;
  font-size: .85rem;
  color: var(--gold);
  min-height: 1.2em;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark-2);
  color: var(--cream-soft);
  padding: 72px 0 36px;
  border-top: 1px solid rgba(240, 233, 220, .08);
}
.footer-brand { margin-bottom: 46px; }
.footer-logo { width: 300px; max-width: 70vw; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(240, 233, 220, .1);
}
.footer-grid h4 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: .85rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid nav { display: flex; flex-direction: column; gap: 9px; }
.footer-grid nav a { font-size: .92rem; font-weight: 300; transition: color .2s; }
.footer-grid nav a:hover { color: var(--cream); }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 38px; height: 38px;
  border: 1px solid rgba(240, 233, 220, .22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.socials a:hover { border-color: var(--cream); color: var(--cream); }
.socials svg { width: 16px; height: 16px; }
.footer-legal { padding-top: 28px; text-align: center; font-size: .85rem; }
.footer-legal .fine { font-size: .75rem; margin-top: 8px; opacity: .65; max-width: 640px; margin-inline: auto; }

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}

/* ==========================================================================
   Shop page
   ========================================================================== */
.main-nav a.active { border-color: var(--tan); color: var(--tan); }

.shop-hero {
  padding: 54px 0 34px;
  border-bottom: 1px solid var(--line);
}
.crumbs {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.crumbs a:hover { color: var(--tan); }
.crumbs span { margin: 0 6px; color: var(--tan); }
.shop-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.shop-hero .note { margin-top: 8px; }

.shop-body { padding: 40px 0 96px; }

.toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.chip-rows { display: grid; gap: 12px; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  font-size: .82rem;
  letter-spacing: .08em;
  font-weight: 500;
  transition: all .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-row.minor .chip { padding: 7px 14px; font-size: .76rem; }
.chip-row.minor .chip.active { background: var(--tan); border-color: var(--tan); }

.tool-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; width: auto; opacity: 0; pointer-events: none; }
.switch .track {
  width: 42px; height: 24px;
  border-radius: 30px;
  background: var(--line);
  position: relative;
  transition: background .25s;
  flex: none;
}
.switch .thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(23,20,15,.3);
  transition: transform .25s;
}
.switch input:checked + .track { background: var(--tan); }
.switch input:checked + .track .thumb { transform: translateX(18px); }
.switch-label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }

.sort-select {
  font: inherit;
  font-size: .85rem;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--tan); }

.results-line {
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .06em;
  margin-bottom: 26px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.p-media {
  position: relative;
  display: block;
  background: var(--paper-tint);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .p-media img { transform: scale(1.04); }
.p-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 30px;
  background: var(--dark);
  color: var(--cream);
}
.p-badge.new { background: var(--tan); }
.p-meta { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-meta h3 { font-size: 1.02rem; letter-spacing: .04em; }
.p-maker { font-size: .78rem; color: var(--ink-soft); letter-spacing: .05em; }
.p-rating { display: flex; align-items: center; gap: 8px; }
.p-rating .stars { font-size: .85rem; letter-spacing: 2px; }
.p-rating em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.p-price { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.p-price strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.bulk-line {
  display: none;
  font-size: .76rem;
  color: var(--tan);
  font-weight: 500;
  letter-spacing: .04em;
}
.products-grid.bulk-on .bulk-line { display: inline; }

.empty-state {
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-soft);
}
.empty-state .crown { width: 40px; height: 25px; color: var(--tan); margin-bottom: 14px; }
.empty-state p { margin-bottom: 22px; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 46px 0 0;
}
.page {
  min-width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .85rem;
  transition: all .2s;
}
.page:hover { border-color: var(--ink); }
.page.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.shop-wholesale {
  margin-top: 70px;
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.shop-wholesale h2 { color: var(--cream); font-size: 1.5rem; margin-bottom: 8px; }
.shop-wholesale p { color: var(--cream-soft); font-weight: 300; max-width: 560px; }
.shop-wholesale strong { color: var(--cream); }
.shop-wholesale .btn-solid { background: var(--cream); color: var(--ink); border-color: var(--cream); flex: none; }
.shop-wholesale .btn-solid:hover { background: var(--tan); border-color: var(--tan); color: var(--cream); }

@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .toolbar { flex-direction: column; }
}
@media (max-width: 560px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .p-meta { padding: 12px 12px 16px; }
  .shop-wholesale { padding: 34px 26px; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */
.pdp { padding: 34px 0 96px; }
.pdp-crumbs { margin-bottom: 30px; }
.pdp-crumbs em { font-style: normal; color: var(--ink); }

.pdp-top {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 80px;
}

.pdp-main {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  aspect-ratio: 4 / 5;
}
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-main .p-badge { top: 16px; left: 16px; }

.pdp-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.thumb {
  width: 84px; height: 100px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  padding: 0;
  transition: border-color .2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--tan-soft); }
.thumb.active { border-color: var(--ink); }

.pdp-info h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 6px 0 10px; }
.pdp-makerline { font-size: .9rem; color: var(--ink-soft); display: inline-block; margin-bottom: 12px; }
.pdp-makerline strong { color: var(--ink); font-weight: 500; }
.pdp-makerline:hover strong { color: var(--tan); }
.pdp-rating { margin-bottom: 24px; }
.pdp-revlink {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tan);
  margin-left: 6px;
  border-bottom: 1px solid transparent;
}
.pdp-revlink:hover { border-color: var(--tan); }

.pdp-pricebox {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 26px;
}
.pdp-pricerow { display: flex; align-items: baseline; gap: 10px; }
.pdp-pricerow strong { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.pdp-unit { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.pdp-bulkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: .9rem;
}
.pdp-bulkrow svg { width: 22px; height: 22px; color: var(--tan); flex: none; }
.pdp-bulkrow strong { color: var(--tan); font-weight: 600; }
.pdp-bulkrow a { color: var(--tan); text-decoration: underline; text-underline-offset: 3px; }

.pdp-option { margin-bottom: 22px; }
.pdp-label {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}
.pdp-hint { color: var(--live); text-transform: none; letter-spacing: .02em; font-weight: 400; }
.size-row { display: flex; gap: 10px; flex-wrap: wrap; }
.size-pill {
  min-width: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: .88rem;
  letter-spacing: .06em;
  transition: all .2s;
}
.size-pill:hover { border-color: var(--ink); }
.size-pill.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.qty-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.qty button {
  width: 42px; height: 44px;
  font-size: 1.15rem;
  transition: color .2s;
}
.qty button:hover { color: var(--tan); }
.qty span { min-width: 40px; text-align: center; font-weight: 500; }
.qty-note { font-size: .82rem; color: var(--ink-soft); }
.qty-note strong { color: var(--tan); }

.pdp-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pdp-perks { margin-top: 22px; display: grid; gap: 9px; }
.pdp-perks li {
  font-size: .85rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-perks li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--tan);
  transform: rotate(45deg);
  flex: none;
}

.pdp-desc {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.pdp-desc h2 { font-size: 1.35rem; margin-bottom: 16px; }
.pdp-desc-text p { color: var(--ink-soft); max-width: 560px; }
.dark-ticks li { color: var(--ink-soft); font-weight: 400; }
.dark-ticks li::before { color: var(--tan); }

.pdp-maker {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}
.pdp-maker-id { display: flex; align-items: center; gap: 24px; }
.maker-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(240,233,220,.35);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pdp-maker h2 { color: var(--cream); font-size: 1.5rem; margin: 2px 0 2px; }
.pdp-maker .loc { color: var(--cream-soft); margin-bottom: 8px; }
.pdp-maker .award-tag { margin-top: 10px; }
.pdp-maker-live { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.live-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(240,233,220,.2);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.live-mini .live-badge { position: static; }
.live-mini .live-badge.upcoming {
  background: rgba(240,233,220,.14);
  border: 1px solid rgba(240,233,220,.3);
  animation: none;
}
.live-mini .live-badge.upcoming i { display: none; }
.live-mini p { font-size: .88rem; color: var(--cream-soft); }
.pdp-maker .btn-light { margin-top: 0; }

.pdp-reviews { margin-bottom: 90px; }
.pdp-reviews .section-head { margin-bottom: 36px; }
.rev-count { color: var(--ink-soft); font-size: 1.1rem; }
.pdp-review-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: start;
}
.rev-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 30px;
  text-align: center;
  position: sticky;
  top: 100px;
}
.rev-big { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; }
.rev-summary .stars { margin: 8px 0 4px; }
.rev-total { font-size: .82rem; color: var(--ink-soft); margin-bottom: 20px; }
.rev-bars { display: grid; gap: 8px; text-align: left; }
.rev-bar-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ink-soft); }
.rev-bar-label { width: 24px; }
.rev-bar {
  flex: 1;
  height: 6px;
  background: var(--paper-tint);
  border-radius: 6px;
  overflow: hidden;
}
.rev-bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.rev-bar-pct { width: 34px; text-align: right; }

.rev-list { display: grid; gap: 18px; }
.rev-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 24px 26px;
}
.rev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rev-head strong { display: block; font-size: .92rem; font-weight: 500; }
.rev-head em { font-style: normal; font-size: .76rem; color: var(--ink-soft); }
.rev-head .stars { margin-left: auto; font-size: .9rem; }
.rev-card > p { color: var(--ink-soft); font-weight: 300; }
.rev-media-row { margin-top: 14px; }
.rev-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  letter-spacing: .08em;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
}
.rev-tag svg { width: 13px; height: 13px; }
.rev-tag.video { background: var(--dark); color: var(--cream); border-color: var(--dark); }

.related-grid { grid-template-columns: repeat(4, 1fr); }
.p-meta h3 a:hover { color: var(--tan); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--dark);
  color: var(--cream);
  font-size: .88rem;
  padding: 13px 22px;
  border-radius: 40px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  z-index: 200;
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1024px) {
  .pdp-top { gap: 40px; }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .pdp-top { grid-template-columns: 1fr; margin-bottom: 56px; }
  .pdp-desc { grid-template-columns: 1fr; gap: 34px; padding: 44px 0; }
  .pdp-maker { padding: 32px 26px; margin-bottom: 60px; }
  .pdp-review-grid { grid-template-columns: 1fr; }
  .rev-summary { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pdp-cta .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Maker profile page
   ========================================================================== */
.maker-page { padding: 34px 0 96px; }
.maker-hero {
  margin-bottom: 26px;
  align-items: flex-start;
}
.maker-hero-main { flex: 1; min-width: 300px; }
.maker-hero h1 { color: var(--cream); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2px 0 4px; }
.maker-story {
  margin-top: 24px;
  color: var(--cream-soft);
  font-weight: 300;
  max-width: 660px;
}
.maker-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.award-tag.plain { color: var(--cream-soft); border-color: rgba(240, 233, 220, .3); }
.maker-hero-live { flex: none; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  padding: 28px 16px;
}
.stat-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.stat-card span {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.maker-specialty { text-align: center; margin: 64px 0 0; }
.maker-specialty h2 { font-size: 1.45rem; }
.maker-products { margin: 54px 0 84px; }
.maker-reviews { margin-bottom: 70px; }
.maker-rev-list { grid-template-columns: 1fr 1fr; }
.rev-head em a { color: var(--tan); }
.rev-head em a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Brand page
   ========================================================================== */
.brand-hero { padding: 78px 0 70px; text-align: center; }
.ornament.center { margin: 0 auto 26px; max-width: 340px; }
.brand-hero h1 { margin: 12px 0 28px; }
.center-lede {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink-soft);
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.auth-copy h2 { margin-bottom: 18px; }
.auth-copy > p { color: var(--ink-soft); max-width: 480px; margin-bottom: 6px; }
.auth-copy .ticks { margin-top: 22px; }
.auth-btn { margin-top: 30px; }
.auth-visual {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.label-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
  transform: rotate(-4deg);
  width: 210px;
}
.label-card.photo { transform: rotate(3deg); width: 250px; padding: 10px; }
.label-card img { width: 100%; border-radius: 3px; }
.shop-wholesale .eyebrow { margin-bottom: 8px; }
.brand-cta { padding-top: 0; }

@media (max-width: 860px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .maker-rev-list { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; gap: 44px; }
  .maker-hero { flex-direction: column; }
}

/* ==========================================================================
   Join & Wholesale pages (forms, timeline, tiers)
   ========================================================================== */
.join-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: start;
}
.join-grid h2 { margin-bottom: 26px; }

.timeline { list-style: none; counter-reset: tl; position: relative; display: grid; gap: 26px; }
.timeline li {
  counter-increment: tl;
  position: relative;
  padding-left: 62px;
}
.timeline li::before {
  content: "0" counter(tl);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  border: 1px solid var(--tan-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--tan);
  background: #fff;
}
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px; top: 46px;
  bottom: -26px;
  width: 1px;
  background: var(--line);
}
.timeline strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.timeline p { color: var(--ink-soft); font-weight: 300; font-size: .96rem; }

.require-card {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 38px 36px;
  position: sticky;
  top: 100px;
}
.require-card h3 { font-size: 1.25rem; margin-bottom: 20px; color: var(--cream); }
.require-card .ticks li { color: var(--cream); }
.require-card .note { color: var(--cream-soft); margin-top: 20px; }

/* ---------- Forms ---------- */
.form-wrap { max-width: 860px; }
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 42px 44px;
  display: grid;
  gap: 22px;
}
.field { display: grid; gap: 8px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field label {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}
.field input, .field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--tan);
  background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: #a49c8d; }
.field .invalid { border-color: var(--live); background: #fdf4f2; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.form-actions .form-msg { color: var(--live); font-size: .85rem; min-height: 0; flex-basis: auto; }

.form-success {
  text-align: center;
  border: 1px solid var(--tan-soft);
  border-radius: var(--radius);
  background: #fff;
  padding: 60px 34px;
}
.form-success .crown { width: 44px; height: 27px; color: var(--tan); margin-bottom: 16px; }
.form-success h3 { font-size: 1.5rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 24px; }
.form-success em { display: block; font-size: .82rem; margin-top: 8px; }

/* Dark variants (logistics section) */
.logistics .section-head { margin-bottom: 44px; }
.logistics .form-card.dark-form {
  background: rgba(240, 233, 220, .04);
  border-color: rgba(240, 233, 220, .18);
  max-width: 860px;
  margin: 0 auto;
}
.dark-form .field label { color: var(--cream); }
.dark-form .field input, .dark-form .field select, .dark-form .field textarea {
  background: rgba(240, 233, 220, .06);
  border-color: rgba(240, 233, 220, .25);
  color: var(--cream);
}
.dark-form .field input:focus, .dark-form .field select:focus, .dark-form .field textarea:focus {
  border-color: var(--tan-soft);
  background: rgba(240, 233, 220, .1);
}
.dark-form .field input::placeholder, .dark-form .field textarea::placeholder { color: var(--cream-soft); }
.dark-form select option { color: var(--ink); }
.form-success.dark-success {
  background: rgba(240, 233, 220, .05);
  border-color: rgba(240, 233, 220, .3);
  max-width: 860px;
  margin: 0 auto;
}
.dark-success h3 { color: var(--cream); }
.dark-success p { color: var(--cream-soft); }

/* ---------- Tier table ---------- */
.tier-wrap { overflow-x: auto; }
.tier-table {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tier-table th, .tier-table td {
  padding: 16px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.tier-table th {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--cream);
  border-bottom: none;
}
.tier-table td:first-child { font-weight: 500; }
.tier-table td:nth-child(3), .tier-table td:nth-child(4) { color: var(--tan); font-weight: 500; }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table tbody tr:hover { background: var(--paper-tint); }

@media (max-width: 860px) {
  .join-grid { grid-template-columns: 1fr; gap: 46px; }
  .require-card { position: static; }
  .form-card { padding: 30px 22px; }
  .field-row { grid-template-columns: 1fr; }
  .tier-table th, .tier-table td { padding: 12px 14px; font-size: .9rem; }
}

/* ==========================================================================
   Contact & 404
   ========================================================================== */
.contact-top { padding-bottom: 56px; }
.contact-routes .step { display: block; }
.contact-routes .step h3 { transition: color .2s; }
.contact-routes .step:hover h3 { color: var(--tan); }

.error-page {
  text-align: center;
  padding: 110px 0 130px;
}
.error-crown { width: 54px; height: 33px; color: var(--tan); margin-bottom: 10px; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.error-page h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 16px; }
.error-page .center-lede { margin-bottom: 34px; }
.hero-cta.center { justify-content: center; }
.error-page .site-footer { margin-top: 0; }

/* ==========================================================================
   Auth & Account (PHP pages)
   ========================================================================== */
.account-btn { position: relative; }
.logged-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tan);
  border: 2px solid var(--paper);
}

.auth-hero { padding: 62px 0 44px; }
.auth-section { padding-top: 40px; }
.auth-wrap { max-width: 520px; }
.auth-alt { text-align: center; font-size: .92rem; color: var(--ink-soft); }
.auth-alt a { color: var(--tan); text-decoration: underline; text-underline-offset: 3px; }
.field-error { color: var(--live); font-size: .8rem; }

.flash {
  border: 1px solid var(--tan-soft);
  background: #fff;
  border-left: 4px solid var(--tan);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: .95rem;
}
.flash.error { border-color: #e8b4ab; border-left-color: var(--live); }

.acct-page { padding: 34px 0 96px; }
.acct-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  align-items: start;
}
.acct-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 26px;
  text-align: center;
  position: sticky;
  top: 100px;
}
.acct-avatar {
  margin: 0 auto 14px;
  border-color: var(--tan-soft);
  color: var(--ink);
}
.acct-side h2 { font-size: 1.25rem; }
.acct-mail { font-size: .85rem; color: var(--ink-soft); word-break: break-all; }
.acct-since { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.side-links { display: grid; gap: 2px; margin: 22px 0; border-top: 1px solid var(--line); padding-top: 18px; }
.side-links a { padding: 8px 0; font-size: .92rem; transition: color .2s; }
.side-links a:hover { color: var(--tan); }
.acct-out { width: 100%; text-align: center; }

.acct-main { display: grid; gap: 56px; }
.acct-title { font-size: 1.5rem; margin-bottom: 4px; }
.acct-block > .note { margin-bottom: 20px; }
.acct-empty { color: var(--ink-soft); font-style: italic; }

.order-card {
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.order-thumb {
  flex: none;
  width: 88px; height: 106px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line);
}
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-info { flex: 1; min-width: 0; }
.order-top { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.order-top h3 { font-size: 1.05rem; }
.order-top h3 a:hover { color: var(--tan); }
.order-total { font-family: var(--font-display); font-size: 1.1rem; }
.order-meta { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }

.order-steps { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ostep {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b6ae9f;
}
.ostep i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ostep.on { color: var(--ink); }
.ostep.on i { background: var(--tan); }
.obar { flex: 1; min-width: 20px; height: 1px; background: var(--line); }
.obar.on { background: var(--tan); }

.review-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.review-block-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.review-block-head img {
  width: 64px; height: 76px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-tint);
}
.review-block-head h3 { font-size: 1.05rem; }
.review-done .stars { margin-bottom: 8px; }
.review-done > p { color: var(--ink-soft); font-weight: 300; }
.review-photo {
  display: block;
  max-width: 180px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 12px 0 6px;
}
.review-form { display: grid; gap: 16px; }
.review-form input[type="file"] {
  font: inherit;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
}

.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color .15s;
  text-transform: none;
  letter-spacing: 0;
}
.star-pick label:hover,
.star-pick label:hover ~ label,
.star-pick input:checked ~ label { color: var(--gold); }

.acct-form { margin-bottom: 18px; padding: 26px 28px; }

@media (max-width: 860px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-side { position: static; }
  .order-card { flex-direction: row; }
}

/* ==========================================================================
   Maker dashboard
   ========================================================================== */
.status-chip {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 30px;
  margin: 10px 0 4px;
}
.status-chip.pending { background: #f6ead2; color: #8a6420; border: 1px solid #e3cd9d; }
.status-chip.ok { background: #e8f0e2; color: #4a6b34; border: 1px solid #c9dbb9; }
.status-chip.bad { background: #f6dcd7; color: #96382a; border: 1px solid #e6b7ad; }

.strike-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  margin-right: 8px;
}
.strike-pill.hot { background: #f6dcd7; border-color: #e6b7ad; color: #96382a; }
.inline-form { display: inline-block; margin-right: 8px; }

.pending-wrap { max-width: 680px; margin: 30px auto 60px; }
.pending-card { padding: 60px 44px; }
.pending-card h3 { margin-top: 10px; }
.pending-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  margin: 26px auto;
}
.demo-approve { margin-top: 10px; }
.demo-approve .note { margin-top: 10px; }
.pending-card .auth-alt { display: inline-block; margin-top: 18px; }

.acct-sub {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 30px 0 14px;
}
.row-actions { display: flex; gap: 18px; margin-top: 12px; }
.text-btn {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tan);
  border-bottom: 1px solid transparent;
  padding: 0;
}
.text-btn:hover { border-color: var(--tan); }
.text-btn.danger { color: var(--live); }
.text-btn.danger:hover { border-color: var(--live); }
.product-row.inactive .order-thumb, .product-row.inactive h3 { opacity: .55; }
.muted { font-style: normal; font-size: .8rem; color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; }

.status-form { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.status-form .sort-select { padding: 8px 12px; }
.btn-small { padding: 10px 20px; font-size: .74rem; }
.maker-stats { margin-bottom: 14px; }
.maker-stats .stat-card strong { font-size: 1.5rem; }

@media (max-width: 560px) {
  .pending-card { padding: 40px 22px; }
}

/* ==========================================================================
   Cart, checkout & legal pages
   ========================================================================== */
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--tan);
  color: #fff;
  font-size: .66rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
}
.cart-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 26px; }
.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;   /* minmax stops long lines forcing the page wide */
  gap: 40px;
  align-items: start;
}
.cart-lines { min-width: 0; }
.cart-line { min-width: 0; }
.cart-line .order-info { min-width: 0; }
.bulk-note {
  display: inline-block;
  background: var(--tan);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: 6px;
}
.cart-actions { align-items: center; }
.qty-inline { display: inline-flex; align-items: center; gap: 10px; }
.qty-inline label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.qty-inline input {
  width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
}
.cart-empty { max-width: 560px; margin: 30px auto 60px; }

.cart-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  position: sticky;
  top: 100px;
}
.cart-summary h3 { font-size: 1.2rem; margin-bottom: 16px; }
.cart-summary dl { display: grid; gap: 10px; margin-bottom: 20px; }
.cart-summary dl div { display: flex; justify-content: space-between; gap: 14px; }
.cart-summary dt { color: var(--ink-soft); font-size: .92rem; }
.cart-summary dd { font-weight: 500; }
.cart-summary .sum-total {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
.cart-summary .sum-total dt { color: var(--ink); font-weight: 500; }
.cart-summary .sum-total dd { font-family: var(--font-display); font-size: 1.25rem; }
.sum-btn { width: 100%; text-align: center; margin-bottom: 12px; }
.cart-summary .note { margin-top: 8px; }

.checkout-form { align-self: start; }
.co-sub { margin: 6px 0 4px; }
.pay-options { display: grid; gap: 12px; }
.pay-option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  background: var(--paper);
}
.pay-option input { margin-top: 4px; accent-color: var(--tan); }
.pay-option strong { display: block; font-size: .95rem; }
.pay-option span { font-size: .82rem; color: var(--ink-soft); }
.pay-option.selected { border-color: var(--tan); background: #fff; }
.pay-option.disabled { opacity: .55; cursor: not-allowed; }

.co-lines { display: grid; gap: 14px; margin-bottom: 18px; }
.co-lines li { display: flex; gap: 12px; align-items: center; }
.co-lines img {
  width: 46px; height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--paper-tint);
  flex: none;
}
.co-lines li div { flex: 1; min-width: 0; }
.co-lines strong { display: block; font-size: .9rem; }
.co-lines span { font-size: .78rem; color: var(--ink-soft); }
.co-lines em { font-style: normal; font-weight: 500; font-size: .9rem; }

.legal-section { padding-top: 40px; }
.legal-body { max-width: 760px; }
.legal-body h2 {
  font-size: 1.15rem;
  margin: 30px 0 10px;
}
.legal-body p { color: var(--ink-soft); margin-bottom: 10px; }
.legal-body .note { margin-top: 34px; }
.legal-links { margin-bottom: 10px; }
.legal-links a { text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.legal-links a:hover { color: var(--cream); }

@media (max-width: 860px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.admin-head .cart-title { margin-bottom: 0; }
.admin-stats {
  grid-template-columns: repeat(6, 1fr);
  margin: 24px 0 10px;
}
.admin-stats .stat-card strong { font-size: 1.35rem; }
.stat-card.highlight { border-color: var(--tan-soft); background: #fff8ee; }
.admin-block { margin-top: 50px; }
.admin-maker { flex-direction: column; }
.admin-story { color: var(--ink-soft); font-weight: 300; font-size: .95rem; margin-top: 8px; font-style: italic; }
.admin-table td small { color: var(--ink-soft); }
.admin-table td, .admin-table th { vertical-align: middle; }
.admin-table .status-chip { margin: 0; font-size: .62rem; padding: 4px 10px; }

@media (max-width: 1024px) { .admin-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .admin-stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 48px; }
  .arch img { height: 470px; }
  .story-grid { gap: 48px; }
  .story .frame img { height: 430px; }
}

@media (max-width: 860px) {
  .burger { display: flex; }
  .header-inner { gap: 16px; }
  .brand { margin-right: auto; }
  .brand-sub { display: none; }

  .main-nav {
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;
    width: min(320px, 84vw);
    background: var(--paper);
    border-right: 1px solid var(--line);
    flex-direction: column;
    gap: 6px;
    padding: 100px 34px 34px;
    margin: 0;
    transform: translateX(-100%);
    transition: transform .35s ease;
    z-index: 90;
  }
  .main-nav a { font-size: 1rem; padding: 12px 0; border-bottom: 1px solid var(--line); }
  body.nav-open .main-nav { transform: translateX(0); box-shadow: var(--shadow); }
  body.nav-open { overflow: hidden; }

  .hero { padding: 56px 0 76px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 440px; }
  .arch { margin-left: 0; }

  .story-grid, .newsletter-inner { grid-template-columns: 1fr; }
  .steps, .live-grid, .podium, .duo { grid-template-columns: 1fr; }
  .podium { align-items: stretch; max-width: 480px; }
  .podium-card.first { order: -1; }
  .section { padding: 72px 0; }
  .section-head.row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .cats-grid { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: 1fr; gap: 14px; }
  .aud-card { padding: 20px 24px; }
  .aud-card .arrow { opacity: 1; transform: none; }
  .topbar { font-size: .68rem; }
  .header-inner { gap: 10px; height: 64px; }
  .brand-name { font-size: 1.1rem; letter-spacing: .1em; }
  .brand-crown { width: 22px; }
  /* Compact header controls so nothing pushes the page sideways on a phone */
  .header-actions { gap: 8px; }
  .lang-btn { padding: 7px 9px; gap: 5px; }
  .lang-btn #langCode, .lang-btn .chev { display: none; }
  .lang-menu { min-width: 180px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .arch img { height: 420px; }
  .hero-chip { width: 110px; bottom: -18px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 20px; }
  .foot-news-row { flex-wrap: wrap; }
  .foot-news input { flex: 1 1 100%; width: 100%; }
  .foot-news .btn-solid { width: 100%; text-align: center; }
  .socials { flex-wrap: wrap; gap: 10px; }
  .duo-card { padding: 36px 26px; }
}

/* ==========================================================================
   DASHBOARD SHELL (customer / maker / admin)
   Fixed left sidebar + content on the right — standard admin pattern.
   ========================================================================== */
.dash-body { background: #f2f0ea; }

.dash { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.dash-side {
  width: 262px;
  flex: none;
  background: var(--dark);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 0 18px;
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 20px;
  border-bottom: 1px solid rgba(240,233,220,.12);
  color: var(--cream);
}
.dash-brand .brand-crown { width: 26px; height: 16px; color: var(--tan-soft); flex: none; }
.dash-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.dash-brand em {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 4px;
}
.dash-avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(240,233,220,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .82rem;
  color: var(--cream);
}
.dash-user strong { display: block; font-size: .94rem; font-weight: 500; }
.dash-user em { font-style: normal; font-size: .74rem; color: var(--cream-soft); word-break: break-all; }
.dash-chip-row { padding: 10px 22px 0; }
.dash-chip-row .status-chip { margin: 0; }

.dash-nav { display: grid; gap: 2px; padding: 18px 12px; margin-top: 6px; }
.dash-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--cream-soft);
  font-size: .92rem;
  transition: background .18s, color .18s;
}
.dash-nav a:hover { background: rgba(240,233,220,.07); color: var(--cream); }
.dash-nav a.active { background: var(--tan); color: #fff; font-weight: 500; }
.dash-nav a.active .dash-ico { color: #fff; }
.dash-ico { width: 18px; height: 18px; flex: none; }
.dash-badge {
  margin-left: auto;
  background: var(--live);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.dash-nav a.active .dash-badge { background: rgba(255,255,255,.28); }

.dash-side-foot {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid rgba(240,233,220,.12);
  display: grid;
  gap: 2px;
}
.dash-side-foot a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--cream-soft);
  font-size: .88rem;
  transition: background .18s, color .18s;
}
.dash-side-foot a:hover { background: rgba(240,233,220,.07); color: var(--cream); }

/* ---------- Main column ---------- */
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-top {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 34px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.dash-top h1 {
  font-size: 1.35rem;
  letter-spacing: .02em;
}
.dash-top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dash-burger { display: none; flex-direction: column; gap: 5px; width: 24px; }
.dash-burger span { display: block; width: 100%; height: 2px; background: var(--ink); }

.dash-content { padding: 30px 34px 60px; max-width: 1180px; }
.dash-content .flash { margin-bottom: 24px; }

/* ---------- Stat cards ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.dash-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
}
.dash-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 4px;
}
.dash-stat span {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-stat.hot { background: #fff8ee; border-color: var(--tan-soft); }
.dash-stat.hot strong { color: var(--tan); }

/* ---------- Panels ---------- */
.dash-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 22px;
  overflow: hidden;
}
.dash-panel-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: #fcfbf8;
}
.dash-panel-head h2 { font-size: 1.08rem; }
.dash-panel-head p { font-size: .84rem; color: var(--ink-soft); margin-top: 3px; }
.dash-panel-body { padding: 22px 24px; }
.dash-panel-body > .order-card:last-child,
.dash-panel-body > .review-block:last-child { margin-bottom: 0; }
.dash-panel-body .tier-wrap { margin: -6px -8px; }
.dash-panel-body .admin-table { border: none; border-radius: 0; }
.dash-panel-body .form-card { border: none; padding: 0; }
.dash-panel-body .acct-form { margin-bottom: 0; }

.dash-empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--ink-soft);
}
.dash-empty .crown { width: 34px; height: 21px; color: var(--tan-soft); margin-bottom: 10px; }
.dash-empty p { font-size: .95rem; }

.dash-quick { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .dash-side {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  body.dash-open .dash-side { transform: translateX(0); }
  .dash-burger { display: flex; }
  .dash-top { padding: 16px 20px; }
  .dash-content { padding: 22px 20px 50px; }
}
@media (max-width: 560px) {
  .dash-top h1 { font-size: 1.1rem; }
  .dash-panel-body { padding: 18px 16px; }
  .dash-stat { padding: 16px 18px; }
}

/* Dashboard tables: full width, neutral colours (override wholesale tier styling) */
.dash-panel-body .tier-table { max-width: none; margin: 0; width: 100%; }
.admin-table td:nth-child(3),
.admin-table td:nth-child(4),
.admin-table td:nth-child(6) { color: inherit; font-weight: 400; }
.admin-table td:last-child strong { color: var(--tan); }
.dash-panel-body .tier-table th:first-child,
.dash-panel-body .tier-table td:first-child { padding-left: 22px; }
.dash-panel-body .tier-table th:last-child,
.dash-panel-body .tier-table td:last-child { padding-right: 22px; }

/* ==========================================================================
   v14 — shop search, admin inbox/order lines, footer newsletter
   ========================================================================== */
.shop-search { display: flex; gap: 0; align-items: stretch; }
.shop-search input {
  font: inherit;
  font-size: .88rem;
  padding: 10px 14px;
  min-width: 190px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.shop-search input:focus { border-color: var(--tan); }
.shop-search button {
  padding: 0 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s;
}
.shop-search button:hover { background: var(--tan); border-color: var(--tan); }
.clear-search { font-size: .8rem; color: var(--tan); border-bottom: 1px solid transparent; }
.clear-search:hover { border-color: var(--tan); }

/* Admin order lines */
.admin-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  font-size: .92rem;
  color: var(--ink-soft);
}
.admin-line:first-of-type { margin-top: 6px; }
.admin-line .status-form { margin-top: 0; }
.order-card.inactive { opacity: .62; }
.order-card.inactive:hover { opacity: 1; }

/* Footer newsletter */
.foot-news { margin-top: 22px; display: grid; gap: 9px; }
.foot-news label {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.foot-news-row { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-news input {
  flex: 1 1 120px;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: .9rem;
  background: rgba(240, 233, 220, .06);
  border: 1px solid rgba(240, 233, 220, .25);
  border-radius: var(--radius);
  padding: 10px 13px;
  color: var(--cream);
  outline: none;
  transition: border-color .2s;
}
.foot-news input::placeholder { color: var(--cream-soft); }
.foot-news input:focus { border-color: var(--tan-soft); }
.foot-news .btn-solid { background: var(--cream); color: var(--ink); border-color: var(--cream); flex: none; }
.foot-news .btn-solid:hover { background: var(--tan); border-color: var(--tan); color: var(--cream); }

/* Live page tweaks */
.live .empty-state { color: var(--cream-soft); }
.live .note.center.light { margin-top: 30px; }

@media (max-width: 860px) {
  .live-grid { grid-template-columns: 1fr 1fr; }
  .podium { grid-template-columns: 1fr; }
  .podium-card.first { padding-top: 56px; }
  .admin-line { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .live-grid { grid-template-columns: 1fr; }
  .shop-search input { min-width: 0; }
}

/* Awards leaderboard uses the tier table shell but not its highlighted columns */
.rank-table td:nth-child(3), .rank-table td:nth-child(4) { color: inherit; font-weight: 400; }
.rank-table td:nth-child(4) { color: var(--tan); font-weight: 500; }
.rank-table td:first-child { font-family: var(--font-display); color: var(--ink-soft); }

/* Very narrow phones (iPhone SE 1st gen and similar) */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .shop-wholesale { padding: 28px 18px; }
  .shop-wholesale .btn { width: 100%; text-align: center; }
  .chip { padding: 8px 13px; font-size: .78rem; }
  .header-inner { gap: 7px; }
  .brand-name { font-size: .95rem; letter-spacing: .07em; }
  .brand-crown { width: 18px; }
  .header-actions { gap: 6px; }
  .icon-btn { width: 31px; height: 31px; }
  .lang-btn { padding: 6px 8px; }
  .lang-flag svg { width: 19px; height: 13px; }
}

/* Small laptops / tablets in landscape — the nav grew to 6 items in v14 */
@media (min-width: 861px) and (max-width: 1120px) {
  .header-inner { gap: 18px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: .76rem; letter-spacing: .12em; }
  .header-actions { gap: 10px; }
  .lang-btn { padding: 8px 11px; gap: 6px; }
  .brand-sub { display: none; }
}

/* ==========================================================================
   v15 — PayPal checkout + admin Payments panel
   ========================================================================== */

/* Checkout step indicator */
.co-steps {
  display: flex;
  gap: 14px;
  list-style: none;
  counter-reset: none;
  margin: -8px 0 26px;
  flex-wrap: wrap;
}
.co-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: #fff;
}
.co-steps li span {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .82rem;
  flex: none;
}
.co-steps li.now { border-color: var(--ink); color: var(--ink); }
.co-steps li.now span { background: var(--ink); color: var(--paper); }
.co-steps li.done { border-color: var(--tan-soft); color: var(--tan); }
.co-steps li.done span { background: var(--tan); color: #fff; }

.co-h { font-size: 1.25rem; margin-bottom: 4px; }
.field-err { font-size: .8rem; color: var(--live); }

/* Confirmed address block on step 2 */
.co-address {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.co-address strong {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.co-address p { font-size: .95rem; line-height: 1.6; }

/* Order lines in the summary */
.co-lines { display: grid; gap: 14px; margin-bottom: 18px; }
.co-line { display: flex; align-items: center; gap: 12px; }
.co-line-img {
  width: 48px; height: 58px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-tint);
  flex: none;
}
.co-line-img img { width: 100%; height: 100%; object-fit: cover; }
.co-line div { flex: 1; min-width: 0; }
.co-line strong { display: block; font-size: .92rem; font-weight: 500; }
.co-line em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.co-line-total { font-weight: 500; font-size: .92rem; white-space: nowrap; }
.bulk-flag {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tan);
  border: 1px solid var(--tan-soft);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 4px;
}

/* Payment area */
.pay-lead { color: var(--ink-soft); font-size: .95rem; }
.paypal-box { min-height: 56px; margin-top: 4px; }
.pay-msg { font-size: .88rem; color: var(--ink-soft); min-height: 1.2em; }
.pay-msg.bad { color: var(--live); }
.pay-sandbox {
  font-size: .88rem;
  background: #f6ead2;
  border: 1px solid #e3cd9d;
  color: #6d5115;
  border-radius: var(--radius);
  padding: 12px 16px;
}
.pay-sandbox strong { color: #4d3a0f; }
.pay-perks { margin-top: 4px; }
.pay-processing {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  color: var(--ink-soft);
  padding: 16px 0;
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--tan);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pay-off {
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px 24px;
  background: var(--paper);
}
.pay-off h3 { font-size: 1.1rem; margin-bottom: 8px; }
.pay-off p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 18px; }

fieldset { min-width: 0; }

/* Admin — Payments panel */
.pay-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: 1px solid var(--line);
}
.pay-status strong { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .04em; }
.pay-status span { font-size: .86rem; }
.pay-status.on  { background: #e8f0e2; border-color: #c9dbb9; color: #3f5c2c; }
.pay-status.off { background: #f6ead2; border-color: #e3cd9d; color: #6d5115; }

.mode-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
/* These are <label>s, so the uppercase field-label styling has to be undone */
.field .mode-opt,
.mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  background: #fff;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .2s, background .2s;
}
.mode-opt:hover { border-color: var(--tan-soft); }
.mode-opt.on { border-color: var(--ink); background: var(--paper); }
.mode-opt input {
  margin: 3px 0 0;
  accent-color: var(--tan);
  flex: none;
  width: 16px; height: 16px;
  position: static;
  opacity: 1;
  pointer-events: auto;
}
.mode-opt > span {
  flex: 1;
  min-width: 0;
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
.mode-opt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: .04em;
  margin-bottom: 3px;
  text-transform: none;
  font-weight: 600;
}

.key-set {
  min-width: 0;          /* fieldsets default to min-content and blow out wide inputs */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  display: grid;
  gap: 18px;
  background: var(--paper);
}
.key-set legend {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tan);
  padding: 0 8px;
}
.key-set input { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .84rem; }
.field .pay-switch, .pay-switch { margin-top: 8px; text-transform: none; letter-spacing: normal; font-weight: 400; }
.pay-switch .switch-label { letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.pay-how li p { font-size: .92rem; }
.pay-how strong { text-transform: none; letter-spacing: 0; }

@media (max-width: 860px) {
  .mode-row { grid-template-columns: 1fr; }
  .co-address { flex-direction: column; }
}

/* hidden must win over display rules */
[hidden] { display: none !important; }

/* Checkout summary rows */
.cart-summary .sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: .94rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.cart-summary .sum-row strong { color: var(--ink); font-weight: 500; }
.cart-summary .sum-row.total {
  border-bottom: none;
  padding-top: 14px;
  font-size: 1rem;
  color: var(--ink);
}
.cart-summary .sum-row.total strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

/* ==========================================================================
   v17 — coupons
   ========================================================================== */
.coupon-form { margin: 16px 0 6px; display: grid; gap: 8px; }
.coupon-form label {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}
.coupon-row { display: flex; gap: 8px; }
.coupon-row input {
  flex: 1 1 90px;
  min-width: 0;
  font: inherit;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.coupon-row input:focus { border-color: var(--tan); }
.coupon-row .btn { flex: none; }

.coupon-on {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 6px;
  padding: 12px 14px;
  border: 1px dashed var(--tan-soft);
  border-radius: var(--radius);
  background: #fbf6ec;
}
.coupon-on strong {
  display: block;
  font-family: var(--font-display);
  letter-spacing: .1em;
  font-size: .96rem;
}
.coupon-on em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }

.cart-summary dl .sum-discount dt,
.cart-summary dl .sum-discount dd,
.sum-row.discount span,
.sum-row.discount strong { color: var(--tan); }

@media (max-width: 380px) {
  .coupon-row { flex-wrap: wrap; }
  .coupon-row input { flex: 1 1 100%; }
  .coupon-row .btn { width: 100%; text-align: center; }
}

/* Bag lines on small phones: stack the thumbnail above the details */
@media (max-width: 480px) {
  .cart-line { flex-wrap: wrap; }
  .cart-line .order-thumb { width: 68px; height: 82px; }
  .cart-line .order-top { flex-wrap: wrap; gap: 4px; }
  .cart-actions { flex-wrap: wrap; gap: 10px 18px; }
  .qty-inline input { width: 66px; }
}