/* Lux Kozmetika – design tokens (izvedeno iz dizajna). Uvezi prvo u stylesheet teme. */

:root {
  /* Boje */
  --lx-blue: #33A8DF;          /* akcent: primarni gumb, podcrte, oznake, sniženja */
  --lx-ink: #1A1A1A;           /* tekst, tamne sekcije, sekundarni gumb */
  --lx-white: #FFFFFF;
  --lx-text: #4A4A4A;          /* tijelo teksta */
  --lx-eyebrow: #555555;       /* male nadnaslovne oznake */
  --lx-meta: #666666;          /* breadcrumb, "brez DDV", brojači */
  --lx-muted: #8C8C8C;         /* precrtana cijena, brojevi u filtrima */
  --lx-border: #D9D9D9;        /* rubovi inputa, chipova, paginacije */
  --lx-line: rgba(26,26,26,.12); /* tanke razdjelne linije */
  --lx-warm: #F6F5F3;          /* topla pozadina sekcija i slika proizvoda */
  --lx-warm-2: #EEECE9;        /* pozadina foto placeholdera */
  --lx-on-dark: #CCCCCC;       /* tijelo teksta na #1A1A1A */
  --lx-on-dark-2: #A6A6A6;     /* sekundarni tekst na tamnom */
  --lx-line-dark: rgba(255,255,255,.14);

  /* Tipografija */
  --lx-serif: 'Libre Caslon Display', Georgia, serif;
  --lx-sans: 'Inter', system-ui, sans-serif;

  /* Layout */
  --lx-page: 1440px;
  --lx-gutter: 64px;           /* mobitel: 20px */
  --lx-section-y: 128px;       /* mobitel: 64px */
  --lx-radius: 0;              /* NEMA zaobljenja nigdje (osim toggle/slider točke) */
}
@media (max-width: 767px) {
  :root { --lx-gutter: 20px; --lx-section-y: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--lx-sans); color: var(--lx-ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
img { display: block; max-width: 100%; }

/* Naslovi */
.lx-h1 { font: 300 80px/1.04 var(--lx-serif); margin: 0; text-wrap: pretty; }
.lx-h2 { font: 300 52px/1.04 var(--lx-serif); margin: 0; text-wrap: pretty; }
.lx-h3 { font: 400 28px/1.1 var(--lx-serif); margin: 0; }
@media (max-width: 767px) {
  .lx-h1 { font-size: 42px; }
  .lx-h2 { font-size: 34px; }
  .lx-h3 { font-size: 24px; }
}
.lx-lead { font: 300 17px/1.7 var(--lx-sans); color: var(--lx-text); }
.lx-body { font: 300 16px/1.7 var(--lx-sans); color: var(--lx-text); }
@media (max-width: 767px) { .lx-lead, .lx-body { font-size: 15px; } }

/* Eyebrow (nadnaslov) */
.lx-eyebrow { display: flex; gap: 14px; align-items: center; font: 500 11px/1 var(--lx-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--lx-eyebrow); }
.lx-eyebrow--bar::before { content: ''; width: 28px; height: 2px; background: var(--lx-blue); }
.lx-eyebrow--on-dark { color: var(--lx-blue); }
@media (max-width: 767px) { .lx-eyebrow { font-size: 10px; letter-spacing: .2em; } .lx-eyebrow--bar::before { width: 20px; } }

/* Gumbi */
.lx-btn { height: 52px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; font: 500 12px/1 var(--lx-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lx-btn--primary { background: var(--lx-blue); color: var(--lx-ink); }
.lx-btn--primary:hover { background: #2B95C7; }
.lx-btn--dark { background: var(--lx-ink); color: #fff; }
.lx-btn--dark:hover { background: #000; }
.lx-btn--outline { border-color: var(--lx-ink); color: var(--lx-ink); background: transparent; }
.lx-btn--outline:hover { background: var(--lx-ink); color: #fff; }
.lx-btn--on-dark { border-color: rgba(255,255,255,.4); color: #fff; }
.lx-btn--sm { height: 44px; padding: 0 20px; font-size: 11px; letter-spacing: .14em; }
.lx-btn--block { display: flex; width: 100%; }
.lx-btn:focus-visible { outline: 2px solid var(--lx-blue); outline-offset: 2px; }

/* Tekst-link s plavom podcrtom */
.lx-link { display: inline-flex; font: 500 12px/1 var(--lx-sans); letter-spacing: .16em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--lx-blue); }

/* Chip */
.lx-chip { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--lx-border); font: 400 13px var(--lx-sans); white-space: nowrap; background: #fff; cursor: pointer; }
.lx-chip.is-active { background: var(--lx-ink); color: #fff; border-color: var(--lx-ink); }
@media (max-width: 767px) { .lx-chip { height: 44px; } }

/* Forme */
.lx-label { display: flex; flex-direction: column; gap: 8px; font: 500 11px/1 var(--lx-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-eyebrow); }
.lx-input { height: 52px; border: 1px solid var(--lx-border); padding: 0 16px; font: 300 15px var(--lx-sans); color: var(--lx-ink); background: #fff; width: 100%; border-radius: 0; outline: none; }
.lx-input:focus { border-color: var(--lx-ink); }
.lx-input.is-error { border-color: #C0392B; }
.lx-check { width: 16px; height: 16px; border: 1px solid #BDBDBD; }
.lx-check.is-checked { background: var(--lx-ink); border-color: var(--lx-ink); }

/* Oznaka (badge) na slici proizvoda */
.lx-badge { position: absolute; top: 14px; left: 14px; background: var(--lx-blue); color: var(--lx-ink); font: 500 10px/1 var(--lx-sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; }

/* Slika proizvoda (packshot na toploj pozadini) */
.lx-packshot { background: var(--lx-warm); padding: 20px; aspect-ratio: 1; overflow: hidden; }
.lx-packshot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Kontejneri */
.lx-container { max-width: var(--lx-page); margin: 0 auto; padding-left: var(--lx-gutter); padding-right: var(--lx-gutter); }
.lx-section { padding-top: var(--lx-section-y); padding-bottom: var(--lx-section-y); }
.lx-section--warm { background: var(--lx-warm); }
.lx-section--dark { background: var(--lx-ink); color: #fff; }
.lx-section--dark .lx-body, .lx-section--dark .lx-lead { color: var(--lx-on-dark); }