/* ==========================================================================
   WELLORY DESIGN SYSTEM
   Derived from Wellory Brand Guidelines v1.0 — "The Curated Circle"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  /* --- Color tokens (from brand guidelines, slide 14) --- */
  --forest: #214C40;      /* Deep Forest — primary anchor */
  --cream: #F4EEE3;       /* Warm Cream — primary field */
  --espresso: #252A27;    /* Text & depth */
  --tangerine: #E47A4D;   /* Selection accent */
  --butter: #E5C65C;      /* Rest accent */
  --sage: #A6B69E;        /* Natural support */
  --sky: #9EBFC4;         /* Support accent */
  --berry: #C47B84;       /* Live accent */

  /* Category accents (slide 17) */
  --cat-nourish: var(--tangerine);
  --cat-support: var(--sky);
  --cat-rest: var(--butter);
  --cat-live: var(--berry);

  /* Derived surface tones */
  --forest-10: rgba(33, 76, 64, 0.08);
  --forest-20: rgba(33, 76, 64, 0.16);
  --cream-deep: #ECE3D3;
  --white: #FFFFFF;

  /* --- Typography --- */
  --font-display: 'Manrope', sans-serif;
  --font-editorial: 'Newsreader', serif;

  /* --- Spacing scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  /* --- Radius & shadow --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 12px 32px rgba(37, 42, 39, 0.08);
  --shadow-lift: 0 20px 48px rgba(37, 42, 39, 0.12);

  --container: 1160px;

  /* --- Semantic status tokens (admin/dashboard use) ---
     Derived from brand palette but tuned for text-on-tint contrast in
     data-dense contexts (staff staring at tables for hours) -- not just
     the raw brand accent colors used at customer-facing decorative sizes. */
  --status-success-bg: rgba(166, 182, 158, 0.35);
  --status-success-text: #1f4a3a;
  --status-warning-bg: rgba(229, 198, 92, 0.35);
  --status-warning-text: #7a5a2c;
  --status-danger-bg: rgba(196, 123, 132, 0.3);
  --status-danger-text: #7a2e38;
  --status-info-bg: rgba(158, 191, 196, 0.35);
  --status-info-text: #235055;
  --status-neutral-bg: var(--forest-10);
  --status-neutral-text: var(--forest);

  /* Dense-UI surface -- slightly cooler/neutral than --cream for table-heavy
     admin screens, keeps long reading sessions less "warm-fatiguing" while
     staying inside the brand family (still forest-tinted, not gray). */
  --surface-dense: #FAF7F1;

  /* --- Admin design tokens (Fase 6-prep design system pass) ---
     Scoped separately from the storefront's rem-based --space-N/--radius-N
     scale above: the storefront intentionally reads soft/pill/marketing
     (fully-rounded buttons, generous radii), while the admin console needs
     to read dense/scannable/"Google-ish" -- tighter radii, an explicit 8px
     spacing grid, and real elevation instead of flat borders. Keeping these
     as a separate token set means neither side has to compromise its own
     identity, and nothing storefront-facing risked breaking during this pass. */
  --a-space-4: 4px;
  --a-space-8: 8px;
  --a-space-12: 12px;
  --a-space-16: 16px;
  --a-space-24: 24px;
  --a-space-32: 32px;
  --a-space-48: 48px;
  --a-space-64: 64px;

  /* Elevation -- replaces flat 1px borders on cards with soft shadow, the
     single biggest lever for a "Material-ish" feel without touching color.
     3 levels: resting card, hover/raised, modal/popover. */
  --a-elev-1: 0 1px 2px rgba(37, 42, 39, 0.08), 0 1px 3px rgba(37, 42, 39, 0.06);
  --a-elev-2: 0 2px 6px rgba(37, 42, 39, 0.10), 0 4px 14px rgba(37, 42, 39, 0.08);
  --a-elev-3: 0 8px 24px rgba(37, 42, 39, 0.16), 0 2px 8px rgba(37, 42, 39, 0.08);
  --a-hairline: 1px solid rgba(37, 42, 39, 0.07);

  /* Radius scale -- deliberately tighter/more rectangular than the storefront's
     --radius-md/lg (16/28px): card 8px, button/input/control 6px, chip/badge
     4px, icon-button fully round. */
  --a-r-card: 8px;
  --a-r-control: 6px;
  --a-r-chip: 4px;
  --a-r-round: 999px;

  /* Type scale -- Manrope only in admin (Newsreader stays a storefront-only
     editorial flourish, not spread into dense UI). Named after Material's
     Display/Headline/Title/Body/Label roles for a shared vocabulary, sized
     down from the storefront's clamp()-based marketing scale. */
  --a-type-headline: 700 1.5rem/1.25 var(--font-display);
  --a-type-title-lg: 700 1.15rem/1.35 var(--font-display);
  --a-type-title: 600 1rem/1.4 var(--font-display);
  --a-type-body: 500 0.92rem/1.55 var(--font-display);
  --a-type-body-sm: 500 0.82rem/1.5 var(--font-display);
  --a-type-label: 700 0.72rem/1.3 var(--font-display);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--cream);
  color: var(--espresso);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 3px solid var(--tangerine);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --- Typography scale --- */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--forest); }

.h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; }
.h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.3; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tangerine);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--forest);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--espresso);
  opacity: 0.85;
  max-width: 46ch;
}

p { margin: 0 0 var(--space-2); }

/* ==========================================================================
   SIGNATURE MOTIF — the open ring + detached dot
   Used sparingly as the page's recurring visual signature.
   ========================================================================== */

.ring-dot {
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
}
.ring-dot svg { width: 100%; height: 100%; display: block; }

.ring-marker {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  /* Di atas .mobile-nav (70) dan .wa-float (60) -- header (termasuk tombol
     hamburger/"X"-nya) HARUS tetap kelihatan & bisa ditekan buat nutup menu
     walau menu mobile lagi terbuka full-screen di baliknya. */
  z-index: 80;
  background: rgba(244, 238, 227, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--forest-10);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.site-header__logo { display: flex; align-items: center; gap: 0.5rem; }
.site-header__logo img { height: 34px; width: auto; }

/* Scroll-progress ring — reuses the signature open-ring-and-dot motif;
   the fill path's stroke-dasharray/offset is driven by JS scroll % so
   it reads as "empty" at the top of the page and closes into a full
   ring by the time the reader hits the bottom. */
.scroll-ring { width: 24px; height: 24px; flex-shrink: 0; display: inline-block; }
.scroll-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scroll-ring__track { stroke: var(--forest-10); }
.scroll-ring__fill { stroke: var(--tangerine); }
.scroll-ring__dot { fill: var(--tangerine); }

.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__links { display: flex; gap: var(--space-3); font-weight: 600; font-size: 0.95rem; flex-wrap: nowrap; }
.site-nav__links a { color: var(--forest); opacity: 0.8; transition: opacity 0.2s ease; white-space: nowrap; }
.site-nav__links a:hover { opacity: 1; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.65rem;
  border-radius: 100px;
  transition: background 0.18s ease;
}
.nav-toggle:hover { background: var(--forest-10); }
.nav-toggle svg { width: 22px; height: 22px; color: var(--forest); }

.nav-toggle__bar {
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bot { transform: translateY(-5px) rotate(-45deg); }

/* Breakpoint is 1024px, not 780px: the nav has 7 links plus cart/points/
   auth buttons, which wraps and overlaps the logo well before phone
   widths — tablets (~768-1024px) need the hamburger too, not just phones. */
@media (max-width: 1024px) {
  .site-nav__links { display: none; }
  .nav-toggle { display: block; }
  /* Masuk/Daftar/Ajukan Brand buttons and the points badge are direct
     children of .site-nav; they already appear inside .mobile-nav, so
     showing them here too overflows the header on narrower widths. */
  .site-nav > .btn,
  .site-nav > .nav-points-badge {
    display: none;
  }
  /* Only the cart icon + hamburger remain visible — keep them close
     together as one compact group instead of the desktop-wide gap. */
  .site-nav { gap: var(--space-1); }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--forest);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { box-shadow: var(--shadow-lift); }

.btn--ghost {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest-20);
}
.btn--ghost:hover { background: var(--forest-10); }

.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }

/* ==========================================================================
   SECTIONS — general rhythm
   ========================================================================== */

/* Sebelumnya var(--space-7) (7rem atas+bawah = jarak 14rem/224px antar
   section) -- kelihatan terlalu jauh/tidak proporsional, khususnya di
   homepage yang sekarang punya lebih banyak section pendek berurutan
   (kategori, marquee, produk). Diketatkan jadi --space-6, dan lebih ketat
   lagi di mobile lewat --space-5 (ruang vertikal lebih berharga di layar
   sempit). */
section { padding: var(--space-6) 0; }
section + section { border-top: 1px solid var(--forest-10); }
@media (max-width: 780px) {
  section { padding: var(--space-5) 0; }
}

.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head .eyebrow { margin-bottom: var(--space-2); }

/* ==========================================================================
   HERO BANNER (promo/campaign dinamis, diatur dari admin — bisa carousel)
   Gambarnya sudah final (judul/CTA sudah didesain di dalam file gambar),
   jadi di sini cuma urusan nampilkan gambar responsive, nggak ada overlay
   teks. desktop_image_url dipakai >780px, mobile_image_url (kalau ada)
   dipakai <=780px lewat <picture><source>. Kalau nggak ada versi mobile,
   gambar desktop tetap dipakai tapi object-fit:contain (nggak dipotong).
   ========================================================================== */

.hero-banner { padding: var(--space-4) 0 0; }

.hero-banner-carousel { position: relative; }

.hero-banner-slide { display: none; }
.hero-banner-slide.is-active { display: block; }

.hero-banner-slide__link { display: block; }

.hero-banner-slide__img {
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 780px) {
  .hero-banner-slide__img { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
  .hero-banner-slide__img--contain { object-fit: contain; background: var(--cream-deep); }
}

/* Flash-sale countdown — sengaja di BAWAH gambar banner (bukan overlay di
   atasnya), supaya nggak pernah nabrak desain apa pun yang sudah ada di
   dalam file gambar itu sendiri. */
.hero-banner-countdown {
  margin-top: var(--space-3);
  background: var(--forest);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--cream);
  text-align: center;
}
.hero-banner-countdown__code { font-size: 0.9rem; opacity: 0.9; }
.hero-banner-countdown__code strong { color: var(--tangerine); letter-spacing: 0.04em; }
.hero-banner-countdown__timer { display: flex; align-items: center; gap: 0.6rem; }
.hero-banner-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 2.4em; }
.hero-banner-countdown__unit strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.hero-banner-countdown__unit small { font-size: 0.65rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.2rem; }

@media (max-width: 480px) {
  .hero-banner-countdown { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .hero-banner-countdown__timer { gap: 0.4rem; }
  .hero-banner-countdown__unit strong { font-size: 1.05rem; }
}

.hero-banner-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.hero-banner-carousel__arrow:hover { background: var(--white); }
.hero-banner-carousel__arrow--prev { left: var(--space-2); }
.hero-banner-carousel__arrow--next { right: var(--space-2); }
@media (max-width: 480px) {
  .hero-banner-carousel__arrow { width: 32px; height: 32px; font-size: 0.9rem; }
}

.hero-banner-carousel__dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}
.hero-banner-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-banner-carousel__dot.is-active { background: var(--white); transform: scale(1.25); }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero__eyebrow { margin-bottom: var(--space-3); }

.hero h1 { margin-bottom: var(--space-3); }
.hero h1 em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--tangerine);
}

.hero__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--forest) 0%, #16352C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.hero__visual .ring-marker { width: 60%; height: auto; opacity: 0.95; }

.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(228,122,77,0.18), transparent 55%);
}

/* Brand-consistent hero visual (ring mark + real proof-point chips) used
   in place of stock photography — keeps the hero in the same clean,
   illustration-driven language as the rest of the site instead of a
   generic photo collage. */
.hero__visual-mark { width: 46%; height: auto; opacity: 0.95; position: relative; z-index: 1; }

.hero__visual-chip {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.05rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 2;
}
.hero__visual-chip-value { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--forest); line-height: 1; }
.hero__visual-chip-label { font-size: 0.72rem; color: var(--forest); opacity: 0.65; max-width: 13ch; line-height: 1.3; }

.hero__visual-chip--1 { top: 9%; left: 7%; }
.hero__visual-chip--2 { bottom: 22%; right: 6%; }
.hero__visual-chip--3 { bottom: 7%; left: 12%; }

@media (max-width: 480px) {
  .hero__visual-chip { padding: 0.6rem 0.8rem; }
  .hero__visual-chip-value { font-size: 1.1rem; }
  .hero__visual-chip-label { font-size: 0.66rem; }
}

/* ==========================================================================
   STATS STRIP (Kenapa Sekarang)
   ========================================================================== */

.stats-strip {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 780px) {
  .stats-strip { grid-template-columns: 1fr; text-align: left; }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat__value {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stat__value span { color: var(--tangerine); }
.stat__label {
  font-size: 0.9rem;
  opacity: 0.78;
  max-width: 26ch;
}

.stats-source {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  opacity: 0.65;
}

/* ==========================================================================
   MODEL CARDS (Beli Putus / Konsinyasi)
   ========================================================================== */

.models {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 780px) {
  .models { grid-template-columns: 1fr; }
}

.model-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--forest-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.model-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--forest-10);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  width: fit-content;
}

.model-card--consignment .model-card__tag {
  color: #7a5a2c;
  background: rgba(229, 198, 92, 0.28);
}

.model-card h3 { margin-top: var(--space-1); }

.model-card ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.model-card li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
}

.model-card li .ring-dot { margin-top: 0.2em; width: 0.9em; height: 0.9em; }

/* ==========================================================================
   GUARANTEES (checklist)
   ========================================================================== */

.guarantees {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}

@media (max-width: 780px) {
  .guarantees { grid-template-columns: 1fr; }
}

.guarantee {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--forest-10);
}

.guarantee .ring-dot { width: 1.4em; height: 1.4em; margin-top: 0.1em; }

.guarantee h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.guarantee p { font-size: 0.9rem; opacity: 0.8; margin: 0; }

/* ==========================================================================
   CREDIBILITY (Tim di balik Wellory)
   ========================================================================== */

.credibility {
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 900px) {
  .credibility { grid-template-columns: 1fr; padding: var(--space-5); }
}

.credibility__quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--forest);
  line-height: 1.5;
}

.credibility__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fact-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--forest-10);
}
.fact-row:last-child { border-bottom: none; }

.fact-row__value {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--forest);
  min-width: 8ch;
}
.fact-row__label { font-size: 0.92rem; opacity: 0.85; }

/* ==========================================================================
   FOUNDING PARTNER CTA
   ========================================================================== */

.founding {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.founding::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(228,122,77,0.22), transparent 50%);
}

.founding__inner { position: relative; max-width: 560px; margin: 0 auto; }
.founding .eyebrow { color: var(--butter); justify-content: center; }
.founding h2 { color: var(--cream); margin: var(--space-2) 0; }
.founding p { opacity: 0.85; }
.founding .btn--primary { background: var(--tangerine); color: var(--espresso); }
.founding .hero__actions { justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  padding-top: var(--space-6);
  border-top: 1px solid var(--forest-10);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Brand mark: a crisp small PNG icon (just the ring) plus real HTML text
   for "wellory" + tagline, instead of one raster logo with tiny embedded
   text — that old combined logo turned to mush once scaled down to
   footer height, especially on high-DPI phones/tablets. */
.site-footer__brand { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__mark-row { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__mark { height: 30px; width: auto; object-fit: contain; display: block; }
.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.site-footer__tagline { font-size: 0.82rem; color: var(--forest); opacity: 0.6; margin: 0; }

.site-footer__col { display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__heading {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.5;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--forest);
  opacity: 0.85;
  font-size: 0.88rem;
  transition: opacity 0.2s ease;
  width: fit-content;
}
.site-footer__link:hover { opacity: 1; text-decoration: underline; }

.footer-icon { display: inline-flex; color: var(--forest); flex-shrink: 0; }
.footer-icon svg { width: 18px; height: 18px; }

.site-footer__social { display: flex; align-items: center; gap: 0.75rem; }
.footer-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--forest-20);
  color: var(--forest);
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.footer-icon-link svg { width: 18px; height: 18px; }
.footer-icon-link:hover { background: var(--forest); color: var(--cream); transform: translateY(-2px); }

.site-footer__bottom {
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--forest-10);
}
.site-footer__bottom small { color: var(--forest); opacity: 0.55; font-size: 0.8rem; }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ==========================================================================
   CATALOG — homepage dual CTA, category grid, product cards
   ========================================================================== */

.dual-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 780px) { .dual-cta { grid-template-columns: 1fr; } }

.dual-cta__card {
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 320px;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.dual-cta__card--shop {
  background: linear-gradient(160deg, var(--forest) 0%, #16352C 100%);
  color: var(--cream);
}
.dual-cta__card--shop h3 { color: var(--cream); }

.dual-cta__card--partner {
  background: var(--white);
  border: 1px solid var(--forest-10);
}

.dual-cta__card .ring-marker { position: absolute; top: var(--space-4); right: var(--space-4); width: 56px; height: 56px; opacity: 0.9; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

.category-pill {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--forest-10);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border-top: 4px solid var(--cat-color, var(--forest));
}
.category-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.category-pill .cat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat-color, var(--forest)); }
.category-pill h3 { font-size: 1.1rem; }
.category-pill span.subtitle { font-size: 0.85rem; opacity: 0.7; }
.category-pill.is-active { background: var(--forest); }
.category-pill.is-active h3, .category-pill.is-active span.subtitle { color: var(--cream); opacity: 0.9; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* --- Homepage: logo partner brand. DUA mode, dipilih server-side di
   index.php berdasar jumlah brand (--partner-marquee--static di bawah
   threshold, --scrolling di atasnya):
   - Statis (sedikit brand): logo di-center, wrap, TANPA animasi -- jujur
     soal jumlah partner yang ada, bukan dipaksa jadi marquee kosong yang
     malah kelihatan pincang.
   - Scrolling (banyak brand): scroll horizontal otomatis tanpa henti (CSS
     murni, tanpa JS), berhenti saat di-hover. Jumlah salinan di track
     dihitung dinamis lewat --marquee-copies (index.php) supaya track
     SELALU lebih lebar dari viewport, terlepas dari jumlah brand --
     translateX tetap cuma "-100%/copies" (bukan angka tetap -50%), itu
     yang bikin loop-nya tetap seamless berapapun jumlah salinannya.
   Ini satu-satunya elemen homepage yang PERNAH scroll/slider -- beda dari
   kartu produk yang sengaja TIDAK pernah jadi slider (lihat .product-grid). */
.partner-marquee { padding: var(--space-5) 0; background: var(--surface-dense, var(--cream-deep)); overflow: hidden; }
.partner-marquee__label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.55;
  margin-bottom: var(--space-4);
}
.partner-marquee__viewport { overflow: hidden; }
.partner-marquee__track { display: flex; align-items: center; width: max-content; }

.partner-marquee--scrolling .partner-marquee__track {
  animation: partner-marquee-scroll 32s linear infinite;
}
.partner-marquee--scrolling:hover .partner-marquee__track { animation-play-state: paused; }
@keyframes partner-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--marquee-copies, 2))); }
}

/* Mode statis: bukan track yang scroll, cuma baris ter-center yang wrap
   kalau kepanjangan -- container-nya sendiri yang jadi batas lebar. */
.partner-marquee--static .partner-marquee__viewport { overflow: visible; }
.partner-marquee--static .partner-marquee__track {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.partner-marquee__item {
  flex: 0 0 auto;
  width: 128px;
  height: 88px;
  margin: 0 var(--space-3);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-soft);
}
.partner-marquee--static .partner-marquee__item { margin: 0; }
.partner-marquee__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.partner-marquee__item:hover img { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .partner-marquee--scrolling .partner-marquee__track { animation: none; }
  .partner-marquee--scrolling .partner-marquee__viewport { overflow-x: auto; }
}
@media (max-width: 560px) {
  .partner-marquee__item { width: 96px; height: 68px; margin: 0 var(--space-2); }
  .partner-marquee--static .partner-marquee__item { margin: 0; }
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--forest-10);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__cat-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  background: var(--white);
  color: var(--cat-color, var(--forest));
}

/* Heart-shaped save/unsave toggle overlaid on product media — outline in
   brand forest, fills tangerine when active. Used on toko.php cards and
   produk.php's detail image (both wrap it in position:relative). */
.wishlist-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  color: var(--forest);
  transition: transform 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.wishlist-btn:hover { transform: scale(1.08); }
.wishlist-btn svg { width: 18px; height: 18px; }
.wishlist-btn.is-active { color: var(--tangerine); }
.wishlist-btn.is-active svg { fill: var(--tangerine); }
.wishlist-btn:disabled { opacity: 0.6; cursor: default; }

.product-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card__rating { display: inline-flex; align-items: center; gap: 0.35rem; }
.product-card__rating .stars { font-size: 0.78rem; }
.product-card__rating-count { font-size: 0.75rem; opacity: 0.6; }
.product-card__brand { font-size: 0.8rem; opacity: 0.65; font-weight: 600; }
.product-card__name { font-size: 1.05rem; font-weight: 700; color: var(--forest); }
.product-card__hook { font-size: 0.85rem; opacity: 0.75; flex: 1; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.product-card__price { font-weight: 800; color: var(--forest); font-size: 1.05rem; }

.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--forest-20);
}
.empty-state .ring-marker { width: 48px; height: 48px; margin: 0 auto var(--space-3); opacity: 0.5; }
.empty-state h3 { margin-bottom: 0.5rem; }
.empty-state p { opacity: 0.7; max-width: 40ch; margin: 0 auto; }

/* --- Product detail --- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }

.product-detail__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--space-3) 0; }
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  background: var(--forest-10);
  color: var(--forest);
}

.story-hook {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
  border-left: 3px solid var(--tangerine);
  padding-left: var(--space-2);
  margin: var(--space-3) 0;
}

.price-row { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-3) 0; }
.price-row__amount { font-size: 2rem; font-weight: 800; color: var(--forest); }
.price-row__stock { font-size: 0.85rem; opacity: 0.65; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--forest-20);
  border-radius: 100px;
  overflow: hidden;
}
.qty-stepper button {
  background: none; border: none; width: 40px; height: 40px;
  font-size: 1.1rem; cursor: pointer; color: var(--forest);
}
.qty-stepper input {
  width: 44px; text-align: center; border: none; font-weight: 700;
  font-family: var(--font-display); font-size: 1rem; background: transparent;
}
.qty-stepper input:focus { outline: none; }

.product-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); flex-wrap: wrap; }

.breadcrumb { font-size: 0.85rem; opacity: 0.65; margin-bottom: var(--space-3); }
.breadcrumb a { text-decoration: underline; }

/* --- Header nav shop link state --- */
.site-nav__links a.is-active { opacity: 1; color: var(--tangerine); }

/* --- Mobile nav panel ---
   Full-screen SOLID overlay (position:fixed + inset:0), bukan dropdown card
   parsial seperti sebelumnya -- supaya tidak ada konten halaman di baliknya
   yang bisa tembus kelihatan, di halaman manapun terlepas dari tinggi
   kontennya. Markup-nya sekarang SIBLING dari <header>, bukan child-nya
   (lihat includes/header.php) -- .mobile-nav punya stacking context sendiri
   yang dibandingkan langsung ke .wa-float (60), bukan terkurung di dalam
   context .site-header. */
.mobile-nav {
  display: none;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    gap: 0;
    padding: calc(72px + var(--space-3)) var(--space-3) var(--space-3);
    background: var(--cream);
    overflow-y: auto;
    /* Di atas .wa-float (60), di bawah .site-header (80) -- header tetap
       kelihatan di atas panel ini supaya tombol hamburger/"X" buat nutup
       menu tetap bisa ditekan. */
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
  }
  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav a:not(.btn) {
  font-weight: 600;
  color: var(--forest);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.mobile-nav a:not(.btn):hover,
.mobile-nav a:not(.btn):active { background: var(--forest-10); }

.mobile-nav__account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--forest-10);
}

.mobile-nav__points {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  background: var(--forest-10) !important;
  white-space: nowrap;
}
/* Akun Saya (poin + label lebih panjang) selalu item terakhir — kasih baris
   sendiri selebar penuh, biar nggak keremuk jadi 2 baris kayak Pesanan
   Saya/Wishlist yang cuma satu kata. */
.mobile-nav__points:last-child { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
}

/* ==========================================================================
   AUTH PAGES (Daftar / Masuk)
   ========================================================================== */

.auth-card {
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.btn--google {
  width: 100%;
  background: var(--white);
  color: var(--espresso);
  border: 1.5px solid var(--forest-20);
}
.btn--google:hover { background: var(--forest-10); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  font-size: 0.82rem;
  opacity: 0.6;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--forest-20);
}

.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
}
.auth-form input,
.auth-form select {
  font-family: var(--font-display);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--forest-20);
  background: var(--cream);
  font-size: 0.95rem;
  color: var(--espresso);
}
.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: var(--tangerine);
}
.auth-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f5233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.auth-form label span {
  font-weight: 400;
  color: var(--espresso-60, #8a8a80);
}

/* Pesan error/success -- 1 sumber gaya buat SEMUA form di seluruh situs
   (storefront, admin, seller) karena semua halaman pakai class ini apa
   adanya. Ikon digambar lewat CSS (SVG data-URI di background-image), BUKAN
   Material Symbols -- beberapa halaman auth berdiri sendiri (mis.
   seller/login.php, masuk.php) tidak memuat font Material Symbols sama
   sekali, jadi ikon lewat font akan tampil sebagai teks mentah ("error") di
   halaman itu. Data-URI selalu jalan di mana saja tanpa dependency font. */
.form-error,
.form-success {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-12, 12px);
  border-radius: var(--a-r-control, 10px);
  line-height: 1.5;
  animation: form-message-in 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-error, .form-success { animation: none; }
}
.form-error::before,
.form-success::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.form-error {
  background: var(--status-danger-bg, rgba(196, 123, 132, 0.3));
  color: var(--status-danger-text, #7a2e38);
  border-left: 3px solid var(--berry);
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  margin-bottom: var(--space-3);
}
.form-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%237a2e38'/%3E%3Crect x='11' y='6' width='2' height='8' rx='1' fill='%23fff'/%3E%3Crect x='11' y='16' width='2' height='2' rx='1' fill='%23fff'/%3E%3C/svg%3E");
}

.form-success {
  background: var(--status-success-bg, rgba(166, 182, 158, 0.35));
  color: var(--status-success-text, var(--forest));
  border-left: 3px solid var(--forest);
  padding: 0.85rem 1.15rem;
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.form-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23214C40'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@keyframes form-message-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-switch {
  text-align: center;
  margin-top: var(--space-3);
  font-size: 0.88rem;
  opacity: 0.8;
}
.auth-switch a { color: var(--tangerine); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   MEMBERSHIP / WELLORY CIRCLE (akun.php)
   ========================================================================== */

.membership-card {
  background: linear-gradient(160deg, var(--forest) 0%, #16352C 100%);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.tier-badge {
  display: inline-flex;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.tier-badge--circle { background: var(--sage); color: var(--forest); }
.tier-badge--inner_circle { background: var(--tangerine); color: var(--espresso); }

.membership-card__hint { margin: 0.6rem 0 0; font-size: 0.85rem; opacity: 0.8; }

.membership-card__points { text-align: right; }
.membership-card__points-value { display: block; font-size: 2.2rem; font-weight: 800; }
.membership-card__points-label { font-size: 0.8rem; opacity: 0.75; }

.benefits-list {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--forest-10);
  margin-bottom: var(--space-5);
}
.benefits-list ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.benefits-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; }
.benefits-list li .ring-dot { width: 0.9em; height: 0.9em; margin-top: 0.25em; }

.notif-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--forest-10);
  margin-bottom: var(--space-4);
}
.notif-prompt strong { display: block; color: var(--forest); font-size: 0.98rem; }
.notif-prompt p { margin: 0.3rem 0 0; font-size: 0.85rem; opacity: 0.7; max-width: 44ch; }
.notif-prompt .btn { flex-shrink: 0; }

.referral-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--forest-10);
  margin-bottom: var(--space-4);
}
.referral-card strong { display: block; color: var(--forest); font-size: 0.98rem; }
.referral-card > p { margin: 0.3rem 0 0; font-size: 0.85rem; opacity: 0.7; max-width: 52ch; }
.referral-card__link-row { display: flex; gap: 0.5rem; margin-top: var(--space-3); flex-wrap: wrap; }
.referral-card__link-row input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-display);
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  border: 1.5px solid var(--forest-20);
  background: var(--cream);
  font-size: 0.85rem;
  color: var(--forest);
}
.referral-card__stat { margin: var(--space-3) 0 0; font-size: 0.88rem; opacity: 0.85; }
.referral-card__stat strong { display: inline; color: var(--forest); }

.history-block { margin-bottom: var(--space-4); }
.history-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--space-2); }
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-sm);
}
.history-row__reason { display: block; font-weight: 600; font-size: 0.9rem; }
.history-row__date { display: block; font-size: 0.78rem; opacity: 0.6; }
.history-row__points { font-weight: 800; font-size: 1rem; }
.history-row__points.is-positive { color: var(--forest); }
.history-row__points.is-negative { color: var(--berry); }

.order-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--space-2); }
.order-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 0.5rem var(--space-3); padding: var(--space-3); background: var(--white);
  border: 1px solid var(--forest-10); border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.order-row:hover { border-color: var(--forest-20); }
.order-row__link { display: block; text-decoration: none; color: inherit; }
.order-row__id { display: block; font-weight: 700; font-size: 0.9rem; color: var(--forest); }
.order-row__date { display: block; font-size: 0.78rem; opacity: 0.6; }
.order-row__right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.order-row__total { font-weight: 800; font-size: 1rem; }

.tracking-block { background: var(--white); border: 1px solid var(--forest-10); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
.tracking-block__row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.3rem 0; font-size: 0.88rem; }
.tracking-block__row span:first-child { opacity: 0.6; }

.stars { display: inline-flex; gap: 0.1rem; font-size: 0.95rem; line-height: 1; }
.stars__star { color: var(--forest-20); }
.stars__star.is-filled { color: var(--tangerine); }

.rating-summary { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; text-decoration: none; color: inherit; }
.rating-summary__count { font-size: 0.85rem; opacity: 0.7; }

.review-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--space-2); }
.review-row {
  background: var(--white); border: 1px solid var(--forest-10); border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.review-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 0.3rem; flex-wrap: wrap; }
.review-row__identity { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.review-row__author { font-weight: 700; font-size: 0.9rem; color: var(--forest); }
.review-row__date { font-size: 0.78rem; opacity: 0.6; }
.review-row__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--forest);
  background: var(--forest-10);
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
}
.review-row__verified svg { width: 12px; height: 12px; color: var(--tangerine); }

.promo-code-box { margin-bottom: var(--space-2); }
.promo-code-box__row { display: flex; gap: 0.5rem; }
.promo-code-box__row input {
  flex: 1; min-width: 0; font-family: var(--font-display); padding: 0.65rem 0.9rem;
  border-radius: 8px; border: 1.5px solid var(--forest-20); background: var(--cream); font-size: 0.9rem;
}
.promo-code-box__message { font-size: 0.82rem; margin-top: 0.5rem; }
.promo-code-box__message.is-success { color: var(--forest); }
.promo-code-box__message.is-error { color: #7a2e38; }
@media (max-width: 480px) { .promo-code-box__row { flex-direction: column; } }

/* --- Header account state --- */
.nav-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--forest-10);
  color: var(--forest);
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
}

/* ==========================================================================
   CART PAGE
   ========================================================================== */

.cart-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
@media (max-width: 600px) {
  .cart-row {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "media info remove"
      "media qty remove"
      "media subtotal remove";
  }
  .cart-row__media { grid-area: media; }
  .cart-row__info { grid-area: info; }
  .cart-row__qty-form { grid-area: qty; }
  .cart-row__subtotal { grid-area: subtotal; }
  .cart-row__remove { grid-area: remove; align-self: center; }
}

.cart-row__media {
  width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: var(--cream-deep); flex-shrink: 0;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-row__info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cart-row__price { font-size: 0.85rem; opacity: 0.7; }

.cart-row__qty-input {
  width: 56px; padding: 0.4rem; text-align: center;
  border: 1px solid var(--forest-20); border-radius: 8px;
  font-family: var(--font-display); font-weight: 700;
}

.cart-row__subtotal { font-weight: 800; color: var(--forest); white-space: nowrap; }

.cart-row__remove {
  background: none; border: none; cursor: pointer;
  font-size: 1.3rem; color: var(--berry); padding: 0.3rem 0.6rem;
}

.cart-summary {
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.cart-summary__row {
  display: flex; justify-content: space-between;
  font-size: 1.1rem; font-weight: 700; color: var(--forest);
  margin-bottom: 0.5rem;
}
.cart-summary__note { font-size: 0.82rem; opacity: 0.6; margin-bottom: var(--space-3); }

/* ==========================================================================
   CHECKOUT PAGE
   ========================================================================== */

.checkout-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; top: auto; }
}

.checkout-form { display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-form label {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--forest);
}
.checkout-form input, .checkout-form textarea, .checkout-form select {
  font-family: var(--font-display);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--forest-20);
  background: var(--cream);
  font-size: 0.95rem;
}
.checkout-form input:focus, .checkout-form textarea:focus, .checkout-form select:focus { outline: none; border-color: var(--tangerine); }
.checkout-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f5233' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.checkout-summary {
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: sticky;
  top: 90px;
}
.checkout-summary__item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.4rem 0; }
.checkout-summary__divider { border: none; border-top: 1px solid var(--forest-10); margin: var(--space-2) 0; }
.checkout-summary__total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.2rem; color: var(--forest); }

.points-toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream-deep); border-radius: 10px; padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0; font-size: 0.88rem;
}

/* --- Payment method picker (step 2 checkout, wajib pilih sebelum panggil Duitku v2/inquiry) --- */
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}
.payment-method-option {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: var(--space-2);
  border: 1.5px solid var(--forest-20);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payment-method-option:hover { border-color: var(--tangerine); }
.payment-method-option input { position: absolute; top: 0.6rem; left: 0.6rem; margin: 0; }
.payment-method-option input:checked ~ .payment-method-option__name { color: var(--forest); }
.payment-method-option:has(input:checked) { border-color: var(--tangerine); background: var(--cream-deep); }
.payment-method-option__img { height: 28px; width: auto; max-width: 100%; object-fit: contain; }
.payment-method-option__name { font-size: 0.78rem; font-weight: 600; text-align: center; }

/* --- Courier picker (step 2 checkout, ongkir asli dari Biteship) --- */
.courier-option-list { display: flex; flex-direction: column; gap: 0.6rem; }
.courier-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--forest-20);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.courier-option:hover { border-color: var(--tangerine); }
.courier-option:has(input:checked) { border-color: var(--tangerine); background: var(--cream-deep); }
.courier-option__info { display: flex; flex-direction: column; gap: 0.15rem; }
.courier-option__name { font-weight: 700; font-size: 0.9rem; color: var(--forest); }
.courier-option__duration { font-size: 0.78rem; opacity: 0.65; }
.courier-option__price { font-weight: 800; color: var(--forest); white-space: nowrap; }

/* --- Map picker (titik koordinat alamat, checkout) --- */
.map-picker__map {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  border: 1.5px solid var(--forest-20);
  z-index: 0;
}
.map-picker__toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: 0.5rem;
}
.map-picker__coords { font-size: 0.8rem; color: var(--forest); opacity: 0.75; }
.map-picker__coords.is-unset { color: var(--berry); opacity: 1; font-weight: 600; }
@media (max-width: 480px) {
  .map-picker__map { height: 220px; }
}

.nav-cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--forest);
  padding: 0.5rem;
}
.nav-cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--tangerine);
  color: var(--espresso);
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 100px;
  min-width: 16px;
  height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ==========================================================================
   ADMIN PANEL — Design System (Material-influenced, Wellory-branded)
   Structural/interaction principles borrowed from Google/Material products
   (clear type hierarchy, elevation over hard borders, 8px spacing rhythm,
   icon+label pairing, scannable density) -- NOT Material's color palette.
   Colors stay 100% Wellory (Deep Forest/Cream/Espresso/Tangerine) with
   dedicated semantic status tokens (see --status-* in :root) so Tangerine
   is freed to mean "brand accent / primary interactive" instead of being
   overloaded as the only signal for "important" everywhere.
   ========================================================================== */

/* Icon font is linked only in admin/includes/header.php (not sitewide via
   @import here) so the storefront never pays for a font it doesn't use --
   same "don't add resource weight pages don't need" reasoning as ADR-022's
   on-demand ZXing load. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.admin-layout { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* --- Sidebar: grouped sections, icon+label per item, left-accent active state --- */
.admin-sidebar {
  background: var(--forest);
  color: var(--cream);
  padding: var(--a-space-24) var(--a-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--a-space-4);
  overflow-y: auto;
}
.admin-sidebar__top { display: flex; align-items: center; justify-content: space-between; margin: var(--a-space-8) var(--a-space-8) var(--a-space-24); }
.admin-nav-toggle {
  display: none; /* cuma muncul <=780px, lihat @media di bawah */
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--a-r-control);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.admin-nav-toggle .material-symbols-outlined { font-size: 22px; }
.admin-sidebar__logo { height: 26px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }

.admin-nav-group { margin-top: var(--a-space-16); display: flex; flex-direction: column; gap: var(--a-space-4); }
.admin-nav-group:first-of-type { margin-top: 0; }
.admin-nav-group__label {
  font: var(--a-type-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0.45;
  padding: 0 var(--a-space-8);
  margin-bottom: var(--a-space-4);
}

.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: var(--a-space-12);
  color: var(--cream);
  opacity: 0.8;
  padding: var(--a-space-8) var(--a-space-8) var(--a-space-8) var(--a-space-12);
  border-radius: var(--a-r-control);
  font-weight: 600;
  font-size: 0.88rem;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.admin-sidebar a .material-symbols-outlined { font-size: 20px; opacity: 0.9; flex-shrink: 0; }
.admin-sidebar a:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.admin-sidebar a.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  border-left-color: var(--tangerine);
  font-weight: 700;
}
.admin-sidebar__divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: var(--a-space-16) var(--a-space-8); }

@media (max-width: 780px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav-toggle { display: flex; }

  /* Nav penuh disembunyikan by default di mobile, cuma logo + toggle yang
     selalu terlihat -- dibuka lewat #adminNavToggle (lihat
     admin/includes/footer.php untuk script-nya), pola sama dengan
     .seller-sidebar mobile & .mobile-nav storefront. Sebelumnya TIDAK ADA
     penanganan mobile sama sekali di sini -- ~20 link dari 6 grup nav akan
     selalu tampil sebagai kolom vertikal penuh sebelum konten utama, di
     hp/tablet ini mendorong konten ke bawah sangat jauh. */
  .admin-sidebar > a,
  .admin-sidebar .admin-nav-group,
  .admin-sidebar__divider {
    display: none;
  }
  .admin-sidebar.is-open > a,
  .admin-sidebar.is-open .admin-nav-group,
  .admin-sidebar.is-open .admin-sidebar__divider {
    display: flex;
  }
  .admin-sidebar.is-open { padding-bottom: var(--a-space-24); }
}

/* --- Main content area --- */
.admin-main { padding: var(--a-space-32); background: var(--surface-dense); min-height: 100vh; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--a-space-24); flex-wrap: wrap; gap: var(--a-space-8); }
.admin-main h1, .admin-main h2, .admin-main h3, .admin-main h4,
.admin-main .h1, .admin-main .h2, .admin-main .h3 { font-family: var(--font-display); letter-spacing: normal; }
.admin-main .h2 { font: var(--a-type-headline); color: var(--forest); }
.admin-main h3, .admin-main .h3 { font: var(--a-type-title-lg); color: var(--forest); }
.admin-main h4 { font: var(--a-type-title); color: var(--forest); }
.admin-eyebrow { font: var(--a-type-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tangerine); }

/* --- Section header pattern: icon + title + optional action link, top-right --- */
.admin-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-space-12);
  margin-bottom: var(--a-space-16);
}
.admin-section-head__title { display: flex; align-items: center; gap: var(--a-space-8); margin: 0; }
.admin-section-head__title .material-symbols-outlined { color: var(--tangerine); font-size: 22px; }
.admin-section-head__action { font: var(--a-type-body-sm); font-weight: 700; color: var(--forest); display: inline-flex; align-items: center; gap: 4px; }
.admin-section-head__action:hover { color: var(--tangerine); }

/* --- Stat cards --- */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a-space-16); margin-bottom: var(--a-space-32); }
@media (max-width: 780px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.admin-stat-card {
  background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1);
  padding: var(--a-space-16); display: flex; flex-direction: column; gap: var(--a-space-4);
  transition: box-shadow 0.15s ease;
}
.admin-stat-card:hover { box-shadow: var(--a-elev-2); }
.admin-stat-card__value { font-size: 1.7rem; font-weight: 800; color: var(--forest); font-family: var(--font-display); }
.admin-stat-card__label { font: var(--a-type-body-sm); opacity: 0.65; }
.admin-stat-card--alert .admin-stat-card__value { color: var(--status-danger-text); }

/* --- Data table: elevated wrapper, sortable header affordance --- */
.admin-table-wrap { background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1); overflow-x: auto; }
.admin-table { width: 100%; min-width: 560px; border-collapse: collapse; font: var(--a-type-body); }
.admin-table th {
  text-align: left; padding: var(--a-space-12) var(--a-space-16); background: var(--cream-deep);
  font: var(--a-type-label); text-transform: uppercase; color: var(--forest); opacity: 0.75;
  position: sticky; top: 0;
}
.admin-table td { padding: var(--a-space-12) var(--a-space-16); border-top: var(--a-hairline); vertical-align: middle; }
.admin-table tbody tr { transition: background 0.12s ease; }
.admin-table tbody tr:hover td { background: var(--forest-10); }
.admin-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.is-sortable .sort-icon { font-size: 16px; vertical-align: -3px; opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; }
.admin-table th.is-sortable:hover .sort-icon { opacity: 0.85; }
.admin-table th.is-sortable[data-sort-dir="asc"] .sort-icon { opacity: 1; color: var(--tangerine); }
.admin-table th.is-sortable[data-sort-dir="desc"] .sort-icon { opacity: 1; color: var(--tangerine); transform: rotate(180deg); }

/* --- Badge/chip: ONE component reused everywhere (pipeline stage, expiry
   tier, settlement status, order status) -- rectangular chip radius per the
   admin radius scale, not the storefront's full-pill shape. --- */
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--a-r-chip);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.admin-badge--success { background: var(--status-success-bg); color: var(--status-success-text); }
.admin-badge--warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.admin-badge--danger { background: var(--status-danger-bg); color: var(--status-danger-text); }
.admin-badge--info { background: var(--status-info-bg); color: var(--status-info-text); }
.admin-badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
/* Legacy literal-status names -- kept for existing markup, all alias to the
   semantic tokens above so there's only ONE place to retune a color. */
.admin-badge--live, .admin-badge--paid, .admin-badge--active { background: var(--status-success-bg); color: var(--status-success-text); }
.admin-badge--draft, .admin-badge--pending_payment, .admin-badge--pending, .admin-badge--generated { background: var(--status-warning-bg); color: var(--status-warning-text); }
.admin-badge--out_of_stock, .admin-badge--failed, .admin-badge--expired, .admin-badge--refunded { background: var(--status-danger-bg); color: var(--status-danger-text); }
.admin-badge--archived, .admin-badge--fulfilled { background: var(--status-neutral-bg); color: var(--status-neutral-text); }

/* --- Card: elevated (shadow, not border), consistent padding/header --- */
.admin-card {
  background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1);
  padding: var(--a-space-24);
}
.admin-card--interactive { transition: box-shadow 0.15s ease; }
.admin-card--interactive:hover { box-shadow: var(--a-elev-2); }

.admin-alert {
  border-radius: var(--a-r-card); padding: var(--a-space-16) var(--a-space-24); margin-bottom: var(--a-space-24);
  box-shadow: var(--a-elev-1); font: var(--a-type-body);
}
.admin-alert__title { font: var(--a-type-title); margin-bottom: var(--a-space-8); display: flex; align-items: center; gap: var(--a-space-8); }
.admin-alert__title .material-symbols-outlined { font-size: 20px; }
.admin-alert ul { margin: 0 0 var(--a-space-8) 1.2rem; }
.admin-alert ul:last-child { margin-bottom: 0; }
.admin-alert--warning { background: #FFF6E9; color: var(--espresso); }
.admin-alert--warning .admin-alert__title { color: var(--status-warning-text); }
.admin-alert--danger { background: #FDEEEE; color: var(--espresso); }
.admin-alert--danger .admin-alert__title { color: var(--status-danger-text); }
.admin-alert--info { background: #EEF5F6; color: var(--espresso); }
.admin-alert--info .admin-alert__title { color: var(--status-info-text); }

/* --- Empty state: icon anchor + headline + 1-line explanation + CTA --- */
.admin-empty-state {
  text-align: center; padding: var(--a-space-48) var(--a-space-24); color: var(--espresso);
  background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1);
}
.admin-empty-state__icon {
  width: 48px; height: 48px; border-radius: var(--a-r-round); background: var(--forest-10); color: var(--forest);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--a-space-16);
}
.admin-empty-state__icon .material-symbols-outlined { font-size: 26px; }
.admin-empty-state__title { font: var(--a-type-title-lg); color: var(--forest); margin-bottom: var(--a-space-4); }
.admin-empty-state p { opacity: 0.65; margin: 0 auto var(--a-space-16); font: var(--a-type-body-sm); max-width: 42ch; }

/* --- Sub-nav tabs -- shared context within one admin "area" (Inventory:
   batch/opname/scan/import; Finance: ringkasan/settlement) so hopping
   between them doesn't feel like leaving to an unrelated page. --- */
.admin-subnav {
  display: flex; gap: var(--a-space-4); margin-bottom: var(--a-space-24); flex-wrap: wrap;
  border-bottom: var(--a-hairline); padding-bottom: 0;
}
.admin-subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--a-space-8) var(--a-space-16); font-weight: 600; font-size: 0.88rem; color: var(--espresso); opacity: 0.6;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.admin-subnav a .material-symbols-outlined { font-size: 18px; }
.admin-subnav a:hover { opacity: 1; }
.admin-subnav a.is-active { opacity: 1; color: var(--forest); border-bottom-color: var(--tangerine); font-weight: 700; }

/* --- Buttons: explicit hierarchy (primary/secondary/tertiary), admin-scoped
   so the storefront's pill/lift marketing buttons stay untouched. --- */
.admin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.6rem 1.1rem; border-radius: var(--a-r-control); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; border: 1.5px solid transparent; font-family: var(--font-display);
  transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap; line-height: 1.2;
}
.admin-btn .material-symbols-outlined { font-size: 18px; }
.admin-btn--primary { background: var(--forest); color: var(--cream); box-shadow: var(--a-elev-1); }
.admin-btn--primary:hover { box-shadow: var(--a-elev-2); background: #1a3d33; }
.admin-btn--secondary { background: var(--white); color: var(--forest); border-color: var(--forest-20); }
.admin-btn--secondary:hover { background: var(--forest-10); border-color: var(--forest); }
.admin-btn--tertiary { background: transparent; color: var(--forest); padding-left: 0.5rem; padding-right: 0.5rem; }
.admin-btn--tertiary:hover { background: var(--forest-10); }
.admin-btn--danger { background: var(--white); color: var(--status-danger-text); border-color: var(--berry); }
.admin-btn--danger:hover { background: var(--status-danger-bg); }
.admin-btn--sm { padding: 0.42rem 0.8rem; font-size: 0.78rem; }
.admin-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-space-16); }
@media (max-width: 700px) { .admin-form-grid { grid-template-columns: 1fr; } }
.admin-form-grid label { display: flex; flex-direction: column; gap: var(--a-space-4); font: var(--a-type-body-sm); font-weight: 700; color: var(--forest); }
.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea {
  font-family: var(--font-display); padding: 0.6rem 0.85rem; border-radius: var(--a-r-control);
  border: 1.5px solid var(--forest-20); background: var(--white); font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-form-grid input:focus, .admin-form-grid select:focus, .admin-form-grid textarea:focus {
  outline: none; border-color: var(--tangerine); box-shadow: 0 0 0 3px rgba(228, 122, 77, 0.15);
}
.admin-form-grid .full-width { grid-column: 1 / -1; }

/* --- Field read-only (SKU/barcode/stok otomatis, dst) -- beda tampilan jelas
   dari field yang bisa diisi (bukan cuma teks keterangan kecil di bawahnya):
   background bertekstur "dikunci", cursor not-allowed, label ikut ditandai
   lock icon lewat .admin-readonly-label. --- */
.admin-form-grid input:disabled, .admin-form-grid select:disabled, .admin-form-grid textarea:disabled {
  background: repeating-linear-gradient(135deg, var(--surface-dense), var(--surface-dense) 6px, var(--forest-10) 6px, var(--forest-10) 7px);
  border-style: dashed; color: var(--forest); opacity: 0.75; cursor: not-allowed;
}
.admin-readonly-label {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font: var(--a-type-label); letter-spacing: 0.02em; text-transform: none;
  color: var(--forest); opacity: 0.6; font-weight: 400; margin-left: 0.35rem;
}
.admin-readonly-label .material-symbols-outlined { font-size: 14px; }

/* --- Custom file input -- replaces the raw browser-default control. --- */
.admin-file-input { position: relative; display: inline-flex; }
.admin-file-input input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.admin-file-input__control {
  display: inline-flex; align-items: center; gap: var(--a-space-8);
  padding: 0.6rem 1rem; border-radius: var(--a-r-control); border: 1.5px dashed var(--forest-20);
  background: var(--white); color: var(--forest); font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-file-input:hover .admin-file-input__control { border-color: var(--tangerine); background: var(--cream); }
.admin-file-input__control .material-symbols-outlined { font-size: 18px; }

.admin-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--a-space-8); }
.admin-checkbox-item {
  display: flex; align-items: center; gap: var(--a-space-8); font: var(--a-type-body-sm); font-weight: 500;
  color: var(--espresso); padding: 0.5rem 0.7rem; border-radius: var(--a-r-control); border: 1.5px solid var(--forest-20);
  background: var(--white); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-checkbox-item:hover { border-color: var(--tangerine); background: var(--cream); }
.admin-checkbox-item input { width: auto; }

.admin-actions-row { display: flex; gap: var(--a-space-8); flex-wrap: wrap; }
/* Small action/filter-chip button -- the workhorse used across every admin
   list page ("Edit", "Hapus", "Lihat Batch", status filter chips, dsb).
   Auto-width by default (fits its text label); use --square only for the
   rare true icon-only case. */
.admin-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.4rem 0.75rem; border-radius: var(--a-r-control); border: 1.5px solid var(--forest-20);
  background: var(--white); color: var(--forest); font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.admin-icon-btn .material-symbols-outlined { font-size: 17px; }
.admin-icon-btn:hover { box-shadow: var(--a-elev-1); border-color: var(--forest); }
.admin-icon-btn.is-active { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.admin-icon-btn--danger { color: var(--status-danger-text); border-color: var(--berry); }
.admin-icon-btn--danger:hover { background: var(--status-danger-bg); }
.admin-icon-btn--square { width: 34px; height: 34px; padding: 0; border-radius: var(--a-r-round); }

.cert-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--a-space-8); }
.cert-checklist__row {
  display: flex;
  align-items: center;
  gap: var(--a-space-8);
  padding: 0.5rem 0.7rem;
  border-radius: var(--a-r-control);
  border: 1.5px solid var(--forest-20);
  background: var(--white);
}
.cert-checklist__row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  padding: 0.45rem 0.6rem;
  border-radius: var(--a-r-chip);
  border: 1.5px solid var(--forest-20);
  background: var(--white);
  font-size: 0.85rem;
}

/* ==========================================================================
   ARTIKEL / BLOG
   ========================================================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .article-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--forest-10);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.article-card__media {
  aspect-ratio: 16 / 9;
  background: var(--cream-deep);
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.article-card__date { font-size: 0.78rem; opacity: 0.6; font-weight: 600; }
.article-card__title { font-size: 1.1rem; font-weight: 700; color: var(--forest); }
.article-card__excerpt { font-size: 0.88rem; opacity: 0.75; flex: 1; }

/* ==========================================================================
   KALKULATOR KESEHATAN
   ========================================================================== */

.calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--forest-10);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.calc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* Kuis wellness ditonjolkan (spec Bagian 8: "paling ditonjolkan") -- span 2
   kolom di grid 3-kolom, border aksen lebih tebal, background sedikit tint
   dari warna kategorinya sendiri lewat --calc-accent. */
.calc-card--featured {
  grid-column: span 2;
  border: 1.5px solid var(--calc-accent);
  background: linear-gradient(135deg, var(--white) 55%, color-mix(in srgb, var(--calc-accent) 10%, var(--white)));
}
@media (max-width: 900px) { .calc-card--featured { grid-column: span 2; } }
@media (max-width: 560px) { .calc-card--featured { grid-column: span 1; } }

/* Kalkulator yang belum dibangun (lihat kalkulator.php: built=false) --
   tetap tampil di roadmap tapi non-interaktif, supaya tidak ada link mati
   selama modul ini dibangun bertahap per-Bagian. */
div.calc-card--soon { opacity: 0.6; cursor: default; }
div.calc-card--soon:hover { transform: none; box-shadow: none; }

.calc-card__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--espresso);
}
.calc-card__badge--featured { background: var(--tangerine); color: var(--white); }

.calc-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--calc-accent) 16%, var(--white));
  color: var(--calc-accent);
}
.calc-card__icon svg { width: 24px; height: 24px; }

.calc-card__title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--forest); }
.calc-card__subtitle { font-size: 0.8rem; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.03em; }
.calc-card__desc { font-size: 0.9rem; opacity: 0.75; flex: 1; }

.calc-disclaimer {
  background: var(--cream-deep);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  color: var(--espresso);
}
.calc-disclaimer strong { color: var(--forest); }

/* --- Alat kalkulator individual (Bagian 2-8): "satu pertanyaan per layar"
   gaya Typeform, per spec Bagian 11. Dipakai bareng assets/js/kalkulator.js
   (calcToolInit/calcCountUp). --calc-result-color di-set inline per hasil
   (mis. dari kategori BMI) supaya 1 CSS ini generik buat semua kalkulator,
   bukan hardcode warna per kategori di sini. */
.calc-tool {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--forest-10);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 560px) { .calc-tool { padding: var(--space-3); border-radius: var(--radius-md); } }

.calc-tool__progress { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: var(--space-4); }
.calc-tool__progress span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest-20);
  transition: background 0.25s ease, transform 0.25s ease;
}
.calc-tool__progress span.is-active { background: var(--tangerine); transform: scale(1.2); }

.calc-tool__step { display: none; flex-direction: column; gap: var(--space-3); animation: calcStepIn 0.3s ease; }
.calc-tool__step.is-active { display: flex; }
@keyframes calcStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .calc-tool__step { animation: none; } }

.calc-tool__question { font-family: var(--font-editorial); font-size: 1.4rem; font-style: italic; color: var(--forest); margin: 0; }
.calc-tool__hint { font-size: 0.85rem; opacity: 0.65; margin: -0.5rem 0 0; }

.calc-tool__field { display: flex; flex-direction: column; gap: 0.4rem; }
.calc-tool__field label { font-size: 0.8rem; font-weight: 700; color: var(--forest); text-transform: uppercase; letter-spacing: 0.03em; }
.calc-tool__field .calc-tool__input-row { display: flex; align-items: center; gap: 0.6rem; }
.calc-tool__input-row input {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--espresso);
  width: 100%;
  padding: 0.6rem 0;
  border: none;
  border-bottom: 2px solid var(--forest-20);
  background: transparent;
}
.calc-tool__input-row input:focus { outline: none; border-color: var(--tangerine); }
.calc-tool__input-row .calc-tool__unit { font-weight: 700; opacity: 0.5; white-space: nowrap; }

.calc-tool__nav { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.calc-tool__nav .btn { flex: 1; min-height: 48px; }

.calc-tool__result { display: none; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); animation: calcStepIn 0.4s ease; }
.calc-tool__result.is-active { display: flex; }
.calc-tool__result-number {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--calc-result-color, var(--forest));
}
.calc-tool__result-unit { font-size: 1rem; font-weight: 700; opacity: 0.6; margin-top: -0.5rem; }

/* Baris angka rentang (dipakai kalkulator protein: "62 - 104 gram") --
   font-size dikecilkan sedikit lewat inline style dari JS pemanggilnya
   supaya 2 angka + separator tetap muat 1 baris di layar sempit. */
.calc-tool__result-number-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.calc-tool__result-number-sep { font-size: 1.6rem; font-weight: 800; opacity: 0.4; color: var(--calc-result-color, var(--forest)); }
.calc-tool__result-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white);
  background: var(--calc-result-color, var(--forest));
}
.calc-tool__result-explain { font-size: 0.95rem; opacity: 0.8; max-width: 42ch; }

.calc-tool__recommend {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
}
.calc-tool__recommend a {
  flex: 1 1 140px;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--cream-deep);
  color: var(--forest);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease;
}
.calc-tool__recommend a:hover { transform: translateY(-2px); }

.calc-tool__restart { margin-top: var(--space-1); background: none; border: none; color: var(--forest); opacity: 0.6; text-decoration: underline; font-size: 0.85rem; cursor: pointer; }
.calc-tool__restart:hover { opacity: 1; }

/* --- Kartu pilihan (dipakai buat pertanyaan kategorikal: jenis kelamin,
   tingkat aktivitas, dst) -- tap langsung pilih & lanjut ke step berikutnya
   (auto-advance), beda dari step angka yang tetap butuh tombol "Lanjut"
   eksplisit karena user masih mengetik. */
.calc-tool__choices { display: flex; flex-direction: column; gap: 0.6rem; }
.calc-tool__choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--forest-20);
  background: var(--white);
  font-family: var(--font-display);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.calc-tool__choice:hover { border-color: var(--tangerine); }
.calc-tool__choice:active { transform: scale(0.98); }
.calc-tool__choice.is-selected { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 8%, var(--white)); }
.calc-tool__choice-label { font-weight: 700; color: var(--forest); font-size: 0.98rem; }
.calc-tool__choice-hint { font-size: 0.8rem; opacity: 0.65; }

/* --- Daftar opsi jam (Kalkulator Waktu Tidur, Bagian 6) -- beda dari hasil
   angka tunggal (BMI/BMR/dst): hasilnya beberapa pilihan jam sekaligus. */
.calc-tool__time-list { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.calc-tool__time-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--forest-20);
  background: var(--white);
  text-align: left;
}
.calc-tool__time-option--best { border-color: var(--calc-result-color, var(--tangerine)); background: color-mix(in srgb, var(--calc-result-color, var(--tangerine)) 10%, var(--white)); }
.calc-tool__time-option-time { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--forest); white-space: nowrap; }
.calc-tool__time-option-detail { font-size: 0.85rem; opacity: 0.7; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.calc-tool__time-option-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--calc-result-color, var(--tangerine));
  color: var(--white);
  opacity: 1;
}

/* --- Ajakan masuk/daftar buat tamu (Bagian 9) + form capture email/WhatsApp
   (Bagian 13) -- keduanya tampil DI BAWAH hasil kalkulator, tidak pernah
   menghalangi hasil yang sudah ditampilkan duluan. */
.calc-tool__guest-cta {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--cream);
  text-align: center;
  font-size: 0.88rem;
}
.calc-tool__guest-cta p { margin: 0 0 0.6rem; opacity: 0.85; }
.calc-tool__guest-cta-actions { display: flex; gap: 0.5rem; justify-content: center; }

.calc-capture { width: 100%; text-align: center; }
.calc-capture__toggle {
  background: none;
  border: none;
  color: var(--forest);
  text-decoration: underline;
  opacity: 0.75;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-display);
}
.calc-capture__toggle:hover { opacity: 1; }
.calc-capture__panel {
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--forest-20);
  background: var(--white);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.calc-capture__panel[hidden] { display: none; }
.calc-capture__methods { display: flex; gap: 1rem; font-size: 0.88rem; font-weight: 600; }
.calc-capture__methods label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.calc-capture__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1.5px solid var(--forest-20);
  font: inherit;
  font-family: var(--font-display);
}
.calc-capture__input:focus { outline: none; border-color: var(--tangerine); }
.calc-capture__consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; opacity: 0.8; cursor: pointer; line-height: 1.4; }
.calc-capture__consent input { margin-top: 0.2rem; flex-shrink: 0; }
.calc-capture__consent a { color: var(--forest); }
.calc-capture__status { margin: 0; font-size: 0.82rem; min-height: 1.2em; }
.calc-capture__status.is-success { color: var(--forest); font-weight: 600; }
.calc-capture__status.is-error { color: #B3452C; font-weight: 600; }

/* --- Riwayat Kesehatan (Bagian 10-11): badge pencapaian + catatan tren +
   wrapper grafik Chart.js. */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.badge-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--forest-20);
  background: var(--cream);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--forest);
  opacity: 0.4;
}
.badge-chip.is-earned { opacity: 1; background: var(--white); border-color: var(--tangerine); }
.badge-chip__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--tangerine);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}
.badge-chip:not(.is-earned) .badge-chip__icon { background: var(--forest-20); }

.calc-trend-note { font-size: 0.9rem; background: var(--cream); padding: 0.7rem 0.9rem; border-radius: var(--radius-md); margin: 0 0 var(--space-2); }
.calc-chart-wrap { position: relative; height: 220px; margin-bottom: var(--space-2); }

.article-detail__cover {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-deep);
  margin-bottom: var(--space-4);
}
.article-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-body {
  max-width: 72ch;
  font-size: 1.02rem;
}
.article-body h2 { font-size: 1.4rem; margin: var(--space-4) 0 var(--space-2); }
.article-body h3 { font-size: 1.15rem; margin: var(--space-3) 0 var(--space-2); }
.article-body p { margin-bottom: var(--space-2); }
.article-body a { color: var(--tangerine); text-decoration: underline; }
.article-body img { border-radius: var(--radius-sm); margin: var(--space-3) 0; }
.article-body ul, .article-body ol { margin: 0 0 var(--space-2); padding-left: 1.4rem; }

/* ==========================================================================
   MITRA (PARTNER LANDING) — REDESIGN v2
   ========================================================================== */

/* --- Scroll-reveal animation --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- Kenapa Sekarang: ring/donut stats --- */
.why-now-stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.why-now-stat {
  flex: 1 1 320px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.why-now-stat__ring { flex-shrink: 0; width: 72px; height: 72px; display: block; }
.why-now-stat__ring svg { width: 100%; height: 100%; display: block; }
.why-now-stat__value {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--espresso);
  line-height: 1;
}
.why-now-stat__desc {
  font-size: 0.95rem;
  opacity: 0.78;
  max-width: 32ch;
  margin: 0.6rem 0 0.4rem;
}
.why-now-stat__source { font-size: 0.78rem; font-style: italic; opacity: 0.55; }
.why-now-note { max-width: 64ch; opacity: 0.85; margin-top: var(--space-2); }

/* --- Model Kerja Sama: expand/collapse toggle --- */
.model-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--forest);
  padding: 0;
  margin-top: 0.4rem;
}
.model-card__chevron {
  display: inline-block;
  transition: transform 0.25s ease;
}
.model-card__toggle[aria-expanded="true"] .model-card__chevron { transform: rotate(180deg); }

.model-card__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.model-card__toggle[aria-expanded="true"] + .model-card__detail {
  max-height: 220px;
  opacity: 1;
}
.model-card__detail p {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--forest-10);
}

/* --- Komitmen Kami: numbered list --- */
.commitments { display: flex; flex-direction: column; }
.commitment {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--forest-10);
}
.commitment:first-child { border-top: none; }
.commitment__number {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--sage);
  flex-shrink: 0;
  width: 2.4rem;
}
.commitment__body h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.commitment__body p { font-size: 0.92rem; opacity: 0.78; margin: 0; max-width: 52ch; }

/* --- Tim Kami: stats + photo slot --- */
.team {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }

.team__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.team__stat { flex: 1 1 140px; }
.team__stat-value { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; color: var(--forest); }
.team__stat-label { font-size: 0.8rem; opacity: 0.65; max-width: 18ch; margin-top: 0.2rem; line-height: 1.4; }

.team__visual {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--forest) 0%, #16352C 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  padding: var(--space-4);
  text-align: center;
}
.team__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(228, 122, 77, 0.18), transparent 55%);
}
.team__visual-mark { width: 96px; height: auto; position: relative; z-index: 1; }
.team__visual-caption {
  position: relative;
  z-index: 1;
  color: var(--cream);
  opacity: 0.85;
  font-size: 0.9rem;
  max-width: 22ch;
  margin: 0;
}

/* --- Founding Partner: italic quote on dark forest --- */
.founding__quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--cream);
  line-height: 1.5;
  opacity: 0.92;
  margin: var(--space-2) 0 var(--space-3);
}

/* --- Closing CTA --- */
.closing-cta { max-width: 560px; margin: 0 auto; text-align: center; }
.closing-cta__lede { margin: 0 auto var(--space-4); }
.closing-cta__actions { justify-content: center; }

/* --- Partner footer (richer footer variant, used only on mitra.php) --- */
.partner-footer {
  background: var(--espresso);
  color: rgba(244, 238, 227, 0.7);
  padding: var(--space-6) 0 var(--space-3);
}
.partner-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.partner-footer__brand { flex: 1 1 240px; }
.partner-footer__brand img { height: 28px; margin-bottom: 0.6rem; filter: brightness(0) invert(1); }
.partner-footer__brand p { font-size: 0.85rem; opacity: 0.55; margin: 0; }
.partner-footer__col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 0.55rem; }
.partner-footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 0.4rem;
}
.partner-footer__col a, .partner-footer__col span { color: rgba(244, 238, 227, 0.78); font-size: 0.88rem; }
.partner-footer__bottom {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(244, 238, 227, 0.12);
  font-size: 0.78rem;
  opacity: 0.45;
}

/* ==========================================================================
   FLOATING WHATSAPP WIDGET (site-wide)
   ========================================================================== */

.wa-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
}

.wa-float__toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.wa-float__toggle:hover { transform: translateY(-2px); }
.wa-float__toggle svg { width: 28px; height: 28px; }

.wa-float__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 300px;
  max-width: calc(100vw - 2 * var(--space-4));
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--forest-10);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.wa-float.is-open .wa-float__panel { opacity: 1; visibility: visible; transform: translateY(0); }

.wa-float__header { padding: 0.2rem 0.4rem var(--space-2); }
.wa-float__title { display: block; font-weight: 700; color: var(--forest); }
.wa-float__subtitle { display: block; font-size: 0.8rem; opacity: 0.7; margin-top: 0.2rem; }

.wa-float__option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.wa-float__option:hover { background: var(--forest-10); }
.wa-float__option strong { display: block; color: var(--forest); font-size: 0.92rem; }
.wa-float__option small { display: block; opacity: 0.65; font-size: 0.78rem; margin-top: 0.15rem; }
.wa-float__option-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--forest-10);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-float__option-icon svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .wa-float { right: var(--space-3); bottom: var(--space-3); }
  .wa-float__toggle { width: 50px; height: 50px; }
  .wa-float__toggle svg { width: 24px; height: 24px; }
  .wa-float__panel { width: 260px; }
}

/* ==========================================================================
   SMALL-PHONE ADJUSTMENTS (site-wide, ~480px and under)
   Large fixed rem paddings compound with .container padding on narrow
   phones and leave very little room for content. Trim them here rather
   than in every component so all pages benefit.
   ========================================================================== */

@media (max-width: 480px) {
  .container { padding: 0 var(--space-3); }
  .stats-strip { padding: var(--space-3); }
  .model-card { padding: var(--space-3); }
  .guarantee { padding: var(--space-2); }
  .founding { padding: var(--space-5) var(--space-3); }
  .credibility { padding: var(--space-3); }
  .why-now-stats { gap: var(--space-3); }
}

/* ==========================================================================
   SELLER CENTER (/seller) — Fase 6, Modul F.
   Reuse token & komponen yang sama dengan admin (--a-*, .admin-form-grid,
   .admin-table, .admin-badge, .btn--*) supaya konsisten satu bahasa desain --
   TAPI shell/nav/identity block-nya sendiri (bukan .admin-layout dipakai
   ulang), karena IA-nya memang beda (workspace milik brand, bukan tool
   internal Wellory) dan harus terasa seperti seller center marketplace,
   bukan versi ringan admin panel. Aksen tangerine (bukan forest solid)
   dipakai untuk active state sebagai pembeda visual halus dari admin.
   ========================================================================== */

.seller-layout { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.seller-sidebar {
  background: var(--forest);
  color: rgba(255, 255, 255, 0.88);
  padding: var(--a-space-24) var(--a-space-8);
  display: flex;
  flex-direction: column;
}
.seller-sidebar__wellory-mark { height: 20px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.55; margin: 0 var(--a-space-8) var(--a-space-16); }

.seller-brand-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-space-12);
  padding: var(--a-space-12) var(--a-space-8);
  margin-bottom: var(--a-space-24);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--a-r-card);
}
.seller-brand-card__identity { display: flex; align-items: center; gap: var(--a-space-12); min-width: 0; }
.seller-nav-toggle {
  display: none; /* cuma muncul <=900px, lihat @media di bawah */
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--a-r-control);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.seller-nav-toggle .material-symbols-outlined { font-size: 22px; }
.seller-brand-card__logo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: rgba(255, 255, 255, 0.15); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: var(--a-type-title); color: #fff;
}
.seller-brand-card__name { font: var(--a-type-title); color: #fff; line-height: 1.25; }
.seller-brand-card__label { font: var(--a-type-label); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }

.seller-nav-group { margin-top: var(--a-space-16); display: flex; flex-direction: column; gap: var(--a-space-4); }
.seller-nav-group:first-of-type { margin-top: 0; }
.seller-nav-group__label {
  font: var(--a-type-label); letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.5; padding: 0 var(--a-space-8); margin-bottom: var(--a-space-4);
}
.seller-sidebar a {
  display: flex; align-items: center; gap: var(--a-space-12);
  padding: var(--a-space-12) var(--a-space-8); border-radius: var(--a-r-control);
  color: inherit; text-decoration: none; font: var(--a-type-body-sm); font-weight: 600;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.seller-sidebar a .material-symbols-outlined { font-size: 20px; opacity: 0.9; flex-shrink: 0; }
.seller-sidebar a:hover { background: rgba(255, 255, 255, 0.08); }
.seller-sidebar a.is-active { background: var(--tangerine); color: var(--espresso); }
.seller-sidebar a.is-active .material-symbols-outlined { opacity: 1; }
.seller-sidebar__divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); margin: var(--a-space-16) var(--a-space-8); }
.seller-sidebar__spacer { flex: 1; }

.seller-main { padding: var(--a-space-32); background: var(--surface-dense); min-height: 100vh; }
.seller-main h1, .seller-main h2, .seller-main h3, .seller-main h4,
.seller-main .h1, .seller-main .h2, .seller-main .h3 { font-family: var(--font-display); letter-spacing: normal; }
.seller-main .h2 { font: var(--a-type-headline); color: var(--forest); }
.seller-main h3, .seller-main .h3 { font: var(--a-type-title-lg); color: var(--forest); }
.seller-main h4 { font: var(--a-type-title); color: var(--forest); }

.seller-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--a-space-24); flex-wrap: wrap; gap: var(--a-space-12); }
.seller-topbar__welcome { font: var(--a-type-body-sm); opacity: 0.65; }

.seller-notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--a-r-round); background: var(--white);
  box-shadow: var(--a-elev-1); color: var(--forest); cursor: pointer;
}
.seller-notif-bell__dot {
  position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tangerine); border: 2px solid var(--white);
}

.seller-card { background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1); padding: var(--a-space-24); margin-bottom: var(--a-space-24); }

.seller-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--a-space-16); margin-bottom: var(--a-space-24); }
.seller-stat-tile { background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1); padding: var(--a-space-16) var(--a-space-20); }
.seller-stat-tile__label { font: var(--a-type-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--forest); opacity: 0.6; }
.seller-stat-tile__value { font: var(--a-type-headline); color: var(--forest); margin-top: var(--a-space-4); }
.seller-stat-tile__hint { font: var(--a-type-body-sm); opacity: 0.55; margin-top: var(--a-space-4); }

.seller-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--a-space-16); }
.seller-product-card { background: var(--white); border-radius: var(--a-r-card); box-shadow: var(--a-elev-1); overflow: hidden; display: flex; flex-direction: column; }
.seller-product-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--cream); }
.seller-product-card__img--empty { display: flex; align-items: center; justify-content: center; color: var(--forest); opacity: 0.3; font-size: 40px; }
.seller-product-card__body { padding: var(--a-space-12) var(--a-space-16); display: flex; flex-direction: column; gap: var(--a-space-4); flex: 1; }
.seller-product-card__name { font: var(--a-type-title); color: var(--espresso); }
.seller-product-card__meta { font: var(--a-type-body-sm); opacity: 0.6; }
.seller-product-card__footer { padding: var(--a-space-12) var(--a-space-16); border-top: var(--a-hairline); display: flex; justify-content: space-between; align-items: center; gap: var(--a-space-8); }

.seller-badge--revision { background: var(--status-warning-bg); color: var(--status-warning-text); }

.seller-empty-hint { text-align: center; padding: var(--a-space-32) var(--a-space-16); color: var(--forest); opacity: 0.55; }

@media (max-width: 900px) {
  .seller-layout { grid-template-columns: 1fr; }
  .seller-sidebar { flex-direction: column; padding: var(--a-space-16); }
  .seller-brand-card { margin-bottom: 0; }
  .seller-nav-toggle { display: flex; }

  /* Nav penuh disembunyikan by default di mobile, cuma brand card + toggle
     yang selalu terlihat -- dibuka lewat #sellerNavToggle (lihat
     seller-footer.php untuk script-nya), sama pola dengan .mobile-nav
     storefront (id navToggle/mobileNav, main.js). */
  .seller-sidebar > a,
  .seller-sidebar .seller-nav-group,
  .seller-sidebar__divider {
    display: none;
  }
  .seller-sidebar.is-open > a,
  .seller-sidebar.is-open .seller-nav-group,
  .seller-sidebar.is-open .seller-sidebar__divider {
    display: flex;
  }
  .seller-sidebar.is-open { padding-bottom: var(--a-space-24); }
  .seller-sidebar__spacer { display: none; }
}