/*
 * Slotivo PR4d — BARBERSHOP KOSTUR 2 design tokens.
 *
 * Defines:
 *   1. Color, spacing, font CSS variables, scoped per STIL via the
 *      `data-slotivo-stil="S1|S2|S3|S4"` attribute on the root element.
 *   2. A focused set of utility classes (.bg-on-surface, .text-primary,
 *      …) that map to those variables, scoped under
 *      `body[class*='slotivo-kostur-b']` so they cannot leak into the
 *      rest of the app.
 *
 * Per-STIL theming: only the COLOR section changes between stilovi.
 * Spacing + fonts + utility shape stay identical.
 */

/* -------------------------------------------------------------------------
 * 1. KOSTUR 2 — STIL 1 (gentleman-classic) defaults
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) {
  /* surface scale (dark) */
  --surface-dim: #131313;
  --surface: #131313;
  --background: #131313;
  --surface-variant: #353535;
  --surface-bright: #393939;
  --surface-container: #1f2020;
  --surface-container-low: #1b1c1c;
  --surface-container-lowest: #0e0e0e;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353535;
  --surface-glass: rgba(19, 19, 19, 0.85);
  --surface-tint: #cec5c1;

  /* on-surface (text on dark) */
  --on-surface: #e4e2e1;
  --on-surface-variant: #d0c4be;
  --on-background: #e4e2e1;

  /* outlines */
  --outline: #998f8a;
  --outline-variant: #4d4541;

  /* primary (warm stone) */
  --primary: #cec5c1;
  --primary-fixed: #eae1dd;
  --primary-fixed-dim: #cec5c1;
  --on-primary: #342f2d;
  --on-primary-fixed: #1f1b19;
  --on-primary-fixed-variant: #4b4643;
  --primary-container: #1a1614;
  --on-primary-container: #867f7c;

  /* secondary (warm peach) */
  --secondary: #e9bdab;
  --on-secondary: #452a1e;
  --secondary-fixed: #ffdbcd;
  --on-secondary-fixed: #2d150b;
  --secondary-fixed-dim: #e9bdab;
  --on-secondary-fixed-variant: #5e4032;
  --secondary-container: #614234;
  --on-secondary-container: #daaf9e;

  /* tertiary (gold accent — used heavily) */
  --tertiary: #e9c176;
  --on-tertiary: #412d00;
  --tertiary-fixed: #ffdea5;
  --on-tertiary-fixed: #261900;
  --tertiary-fixed-dim: #e9c176;
  --on-tertiary-fixed-variant: #5d4201;
  --tertiary-container: #211500;
  --on-tertiary-container: #9d7b38;

  /* inverse */
  --inverse-surface: #e4e2e1;
  --inverse-on-surface: #303030;
  --inverse-primary: #635d5a;

  /* error */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
}

/* -------------------------------------------------------------------------
 * 1b. KOSTUR 2 — STIL 2 (gentleman-vintage)
 * Warm vintage palette with peach primary and gold tertiary accent.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] {
  --surface-dim: #14140e;
  --surface: #14140e;
  --background: #14140e;
  --surface-variant: #35352e;
  --surface-bright: #3a3933;
  --surface-container: #20201a;
  --surface-container-low: #1c1c16;
  --surface-container-lowest: #0e0f09;
  --surface-container-high: #2a2a24;
  --surface-container-highest: #35352e;
  --surface-glass: rgba(20, 20, 14, 0.9);
  --surface-tint: #eebbad;

  --on-surface: #e5e2d9;
  --on-surface-variant: #d5c3be;
  --on-background: #e5e2d9;

  --outline: #9d8d89;
  --outline-variant: #514441;

  --primary: #eebbad;
  --primary-fixed: #ffdbd1;
  --primary-fixed-dim: #eebbad;
  --on-primary: #48281f;
  --on-primary-fixed: #2f140b;
  --on-primary-fixed-variant: #623e33;
  --primary-container: #3d1f16;
  --on-primary-container: #b18477;

  --secondary: #ffb68c;
  --on-secondary: #532200;
  --secondary-fixed: #ffdbc9;
  --on-secondary-fixed: #321200;
  --secondary-fixed-dim: #ffb68c;
  --on-secondary-fixed-variant: #753401;
  --secondary-container: #753401;
  --on-secondary-container: #fb9f66;

  --tertiary: #e9c176;
  --on-tertiary: #412d00;
  --tertiary-fixed: #ffdea5;
  --on-tertiary-fixed: #261900;
  --tertiary-fixed-dim: #e9c176;
  --on-tertiary-fixed-variant: #5d4201;
  --tertiary-container: #352400;
  --on-tertiary-container: #ac8944;

  --inverse-surface: #e5e2d9;
  --inverse-on-surface: #31312a;
  --inverse-primary: #7c5549;

  --gold: #C5A059;
  --cognac: #7c4a2a;
  --mahogany: #2a1610;

  --gutter: 2rem;
  --stack-sm: 0.5rem;
  --stack-md: 1rem;
  --stack-lg: 2rem;
  --card-padding: 1.5rem;
  --section-padding: 4rem;
}

/* -------------------------------------------------------------------------
 * 1c. KOSTUR 2 — STIL 3 (leather-wood)
 * Same vintage base as S2 with deeper cognac secondary-container.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] {
  --surface-dim: #14140e;
  --surface: #14140e;
  --background: #160d09;
  --surface-variant: #35352e;
  --surface-bright: #3a3933;
  --surface-container: #20201a;
  --surface-container-low: #1c1c16;
  --surface-container-lowest: #0e0f09;
  --surface-container-high: #2a2a24;
  --surface-container-highest: #35352e;
  --surface-glass: rgba(20, 20, 14, 0.92);
  --surface-tint: #eebbad;

  --on-surface: #e5e2d9;
  --on-surface-variant: #d5c3be;
  --on-background: #e5e2d9;

  --outline: #9d8d89;
  --outline-variant: #514441;

  --primary: #eebbad;
  --primary-fixed: #ffdbd1;
  --primary-fixed-dim: #eebbad;
  --on-primary: #48281f;
  --on-primary-fixed: #2f140b;
  --on-primary-fixed-variant: #623e33;
  --primary-container: #3d1f16;
  --on-primary-container: #b18477;

  --secondary: #ffb68c;
  --on-secondary: #532200;
  --secondary-fixed: #ffdbc9;
  --on-secondary-fixed: #321200;
  --secondary-fixed-dim: #ffb68c;
  --on-secondary-fixed-variant: #753401;
  --secondary-container: #753401;
  --on-secondary-container: #fb9f66;

  --tertiary: #e9c176;
  --on-tertiary: #412d00;
  --tertiary-fixed: #ffdea5;
  --on-tertiary-fixed: #261900;
  --tertiary-fixed-dim: #e9c176;
  --on-tertiary-fixed-variant: #5d4201;
  --tertiary-container: #352400;
  --on-tertiary-container: #ac8944;

  --inverse-surface: #e5e2d9;
  --inverse-on-surface: #31312a;
  --inverse-primary: #7c5549;

  --gold: #C5A059;
  --cognac: #7c4a2a;
  --mahogany: #2a1610;

  --gutter: 2rem;
  --stack-sm: 0.5rem;
  --stack-md: 1rem;
  --stack-lg: 2rem;
  --card-padding: 1.5rem;
  --section-padding: 4rem;
}

/* -------------------------------------------------------------------------
 * 1d. KOSTUR 2 — STIL 4 (old-money-barber)
 * Light editorial palette with dark-green primary.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] {
  --gutter: 32px;
  --container-max: 1200px;
  --margin-mobile: 20px;
  --stack-sm: 0.5rem;
  --stack-md: 1rem;
  --stack-lg: 2rem;
  --card-padding: 1.5rem;
  --section-padding: 4rem;

  --surface-dim: #dbdad6;
  --surface: #faf9f5;
  --background: #faf9f5;
  --surface-variant: #e3e2df;
  --surface-bright: #faf9f5;
  --surface-container: #efeeea;
  --surface-container-low: #f4f4f0;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e9e8e4;
  --surface-container-highest: #e3e2df;
  --surface-glass: rgba(250, 249, 245, 0.92);
  --surface-tint: #506259;

  --on-surface: #1b1c1a;
  --on-surface-variant: #424844;
  --on-background: #1b1c1a;

  --outline: #737874;
  --outline-variant: #c2c8c3;

  --primary: #06160f;
  --primary-fixed: #d3e7db;
  --primary-fixed-dim: #b7cbbf;
  --on-primary: #ffffff;
  --on-primary-fixed: #0e1f17;
  --on-primary-fixed-variant: #394b42;
  --primary-container: #1a2b23;
  --on-primary-container: #809388;

  --secondary: #775a19;
  --on-secondary: #ffffff;
  --secondary-fixed: #ffdea5;
  --on-secondary-fixed: #261900;
  --secondary-fixed-dim: #e9c176;
  --on-secondary-fixed-variant: #5d4201;
  --secondary-container: #fed488;
  --on-secondary-container: #785a1a;

  --tertiary: #1e1005;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #fbddc7;
  --on-tertiary-fixed: #28180b;
  --tertiary-fixed-dim: #dec1ac;
  --on-tertiary-fixed-variant: #574333;
  --tertiary-container: #352416;
  --on-tertiary-container: #a38a77;

  --inverse-surface: #2f312e;
  --inverse-on-surface: #f2f1ed;
  --inverse-primary: #b7cbbf;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

/* -------------------------------------------------------------------------
 * 2. Spacing scale (shared by all stilovi in K2)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] {
  --margin-mobile: 16px;
  --margin-desktop: 64px;
  --section-padding: 64px;
  --container-max: 1280px;
  --gutter: 24px;
  --unit: 8px;
}

/* -------------------------------------------------------------------------
 * 3. Utility classes — background colors
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .bg-background        { background-color: var(--background); }
body[class*='slotivo-kostur-b'] .bg-surface           { background-color: var(--surface); }
body[class*='slotivo-kostur-b'] .bg-surface-dim       { background-color: var(--surface-dim); }
body[class*='slotivo-kostur-b'] .bg-surface-variant   { background-color: var(--surface-variant); }
body[class*='slotivo-kostur-b'] .bg-surface-bright    { background-color: var(--surface-bright); }
body[class*='slotivo-kostur-b'] .bg-surface-container { background-color: var(--surface-container); }
body[class*='slotivo-kostur-b'] .bg-surface-container-low     { background-color: var(--surface-container-low); }
body[class*='slotivo-kostur-b'] .bg-surface-container-lowest  { background-color: var(--surface-container-lowest); }
body[class*='slotivo-kostur-b'] .bg-surface-container-high    { background-color: var(--surface-container-high); }
body[class*='slotivo-kostur-b'] .bg-surface-container-highest { background-color: var(--surface-container-highest); }
body[class*='slotivo-kostur-b'] .bg-on-surface         { background-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .bg-on-surface-variant { background-color: var(--on-surface-variant); }
body[class*='slotivo-kostur-b'] .bg-on-background      { background-color: var(--on-background); }
body[class*='slotivo-kostur-b'] .bg-primary            { background-color: var(--primary); }
body[class*='slotivo-kostur-b'] .bg-primary-container  { background-color: var(--primary-container); }
body[class*='slotivo-kostur-b'] .bg-secondary          { background-color: var(--secondary); }
body[class*='slotivo-kostur-b'] .bg-secondary-container { background-color: var(--secondary-container); }
body[class*='slotivo-kostur-b'] .bg-tertiary           { background-color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .bg-tertiary-fixed-dim { background-color: var(--tertiary-fixed-dim); }
body[class*='slotivo-kostur-b'] .bg-tertiary-container { background-color: var(--tertiary-container); }
body[class*='slotivo-kostur-b'] .bg-outline           { background-color: var(--outline); }
body[class*='slotivo-kostur-b'] .bg-outline-variant   { background-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .bg-error             { background-color: var(--error); }

/* opacity-modifier helpers */
body[class*='slotivo-kostur-b'] .bg-background\/40     { background-color: color-mix(in srgb, var(--background) 40%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/50     { background-color: color-mix(in srgb, var(--background) 50%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/80     { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/90     { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/95     { background-color: color-mix(in srgb, var(--background) 95%, transparent); }
body[class*='slotivo-kostur-b'] .bg-surface-container\/80 { background-color: color-mix(in srgb, var(--surface-container) 80%, transparent); }
body[class*='slotivo-kostur-b'] .bg-primary\/10        { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .bg-primary\/90        { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
body[class*='slotivo-kostur-b'] .bg-tertiary\/20       { background-color: color-mix(in srgb, var(--tertiary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .bg-secondary\/90      { background-color: color-mix(in srgb, var(--secondary) 90%, transparent); }

body[class*='slotivo-kostur-b'] .hover\:bg-primary:hover            { background-color: var(--primary); }
body[class*='slotivo-kostur-b'] .hover\:bg-primary\/10:hover        { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .hover\:bg-primary\/90:hover        { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
body[class*='slotivo-kostur-b'] .hover\:bg-tertiary:hover           { background-color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .hover\:bg-tertiary-fixed-dim:hover { background-color: var(--tertiary-fixed-dim); }
body[class*='slotivo-kostur-b'] .hover\:bg-surface:hover            { background-color: var(--surface); }
body[class*='slotivo-kostur-b'] .hover\:bg-surface-container:hover  { background-color: var(--surface-container); }
body[class*='slotivo-kostur-b'] .hover\:bg-surface-container-high:hover    { background-color: var(--surface-container-high); }
body[class*='slotivo-kostur-b'] .hover\:bg-surface-container-highest:hover { background-color: var(--surface-container-highest); }
body[class*='slotivo-kostur-b'] .hover\:bg-outline-variant:hover    { background-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .hover\:bg-secondary\/90:hover      { background-color: color-mix(in srgb, var(--secondary) 90%, transparent); }
body[class*='slotivo-kostur-b'] .hover\:bg-surface-bright:hover    { background-color: var(--surface-bright); }
body[class*='slotivo-kostur-b'] .hover\:bg-tertiary-fixed-dim:hover { background-color: var(--tertiary-fixed-dim); }
body[class*='slotivo-kostur-b'] .hover\:bg-on-primary-fixed-variant:hover { background-color: var(--on-primary-fixed-variant); }

/* S2/S3 vintage accent utilities (gold / cognac / mahogany) */
body[class*='slotivo-kostur-b'] .text-gold              { color: var(--gold); }
body[class*='slotivo-kostur-b'] .bg-gold                 { background-color: var(--gold); }
body[class*='slotivo-kostur-b'] .bg-gold\/20             { background-color: color-mix(in srgb, var(--gold) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-gold            { border-color: var(--gold); }
body[class*='slotivo-kostur-b'] .bg-cognac              { background-color: var(--cognac); }
body[class*='slotivo-kostur-b'] .bg-mahogany            { background-color: var(--mahogany); }
body[class*='slotivo-kostur-b'] .text-cognac            { color: var(--cognac); }
body[class*='slotivo-kostur-b'] .hover\:text-gold:hover { color: var(--gold); }
body[class*='slotivo-kostur-b'] .hover\:border-gold:hover { border-color: var(--gold); }
body[class*='slotivo-kostur-b'] .hover\:bg-gold:hover   { background-color: var(--gold); }
body[class*='slotivo-kostur-b'] .bg-mahogany\/80        { background-color: color-mix(in srgb, var(--mahogany) 80%, transparent); }
body[class*='slotivo-kostur-b'] .bg-mahogany\/50        { background-color: color-mix(in srgb, var(--mahogany) 50%, transparent); }
body[class*='slotivo-kostur-b'] .border-surface-bright  { border-color: var(--surface-bright); }

body[class*='slotivo-kostur-b'] .focus\:ring-gold:focus {
  --tw-ring-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

body[class*='slotivo-kostur-b'] .from-cognac {
  --tw-gradient-from: var(--cognac);
  --tw-gradient-to: color-mix(in srgb, var(--cognac) 0%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body[class*='slotivo-kostur-b'] .via-gold {
  --tw-gradient-to: color-mix(in srgb, var(--gold) 0%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--gold), var(--tw-gradient-to);
}
body[class*='slotivo-kostur-b'] .to-cognac {
  --tw-gradient-to: var(--cognac);
}
body[class*='slotivo-kostur-b'] .from-mahogany {
  --tw-gradient-from: var(--mahogany);
  --tw-gradient-to: color-mix(in srgb, var(--mahogany) 0%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body[class*='slotivo-kostur-b'] .to-mahogany\/40 {
  --tw-gradient-to: color-mix(in srgb, var(--mahogany) 40%, transparent);
}

/* -------------------------------------------------------------------------
 * 4. Utility classes — text colors
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .text-on-surface          { color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .text-on-surface-variant  { color: var(--on-surface-variant); }
body[class*='slotivo-kostur-b'] .text-on-background       { color: var(--on-background); }
body[class*='slotivo-kostur-b'] .text-primary             { color: var(--primary); }
body[class*='slotivo-kostur-b'] .text-on-primary          { color: var(--on-primary); }
body[class*='slotivo-kostur-b'] .text-on-primary-container { color: var(--on-primary-container); }
body[class*='slotivo-kostur-b'] .text-secondary           { color: var(--secondary); }
body[class*='slotivo-kostur-b'] .text-on-secondary        { color: var(--on-secondary); }
body[class*='slotivo-kostur-b'] .text-on-secondary-container { color: var(--on-secondary-container); }
body[class*='slotivo-kostur-b'] .text-tertiary            { color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .text-on-tertiary         { color: var(--on-tertiary); }
body[class*='slotivo-kostur-b'] .text-on-tertiary-container { color: var(--on-tertiary-container); }
body[class*='slotivo-kostur-b'] .text-outline             { color: var(--outline); }
body[class*='slotivo-kostur-b'] .text-outline-variant     { color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .text-background          { color: var(--background); }
body[class*='slotivo-kostur-b'] .text-error               { color: var(--error); }
body[class*='slotivo-kostur-b'] .text-secondary-container { color: var(--secondary-container); }

body[class*='slotivo-kostur-b'] .text-on-surface-variant\/50 { color: color-mix(in srgb, var(--on-surface-variant) 50%, transparent); }

body[class*='slotivo-kostur-b'] .hover\:text-on-surface:hover     { color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .hover\:text-primary:hover        { color: var(--primary); }
body[class*='slotivo-kostur-b'] .hover\:text-on-primary:hover    { color: var(--on-primary); }
body[class*='slotivo-kostur-b'] .hover\:text-tertiary:hover       { color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .hover\:text-on-tertiary:hover    { color: var(--on-tertiary); }
body[class*='slotivo-kostur-b'] .hover\:text-outline:hover        { color: var(--outline); }
body[class*='slotivo-kostur-b'] .hover\:text-background:hover     { color: var(--background); }

body[class*='slotivo-kostur-b'] .placeholder\:text-outline-variant::placeholder {
  color: var(--outline-variant);
}

/* -------------------------------------------------------------------------
 * 5. Utility classes — borders
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .border-outline         { border-color: var(--outline); }
body[class*='slotivo-kostur-b'] .border-outline-variant { border-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .border-on-surface      { border-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .border-primary         { border-color: var(--primary); }
body[class*='slotivo-kostur-b'] .border-secondary       { border-color: var(--secondary); }
body[class*='slotivo-kostur-b'] .border-secondary-container { border-color: var(--secondary-container); }
body[class*='slotivo-kostur-b'] .border-tertiary        { border-color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .border-tertiary-container { border-color: var(--tertiary-container); }
body[class*='slotivo-kostur-b'] .border-background      { border-color: var(--background); }

body[class*='slotivo-kostur-b'] .border-outline-variant\/20 { border-color: color-mix(in srgb, var(--outline-variant) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-outline-variant\/30 { border-color: color-mix(in srgb, var(--outline-variant) 30%, transparent); }
body[class*='slotivo-kostur-b'] .border-outline-variant\/50 { border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/10         { border-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/20         { border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/30         { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/50         { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
body[class*='slotivo-kostur-b'] .border-tertiary\/20        { border-color: color-mix(in srgb, var(--tertiary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-tertiary\/30        { border-color: color-mix(in srgb, var(--tertiary) 30%, transparent); }
body[class*='slotivo-kostur-b'] .border-tertiary\/50        { border-color: color-mix(in srgb, var(--tertiary) 50%, transparent); }

body[class*='slotivo-kostur-b'] .hover\:border-outline:hover         { border-color: var(--outline); }
body[class*='slotivo-kostur-b'] .hover\:border-outline-variant:hover   { border-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .hover\:border-on-surface:hover      { border-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .hover\:border-primary:hover         { border-color: var(--primary); }
body[class*='slotivo-kostur-b'] .hover\:border-tertiary:hover        { border-color: var(--tertiary); }
body[class*='slotivo-kostur-b'] .hover\:border-secondary:hover       { border-color: var(--secondary); }

body[class*='slotivo-kostur-b'] .focus\:border-on-surface:focus   { border-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .focus\:border-primary:focus      { border-color: var(--primary); }
body[class*='slotivo-kostur-b'] .focus\:border-secondary:focus    { border-color: var(--secondary); }
body[class*='slotivo-kostur-b'] .focus\:border-tertiary:focus     { border-color: var(--tertiary); }

body[class*='slotivo-kostur-b'] .focus\:ring-tertiary:focus {
  --tw-ring-color: var(--tertiary);
  box-shadow: 0 0 0 1px var(--tertiary);
}

/* -------------------------------------------------------------------------
 * 6. Utility classes — selection / opacity
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .selection\:bg-tertiary ::selection,
body[class*='slotivo-kostur-b'].selection\:bg-tertiary ::selection {
  background-color: var(--tertiary);
}

body[class*='slotivo-kostur-b'] .selection\:text-on-tertiary ::selection,
body[class*='slotivo-kostur-b'].selection\:text-on-tertiary ::selection {
  color: var(--on-tertiary);
}

body[class*='slotivo-kostur-b'] .hover\:opacity-80:hover { opacity: 0.8; }
body[class*='slotivo-kostur-b'] .hover\:opacity-90:hover { opacity: 0.9; }

/* -------------------------------------------------------------------------
 * 7. Spacing utilities
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .px-gutter           { padding-left: var(--gutter); padding-right: var(--gutter); }
body[class*='slotivo-kostur-b'] .px-margin-mobile    { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
body[class*='slotivo-kostur-b'] .px-margin-desktop   { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
body[class*='slotivo-kostur-b'] .py-margin-desktop   { padding-top: var(--margin-desktop); padding-bottom: var(--margin-desktop); }
body[class*='slotivo-kostur-b'] .p-margin-desktop    { padding: var(--margin-desktop); }
body[class*='slotivo-kostur-b'] .max-w-container-max { max-width: var(--container-max); }

@media (min-width: 1024px) {
  body[class*='slotivo-kostur-b'] .lg\:px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

/* K2 sidebar offset utilities from source HTML (Tailwind CDN → token substitute) */
@media (min-width: 768px) {
  body[class*='slotivo-kostur-b'] .md\:ml-\[280px\] {
    margin-left: 280px;
  }
  body[class*='slotivo-kostur-b'] .md\:max-w-\[calc\(100\%-280px\)\] {
    max-width: calc(100% - 280px);
  }
}

/* K2 cookie banner — fixed in main column beside 280px sidebar (gentleman-classic HTML) */
body[class*='slotivo-kostur-b'] #cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body[class*='slotivo-kostur-b'] #cookie-banner {
    left: 280px;
    width: calc(100% - 280px);
    max-width: calc(100% - 280px);
    margin-left: 0;
  }
}

/* Cookie banner buttons — gentleman-classic HTML compact sizing (px-2 py-1 / px-4 py-2, text-xs) */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] #cookie-banner button {
  min-height: unset !important;
  min-width: unset !important;
  width: auto !important;
  max-width: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] #cookie-manage {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] #cookie-reject,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] #cookie-accept {
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

/* -------------------------------------------------------------------------
 * 8. Typography — font families & sizes
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .font-display-lg,
body[class*='slotivo-kostur-b'] .font-headline-lg,
body[class*='slotivo-kostur-b'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-b'] .font-title-md {
  font-family: 'Playfair Display', Georgia, serif;
}

body[class*='slotivo-kostur-b'] .font-body-md,
body[class*='slotivo-kostur-b'] .font-body-lg,
body[class*='slotivo-kostur-b'] .font-label-sm {
  font-family: 'Manrope', system-ui, sans-serif;
}

/* Source HTML applies layout utilities on <body> itself — not only descendants */
body[class*='slotivo-kostur-b'].bg-background {
  background-color: var(--background) !important;
}
body[class*='slotivo-kostur-b'].text-on-background {
  color: var(--on-background) !important;
}
body[class*='slotivo-kostur-b'].font-body-md {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

body[class*='slotivo-kostur-b'] .text-display-lg          { font-size: 56px; line-height: 64px; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-b'] .text-headline-lg         { font-size: 32px; line-height: 40px; font-weight: 600; }
body[class*='slotivo-kostur-b'] .text-headline-lg-mobile  { font-size: 28px; line-height: 36px; font-weight: 600; }
body[class*='slotivo-kostur-b'] .text-title-md             { font-size: 20px; line-height: 28px; font-weight: 500; }
body[class*='slotivo-kostur-b'] .text-body-lg             { font-size: 18px; line-height: 28px; font-weight: 400; }
body[class*='slotivo-kostur-b'] .text-body-md             { font-size: 16px; line-height: 24px; font-weight: 400; }
body[class*='slotivo-kostur-b'] .text-label-sm            { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 600; }

/* -------------------------------------------------------------------------
 * 9. Material Symbols (used in HTML for icons)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Source HTML uses Tailwind text-* sizes on icons and labels outside token scale */
body[class*='slotivo-kostur-b'] .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
body[class*='slotivo-kostur-b'] .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
body[class*='slotivo-kostur-b'] .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
body[class*='slotivo-kostur-b'] .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

body[class*='slotivo-kostur-b'] .material-symbols-outlined.text-xs {
  font-size: 0.75rem;
}
body[class*='slotivo-kostur-b'] .material-symbols-outlined.text-sm {
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * 10. Extra utilities used in K2 HTML markup
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .debossed-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

body[class*='slotivo-kostur-b'] .custom-select,
body[class*='slotivo-kostur-b'] select.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  padding-right: 1.75rem;
}

body[class*='slotivo-kostur-b'] select.appearance-none::-ms-expand {
  display: none;
}

/* Checkbox accent — Tailwind CDN forms plugin maps text-* on checkboxes to accent-color */
body[class*='slotivo-kostur-b'] input[type='checkbox'].text-tertiary {
  accent-color: var(--tertiary);
}

body[class*='slotivo-kostur-b'] input[type='checkbox'].text-secondary-container {
  accent-color: var(--secondary-container);
}

body[class*='slotivo-kostur-b'] input[type='checkbox'].text-primary {
  accent-color: var(--primary);
}

body[class*='slotivo-kostur-b'] input[type='checkbox'].text-primary-container {
  accent-color: var(--primary-container);
}

body[class*='slotivo-kostur-b'] input[type='checkbox'].text-cognac {
  accent-color: var(--cognac);
}

body[class*='slotivo-kostur-b'] input[type='checkbox'].text-secondary {
  accent-color: var(--secondary);
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-tertiary {
  accent-color: var(--tertiary) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-secondary-container {
  accent-color: var(--secondary-container) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-primary {
  accent-color: var(--primary) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-primary-container {
  accent-color: var(--primary-container) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-cognac {
  accent-color: var(--cognac) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input[type='checkbox'].text-secondary {
  accent-color: var(--secondary) !important;
}

/* Custom scrollbar */
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar         { width: 8px; }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-track   { background: var(--surface-dim); }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-thumb   { background: var(--outline-variant); border-radius: 0; }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-thumb:hover { background: var(--tertiary); }

/* S4 light-theme debossed adjustment */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .debossed-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* S3 leather-wood texture + panel utilities (from leather-wood-landing.html) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .texture-overlay {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .debossed-inner {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  background-color: #1e0e0a !important;
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .leather-panel {
  background-image: radial-gradient(circle at 50% 0%, #3e1e15 0%, #22100b 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.5);
  border-color: #5c3523 !important;
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .wood-accent {
  background: linear-gradient(90deg, #6b3e21, #4a2814, #6b3e21);
  border-color: #8a5735 !important;
}

/* S2 vintage texture overlay (gentleman-vintage-landing.html) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .texture-overlay {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.03;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* S2/S3 spacing utilities (gentleman-vintage / leather-wood HTML) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .py-section_padding,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .py-section_padding {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .px-section_padding,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .px-section_padding {
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .p-section_padding,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .p-section_padding {
  padding: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .py-stack_lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .py-stack_lg {
  padding-top: var(--stack-lg);
  padding-bottom: var(--stack-lg);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .px-stack_md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .px-stack_md {
  padding-left: var(--stack-md);
  padding-right: var(--stack-md);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .gap-stack_lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .gap-stack_lg {
  gap: var(--stack-lg);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .gap-stack_md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .gap-stack_md {
  gap: var(--stack-md);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .p-card_padding,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .p-card_padding {
  padding: var(--card-padding);
}
@media (min-width: 1024px) {
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .lg\:px-section_padding,
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .lg\:px-section_padding {
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
  }
}

/* S2/S3 typography (gentleman-vintage / leather-wood HTML) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-label-caps,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-label-caps {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-price-display,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-price-display {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-display-lg {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-lg {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-md {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-lg-mobile,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-lg-mobile {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-body-md {
  line-height: 1.6;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-label-caps,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-label-caps {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-price-display,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-price-display {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

/* S4 old-money texture overlay (old-money-barber-landing.html) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .texture-overlay {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.03;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* S4 spacing utilities (old-money-barber-landing.html) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .py-section_padding {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .px-section_padding {
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .p-section_padding {
  padding: var(--section-padding);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .py-stack_lg {
  padding-top: var(--stack-lg);
  padding-bottom: var(--stack-lg);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .px-stack_md {
  padding-left: var(--stack-md);
  padding-right: var(--stack-md);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .gap-stack_lg {
  gap: var(--stack-lg);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .gap-stack_md {
  gap: var(--stack-md);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .p-card_padding {
  padding: var(--card-padding);
}
@media (min-width: 1024px) {
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .lg\:px-section_padding {
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
  }
}

/* S4 typography (old-money-barber-landing.html) — match empty .font-body-md in source HTML */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-md {
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'].font-body-md {
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-label-caps {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-headline-sm,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-display-lg-mobile {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-display-lg {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-display-lg-mobile {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-md {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 600;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-sm {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-label-caps {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: 600;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-secondary {
  color: var(--secondary);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-outline {
  color: var(--outline);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .bg-outline {
  background-color: var(--outline);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .border-outline {
  border-color: var(--outline);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .hover\:text-secondary:hover {
  color: var(--secondary);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .hover\:border-secondary:hover {
  border-color: var(--secondary);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .bg-secondary\/20 {
  background-color: color-mix(in srgb, var(--secondary) 20%, transparent);
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .from-primary\/80 {
  --tw-gradient-from: color-mix(in srgb, var(--primary) 80%, transparent);
  --tw-gradient-to: color-mix(in srgb, var(--primary) 0%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* -------------------------------------------------------------------------
 * Template shield — platform globals-post.css must not override barbershop tokens
 * ------------------------------------------------------------------------- */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] {
  color: var(--on-background) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* S4 HTML: tailwind font-body-md utility is empty (fontFamily/fontSize name clash) → system sans */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] {
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'].font-sans {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'].text-on-background {
  color: var(--on-background) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-surface {
  color: var(--on-surface) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-surface-variant {
  color: var(--on-surface-variant) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-background {
  color: var(--on-background) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-primary {
  color: var(--primary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-primary {
  color: var(--on-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-secondary {
  color: var(--secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-secondary {
  color: var(--on-secondary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-tertiary {
  color: var(--tertiary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-on-tertiary {
  color: var(--on-tertiary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-outline {
  color: var(--outline) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-outline-variant {
  color: var(--outline-variant) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-error {
  color: var(--error) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* text-xs / text-sm are font-size in HTML — color comes from companion utilities or inherit */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-xs,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-sm,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .text-xl {
  -webkit-text-fill-color: currentColor !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] label {
  font-weight: inherit;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input:not([type='checkbox']):not([type='radio']),
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] textarea {
  color: var(--on-surface) !important;
  caret-color: var(--on-surface) !important;
  -webkit-text-fill-color: var(--on-surface) !important;
  font-weight: inherit !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select {
  font-weight: inherit !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface-container {
  background-color: var(--surface-container) !important;
  border: none !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface {
  background-color: var(--surface) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface-container:hover,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface-container:focus,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface-container:focus-visible,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface:hover,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface:focus,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select.bg-surface:focus-visible {
  outline: none !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] select option {
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] label.text-on-surface-variant {
  color: var(--on-surface-variant) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] input::placeholder,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] textarea::placeholder {
  color: var(--outline-variant) !important;
  opacity: 1 !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-display-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-headline-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-headline-lg-mobile,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-title-md {
  font-family: 'Playfair Display', Georgia, serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-body-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-body-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'] .font-label-sm {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-label-caps,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-label-caps {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-lg-mobile,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-display-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-price-display,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-lg-mobile,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-display-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-price-display {
  font-family: 'Playfair Display', Georgia, serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-md,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-lg,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] input,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] select,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] textarea {
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-label-caps {
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
}