/* ===========================================================
   Vendom — static styles (ported from Tailwind theme + globals.css)
   Design tokens kept in oklch() (supported by modern browsers).
   =========================================================== */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.2686 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2686 0 0);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.967 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.551 0.0234 264.3637);
  --accent: oklch(0.9869 0.0214 95.2774);
  --accent-foreground: oklch(0.4732 0.1247 46.2007);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.7686 0.1647 70.0804);
  --radius: 1.225rem;
  --radius-sm: calc(var(--radius) - 3px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
  --font-sans: Inter, "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  border-color: var(--border);
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font-family: inherit;
}
button {
  cursor: pointer;
}
.main {
  flex: 1 0 auto;
}

/* ---------- layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem;
  }
}
.muted {
  color: var(--muted-foreground);
}
.ic-primary {
  color: var(--primary);
}
.ic-red {
  color: #ef4444;
}
.separator {
  border: none;
  border-top: 1px solid var(--border);
  height: 0;
  margin: 2rem 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  height: 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.3s;
}
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}
.btn-success {
  background: #16a34a;
  color: #fff;
}
.btn-success:hover {
  background: #16a34a;
}
.btn-outline {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}
.btn-outline:hover {
  background: var(--muted);
}
.btn-ghost {
  background: transparent;
  color: var(--foreground);
}
.btn-ghost:hover {
  background: var(--muted);
}
.btn-sm {
  height: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}
.btn-lg {
  height: 2.75rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.95rem;
}
.btn-block {
  width: 100%;
}
.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* small square icon button (header / qty) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  border-radius: 9999px;
  color: var(--foreground);
  position: relative;
  transition: background-color 0.2s, color 0.2s;
}
.icon-btn:hover {
  background: #f3f4f6;
}

/* ---------- cards ---------- */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header {
  padding: 1.5rem 1.5rem 0.75rem;
}
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
}
.card-content {
  padding: 1.5rem;
}

/* ---------- badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--primary);
  color: var(--primary-foreground);
}
.badge-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.badge-outline {
  background: transparent;
  color: var(--foreground);
}

/* ---------- form controls ---------- */
.input,
.textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.textarea {
  resize: none;
  min-height: 8rem;
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: hsl(0 0% 100% / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, background 0.3s;
}
.site-header.is-scrolled {
  background: hsl(0 0% 100% / 0.95);
  box-shadow: var(--shadow-lg);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 1rem;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}
.logo:hover {
  opacity: 0.8;
}
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.main-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav-link {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  transition: background-color 0.2s, color 0.2s;
}
.nav-link:hover {
  background: #f3f4f6;
  color: #111827;
}
.nav-link.is-active {
  background: #ffedd5;
  box-shadow: var(--shadow-md);
}
.header-search {
  display: none;
  flex: 1;
  max-width: 28rem;
  margin-inline: 2rem;
}
.search-form {
  position: relative;
  width: 100%;
}
.search-input {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.search-input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #111827;
}
.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  display: inline-flex;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-link {
  color: #374151;
}
.cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 20px;
  height: 20px;
  padding-inline: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
}
.cart-badge[hidden] {
  display: none;
}
.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.header-avatar:hover { opacity: 0.85; }
.header-avatar span {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  pointer-events: none;
}
.mobile-profile-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--foreground);
}
.mobile-profile-link .header-avatar {
  width: 40px;
  height: 40px;
}
.mobile-profile-link .header-avatar span { font-size: 0.85rem; }
.auth-buttons {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
.search-toggle {
  display: inline-flex;
}
.menu-toggle {
  display: inline-flex;
}
.mobile-search {
  padding-bottom: 1rem;
}
/* The panel slides open instead of appearing. It cannot use the `hidden` attribute:
   display:none is not an animatable value, so the menu would pop.

   Height is driven from JS (see the .menu-toggle handler in store.js) because it has
   to ease to the content's own height, and nothing in CSS can measure that here:
   max-height needs a hand-picked number the easing then runs past, and the grid
   0fr -> 1fr trick collapses in this layout — overflow:hidden zeroes the item's
   min-content, and an auto-height container has no free space for the 1fr to claim,
   so the open state resolves to 0 too. Measured pixels are the honest way. */
.mobile-nav {
  height: 0;
  overflow: hidden;
  transition: height 400ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-nav-inner {
  padding-bottom: 1rem;
  /* Collapsed content is only clipped, not removed, so it still takes focus and is
     still read aloud. visibility fixes both; the delay holds it on screen for the
     length of the close so it does not vanish mid-slide. */
  visibility: hidden;
  transition: visibility 0s linear 400ms;
}
.mobile-nav.is-open .mobile-nav-inner {
  visibility: visible;
  transition-delay: 0s;
}
/* Apple-style vertical menu: left-aligned bold rows with an even rhythm, no pills. */
.mobile-nav-links {
  display: flex;
  flex-direction: column;
}
.mobile-nav-link {
  padding: 0.65rem 0;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--foreground);
}
.mobile-nav-link:hover { color: #f57c00; }
.mobile-nav-link.is-active {
  background: none;
  color: #f57c00;
}
/* Rows drift up into place a beat behind the panel, each one slightly after the last.
   The panel alone reads as a box changing size; the offset is what makes it read as a
   menu arriving. Applied to the rows rather than the panel so it costs no layout —
   transform and opacity are the two properties the compositor animates on its own. */
.mobile-nav-inner > * > .mobile-nav-link,
.mobile-nav-inner > .lang-switch,
.mobile-nav-inner > .mobile-auth {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-nav.is-open .mobile-nav-inner > * > .mobile-nav-link,
.mobile-nav.is-open .mobile-nav-inner > .lang-switch,
.mobile-nav.is-open .mobile-nav-inner > .mobile-auth {
  opacity: 1;
  transform: none;
}
.mobile-nav.is-open .mobile-nav-link:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.is-open .mobile-nav-link:nth-child(2) { transition-delay: 100ms; }
.mobile-nav.is-open .mobile-nav-link:nth-child(3) { transition-delay: 140ms; }
.mobile-nav.is-open .mobile-nav-inner > .lang-switch { transition-delay: 170ms; }
.mobile-nav.is-open .mobile-nav-inner > .mobile-auth { transition-delay: 200ms; }

/* The two icons sit on top of each other and crossfade, so the button never jumps. */
.menu-toggle {
  position: relative;
}
.menu-icon {
  display: inline-flex;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.menu-close {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.menu-close,
.menu-toggle[aria-expanded="true"] .menu-open {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}
.menu-toggle[aria-expanded="true"] .menu-close {
  opacity: 1;
  transform: none;
}

/* Someone who has asked their OS to reduce motion means it: cut the travel and the
   fades, keep the panel instant. The menu still opens and closes exactly the same. */
@media (prefers-reduced-motion: reduce) {
  /* JS still measures and sets the height, so the panel opens to the right size —
     it just gets there at once instead of sliding. */
  .mobile-nav,
  .mobile-nav-inner,
  .menu-icon,
  .mobile-nav-inner > * > .mobile-nav-link,
  .mobile-nav-inner > .lang-switch,
  .mobile-nav-inner > .mobile-auth {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
  .mobile-nav-inner > * > .mobile-nav-link,
  .mobile-nav-inner > .lang-switch,
  .mobile-nav-inner > .mobile-auth {
    transform: none;
  }
}

/* Account block sits under a hairline, keeping the same left rhythm. */
.mobile-auth {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1rem;
  margin-top: 0.35rem;
}

@media (min-width: 768px) {
  .main-nav {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
  /* The panel no longer carries `hidden`, and the button that would close it is gone
     at this width — so if it were ever left open, resizing would strand it on screen
     with no way to dismiss it. Take it out of the layout entirely instead. */
  .mobile-nav {
    display: none;
  }
}
@media (min-width: 640px) {
  .auth-buttons {
    display: flex;
  }
  .mobile-auth {
    display: none;
  }
}
@media (min-width: 1024px) {
  .header-search {
    display: flex;
  }
  .search-toggle {
    display: none;
  }
}

/* ===========================================================
   HOME
   =========================================================== */
.home {
  /* Warm glow across the TOP only, fading into the white page below (like the
     reference the owner supplied) — not a full-bleed backdrop. The glow lives
     on ::before (the orange band + two highlights that drift in opposite
     directions) so it can animate independently of content. isolation:isolate
     makes .home its own stacking context so ::before can sit at z-index:-1
     (above the white page, below content) cleanly. */
  --glow-h: clamp(520px, 62vh, 860px);
  position: relative;
  isolation: isolate;
  background-color: var(--background);
  padding: 2rem 1rem;
  min-height: 100vh;
}
.home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--glow-h);
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(52% 62% at 50% 4%, rgba(255, 196, 98, 0.55) 0%, rgba(255, 196, 98, 0) 60%),
    radial-gradient(46% 58% at 50% 0%, rgba(236, 86, 32, 0.5) 0%, rgba(236, 86, 32, 0) 62%),
    linear-gradient(180deg, #ef5a27 0%, #ec5620 12%, rgba(233, 84, 31, 0.58) 32%, rgba(233, 84, 31, 0) 78%);
  background-repeat: no-repeat;
  background-position: 18% top, 82% top, center top;
  background-size: 150% 100%, 170% 100%, 100% 100%;
  animation: home-glow-drift 18s ease-in-out infinite alternate;
}
@keyframes home-glow-drift {
  from { background-position: 14% top, 86% top, center top; }
  to   { background-position: 62% top, 40% top, center top; }
}
@media (prefers-reduced-motion: reduce) {
  .home::before { animation: none; }
}
@media (min-width: 640px) {
  .home {
    padding-block: 3rem;
  }
}
@media (min-width: 1024px) {
  .home {
    padding: 4rem 2rem;
  }
}
/* The warm glow sits only over the top band (mostly behind the opaque promo
   banner) and fades to white before the content below, so section headings,
   faculty labels and product cards keep their normal on-white styling — no
   colour overrides needed here. */
.home-hero {
  margin-bottom: 1rem;
  max-width: 80rem;
  margin-inline: auto;
  width: 100%;
}

/* ── Promo Banner Carousel ── */
.promo-banner {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.promo-track {
  display: flex;
  transform: translateX(calc(var(--promo-index, 0) * -100%));
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.promo-slide {
  min-width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  user-select: none;
}
@media (min-width: 640px) {
  .promo-slide { height: 380px; padding: 2rem; }
}
.promo-content {
  color: #fff;
  position: relative;
  z-index: 1;
}
.promo-tag {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.2rem;
  margin-bottom: 0.4rem;
}
.promo-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
  .promo-title { font-size: 1.75rem; }
}
.promo-sub {
  font-size: 0.8rem;
  opacity: 0.9;
}
.promo-deco {
  position: absolute;
  right: 1.25rem;
  bottom: 0.5rem;
  font-size: 4rem;
  opacity: 0.25;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 640px) {
  .promo-deco { font-size: 5.5rem; right: 2rem; opacity: 0.3; }
}
.promo-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  z-index: 2;
}
.promo-dot {
  height: 5px;
  width: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.promo-dot.active {
  width: 16px;
  background: #fff;
}

.home-hero h1 {
  color: var(--primary);
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.home-hero p {
  color: var(--foreground);
  font-size: 1rem;
  max-width: 48rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .home-hero p {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  .home-hero h1 {
    font-size: 3rem;
  }
}

/* product grid */
.product-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 80rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .product-grid {
    gap: 1.5rem;
  }
}
@media (max-width: 639px) {
  .product-grid {
    align-items: start;
  }
  .product-grid .product-card:nth-child(even) {
    margin-top: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* product card */
.product-card {
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  .product-card:hover {
    box-shadow: var(--shadow-lg);
  }
}
/* cover link: empty <a> positioned over the whole card — single-tap on mobile */
.product-card-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
/* buttons float above the cover link */
.product-card .like-btn {
  z-index: 3;
}
.product-card .add-btn {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.product-card-media {
  position: relative;
  overflow: hidden;
}
.like-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
@media (hover: hover) {
  .product-card:hover .like-btn {
    opacity: 1;
  }
}
@media (hover: none) {
  .like-btn {
    opacity: 1;
  }
}
.like-btn:hover {
  background: #fff;
}
.like-btn.is-liked {
  opacity: 1;
  color: var(--destructive);
}
.product-card-img-wrap {
  display: block;
  position: relative;
}
.aspect-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
}
.aspect-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.product-card-body {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  flex: 1;
}
@media (min-width: 640px) {
  .product-card-body {
    padding: 1rem;
    gap: 0.75rem;
    font-size: 1rem;
  }
}
.product-card-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--foreground);
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-title:hover {
  color: var(--primary);
}
.product-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.product-card-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.product-card-rating svg {
  color: var(--primary);
}
.product-card-rating .product-card-rating-count {
  font-weight: 400;
  color: var(--muted-foreground);
}

/* empty product grid */
.no-products {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: 4rem;
}
.no-products .emoji {
  font-size: 3.75rem;
  margin-bottom: 1rem;
}

/* ===========================================================
   PRODUCT DETAIL
   =========================================================== */
.page {
  padding-block: 2rem;
}
.breadcrumb {
  margin-bottom: 2rem;
}
.product-detail {
  display: grid;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (min-width: 1024px) {
  .product-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}
.product-gallery {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
.pg-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg);
}
.pg-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.pg-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s;
}
.pg-thumb.is-active { border-color: var(--primary, #ee4d2d); }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-info h1 {
  font-size: 1.875rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .product-info h1 {
    font-size: 2.25rem;
  }
}
.rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stars {
  display: flex;
  gap: 0.25rem;
  color: var(--primary);
}
.rating span {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.product-price-lg {
  font-size: 1.875rem;
  font-weight: 700;
}
/* ---- seller discount (sale price display) ----
   priceHTML() emits these inline spans inside any price container (cards, detail,
   admin table). Sizes are em-based so they scale with the container's font size. */
.price-sale { color: #dc2626; }
.price-orig {
  margin-left: 0.4em;
  color: var(--muted-foreground);
  font-weight: 400;
  font-size: 0.82em;
  text-decoration: line-through;
}
.price-badge {
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: middle;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
/* Percent button in the admin product list turns red when a sale is active. */
.ad-disc-btn.is-on { color: #dc2626; }
/* Edit (pencil) button hints blue on hover to set it apart from delete/discount. */
.ad-edit-btn:hover { color: #2f7bf6; border-color: #2f7bf6; }

/* ---- pre-order (out-of-stock products stay sellable) ----
   Amber marks a pre-order on every buyer surface: a ribbon on product cards, an
   inline badge beside the detail price, a note above the buy buttons, and a small
   tag on cart + order lines. Set on any product whose stock has reached 0. */
.preorder-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.18);
}
.preorder-badge svg { width: 0.9em; height: 0.9em; }
/* the mini "related/suggested" card puts the badge inside its square */
.related-card .aspect-square { position: relative; }
/* inline variant next to the big price on the product detail page */
.preorder-badge-lg {
  position: static;
  vertical-align: middle;
  font-size: 0.8rem;
  box-shadow: none;
}
/* note above the buy buttons on the product detail page */
.preorder-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid #f59e0b;
  border-radius: 0.6rem;
  background: hsl(38 92% 50% / 0.08);
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.4;
}
.preorder-note svg { flex-shrink: 0; color: #d97706; }
/* small inline tag on cart lines + order items (buyer + seller) */
.preorder-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: hsl(38 92% 50% / 0.16);
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.preorder-tag svg { width: 0.9em; height: 0.9em; }
.preorder-tag-sm { font-size: 0.68em; }
.product-desc {
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ---- product options (seller-defined choices: Size, Color, …) ---- */
.product-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.product-option-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-option-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.product-option-choice {
  min-width: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.product-option-choice:hover { border-color: var(--primary); }
.product-option-choice.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
/* a choice with a variation image: image tile above its label */
.product-option-choice.has-img {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem;
  width: 5rem;
}
.product-option-choice.has-img img {
  width: 4rem; height: 4rem;
  border-radius: calc(var(--radius-md) - 2px);
  object-fit: cover;
}
.product-option-choice.has-img .product-option-choice-label {
  font-size: 0.78rem;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* keep the active image-choice readable (don't invert text onto the photo) */
.product-option-choice.has-img.is-active {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--primary);
  box-shadow: 0 0 0 1.5px var(--primary);
}

/* ---- gallery thumbnail price tag ----
   A thumbnail that's also a sub-product (its own name/price/stock) shows its
   price in a small badge — clicking that thumbnail changes the price shown
   above, not just the picture. Every thumbnail (plain or priced) is the same
   fixed size (.pg-thumb, product.html). */
.pg-thumb-price {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  padding: 1px 0;
}

/* selected-options snapshot shown on cart line / checkout / order rows */
.cart-item-options,
.co-item-options { font-size: 0.78rem; color: var(--muted-foreground); }
.cart-item-options { margin: 0.15rem 0; }
.pf-order-item-opt,
.ad-ord-item-opt { color: var(--muted-foreground); font-size: 0.9em; }

.qty-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}
.qty-control {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qty-control .icon-btn {
  border-radius: 0;
  width: 2.5rem;
  height: 2.5rem;
}
.qty-value {
  padding: 0.5rem 1rem;
  min-width: 60px;
  text-align: center;
  font-weight: 500;
}
.product-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .product-actions {
    flex-direction: row;
  }
}
.product-actions .btn {
  flex: 1;
}
.product-extra {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.product-extra .btn.is-liked {
  color: var(--destructive);
}

/* features */
.features-card {
  margin-bottom: 4rem;
}
.features-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.feature-icon {
  padding: 0.75rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius: var(--radius-sm);
  color: var(--primary);
  display: inline-flex;
}
.feature h2,
.feature h3 {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.feature p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* reviews (product detail) */
.star-filled { color: var(--primary); }
.star-empty { color: var(--border); }
.reviews-card {
  margin-bottom: 4rem;
}
.reviews-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.reviews-loading {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.review-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--muted);
  border-radius: var(--radius-md);
}
.review-gate p {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.review-form {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.review-form-title {
  font-size: 1rem;
  font-weight: 600;
}
.review-form .textarea {
  min-height: 5rem;
}
.review-form .btn {
  align-self: flex-start;
}
.star-input {
  display: flex;
  gap: 0.25rem;
}
.star-input-btn {
  background: none;
  border: none;
  padding: 0.125rem;
  cursor: pointer;
  color: var(--muted-foreground);
  transition: color 0.15s;
}
.star-input-btn.is-active,
.star-input-btn:hover {
  color: var(--primary);
}
.reviews-empty {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  padding: 1rem 0;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.review-item {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.review-item.is-mine {
  background: color-mix(in oklab, var(--primary) 6%, transparent);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin: -1rem -1rem 0.25rem;
}
.review-item-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
/* A real uploaded photo fills these avatar circles; the person icon is the fallback. */
.review-avatar img,
.product-seller-avatar img,
.pp-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-seller-avatar,
.pp-hero-avatar { overflow: hidden; }
.review-item-meta {
  flex: 1;
  min-width: 0;
}
.review-author {
  font-weight: 600;
  font-size: 0.9rem;
}
.review-you-tag {
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 0.8rem;
}
.review-stars {
  display: flex;
  gap: 0.1rem;
  margin-top: 0.15rem;
}
.review-date {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.review-comment {
  margin-top: 0.6rem;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* related */
.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.related-head h2 {
  font-size: 1.5rem;
  font-weight: 700;
}
.related-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.related-card {
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.related-card:hover {
  box-shadow: var(--shadow-lg);
}
.related-card .product-card-body {
  gap: 0.5rem;
}
.related-card h3 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-card .product-price {
  color: var(--primary);
}

/* ---------- browse by faculty (home) ---------- */
.faculty-section {
  max-width: 80rem;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.faculty-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--card-foreground);
}
/* Marquee viewport (mobile): the track inside scrolls forever; edges fade so items
   slide in and out smoothly rather than popping at a hard border. */
.faculty-row {
  position: relative;
  overflow: hidden;
  padding-bottom: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.faculty-track {
  display: flex;
  width: max-content;
  animation: fac-marquee 32s linear infinite;
}
/* Pause the loop while the user is hovering or keyboard-focused inside it. */
.faculty-row:hover .faculty-track,
.faculty-row:focus-within .faculty-track {
  animation-play-state: paused;
}
@keyframes fac-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fac-item {
  flex: 0 0 auto;
  width: 5.5rem;
  margin-right: 3.5rem;   /* trailing gap on every item keeps the -50% wrap seamless */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
/* The auto-scroll loop is a MOBILE-only touch — from 640px up, drop the marquee and
   show the classic centered, wrapped, static row (dup copies hidden). */
@media (min-width: 640px) {
  .faculty-row { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .faculty-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 2rem 3.5rem; }
  .fac-item { margin-right: 0; }
  .fac-item[aria-hidden="true"] { display: none; }
}
.fac-icon {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  background: var(--muted);
  color: var(--card-foreground);
  display: grid;
  place-items: center;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.fac-item:hover .fac-icon,
.fac-item:focus-visible .fac-icon,
.fac-item:active .fac-icon {
  /* orange mixed with yellow — the highlight when a faculty is hovered/tapped */
  background: linear-gradient(135deg, #fb8c00 0%, #ffd54f 100%);
  color: #fff;
  transform: translateY(-4px);
}
.fac-item:active .fac-icon {
  transform: translateY(-2px) scale(0.97);  /* slight press feedback on tap */
}
.fac-label {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: var(--muted-foreground);
}
.fac-item:hover .fac-label,
.fac-item:focus-visible .fac-label,
.fac-item:active .fac-label {
  color: #f57c00;
}
@media (prefers-reduced-motion: reduce) {
  .fac-icon { transition: none; }
  /* No auto-scroll: fall back to a single centered/wrapping set the user scrolls. */
  .faculty-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .fac-item[aria-hidden="true"] { display: none; }
  .faculty-row { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ---------- faculty page (products-only listing) ---------- */
.faculty-page-head {
  max-width: 80rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}
.faculty-page-head .breadcrumb {
  margin-bottom: 0.5rem;
}
.faculty-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--card-foreground);
}
.faculty-page-count {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

/* product not found */
.not-found {
  text-align: center;
  padding-block: 4rem;
}
.not-found .emoji {
  font-size: 3.75rem;
  margin-bottom: 1rem;
}
.not-found h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.not-found p {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

/* ===========================================================
   CART
   =========================================================== */
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.cart-head h1 {
  font-size: 1.875rem;
  font-weight: 700;
}
.cart-head p {
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}
.cart-layout {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: repeat(3, 1fr);
  }
  .cart-items-col {
    grid-column: span 2;
  }
}
.cart-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
}
.cart-list-head .card-title {
  font-size: 1.125rem;
}
.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem 0;
}
.cart-item + .cart-item {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.cart-item-img {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.cart-item-img img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--muted);
}
.cart-item-body {
  flex: 1;
  min-width: 0;
}
.cart-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cart-item-name {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item-each {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}
.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
.cart-item .qty-control .icon-btn {
  width: 2rem;
  height: 2rem;
}
.cart-item .qty-value {
  min-width: 50px;
  font-size: 0.875rem;
  padding-block: 0.5rem;
}
.cart-item-total {
  font-size: 1.125rem;
  font-weight: 700;
}
.danger-hover:hover {
  color: var(--destructive);
}

/* order summary */
.order-summary {
  position: sticky;
  top: 1rem;
}
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.summary-row .muted {
  color: var(--muted-foreground);
}
.summary-row strong {
  font-weight: 500;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary-total .label {
  font-size: 1.125rem;
  font-weight: 600;
}
.summary-total .value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}
.free-ship-note {
  padding: 0.75rem;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: var(--radius-sm);
}
.free-ship-note .row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-foreground);
}
.free-ship-note p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.summary-trust {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.summary-trust .row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.ic-green {
  color: #22c55e;
}
.ic-blue {
  color: #3b82f6;
}

/* recommendations */
.recommendations {
  margin-top: 4rem;
}
.recommendations .inner {
  text-align: center;
  padding-block: 2rem;
}
.recommendations p {
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

/* empty cart */
.empty-cart {
  padding-block: 8rem;
}
.empty-cart-inner {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.empty-cart .icon-wrap {
  color: var(--muted-foreground);
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.empty-cart h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.empty-cart > .empty-cart-inner > p {
  color: var(--muted-foreground);
  font-size: 1.125rem;
}
.empty-cart-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.empty-cart-perks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}
.empty-cart-perks .row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-hero {
  padding-block: 4rem;
  background: linear-gradient(to bottom right, color-mix(in oklab, var(--primary) 5%, transparent), color-mix(in oklab, var(--accent) 5%, transparent));
}
@media (min-width: 1024px) {
  .contact-hero {
    padding-block: 6rem;
  }
}
.contact-hero-inner {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}
.contact-hero .badge {
  margin-bottom: 1.5rem;
}
.contact-hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .contact-hero h1 {
    font-size: 3.75rem;
  }
}
.contact-hero h1 .accent {
  color: var(--primary);
}
.contact-hero p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 42rem;
  margin-inline: auto;
}
.section {
  padding-block: 4rem;
}
@media (min-width: 1024px) {
  .section {
    padding-block: 6rem;
  }
}
.section-muted {
  background: color-mix(in oklab, var(--muted) 30%, transparent);
}
.contact-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-form-col {
    grid-column: span 2;
  }
}
.form-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .form-row.two {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact-form .field {
  margin-bottom: 1.5rem;
}
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-info-row + .contact-info-row {
  margin-top: 1.5rem;
}
.contact-info-icon {
  padding: 0.5rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius: var(--radius-sm);
  color: var(--primary);
  display: inline-flex;
}
.contact-info-row h3 {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.contact-info-row .detail {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.contact-info-row .desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}
.why-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.why-row + .why-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.why-icon {
  padding: 0.25rem;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: var(--radius-sm);
  color: var(--accent-foreground);
  display: inline-flex;
}
.why-row h4 {
  font-size: 0.875rem;
  font-weight: 500;
}
.why-row p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.section-head {
  text-align: center;
  margin-bottom: 3rem;
}
.section-head .badge {
  margin-bottom: 1.5rem;
}
.section-head h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .section-head h2 {
    font-size: 2.25rem;
  }
}
.section-head p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 42rem;
  margin-inline: auto;
}
.faq-grid {
  display: grid;
  gap: 2rem;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.faq-card {
  transition: box-shadow 0.2s;
}
.faq-card:hover {
  box-shadow: var(--shadow-md);
}
.faq-card h3 {
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.faq-card p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.cta-card {
  background: linear-gradient(to right, color-mix(in oklab, var(--primary) 10%, transparent), color-mix(in oklab, var(--accent) 10%, transparent));
  border-color: color-mix(in oklab, var(--primary) 20%, transparent);
  text-align: center;
}
.cta-card .card-content {
  padding: 3rem;
}
.cta-card h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .cta-card h2 {
    font-size: 2.25rem;
  }
}
.cta-card p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
  max-width: 42rem;
  margin-inline: auto;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .cta-actions {
    flex-direction: row;
  }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  flex-shrink: 0;
  background: var(--background);
  border-top: 1px solid var(--border);
}
.footer-main {
  padding-block: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: repeat(6, 1fr);
  }
  .footer-brand {
    grid-column: span 2;
  }
}
.footer-brand-text {
  margin-block: 1rem 1.5rem;
  max-width: 24rem;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.footer-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.social-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  transition: background 0.2s, color 0.2s;
}
.social-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}
.footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-link {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--foreground);
}
.footer-bottom {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
  }
}
.footer-copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.footer-credit {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.footer-credit a {
  font-weight: 700;
  transition: color 0.2s;
}
.footer-credit a:hover {
  color: var(--primary);
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
}

/* ===========================================================
   AUTH (sign in / sign up)
   =========================================================== */
.auth-greeting {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-right: 0.25rem;
}
.mobile-greeting {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  min-height: 70vh;
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
}
.auth-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-head .logo {
  display: inline-block;
  margin-bottom: 1rem;
}
.auth-head h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.auth-form .field {
  margin-bottom: 1rem;
}
.auth-form .btn-block {
  margin-top: 0.5rem;
}
.auth-error {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
  border: 1px solid color-mix(in oklab, var(--destructive) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.auth-alt {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 1.5rem;
}
.auth-alt a {
  color: var(--primary);
  font-weight: 600;
}
.auth-alt a:hover {
  text-decoration: underline;
}
/* ---- forgot-password link (right-aligned under the password field) ---- */
.auth-forgot {
  text-align: right;
  margin: -0.35rem 0 0.9rem;
}
.auth-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.auth-link:hover {
  text-decoration: underline;
}
/* ---- signup OTP step ---- */
.otp-channel {
  display: flex;
  gap: 0.5rem;
}
.otp-channel-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.otp-channel-opt:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
.otp-channel-opt input {
  accent-color: var(--primary);
}
.otp-code {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
}
.otp-sent {
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.otp-sent strong {
  color: var(--foreground);
}
.otp-dev-hint {
  border: 1px dashed var(--primary);
  background: color-mix(in oklab, var(--primary) 9%, transparent);
  color: var(--foreground);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 1rem;
}
.otp-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.password-wrap {
  position: relative;
}
.password-wrap .input {
  padding-right: 2.75rem;
}
.pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.375rem;
}
.pw-toggle:hover {
  color: var(--foreground);
}

/* ---------- checkout ---------- */
.co-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.co-head h1 { margin: 0; }
.co-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}
.co-left { display: flex; flex-direction: column; gap: 1.5rem; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
/* order summary */
.co-items { display: flex; flex-direction: column; gap: 0.75rem; }
.co-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.co-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.co-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.co-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-item-qty { font-size: 0.75rem; color: var(--muted-foreground); }
.co-item-price { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
/* payment methods */
.co-payment { display: flex; flex-direction: column; gap: 0.625rem; }
.co-pay-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.co-pay-option input[type="radio"] { display: none; }
.co-pay-option.selected {
  border-color: var(--primary);
  background: oklch(from var(--primary) l c h / 0.05);
}
.co-pay-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.co-pay-option.selected .co-pay-icon {
  background: var(--primary);
  color: var(--primary-foreground);
}
.co-pay-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.co-pay-label { font-size: 0.9rem; font-weight: 500; }
.co-pay-desc { font-size: 0.75rem; color: var(--muted-foreground); }
.co-pay-check {
  opacity: 0;
  color: var(--primary);
  transition: opacity 0.15s;
}
.co-pay-option.selected .co-pay-check { opacity: 1; }

/* ---- per-seller payment sections (direct payment to each shop) ---- */
.co-pay-loading { display: flex; justify-content: center; padding: 1.25rem 0; }
.co-pay-loading .btn-spinner { width: 1.5rem; height: 1.5rem; border-width: 3px; }
.co-pay-seller + .co-pay-seller {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.co-pay-shop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.co-pay-shop svg { opacity: 0.7; }
/* QR image + amount — shown on the confirmation screen (successHTML), not in the
   payment picker. Kept here so both share one definition. */
.co-qr-img {
  width: 180px;
  max-width: 100%;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 0.5rem;
  border: 1px solid var(--border);
}
.co-qr-amount { margin-top: 0.6rem; font-size: 0.9rem; }
.co-qr-amount strong { font-size: 1.05rem; }

/* QR reminder on the order-success screen */
.co-success-pay {
  max-width: 26rem;
  margin: 1.75rem auto;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
}
.co-success-pay-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.co-success-pay-sub { font-size: 0.82rem; margin-bottom: 1rem; }
.co-success-qr-list { display: flex; flex-direction: column; gap: 1.25rem; }
/* Center the shop name, QR image and amount as a stack (the reset makes <img>
   display:block, so text-align alone won't center it — use flex centering). */
.co-success-qr { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.co-success-qr .co-pay-shop { justify-content: center; }

@media (max-width: 768px) {
  .co-grid { grid-template-columns: 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .form-row.three { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════
   Profile Page
   ════════════════════════════════════ */
.pf-page {
  max-width: 540px;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Avatar card ── */
.pf-avatar-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  position: relative;
  z-index: 2;
}
.pf-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.pf-avatar-wrap span {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}
.pf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.pf-avatar-camera {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.18s;
  border-radius: 50%;
  pointer-events: none;
}
.pf-avatar-wrap:hover .pf-avatar-camera { opacity: 1; }
/* always show camera hint on touch devices */
@media (hover: none) {
  .pf-avatar-camera { opacity: 0.7; }
}
.header-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.pf-avatar-info { flex: 1; min-width: 0; }
.pf-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.pf-name {
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  padding: 0.2rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.pf-edit-btn:hover { color: var(--primary); }
.pf-member-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.pf-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #f57c00;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
}

/* ── Profile hero: web3-style cover + overlapping avatar + chips ── */
.pf-hero {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pf-hero-cover {
  height: 118px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 15% 0%, oklch(0.85 0.14 60 / 0.9), transparent 55%),
    linear-gradient(120deg, oklch(0.80 0.16 65), oklch(0.72 0.18 25), oklch(0.66 0.17 350), oklch(0.66 0.15 300));
  z-index: 0;
}
.pf-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-cover-btn {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.66rem;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.18s;
}
.pf-cover-btn:hover { background: rgba(0, 0, 0, 0.62); }
.pf-cover-input { display: none; }

/* ---- seller wallet (admin) ---- */
.ad-wallet-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ad-wallet-card {
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(130% 150% at 12% 0%, oklch(70.923% 0.19531 45.936 / 0.95), transparent 55%),
    linear-gradient(135deg, oklch(67.933% 0.12551 42.255), oklch(64.743% 0.17783 32.271), oklch(48.887% 0.13941 45.13));
}
.ad-wallet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.92;
  font-size: 0.85rem;
  font-weight: 600;
}
.ad-wallet-balance {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.45rem 0 1.1rem;
}
.ad-wallet-wd {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.ad-wallet-wd:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.ad-wallet-wd:disabled { opacity: 0.5; cursor: not-allowed; }
.ad-wallet-side { display: flex; flex-direction: column; gap: 1rem; }
.ad-wallet-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.ad-wallet-stat-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ad-wallet-stat-ic.is-in { background: color-mix(in oklch, #16a34a 16%, transparent); color: #16a34a; }
.ad-wallet-stat-ic.is-out { background: color-mix(in oklch, #f59e0b 18%, transparent); color: #d97706; }
.ad-wallet-stat-label { font-size: 0.78rem; color: var(--muted); }
.ad-wallet-stat-val { font-size: 1.15rem; font-weight: 700; }
.ad-wd-avail { margin-bottom: 0.9rem; color: var(--muted); font-size: 0.9rem; }
.ad-wd-calc {
  margin-top: 1rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ad-wd-calc-row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.ad-wd-calc-row.is-net { font-weight: 700; font-size: 1.05rem; }
.ad-wd-fee-cell { color: #d97706; }
.ad-wd-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted) 16%, transparent);
  color: var(--muted);
}
.ad-wd-badge.is-pending { background: color-mix(in oklch, #f59e0b 18%, transparent); color: #b45309; }
.ad-wd-badge.is-paid,
.ad-wd-badge.is-completed { background: color-mix(in oklch, #16a34a 16%, transparent); color: #15803d; }
.ad-wd-badge.is-rejected { background: color-mix(in oklch, #ef4444 15%, transparent); color: #b91c1c; }
@media (max-width: 720px) {
  .ad-wallet-top { grid-template-columns: 1fr; }
}

/* ---- notification bell + dropdown (admin topbar) ---- */
.ad-notif { position: relative; }
.ad-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
.ad-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: 86vw;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  z-index: 60;
}
.ad-notif-head {
  padding: 0.8rem 1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
}
.ad-notif-empty {
  padding: 1.8rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.ad-notif-list { display: flex; flex-direction: column; }
.ad-notif-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.ad-notif-item:last-child { border-bottom: none; }
.ad-notif-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in oklch, #6d28d9 12%, transparent);
  color: #6d28d9;
}
.ad-notif-item.is-order .ad-notif-ic { background: color-mix(in oklch, #2563eb 12%, transparent); color: #2563eb; }
.ad-notif-item.is-review .ad-notif-ic { background: color-mix(in oklch, #f59e0b 16%, transparent); color: #d97706; }
.ad-notif-item.is-follow .ad-notif-ic { background: color-mix(in oklch, #16a34a 14%, transparent); color: #16a34a; }
.ad-notif-body { min-width: 0; }
.ad-notif-text { font-size: 0.85rem; line-height: 1.35; }
.ad-notif-time { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.pf-hero-info { padding: 0 1.15rem 1.2rem; }
.pf-hero-avatar {
  width: 88px;
  height: 88px;
  margin-top: -46px;
  border-radius: 50%;
  border: 4px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.pf-hero-avatar span {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}
.pf-hero-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.pf-hero-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-hero-handle {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.15rem;
}
.pf-hero-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.pf-follower-spinner {
  width: 10px;
  height: 10px;
  border-width: 2px;
  display: inline-block;
  vertical-align: middle;
}
.pf-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--foreground);
  background: var(--muted);
  border: 0px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.pf-chip svg { color: var(--muted-foreground); flex-shrink: 0; }
.pf-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-chip-partner {
  color: #f57c00;
  background: #fff8e1;
}
.pf-chip-partner svg { color: #f57c00; }

/* ── Profile tabs (Gallery|Activity-style underline) ── */
.pf-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0.25rem;
  border-bottom: 1.5px solid var(--border);
}
.pf-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 0.7rem 0.4rem 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  position: relative;
  transition: color 0.18s;
}
.pf-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.pf-tab:hover { color: var(--foreground); }
.pf-tab.is-active { color: var(--primary); }
.pf-tab.is-active::after { transform: scaleX(1); }

.pf-tabpanel { display: none; }
.pf-tabpanel.is-active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: pf-tab-fade 0.25s ease;
}
@keyframes pf-tab-fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ── Sections ── */
.pf-section {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.pf-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  padding: 0.75rem 1rem 0.5rem;
}

/* ── Row items ── */
.pf-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}
.pf-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf-row-body { flex: 1; min-width: 0; }
.pf-row-label {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-bottom: 0.15rem;
}
.pf-row-value { font-size: 0.9rem; font-weight: 500; }
.pf-linked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--foreground);
}
.pf-linked svg { color: #2e7d32; flex-shrink: 0; }
.pf-unlinked { color: var(--muted-foreground); font-size: 0.85rem; }
.pf-badge-linked {
  font-size: 0.7rem;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 99px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}
.pf-link-btn { flex-shrink: 0; }

/* ── Action row (logout) ── */
.pf-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s;
  text-align: left;
}
.pf-action-row:hover { background: var(--muted); }
.pf-action-row > svg:last-child { margin-left: auto; color: var(--muted-foreground); }
.pf-logout { color: #ee4d2d; }

/* ── Partner card ── */
.pf-partner-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}
.pf-partner-active { background: linear-gradient(135deg,#fff8e1,#fff3e0); }
.pf-partner-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff3e0;
  color: #f57c00;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pf-partner-active .pf-partner-icon { background: #ffe082; }
.pf-partner-body { flex: 1; min-width: 0; }
.pf-partner-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.pf-partner-desc {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.pf-partner-perks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pf-partner-perks li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--foreground);
}
.pf-partner-perks svg { color: #2e7d32; flex-shrink: 0; }

/* ── Modals ── */
.pf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 480px) {
  .pf-modal-backdrop { align-items: center; }
}
.pf-modal {
  background: var(--card);
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 480px) {
  .pf-modal { border-radius: 1rem; }
}
.pf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.95rem;
}
.pf-modal-body { padding: 1rem; }
.pf-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-bottom: 0.4rem;
}
.pf-hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.4rem;
}
.pf-modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}

/* ── Toast ── */
.pf-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: #323232;
  color: #fff;
  padding: 0.6rem 1.25rem;
  border-radius: 99px;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
  pointer-events: none;
}
.pf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf-toast.pf-toast-error { background: #c62828; }

/* ════════════════════════════════════
   Partner Program Page
   ════════════════════════════════════ */

/* ── Hero ── */
.pt-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.pt-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.pt-hero-text { flex: 1; }
.pt-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 0.75rem;
}
.pt-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .pt-hero h1 { font-size: 2.5rem; } }
.pt-hero p {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 1.5rem;
}
.pt-hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.pt-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fbbf24;
}
.pt-stat-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.1rem;
}
.pt-hero-emoji {
  font-size: 5rem;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}
@media (max-width: 480px) { .pt-hero-emoji { display: none; } }

/* ── Body layout ── */
.pt-body {
  padding-top: 2rem;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pt-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.pt-section-sub {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* ── Benefits grid ── */
.pt-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px) { .pt-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pt-benefits { grid-template-columns: repeat(3, 1fr); } }
.pt-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1rem;
}
.pt-benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: #fff0ed;
  color: #ee4d2d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pt-benefit-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.pt-benefit-desc  { font-size: 0.8rem; color: var(--muted-foreground); line-height: 1.4; }

/* ── Platform fee (one flat rate; replaced the bronze/silver/gold tier grid) ── */
.pt-fee {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.75rem 1rem;
  text-align: center;
}
.pt-fee-rate {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-foreground);
}
.pt-fee-label {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  margin-top: 0.4rem;
}
.pt-fee-keep {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
}
.pt-fee-keep svg { color: #16a34a; }

/* ── Form ── */
.pt-form-wrap { max-width: 640px; }
.pt-form-section {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.pt-form-section:first-child { margin-top: 0; }
.pt-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 1.25rem 0 1rem;
  cursor: pointer;
}
.pt-agree-row input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

/* ── Success state ── */
.pt-success {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
  padding: 0 1rem;
}
.pt-success-icon { font-size: 4rem; margin-bottom: 1rem; }
.pt-success h2   { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.pt-success p    { font-size: 0.95rem; margin-bottom: 0.5rem; line-height: 1.6; }
.pt-success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* ════════════════════════════════════
   Utility & component classes
   (replaces former inline style="" attributes)
   ════════════════════════════════════ */

/* separator modifiers */
.separator.is-flush { margin: 0; }
.separator.is-tight { margin: 0.75rem 0; }

/* generic helpers */
.link-primary { color: var(--primary); }

/* avatar colour palette — index/class chosen in JS, colours live here */
.avatar-color-0 { background: #ee4d2d; }
.avatar-color-1 { background: #1e88e5; }
.avatar-color-2 { background: #7b1fa2; }
.avatar-color-3 { background: #2e7d32; }
.avatar-color-4 { background: #f57c00; }
.avatar-color-5 { background: #00838f; }
.avatar-color-img { background: #fff; }

/* header avatar — mobile texts */
.mobile-profile-name { font-weight: 600; }
.mobile-profile-sub  { font-size: 0.75rem; color: var(--muted-foreground); }

/* cart */
.cart-item-name-col { flex: 1; min-width: 0; padding-right: 1rem; }
.cart-remove-btn    { width: 2rem; height: 2rem; }
.summary-cta        { margin-top: 1rem; }

/* checkout */
.co-payment-card   { margin-top: 1.5rem; }
.field-zip         { max-width: 160px; }
.co-place-order    { margin-top: 1rem; }
.co-secure-note    { font-size: 0.75rem; text-align: center; margin-top: 0.75rem; }
.co-success        { max-width: 540px; margin: 4rem auto; text-align: center; }
.co-success-emoji  { font-size: 4rem; margin-bottom: 1rem; }
.co-success-title  { margin-bottom: 0.5rem; }
.co-success-order  { margin-bottom: 1.5rem; }
.co-success-text   { margin-bottom: 2rem; }

/* Animated success confirmation modal — pops over the success screen on payment.
   Colours are pinned (not themed) so the card always reads as the reference design. */
.co-ok-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0; transition: opacity 0.25s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.co-ok-overlay.is-in { opacity: 1; }
body.co-ok-open { overflow: hidden; }

.co-ok-card {
  width: 100%; max-width: 320px;
  background: #fff; color: #0f172a;
  border-radius: 24px; padding: 2.25rem 1.75rem 1.5rem; text-align: center;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.94);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.co-ok-overlay.is-in .co-ok-card { transform: translateY(0) scale(1); }

.co-ok-badge { display: block; margin: 0 auto 1.25rem; }
.co-ok-seal {
  fill: #34d17f; transform-origin: 60px 60px;
  animation: co-ok-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.co-ok-check {
  stroke-dasharray: 68; stroke-dashoffset: 68;
  animation: co-ok-draw 0.4s ease forwards 0.3s;
}
@keyframes co-ok-pop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes co-ok-draw { to { stroke-dashoffset: 0; } }

.co-ok-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.4rem; }
.co-ok-sub   { font-size: 0.88rem; color: #64748b; margin: 0 0 1.5rem; line-height: 1.5; }
.co-ok-done  {
  width: 100%; background: #111; color: #fff; border: none;
  border-radius: 14px; padding: 0.9rem 1rem; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, transform 0.1s ease;
}
.co-ok-done:hover  { background: #000; }
.co-ok-done:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .co-ok-overlay, .co-ok-card { transition: none; }
  .co-ok-seal { animation: none; }
  .co-ok-check { animation: none; stroke-dashoffset: 0; }
}

/* Stripe payment card — single method: pay by card through the platform */
.co-pay-stripe        { display: flex; align-items: center; gap: 0.85rem; }
.co-pay-stripe-icon   { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
                        display: flex; align-items: center; justify-content: center;
                        background: var(--muted); color: var(--primary); }
.co-pay-stripe-body   { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.co-pay-stripe-title  { font-weight: 600; font-size: 0.92rem; }
.co-pay-stripe-desc   { font-size: 0.78rem; color: var(--muted-foreground); }
.co-pay-stripe-badge  { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem;
                        font-size: 0.72rem; font-weight: 600; color: #635bff;
                        background: #f5f4ff; border: 1px solid #e6e4ff; border-radius: 999px;
                        padding: 0.25rem 0.6rem; }

/* Paid badge on the success screen */
.co-paid-badge        { display: inline-flex; align-items: center; gap: 0.35rem;
                        font-size: 0.8rem; font-weight: 600; color: #1a7f4b;
                        background: #e7f7ee; border-radius: 999px; padding: 0.3rem 0.8rem;
                        margin-bottom: 1.25rem; }
/* COD isn't paid yet — amber "pay on delivery" instead of the green "paid" pill. */
.co-cod-badge         { color: #9a5b00; background: #fdf0d5; }

/* Payment verification — the return leg from Stripe */
.co-verify            { max-width: 540px; margin: 4rem auto; text-align: center; }
.co-verify-spinner    { display: flex; justify-content: center; margin-bottom: 1.25rem; color: var(--primary); }
.co-verify-spinner .btn-spinner { width: 2.25rem; height: 2.25rem; border-width: 3px; }
.co-verify-emoji      { font-size: 3.25rem; margin-bottom: 0.75rem; }
.co-verify-title      { margin-bottom: 0.5rem; }
.co-verify-actions    { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* PromptPay QR panel (KBank) — the on-page scan screen */
.co-qr                { max-width: 420px; margin: 3rem auto; text-align: center; }
.co-qr-title          { margin-bottom: 0.4rem; }
.co-qr-sub            { margin-bottom: 1.5rem; }
.co-qr-card           { display: inline-flex; flex-direction: column; align-items: center;
                        padding: 1.25rem 1.5rem; border-radius: var(--radius-lg);
                        border: 1px solid var(--border); background: var(--card); }
.co-qr .co-qr-img     { width: 240px; }
.co-qr-wait           { display: flex; align-items: center; justify-content: center; gap: 0.5rem;
                        margin: 1.5rem 0 0.75rem; font-size: 0.9rem; color: var(--muted-foreground); }
.co-qr-wait .btn-spinner { color: var(--primary); }
/* No payment provider configured yet */
.co-pay-none          { font-size: 0.85rem; color: var(--muted-foreground); text-align: center; padding: 0.5rem 0; }

/* profile */
.pf-avatar-input        { display: none; }
.pf-row-icon.is-red     { background: #fff0ed; color: #ee4d2d; }
.pf-row-icon.is-blue    { background: #e8f4ff; color: #1e88e5; }
.pf-admin-btn           { margin-top: 0.9rem; }
.pf-cancel-partner      { color: var(--muted-foreground); margin-top: 0.5rem; }
.pf-guest               { text-align: center; padding: 4rem 1rem; }
.pf-guest-emoji         { font-size: 3.5rem; margin-bottom: 1rem; }
.pf-guest-title         { margin-bottom: 0.5rem; }
.pf-guest-sub           { margin-bottom: 1.5rem; }
.pf-guest-foot          { margin-top: 1rem; font-size: 0.875rem; }

/* partner */
.pt-form-note              { font-size: 0.8rem; margin: 0; }

/* home hero — promo slide gradients */
.promo-slide-1 { background: #ee4d2d; }
.promo-slide-2 { background: #1e88e5; }
.promo-slide-3 { background: #7b1fa2; }
.promo-slide-4 { background: #2e7d32; }

.promo-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* contact — card titles */
.contact-card-title-lg { font-size: 1.5rem; }
.contact-card-title-md { font-size: 1.25rem; }
.contact-card-subtitle { margin-top: 0.5rem; }

/* modal visibility toggled by .is-open class (was inline style="display:none") */
.pf-modal-backdrop { display: none; }
.pf-modal-backdrop.is-open { display: flex; }

/* ── Promo photo slide (product photography, no gradient) ── */
.promo-slide-photo {
  padding: 0;
}
.promo-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.promo-shop-btn {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
}
@media (min-width: 640px) {
  .promo-shop-btn { right: 1.5rem; bottom: 1.5rem; }
}

/* ── Promo poster slide (portrait image, shown uncropped with matching blurred backdrop) ── */
.promo-slide-poster {
  padding: 0;
  justify-content: center;
  background: #0a1a2f;
}
.promo-slide-bg-blur {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(28px) brightness(0.55);
  transform: scale(1.15);
}
.promo-slide-img-contain {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* ── Language switcher ── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.7rem;
  border: 0px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s;
}
.lang-switch:hover {
  background: var(--muted);
}
/* Language toggle rendered as another left-aligned menu row (not a centered pill). */
.lang-switch-mobile {
  margin: 0;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0.65rem 0;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--foreground);
}
.lang-switch-mobile:hover {
  background: none;
  color: #f57c00;
}

/* ============================================================
   Partner Admin & Dashboard  (page-admin.js / admin.html)
   Phoenix-inspired console: sidebar + topbar + switchable views.
   ============================================================ */
.ad-shell {
  --ad-side-w: 250px;
  --ad-amber: #c77b12;   --ad-amber-bg: #fdf1dc;
  --ad-blue: #2f7bf6;    --ad-blue-bg: #e8f1fe;
  --ad-green: #16a45a;   --ad-green-bg: #e6f6ee;
  --ad-violet: #7c5cfc;  --ad-violet-bg: #efeafe;
  --ad-red: #e5484d;     --ad-red-bg: #fdeaea;
  --seg1: #f0a92c; --seg2: #2f7bf6; --seg3: #16a45a; --seg4: #7c5cfc;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-sans);
}

/* ---- sidebar ---- */
.ad-sidebar {
  flex: 0 0 var(--ad-side-w);
  width: var(--ad-side-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 40;
}
.ad-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.ad-brand-logo { height: 30px; width: auto; }
.ad-brand-text { font-weight: 700; font-size: 1.05rem; line-height: 1.1; display: flex; flex-direction: column; }
.ad-brand-text small { font-weight: 500; font-size: 0.68rem; color: var(--muted-foreground); }

.ad-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.7rem 1rem; }
.ad-nav-group {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: 0.9rem 0.65rem 0.4rem;
}
.ad-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.7rem;
  border-radius: 11px;
  color: var(--secondary-foreground);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.ad-nav-item:hover { background: var(--muted); color: var(--foreground); }
.ad-nav-item svg { flex: 0 0 auto; color: var(--muted-foreground); }
.ad-nav-item.is-active {
  background: color-mix(in oklab, var(--primary) 16%, var(--card));
  color: var(--accent-foreground);
  font-weight: 600;
}
.ad-nav-item.is-active svg { color: var(--accent-foreground); }
.ad-nav-sep { height: 1px; background: var(--border); margin: 0.6rem 0.65rem; }

.ad-side-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}
.ad-side-user-info { flex: 1; min-width: 0; }
.ad-side-user-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-side-user-mail { font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- backdrop (mobile) ---- */
.ad-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 35;
}

/* ---- main column ---- */
.ad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ad-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.35rem;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--border);
}
.ad-topbar-search { flex: 1; max-width: 420px; }
.ad-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.ad-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--secondary-foreground);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.ad-icon-btn:hover { background: var(--muted); }
.ad-lang { width: auto; padding: 0 0.7rem; font-weight: 700; font-size: 0.8rem; }
.ad-bell .ad-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ad-red); border: 2px solid var(--card);
}
.ad-menu-btn { display: none; }

/* ---- search input ---- */
.ad-search-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem;
  height: 40px;
  background: var(--muted);
  border-radius: 11px;
  color: var(--muted-foreground);
}
.ad-search-inline input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--foreground);
}

/* ---- content ---- */
.ad-content { padding: 1.6rem 1.6rem 2.5rem; max-width: 1240px; width: 100%; }

.ad-hello { margin-bottom: 1.4rem; }
.ad-hello-title { font-size: 1.55rem; font-weight: 700; margin: 0 0 0.25rem; }
.ad-hello-sub { color: var(--muted-foreground); margin: 0; }

.ad-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}
.ad-page-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.2rem; }
.ad-page-sub { color: var(--muted-foreground); margin: 0; }
.ad-page-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ---- KPI cards ---- */
.ad-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.ad-kpi {
  background: var(--card);
  border-radius: 16px;
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.ad-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.ad-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
}
.ad-kpi-icon.is-amber { background: var(--ad-amber-bg); color: var(--ad-amber); }
.ad-kpi-icon.is-blue { background: var(--ad-blue-bg); color: var(--ad-blue); }
.ad-kpi-icon.is-green { background: var(--ad-green-bg); color: var(--ad-green); }
.ad-kpi-icon.is-violet { background: var(--ad-violet-bg); color: var(--ad-violet); }
.ad-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.45rem;
  border-radius: 8px;
}
.ad-trend.is-up { color: var(--ad-green); background: var(--ad-green-bg); }
.ad-trend.is-down { color: var(--ad-red); background: var(--ad-red-bg); }
.ad-kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.ad-kpi-label { font-size: 0.9rem; font-weight: 600; margin-top: 0.15rem; }
.ad-kpi-foot { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.15rem; }

/* ---- cards / layout ---- */
.ad-grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.ad-card {
  background: var(--card);
  border-radius: 16px;
  padding: 1.25rem 1.3rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.2rem;
}
.ad-grid-2 .ad-card { margin-bottom: 0; }
.ad-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.ad-card-title { font-size: 1.02rem; font-weight: 700; }
.ad-card-sub { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.15rem; }
.ad-card-figure { font-size: 1.2rem; font-weight: 700; }
.ad-link {
  border: 0; background: transparent; cursor: pointer;
  color: var(--accent-foreground); font-weight: 600; font-size: 0.85rem;
  font-family: inherit;
}
.ad-link:hover { text-decoration: underline; }

/* ---- charts ---- */
.ad-chart-wrap { width: 100%; }
.ad-chart { width: 100%; height: auto; display: block; }
.ad-bar { fill: color-mix(in oklab, var(--primary) 30%, var(--card)); transition: fill 0.2s; }
.ad-bar.is-active { fill: var(--primary); }
.ad-axis { fill: var(--muted-foreground); font-size: 15px; font-family: var(--font-sans); }

.ad-donut-wrap { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ad-donut { width: 140px; height: 140px; flex: 0 0 auto; }
.ad-seg-1 { stroke: var(--seg1); color: var(--seg1); }
.ad-seg-2 { stroke: var(--seg2); color: var(--seg2); }
.ad-seg-3 { stroke: var(--seg3); color: var(--seg3); }
.ad-seg-4 { stroke: var(--seg4); color: var(--seg4); }
.ad-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 0.55rem; }
.ad-legend-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.ad-legend-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.ad-legend-label { flex: 1; color: var(--secondary-foreground); }
.ad-legend-val { font-weight: 700; }

/* ---- top products ---- */
.ad-top-list { display: flex; flex-direction: column; gap: 0.35rem; }
.ad-top-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.45rem 0; }
.ad-top-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--muted); }
.ad-top-info { flex: 1; min-width: 0; }
.ad-top-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-top-meta { font-size: 0.78rem; color: var(--muted-foreground); }
.ad-top-rev { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

/* ---- tables ---- */
.ad-table-wrap { overflow-x: auto; margin: 0 -0.35rem; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ad-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ad-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table tbody tr:hover { background: var(--muted); }
.ad-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--muted-foreground); }
.ad-muted { color: var(--muted-foreground); }

/* zero-state / empty placeholders (new store with no activity yet) */
.ad-empty {
  text-align: center;
  color: var(--muted-foreground);
  padding: 2.75rem 1rem;
  font-size: 0.92rem;
}
.ad-empty-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  color: var(--muted-foreground);
  font-size: 0.92rem;
}
.ad-right { text-align: right; }
/* Row-actions menu: edit/discount/delete collapse behind one "..." button per
   product row.

   The panel is fixed and takes its top/left from JS. .ad-table-wrap sets
   overflow-x for narrow screens, which forces overflow-y to auto as well, so an
   absolutely-positioned panel is clipped at the wrap's edge whichever way it
   opens — downward on the last row, upward on the first. Fixed resolves against
   the viewport instead and escapes the clip. That holds only while no ancestor
   of the table has transform/filter/contain (any of those would become its
   containing block and re-apply the clip); .ad-sidebar's transform is on a
   sibling, so the table is clear. */
.ad-row-menu { position: relative; display: inline-block; }
.ad-row-menu-panel {
  position: fixed;
  min-width: 172px;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  z-index: 60;
}
.ad-row-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.84rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ad-row-menu-item:hover { background: var(--muted); }
.ad-row-menu-item svg { flex-shrink: 0; }
.ad-cell-user { display: flex; align-items: center; gap: 0.6rem; }
.ad-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
  overflow: hidden;
  text-decoration: none;
}
.ad-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.ad-prod-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--muted); flex: 0 0 auto; }
.ad-prod-name { font-weight: 600; }
.ad-prod-id { font-size: 0.72rem; }

/* ---- badges ---- */
.ad-badge {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.ad-badge-paid, .ad-stock-in { background: var(--ad-green-bg); color: var(--ad-green); }
.ad-badge-completed { background: var(--ad-blue-bg); color: var(--ad-blue); }
.ad-badge-shipped { background: var(--ad-violet-bg); color: var(--ad-violet); }
.ad-badge-pending, .ad-stock-low { background: var(--ad-amber-bg); color: var(--ad-amber); }
.ad-badge-cancelled { background: var(--muted); color: var(--muted-foreground); }
.ad-stock-out { background: var(--ad-red-bg); color: var(--ad-red); }
/* Out of stock isn't a dead end — violet marks it as a live pre-order (distinct
   from the amber low-stock warning). */
.ad-stock-pre { background: var(--ad-violet-bg); color: var(--ad-violet); }

/* ---- reviews ---- */
.ad-review-stars {
  display: inline-flex;
  gap: 0.05rem;
  color: var(--primary);
}
.ad-review-comment {
  max-width: 320px;
  color: var(--muted-foreground);
  white-space: normal;
  line-height: 1.4;
}

/* ---- my sales rank (Dashboard card) ---- */
.ad-rank-card { margin-bottom: 1.2rem; }
.ad-rank-body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ad-rank-badge {
  display: grid;
  place-items: center;
  min-width: 6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  background: var(--muted);
  /* Podium colours only for the top three; everyone else keeps the neutral chip. */
  border: 2px solid var(--rank-color, transparent);
}
.ad-rank-badge.is-rank-1 { --rank-color: #d4a017; color: #d4a017; background: color-mix(in oklch, #d4a017 10%, transparent); }
.ad-rank-badge.is-rank-2 { --rank-color: #8f9aa6; color: #8f9aa6; background: color-mix(in oklch, #8f9aa6 10%, transparent); }
.ad-rank-badge.is-rank-3 { --rank-color: #b06a3b; color: #b06a3b; background: color-mix(in oklch, #b06a3b 10%, transparent); }
.ad-rank-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ad-rank-of {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.ad-rank-figures {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.ad-rank-fig-val {
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ad-rank-fig-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.ad-rank-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-foreground);
  background: var(--accent);
}
.ad-rank-gap.is-lead { color: #16a34a; background: color-mix(in oklch, #16a34a 10%, transparent); }
.ad-rank-empty {
  padding: 0.5rem 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .ad-rank-body { gap: 1rem; }
  .ad-rank-figures { gap: 1.2rem; }
}

/* ---- partner level (chess ranks) — profile page + dashboard ----
   Orange by request: --primary IS this site's orange, so the card keeps the
   theme in both hosts. The pieces are the Unicode chess set rendered as text;
   the symbol-font stack keeps them text-style (not emoji) everywhere. */
.pf-level-card {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.ad-level-card { margin-bottom: 1.2rem; }

.lv-badge,
.lv-ladder-piece,
.lv-bar-piece {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", serif;
  line-height: 1;
}

.lv-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.lv-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 14px;
  font-size: 30px;
  color: var(--primary-foreground);
  background: var(--primary);
}
.lv-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.lv-name {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

/* The whole ladder in miniature: conquered pieces lit orange, the current one
   ringed, the rest waiting in grey. */
.lv-ladder {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 21px;
}
.lv-ladder-piece { color: var(--border); }
.lv-ladder-piece.is-done { color: var(--primary); }
.lv-ladder-piece.is-current {
  border-radius: 6px;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.lv-sales-label {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}
.lv-sales {
  font-size: 1.05rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.lv-sales b {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-foreground);
}

.lv-bar {
  position: relative;   /* the piece badge anchors to the bar's end */
  height: 10px;
  margin: 0.55rem 0 0.65rem;
  border-radius: 999px;
  background: var(--muted);
}
.lv-bar-fill {
  display: block;
  height: 100%;
  width: 0;             /* JS sets the real width from data-pct */
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lv-bar-piece {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 16px;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 2px solid var(--background);
  box-shadow: var(--shadow-sm);
}

.lv-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-foreground);
}
.lv-fee-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

@media (max-width: 640px) {
  .lv-badge { width: 44px; height: 44px; font-size: 25px; border-radius: 12px; }
  .lv-name { font-size: 1.15rem; }
  .lv-ladder { font-size: 17px; gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-bar-fill { transition: none; }
}

/* ---- votes (head-to-head record for this seller's products) ---- */
.ad-vote-num { text-align: center; }
.ad-vote-wins { font-weight: 700; }
.ad-vote-rate {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 130px;
}
.ad-vote-bar {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.ad-vote-bar-fill {
  display: block;
  height: 100%;
  width: 0;                     /* JS sets the real width from win_rate */
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-vote-rate-val {
  min-width: 3.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .ad-vote-bar-fill { transition: none; }
}

/* ---- settings ---- */
.ad-settings-card { max-width: 620px; }
.ad-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Add-Product modal: price / stock / discount share one 3-up row. Placed after
   the base rule so it wins on desktop, but before the mobile @media below so
   narrow screens still collapse it to a single column. */
.ad-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.ad-settings-card .field { margin-bottom: 1rem; }
.ad-settings-card label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }

/* ---- add-product modal ---- */
.ad-product-dialog { max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; }
.ad-product-dialog .field { margin-bottom: 0.85rem; }
.ad-product-dialog .field label,
.ad-product-dialog .pf-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.ad-pm-image { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
#ad-pm-preview {
  width: 92px; height: 116px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--muted);
  flex: 0 0 auto;
}
.ad-pm-image-fields { flex: 1; min-width: 0; }
.ad-pm-upload { margin-top: 0.5rem; cursor: pointer; }
.ad-pm-url-row { display: flex; gap: 0.5rem; }
.ad-pm-url-row .input { flex: 1; min-width: 0; }
.ad-pm-hint { font-size: 0.75rem; color: var(--ad-text-dim, #8a8a8a); margin: 0.4rem 0 0; }

/* ---------- payout account card (Settings) ---------- */
.ad-bank-status     { margin: 0.75rem 0 0.25rem; }
.ad-bank-ok,
.ad-bank-warn       { display: inline-flex; align-items: center; gap: 0.35rem;
                      font-size: 0.78rem; font-weight: 600; border-radius: 999px;
                      padding: 0.25rem 0.65rem; }
/* The saved number is echoed here masked — monospace + tabular figures so the last
   four digits line up and are easy to check at a glance. */
.ad-bank-ok         { color: #1a7f4b; background: #e7f7ee;
                      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                      font-variant-numeric: tabular-nums; }
.ad-bank-warn       { color: #9a5b00; background: #fdf0d5; }
.ad-bank-note       { font-size: 0.72rem; color: var(--ad-text-dim, #8a8a8a);
                      margin: 0 0 0.85rem; }

/* ---- product options editor (Add Product modal, Lazada-style variations) ---- */
.ad-pm-options-field #ad-pm-options { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0; }
.ad-opt-group {
  border: 1px solid var(--ad-border, #e5e5e5);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: var(--ad-surface, #fafafa);
}
.ad-opt-group-head { display: flex; gap: 0.5rem; align-items: center; }
.ad-opt-group-head .ad-opt-name { flex: 1; min-width: 0; }
.ad-opt-del {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ad-border, #e5e5e5);
  border-radius: 8px;
  background: transparent;
  color: var(--ad-text-dim, #8a8a8a);
  cursor: pointer;
}
.ad-opt-del:hover { border-color: #ef4444; color: #ef4444; }
/* chip row: each value is a removable pill; the bare input sits inline after them */
.ad-opt-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-top: 0.55rem;
}
.ad-opt-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.35rem 0.25rem 0.35rem;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 0.85rem;
  font-weight: 600;
}
/* per-choice image slot: a camera button, or the chosen variation thumbnail */
.ad-opt-chip-cam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: rgba(154, 52, 18, 0.12);
  color: #9a3412; cursor: pointer;
  overflow: hidden; flex: 0 0 auto;
}
.ad-opt-chip-cam:hover { background: rgba(154, 52, 18, 0.22); }
.ad-opt-chip-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-opt-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem;
  border: none; border-radius: 50%;
  background: rgba(154, 52, 18, 0.12);
  color: #9a3412; cursor: pointer;
}
.ad-opt-chip-x:hover { background: #ef4444; color: #fff; }
.ad-opt-val-input {
  flex: 1; min-width: 8rem;
  border: none; outline: none; background: transparent;
  padding: 0.3rem 0.15rem;
  font: inherit; color: var(--foreground);
}
.ad-pm-opt-add { margin-top: 0.25rem; }
.ad-pm-opt-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- per-photo sub-product fields (Add Product modal): give any gallery photo a
   name + price to turn it into a purchasable sub-product; leave blank and it's
   just a plain photo. ---- */
.ad-pm-subs-hint { margin-top: -0.4rem; margin-bottom: 0.5rem; }
.ad-pm-thumb {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 8.5rem;
}
.ad-pm-thumb-img { position: relative; }
.ad-pm-thumb-sub {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ad-pm-thumb-sub input {
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  height: auto;
}
.ad-pm-thumb-sub .ad-pm-thumb-price,
.ad-pm-thumb-sub .ad-pm-thumb-stock {
  width: 100%;
}
.ad-pm-thumb-cover-note {
  font-size: 0.72rem;
  color: var(--ad-text-dim, #8a8a8a);
  margin: 0;
  line-height: 1.3;
}

/* ---- payment methods card (Settings) ---- */
#ad-pay-form { margin-top: 0.9rem; }
.ad-pay-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--ad-border, #e5e5e5);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 0.6rem;
}
.ad-pay-toggle:has(input:checked) {
  border-color: var(--primary);
  background: oklch(from var(--primary) l c h / 0.04);
}
.ad-pay-toggle input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.ad-pay-toggle-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ad-pay-toggle-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ad-pay-toggle-body strong { font-size: 0.88rem; }
.ad-pay-toggle-body span { font-size: 0.74rem; color: var(--ad-text-dim, #8a8a8a); }
.ad-pay-qr-box {
  margin: 0.25rem 0 0.9rem;
  padding: 0.9rem;
  border: 1.5px dashed var(--ad-border, #e5e5e5);
  border-radius: 10px;
  text-align: center;
}
.ad-pay-qr-preview {
  width: 150px;
  max-width: 100%;
  border-radius: 8px;
  background: #fff;
  padding: 0.4rem;
  border: 1px solid var(--ad-border, #e5e5e5);
  margin-bottom: 0.6rem;
}
.ad-pay-qr-actions { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
#ad-pay-form > .btn-primary { margin-top: 0.25rem; }

.ad-pm-thumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.ad-pm-thumb-img {
  position: relative;
  width: 100%; height: 62px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--muted);
  border: 1px solid var(--ad-border, #e5e5e5);
}
.ad-pm-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-pm-thumb-cover {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 0.6rem; text-align: center;
  background: rgba(0, 0, 0, 0.62); color: #fff; padding: 1px 0;
}
.ad-pm-thumb-del {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer;
}
.ad-pm-thumb-del:hover { background: var(--ad-red, #e53935); }
.ad-del-btn:hover { color: var(--ad-red); background: var(--ad-red-bg); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .ad-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .ad-shell.ad-sidebar-open .ad-sidebar { transform: translateX(0); }
  .ad-shell.ad-sidebar-open .ad-backdrop { display: block; }
  .ad-menu-btn { display: inline-flex; }
}
@media (max-width: 900px) {
  .ad-grid-2 { grid-template-columns: 1fr; }
  .ad-grid-2 .ad-card { margin-bottom: 1.2rem; }
}
@media (max-width: 640px) {
  .ad-content { padding: 1.1rem 1rem 2rem; }
  .ad-topbar { padding: 0.6rem 1rem; }
  .ad-topbar-search { display: none; }
  .ad-hello-title { font-size: 1.3rem; }
  .ad-hide-sm { display: none; }
  .ad-form-row { grid-template-columns: 1fr; }
  .ad-kpi-value { font-size: 1.45rem; }
}

/* ── Partner storefront profile (partner-profile.html) ── */
.pp-page { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* Modern hero — cover + overlapping avatar + handle + chips (matches profile.html) */
.pp-breadcrumb { margin-bottom: 1rem; }
.pp-hero {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 1.25rem;
}
.pp-hero-cover {
  height: 160px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 15% 0%, oklch(0.85 0.14 60 / 0.9), transparent 55%),
    linear-gradient(120deg, oklch(0.80 0.16 65), oklch(0.72 0.18 25), oklch(0.66 0.17 350), oklch(0.66 0.15 300));
}
/* The seller's real uploaded cover (users.cover) overlays the gradient fallback. */
.pp-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- profile "Favorites" tab (wishlist grid) ----
   Reuses the compact .related-card look; each card carries an unheart/remove button. */
.pf-fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.pf-fav-card { position: relative; }
.pf-fav-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #dc2626;
  cursor: pointer;
  box-shadow: 0 1px 4px hsl(0 0% 0% / 0.15);
  transition: background 0.15s, transform 0.15s;
}
.pf-fav-remove:hover { background: #fff; transform: scale(1.06); }

/* ---- ImageCropper modal (pan/zoom crop for the profile cover) ---- */
.cropper-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: hsl(0 0% 0% / 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.cropper {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  color: var(--card-foreground);
  border-radius: 1rem;
  box-shadow: 0 20px 60px hsl(0 0% 0% / 0.35);
  overflow: hidden;
}
.cropper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.cropper-x {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-foreground);
}
.cropper-x:hover { color: var(--foreground); }
/* The stage IS the crop frame — what you see here is exactly what gets saved. */
.cropper-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: repeating-conic-gradient(#e9e9ec 0% 25%, #f7f7f9 0% 50%) 50% / 22px 22px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.cropper-stage.is-grabbing { cursor: grabbing; }
.cropper-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;          /* JS sets an explicit px size + transform */
  pointer-events: none;
  -webkit-user-drag: none;
}
.cropper-hint {
  padding: 0.6rem 1.25rem 0;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  text-align: center;
}
.cropper-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
}
.cropper-controls .cropper-zoom { flex: 1; accent-color: #f57c00; }
.cropper-zoom-in,
.cropper-zoom-out {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--muted);
  color: var(--foreground);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cropper-zoom-in:hover,
.cropper-zoom-out:hover { background: var(--border); }
.cropper-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0 1.25rem 1.25rem;
}
.pp-hero-body { padding: 0 1.75rem 1.5rem; }
.pp-hero-avatar {
  width: 104px;
  height: 104px;
  margin-top: -54px;
  border-radius: 50%;
  border: 4px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.18);
  position: relative;
}
.pp-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.pp-hero-headings { min-width: 0; }
.pp-hero-name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--foreground);
  word-break: break-word;
}
.pp-hero-handle {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.15rem;
}
.pp-hero-headings .pp-badge { margin: 0.55rem 0 0; }
.pp-hero-meta .pp-actions { margin-top: 0.25rem; }
.pp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.pp-hero-chips .pf-chip strong { color: var(--foreground); font-weight: 700; }
@media (max-width: 640px) {
  .pp-hero-cover { height: 120px; }
  .pp-hero-body { padding: 0 1.1rem 1.25rem; }
}
@media (max-width: 480px) {
  .pp-hero-avatar { width: 84px; height: 84px; font-size: 2rem; margin-top: -46px; }
  .pp-hero-name { font-size: 1.3rem; }
  .pp-hero-meta .pp-actions { width: 100%; }
}

/* Tabs sized to content + left-aligned on this wider page */
.pp-tabs .pf-tab { flex: 0 1 auto; min-width: 110px; }
.pp-page .pf-tabpanels { margin-top: 1.25rem; }

/* About panel — store info */
.pp-about {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pp-about-title { font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.pp-about-intro { color: var(--muted-foreground); margin: 0.6rem 0 1.25rem; line-height: 1.6; }
.pp-about-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.pp-about-stat strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1.1; }
.pp-about-stat span { font-size: 0.8rem; color: var(--muted-foreground); font-weight: 500; }

/* Shopee-style header card — real seller profile */
.pp-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (max-width: 640px) {
  .pp-header { padding: 1.25rem 1rem; }
}

.pp-avatar-wrap { 
  flex-shrink: 0; 
}
.pp-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  border: 4px solid #fff;
  box-shadow: 0 3px 15px rgba(0,0,0,0.18);
  position: relative;
}
@media (max-width: 480px) {
  .pp-avatar { width: 76px; height: 76px; font-size: 1.8rem; border-width: 3px; }
}

.pp-info { 
  flex: 1; 
  min-width: 0;
}

.pp-name { 
  font-size: 1.5rem; 
  font-weight: 700; 
  line-height: 1.2; 
  margin-bottom: 0.4rem;
  color: var(--foreground);
}
@media (max-width: 480px) {
  .pp-name { font-size: 1.25rem; }
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f97316;
  background: #fff7ed;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  border: 1px solid #fed7aa;
  letter-spacing: 0.5px;
}

.pp-stats-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.pp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 70px;
}

.pp-stat strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.pp-stat-sep {
  color: var(--border);
  font-size: 0.85rem;
  display: none;
}

.pp-stat > span:not(strong) {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.1rem;
  font-weight: 500;
}

/* action buttons column */
.pp-actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  .pp-actions { 
    width: 100%; 
    justify-content: flex-start;
    order: 4;
    flex-basis: 100%;
    margin-top: 0.5rem;
  }
}

/* follow button */
.pp-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  height: 2.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pp-follow-btn:hover {
  background: color-mix(in oklab, var(--primary) 85%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.pp-follow-btn.is-following {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.pp-follow-btn.is-following:hover {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.pp-follow-btn:disabled { 
  opacity: 0.6; 
  pointer-events: none; 
  transform: none;
}

/* chat button */
.pp-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  height: 2.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pp-chat-btn:hover {
  background: var(--muted);
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
.pp-chat-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}

.pp-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--foreground);
  padding-top: 0.5rem;
}

.pp-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  border-radius: var(--radius-lg);
  margin-top: 1rem;
}

.pp-empty-emoji { 
  font-size: 3.5rem; 
  margin-bottom: 1rem;
}

.pp-not-found { 
  text-align: center; 
  padding: 5rem 1rem;
}

/* ── follower count on profile page ── */
.pf-follower-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-left: 0.25rem;
}

/* ── Seller profile card on product detail page ── */
.product-seller-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  background: var(--muted);
  border-radius: var(--radius-lg);
  transition: background 0.2s;
}
.product-seller-card:hover {
  background: color-mix(in oklab, var(--muted) 80%, var(--primary) 20%);
}

.product-seller-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.product-seller-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* flex: 0 0 auto + nowrap keeps the label intact; the card's flex-wrap lets the
   whole button drop to its own line on narrow screens instead of overflowing. */
.product-chat-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.product-seller-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.product-seller-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  cursor: pointer;
}
.product-seller-name:hover {
  text-decoration: underline;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
}

/* ======================================================================
   Order tracking — seller-managed fulfilment
   Flow: pending → confirmed → preparing → packing → ready → shipped → delivered
   ====================================================================== */

/* extra status badge colours (admin) */
.ad-badge-confirmed { background: var(--ad-blue-bg);   color: var(--ad-blue); }
.ad-badge-preparing { background: var(--ad-violet-bg); color: var(--ad-violet); }
.ad-badge-packing   { background: var(--ad-violet-bg); color: var(--ad-violet); }
.ad-badge-ready     { background: var(--ad-amber-bg);  color: var(--ad-amber); }
.ad-badge-delivered { background: var(--ad-green-bg);  color: var(--ad-green); }

/* ---- seller order cards ---- */
.ad-orders { display: flex; flex-direction: column; gap: 1rem; }
.ad-ord-card {
  background: var(--card);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
}
.ad-ord-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; }
.ad-ord-id { font-weight: 700; font-size: 0.95rem; }
.ad-ord-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; color: var(--muted-foreground); font-size: 0.85rem; margin-bottom: 0.8rem; }
.ad-ord-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ad-ord-meta svg { opacity: 0.7; }
.ad-ord-total { margin-left: auto; color: var(--foreground); font-weight: 700; }
.ad-ord-items { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.65rem 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.ad-ord-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.ad-ord-item > span:first-child { flex: 1; }
.ad-ord-item-amt { font-weight: 600; }
.ad-ord-foot { display: flex; justify-content: flex-end; margin-top: 0.95rem; }
.ad-ord-done { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ad-green); font-weight: 600; font-size: 0.9rem; }

/* ---- horizontal stepper ---- */
.ad-stepper { display: flex; align-items: flex-start; overflow-x: auto; padding: 0.9rem 0 0.2rem; }
.ad-step { flex: 1 1 0; min-width: 60px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.ad-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.ad-step:first-child::before { display: none; }
.ad-step-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 999px; background: var(--muted); border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ad-step-label { margin-top: 0.35rem; font-size: 0.68rem; line-height: 1.2; color: var(--muted-foreground); white-space: nowrap; }
.ad-step-done .ad-step-dot { background: var(--ad-green); border-color: var(--ad-green); }
.ad-step-done::before, .ad-step-active::before { background: var(--ad-green); }
.ad-step-active .ad-step-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent); }
.ad-step-active .ad-step-label { color: var(--foreground); font-weight: 700; }

/* ======================================================================
   Order tracking — buyer timeline (Profile > Orders), auto-syncing
   ====================================================================== */
.pf-orders-loading { display: flex; justify-content: center; padding: 1.4rem 0; }
.pf-orders-empty { text-align: center; padding: 1.4rem 1rem; color: var(--muted-foreground); }
.pf-orders-empty-emoji { font-size: 2rem; margin-bottom: 0.35rem; }
.pf-orders-empty-title { font-weight: 700; color: var(--foreground); }
.pf-orders-empty-sub { font-size: 0.85rem; margin-top: 0.2rem; }

.pf-order-card { position: relative; border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 0.85rem; background: var(--card); }
.pf-order-card:last-child { margin-bottom: 0; }
/* brief highlight + chip when a poll brings a new status from the seller */
.pf-order-updated { animation: pf-card-flash 1.8s ease; }
@keyframes pf-card-flash {
  0% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 40%, transparent); border-color: var(--primary); }
  100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border); }
}
.pf-order-flash {
  position: absolute; top: -9px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700;
  color: var(--primary-foreground); background: var(--primary);
  padding: 0.16rem 0.5rem; border-radius: 999px;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--primary) 40%, transparent);
  animation: pf-flash-fade 2.6s ease forwards;
}
@keyframes pf-flash-fade {
  0% { opacity: 0; transform: translateY(4px); }
  12% { opacity: 1; transform: translateY(0); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-3px); }
}
.pf-order-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.pf-order-id { font-weight: 700; font-size: 0.9rem; }
.pf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pf-order-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--primary); background: color-mix(in oklab, var(--primary) 13%, transparent); padding: 0.2rem 0.55rem; border-radius: 999px; }
.pf-live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); animation: pf-live-pulse 1.6s ease-in-out infinite; }
.pf-order-done { color: #16a45a; background: color-mix(in oklab, #16a45a 14%, transparent); }
@keyframes pf-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }

.pf-order-items { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.85rem; }
.pf-order-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; }
.pf-order-item > span:first-child { flex: 1; }
.pf-order-item-amt { font-weight: 600; }
.pf-order-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); }

/* ---- horizontal fulfilment timeline (a little truck drives to the current step) ---- */
.pf-timeline { position: relative; display: flex; align-items: flex-start; margin-top: 0.6rem; padding-top: 1.55rem; }
.pf-tl-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* connecting segment: from the previous marker's centre to this one's */
.pf-tl-step::before { content: ""; position: absolute; top: 8px; right: 50%; left: -50%; height: 2px; background: var(--border); z-index: 0; }
.pf-tl-step:first-child::before { display: none; }
.pf-tl-marker { position: relative; z-index: 1; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; background: var(--muted); border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.pf-tl-body { display: flex; flex-direction: column; align-items: center; margin-top: 0.32rem; }
.pf-tl-label { font-size: 0.6rem; line-height: 1.14; font-weight: 600; color: var(--muted-foreground); overflow-wrap: anywhere; word-break: break-word; }
.pf-tl-meta { display: none; }   /* per-step timestamps hidden in the compact horizontal layout */
.pf-tl-cur { color: var(--primary); font-weight: 700; }
.pf-tl-done .pf-tl-marker { background: #16a45a; border-color: #16a45a; }
.pf-tl-done::before { background: #16a45a; }
.pf-tl-done .pf-tl-label { color: var(--foreground); }
.pf-tl-active::before { background: var(--primary); }
.pf-tl-active .pf-tl-marker { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent); }
.pf-tl-active .pf-tl-label { color: var(--foreground); font-weight: 700; }
.pf-tl-pulse { width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: pf-live-pulse 1.4s ease-in-out infinite; }
/* the delivery truck: parked over the current step, bobbing along as if driving */
.pf-tl-truck { position: absolute; top: 2px; z-index: 3; transform: translateX(-50%); color: var(--primary); pointer-events: none; animation: pf-truck-drive 0.85s ease-in-out infinite; }
.pf-tl-truck svg { display: block; width: 15px; height: 15px; }
.pf-tl-truck::before { content: ""; position: absolute; top: 50%; right: 100%; margin-right: 2px; width: 7px; height: 2px; border-radius: 2px; background: currentColor; transform: translateY(-50%); opacity: 0.55; animation: pf-truck-speed 0.5s linear infinite; }
@keyframes pf-truck-drive {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  30% { transform: translateX(-50%) translateY(-2px) rotate(-2deg); }
  55% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  80% { transform: translateX(-50%) translateY(-1px) rotate(2deg); }
}
@keyframes pf-truck-speed {
  0% { opacity: 0.6; transform: translateY(-50%) translateX(0) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) translateX(-5px) scaleX(0.3); }
}
/* delivered → the truck has arrived, so it parks (no bob, no speed lines) */
.pf-tl-arrived .pf-tl-truck { animation: none; }
.pf-tl-arrived .pf-tl-truck::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-tl-truck { animation: none; }
  .pf-tl-truck::before { animation: none; opacity: 0.4; }
}

/* ======================================================================
   Saved addresses — profile address book, checkout selector, order ship-to
   ====================================================================== */

/* ---- order card "ship to" line (buyer timeline + seller order card) ---- */
.pf-order-ship { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.82rem; color: var(--muted-foreground); margin-bottom: 0.85rem; }
.pf-order-pay { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted-foreground); margin-bottom: 0.85rem; }
.pf-order-pay svg { flex-shrink: 0; opacity: 0.8; }
.ad-ord-ship { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.83rem; color: var(--muted-foreground); margin-top: 0.8rem; }
.pf-order-ship svg, .ad-ord-ship svg { flex-shrink: 0; margin-top: 0.15rem; opacity: 0.8; }

/* ---- profile: address book ---- */
.pf-addr-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.pf-addr-head .pf-section-title { margin: 0; }
.pf-addr-card { border-radius: 14px; padding: 0.9rem 1rem; }
.pf-addr-card + .pf-addr-card { margin-top: 0.7rem; }
.pf-addr-card.is-default { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); background: color-mix(in oklab, var(--primary) 4%, transparent); }
.pf-addr-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.pf-addr-label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.9rem; }
.pf-addr-badge { font-size: 0.66rem; font-weight: 700; color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); padding: 0.12rem 0.45rem; border-radius: 999px; }
.pf-addr-who { font-size: 0.85rem; }
.pf-addr-loc { font-size: 0.82rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.pf-addr-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.pf-addr-link { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.pf-addr-link:hover { text-decoration: underline; }
.pf-addr-danger { color: var(--ad-red); }
.pf-addr-empty { text-align: center; padding: 1.3rem 1rem; color: var(--muted-foreground); }
.pf-addr-empty-icon { color: var(--muted-foreground); }
.pf-addr-empty-title { font-weight: 700; color: var(--foreground); margin-top: 0.3rem; }
.pf-addr-empty-sub { font-size: 0.85rem; margin-top: 0.15rem; }
.pf-addr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pf-addr-form-grid .field-full { grid-column: 1 / -1; }
.pf-addr-form-grid .field { display: flex; flex-direction: column; gap: 0.3rem; }
.pf-addr-default-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-size: 0.85rem; cursor: pointer; }

/* ---- checkout: saved-address selector ---- */
.co-addr-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.co-addr-manage { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.co-addr-list { display: flex; flex-direction: column; gap: 0.6rem; }
.co-addr-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.co-addr-option input[type="radio"] { display: none; }
.co-addr-option.selected { border-color: var(--primary); background: oklch(from var(--primary) l c h / 0.05); }
.co-addr-radio { width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.1rem; color: transparent; transition: all 0.15s; }
.co-addr-option.selected .co-addr-radio { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.co-addr-body { flex: 1; display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.co-addr-line1 { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.co-addr-badge { font-size: 0.66rem; font-weight: 700; color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); padding: 0.1rem 0.4rem; border-radius: 999px; }
.co-addr-who { font-size: 0.82rem; color: var(--foreground); }
.co-addr-loc { font-size: 0.8rem; color: var(--muted-foreground); }
.co-addr-empty { text-align: center; padding: 1.4rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.co-addr-empty-icon { color: var(--muted-foreground); }
.co-addr-empty-title { font-weight: 700; }
.co-addr-empty-sub { font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 0.4rem; }

/* ===========================================================
   PRODUCT SEARCH  (storefront results summary, above the grid)
   =========================================================== */
#search-summary { max-width: 80rem; margin: 0 auto 1rem; }
#search-summary[hidden] { display: none; }
.search-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.search-summary-text { color: var(--muted-foreground); font-size: 0.95rem; }
.search-clear { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-family: inherit; color: var(--foreground); background: transparent; border: 1px solid var(--border); border-radius: 9999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.search-clear:hover { background: var(--muted); border-color: var(--muted-foreground); }
.search-clear svg { display: block; }

/* ================================================================
   PORTFOLIO PAGE — Apple-inspired scroll storytelling
   ================================================================ */

/* ── scroll progress bar ──────────────────────────────────────── */
.pf-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--primary);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── nav dots (right edge) ────────────────────────────────────── */
.pf-nav-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 500;
}
.pf-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--foreground) 22%, transparent);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.pf-nav-dot:hover,
.pf-nav-dot.active {
  background: var(--primary);
  transform: scale(1.5);
}
@media (max-width: 768px) {
  .pf-nav-dots { display: none; }
}

/* ── loading dots ─────────────────────────────────────────────── */
.pf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 60vh;
}
.pf-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: pf-bounce 1.2s ease-in-out infinite;
}
.pf-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.pf-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pf-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-12px); opacity: 1; }
}

/* ── section base (portfolio only) ────────────────────────────── */
[data-page="portfolio"] .pf-section {
  padding: 7rem 0;
  overflow: hidden;
}
[data-page="portfolio"] .pf-section--light { background: var(--background); }
[data-page="portfolio"] .pf-section--dark  { background: oklch(0.12 0.01 260); color: #f5f5f7; }
[data-page="portfolio"] .pf-section--accent { background: oklch(0.96 0.015 80); }

/* ── scroll reveal animations ─────────────────────────────────── */
.pf-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-reveal.pf-visible {
  opacity: 1;
  transform: translateY(0);
}

.pf-reveal-child {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-reveal-child:nth-child(1) { transition-delay: 0.05s; }
.pf-reveal-child:nth-child(2) { transition-delay: 0.12s; }
.pf-reveal-child:nth-child(3) { transition-delay: 0.19s; }
.pf-reveal-child:nth-child(4) { transition-delay: 0.26s; }
.pf-reveal-child.pf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── typography tokens ─────────────────────────────────────────── */
.pf-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  opacity: 0.9;
}
[data-page="portfolio"] .pf-section--dark .pf-eyebrow { color: var(--primary); }

.pf-headline {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.pf-headline--xl {
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1.0;
}
.pf-headline--lg {
  font-size: clamp(2rem, 5vw, 4rem);
}
.pf-headline--md {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}
[data-page="portfolio"] .pf-section--dark .pf-headline { color: #f5f5f7; }

.pf-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 400;
  line-height: 1.55;
  opacity: 0.75;
  max-width: 540px;
  margin-top: 1.5rem;
}
.pf-body-lg {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  opacity: 0.75;
}
[data-page="portfolio"] .pf-section--dark .pf-body-lg,
[data-page="portfolio"] .pf-section--dark .pf-sub { color: #f5f5f7; }

/* ── buttons ───────────────────────────────────────────────────── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 980px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 2rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  margin-top: 2rem;
  border: 2px solid transparent;
  letter-spacing: -0.01em;
}
.pf-btn:hover { transform: translateY(-2px); }
.pf-btn:active { transform: translateY(0) scale(0.98); }

.pf-btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 4px 20px color-mix(in oklab, var(--primary) 40%, transparent);
}
.pf-btn--primary:hover {
  box-shadow: 0 6px 28px color-mix(in oklab, var(--primary) 55%, transparent);
}
.pf-btn--outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
[data-page="portfolio"] .pf-section--dark .pf-btn--outline {
  color: #f5f5f7;
  border-color: rgba(255,255,255,0.3);
}
.pf-btn--sm { padding: 0.65rem 1.5rem; font-size: 0.875rem; }
.pf-btn--lg { padding: 1rem 2.5rem; font-size: 1.05rem; }

/* ── hero section ─────────────────────────────────────────────── */
[data-page="portfolio"] .pf-section--hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  background: oklch(0.10 0.01 260);
}
.pf-hero-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8rem 2rem 5rem;
  position: relative;
  will-change: transform, opacity;
}
.pf-hero-text { max-width: 680px; }
[data-page="portfolio"] .pf-section--hero .pf-eyebrow { color: var(--primary); }

.pf-hero-scroll-hint {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.45;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5f5f7;
}
.pf-scroll-line {
  width: 40px;
  height: 1px;
  background: #f5f5f7;
  animation: pf-scroll-line 2s ease-in-out infinite;
  transform-origin: left;
}
@keyframes pf-scroll-line {
  0% { transform: scaleX(0); opacity: 0; }
  50% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1.1); opacity: 0; }
}

/* ── section header & footer ──────────────────────────────────── */
.pf-section-header {
  margin-bottom: 3.5rem;
  max-width: 560px;
}
.pf-section-footer {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.pf-no-products {
  grid-column: 1 / -1;
  text-align: center;
  opacity: 0.5;
  padding: 3rem;
}

/* ── text feature (two column) ────────────────────────────────── */
.pf-text-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 768px) {
  .pf-text-feature { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── stats ────────────────────────────────────────────────────── */
.pf-stats-header { max-width: 560px; margin-bottom: 3.5rem; }
.pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .pf-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pf-stats-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.pf-stat-item {
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.5rem;
  text-align: center;
}
.pf-stat-value {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.65rem;
}
.pf-stat-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.65;
}

/* ── product showcase ─────────────────────────────────────────── */
.pf-product-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .pf-product-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pf-product-showcase-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}
.pf-product-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.pf-product-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}
.pf-product-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--muted);
}
.pf-product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-product-card:hover .pf-product-card-img img {
  transform: scale(1.06);
}
.pf-product-card-body {
  padding: 1rem 1rem 1.25rem;
}
.pf-product-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-product-card-price {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 700;
}

/* ── two column features ──────────────────────────────────────── */
.pf-two-col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1024px) {
  .pf-two-col-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pf-two-col-grid { grid-template-columns: 1fr; }
}
.pf-two-col-item {
  padding: 2rem 1.75rem;
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, #f5f5f7 8%, transparent);
}
[data-page="portfolio"] .pf-section--dark .pf-two-col-item {
  background: rgba(255,255,255,0.06);
}
.pf-two-col-icon {
  margin-bottom: 1.25rem;
  color: var(--primary);
}
.pf-two-col-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  color: #f5f5f7;
}
.pf-two-col-body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(245,245,247,0.65);
}

/* ── partners section ─────────────────────────────────────────── */
.pf-partners-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 768px) {
  .pf-partners-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.pf-partners-right { display: flex; flex-direction: column; align-items: flex-start; }

/* ── outro section ────────────────────────────────────────────── */
[data-page="portfolio"] .pf-section--outro {
  min-height: 80svh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
}
.pf-outro-inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}
[data-page="portfolio"] .pf-section--outro .pf-headline { color: #f5f5f7; }
[data-page="portfolio"] .pf-section--outro .pf-sub { margin: 1.5rem auto 0; }
[data-page="portfolio"] .pf-section--outro .pf-btn { margin: 2rem auto 0; }

/* ── responsive container padding ─────────────────────────────── */
[data-page="portfolio"] .pf-section .container {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (max-width: 600px) {
  .pf-section { padding: 0rem 0; }
  .pf-section .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ============================================================
   Buyer <-> seller chat — floating launcher + slide-in drawer
   (shared by shoppers and sellers; see js/chat.js)
   ============================================================ */
.chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary, #111); color: var(--primary-foreground, #fff);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease;
}
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 20px; text-align: center;
  border: 2px solid var(--background, #fff);
}

.chat-scrim {
  position: fixed; inset: 0; z-index: 950; background: rgba(15, 23, 42, 0.4);
  opacity: 0; transition: opacity 0.2s ease;
}
.chat-scrim.is-open { opacity: 1; }
body.chat-open { overflow: hidden; }

.chat-drawer {
  position: fixed; z-index: 960; top: 0; right: 0; height: 100%;
  width: 380px; max-width: 100%;
  background: var(--card, #fff); color: var(--foreground, #0f172a);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px -12px rgba(0, 0, 0, 0.35);
  transform: translateX(100%); transition: transform 0.24s ease;
}
.chat-drawer.is-open { transform: translateX(0); }
/* Closed = fully out of layout. Without this, the class rule's display:flex overrides
   the [hidden] attribute, leaving the off-screen panel in flow and creating horizontal
   overflow (a blank strip down the right edge, most obvious on mobile). */
.chat-drawer[hidden], .chat-scrim[hidden] { display: none; }

.chat-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #e5e7eb); flex: 0 0 auto;
}
.chat-head-title { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-icon-btn {
  border: none; background: transparent; color: inherit; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.chat-icon-btn:hover { background: var(--muted, #f1f5f9); }

.chat-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.chat-body-thread { display: flex; flex-direction: column; overflow: hidden; }
.chat-loading { display: flex; justify-content: center; padding: 2.5rem; }
.chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 3rem 1.5rem; text-align: center; color: var(--muted-foreground, #64748b);
}
.chat-empty-title { font-weight: 600; color: var(--foreground, #0f172a); }
.chat-empty-sub { font-size: 0.85rem; }

.chat-list { display: flex; flex-direction: column; }
.chat-conv {
  display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left;
  padding: 0.75rem 1rem; background: none; border: none;
  border-bottom: 1px solid var(--border, #f1f5f9); cursor: pointer;
}
.chat-conv:hover { background: var(--muted, #f8fafc); }
.chat-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-conv-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.chat-conv-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv-time { font-size: 0.72rem; color: var(--muted-foreground, #94a3b8); flex: 0 0 auto; }
.chat-conv-bottom { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.chat-conv-preview { font-size: 0.82rem; color: var(--muted-foreground, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-conv-badge { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; }
.chat-role { display: inline-block; margin-top: 3px; font-size: 0.66rem; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; align-self: flex-start; }
.chat-role-seller { background: #eef2ff; color: #4f46e5; }
.chat-role-buyer { background: #ecfdf5; color: #059669; }

.chat-av {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--muted, #e2e8f0); color: var(--muted-foreground, #475569);
  font-weight: 700; overflow: hidden;
}
.chat-av-md { width: 44px; height: 44px; font-size: 1rem; }
.chat-av.has-img { background: none; }
.chat-av img { width: 100%; height: 100%; object-fit: cover; }

.chat-context {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #eef2f6); background: var(--muted, #f8fafc);
  text-decoration: none; color: inherit; flex: 0 0 auto;
}
.chat-context-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #e2e8f0; }
.chat-context-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-context-label { font-size: 0.68rem; color: var(--muted-foreground, #94a3b8); }
.chat-context-name { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-context-plain { background: none; }

.chat-msgs { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem; }
.chat-thread-empty { margin: auto; color: var(--muted-foreground, #94a3b8); font-size: 0.85rem; text-align: center; }
.chat-msg { max-width: 78%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble {
  padding: 0.5rem 0.8rem; border-radius: 16px; border-bottom-left-radius: 4px;
  font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere;
  background: var(--muted, #f1f5f9); color: var(--foreground, #0f172a);
}
.chat-msg.is-mine .chat-bubble {
  background: var(--primary, #111); color: var(--primary-foreground, #fff);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
}
.chat-msg-time { font-size: 0.66rem; color: var(--muted-foreground, #94a3b8); padding: 0 0.3rem; }

.chat-input {
  display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border, #e5e7eb); flex: 0 0 auto;
}
.chat-input-field {
  flex: 1; resize: none; border: 1px solid var(--border, #e2e8f0); border-radius: 18px;
  padding: 0.55rem 0.85rem; font: inherit; font-size: 0.9rem; line-height: 1.35; max-height: 120px;
  background: var(--background, #fff); color: inherit;
}
.chat-input-field:focus { outline: none; border-color: var(--primary, #111); }
.chat-send {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--primary, #111); color: var(--primary-foreground, #fff);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.chat-send:hover { opacity: 0.9; }

@media (max-width: 480px) {
  .chat-drawer { width: 100%; }
  .chat-launcher { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* Home section wrapper — shared by the featured-shops row and Suggested Picks.
   (Named sbc-* from the old "shop by categories" block it was introduced with.) */
.sbc-section {
  max-width: 80rem;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}

/* ============================================================
   Featured shops — dark profile cards on the home page
   (index.html / page-home.js). Replaced the old static
   "featured collections" image tiles.

   The card keeps its own dark palette rather than the page
   tokens: it is a deliberate dark surface on a light page, so
   var(--card)/var(--foreground) would erase the design.
   ============================================================ */
.shop-card-row {
  /* Mobile: swipe carousel — same scroll-snap feel as the promo banner
     and the tiles this replaced. Desktop: static 4-up grid. */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-card-row::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .shop-card-row {
    display: grid;
    /* minmax(0, 1fr), never a bare 1fr: 1fr means minmax(auto, 1fr), and that auto
       floors every column at its card's min-content width. A shop name is user
       input set in white-space:nowrap, so its min-content is the whole string —
       one long name would blow its column out (and the page with it). The
       ellipsis on .shop-card-name only clips paint; it does not shrink what the
       column measures. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    gap: 1.25rem;
    padding-bottom: 0;
  }
}
@media (min-width: 1000px) {
  .shop-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.shop-card {
  --sc-surface: #191919;
  --sc-raised: #262626;
  --sc-text: #f5f5f5;
  --sc-dim: #8f8f8f;
  flex: 0 0 74%;
  /* Same reason as the grid's minmax(0, …): as a flex item the card also gets
     min-width:auto, which would let a long shop name override the 74% basis. */
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  border-radius: 22px;
  background: var(--sc-surface);
  color: var(--sc-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
}
@media (min-width: 640px) {
  .shop-card { flex: initial; }
}
.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

/* ---- cover + avatar + shop badge ---- */
.shop-card-cover {
  position: relative;
  height: 98px;
  border-radius: 16px;
  overflow: hidden;
  /* Shown when a shop has no cover of its own — the reference card's warm
     blur, so an unstyled shop still looks intentional rather than broken. */
  background:
    radial-gradient(120% 120% at 18% 15%, #ffd08a 0%, transparent 55%),
    radial-gradient(120% 120% at 78% 30%, #ff7a4d 0%, transparent 55%),
    radial-gradient(140% 140% at 60% 100%, #3f6ad8 0%, transparent 60%),
    linear-gradient(135deg, #f0913f, #c2410c);
}
.shop-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-card-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: calc(100% - 14px);
  padding: 0.24rem 0.5rem 0.24rem 0.3rem;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}
.shop-card-badge-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: #e5484d;
  color: #fff;
  flex-shrink: 0;
}

.shop-card-avatar {
  /* Pulled up over the cover, ringed in the card colour so it reads as
     lifted off the image rather than pasted on it. */
  position: relative;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 0.35rem;
  border-radius: 50%;
  border: 3px solid var(--sc-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-raised);
  color: var(--sc-dim);
}
.shop-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- name row ---- */
.shop-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.3rem 0;
}
.shop-card-headings { min-width: 0; flex: 1; }
.shop-card-name {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  /* Shop names are user input and can be any length — never let one
     push the card wider than its grid column. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-card-handle {
  margin-top: 0.1rem;
  font-size: 0.76rem;
  color: var(--sc-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-card-chat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--sc-raised);
  color: var(--sc-text);
  cursor: pointer;
  transition: background 0.2s;
}
.shop-card-chat:hover { background: #333; }

/* ---- stats ---- */
.shop-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 0.8rem 0.3rem 0.9rem;
}
.shop-card-stat { min-width: 0; }
.shop-card-stat-top {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.shop-card-stat-top svg { flex-shrink: 0; }
.shop-card-stat-label {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--sc-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-card-ic-rating { color: #f5a524; }
.shop-card-ic-products { color: #4d8bf5; }
.shop-card-ic-followers { color: #a06bf5; }

/* ---- CTA ---- */
.shop-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: auto;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #141414;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.shop-card-cta:hover { background: #e9e9e9; transform: scale(1.01); }

.shop-card-skeleton {
  min-height: 260px;
  border-radius: 22px;
  background: linear-gradient(100deg, #1d1d1d 30%, #262626 50%, #1d1d1d 70%);
  background-size: 220% 100%;
  animation: shop-card-shimmer 1.2s linear infinite;
}
@keyframes shop-card-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-card-cta { transition: none; }
  .shop-card:hover, .shop-card-cta:hover { transform: none; }
  .shop-card-skeleton { animation: none; }
}

/* ============================================================
   Live sales leaderboard — shops ranked by total sales
   (index.html, driven by js/leaderboard.js).
   ============================================================ */
.lb-section { max-width: 52rem; }
.lb-section-sub {
  margin: -1.4rem 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.95rem;
}
.lb-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--destructive);
  background: color-mix(in oklch, var(--destructive) 12%, transparent);
}
.lb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--destructive);
  animation: lb-pulse 1.8s ease-in-out infinite;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.lb-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lb-row:hover { box-shadow: var(--shadow-sm); }
.lb-row-link {
  display: grid;
  /* rank | avatar | name (flexes) | figures. minmax(0,…) on the name column so a
     long shop name ellipses instead of shoving the money off the row. */
  grid-template-columns: 2.2rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  color: inherit;
}
.lb-row-link.is-static { cursor: default; }   /* shop has no products to open */

.lb-rank {
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.lb-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  color: var(--muted-foreground);
  background: var(--muted);
  flex: 0 0 auto;
}
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }

.lb-who { min-width: 0; }
.lb-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-you {
  flex: 0 0 auto;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background: var(--primary);
}
.lb-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.lb-figures {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lb-revenue {
  font-weight: 800;
  font-size: 0.95rem;
  /* tabular-nums stops the row width jittering while the number counts up */
  font-variant-numeric: tabular-nums;
}
.lb-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 2.6rem;
  justify-content: flex-end;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lb-delta.is-up { color: #16a34a; }
.lb-delta.is-down { color: var(--destructive); }
.lb-delta.is-same { color: var(--border); }
.lb-delta.is-new { color: var(--accent-foreground); }

/* Podium: gold / silver / bronze down the leading edge of the top three. */
.lb-row.is-podium .lb-rank { color: var(--rank-color); }
.lb-row.is-podium { border-left: 3px solid var(--rank-color); }
.lb-row.is-rank-1 { --rank-color: #d4a017; }
.lb-row.is-rank-2 { --rank-color: #8f9aa6; }
.lb-row.is-rank-3 { --rank-color: #b06a3b; }

/* The signed-in seller's own row, so they can find themselves at a glance. */
.lb-row.is-me {
  border-color: var(--primary);
  background: var(--accent);
}

.lb-board:empty { display: none; }

/* leaderboard.html — the board as its own page, reached from the main nav.
   Standalone pages have no .home ancestor to supply side padding, so this
   wrapper has to provide its own — same values .home uses, so every page
   keeps the same edge margin on mobile. */
.lb-page { padding: 2.5rem 1rem; }
.lb-page-foot { margin-top: 2rem; text-align: center; }
@media (min-width: 640px) {
  .lb-page { padding-inline: 2rem; }
}

@media (max-width: 640px) {
  .lb-row-link {
    grid-template-columns: 1.6rem auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem;
  }
  .lb-avatar { width: 28px; height: 28px; }
  .lb-name { font-size: 0.82rem; }
  .lb-meta { font-size: 0.68rem; }
  .lb-revenue { font-size: 0.85rem; }
  .lb-figures { gap: 0.35rem; }
  .lb-delta { min-width: 2rem; font-size: 0.65rem; }
  .lb-section-sub { font-size: 0.85rem; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-live-dot { animation: none; }
  .lb-row { transition: none; }
}

/* ============================================================
   Product voting arena — two cards head to head
   (index.html + vote.html, driven by js/vote.js).

   The pair stays SIDE BY SIDE at every width, phones included:
   a matchup you have to scroll between isn't a matchup. That is
   what drives the sizing here — the cards shrink rather than
   stack, so both choices are always in one glance.
   ============================================================ */
/* Narrower than its neighbouring sections on purpose: at the full 80rem each
   card is ~570px wide and the pair towers over the page. A matchup wants to be
   taken in at a glance, so the band is capped and centred. */
.vote-section { max-width: 52rem; }
.vote-arena-inner {
  display: grid;
  /* minmax(0,…) — without the 0 floor these columns take the cards'
     min-content width and blow the grid wider than the page. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

.vote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.vote-card:hover { box-shadow: var(--shadow-md); }
.vote-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--muted);
  overflow: hidden;
}
.vote-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.vote-card:hover .vote-card-media img { transform: scale(1.04); }

/* Peek link — opens the product in a new tab so a half-finished round of
   voting isn't thrown away by navigating off the page. */
.vote-card-peek {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: hsl(0 0% 0% / 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.vote-card:hover .vote-card-peek,
.vote-card-peek:focus-visible { opacity: 1; }
.vote-card-peek:hover { background: hsl(0 0% 0% / 0.7); }

.vote-card-body {
  padding: 0.7rem 0.75rem 0.5rem;
  flex: 1;
}
.vote-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  /* Two lines, then ellipsis: a long name must not push the vote buttons of
     the two cards out of alignment with each other. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vote-card-price {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.vote-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0.75rem 0.75rem;
  padding: 0.6rem 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.vote-card-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.vote-card-btn:disabled { cursor: default; opacity: 0.55; }

/* VS divider — a hairline down the middle with the badge sitting on it. */
.vote-vs {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
}
.vote-vs::before {
  content: "";
  position: absolute;
  inset-block: 12%;
  width: 1px;
  background: var(--border);
}
.vote-vs span {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  background: var(--background);
  border: 1px solid var(--border);
}

/* ---------- result reveal ---------- */
.vote-card-result {
  /* Height animates from 0 so the reveal grows the card rather than making
     the whole row jump the moment a vote lands. */
  max-height: 0;
  overflow: hidden;
  padding-inline: 0.75rem;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.is-revealed .vote-card-result {
  max-height: 6rem;
  padding-bottom: 0.75rem;
  opacity: 1;
}
.is-revealed .vote-card-btn { pointer-events: none; }
.vote-card-pct {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}
.vote-card-bar {
  height: 6px;
  margin: 0.35rem 0 0.3rem;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.vote-card-bar span {
  display: block;
  height: 100%;
  width: 0;                     /* JS sets the real width from the tally */
  border-radius: 999px;
  background: var(--muted-foreground);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vote-card-count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* The card the visitor picked leads; the other recedes. Both still show their
   numbers — the point is the comparison, not a winner announcement. */
.vote-card.is-picked {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary) inset;
}
.vote-card.is-picked .vote-card-bar span { background: var(--primary); }
.vote-card.is-picked .vote-card-pct { color: var(--accent-foreground); }
.vote-card.is-passed { opacity: 0.62; }

.vote-card-skeleton {
  min-height: 320px;
  border: 0;
  background: linear-gradient(100deg, var(--muted) 30%, var(--secondary) 50%, var(--muted) 70%);
  background-size: 220% 100%;
  animation: vote-shimmer 1.2s linear infinite;
}
@keyframes vote-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -20% 0; }
}

/* ---------- notices (all done / nothing to vote on) ---------- */
.vote-notice {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: var(--radius-md);
}
.vote-notice-ic {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.3rem;
  border-radius: 999px;
  color: var(--accent-foreground);
  background: var(--accent);
}
.vote-notice-title { font-size: 1.1rem; font-weight: 700; }
.vote-notice-sub {
  max-width: 32rem;
  color: var(--muted-foreground);
  font-size: 0.92rem;
}
.vote-notice-btn { margin-top: 0.7rem; }

/* Standalone page (no .home ancestor to supply side padding) — same values
   .home uses, so every page keeps the same edge margin on mobile. */
.vote-page { padding: 2.5rem 1rem; }
.vote-page-foot { margin-top: 2rem; text-align: center; }
@media (min-width: 640px) {
  .vote-page { padding-inline: 2rem; }
}

/* Off-screen sink for the execCommand("copy") fallback — it must be in the
   document and selectable, just not visible. display:none would break the
   selection and the copy silently fails. */
.vote-copy-sink {
  position: fixed;
  top: -1000px;
  left: -1000px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Phones keep the two cards side by side (the whole point), so everything
     tightens instead of stacking. */
  .vote-arena-inner { gap: 0.4rem; }
  .vote-vs { width: 1.7rem; }
  .vote-vs span { width: 1.7rem; height: 1.7rem; font-size: 0.62rem; }
  .vote-card-body { padding: 0.55rem 0.55rem 0.4rem; }
  .vote-card-name { font-size: 0.8rem; }
  .vote-card-price { font-size: 0.8rem; }
  .vote-card-btn {
    margin: 0 0.55rem 0.55rem;
    padding: 0.55rem 0.3rem;
    font-size: 0.8rem;
  }
  .vote-card-result { padding-inline: 0.55rem; }
  .vote-card-pct { font-size: 1.1rem; }
  /* Touch has no hover to reveal it, so the peek link stays visible. */
  .vote-card-peek { opacity: 1; width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .vote-card, .vote-card-media img, .vote-card-result, .vote-card-bar span,
  .vote-card-btn, .vote-card-peek { transition: none; }
  .vote-card:hover { transform: none; }
  .vote-card:hover .vote-card-media img { transform: none; }
  .vote-card-skeleton { animation: none; }
}