/* ============================================================
   SALINARIUM — LAMPYSOLNE.PL
   Design System v1.0
   Inspired by Apple, Muuto, Aesop
   
   Palette extracted from brand imagery:
   — Warm amber/orange from salt lamp glow
   — Deep charcoal from dark backgrounds
   — Warm cream/ivory for light sections
   — Muted gold for premium accents
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS — Global Palette
     ---------------------------------------------------------- */

  /* Brand Amber — extracted from lamp glow in imagery */
  --color-amber-50:  #FFF8EE;
  --color-amber-100: #FDEFD8;
  --color-amber-200: #FAD9A8;
  --color-amber-300: #F6BC6E;
  --color-amber-400: #F0983A;
  --color-amber-500: #E87820;   /* primary CTA */
  --color-amber-600: #C85E12;
  --color-amber-700: #A04510;
  --color-amber-800: #7A300E;
  --color-amber-900: #5A2009;

  /* Salt White / Cream — from white salt imagery */
  --color-cream-50:  #FDFAF6;
  --color-cream-100: #F9F4EC;
  --color-cream-200: #F2E8D6;
  --color-cream-300: #E8D8BC;
  --color-cream-400: #D9C4A0;
  --color-cream-500: #C8AD84;

  /* Deep Charcoal — from dark photo backgrounds */
  --color-charcoal-900: #0F0D0B;   /* deepest background */
  --color-charcoal-800: #1A1713;
  --color-charcoal-700: #242018;
  --color-charcoal-600: #32291E;
  --color-charcoal-500: #4A3D2C;
  --color-charcoal-400: #6B5940;
  --color-charcoal-300: #8C7A60;
  --color-charcoal-200: #B0A08A;
  --color-charcoal-100: #D4C8B8;

  /* Muted Gold — luxury accent */
  --color-gold-400: #C9A86C;
  --color-gold-500: #B8924A;   /* primary accent */
  --color-gold-600: #9E7A32;
  --color-gold-700: #7D5E20;

  /* Salt Rose — from pink Himalayan salt */
  --color-rose-100: #FCF0EE;
  --color-rose-200: #F5D4CE;
  --color-rose-300: #EBB0A4;
  --color-rose-400: #DC8878;
  --color-rose-500: #C96458;

  /* Semantic Colors */
  --color-success: #4A7C59;
  --color-warning: #C48A2A;
  --color-error:   #B04040;
  --color-info:    #4A6882;

  /* ----------------------------------------------------------
     SEMANTIC COLOR ASSIGNMENTS
     ---------------------------------------------------------- */

  /* Text */
  --text-primary:      var(--color-charcoal-900);
  --text-secondary:    var(--color-charcoal-400);
  --text-tertiary:     var(--color-charcoal-300);
  --text-inverse:      var(--color-cream-50);
  --text-inverse-soft: var(--color-cream-300);
  --text-accent:       var(--color-amber-500);
  --text-gold:         var(--color-gold-500);
  --text-link:         var(--color-amber-600);
  --text-link-hover:   var(--color-amber-700);

  /* Backgrounds */
  --bg-primary:    var(--color-cream-50);
  --bg-secondary:  var(--color-cream-100);
  --bg-tertiary:   var(--color-cream-200);
  --bg-dark:       var(--color-charcoal-900);
  --bg-dark-soft:  var(--color-charcoal-800);
  --bg-dark-mid:   var(--color-charcoal-700);
  --bg-accent:     var(--color-amber-500);
  --bg-gold:       var(--color-gold-500);

  /* Borders */
  --border-light:    rgba(15, 13, 11, 0.08);
  --border-medium:   rgba(15, 13, 11, 0.16);
  --border-strong:   rgba(15, 13, 11, 0.32);
  --border-inverse:  rgba(253, 250, 246, 0.12);
  --border-gold:     rgba(184, 146, 74, 0.40);
  --border-amber:    rgba(232, 120, 32, 0.30);

  /* Overlays */
  --overlay-dark-sm:  rgba(15, 13, 11, 0.30);
  --overlay-dark-md:  rgba(15, 13, 11, 0.55);
  --overlay-dark-lg:  rgba(15, 13, 11, 0.75);
  --overlay-amber:    rgba(232, 120, 32, 0.08);
  --overlay-warm:     rgba(250, 217, 168, 0.15);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Font Families */
  --font-display:  'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-body:     'Jost', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-caption:  'Jost', 'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Font Sizes — Major Third scale (1.250) */
  --text-2xs:  0.64rem;    /*  ~10px */
  --text-xs:   0.75rem;    /*  12px  */
  --text-sm:   0.875rem;   /*  14px  */
  --text-base: 1rem;       /*  16px  */
  --text-lg:   1.125rem;   /*  18px  */
  --text-xl:   1.25rem;    /*  20px  */
  --text-2xl:  1.5rem;     /*  24px  */
  --text-3xl:  1.875rem;   /*  30px  */
  --text-4xl:  2.25rem;    /*  36px  */
  --text-5xl:  3rem;       /*  48px  */
  --text-6xl:  3.75rem;    /*  60px  */
  --text-7xl:  4.5rem;     /*  72px  */
  --text-8xl:  6rem;       /*  96px  */

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.85;

  /* Letter Spacing */
  --tracking-tightest: -0.05em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;
  --tracking-super:     0.25em;

  /* ----------------------------------------------------------
     SPACING — 4px base grid
     ---------------------------------------------------------- */

  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;   /*  2px */
  --space-1:   0.25rem;    /*  4px */
  --space-1-5: 0.375rem;   /*  6px */
  --space-2:   0.5rem;     /*  8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-14:  3.5rem;     /* 56px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-28:  7rem;       /* 112px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px */
  --space-48:  12rem;      /* 192px */
  --space-64:  16rem;      /* 256px */

  /* Section Spacing */
  --section-sm:  var(--space-16);    /* 64px  */
  --section-md:  var(--space-24);    /* 96px  */
  --section-lg:  var(--space-32);    /* 128px */
  --section-xl:  var(--space-40);    /* 160px */
  --section-2xl: var(--space-48);    /* 192px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-3xl:  1600px;

  --content-max:    1200px;
  --prose-max:      680px;

  --grid-gap:       var(--space-6);
  --grid-gap-lg:    var(--space-10);

  --gutter:         var(--space-6);     /* mobile */
  --gutter-md:      var(--space-10);    /* tablet */
  --gutter-lg:      var(--space-16);    /* desktop */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-3xl:   32px;
  --radius-full:  9999px;

  /* Semantic Radius */
  --radius-btn:   var(--radius-full);   /* pill buttons */
  --radius-card:  var(--radius-xl);
  --radius-img:   var(--radius-lg);
  --radius-tag:   var(--radius-full);
  --radius-input: var(--radius-md);
  --radius-modal: var(--radius-2xl);

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  /* Elevation scale — warm-tinted shadows */
  --shadow-xs:   0 1px 2px 0 rgba(90, 32, 9, 0.04);
  --shadow-sm:   0 1px 3px 0 rgba(90, 32, 9, 0.06), 0 1px 2px -1px rgba(90, 32, 9, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(90, 32, 9, 0.08), 0 2px 4px -2px rgba(90, 32, 9, 0.08);
  --shadow-lg:   0 10px 15px -3px rgba(90, 32, 9, 0.10), 0 4px 6px -4px rgba(90, 32, 9, 0.10);
  --shadow-xl:   0 20px 25px -5px rgba(90, 32, 9, 0.12), 0 8px 10px -6px rgba(90, 32, 9, 0.12);
  --shadow-2xl:  0 25px 50px -12px rgba(90, 32, 9, 0.18);
  --shadow-3xl:  0 35px 60px -15px rgba(90, 32, 9, 0.25);

  /* Glow — lamp light effect */
  --shadow-glow-sm:  0 0 20px 4px rgba(232, 120, 32, 0.18);
  --shadow-glow-md:  0 0 40px 8px rgba(232, 120, 32, 0.22);
  --shadow-glow-lg:  0 0 60px 16px rgba(232, 120, 32, 0.28);
  --shadow-glow-xl:  0 0 80px 24px rgba(232, 120, 32, 0.35);

  /* Inset */
  --shadow-inset-sm: inset 0 1px 2px rgba(90, 32, 9, 0.06);
  --shadow-inset-md: inset 0 2px 4px rgba(90, 32, 9, 0.10);

  /* ----------------------------------------------------------
     TRANSITIONS & ANIMATIONS
     ---------------------------------------------------------- */

  /* Durations */
  --duration-instant:  50ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;
  --duration-slowest:  900ms;
  --duration-cinematic: 1200ms;

  /* Easing */
  --ease-linear:     linear;
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-butter:     cubic-bezier(0.16, 1, 0.3, 1);

  /* Transitions — pre-built */
  --transition-fast:    all var(--duration-fast) var(--ease-out);
  --transition-normal:  all var(--duration-normal) var(--ease-out);
  --transition-slow:    all var(--duration-slow) var(--ease-butter);
  --transition-color:   color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  --transition-shadow:  box-shadow var(--duration-slow) var(--ease-butter), filter var(--duration-slow) var(--ease-butter);
  --transition-transform: transform var(--duration-slow) var(--ease-butter);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ----------------------------------------------------------
     COMPONENT-SPECIFIC TOKENS
     ---------------------------------------------------------- */

  /* Navigation */
  --nav-height:      72px;
  --nav-height-lg:   80px;
  --nav-bg:          rgba(253, 250, 246, 0.92);
  --nav-bg-dark:     rgba(15, 13, 11, 0.92);
  --nav-blur:        saturate(180%) blur(20px);
  --nav-border:      1px solid var(--border-light);

  /* Buttons */
  --btn-height-sm:   36px;
  --btn-height-md:   48px;
  --btn-height-lg:   56px;
  --btn-height-xl:   64px;
  --btn-px-sm:       var(--space-5);
  --btn-px-md:       var(--space-8);
  --btn-px-lg:       var(--space-10);
  --btn-px-xl:       var(--space-12);
  --btn-font-sm:     var(--text-sm);
  --btn-font-md:     var(--text-sm);
  --btn-font-lg:     var(--text-base);
  --btn-tracking:    var(--tracking-wider);
  --btn-weight:      var(--weight-semibold);

  /* Cards */
  --card-bg:         var(--color-cream-50);
  --card-bg-dark:    var(--color-charcoal-800);
  --card-border:     1px solid var(--border-light);
  --card-radius:     var(--radius-xl);
  --card-padding:    var(--space-8);
  --card-padding-lg: var(--space-12);

  /* Forms */
  --input-height:    52px;
  --input-height-sm: 44px;
  --input-bg:        var(--color-cream-50);
  --input-border:    1px solid var(--border-medium);
  --input-border-focus: 1px solid var(--color-amber-500);
  --input-radius:    var(--radius-md);
  --input-px:        var(--space-5);
  --input-font:      var(--text-base);
  --input-color:     var(--text-primary);

  /* Tags & Badges */
  --tag-px:     var(--space-3);
  --tag-py:     var(--space-1);
  --tag-font:   var(--text-xs);
  --tag-weight: var(--weight-semibold);
  --tag-radius: var(--radius-full);
}


/* ============================================================
   2. TYPOGRAPHY IMPORTS (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');


/* ============================================================
   3. CSS RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
}

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

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

button, input, textarea, select {
  font: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}


/* ============================================================
   4. TYPOGRAPHY SCALE
   ============================================================ */

/* Display — hero headings, maximum impact */
.type-display-2xl {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 8vw, var(--text-8xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
}

.type-display-xl {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.type-display-lg {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-6xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Headings */
.type-h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 2.8vw, var(--text-4xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.type-h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.type-h4 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-2xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.type-h5 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.type-h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Body */
.type-body-xl  { font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.type-body-lg  { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.type-body     { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.type-body-sm  { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Prose — long-form body text */
.type-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  max-width: var(--prose-max);
}

/* Labels & Meta */
.type-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-amber-500);
}

.type-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-super);
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.type-caption {
  font-family: var(--font-caption);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}

/* Decorative italic — display accents */
.type-italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  color: var(--color-amber-500);
}

/* Serif emphasis within body copy */
em.serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
}


/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--prose-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  .container,
  .container-wide,
  .container-narrow {
    padding-inline: var(--gutter-md);
  }
}

@media (min-width: 1024px) {
  .container,
  .container-wide,
  .container-narrow {
    padding-inline: var(--gutter-lg);
  }
}

/* Section spacing */
.section-sm  { padding-block: var(--section-sm);  }
.section-md  { padding-block: var(--section-md);  }
.section-lg  { padding-block: var(--section-lg);  }
.section-xl  { padding-block: var(--section-xl);  }
.section-2xl { padding-block: var(--section-2xl); }

/* Grid systems */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   6. BUTTON COMPONENTS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding-inline: var(--btn-px-md);
  font-family: var(--font-body);
  font-size: var(--btn-font-md);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  border-radius: var(--btn-radius, var(--radius-full));
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-normal);
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.btn:hover::after  { opacity: 0.06; }
.btn:active::after { opacity: 0.12; }

.btn:focus-visible {
  outline: 2px solid var(--color-amber-500);
  outline-offset: 3px;
}

/* Primary — filled amber */
.btn-primary {
  background-color: var(--color-amber-500);
  border-color: var(--color-amber-500);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-amber-600);
  border-color: var(--color-amber-600);
  box-shadow: var(--shadow-glow-sm);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secondary — outlined amber */
.btn-secondary {
  background-color: transparent;
  border-color: var(--color-amber-500);
  color: var(--color-amber-500);
}
.btn-secondary:hover {
  background-color: var(--color-amber-50);
  border-color: var(--color-amber-600);
  color: var(--color-amber-600);
  transform: translateY(-1px);
}

/* Ghost — subtle */
.btn-ghost {
  background-color: transparent;
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.btn-ghost:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-strong);
}

/* Dark — on light backgrounds */
.btn-dark {
  background-color: var(--color-charcoal-900);
  border-color: var(--color-charcoal-900);
  color: var(--color-cream-50);
}
.btn-dark:hover {
  background-color: var(--color-charcoal-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Gold — premium/luxury CTA */
.btn-gold {
  background-color: var(--color-gold-500);
  border-color: var(--color-gold-500);
  color: #fff;
}
.btn-gold:hover {
  background-color: var(--color-gold-600);
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(184, 146, 74, 0.30);
}

/* Inverse — on dark backgrounds */
.btn-inverse {
  background-color: var(--color-cream-50);
  border-color: var(--color-cream-50);
  color: var(--color-charcoal-900);
}
.btn-inverse:hover {
  background-color: var(--color-cream-200);
  transform: translateY(-1px);
}

/* Inverse outline — on dark bg */
.btn-inverse-outline {
  background-color: transparent;
  border-color: rgba(253, 250, 246, 0.40);
  color: var(--color-cream-50);
}
.btn-inverse-outline:hover {
  background-color: rgba(253, 250, 246, 0.10);
  border-color: rgba(253, 250, 246, 0.70);
}

/* Text link button */
.btn-text {
  background: none;
  border: none;
  color: var(--color-amber-600);
  padding-inline: 0;
  height: auto;
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: var(--transition-color);
}
.btn-text:hover {
  color: var(--color-amber-700);
  border-bottom-color: var(--color-amber-600);
}

/* Sizes */
.btn-sm {
  height: var(--btn-height-sm);
  padding-inline: var(--btn-px-sm);
  font-size: var(--btn-font-sm);
}
.btn-lg {
  height: var(--btn-height-lg);
  padding-inline: var(--btn-px-lg);
  font-size: var(--btn-font-lg);
}
.btn-xl {
  height: var(--btn-height-xl);
  padding-inline: var(--btn-px-xl);
  font-size: var(--text-base);
}

/* Icon button */
.btn-icon {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0;
  border-radius: var(--radius-full);
}

/* Arrow variant — right arrow */
.btn-arrow::after {
  content: '→';
  background: none;
  opacity: 1;
  position: static;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.btn-arrow:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   7. FORM COMPONENTS
   ============================================================ */

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

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-amber-500);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  height: var(--input-height);
  padding-inline: var(--input-px);
  font-family: var(--font-body);
  font-size: var(--input-font);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  outline: none;
  appearance: none;
}

.form-textarea {
  height: auto;
  min-height: 140px;
  padding-block: var(--space-4);
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.form-input:hover,
.form-textarea:hover {
  border-color: var(--color-charcoal-200);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(232, 120, 32, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

/* Error state */
.form-input.is-error,
.form-textarea.is-error {
  border-color: var(--color-error);
}
.form-input.is-error:focus,
.form-textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(176, 64, 64, 0.12);
}

.form-error {
  font-size: var(--text-sm);
  color: var(--color-error);
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check-input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background-color: var(--color-cream-50);
  cursor: pointer;
  appearance: none;
  transition: var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--color-amber-500);
  border-color: var(--color-amber-500);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.707 4.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L6 10.586l6.293-6.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

.form-check-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}


/* ============================================================
   8. CARD COMPONENTS
   ============================================================ */

/* Base card */
.card {
  background-color: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--transition-slow);
  transition-property: box-shadow, transform, border-color;
}

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

/* Product card */
.card-product {
  background-color: var(--color-cream-50);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-slow);
  transition-property: box-shadow, transform, border-color;
}

.card-product:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
  border-color: var(--border-amber);
}

.card-product__image {
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--color-cream-200);
  position: relative;
}

.card-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-butter);
}

.card-product:hover .card-product__image img {
  transform: scale(1.06);
}

.card-product__body {
  padding: var(--space-6);
}

.card-product__category {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-amber-500);
  margin-bottom: var(--space-2);
}

.card-product__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.card-product__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.card-product__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-product__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

/* Feature card */
.card-feature {
  padding: var(--space-10);
  background-color: var(--color-cream-100);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  transition: var(--transition-slow);
  transition-property: background-color, box-shadow, transform;
}

.card-feature:hover {
  background-color: var(--color-cream-50);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-feature__icon {
  width: 48px;
  height: 48px;
  color: var(--color-amber-500);
  margin-bottom: var(--space-5);
}

.card-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-3);
}

.card-feature__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Testimonial card */
.card-testimonial {
  padding: var(--space-8);
  background-color: var(--color-cream-50);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  position: relative;
}

.card-testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.card-testimonial__stars {
  display: flex;
  gap: var(--space-1);
  color: var(--color-amber-400);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.card-testimonial__author {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.card-testimonial__location {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Dark card — on dark sections */
.card-dark {
  background-color: var(--color-charcoal-800);
  border-color: rgba(253, 250, 246, 0.08);
  color: var(--color-cream-50);
}

.card-dark:hover {
  background-color: var(--color-charcoal-700);
}


/* ============================================================
   9. NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background-color: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: var(--nav-border);
  transition: background-color var(--duration-slow) var(--ease-butter),
              box-shadow var(--duration-slow) var(--ease-butter);
}

.nav.is-scrolled {
  box-shadow: var(--shadow-md);
}

.nav.is-dark {
  background-color: var(--nav-bg-dark);
  border-bottom-color: rgba(253, 250, 246, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nav__logo:hover { opacity: 0.7; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 100%;
  height: 1px;
  background-color: var(--color-amber-500);
  transition: right var(--duration-normal) var(--ease-butter);
}

.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { right: 0; }
.nav__link.is-active { color: var(--text-primary); }
.nav__link.is-active::after { right: 0; }


/* ============================================================
   10. DIVIDERS & DECORATIVE ELEMENTS
   ============================================================ */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-light);
}

.divider-gold {
  width: 48px;
  height: 1px;
  background-color: var(--color-gold-500);
}

.divider-amber {
  width: 48px;
  height: 2px;
  background-color: var(--color-amber-500);
}

/* Ornamental line — centered */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-medium);
}

/* Section header */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-header__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-super);
  text-transform: uppercase;
  color: var(--color-gold-500);
  display: block;
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.section-header__title em {
  font-style: italic;
  color: var(--color-amber-500);
}

.section-header__line {
  width: 48px;
  height: 1px;
  background-color: var(--color-amber-500);
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.section-header__text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}


/* ============================================================
   11. BADGES & TAGS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-amber {
  background-color: var(--color-amber-50);
  color: var(--color-amber-700);
  border: 1px solid var(--color-amber-200);
}

.badge-gold {
  background-color: rgba(184, 146, 74, 0.10);
  color: var(--color-gold-600);
  border: 1px solid var(--border-gold);
}

.badge-dark {
  background-color: var(--color-charcoal-800);
  color: var(--color-cream-200);
  border: 1px solid rgba(253, 250, 246, 0.12);
}

.badge-new {
  background-color: var(--color-amber-500);
  color: #fff;
}

.badge-premium {
  background: linear-gradient(135deg, var(--color-gold-400), var(--color-gold-600));
  color: #fff;
}


/* ============================================================
   12. HOVER EFFECTS
   ============================================================ */

/* Image zoom on card hover — apply to image wrapper */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform var(--duration-slower) var(--ease-butter);
}
.hover-zoom:hover img {
  transform: scale(1.06);
}

/* Subtle lift */
.hover-lift {
  transition: transform var(--duration-slow) var(--ease-butter),
              box-shadow var(--duration-slow) var(--ease-butter);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Glow on hover — for lamp images */
.hover-glow {
  transition: filter var(--duration-slow) var(--ease-butter),
              box-shadow var(--duration-slow) var(--ease-butter);
}
.hover-glow:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-glow-md);
}

/* Underline slide */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-normal) var(--ease-butter);
}
.hover-underline:hover::after { width: 100%; }

/* Opacity fade */
.hover-fade {
  transition: opacity var(--duration-normal) var(--ease-out);
}
.hover-fade:hover { opacity: 0.75; }

/* Color reveal on card hover — tint overlay */
.hover-tint {
  position: relative;
}
.hover-tint::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-amber-500);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--duration-slow) var(--ease-butter);
  pointer-events: none;
}
.hover-tint:hover::after { opacity: 0.06; }


/* ============================================================
   13. ANIMATIONS — @keyframes
   ============================================================ */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Fade down */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Slide in right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Slide in left */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Glow pulse — lamp ambient effect */
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--shadow-glow-sm); }
  50%       { box-shadow: var(--shadow-glow-lg); }
}

/* Warm flicker — candle-like subtle movement */
@keyframes warmFlicker {
  0%   { opacity: 1;    }
  25%  { opacity: 0.96; }
  50%  { opacity: 0.98; }
  75%  { opacity: 0.94; }
  100% { opacity: 1;    }
}

/* Shimmer — for skeleton loaders */
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

/* Float — subtle levitation */
@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-8px); }
}

/* Draw line — decorative underline reveal */
@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* Rotate subtle — for decorative elements */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Animation utility classes */
.animate-fade-in   { animation: fadeIn  var(--duration-slow) var(--ease-out) both; }
.animate-fade-up   { animation: fadeUp  var(--duration-slow) var(--ease-butter) both; }
.animate-fade-down { animation: fadeDown var(--duration-slow) var(--ease-butter) both; }
.animate-scale-in  { animation: scaleIn var(--duration-slow) var(--ease-spring) both; }
.animate-glow      { animation: glowPulse 3s var(--ease-in-out) infinite; }
.animate-float     { animation: float 4s var(--ease-in-out) infinite; }

/* Stagger delays */
.delay-100  { animation-delay: 100ms;  }
.delay-200  { animation-delay: 200ms;  }
.delay-300  { animation-delay: 300ms;  }
.delay-400  { animation-delay: 400ms;  }
.delay-500  { animation-delay: 500ms;  }
.delay-700  { animation-delay: 700ms;  }
.delay-1000 { animation-delay: 1000ms; }

/* Scroll-triggered animation base */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-butter),
              transform var(--duration-slow) var(--ease-butter);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-left"].is-visible  { transform: translateX(0); }
[data-animate="fade-left"]             { transform: translateX(-20px); }
[data-animate="fade-right"].is-visible { transform: translateX(0); }
[data-animate="fade-right"]            { transform: translateX(20px); }
[data-animate="scale"].is-visible      { transform: scale(1); opacity: 1; }
[data-animate="scale"]                 { transform: scale(0.97); }

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1; transform: none; }
}


/* ============================================================
   14. SKELETON LOADERS
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-cream-200) 0%,
    var(--color-cream-100) 50%,
    var(--color-cream-200) 100%
  );
  background-size: 400% 100%;
  animation: shimmer 1.8s var(--ease-in-out) infinite;
  border-radius: var(--radius-md);
}

.skeleton-text  { height: 1em; margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
.skeleton-title { height: 1.5em; width: 60%; border-radius: var(--radius-sm); }
.skeleton-img   { aspect-ratio: 4/5; border-radius: var(--radius-xl); }
.skeleton-btn   { height: var(--btn-height-md); width: 160px; border-radius: var(--radius-full); }


/* ============================================================
   15. UTILITY CLASSES
   ============================================================ */

/* Background utilities */
.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-dark      { background-color: var(--bg-dark); }
.bg-amber     { background-color: var(--color-amber-500); }
.bg-cream     { background-color: var(--color-cream-100); }

/* Text utilities */
.text-primary   { color: var(--text-primary);   }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary);  }
.text-inverse   { color: var(--text-inverse);   }
.text-amber     { color: var(--color-amber-500); }
.text-gold      { color: var(--color-gold-500);  }

/* Text transforms */
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.no-break { white-space: nowrap; }

/* Spacing helpers */
.mt-section { margin-top: var(--section-md); }
.mb-section { margin-bottom: var(--section-md); }

/* Flex utilities */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Aspect ratios */
.ratio-square    { aspect-ratio: 1/1; }
.ratio-landscape { aspect-ratio: 16/9; }
.ratio-portrait  { aspect-ratio: 4/5; }
.ratio-wide      { aspect-ratio: 21/9; }

/* Object fit */
.obj-cover   { object-fit: cover; width: 100%; height: 100%; }
.obj-contain { object-fit: contain; width: 100%; height: 100%; }

/* Shadows utility */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-glow-sm { box-shadow: var(--shadow-glow-sm); }
.shadow-glow-md { box-shadow: var(--shadow-glow-md); }

/* Border radius utility */
.rounded-sm  { border-radius: var(--radius-sm);  }
.rounded-md  { border-radius: var(--radius-md);  }
.rounded-lg  { border-radius: var(--radius-lg);  }
.rounded-xl  { border-radius: var(--radius-xl);  }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto;   }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky;   }
.fixed    { position: fixed;    }

/* Responsive hide/show */
@media (max-width: 767px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .hide-desktop { display: none !important; } }


/* ============================================================
   16. SPECIAL / BRAND-SPECIFIC COMPONENTS
   ============================================================ */

/* Lamp glow wrapper — adds ambient light effect */
.lamp-glow {
  position: relative;
}
.lamp-glow::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(232, 120, 32, 0.35) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}

/* Salt texture overlay — for section backgrounds */
.salt-texture {
  position: relative;
  isolation: isolate;
}
.salt-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
}

/* Price display */
.price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  line-height: 1;
}
.price__currency {
  font-size: 0.65em;
  vertical-align: top;
  margin-top: 0.2em;
  font-weight: var(--weight-light);
}
.price__old {
  font-size: var(--text-base);
  text-decoration: line-through;
  color: var(--text-tertiary);
  margin-right: var(--space-2);
}

/* Star rating */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-amber-400);
  font-size: var(--text-sm);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
}
.breadcrumb__sep { color: var(--border-medium); }
.breadcrumb a:hover { color: var(--color-amber-600); }


/* ============================================================
   17. DARK SECTION OVERRIDES
   ============================================================ */

.section-dark {
  background-color: var(--color-charcoal-900);
  color: var(--color-cream-200);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--color-cream-50);
}

.section-dark p {
  color: var(--color-charcoal-100);
}

.section-dark .section-header__title {
  color: var(--color-cream-50);
}

.section-dark .section-header__text {
  color: var(--color-charcoal-100);
}

.section-dark .divider {
  background-color: rgba(253, 250, 246, 0.08);
}

.section-dark .card-feature {
  background-color: var(--color-charcoal-800);
  border-color: rgba(253, 250, 246, 0.06);
}

.section-dark .card-feature__title {
  color: var(--color-cream-50);
}

.section-dark .card-feature__text {
  color: var(--color-charcoal-100);
}


/* ============================================================
   18. WORDPRESS / ELEMENTOR INTEGRATION OVERRIDES
   ============================================================ */

/* Strip Elementor's default padding resets where needed */
.elementor-section > .elementor-container {
  max-width: var(--content-max) !important;
}

/* Elementor widget typography → use our tokens */
.elementor-heading-title {
  font-family: var(--font-display) !important;
}

.elementor-widget-text-editor p {
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
}

/* WooCommerce overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--color-amber-500) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 14px var(--space-8) !important;
  transition: var(--transition-normal) !important;
  height: auto !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--color-amber-600) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-sm) !important;
}

/* WooCommerce price */
.woocommerce .price {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
}

/* WooCommerce form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  padding: var(--space-3) var(--input-px) !important;
  font-family: var(--font-body) !important;
  font-size: var(--input-font) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-amber-500) !important;
  box-shadow: 0 0 0 3px rgba(232, 120, 32, 0.12) !important;
  outline: none !important;
}

/* ============================================================
   HEADER FIXES v3
   ============================================================ */

/* Logo — poprawny rozmiar na desktop */
.elementor-location-header .elementor-widget-image img {
  width: 144px !important;
  height: 44px !important;
  max-width: 144px !important;
  object-fit: contain !important;
}

/* Logo — mobile nieco mniejszy */
@media (max-width: 767px) {
  .elementor-location-header .elementor-widget-image img {
    width: 144px !important;
    height: 62px !important;
    max-width: 144px !important;
  }

  /* Ukryj CTA na mobile */
  .elementor-location-header .elementor-widget-button {
    display: none !important;
  }

  /* Header padding mobile */
  .elementor-location-header .e-con-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Hamburger kolor */
.elementor-location-header .elementor-menu-toggle i,
.elementor-location-header .elementor-menu-toggle svg {
  color: #0F0D0B !important;
  font-size: 22px !important;
}

/* Mobile dropdown */
nav.elementor-nav-menu--dropdown {
  background-color: #FDFAF6 !important;
  border-top: 1px solid rgba(15,13,11,0.08) !important;
  box-shadow: 0 10px 40px rgba(15,13,11,0.15) !important;
}

nav.elementor-nav-menu--dropdown li a {
  color: #0F0D0B !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(15,13,11,0.06) !important;
}

nav.elementor-nav-menu--dropdown li a:hover {
  color: #E87820 !important;
  background-color: #F9F4EC !important;
}

/* ============================================================
   FOOTER FIXES v3 — desktop 4 kolumny
   ============================================================ */

/* KLUCZOWE: footer top container — wymuszony flex row na desktop */
@media (min-width: 1025px) {
  .elementor-location-footer .e-con.e-flex {
    flex-wrap: nowrap !important;
  }

  /* Pierwszy poziom dzieci footera (kolumny) */
  .elementor-location-footer > .e-con > .e-con > .e-con,
  .elementor-location-footer .e-con.e-flex > .e-con {
    flex-shrink: 1 !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
  }
}

/* Icon-box w footerze — kompaktowy */
.elementor-location-footer .elementor-icon-box-wrapper {
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

.elementor-location-footer .elementor-icon-box-icon {
  min-width: 14px !important;
  width: 14px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding-top: 2px !important;
}

.elementor-location-footer .elementor-icon-box-icon i,
.elementor-location-footer .elementor-icon-box-icon svg {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
}

.elementor-location-footer .elementor-icon-box-content {
  min-width: 0 !important;
  flex: 1 !important;
}

.elementor-location-footer .elementor-icon-box-title {
  margin: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.elementor-location-footer .elementor-icon-box-title,
.elementor-location-footer .elementor-icon-box-title span,
.elementor-location-footer .elementor-icon-box-title * {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #6B5940 !important;
}

/* Footer mobile — stack */
@media (max-width: 767px) {
  .elementor-location-footer .e-con.e-flex {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .elementor-location-footer .e-con.e-flex > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  .elementor-location-footer .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Footer tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-location-footer .e-con.e-flex {
    flex-wrap: wrap !important;
  }

  .elementor-location-footer .e-con.e-flex > .e-con {
    min-width: 45% !important;
    flex-basis: 45% !important;
  }
}