/*
  THEME — Ekwito
  Warm, earthy, green palette. Welcoming but structured.
  For creators and buyers alike.
*/

:root {
  /* ============ COLOR PALETTE ============ */

  /* Primary: Warm Forest Green */
  --color-primary: #3a6b35;
  --color-primary-light: #4a7f44;
  --color-primary-lighter: #5e9956;
  --color-primary-dark: #2c5228;
  --color-primary-bg: rgba(58, 107, 53, 0.08);

  /* Secondary: Moss / Sage */
  --color-secondary: #7d9b76;
  --color-secondary-dark: #5c7456;
  --color-secondary-light: #9bb396;
  --color-secondary-lighter: #c5d6c1;
  --color-secondary-bg: rgba(125, 155, 118, 0.1);

  /* Accent: Warm Amber / Honey */
  --color-accent: #d4954a;
  --color-accent-light: #e0ac6a;
  --color-accent-lighter: #f2d9ae;
  --color-accent-bg: rgba(212, 149, 74, 0.1);

  /* Neutrals: Warm browns & grays */
  --color-neutral-900: #2c2418;
  --color-neutral-800: #3d3427;
  --color-neutral-700: #554a3a;
  --color-neutral-600: #6b5e4d;
  --color-neutral-500: #8a7e6e;
  --color-neutral-400: #a99e90;
  --color-neutral-300: #c8bfb3;
  --color-neutral-200: #e0d8ce;
  --color-neutral-100: #efe9e0;
  --color-neutral-50: #faf6f0;

  /* Backgrounds */
  --color-bg-primary: #faf7f2;
  --color-bg-secondary: #f3ede4;
  --color-bg-tertiary: #ebe3d7;
  --color-bg-white: #ffffff;
  --color-bg-dark: #2c2418;

  /* Status */
  --color-success: #4a8c2a;
  --color-success-dark: #3a7a1f;
  --color-success-darker: #2f6319;
  --color-success-bg: #f0f8ec;
  --color-danger: #b84833;
  --color-danger-bg: #fdf0eb;
  --color-warning: #c87f2e;
  --color-warning-dark: #9c5c1c;
  --color-warning-darker: #84501a;
  --color-warning-bg: #fdf5ea;
  --color-info: #4a7e6f;
  --color-info-dark: #3a6657;
  --color-info-darker: #2c5244;
  --color-info-light: #5a9486;
  --color-info-bg: #ecf5f2;

  /* Text */
  --color-text-primary: #2c2418;
  --color-text-secondary: #6b5e4d;
  --color-text-muted: #6f6354;
  --color-text-inverse: #faf7f2;

  /* ============ SPACING ============ */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-base: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* ============ BORDER RADIUS ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ============ TYPOGRAPHY ============ */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.65;

  /* ============ SHADOWS ============ */
  --shadow-xs: 0 1px 2px rgba(44, 36, 24, 0.04);
  --shadow-sm: 0 2px 8px rgba(44, 36, 24, 0.06);
  --shadow-md: 0 4px 16px rgba(44, 36, 24, 0.08);
  --shadow-lg: 0 8px 32px rgba(44, 36, 24, 0.10);
  --shadow-xl: 0 16px 48px rgba(44, 36, 24, 0.12);
  --shadow-focus: 0 0 0 3px rgba(58, 107, 53, 0.2);
  --shadow-focus-accent: 0 0 0 3px rgba(212, 149, 74, 0.25);

  /* ============ TRANSITIONS ============ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ============================================================
   GLOBAL
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  background-color: var(--color-bg-primary);
  min-height: calc(100vh - 180px);
}

::selection {
  background-color: var(--color-accent-lighter);
  color: var(--color-neutral-900);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h1 { font-size: 2.25rem; font-weight: 800; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

.lead {
  color: var(--color-text-secondary);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.7;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.btn-link {
  color: var(--color-primary) !important;
}

.btn-link:hover {
  color: var(--color-primary-light) !important;
}

a:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* Links inline in body text need underline to be distinguishable without relying on color (WCAG 1.4.1) */
p a:not(.btn) {
  text-decoration: underline;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  box-shadow: var(--shadow-md);
  border-bottom: 3px solid var(--color-accent);
  padding: 0.45rem 0;
}

.navbar-brand {
  font-size: 1.65rem;
  font-weight: 800;
  color: white !important;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.navbar-tagline {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.navbar-brand:hover {
  opacity: 0.9;
  text-decoration: none;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--radius-md);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--color-accent-light) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--color-accent) !important;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Dropdown */
.navbar-dark .navbar-nav .dropdown-menu {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  margin-top: 0.5rem;
  z-index: 1030;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 0.55rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-divider {
  border-color: var(--color-neutral-100);
}

/* Mobile search bar (always visible, sits below navbar) */
.mobile-search-bar {
  background: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
}

/* Search in navbar */
.navbar .form-control,
.mobile-search-bar .form-control {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  height: 38px;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.navbar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar .form-control:focus {
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus-accent);
}

.navbar .form-control:focus::placeholder {
  color: var(--color-text-muted);
}

.navbar .btn-search,
.mobile-search-bar .btn-search {
  background: var(--color-primary);
  border: 2px solid var(--color-accent);
  color: white;
  border-radius: var(--radius-full);
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.navbar .btn-search:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-accent-light);
  transform: scale(1.05);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  padding: 0.55rem 1.25rem;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn i { font-size: 1em; }

/* Primary — Forest Green */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(0);
}

/* Secondary — Sage */
.btn-secondary {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-neutral-200) !important;
  color: var(--color-text-primary) !important;
}

.btn-secondary:hover {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-neutral-300) !important;
  color: var(--color-text-primary) !important;
}

/* Success — Green, with lighter ring border for CTA emphasis */
.btn-success {
  background-color: var(--color-success-dark) !important;
  border-color: var(--color-success) !important;
  color: white;
}

.btn-success:hover {
  background-color: var(--color-success-darker) !important;
  border-color: var(--color-primary-lighter) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Warning — Amber, with lighter ring border for CTA emphasis */
.btn-warning {
  background-color: var(--color-warning-dark) !important;
  border-color: var(--color-warning) !important;
  color: white !important;
}

.btn-warning:hover {
  background-color: var(--color-warning-darker) !important;
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-md);
}

/* Info — Teal, with lighter ring border for CTA emphasis */
.btn-info {
  background-color: var(--color-info-dark) !important;
  border-color: var(--color-info) !important;
  color: white !important;
}

.btn-info:hover {
  background-color: var(--color-info-darker) !important;
  border-color: var(--color-info-light) !important;
  box-shadow: var(--shadow-md);
}

/* Danger */
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: white !important;
}

/* Outline variants */
.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline-secondary {
  color: var(--color-text-secondary) !important;
  border-color: var(--color-neutral-300) !important;
  background: transparent !important;
}

.btn-outline-danger {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  background: transparent !important;
}

.btn-outline-danger:hover {
  background-color: var(--color-danger) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline-secondary:hover {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-neutral-400) !important;
  color: var(--color-text-primary) !important;
}

/* Accent button (custom) — matches "Toutes les catégories" green, with accent border for CTA emphasis */
.btn-accent {
  background-color: var(--color-primary) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
}

.btn-accent:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-accent-light) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Button sizing */
.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.825rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-secondary-lighter);
}

.card-title {
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.card-text {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.card-body {
  padding: var(--spacing-md);
}

.card-header {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-neutral-200);
  padding: var(--spacing-base) var(--spacing-md);
  font-weight: 600;
}

.card-footer {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-neutral-200);
  padding: var(--spacing-base) var(--spacing-md);
}

/* Card that shouldn't hover-lift (e.g. form containers) */
.card-static:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  border-radius: var(--radius-md);
  border: none;
  font-weight: 500;
  padding: var(--spacing-base) var(--spacing-md);
}

.alert-primary {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-dark);
  border-left: 4px solid var(--color-primary);
}

.alert-success {
  background-color: var(--color-success-bg);
  color: #2d6615;
  border-left: 4px solid var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  color: #8a5a1e;
  border-left: 4px solid var(--color-warning);
}

.alert-danger {
  background-color: var(--color-danger-bg);
  color: #8a2e1e;
  border-left: 4px solid var(--color-danger);
}

.alert-info {
  background-color: var(--color-info-bg);
  color: #2d5a4d;
  border-left: 4px solid var(--color-info);
}

.alert-heading {
  color: inherit;
  font-weight: 700;
}

.btn-close {
  filter: invert(0.3);
}

/* ============================================================
   FORMS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
input[type="file"],
.form-control,
.form-select {
  font-family: var(--font-family);
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  font-size: 0.925rem;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--color-neutral-400);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none;
}

.form-label {
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.form-text.text-muted {
  color: var(--color-text-muted) !important;
  font-size: 0.825rem;
}

.invalid-feedback {
  color: var(--color-danger) !important;
  font-size: 0.825rem;
  font-weight: 500;
}

.is-invalid {
  border-color: var(--color-danger) !important;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */

.progress {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
  height: 12px;
}

.progress-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-lighter)) !important;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  transition: width var(--transition-slow);
  border-radius: var(--radius-full);
}

.progress-bar.bg-secondary {
  background: var(--color-neutral-300) !important;
}

.progress-bar.bg-success {
  background: linear-gradient(90deg, var(--color-success), var(--color-primary-lighter)) !important;
}

.progress-bar.bg-info {
  background: linear-gradient(90deg, var(--color-info), #6aab99) !important;
}

/* Taller progress bars for marketplace cards */
.progress-tall {
  height: 22px;
}

.progress-tall .progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  font-family: var(--font-family);
  font-weight: 600;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.badge.bg-primary { background-color: var(--color-primary) !important; }
.badge.bg-secondary { background-color: var(--color-secondary-dark) !important; }
.badge.bg-success { background-color: var(--color-success-dark) !important; }
.badge.bg-info { background-color: var(--color-info-dark) !important; color: white !important; }
.badge.bg-warning { background-color: var(--color-warning) !important; }
.badge.bg-danger { background-color: var(--color-danger) !important; }

/* ============================================================
   TABLES
   ============================================================ */

.table {
  font-size: 0.925rem;
}

.table thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.825rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-neutral-200);
  padding: 0.75rem 1rem;
}

.table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-color: var(--color-neutral-100);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-neutral-50);
}

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

footer {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  color: var(--color-text-inverse);
  margin-top: auto;
  padding: var(--spacing-lg) 0;
  border-top: 3px solid var(--color-accent);
}

footer p {
  margin: 0;
  opacity: 0.9;
  font-size: 0.9rem;
}

footer a {
  color: var(--color-accent-light);
}

footer a:hover {
  color: white;
}

/* ============================================================
   LIST GROUPS
   ============================================================ */

.list-group-item {
  border-color: var(--color-neutral-100);
  padding: var(--spacing-base) var(--spacing-md);
  transition: all var(--transition-fast);
}

.list-group-item-action:hover {
  background-color: var(--color-primary-bg);
  border-color: var(--color-secondary-lighter);
}

/* ============================================================
   HERO SECTION (home page)
   ============================================================ */

.hero-section {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-primary-lighter) 100%);
  color: white;
  padding: 4rem 0 3.5rem;
  margin-top: -1.5rem;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(212, 149, 74, 0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(125, 155, 118, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.hero-section h1 {
  color: white;
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
}

.hero-section .lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
  max-width: 540px;
  position: relative;
}

.hero-section .btn {
  position: relative;
}

/* ============================================================
   HERO THIN BAR
   ============================================================ */

.hero-thin {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-lighter) 100%);
  color: white;
  padding: 1.25rem 0;
  margin-top: -1.5rem;
  margin-bottom: 0;
}

.hero-thin__title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .2rem;
}

.hero-thin__sub {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  margin-bottom: 0;
}

/* ============================================================
   CATEGORY SUB-NAV
   ============================================================ */

.category-subnav {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  padding: .4rem 0;
}

.category-subnav__inner {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
}

.category-subnav__pills {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  align-items: center;
}

.category-subnav__pills::-webkit-scrollbar {
  display: none;
}

.category-subnav__pills .category-subnav__pill {
  flex: 0 0 auto;
}

.category-subnav__pill {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  height: 30px;
  box-sizing: border-box;
  padding: 0 .4rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.category-subnav__pill:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.category-subnav__all-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 .5rem;
  flex-shrink: 0;
}

.category-subnav__all-btn:hover,
.category-subnav__all-btn:focus {
  background: var(--color-primary-dark, var(--color-primary));
  color: #fff;
}

.category-subnav__mega {
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: var(--radius-lg);
}

/* ============================================================
   KYC BANNER
   ============================================================ */

.kyc-banner {
  padding: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.kyc-banner--warning {
  background-color: var(--color-warning);
}

.kyc-banner--info {
  background-color: var(--color-info);
}

.kyc-banner--danger {
  background-color: var(--color-danger);
}

.kyc-banner__cta {
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.2rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  text-decoration: none;
}

.kyc-banner__cta:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ============================================================
   WORD CAROUSEL (hero heading)
   ============================================================ */

.word-carousel {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.2em;
  min-width: 9em;
}

.word-carousel__word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(40px);
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  animation: wordSlideH 8s infinite;
}

.word-carousel__word:nth-child(1) { animation-delay: 0s; }
.word-carousel__word:nth-child(2) { animation-delay: 2s; }
.word-carousel__word:nth-child(3) { animation-delay: 4s; }
.word-carousel__word:nth-child(4) { animation-delay: 6s; }

@keyframes wordSlideH {
  0%     { opacity: 0; transform: translateX(40px); }
  4%     { opacity: 1; transform: translateX(0); }
  21%    { opacity: 1; transform: translateX(0); }
  25%    { opacity: 0; transform: translateX(-40px); }
  25.1%  { opacity: 0; transform: translateX(40px); }
  100%   { opacity: 0; transform: translateX(40px); }
}

/* ============================================================
   FEATURE ICONS
   ============================================================ */

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--spacing-base);
}

.feature-icon-green {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

.feature-icon-amber {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
}

.feature-icon-teal {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}

/* ============================================================
   STAT CARDS (profile)
   ============================================================ */

.stat-card {
  text-align: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-neutral-200);
  transition: all var(--transition-base);
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: .4rem;
}

.section-header i {
  color: var(--color-accent);
  font-size: 1.25rem;
}

.section-divider {
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin-bottom: .75rem;
}

/* ============================================================
   PRODUCT CARDS (marketplace)
   ============================================================ */

.product-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-gallery-main {
  height: 520px;
}

.product-gallery-thumb {
  border: 2px solid transparent;
  transition: all var(--transition-base);
}

.product-gallery-thumb.active {
  border-color: var(--color-primary);
  transform: scale(1.08);
}

.product-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
}

.product-creator {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.product-creator a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   PRODUCT CAROUSEL
   ============================================================ */

.product-carousel-wrap {
  position: relative;
}

/* Scroll arrows: an affordance telling users the row can be scrolled.
   Hidden by JS when the track does not overflow (e.g. the grid variant). */
.carousel-nav {
  position: absolute;
  top: 40%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .92);
  color: var(--color-neutral-800);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transform: translateY(-50%);
}

.carousel-nav[hidden] {
  display: none;
}

.carousel-nav[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

.carousel-nav:hover {
  background: var(--color-bg-white);
  color: var(--color-primary);
}

.carousel-nav:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.carousel-nav--prev {
  left: -6px;
}

.carousel-nav--next {
  right: -6px;
}

.product-carousel {
  display: flex;
  gap: 1rem;
  padding-bottom: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product-carousel::-webkit-scrollbar {
  display: none;
}

.product-carousel-item {
  flex: 0 0 46%;
  scroll-snap-align: start;
}

@media (min-width: 576px) {
  .product-carousel-item {
    flex: 0 0 200px;
  }
}

/* Grid variant: carousel on mobile, regular grid from md up. */
@media (min-width: 768px) {
  .product-carousel--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .product-carousel--grid .product-carousel-item {
    flex: initial;
  }
}

@media (min-width: 992px) {
  .product-carousel--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card-title {
  font-size: .8rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-meta {
  font-size: .72rem;
}

/* Flex items default to min-width:auto, which stops .text-truncate ellipsing. */
.product-card-meta .text-truncate {
  min-width: 0;
}

.product-card-price {
  font-size: .85rem;
  color: var(--color-primary);
}

.product-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.product-card-avatar--lg {
  width: 24px;
  height: 24px;
}

/* Compact marketplace grid: same tile footprint as the homepage cards.
   Only on real phones, where the 2-up columns are ~160px wide. */
.product-grid--sm .product-card-img,
.product-grid--sm .product-card-placeholder {
  aspect-ratio: 1 / 1;
}

/* From sm up the fixed container widens the 2-up columns to ~254px - the
   widest cards in the whole grid - so a square image makes them too tall. */
@media (min-width: 576px) {
  .product-grid--sm .product-card-img,
  .product-grid--sm .product-card-placeholder {
    aspect-ratio: 4 / 3;
  }
}

.product-grid--sm .product-card .card-body {
  padding: .5rem .6rem .6rem;
}

.product-grid--sm .product-card .card-title {
  font-size: .85rem;
  line-height: 1.3;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tighter stack under the title so the taller image keeps its share. */
.product-grid--sm .product-card .card-body > .mb-2 {
  margin-bottom: .25rem !important;
}

.product-grid--sm .product-card .card-body .mb-3 {
  margin-bottom: .4rem !important;
}

.product-grid--sm .product-creator {
  font-size: .72rem;
  gap: .35rem !important;
}

.product-grid--sm .product-card-avatar--lg {
  width: 18px;
  height: 18px;
}

/* The variant badge ("a partir de X - N variantes") is longer than a ~160px
   column, and an inline-block cannot shrink below its content: it wraps
   instead of overflowing the card. A pill radius reads wrong on two lines. */
.product-grid--sm .product-card .badge {
  font-size: .65rem;
  font-weight: 600;
  white-space: normal;
  text-align: left;
  max-width: 100%;
  border-radius: var(--radius-md);
}

/* Flex children default to min-width:auto, which is what lets wide content
   push past the card edge in the first place. */
.product-grid--sm .product-card .card-body,
.product-grid--sm .product-card .card-body > * {
  min-width: 0;
}

.product-grid--sm .product-card .product-price {
  font-size: 1rem;
}

.product-grid--sm .product-card .btn {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .78rem;
}

.product-grid--sm .product-card [data-cart-slot] .btn i {
  margin-right: .15rem;
}

.product-card-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.cart-item-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
}

@media (min-width: 992px) {
  .cart-item-img {
    width: 80px;
    height: 80px;
  }
}

.cart-qty-controls {
  gap: 0.35rem;
}

.cart-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile cart rows (the table is desktop-only: four columns never fit a phone) */
.cart-item-mobile {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.cart-item-mobile:last-child {
  border-bottom: 0;
}

.cart-item-mobile .btn.px-3 {
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
}

@media (min-width: 992px) {
  .cart-qty-controls {
    gap: 0.5rem;
  }
}

.auth-wrapper {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}

.auth-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
}

.auth-side {
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary-lighter));
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: white;
}

.auth-side h3 {
  color: white;
}

.auth-side p {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   SHORTCUT LIST (home page, authenticated)
   ============================================================ */

.shortcut-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
  padding: var(--spacing-base) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-bg-white);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.shortcut-item:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-secondary-lighter);
  color: var(--color-primary);
  text-decoration: none;
  transform: translateX(4px);
}

.shortcut-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ============================================================
   MANAGEMENT HEADER (creator product detail)
   ============================================================ */

.management-header {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: white;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--spacing-md) var(--spacing-lg);
}

.management-header h5 {
  color: white;
  margin: 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.bg-light { background-color: var(--color-bg-primary) !important; }
.bg-dark { background-color: var(--color-bg-dark) !important; }
.bg-cream { background-color: var(--color-bg-secondary) !important; }

.border { border-color: var(--color-neutral-200) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-accent { border-color: var(--color-accent) !important; }

.rounded-xl { border-radius: var(--radius-xl) !important; }

.gap-custom { gap: var(--spacing-base); }
.gap-custom-lg { gap: var(--spacing-lg); }

/* ============================================================
   FILTER DROPDOWN
   ============================================================ */

.filter-dropdown-menu {
  min-width: 380px;
}

/* ============================================================
   PRODUCT DETAIL - MOBILE STICKY BUY BAR
   ============================================================ */

/* Single source of truth: the spacer and the toast offset both derive from it */
:root {
  --product-bar-height: calc(3rem + 0.625rem + max(0.625rem, env(safe-area-inset-bottom)));
}

.product-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  /* Translucent sheet so content reads as passing under the bar
     rather than being cut off by it */
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--bs-border-color);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: 0 -4px 16px rgba(44, 36, 24, 0.10);
  /* max() rather than adding the inset: mobile browsers change the safe-area
     value as their chrome shows/hides on scroll, which made the bar jump. */
  padding: 0.625rem 0;
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .product-mobile-bar {
    background-color: var(--color-bg-white);
  }
}

/* Fixed height so nothing can reflow the bar as its content or the browser
   chrome changes. */
.product-mobile-bar > .container {
  min-height: 3rem;
}

.product-mobile-bar .btn {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Let the action group shrink instead of overflowing the viewport */
.product-mobile-bar [data-cart-slot],
.product-mobile-bar [data-cart-slot] > div {
  min-width: 0;
}

/* Keeps the last content above the fixed bar */
.product-mobile-bar-spacer {
  height: calc(var(--product-bar-height) + 1rem);
}

/* Lift toasts above the buy bar instead of letting them cover it */
@media (max-width: 991.98px) {
  /* !important to beat Bootstrap's .bottom-0 utility on the container */
  body.product-detail-page .toast-container {
    bottom: var(--product-bar-height) !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
  /* Sticky aside only makes sense in the two-column desktop layout */
  .product-detail-aside {
    position: static !important;
  }

  /* Let the image set its own height: a fixed box + object-fit: contain
     letterboxed portrait images with empty bands above and below. */
  .product-gallery-main {
    height: auto;
  }

  .product-gallery-main img {
    height: auto !important;
    max-height: 60vh;
  }
}

@media (max-width: 992px) {
  .hero-section {
    padding: 3rem 0 2.5rem;
  }

  .hero-section h1 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 0;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }

  .filter-dropdown-menu {
    min-width: min(380px, calc(100vw - 2rem));
  }

  .hero-section {
    padding: 2.5rem 0 2rem;
  }

  .hero-section h1 {
    font-size: 1.75rem;
  }

  .card-body {
    padding: var(--spacing-base);
  }

  .auth-side {
    padding: var(--spacing-base);
  }

  .product-card .card-title {
    font-size: 0.95rem;
  }

  .product-card .card-body {
    padding: 0.65rem;
  }
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Spotlight creator avatar */
.spotlight-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.spotlight-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}