/* ============================================================
   EKN Marketplace — Brand Design System
   Generated for: EKN Marketplace (eknmarketplace.com)
   Colours extracted from logo:
     Lime green  #8DC63F  (cart / primary accent)
     Dark brown  #4A3728  (wordmark / headings)
     Olive       #6B7A2A  (tagline / secondary accent)
   ============================================================ */

/* ------------------------------------------------------------
   1. BRAND COLOUR TOKENS
   ------------------------------------------------------------ */
:root {

  /* --- Primary: Lime Green --- */
  --ekn-green-50:  #F4FAE8;
  --ekn-green-100: #DFF0BC;
  --ekn-green-200: #C7E38E;
  --ekn-green-400: #8DC63F;   /* logo lime green — primary brand */
  --ekn-green-600: #6B9A2A;
  --ekn-green-800: #4A6B1A;
  --ekn-green-900: #2E430F;

  /* --- Secondary: Dark Brown --- */
  --ekn-brown-50:  #F2EDE9;
  --ekn-brown-100: #D9C9BF;
  --ekn-brown-200: #BFA396;
  --ekn-brown-400: #8A6555;
  --ekn-brown-600: #6B4A38;
  --ekn-brown-800: #4A3728;   /* logo wordmark — headings / text */
  --ekn-brown-900: #2E2018;

  /* --- Accent: Olive --- */
  --ekn-olive-50:  #F0F2E6;
  --ekn-olive-100: #D3DAB3;
  --ekn-olive-200: #B5C280;
  --ekn-olive-400: #8A9E3A;
  --ekn-olive-600: #6B7A2A;   /* logo tagline — olive accent */
  --ekn-olive-800: #4A5618;
  --ekn-olive-900: #2D3510;

  /* --- Semantic aliases (use these in components) --- */
  --ekn-primary:         var(--ekn-green-400);
  --ekn-primary-hover:   var(--ekn-green-600);
  --ekn-primary-light:   var(--ekn-green-50);
  --ekn-primary-text:    var(--ekn-green-900);

  --ekn-heading:         var(--ekn-brown-800);
  --ekn-heading-muted:   var(--ekn-brown-600);
  --ekn-body:            var(--ekn-brown-800);
  --ekn-body-muted:      var(--ekn-brown-400);

  --ekn-accent:          var(--ekn-olive-600);
  --ekn-accent-hover:    var(--ekn-olive-800);
  --ekn-accent-light:    var(--ekn-olive-50);

  /* --- Neutrals --- */
  --ekn-white:       #FFFFFF;
  --ekn-bg:          #FAFAF7;   /* warm off-white — avoids cold grey */
  --ekn-surface:     #F4F3EE;
  --ekn-border:      #DDD9CE;
  --ekn-border-dark: #B8B3A6;

  /* --- Feedback colours --- */
  --ekn-success:     #2E7D32;
  --ekn-success-bg:  #EDF7ED;
  --ekn-warning:     #B54708;
  --ekn-warning-bg:  #FEF6EE;
  --ekn-error:       #C62828;
  --ekn-error-bg:    #FDECEC;
  --ekn-info:        #1565C0;
  --ekn-info-bg:     #E8F0FE;

  /* --- Spacing scale --- */
  --ekn-space-1:  4px;
  --ekn-space-2:  8px;
  --ekn-space-3:  12px;
  --ekn-space-4:  16px;
  --ekn-space-5:  24px;
  --ekn-space-6:  32px;
  --ekn-space-7:  48px;
  --ekn-space-8:  64px;

  /* --- Radius --- */
  --ekn-radius-sm:  4px;
  --ekn-radius-md:  8px;
  --ekn-radius-lg:  12px;
  --ekn-radius-xl:  20px;
  --ekn-radius-pill: 999px;

  /* --- Typography --- */
  --ekn-font-body:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --ekn-font-heading: Georgia, 'Times New Roman', serif;
  --ekn-font-mono:    'Courier New', Courier, monospace;

  /* --- Shadows --- */
  --ekn-shadow-sm:  0 1px 3px rgba(74, 55, 40, 0.08);
  --ekn-shadow-md:  0 4px 12px rgba(74, 55, 40, 0.12);
  --ekn-shadow-lg:  0 8px 24px rgba(74, 55, 40, 0.16);

  /* --- Transitions --- */
  --ekn-transition: 150ms ease;
}

/* ------------------------------------------------------------
   2. DARK MODE OVERRIDES
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --ekn-bg:          #1C1A17;
    --ekn-surface:     #252219;
    --ekn-border:      #3A3629;
    --ekn-border-dark: #514C3C;

    --ekn-body:        #E8E4D8;
    --ekn-body-muted:  #A8A396;
    --ekn-heading:     #F0ECDF;
    --ekn-heading-muted: #C4BFB2;

    --ekn-primary:       #A8D85A;   /* lighter lime — readable on dark */
    --ekn-primary-hover: #8DC63F;
    --ekn-primary-light: #1E2E0A;
    --ekn-primary-text:  #1C2E08;

    --ekn-accent:        #8A9E3A;
    --ekn-accent-hover:  #6B7A2A;
    --ekn-accent-light:  #1A200A;

    --ekn-success-bg:  #0A2E0C;
    --ekn-warning-bg:  #2E1A08;
    --ekn-error-bg:    #2E0A0A;
    --ekn-info-bg:     #0A1A2E;
  }
}

/* ------------------------------------------------------------
   3. BASE RESET & GLOBAL STYLES
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ekn-font-body);
  color: var(--ekn-body);
  background-color: var(--ekn-bg);
  line-height: 1.7;
  margin: 0;
}

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

/* ------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ekn-font-heading);
  color: var(--ekn-heading);
  line-height: 1.25;
  margin: 0 0 var(--ekn-space-4);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin: 0 0 var(--ekn-space-4);
  color: var(--ekn-body);
}

.ekn-lead {
  font-size: 1.2rem;
  color: var(--ekn-body-muted);
  line-height: 1.8;
}

a {
  color: var(--ekn-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ekn-transition);
}

a:hover {
  color: var(--ekn-accent-hover);
}

strong, b {
  font-weight: 600;
  color: var(--ekn-heading);
}

code {
  font-family: var(--ekn-font-mono);
  font-size: 0.875em;
  background: var(--ekn-surface);
  border: 1px solid var(--ekn-border);
  border-radius: var(--ekn-radius-sm);
  padding: 1px 6px;
  color: var(--ekn-brown-800);
}

/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */

/* Base */
.ekn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ekn-space-2);
  padding: 10px var(--ekn-space-5);
  border-radius: var(--ekn-radius-md);
  font-family: var(--ekn-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--ekn-transition),
              color var(--ekn-transition),
              border-color var(--ekn-transition),
              transform var(--ekn-transition),
              box-shadow var(--ekn-transition);
}

.ekn-btn:active {
  transform: scale(0.98);
}

.ekn-btn:focus-visible {
  outline: 3px solid var(--ekn-primary);
  outline-offset: 2px;
}

/* Primary — lime green fill */
.ekn-btn-primary {
  background: var(--ekn-primary);
  color: var(--ekn-brown-900);
  border-color: var(--ekn-primary);
}

.ekn-btn-primary:hover {
  background: var(--ekn-primary-hover);
  border-color: var(--ekn-primary-hover);
  color: var(--ekn-white);
  box-shadow: var(--ekn-shadow-md);
}

/* Secondary — outlined green */
.ekn-btn-secondary {
  background: transparent;
  color: var(--ekn-primary-hover);
  border-color: var(--ekn-primary);
}

.ekn-btn-secondary:hover {
  background: var(--ekn-primary-light);
  color: var(--ekn-primary-text);
}

/* Dark — brown fill */
.ekn-btn-dark {
  background: var(--ekn-brown-800);
  color: var(--ekn-white);
  border-color: var(--ekn-brown-800);
}

.ekn-btn-dark:hover {
  background: var(--ekn-brown-900);
  border-color: var(--ekn-brown-900);
  box-shadow: var(--ekn-shadow-md);
}

/* Ghost — olive text, no fill */
.ekn-btn-ghost {
  background: transparent;
  color: var(--ekn-accent);
  border-color: transparent;
}

.ekn-btn-ghost:hover {
  background: var(--ekn-accent-light);
  color: var(--ekn-accent-hover);
}

/* Sizes */
.ekn-btn-sm {
  padding: 6px 14px;
  font-size: 0.875rem;
  border-radius: var(--ekn-radius-sm);
}

.ekn-btn-lg {
  padding: 14px 32px;
  font-size: 1.0625rem;
  border-radius: var(--ekn-radius-lg);
}

/* ------------------------------------------------------------
   6. BADGES & TAGS
   ------------------------------------------------------------ */
.ekn-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ekn-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.ekn-badge-green {
  background: var(--ekn-green-100);
  color: var(--ekn-green-800);
}

.ekn-badge-olive {
  background: var(--ekn-olive-100);
  color: var(--ekn-olive-800);
}

.ekn-badge-brown {
  background: var(--ekn-brown-100);
  color: var(--ekn-brown-800);
}

.ekn-badge-sale {
  background: var(--ekn-error-bg);
  color: var(--ekn-error);
}

.ekn-badge-new {
  background: var(--ekn-green-400);
  color: var(--ekn-brown-900);
}

/* Supplier / type badges */
.ekn-badge-dropship {
  background: var(--ekn-green-50);
  color: var(--ekn-green-800);
  border: 1px solid var(--ekn-green-200);
}

.ekn-badge-affiliate {
  background: var(--ekn-olive-50);
  color: var(--ekn-olive-800);
  border: 1px solid var(--ekn-olive-200);
}

/* ------------------------------------------------------------
   7. CARDS
   ------------------------------------------------------------ */
.ekn-card {
  background: var(--ekn-white);
  border: 1px solid var(--ekn-border);
  border-radius: var(--ekn-radius-lg);
  padding: var(--ekn-space-5);
  box-shadow: var(--ekn-shadow-sm);
  transition: box-shadow var(--ekn-transition), transform var(--ekn-transition);
}

.ekn-card:hover {
  box-shadow: var(--ekn-shadow-md);
  transform: translateY(-2px);
}

/* Product card */
.ekn-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ekn-white);
  border: 1px solid var(--ekn-border);
  border-radius: var(--ekn-radius-lg);
  overflow: hidden;
  box-shadow: var(--ekn-shadow-sm);
  transition: box-shadow var(--ekn-transition), transform var(--ekn-transition);
}

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

.ekn-product-card__image {
  aspect-ratio: 4 / 3;
  background: var(--ekn-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ekn-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.ekn-product-card:hover .ekn-product-card__image img {
  transform: scale(1.04);
}

.ekn-product-card__body {
  padding: var(--ekn-space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ekn-product-card__title {
  font-family: var(--ekn-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ekn-heading);
  margin: 0 0 var(--ekn-space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ekn-product-card__desc {
  font-size: 0.8125rem;
  color: var(--ekn-body-muted);
  flex: 1;
  margin: 0 0 var(--ekn-space-3);
}

.ekn-product-card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ekn-heading);
}

.ekn-product-card__price-original {
  font-size: 0.875rem;
  color: var(--ekn-body-muted);
  text-decoration: line-through;
  margin-left: var(--ekn-space-2);
  font-weight: 400;
}

.ekn-product-card__price-sale {
  color: var(--ekn-error);
}

/* ------------------------------------------------------------
   8. NAVBAR
   ------------------------------------------------------------ */
.ekn-navbar {
  background: var(--ekn-brown-800);
  padding: 0 var(--ekn-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-shadow: var(--ekn-shadow-md);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ekn-navbar__logo {
  height: 40px;
  width: auto;
}

.ekn-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--ekn-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ekn-navbar__links a {
  color: var(--ekn-brown-100);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ekn-transition), border-color var(--ekn-transition);
}

.ekn-navbar__links a:hover,
.ekn-navbar__links a.active {
  color: var(--ekn-primary);
  border-bottom-color: var(--ekn-primary);
}

/* ------------------------------------------------------------
   9. HERO SECTION
   ------------------------------------------------------------ */
.ekn-hero {
  background: linear-gradient(135deg, var(--ekn-green-400) 0%, var(--ekn-olive-600) 100%);
  color: var(--ekn-white);
  padding: var(--ekn-space-8) var(--ekn-space-5);
}

.ekn-hero h1 {
  color: var(--ekn-white);
  font-family: var(--ekn-font-heading);
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ekn-hero p {
  color: rgba(255,255,255,0.9);
  font-size: 1.15rem;
}

/* ------------------------------------------------------------
   10. FORMS & INPUTS
   ------------------------------------------------------------ */
.ekn-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: var(--ekn-white);
  border: 1.5px solid var(--ekn-border);
  border-radius: var(--ekn-radius-md);
  font-family: var(--ekn-font-body);
  font-size: 0.9375rem;
  color: var(--ekn-body);
  transition: border-color var(--ekn-transition), box-shadow var(--ekn-transition);
}

.ekn-input:focus {
  outline: none;
  border-color: var(--ekn-primary);
  box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.2);
}

.ekn-input::placeholder {
  color: var(--ekn-border-dark);
}

.ekn-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ekn-heading-muted);
  margin-bottom: var(--ekn-space-2);
}

/* ------------------------------------------------------------
   11. UTILITY CLASSES
   ------------------------------------------------------------ */

/* Text colours */
.text-ekn-green  { color: var(--ekn-primary); }
.text-ekn-brown  { color: var(--ekn-heading); }
.text-ekn-olive  { color: var(--ekn-accent); }
.text-ekn-muted  { color: var(--ekn-body-muted); }

/* Background fills */
.bg-ekn-green    { background-color: var(--ekn-primary); }
.bg-ekn-green-lt { background-color: var(--ekn-primary-light); }
.bg-ekn-brown    { background-color: var(--ekn-brown-800); }
.bg-ekn-olive    { background-color: var(--ekn-accent); }
.bg-ekn-surface  { background-color: var(--ekn-surface); }

/* Borders */
.border-ekn      { border: 1px solid var(--ekn-border); }
.border-ekn-green{ border-color: var(--ekn-primary); }

/* Divider */
.ekn-divider {
  border: none;
  border-top: 1px solid var(--ekn-border);
  margin: var(--ekn-space-6) 0;
}

/* Section wrapper */
.ekn-section {
  padding: var(--ekn-space-7) var(--ekn-space-5);
}

.ekn-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--ekn-space-5);
}

/* Price display helpers */
.ekn-price       { font-weight: 700; color: var(--ekn-heading); }
.ekn-price-sale  { color: var(--ekn-error); }
.ekn-price-was   { text-decoration: line-through; color: var(--ekn-body-muted); }