/* colors.css */
/* ============================================================
   Vlamix — Color tokens
   Signature: warm "LED glow" gold (#FEC227) on deep charcoal,
   sampled from the brand logo. Light surfaces for commerce,
   dark showcase surfaces for the glowing-mirror hero motif.
   ============================================================ */

:root {
  /* --- Brand gold (the LED glow) --- */
  --gold-50:  #FFF8E4;
  --gold-100: #FFEFBD;
  --gold-200: #FFE38A;
  --gold-300: #FFD75A;
  --gold-400: #FEC227;  /* core brand gold (logo) */
  --gold-500: #F2B113;
  --gold-600: #D9990A;
  --gold-700: #B07A0C;
  --gold-800: #845B10;
  --gold-900: #5A3E0E;

  /* --- Ink / warm neutral charcoal (dark showcase) --- */
  --ink-950: #121113;  /* deepest background */
  --ink-900: #19181B;
  --ink-850: #201E22;
  --ink-800: #2A282E;
  --ink-700: #3A373F;
  --ink-600: #524E58;
  --ink-500: #726D78;

  /* --- Warm greys (light commerce surfaces) --- */
  --grey-50:  #FCFBFB;  /* brand white */
  --grey-100: #F6F4F1;
  --grey-200: #ECE8E2;
  --grey-300: #DED8CF;
  --grey-400: #BDB6AB;
  --grey-500: #8E887E;
  --grey-600: #645F58;
  --grey-700: #45413C;
  --grey-800: #2C2925;

  /* --- Pure --- */
  --white: #FFFFFF;
  --black: #000000;

  /* --- Semantic status --- */
  --success-500: #2E9E5B;
  --success-50:  #E7F6ED;
  --danger-500:  #C0392B;
  --danger-50:   #FBEBEB;
  --info-500:    #3A7BD5;
  --info-50:     #EAF1FB;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in components
     =========================================================== */

  /* Brand */
  --brand:            var(--gold-400);
  --brand-strong:     var(--gold-500);
  --brand-deep:       var(--gold-600);
  --brand-soft:       var(--gold-100);
  --brand-tint:       var(--gold-50);
  --on-brand:         var(--ink-950);   /* text on gold */

  /* Light theme surfaces (default / commerce) */
  --surface-page:     var(--grey-100);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--grey-200);
  --surface-inverse:  var(--ink-950);

  /* Text */
  --text-strong:      var(--grey-800);
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-600);
  --text-faint:       var(--grey-500);
  --text-on-dark:     var(--grey-50);
  --text-on-dark-muted: #ADA79C;
  --text-inverse:     var(--grey-50);

  /* Lines & borders */
  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--grey-400);
  --border-on-dark:   rgba(255,255,255,0.12);

  /* Accents on dark */
  --hairline-gold:    rgba(254,194,39,0.35);

  /* Prices / sale */
  --price:            var(--grey-800);
  --price-sale:       var(--danger-500);
}

/* ===========================================================
   Dark showcase scope — apply .vlamix-dark to a section to
   flip surfaces to the glowing-mirror hero treatment.
   =========================================================== */
.vlamix-dark {
  --surface-page:     var(--ink-950);
  --surface-card:     var(--ink-850);
  --surface-raised:   var(--ink-800);
  --surface-sunken:   var(--ink-900);
  --surface-inverse:  var(--grey-50);

  --text-strong:      var(--grey-50);
  --text-body:        #D7D2CA;
  --text-muted:       #ADA79C;
  --text-faint:       #837E76;
  --text-inverse:     var(--grey-800);

  --border-subtle:    rgba(255,255,255,0.08);
  --border-default:   rgba(255,255,255,0.14);
  --border-strong:    rgba(255,255,255,0.24);
}

/* typography.css */
/* ============================================================
   Vlamix — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-2xs:  0.75rem;   /* 12 — micro labels */
  --fs-xs:   0.8125rem; /* 13 */
  --fs-sm:   0.9375rem; /* 15 */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — lead */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */
  --fs-5xl:  4.75rem;   /* 76 — hero display */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2;  /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.7;  /* @kind other */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind other */
  --ls-tight:   -0.015em; /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-wide:    0.04em;   /* @kind other */
  --ls-eyebrow: 0.18em;   /* @kind other */

  /* Semantic roles */
  --text-hero:        var(--fw-bold)     var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-display:     var(--fw-bold)     var(--fs-3xl)/var(--lh-snug)  var(--font-display);
  --text-heading:     var(--fw-semibold) var(--fs-2xl)/var(--lh-snug)  var(--font-display);
  --text-subheading:  var(--fw-semibold) var(--fs-xl)/var(--lh-snug)   var(--font-display);
  --text-title:       var(--fw-semibold) var(--fs-lg)/var(--lh-snug)   var(--font-display);
  --text-lead:        var(--fw-regular)  var(--fs-md)/var(--lh-relaxed) var(--font-body);
  --text-copy:        var(--fw-regular)  var(--fs-base)/var(--lh-normal) var(--font-body);
  --text-small:       var(--fw-regular)  var(--fs-sm)/var(--lh-normal) var(--font-body);
}

/* spacing.css */
/* ============================================================
   Vlamix — Spacing, radii, shadows, glows, borders, motion
   The signature visual is the LED HALO GLOW — a soft gold/warm
   light cast (see --glow-* tokens) used behind featured mirrors,
   primary CTAs and hero imagery.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5.5rem;   /* 88 */
  --space-11: 7.5rem;   /* 120 — section rhythm */

  /* --- Radii (mirrors are soft rectangles, pills, circles) --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Borders --- */
  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-thick:    2px;

  /* --- Ambient shadows (soft, warm-neutral) --- */
  --shadow-xs:  0 1px 2px rgba(28,24,18,0.06);
  --shadow-sm:  0 2px 6px rgba(28,24,18,0.07);
  --shadow-md:  0 8px 22px -8px rgba(28,24,18,0.16);
  --shadow-lg:  0 18px 44px -14px rgba(28,24,18,0.22);
  --shadow-xl:  0 32px 70px -24px rgba(28,24,18,0.28);

  /* --- LED HALO GLOW — the brand signature --- */
  /* warm gold light bleed, used behind product/hero imagery */
  --glow-gold-sm:  0 0 24px rgba(254,194,39,0.30);
  --glow-gold-md:  0 0 48px rgba(254,194,39,0.38), 0 0 12px rgba(255,226,48,0.25);
  --glow-gold-lg:  0 0 90px rgba(254,194,39,0.45), 0 0 28px rgba(255,226,48,0.30);
  /* cool LED option (some mirrors run cool-white) */
  --glow-cool-md:  0 0 48px rgba(186,214,255,0.35), 0 0 14px rgba(255,255,255,0.22);
  /* focus ring */
  --ring-gold:     0 0 0 3px rgba(254,194,39,0.45);

  /* --- Gradients --- */
  --grad-gold:     linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 55%, var(--gold-500) 100%);
  --grad-dark:     linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  /* radial halo placed behind a mirror on dark surfaces */
  --halo-radial:   radial-gradient(60% 60% at 50% 45%, rgba(254,194,39,0.28) 0%, rgba(254,194,39,0.10) 40%, rgba(254,194,39,0) 72%); /* @kind other */

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* --- Layout --- */
  --container:     1200px; /* @kind other */
  --container-wide:1360px; /* @kind other */
  --gutter:        clamp(1rem, 4vw, 3rem); /* @kind other */
}

/* base.css */
/* ============================================================
   Vlamix — Base layer (element defaults built on tokens)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--text-copy);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

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

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

::selection { background: var(--gold-200); color: var(--ink-950); }

/* Eyebrow / kicker — uppercase tracked label used across the brand */
.vlamix-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-800); /* accessible gold on light bg (brand-deep failed WCAG AA) */
}

/* Section heading dot — brand uses a period after headings ("Ogledala po meri.") */
.vlamix-dot::after { content: "."; color: var(--brand); }

/* ds-components.css */

  .vlx-price{ display:inline-flex; align-items:baseline; gap:.5em; font-family:var(--font-display); }
  .vlx-price__now{ font-weight:var(--fw-bold); color:var(--price); letter-spacing:var(--ls-tight); }
  .vlx-price--sale .vlx-price__now{ color:var(--price-sale); }
  .vlx-price__was{ font-size:.7em; font-weight:var(--fw-medium); color:var(--grey-600); text-decoration:line-through; }
  .vlx-price__cur{ font-size:.62em; font-weight:var(--fw-semibold); color:var(--text-muted); letter-spacing:.02em; }
  .vlx-price--sm .vlx-price__now{ font-size:var(--fs-md); }
  .vlx-price--md .vlx-price__now{ font-size:var(--fs-xl); }
  .vlx-price--lg .vlx-price__now{ font-size:var(--fs-2xl); }


  .vlx-rating{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body); }
  .vlx-rating__stars{ display:inline-flex; gap:.08em; color:var(--brand); }
  .vlx-rating__stars svg{ width:1em; height:1em; }
  .vlx-rating--lg{ font-size:var(--fs-lg); }
  .vlx-rating__count{ font-size:.7em; color:var(--text-muted); font-weight:var(--fw-medium); }


  .vlx-step{ display:flex; flex-direction:column; gap:var(--space-3); font-family:var(--font-body); }
  .vlx-step__num{
    font-family:var(--font-display); font-weight:var(--fw-bold);
    font-size:var(--fs-2xs); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
    color:var(--brand-deep); display:inline-flex; align-items:center; gap:.6em;
  }
  .vlx-step__num::before{ content:""; width:1.6em; height:var(--border-thick); background:var(--brand); display:inline-block; }
  .vlx-step__ring{
    width:3.4em; height:3.4em; border-radius:var(--radius-circle);
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-card); border:var(--border-thin) solid var(--hairline-gold);
    color:var(--brand); box-shadow:var(--glow-gold-sm);
  }
  .vlx-step__ring svg{ width:1.5em; height:1.5em; }
  .vlx-step__title{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-lg); color:var(--text-strong); }
  .vlx-step__desc{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.6; max-width:34ch; }


  .vlx-badge{
    display:inline-flex; align-items:center; gap:.4em;
    font-family:var(--font-body); font-weight:var(--fw-bold);
    font-size:var(--fs-2xs); letter-spacing:.04em; line-height:1;
    padding:.45em .7em; border-radius:var(--radius-pill); white-space:nowrap;
  }
  .vlx-badge--new{ background:var(--ink-950); color:var(--brand); }
  .vlx-badge--sale{ background:var(--danger-500); color:#fff; }
  .vlx-badge--discount{ background:var(--brand); color:var(--on-brand); box-shadow:var(--glow-gold-sm); }
  .vlx-badge--special{ background:var(--gold-100); color:var(--gold-800); }
  .vlx-badge--neutral{ background:var(--surface-sunken); color:var(--text-muted); }
  .vlx-badge--soft{ background:var(--success-50); color:var(--success-500); }
  .vlx-badge__star{ font-size:.85em; }


  .vlx-product{
    position:relative; display:flex; flex-direction:column;
    background:var(--surface-card); border:var(--border-hairline) solid var(--border-subtle);
    border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; font-family:var(--font-body);
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .vlx-product:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
  .vlx-product__media{
    position:relative; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
    background:var(--grad-dark); overflow:hidden;
  }
  .vlx-product__halo{ position:absolute; inset:8% 18%; background:var(--halo-radial); opacity:.65;
    transition:opacity var(--dur-slow) var(--ease-out); }
  .vlx-product:hover .vlx-product__halo{ opacity:1; }
  .vlx-product__img{ position:relative; width:62%; height:78%; object-fit:cover;
    border-radius:var(--radius-xl); box-shadow:var(--glow-gold-md); }
  .vlx-product__img--ph{ background:linear-gradient(160deg,#3a3940,#222127); }
  .vlx-product__badges{ position:absolute; top:var(--space-3); left:var(--space-3); display:flex; gap:.4em; flex-wrap:wrap; z-index:2; }
  .vlx-product__body{ display:flex; flex-direction:column; gap:.5em; padding:var(--space-4) var(--space-4) var(--space-5); }
  .vlx-product__name{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-md); color:var(--text-strong); }
  .vlx-product__meta{ font-size:var(--fs-xs); color:var(--text-faint); }
  .vlx-product__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.3em; }


  .vlx-btn{
    --_bg:var(--brand); --_fg:var(--on-brand); --_bd:transparent; --_glow:none;
    display:inline-flex; align-items:center; justify-content:center; gap:.55em;
    font-family:var(--font-body); font-weight:var(--fw-semibold); letter-spacing:.005em;
    border:var(--border-thin) solid var(--_bd); border-radius:var(--radius-pill);
    background:var(--_bg); color:var(--_fg); cursor:pointer; white-space:nowrap;
    text-decoration:none; box-shadow:var(--_glow);
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
               background var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  .vlx-btn:hover{ filter:brightness(1.04); }
  .vlx-btn:active{ transform:translateY(1px) scale(.985); }
  .vlx-btn:focus-visible{ outline:none; box-shadow:var(--ring-gold); }
  .vlx-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; filter:none; }
  /* sizes */
  .vlx-btn--sm{ font-size:var(--fs-sm); padding:.5em 1.1em; }
  .vlx-btn--md{ font-size:var(--fs-base); padding:.7em 1.5em; }
  .vlx-btn--lg{ font-size:var(--fs-md); padding:.85em 2em; }
  /* variants */
  .vlx-btn--primary{ --_bg:var(--brand); --_fg:var(--on-brand); --_glow:var(--glow-gold-sm); }
  .vlx-btn--primary:hover{ --_glow:var(--glow-gold-md); }
  .vlx-btn--secondary{ --_bg:transparent; --_fg:var(--text-strong); --_bd:var(--border-strong); }
  .vlx-btn--secondary:hover{ --_bg:var(--surface-sunken); filter:none; }
  .vlx-btn--dark{ --_bg:var(--ink-950); --_fg:var(--grey-50); }
  .vlx-btn--ghost{ --_bg:transparent; --_fg:var(--brand-deep); --_bd:transparent; }
  .vlx-btn--ghost:hover{ --_bg:var(--brand-tint); filter:none; }
  .vlx-btn--block{ display:flex; width:100%; }
  .vlx-btn__icon{ display:inline-flex; width:1.15em; height:1.15em; }
  .vlx-btn__icon svg{ width:100%; height:100%; }


  .vlx-card{
    background:var(--surface-card); border:var(--border-hairline) solid var(--border-subtle);
    border-radius:var(--radius-lg); overflow:hidden;
    transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .vlx-card--flat{ box-shadow:none; }
  .vlx-card--raised{ box-shadow:var(--shadow-md); border-color:transparent; }
  .vlx-card--glow{ box-shadow:var(--shadow-lg); border-color:transparent; }
  .vlx-card--interactive{ cursor:pointer; }
  .vlx-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
  .vlx-card__body{ padding:var(--space-5); }


  .vlx-field{ display:flex; flex-direction:column; gap:.4em; font-family:var(--font-body); }
  .vlx-field__label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
  .vlx-field__hint{ font-size:var(--fs-xs); color:var(--text-faint); }
  .vlx-field__error{ font-size:var(--fs-xs); color:var(--danger-500); font-weight:var(--fw-medium); }
  .vlx-input{
    width:100%; font:var(--text-copy); color:var(--text-strong);
    background:var(--surface-card); border:var(--border-thin) solid var(--border-default);
    border-radius:var(--radius-md); padding:.7em .9em;
    transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .vlx-input::placeholder{ color:var(--text-faint); }
  .vlx-input:hover{ border-color:var(--border-strong); }
  .vlx-input:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring-gold); }
  .vlx-input[aria-invalid="true"]{ border-color:var(--danger-500); }
  .vlx-input[disabled]{ background:var(--surface-sunken); opacity:.6; cursor:not-allowed; }
  textarea.vlx-input{ resize:vertical; min-height:5.5em; }


  .vlx-select{ position:relative; display:flex; flex-direction:column; gap:.4em; font-family:var(--font-body); }
  .vlx-select__label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
  .vlx-select__wrap{ position:relative; }
  .vlx-select select{
    appearance:none; width:100%; font:var(--text-copy); color:var(--text-strong);
    background:var(--surface-card); border:var(--border-thin) solid var(--border-default);
    border-radius:var(--radius-md); padding:.7em 2.4em .7em .9em; cursor:pointer;
    transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .vlx-select select:hover{ border-color:var(--border-strong); }
  .vlx-select select:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring-gold); }
  .vlx-select__chevron{ position:absolute; right:.85em; top:50%; transform:translateY(-50%);
    width:1.1em; height:1.1em; pointer-events:none; color:var(--text-muted); }
/* kit.css */
/* ============================================================
   Vlamix website UI kit — layout & component styling
   (built on the design-system tokens in ../../styles.css)
   ============================================================ */

.vk-app { background: var(--surface-page); min-height: 100vh; }
.vk-container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Mirror art primitive (placeholder imagery) ---------- */
.vk-mirror { position: relative; display: flex; align-items: center; justify-content: center; }
.vk-mirror__halo { position: absolute; inset: -14%; background: var(--halo-radial); border-radius: var(--radius-circle); }
.vk-mirror__glass {
  position: relative; border-radius: var(--radius-2xl);
  background: linear-gradient(155deg, #45434b 0%, #2a2930 55%, #201f25 100%);
  box-shadow: var(--glow-gold-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 24px rgba(255,255,255,.06);
  width: 100%; height: 100%;
}
.vk-mirror--tall   { width: 220px; height: 300px; }
.vk-mirror--round  { width: 210px; height: 210px; }
.vk-mirror--round .vk-mirror__glass { border-radius: var(--radius-circle); }
.vk-mirror--ellipse { width: 220px; height: 300px; }
.vk-mirror--ellipse .vk-mirror__glass { border-radius: 50% / 42%; }
.is-cool .vk-mirror__glass { box-shadow: var(--glow-cool-md), inset 0 0 0 1px rgba(255,255,255,.10); }
.is-cool .vk-pdp__halo { background: radial-gradient(60% 60% at 50% 45%, rgba(186,214,255,.30), rgba(186,214,255,0) 72%); }

/* ---------- Header ---------- */
.vk-header { position: sticky; top: 0; z-index: 40; background: var(--ink-950); }
.vk-mobile-nav.is-open { background: var(--ink-950); }
.vk-topbar { background: #0d0c0e; border-bottom: 1px solid var(--border-on-dark); font-size: var(--fs-xs); }
.vk-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 38px; color: var(--text-on-dark-muted); gap: var(--space-3); }
.vk-topbar__inner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-topbar a { color: var(--brand); font-weight: var(--fw-semibold); }
.vk-topbar__social { display: flex; gap: var(--space-4); font-size: 15px; }
.vk-topbar__social a { color: var(--text-on-dark-muted); display: inline-flex; }
.vk-topbar__social a:hover { color: var(--brand); }

.vk-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 76px; flex-wrap: wrap; }
.vk-logo img { height: 42px; }
.vk-nav { display: flex; gap: var(--space-5); margin-left: auto; }
.vk-nav a { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-on-dark-muted); transition: color var(--dur-base) var(--ease-out); }
.vk-nav a:hover, .vk-nav a.is-active { color: var(--grey-50); }
.vk-header__actions { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-2); }
.vk-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark); background: transparent; color: var(--grey-50); font-size: 19px; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.vk-iconbtn:hover { background: rgba(255,255,255,.08); }
.vk-cartdot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font: var(--fw-bold) 11px/18px var(--font-body); text-align: center; }

/* mobile nav toggle + dropdown */
.vk-mobile-toggle { display: none; }
.vk-mobile-nav { display: none; }
@media (max-width: 940px) {
  .vk-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark); background: transparent; color: var(--grey-50); font-size: 19px; cursor: pointer; }
  .vk-mobile-toggle:hover { background: rgba(255,255,255,.08); }
  .vk-header__actions .vk-btn-hide-mobile { display: none; }
  .vk-mobile-nav.is-open { display: flex; flex-direction: column; flex-basis: 100%; padding: var(--space-2) 0 var(--space-5); border-top: 1px solid var(--border-on-dark); }
  .vk-mobile-nav a { padding: var(--space-3) 0; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-on-dark-muted); }
  .vk-mobile-nav a.is-active { color: var(--grey-50); }
}

/* ---------- Hero ---------- */
.vk-hero { position: relative; overflow: hidden; background: var(--grad-dark); }
.vk-hero__glow { position: absolute; top: -20%; right: -5%; width: 60%; height: 120%; background: radial-gradient(circle at 60% 40%, rgba(254,194,39,.16), rgba(254,194,39,0) 60%); pointer-events: none; }
.vk-hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-9); align-items: center; padding-block: var(--space-10); }
.vk-hero__title { font-size: clamp(2rem, 4vw + 1.2rem, var(--fs-4xl)); font-weight: var(--fw-bold); color: var(--grey-50); letter-spacing: var(--ls-tighter); line-height: 1.06; margin: var(--space-4) 0 var(--space-5); }
.vk-hero__lead { font-size: var(--fs-md); color: var(--text-on-dark-muted); max-width: 46ch; line-height: 1.65; }
.vk-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* countdown */
.vk-cd { margin-top: var(--space-7); }
.vk-cd__title { display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--space-3); }
.vk-cd__cells { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vk-cd__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: var(--space-3) var(--space-2); background: rgba(255,255,255,.04); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); }
.vk-cd__num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--brand); font-variant-numeric: tabular-nums; }
.vk-cd__lab { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.vk-cd__sep { color: var(--ink-600); font-size: var(--fs-lg); }

.vk-hero__art { display: flex; gap: var(--space-5); align-items: center; justify-content: center; }
.vk-hero__art .vk-mirror--round { align-self: flex-end; }

/* ---------- Benefits ---------- */
.vk-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: calc(-1 * var(--space-8)); position: relative; z-index: 5; }
.vk-benefit { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.vk-benefit__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-deep); font-size: 22px; }
.vk-benefit__title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 4px; }
.vk-benefit__body { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }

/* ---------- Generic section ---------- */
.vk-section { padding-block: var(--space-11) var(--space-9); }
.vk-sechead { text-align: center; max-width: 56ch; margin: 0 auto var(--space-8); }
.vk-sechead__title { font-size: clamp(1.75rem, 3vw + 1rem, var(--fs-3xl)); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.vk-sechead__sub { font-size: var(--fs-md); color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; }
.vk-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5); }
.vk-section__foot { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ---------- Process (dark) ---------- */
.vk-process { background: var(--grad-dark); padding-block: var(--space-11); }
.vk-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-7); }

/* ---------- Footer ---------- */
.vk-footer { background: var(--ink-950); padding-top: var(--space-9); }
.vk-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-8); }
.vk-footer__brand img { height: 40px; margin-bottom: var(--space-4); }
.vk-footer__brand p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 36ch; }
.vk-footer__contact { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); color: var(--grey-50); font-size: var(--fs-sm); }
.vk-footer__contact span { display: inline-flex; align-items: center; gap: var(--space-2); }
.vk-footer__contact svg { color: var(--brand); }
.vk-footer__col h4 { color: var(--grey-50); font-size: var(--fs-sm); margin-bottom: var(--space-4); font-family: var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.vk-footer__col a { display: block; color: var(--text-on-dark-muted); font-size: var(--fs-sm); padding: 5px 0; }
.vk-footer__col a:hover { color: var(--brand); }
.vk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-5); border-top: 1px solid var(--border-on-dark); color: var(--text-on-dark-muted); font-size: var(--fs-xs); }
.vk-footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.vk-footer__legal a { color: var(--text-on-dark-muted); }
.vk-footer__legal a:hover { color: var(--brand); text-decoration: underline; }
.vk-footer__social { display: flex; gap: var(--space-4); font-size: 17px; }
.vk-footer__social a { color: var(--text-on-dark-muted); }
.vk-footer__social a:hover { color: var(--brand); }
@media (max-width: 560px) {
	.vk-footer__bottom { justify-content: center; text-align: center; }
}

/* ---------- Product detail page ---------- */
.vk-pdp { padding-block: var(--space-6) var(--space-11); }
.vk-back { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; cursor: pointer; color: var(--text-muted); font: var(--fw-semibold) var(--fs-sm)/1 var(--font-body); padding: var(--space-4) 0; }
.vk-back:hover { color: var(--brand-deep); }
.vk-pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.vk-pdp__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); background: var(--grad-dark); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vk-pdp__halo { position: absolute; inset: 6% 14%; background: var(--halo-radial); }
.vk-pdp__thumbs { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); }
.vk-pdp__thumbs span { width: 9px; height: 9px; border-radius: var(--radius-circle); background: rgba(255,255,255,.25); }
.vk-pdp__thumbs span.is-active { background: var(--brand); }
.vk-pdp__badges { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.vk-pdp__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.vk-pdp__desc { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.65; margin: var(--space-3) 0 var(--space-5); max-width: 48ch; }

.vk-config { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0; }
.vk-field { display: flex; flex-direction: column; gap: var(--space-2); }
.vk-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.vk-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.vk-segment button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3); border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); cursor: pointer; transition: all var(--dur-base) var(--ease-out); color: var(--text-body); }
.vk-segment button b { font-family: var(--font-display); font-size: var(--fs-base); color: var(--text-strong); }
.vk-segment button span { font-size: var(--fs-xs); color: var(--text-faint); }
.vk-segment button:hover { border-color: var(--border-strong); }
.vk-segment button.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--ring-gold); }
.vk-segment--light button { flex-direction: row; align-items: center; gap: var(--space-2); }
.vk-dot { width: 14px; height: 14px; border-radius: var(--radius-circle); }
.vk-dot--warm { background: radial-gradient(circle, #fff6df, #ffcf6b); box-shadow: 0 0 8px #ffcf6b; }
.vk-dot--cool { background: radial-gradient(circle, #ffffff, #bcd6ff); box-shadow: 0 0 8px #bcd6ff; }

.vk-pdp__buy { display: flex; gap: var(--space-3); align-items: stretch; margin-top: var(--space-5); }
.vk-qty { display: flex; align-items: center; gap: var(--space-3); border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-pill); padding: 0 var(--space-3); }
.vk-qty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.vk-qty button:hover { color: var(--brand-deep); }
.vk-qty span { min-width: 22px; text-align: center; font-weight: var(--fw-semibold); }
.vk-pdp__buy .vlx-btn { flex: 1; }
.vk-pdp__buy .vlx-price__now { color: var(--on-brand); }
.vk-pdp__perks { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vk-pdp__perks li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-body); }
.vk-pdp__perks svg { color: var(--success-500); }

/* ---------- Contact page ---------- */
.vk-pagehead { position: relative; overflow: hidden; background: var(--grad-dark); padding-block: var(--space-10) var(--space-11); }
.vk-pagehead__glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 60%; height: 140%; background: radial-gradient(circle, rgba(254,194,39,.16), rgba(254,194,39,0) 60%); pointer-events: none; }
.vk-pagehead__inner { position: relative; max-width: 62ch; }
.vk-pagehead__title { font-size: clamp(1.9rem, 3.4vw + 1rem, var(--fs-4xl)); font-weight: var(--fw-bold); color: var(--grey-50); letter-spacing: var(--ls-tighter); line-height: 1.1; margin: var(--space-4) 0 var(--space-4); }
.vk-pagehead__sub { font-size: var(--fs-md); color: var(--text-on-dark-muted); line-height: 1.65; max-width: 52ch; }

.vk-contact__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: calc(-1 * var(--space-8)); position: relative; z-index: 5; }
.vk-contact__card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.vk-contact__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.vk-contact__body { padding-block: var(--space-11) var(--space-11); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.vk-contact__form { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-sm); }
.vk-contact__formtitle { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.vk-contact__formsub { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--space-2) 0 var(--space-6); }
.vk-contact__fields { display: flex; flex-direction: column; gap: var(--space-5); }
.vk-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.vk-contact__sent { display: flex; align-items: center; gap: var(--space-4); background: var(--success-50); color: var(--success-500); border-radius: var(--radius-md); padding: var(--space-5); font-size: var(--fs-sm); }
.vk-contact__sent svg { flex: none; font-size: 26px; }
.vk-contact__sent b { display: block; color: var(--text-strong); font-size: var(--fs-base); margin-bottom: 2px; }
.vk-contact__sent span { color: var(--text-muted); }

.vk-contact__side { border-radius: var(--radius-xl); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); background: var(--grad-dark); }
.vk-contact__map { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); background: linear-gradient(155deg, #45434b 0%, #2a2930 55%, #201f25 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vk-contact__map svg { position: relative; color: var(--brand); font-size: 34px; }
iframe.vk-contact__map { display: block; width: 100%; border: 0; background: #2a2930; }
.vk-contact__block h3 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--grey-50); margin-bottom: var(--space-2); }
.vk-contact__block p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.7; }
.vk-contact__social { display: flex; gap: var(--space-4); font-size: 19px; padding-top: var(--space-2); border-top: 1px solid var(--border-on-dark); }
.vk-contact__social a { color: var(--text-on-dark-muted); }
.vk-contact__social a:hover { color: var(--brand); }

/* ---------- Cart drawer ---------- */
.vk-scrim { position: fixed; inset: 0; background: rgba(18,17,19,.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); z-index: 60; }
.vk-scrim.is-open { opacity: 1; pointer-events: auto; }
.vk-cart { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--surface-card); box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); z-index: 70; display: flex; flex-direction: column; }
.vk-cart.is-open { transform: none; }
.vk-cart__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.vk-cart__head h3 { font-size: var(--fs-lg); }
.vk-cart__head .vk-iconbtn { color: var(--text-body); border-color: var(--border-default); }
.vk-cart__head .vk-iconbtn:hover { background: var(--surface-sunken); }
.vk-cart__body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.vk-cart__empty { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; margin-top: var(--space-8); }
.vk-cartitem { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center; }
.vk-cartitem__thumb { width: 64px; height: 80px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vk-cartitem__glass { width: 60%; height: 70%; border-radius: var(--radius-sm); background: linear-gradient(155deg,#45434b,#222127); box-shadow: var(--glow-gold-sm); }
.vk-cartitem__info { display: flex; flex-direction: column; gap: 2px; }
.vk-cartitem__info b { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-strong); }
.vk-cartitem__info span { font-size: var(--fs-xs); color: var(--text-faint); }
.vk-cartitem__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.vk-link { background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: var(--fs-xs); text-decoration: underline; }
.vk-link:hover { color: var(--danger-500); }
.vk-cart__foot { border-top: 1px solid var(--border-subtle); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.vk-cart__ship { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-sunken); padding: var(--space-3); border-radius: var(--radius-md); }
.vk-cart__ship.is-free { color: var(--success-500); background: var(--success-50); }
.vk-cart__total { display: flex; align-items: baseline; justify-content: space-between; }
.vk-cart__total span { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .vk-nav { display: none; }
  .vk-hero__inner, .vk-pdp__grid, .vk-contact__body { grid-template-columns: 1fr; }
  .vk-hero__art { display: none; }
  .vk-benefits, .vk-grid, .vk-steps, .vk-footer__inner, .vk-contact__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vk-grid, .vk-benefits, .vk-steps, .vk-footer__inner, .vk-contact__cards, .vk-contact__row { grid-template-columns: 1fr; }
}

/* theme.css */
/* ============================================================
   Ogledala LED — theme glue layer
   WordPress + WooCommerce specifics on top of the Vlamix kit.
   ============================================================ */

/* ---------- Accessibility ---------- */
.oled-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--brand); color: var(--on-brand);
	padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-md) 0;
	font-weight: var(--fw-semibold);
}
.oled-skip:focus { left: 0; }

/* ---------- Generic page / prose ---------- */
.oled-page { padding-block: var(--space-9) var(--space-11); }
.oled-page__head { text-align: center; margin-bottom: var(--space-8); }
.oled-page__title {
	font-size: clamp(1.9rem, 3vw + 1rem, var(--fs-3xl));
	font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
}
.oled-page__hero { margin-bottom: var(--space-8); }
.oled-page__hero img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

.oled-content {
	max-width: 780px; margin-inline: auto;
	font: var(--text-copy); color: var(--text-body); line-height: 1.75;
}
.oled-content > * + * { margin-top: var(--space-5); }
.oled-content h2 { font-size: var(--fs-2xl); margin-top: var(--space-9); }
.oled-content h3 { font-size: var(--fs-xl); margin-top: var(--space-7); }
.oled-content h4 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.oled-content p { color: var(--text-body); }
.oled-content a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.oled-content a:hover { color: var(--brand-strong); }
.oled-content img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); height: auto; }
.oled-content ul, .oled-content ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.oled-content li { padding-left: .2em; }
.oled-content blockquote {
	margin: var(--space-6) 0; padding: var(--space-4) var(--space-6);
	border-left: var(--border-thick) solid var(--brand);
	background: var(--surface-sunken); border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--fs-md); color: var(--text-strong);
}
.oled-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.oled-content th, .oled-content td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.oled-content th { color: var(--text-strong); font-family: var(--font-display); }

/* ---------- Blog grid ---------- */
.oled-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.oled-postcard {
	background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle);
	border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.oled-postcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.oled-postcard__media { aspect-ratio: 16/10; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.oled-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.oled-postcard__media--ph { background: var(--grad-dark); }
.oled-postcard__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.oled-postcard__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-strong); }
.oled-postcard__excerpt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

.oled-pagination { margin-top: var(--space-8); display: flex; justify-content: center; }
.oled-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 var(--space-3); margin: 0 3px; border-radius: var(--radius-md);
	border: 1px solid var(--border-default); color: var(--text-body); font-weight: var(--fw-semibold);
}
.oled-pagination .page-numbers.current { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.oled-pagination a.page-numbers:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ---------- Breadcrumbs — inline, right below the page title.
   Deliberately low-contrast: exists for SEO/orientation, must not pull
   attention from the page content (CRO). Schema does the SERP work. ---------- */
.oled-crumbs-in { display: block; margin-bottom: var(--space-3); font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-faint); }
.oled-crumbs-in a { color: inherit; text-decoration: none; }
.oled-crumbs-in a:hover { color: var(--brand-deep); }
.oled-crumbs-in .oled-crumbs__sep { opacity: .5; margin-inline: 2px; }
.oled-crumbs-in .oled-crumbs__cur { opacity: .95; }
/* Dark contexts (hero / pagehead): muted light instead of muted dark. */
.oled-hero .oled-crumbs-in, .vk-pagehead .oled-crumbs-in, .vlamix-dark .oled-crumbs-in { color: rgba(255,255,255,.42); }
.oled-hero .oled-crumbs-in a:hover, .vk-pagehead .oled-crumbs-in a:hover, .vlamix-dark .oled-crumbs-in a:hover { color: var(--brand); }

/* Checkout flow (Korpa → Kasa): a slim step indicator instead of plain crumbs. */
.oled-crumbs-in--steps { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.oled-crumbs-in--steps a, .oled-crumbs-in--steps .oled-crumbs__cur { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-pill); line-height: 1.3; }
.oled-crumbs-in--steps .oled-crumbs__cur { background: var(--brand-tint); color: var(--brand-deep); }
.oled-crumbs-in--steps a { color: var(--text-muted); background: var(--surface-sunken); text-decoration: none; transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.oled-crumbs-in--steps a:hover { color: var(--text-strong); background: var(--border-subtle); }
.oled-crumbs-in--steps .oled-crumbs__next { opacity: .8; }
.oled-crumbs-in--steps .oled-crumbs__ico { display: inline-flex; font-size: 15px; }
.oled-crumbs-in--steps .oled-crumbs__ico svg { display: block; }
.oled-crumbs-in--steps .oled-crumbs__sep { display: inline-flex; align-items: center; color: var(--text-faint); font-size: 15px; margin: 0; }
.oled-crumbs-in--steps .oled-crumbs__sep svg { display: block; }
/* The step breadcrumb already names "Korpa" — hide the redundant eyebrow that
   follows it (avoids "Korpa › Kasa  KORPA"). */
.oled-crumbs-in--steps + .vlamix-eyebrow { display: none; }

/* ---------- WooCommerce ---------- */
.oled-woo { padding-block: var(--space-8) var(--space-11); }
.oled-woo .woocommerce-breadcrumb { font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--space-5); }
.oled-woo .woocommerce-products-header__title,
.oled-woo .product_title { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong); }

/* Woo product grid -> reuse Vlamix product look */
.woocommerce ul.products {
	display: grid !important; gap: var(--space-5); margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(4, 1fr);
}
.woocommerce ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle);
	border-radius: var(--radius-lg); overflow: hidden; padding: 0; text-align: left;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-md);
	color: var(--text-strong); padding: var(--space-4) var(--space-4) 0;
}
.woocommerce ul.products li.product .price {
	display: block; padding: var(--space-2) var(--space-4) var(--space-5);
	color: var(--price); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md);
}
.woocommerce ul.products li.product .price del { color: var(--text-faint); font-weight: var(--fw-medium); font-size: .8em; }
.woocommerce ul.products li.product .price ins { color: var(--price-sale); text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 0 var(--space-4) var(--space-5); display: inline-flex;
}

/* Buttons -> Vlamix pill */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--brand); color: var(--on-brand); border-radius: var(--radius-pill);
	font-family: var(--font-body); font-weight: var(--fw-semibold); padding: .7em 1.5em;
	box-shadow: var(--glow-gold-sm); border: 0; transition: filter var(--dur-base) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover, .woocommerce #place_order:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--brand-strong); color: var(--on-brand); filter: brightness(1.02);
}
/* Ensure proceed/place-order base is brand gold (not WooCommerce purple .alt) */
.wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--brand); color: var(--on-brand); border: 0;
}
.woocommerce .onsale {
	background: var(--danger-500); color: #fff; border-radius: var(--radius-pill);
	font-family: var(--font-body); font-weight: var(--fw-bold); min-height: 0; min-width: 0; padding: .35em .7em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--surface-card); }
.woocommerce span.price, .woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--price); font-family: var(--font-display); font-weight: var(--fw-bold);
}

/* ============================================================
   Rebuilt page sections (page-sections.php content building blocks)
   ============================================================ */

/* Page hero — compact banner for inner pages */
.oled-hero { position: relative; overflow: hidden; background: var(--grad-dark); padding-block: var(--space-10) var(--space-9); text-align: center; }
.oled-hero::before { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 70%; height: 160%; background: radial-gradient(circle, rgba(254,194,39,.16), rgba(254,194,39,0) 60%); pointer-events: none; }
.oled-hero__inner { position: relative; max-width: 780px; margin: 0 auto; padding-inline: var(--gutter); }
.oled-hero__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2rem, 4vw + 1rem, var(--fs-4xl)); color: var(--grey-50); letter-spacing: var(--ls-tighter); line-height: 1.08; margin: var(--space-4) 0 var(--space-4); }
.oled-hero__lead { color: var(--text-on-dark-muted); font-size: var(--fs-md); line-height: 1.65; max-width: 60ch; margin: 0 auto; }
.oled-hero .vlamix-eyebrow { color: var(--brand); }
/* On dark surfaces the accessible dark-gold eyebrow would itself fail contrast,
   so flip it back to bright brand gold (which passes on dark). */
.vlamix-dark .vlamix-eyebrow, .oled-sec--dark .vlamix-eyebrow, .oled-ctaband .vlamix-eyebrow { color: var(--brand); }
/* dark token scope so secondary (outline) buttons render on the dark hero */
.oled-hero { --text-strong: var(--grey-50); --text-body: #D7D2CA; --surface-sunken: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.24); }
.oled-hero .oled-hero__cta .vlx-btn { min-width: 190px; justify-content: center; }
/* Service cards with title overlay (like live o-biznisu "Naše dodatne usluge") */
.oled-svccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.oled-svccard { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; display: block; box-shadow: var(--shadow-sm); color: #fff; text-decoration: none; }
.oled-svccard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.oled-svccard:hover .oled-svccard__bg { transform: scale(1.06); }
.oled-svccard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,17,19,.05) 26%, rgba(18,17,19,.5) 58%, rgba(18,17,19,.9) 100%); }
.oled-svccard__label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-2); padding: var(--space-6); text-align: left; }
.oled-svccard__label b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: #fff; text-transform: uppercase; letter-spacing: var(--ls-wide); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.oled-svccard__desc { font-size: var(--fs-xs); line-height: 1.5; color: rgba(255,255,255,.9); font-weight: var(--fw-regular); text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.oled-svccard__more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-1); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--grey-800); background: var(--brand); padding: 7px 15px; border-radius: var(--radius-pill); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.oled-svccard:hover .oled-svccard__more { transform: translateY(-1px); box-shadow: var(--glow-gold-sm, 0 6px 16px rgba(254,194,39,.4)); }
.oled-svccard:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 940px) { .oled-svccards { grid-template-columns: 1fr; } }
/* Split hero (text + image), e.g. Standardna ogledala */
.oled-hero--split .oled-hero__inner { max-width: var(--container); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: center; text-align: left; }
.oled-hero--split .oled-hero__lead { margin-left: 0; }
.oled-hero--split .oled-hero__cta { justify-content: flex-start; }
.oled-hero__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--glow-gold-md); aspect-ratio: 4/3; }
.oled-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 940px) {
	.oled-hero--split .oled-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.oled-hero--split .oled-hero__cta { justify-content: center; }
	.oled-hero__media { max-width: 460px; margin: 0 auto; }
}
/* Cutout hero (transparent PNG bleeding into the dark gradient, no frame) — O biznisu */
.oled-hero--cutout { padding-block: var(--space-9) 0; }
.oled-hero--cutout .oled-hero__inner { align-items: end; }
.oled-hero--cutout .oled-hero__media { border-radius: 0; overflow: visible; box-shadow: none; aspect-ratio: auto; align-self: end; }
.oled-hero--cutout .oled-hero__media img { width: 100%; height: auto; object-fit: contain; object-position: bottom center; max-height: 560px; filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }
/* Lift the text column so the .vk-benefits cards (which pull up -space-8 to
   overlap the hero) clear the CTA buttons instead of covering them. */
@media (min-width: 941px) { .oled-hero--cutout .oled-hero__inner > div:first-child { padding-bottom: var(--space-10); } }
@media (max-width: 940px) {
	.oled-hero--cutout { padding-block: var(--space-9) 0; }
	.oled-hero--cutout .oled-hero__media { max-width: 520px; }
	.oled-hero--cutout .oled-hero__media img { max-height: 420px; }
}

/* Generic section + prose column */
.oled-sec { padding-block: var(--space-9); }
.oled-sec--sunken { background: var(--surface-sunken); }
.oled-sec--dark { background: var(--grad-dark); }
.oled-prose { max-width: 780px; margin-inline: auto; font: var(--text-copy); color: var(--text-body); line-height: 1.8; }
.oled-prose > * + * { margin-top: var(--space-5); }
.oled-prose h1 { font-size: var(--fs-3xl); color: var(--text-strong); letter-spacing: var(--ls-tight); margin-top: 0; }
.oled-prose h2 { font-size: var(--fs-2xl); color: var(--text-strong); margin-top: var(--space-8); }
.oled-prose--legal { line-height: 1.75; }
.oled-prose--legal h1 { text-align: center; margin-bottom: var(--space-2); }
.oled-prose--legal h2 { font-size: var(--fs-xl); }
.oled-prose--legal h3 { font-size: var(--fs-lg); }
.oled-prose--legal ul { padding-left: 1.3em; }

/* ============================================================
   Side cart items + free shipping (extends kit.css .vk-cart)
   ============================================================ */
.vk-cart__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.vk-cart__items .vk-cartitem { position: relative; align-items: start; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-4); }
.vk-cart__items .vk-cartitem:last-child { border-bottom: 0; padding-bottom: 0; }
.vk-cartitem__thumb { background: var(--ink-900); }
.vk-cartitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vk-cartitem__info { min-width: 0; }
.vk-cartitem__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.25; }
.vk-cartitem__opts { font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.5; margin-top: 3px; }
.vk-cartitem__opts dl.variation { margin: 0; }
.vk-cartitem__opts dl.variation dt { display: inline; font-weight: var(--fw-semibold); color: var(--text-muted); margin: 0; }
.vk-cartitem__opts dl.variation dd { display: inline; margin: 0 .4em 0 .2em; }
.vk-cartitem__opts dl.variation dd p { display: inline; margin: 0; }
.vk-cartitem__qty { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 3px; }
.vk-cartitem__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.vk-cartitem__price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--price); white-space: nowrap; }
.vk-cartitem__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.vk-cartitem__price del { color: var(--text-faint); font-weight: var(--fw-medium); font-size: .8em; order: -1; }
.vk-cartitem__price ins { text-decoration: none; color: var(--price-sale); }
/* Plain text link (no red circle) — the generic .woocommerce a.remove rules
   use !important, so these must too. Padding keeps a decent tap target on mobile. */
.vk-cart a.remove.vk-cartitem__remove { display: inline-block; width: auto !important; height: auto !important; padding: 4px 0; border-radius: 0; font-size: var(--fs-2xs) !important; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-faint) !important; background: none !important; text-decoration: underline; text-underline-offset: 2px; }
.vk-cart a.remove.vk-cartitem__remove:hover { color: var(--danger-500) !important; background: none !important; }
/* Neutralize WooCommerce list-widget styling that bleeds into the drawer on
   pages where body.woocommerce is present (cart/checkout/product). */
.vk-cart .woocommerce-mini-cart { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vk-cart .vk-cartitem { display: grid !important; grid-template-columns: 64px 1fr auto !important; gap: var(--space-4) !important; padding: 0 0 var(--space-4) !important; }
.vk-cart .vk-cartitem::after { content: none !important; }
.vk-cart .vk-cartitem img { float: none !important; margin: 0 !important; }
.vk-cart .vk-cartitem__thumb img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
.vk-cart .vk-cartitem a.remove { position: static !important; float: none !important; width: auto !important; height: auto !important; font-size: var(--fs-2xs) !important; line-height: 1 !important; }
.vk-cart .vk-cartitem__opts dl.variation { margin: 0 !important; }
.vk-cart__total .amount, .vk-cart__total .woocommerce-Price-amount { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--price); font-size: var(--fs-lg); }
.vk-cart__viewlink { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: underline; margin-top: var(--space-1); }
.vk-cart__viewlink:hover { color: var(--brand-deep); }

/* Free-shipping progress bar (side cart + cart page) */
.vk-ship { margin: 0 var(--space-5) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-md); }
.vk-ship__msg { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.vk-ship__msg svg { color: var(--brand-deep); flex: none; font-size: 16px; }
.vk-ship.is-free .vk-ship__msg, .vk-ship.is-free .vk-ship__msg svg { color: var(--success-500); }
.vk-ship__bar { height: 6px; background: var(--border-default); border-radius: var(--radius-pill); margin-top: var(--space-2); overflow: hidden; }
.vk-ship__bar span { display: block; height: 100%; background: var(--grad-gold); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.vk-ship.is-free .vk-ship__bar span { background: var(--success-500); }
.vk-ship-wrap .vk-ship { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); }
.vk-ship-wrap .vk-ship__msg { font-size: var(--fs-sm); }

/* ============================================================
   Cart & Checkout pages (Vlamix)
   ============================================================ */
.oled-woo-page { padding-block: var(--space-8) var(--space-11); }
.oled-woo-page .woocommerce { max-width: var(--container); margin-inline: auto; }
/* cart table */
.woocommerce-cart-form table.shop_table { border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); border-collapse: separate; overflow: hidden; background: var(--surface-card); }
.woocommerce table.shop_table th { font-family: var(--font-display); color: var(--text-strong); background: var(--surface-sunken); padding: var(--space-4); }
.woocommerce table.shop_table td { padding: var(--space-4); border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.woocommerce table.cart td.product-thumbnail { width: 96px; }
.woocommerce table.cart td.product-thumbnail img,
.woocommerce-cart-form .product-thumbnail img,
.woocommerce #content table.cart img {
	width: 72px !important; height: 72px; max-width: none; object-fit: cover;
	border-radius: var(--radius-md); box-shadow: none; display: block;
}
.woocommerce-cart-form .product-name a { color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-semibold); }
.woocommerce-cart-form .product-name .variation { font-size: var(--fs-2xs); color: var(--text-faint); }
.woocommerce a.remove { color: var(--text-faint) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--danger-500) !important; color: #fff !important; }
.woocommerce .quantity .qty { width: 68px; padding: .5em; border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-md); text-align: center; }
.cart_totals { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.cart_totals h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.cart_totals table th, .cart_totals table td { padding: var(--space-3) 0; }
.cart_totals .order-total .amount { color: var(--price); font-size: var(--fs-lg); }
.wc-proceed-to-checkout { padding-top: var(--space-4) !important; }
.wc-proceed-to-checkout .checkout-button { display: flex !important; align-items: center; justify-content: center; width: 100%; font-size: var(--fs-md) !important; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cross-sells { width: 100%; }
/* checkout — Vlamix two-column layout: details left, sticky order summary right */
form.woocommerce-checkout { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "notice notice" "details heading" "details review"; column-gap: var(--space-8); align-items: start; }
form.woocommerce-checkout .woocommerce-NoticeGroup-checkout { grid-area: notice; }
#customer_details { grid-area: details; }
#order_review_heading { grid-area: heading; margin: 0 0 var(--space-4); }
#order_review { grid-area: review; position: sticky; top: 96px; }
@media (max-width: 940px) {
	form.woocommerce-checkout { display: block; }
	#order_review { position: static; }
	#order_review_heading { margin-top: var(--space-7); }
}
.woocommerce-checkout h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-strong); margin-bottom: var(--space-4); }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; }
.woocommerce form .form-row label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 4px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection { border: var(--border-thin) solid var(--border-default) !important; border-radius: var(--radius-md) !important; padding: .7em .9em; min-height: auto; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--brand); box-shadow: var(--ring-gold); outline: none; }
.woocommerce-checkout input[type="checkbox"], .woocommerce-checkout input[type="radio"] { accent-color: var(--brand-strong); width: 1.05em; height: 1.05em; }
#ship-to-different-address { font-size: var(--fs-base); }
#ship-to-different-address label { display: inline-flex; align-items: center; gap: .55em; cursor: pointer; }

/* order summary card */
#order_review { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
#order_review table.shop_table { border: none; background: transparent; margin-bottom: var(--space-4); table-layout: fixed; width: 100%; }
/* Give the product details more room; the price column doesn't need half the table. */
#order_review table.shop_table th, #order_review table.shop_table td { background: transparent; padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
#order_review table.shop_table thead th.product-name,
#order_review table.shop_table tbody td.product-name { width: 70%; padding-right: var(--space-3); word-wrap: break-word; overflow-wrap: anywhere; }
#order_review table.shop_table thead th:last-child,
#order_review table.shop_table tbody td.product-total { width: 30%; text-align: right; }
#order_review table.shop_table thead th { border-top: none; padding-top: 0; font-family: var(--font-display); color: var(--text-strong); }
/* Sale prices stacked (struck original above, discounted below) — cart + checkout */
.woocommerce-cart-form td.product-price del,
.woocommerce-cart-form td.product-price ins,
.woocommerce-cart-form td.product-subtotal del,
.woocommerce-cart-form td.product-subtotal ins,
#order_review .cart_item td.product-total del,
#order_review .cart_item td.product-total ins { display: block; }
.woocommerce-cart-form td.product-price ins,
.woocommerce-cart-form td.product-subtotal ins,
#order_review .cart_item td.product-total ins { text-decoration: none; color: var(--price-sale); }

#order_review .cart_item .product-name { color: var(--text-strong); font-weight: var(--fw-semibold); }
#order_review .cart_item dl.variation { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 2px; }
#order_review .order-total th, #order_review .order-total td { font-size: var(--fs-lg); }
#order_review .order-total .amount { color: var(--price); font-family: var(--font-display); font-weight: var(--fw-bold); }
/* Totals foot taken out of the rigid product 70/30 grid: totals read as
   label ↔ value, and the shipping row stacks so its options get full width
   (instead of being squeezed into the 30% price column). */
#order_review tfoot { display: block; }
#order_review tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
#order_review tfoot tr th, #order_review tfoot tr td { display: block; width: auto; padding: 0; border: 0; }
#order_review tfoot tr th { text-align: left; }
#order_review tfoot tr td { text-align: right; }
#order_review tfoot tr.order-total { font-size: var(--fs-lg); }
/* Shipping: label on top, methods full-width below (not a flex ↔ row). */
#order_review tfoot tr.woocommerce-shipping-totals { display: block; }
#order_review tfoot tr.woocommerce-shipping-totals td { text-align: left; margin-top: var(--space-2); }
#order_review ul#shipping_method { list-style: none; margin: 0; padding: 0; }
#order_review ul#shipping_method li { display: flex; align-items: center; gap: .5em; margin-bottom: var(--space-2); line-height: 1.4; }
#order_review ul#shipping_method li label { flex: 1; }
#order_review ul#shipping_method .amount { font-weight: var(--fw-semibold); white-space: nowrap; }

/* payment methods */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0 0 var(--space-3); }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: var(--space-2); }
.woocommerce-checkout #payment ul.payment_methods li > label { font-weight: var(--fw-semibold); color: var(--text-strong); cursor: pointer; }
.woocommerce-checkout #payment div.payment_box { background: var(--brand-tint); border-radius: var(--radius-md); color: var(--text-body); font-size: var(--fs-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--brand-tint); }
.woocommerce-checkout #payment div.form-row.place-order { padding-inline: 0; }
.woocommerce-privacy-policy-text p { font-size: var(--fs-2xs); color: var(--text-faint); line-height: 1.6; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: .55em; font-size: var(--fs-sm); cursor: pointer; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-checkout #payment #place_order { width: 100%; font-size: var(--fs-md); margin-top: var(--space-3); }

/* ============================================================
   Single product page (Vlamix + UniCPO configurator styling)
   ============================================================ */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.single-product div.product::before, .single-product div.product::after { content: none; display: none; }
/* z-index: 1 traps the zoom trigger's own z-index (99) inside the gallery's
   stacking context so it can't paint above the sticky header (z-index: 40). */
.single-product div.product .woocommerce-product-gallery { width: auto !important; margin: 0 !important; float: none !important; position: sticky; top: 100px; opacity: 1 !important; z-index: 1; }
.single-product div.product .woocommerce-product-gallery__trigger { z-index: 5; }
/* Add-to-cart feedback is the side-cart drawer — hide the duplicate notice. */
.single-product .woocommerce-notices-wrapper .woocommerce-message { display: none; }
.single-product .woocommerce-product-gallery__wrapper, .single-product .flex-viewport { height: auto !important; margin: 0; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: block; width: 100%; }
.single-product div.product .summary.entry-summary { width: auto !important; margin: 0 !important; float: none !important; }
.single-product .woocommerce-tabs { grid-column: 1 / -1; }
/* Related products — full width below the product, Vlamix cards. */
.single-product .oled-related { grid-column: 1 / -1; margin-top: var(--space-9); padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--border-subtle); }
.oled-related__head { margin-bottom: var(--space-6); }
.oled-related__head .vlamix-eyebrow { display: block; margin-bottom: var(--space-2); }
.oled-related__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; }
@media (max-width: 940px) {
	.single-product div.product { grid-template-columns: 1fr; gap: var(--space-5); }
	/* Fully static gallery on mobile — no sticky/z-index leftovers that could
	   overlap the title below it — plus an explicit gap as a safety net. */
	.single-product div.product .woocommerce-product-gallery {
		position: relative !important; /* relative + z-index:0 = stacking context */
		top: auto !important;
		z-index: 0 !important; /* traps the zoom trigger below the header (z-40) */
		margin: 0 0 var(--space-5) !important;
	}
	.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--radius-lg); }
	/* Trim the oversized top whitespace above the product on phones. */
	.oled-woo { padding-block: var(--space-5) var(--space-8); }
	.oled-woo .woocommerce-breadcrumb { margin-bottom: var(--space-3); }
}

/* "Dostupno odmah" section — the speed/availability value prop, made the
   eye-catcher: live green pill + big headline + scannable trust chips. */
.oled-instant__pill { display: inline-flex; align-items: center; gap: .5em; margin-bottom: var(--space-3); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--success-50); color: var(--success-500); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.oled-instant__dot { width: 9px; height: 9px; border-radius: var(--radius-circle); background: var(--success-500); box-shadow: 0 0 0 0 rgba(46,158,91,.55); animation: oled-pulse 2s infinite; }
@keyframes oled-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,158,91,.5); } 70% { box-shadow: 0 0 0 8px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
@media (prefers-reduced-motion: reduce) { .oled-instant__dot { animation: none; } }
.oled-instant__title { font-size: clamp(2rem, 4vw + 1rem, var(--fs-4xl)); }
.oled-instant__trust { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); }
.oled-instant__trust li { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.oled-instant__trust svg { color: var(--brand-deep); font-size: 18px; }

/* Stock / availability (CRO): scarcity in gold, in-stock in green */
.vlx-stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.vlx-stock::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radius-circle); background: currentColor; }
.vlx-stock--in { color: var(--success-500); }
.vlx-stock--low { color: var(--gold-700); }
.vlx-stock--out { color: var(--text-faint); }
.single-product .summary p.stock { display: inline-flex; align-items: flex-start; gap: .55em; margin: var(--space-3) 0 var(--space-5); padding: 9px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; background: var(--success-50); color: var(--success-500); }
.single-product .summary p.stock::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .42em; border-radius: var(--radius-circle); background: currentColor; }
.single-product .summary p.stock.low-stock { background: var(--gold-100); color: var(--gold-800); }
.single-product .summary p.stock.out-of-stock { background: var(--danger-50); color: var(--danger-500); }

/* Badges + rating + title + price */
.oled-single-badges { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.single-product .product_title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 3.2vw + 0.8rem, var(--fs-3xl)); letter-spacing: var(--ls-tight); color: var(--text-strong); line-height: 1.12; margin: 0 0 var(--space-3); }
.single-product .woocommerce-product-rating { margin-bottom: var(--space-3); }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--brand); }
.single-product p.price, .single-product div.product p.price, .single-product .summary .price { color: var(--price) !important; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); margin: 0 0 var(--space-4); }
.single-product p.price del { color: var(--text-faint); font-weight: var(--fw-medium); font-size: .6em; }
.single-product p.price ins { text-decoration: none; color: var(--price-sale); }

/* UniCPO field labels */
.single-product .js-uni-cpo-field { margin-bottom: var(--space-3); }
.single-product .cpo-label, .single-product .js-uni-cpo-field > label, .single-product .uni-cpo-field-label { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-strong); margin-bottom: var(--space-2); display: block; }
.single-product .uni_cpo_field_required, .single-product .required { color: var(--danger-500); }

/* UniCPO text inputs + selects -> Vlamix */
.single-product .uni-module-text_input,
.single-product .js-uni-cpo-field input[type="number"],
.single-product .js-uni-cpo-field input[type="text"],
.single-product .uni-module-select,
.single-product .js-uni-cpo-field select {
	width: 100%; font: var(--text-copy); color: var(--text-strong);
	background: var(--surface-card); border: var(--border-thin) solid var(--border-default);
	border-radius: var(--radius-md); padding: .7em .9em;
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.single-product .uni-module-text_input:focus,
.single-product .js-uni-cpo-field input:focus,
.single-product .uni-module-select:focus,
.single-product .js-uni-cpo-field select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring-gold); }

/* UniCPO module wrappers: strip the boxed look, neutral label, tight spacing */
.single-product .uni-module { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 var(--space-3) !important; clear: both; }
.single-product .uni-module > label,
.single-product .uni-cpo-module-radio-label,
.single-product .uni-cpo-module-checkbox-label { display: block; color: var(--text-strong) !important; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 var(--space-2); }
.single-product .uni-module > label a, .single-product .uni-module > label span { color: inherit; }
.single-product .uni-module .uni_cpo_field_required, .single-product .uni-module .required { color: var(--danger-500); }
.single-product .uni-module-text_input input { height: auto; }
/* Širina + Visina side by side — 2x2 grid (input row + hint row), built by
   site.js wrapping the 4 dimension modules in .oled-dims. */
.single-product .oled-dims { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.single-product .oled-dims .uni-module-text_input { margin: 0 0 2px !important; }
.single-product .oled-dims .uni-module-text_input input { margin: 0 !important; }
.single-product .oled-dims .uni-module-dynamic_notice { margin: 0 !important; }
.single-product .oled-dims .js-uni-cpo-field-dynamic_notice { margin: 0 !important; }
@media (max-width: 560px) {
	.single-product .oled-dims { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* UniCPO radio options as selectable cards */
.single-product .uni-cpo-radio-option-label,
.single-product .uni-cpo-checkbox-option-label {
	display: flex; align-items: center; gap: var(--space-3);
	padding: var(--space-2) var(--space-3); margin-bottom: 2px;
	border: var(--border-thin) solid transparent; border-radius: var(--radius-md);
	background: transparent; cursor: pointer; font-size: var(--fs-sm); color: var(--text-body);
	transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.single-product .uni-cpo-radio-option-label:hover { background: var(--grey-100); }
.single-product input:checked + .uni-cpo-radio-option-label,
.single-product input:checked + .uni-cpo-checkbox-option-label { border-color: var(--brand); background: var(--brand-tint); }
.single-product .uni-cpo-option-label__radio { border-color: var(--border-strong) !important; }
.single-product input:checked + .uni-cpo-radio-option-label .uni-cpo-option-label__radio:after { background-color: var(--brand) !important; }
.single-product input:checked + .uni-cpo-radio-option-label .uni-cpo-option-label__radio { border-color: var(--brand) !important; }

/* UniCPO notices: small inline hints by default (e.g. "Širina: 40 cm") */
.single-product .js-uni-cpo-field-dynamic_notice { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.4; margin: 4px 0 var(--space-2); }
.single-product .js-uni-cpo-field-dynamic_notice p { margin: 0; }
.single-product .js-uni-cpo-field-dynamic_notice:empty,
.single-product .uni_cpo_text-field, .single-product .uni_cpo_show_strike_price-field { display: none; }
/* only the discount/tier notice (uni_cpo_area) gets the highlighted info box */
.single-product .uni_cpo_area-field { display: block !important; background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--text-body); line-height: 1.5; }
.single-product .uni_cpo_area-field p { margin: 0 0 var(--space-1); }
.single-product .uni_cpo_area-field p:last-child { margin-bottom: 0; }
.single-product .uni_cpo_area-field strong { color: var(--text-strong); }

/* Quantity stepper + add to cart */
.single-product form.cart { display: flex; align-items: stretch; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.single-product form.cart .quantity { display: inline-flex; align-items: center; border: var(--border-thin) solid var(--border-default); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.single-product form.cart .quantity .qty { border: 0 !important; width: 48px; text-align: center; background: transparent; }
.single-product .single_add_to_cart_button { flex: 1; min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-size: var(--fs-md) !important; border-radius: var(--radius-pill) !important; box-shadow: var(--glow-gold-sm); }
.single-product .product_meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-5); }
.single-product .product_meta a { color: var(--brand-deep); }

/* Tabs */
.woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 var(--space-6) !important; border-bottom: 1px solid var(--border-subtle); display: flex; gap: var(--space-2); }
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-muted) !important; padding: var(--space-3) var(--space-4) !important; display: block; border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--text-strong) !important; border-bottom-color: var(--brand); }
.woocommerce-tabs .panel { padding: 0 !important; }
.woocommerce-tabs .panel h2 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-strong); }

/* Product-specific SEO copy: three compact question/answer rows that bridge
   the configurator and the shared technical specification. */
.woocommerce-tabs .oled-product-unique-description {
	display: grid;
	grid-template-columns: minmax(230px, .8fr) minmax(0, 1.65fr);
	margin: 0 0 var(--space-7);
	padding: 0 clamp(var(--space-5), 3vw, var(--space-7));
	background: var(--surface-card);
	border: var(--border-hairline) solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.woocommerce-tabs .oled-product-unique-description > h2,
.woocommerce-tabs .oled-product-unique-description > p {
	margin: 0;
	padding-block: var(--space-5);
}
.woocommerce-tabs .oled-product-unique-description > h2 {
	position: relative;
	padding-inline: 22px var(--space-7);
	font-size: clamp(1.125rem, 1.45vw, var(--fs-lg));
	font-weight: var(--fw-semibold);
	line-height: 1.28;
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
}
.woocommerce-tabs .oled-product-unique-description > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--space-5) + .58em);
	width: 7px;
	height: 7px;
	border-radius: var(--radius-circle);
	background: var(--brand);
	box-shadow: 0 4px 10px -4px rgba(217, 153, 10, .8);
}
.woocommerce-tabs .oled-product-unique-description > p {
	max-width: 74ch;
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--text-body);
	text-wrap: pretty;
}
.woocommerce-tabs .oled-product-unique-description > p strong {
	color: var(--text-strong);
	font-weight: var(--fw-semibold);
}
.woocommerce-tabs .oled-product-unique-description > h2:not(:first-child),
.woocommerce-tabs .oled-product-unique-description > p:not(:first-of-type) {
	border-top: var(--border-hairline) solid var(--border-subtle);
}
.woocommerce-tabs .global-product-description > h2:first-child {
	margin: 0 0 var(--space-4);
	letter-spacing: var(--ls-tight);
}

@media (max-width: 720px) {
	.woocommerce-tabs .oled-product-unique-description {
		grid-template-columns: 1fr;
		margin-bottom: var(--space-6);
		padding: var(--space-5);
	}
	.woocommerce-tabs .oled-product-unique-description > h2,
	.woocommerce-tabs .oled-product-unique-description > p {
		padding-block: 0;
		border-top: 0 !important;
	}
	.woocommerce-tabs .oled-product-unique-description > h2 {
		padding-left: 20px;
		padding-right: 0;
		font-size: 1.125rem;
	}
	.woocommerce-tabs .oled-product-unique-description > h2:not(:first-child) {
		margin-top: var(--space-5);
		padding-top: var(--space-5);
		border-top: var(--border-hairline) solid var(--border-subtle) !important;
	}
	.woocommerce-tabs .oled-product-unique-description > h2::before {
		top: .52em;
	}
	.woocommerce-tabs .oled-product-unique-description > h2:not(:first-child)::before {
		top: calc(var(--space-5) + .52em);
	}
	.woocommerce-tabs .oled-product-unique-description > p {
		padding-top: var(--space-2);
		font-size: var(--fs-sm);
		line-height: 1.7;
	}
}
.oled-prose h3 { font-size: var(--fs-xl); color: var(--text-strong); margin-top: var(--space-6); }
.oled-prose a:not(.vlx-btn) { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Team grid */
.oled-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.oled-team__card { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-sm); }
.oled-team__avatar { width: 72px; height: 72px; margin: 0 auto var(--space-4); border-radius: var(--radius-circle); background: var(--brand-tint); color: var(--brand-deep); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center; }
.oled-team__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--text-strong); }
.oled-team__role { font-size: var(--fs-sm); color: var(--brand-deep); font-weight: var(--fw-semibold); }

/* Stats band */
.oled-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); text-align: center; }
.oled-stat__num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-3xl); color: var(--brand); line-height: 1; }
.oled-stat__lab { font-size: var(--fs-sm); color: var(--text-on-dark-muted); margin-top: var(--space-2); }
.oled-sec--sunken .oled-stat__lab { color: var(--text-muted); }
.oled-sec--sunken .oled-stat__num { color: var(--brand-deep); }

/* Reviews grid (reusable) */
.oled-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.oled-review { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-sm); }
.oled-review__title { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-base); }
.oled-review__text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.6; margin: 0; flex: 1; }
.oled-review__name { font-size: var(--fs-xs); color: var(--text-faint); font-weight: var(--fw-semibold); }

/* FAQ (reusable — same look as front-page) */
.oled-faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.oled-faq details { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.oled-faq summary { cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text-strong); list-style: none; }
.oled-faq summary::-webkit-details-marker { display: none; }
.oled-faq details p, .oled-faq details ul { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; }
.oled-faq details ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }

/* Contact grid */
.oled-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.oled-contact__card { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: var(--shadow-sm); }
.oled-contact__ic { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-deep); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.oled-contact__card h3 { font-size: var(--fs-base); color: var(--text-strong); }
.oled-contact__card a, .oled-contact__card p { color: var(--text-body); font-size: var(--fs-sm); }
.oled-contact__card a:hover { color: var(--brand-deep); }

/* Two-column split (prose + image), e.g. O biznisu story */
.oled-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.oled-split .oled-prose { margin: 0; max-width: none; }
.oled-split__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.oled-split__media img { width: 100%; height: auto; display: block; }
@media (max-width: 940px) { .oled-split { grid-template-columns: 1fr; } }

/* Founders block (1:1 with the old "Preciznost i sigurnost" section):
   prose + 2x2 checklist + two signatures + CTA, photo on the right. */
.oled-checks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
.oled-checks li { display: flex; gap: var(--space-3); align-items: center; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-strong); text-transform: uppercase; letter-spacing: var(--ls-tight); line-height: 1.3; }
.oled-checks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--brand-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.oled-signs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-7); }
.oled-sign { position: relative; padding-left: var(--space-6); }
.oled-sign:first-child { padding-left: 0; }
.oled-sign + .oled-sign::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--border-hairline); background: var(--border-subtle); }
.oled-sign__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-strong); }
.oled-sign__role { font-size: var(--fs-sm); color: var(--text-muted); }
.oled-founders__cta { margin-top: var(--space-7); }
@media (max-width: 560px) { .oled-checks { grid-template-columns: 1fr; } }

/* Project gallery (masonry) */
.oled-gallery { columns: 3; column-gap: var(--space-4); }
.oled-gallery__item { display: block; margin: 0 0 var(--space-4); break-inside: avoid; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
.oled-gallery__img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.oled-gallery__item { cursor: zoom-in; }
.oled-gallery__item:hover .oled-gallery__img { transform: scale(1.04); }
@media (max-width: 940px) { .oled-gallery { columns: 2; } }
@media (max-width: 560px) { .oled-gallery { columns: 2; column-gap: var(--space-3); } .oled-gallery__item { margin-bottom: var(--space-3); } }

/* Gallery lightbox */
.oled-lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(18,17,19,.9); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.oled-lb.is-open { opacity: 1; pointer-events: auto; }
.oled-lb__img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.oled-lb__close { position: absolute; top: var(--space-5); right: var(--space-5); }
.oled-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.oled-lb__prev { left: var(--space-4); }
.oled-lb__next { right: var(--space-4); }
.oled-lb__close, .oled-lb__nav { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-circle); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; line-height: 1; transition: background var(--dur-base) var(--ease-out); }
.oled-lb__close { width: 44px; height: 44px; font-size: 22px; }
.oled-lb__close:hover, .oled-lb__nav:hover { background: var(--brand); color: var(--on-brand); }
@media (max-width: 560px) { .oled-lb__nav { width: 40px; height: 40px; font-size: 24px; } .oled-lb { padding: var(--space-4); } }

/* Services grid (image card) */
.oled-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.oled-service { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.oled-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.oled-service__media { aspect-ratio: 4/3; overflow: hidden; background: var(--ink-900); }
.oled-service__media img { width: 100%; height: 100%; object-fit: cover; }
.oled-service__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.oled-service__body h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-strong); }
.oled-service__body p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; flex: 1; }
.oled-service__link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-deep); }
.oled-service__link:hover { color: var(--brand-strong); }
@media (max-width: 940px) { .oled-services { grid-template-columns: 1fr; } }

/* Feature list (icon + text rows/cards) */
.oled-featgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.oled-feat { display: flex; gap: var(--space-4); align-items: flex-start; }
.oled-feat__ic { flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.oled-feat__t { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text-strong); margin-bottom: 2px; }
.oled-feat__d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
@media (max-width: 560px) { .oled-featgrid { grid-template-columns: 1fr; } }

/* Inline CTA band */
.oled-ctaband { position: relative; overflow: hidden; background: var(--grad-dark); padding-block: var(--space-9); text-align: center; }
.oled-ctaband::before { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 70%; height: 160%; background: radial-gradient(circle, rgba(254,194,39,.16), rgba(254,194,39,0) 60%); pointer-events: none; }
.oled-ctaband__inner { position: relative; max-width: 720px; margin: 0 auto; padding-inline: var(--gutter); }
.oled-ctaband h2 { color: var(--grey-50); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.5rem, 3vw + 1rem, var(--fs-2xl)); letter-spacing: var(--ls-tight); }
.oled-ctaband p { color: var(--text-on-dark-muted); font-size: var(--fs-md); margin: var(--space-3) 0 var(--space-6); }
.oled-ctaband__btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* dark token scope so secondary (outline) buttons render on the dark band */
.oled-ctaband { --text-strong: var(--grey-50); --text-body: #D7D2CA; --surface-sunken: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.24); }
/* split (horizontal) variant — copy left, buttons right (homepage) */
.oled-ctaband--split { text-align: left; }
.oled-ctaband--split .oled-ctaband__inner { max-width: var(--container); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.oled-ctaband--split h2 { margin: 0 0 var(--space-2); }
.oled-ctaband--split p { margin: 0; max-width: 48ch; }
.oled-ctaband--split .oled-ctaband__btns { justify-content: flex-start; }

/* Review card footer — avatar + name/product (matches Vlamix design) */
.oled-review__foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.oled-review__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; }
.oled-review__product { font-size: var(--fs-2xs); color: var(--text-faint); }

.oled-sec .vk-sechead { margin-bottom: var(--space-7); }

/* Contact form + map */
.oled-formwrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: start; }
.oled-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.oled-form .vlx-field--full, .oled-form .oled-form__actions, .oled-form .oled-form__status { grid-column: 1 / -1; }
.oled-form__status { font-size: var(--fs-sm); font-weight: var(--fw-semibold); min-height: 1.2em; }
.oled-form__status.is-ok { color: var(--success-500); }
.oled-form__status.is-err { color: var(--danger-500); }

/* Contact form attachments (crtež / referenca) */
.oled-upload { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.oled-upload:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--text-strong); }
.oled-upload svg { flex: none; font-size: 20px; color: var(--brand-deep); }
.oled-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.oled-upload__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.oled-upload__list:empty { display: none; }
.oled-upload__chip { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-strong); background: var(--surface-sunken); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-pill); padding: 4px 10px; }
.oled-upload__chip.is-err { color: var(--danger-500); border-color: var(--danger-500); }

/* Blog cards ([oled_blog]) */
.oled-blogcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.oled-blogcard { display: flex; flex-direction: column; background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.oled-blogcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oled-blogcard__media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.oled-blogcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.oled-blogcard:hover .oled-blogcard__media img { transform: scale(1.05); }
/* Decorative LED-mirror art media (same look as home hero .vk-mirror) */
.oled-blogcard__media--art { position: relative; display: flex; align-items: center; justify-content: center; background: var(--grad-dark); }
.oled-blogcard__halo { position: absolute; width: 62%; height: 78%; background: var(--halo-radial); border-radius: var(--radius-circle); }
.oled-blogcard__glass { position: relative; width: 52%; height: 62%; border-radius: var(--radius-xl); background: linear-gradient(155deg, #45434b 0%, #2a2930 55%, #201f25 100%); box-shadow: var(--glow-gold-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 24px rgba(255,255,255,.06); transition: transform var(--dur-slow) var(--ease-out); }
.oled-blogcard:hover .oled-blogcard__glass { transform: scale(1.04); }
.oled-blogcard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.oled-blogcard__date { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--brand-deep); }
.oled-blogcard__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--text-strong); letter-spacing: var(--ls-tight); line-height: 1.25; }
.oled-blogcard__excerpt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.oled-blogcard__more { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-deep); }
@media (max-width: 780px) { .oled-blogcards { grid-template-columns: 1fr; } }
.oled-form__note { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-faint); }
.oled-map { border: 0; width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

@media (max-width: 940px) {
	.oled-formwrap { grid-template-columns: 1fr; }
	.oled-postgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.oled-form { grid-template-columns: 1fr; }
	.oled-postgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Product card image fills the media box (no mirror frame/halo)
   ============================================================ */
.vlx-product__media { background: var(--ink-900); }
.vlx-product__img,
.vlx-product__img--ph {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border-radius: 0; box-shadow: none; object-fit: cover;
}

/* Logo keeps its natural aspect ratio (never squished) */
.vk-logo img, .vk-footer__brand img { width: auto; max-width: none; object-fit: contain; }

/* ============================================================
   Product grid — desktop cols via --oled-cols, 2 cols on mobile
   ============================================================ */
.vk-grid { grid-template-columns: repeat(var(--oled-cols, 4), 1fr); }
@media (max-width: 940px) {
	.vk-grid { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.vk-grid { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Footer — payment methods band + legal disclaimer (like live)
   ============================================================ */
.oled-pay { background: var(--white); padding: var(--space-4) 0; }
.oled-pay__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-5); }
.oled-pay__inner img { height: 30px; width: auto; display: block; }
.oled-legal { padding: var(--space-6) var(--gutter) var(--space-5); }
.oled-legal p { max-width: 1000px; margin: 0 auto; text-align: center; font-size: var(--fs-2xs); line-height: 1.7; color: var(--text-on-dark-muted); }

/* Footer contact — phone (tel:) + address (maps) links */
.vk-footer__contact a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--grey-50); transition: color var(--dur-base) var(--ease-out); }
.vk-footer__contact a:hover { color: var(--brand); }
.vk-footer__contact svg { color: var(--brand); }

/* ============================================================
   Mobile polish (<= 560px)
   ============================================================ */
@media (max-width: 560px) {
	/* Push cart + hamburger to the far right */
	.vk-header__actions { margin-left: auto; }

	/* Hero CTA: smaller buttons that fit one row */
	.vk-hero__cta { flex-wrap: nowrap; gap: var(--space-2); }
	.vk-hero__cta .vlx-btn { flex: 1 1 0; min-width: 0; justify-content: center; font-size: var(--fs-sm); padding: .6em .8em; white-space: nowrap; }
	.vk-hero__cta .vlx-btn__icon { display: none; }

	/* Hero lead / delivery line: a touch smaller */
	.vk-hero__lead { font-size: var(--fs-sm); }

	/* Process steps: centered */
	.vk-steps { grid-template-columns: 1fr; }
	.vlx-step { align-items: center; text-align: center; }
	.vlx-step__desc { max-width: none; }

	/* CTA band buttons in one row (like hero) */
	.oled-ctaband__btns { flex-wrap: nowrap; gap: var(--space-2); justify-content: center; }
	.oled-ctaband__btns .vlx-btn { font-size: var(--fs-xs); padding: .55em .75em; white-space: nowrap; }
	.oled-ctaband--split .oled-ctaband__inner { justify-content: center; }
}

/* Product name: reserve 2 lines for alignment on mobile, but let longer names
   wrap fully (no truncation) — full model names are important to the customer. */
@media (max-width: 940px) {
	.vlx-product__name { line-height: 1.3; min-height: 2.6em; }
}

@media (max-width: 940px) {
	.oled-postgrid { grid-template-columns: 1fr 1fr; }
	.woocommerce ul.products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.oled-postgrid { grid-template-columns: 1fr; }
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ============================================================
   Aqualand partnership layer
   The banner is fixed, visible on initial load, and collapses after 15%
   scroll progress without inserting a block or moving the visitor's scroll.
   ============================================================ */
.oled-promo-banner {
	position: fixed;
	top: calc(114px + var(--oled-admin-offset, 0px));
	left: 0;
	right: 0;
	z-index: 39;
	background: #050608;
	color: #fff;
	border-top: 1px solid rgba(254,194,39,.72);
	border-bottom: 1px solid rgba(254,194,39,.72);
	box-shadow: 0 0 10px rgba(254,194,39,.12);
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition: top .38s var(--ease-out), opacity .28s ease, transform .46s var(--ease-out);
}
.oled-promo-banner.is-hidden,
body.oled-promo-hidden .oled-promo-banner { opacity: 0; transform: translateY(-110%); pointer-events: none; }
.oled-promo-banner__inner {
	width: min(100%, var(--container));
	min-height: 38px;
	margin: 0 auto;
	padding: 5px var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
}
.oled-promo-banner__ticker { position: relative; min-width: 0; min-height: 1.25em; overflow: hidden; }
.oled-promo-banner__track { display: flex; width: max-content; transform: translateX(0); animation: oled-promo-marquee-left 24s linear infinite; will-change: transform; }
.oled-promo-banner__track.is-paused { animation-play-state: paused; }
.oled-promo-banner__group { display: flex; flex: 0 0 auto; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.oled-promo-banner__message { display: inline-block; margin: 0; color: rgba(255,255,255,.9); font: 600 12px/1.25 var(--font-body); }
.oled-promo-banner__separator { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: var(--brand); }
.oled-promo-banner__message strong { color: var(--brand); font-weight: 800; }
.oled-promo-banner__partner { color: #0565ff; }
.oled-promo-banner__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); min-width: 0; flex: none; }
.oled-promo-banner__link { color: var(--brand); font: 700 11px/1 var(--font-body); white-space: nowrap; }
.oled-promo-banner__link:hover, .oled-promo-banner__link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.oled-promo-banner__brand { display: flex; align-items: center; justify-content: center; width: 132px; flex: 0 0 132px; }
.oled-promo-banner__brand img { display: block; width: 132px; height: auto; max-height: 25px; object-fit: contain; }
.oled-promo-banner__copy { display: inline; }
.oled-promo-banner__copy--compact { display: none; }
.vk-topbar { max-height: 38px; overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height .38s var(--ease-out), opacity .24s ease, transform .38s var(--ease-out), border-color .38s ease; }
body.oled-topbar-scrolled .vk-topbar { max-height: 0; opacity: 0; transform: translateY(-8px); border-bottom-color: transparent; pointer-events: none; }
@media (max-width: 860px) {
	.oled-promo-banner { top: calc(114px + var(--oled-admin-offset, 0px)); }
	.oled-promo-banner__inner { min-height: 38px; padding: 6px 8px; gap: 8px; }
	.oled-promo-banner__group { gap: 18px; padding-right: 18px; }
	.oled-promo-banner__message { font-size: 11px; line-height: 1.15; }
	.oled-promo-banner__copy--wide { display: none; }
	.oled-promo-banner__copy--compact { display: inline; }
	.oled-promo-banner__actions { flex-direction: column; align-items: flex-end; gap: 1px; }
	.oled-promo-banner__brand { order: 1; width: 78px; flex-basis: auto; }
	.oled-promo-banner__brand img { width: 78px; max-height: 20px; }
	.oled-promo-banner__link { order: 2; font-size: 9px; }
}
body.oled-topbar-scrolled .oled-promo-banner { top: calc(76px + var(--oled-admin-offset, 0px)); }
@media (max-width: 600px) {
	.oled-promo-banner__message { font-size: 10px; }
	.oled-promo-banner__group { gap: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.oled-promo-banner, .vk-topbar { transition: none; }
	.oled-promo-banner__track { animation: none; transform: translateX(0); }
	.oled-promo-banner__group[aria-hidden="true"] { display: none; }
}
@keyframes oled-promo-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Four homepage partnership benefits, collapsing without horizontal overflow. */
body.home .vk-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { body.home .vk-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.home .vk-benefits { grid-template-columns: 1fr; } }

/* Aqualand landing and purchase-benefit surfaces. */
.oled-aqualand-hero { text-align: center; }
.oled-aqualand-hero .oled-hero__lead { max-width: 60ch; }
.oled-aqualand-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.oled-section-heading { max-width: 760px; margin: 0 auto var(--space-7); }
.oled-section-heading--center { text-align: center; }
.oled-section-heading h2 { margin: 0 0 var(--space-3); color: var(--text-strong); font-family: var(--font-display); font-size: clamp(1.65rem, 2.5vw, var(--fs-3xl)); line-height: 1.12; letter-spacing: var(--ls-tight); }
.oled-section-heading p:not(.vlamix-eyebrow) { margin: 0; color: var(--text-muted); line-height: 1.7; }
.oled-aqualand-intro { background: var(--surface-page); }
.oled-aqualand-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 960px; margin: 0 auto; }
.oled-aqualand-benefit-card { position: relative; min-height: 220px; padding: var(--space-7); overflow: hidden; background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.oled-aqualand-benefit-card--accent { background: var(--ink-900); border-color: rgba(254,194,39,.45); }
.oled-aqualand-benefit-card__number { display: block; margin-bottom: var(--space-5); color: var(--brand-deep); font: 800 var(--fs-sm)/1 var(--font-body); letter-spacing: var(--ls-wide); }
.oled-aqualand-benefit-card h3 { margin: 0 0 var(--space-3); color: var(--text-strong); font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; }
.oled-aqualand-benefit-card p { margin: 0; color: var(--text-muted); line-height: 1.65; }
.oled-aqualand-benefit-card--accent h3 { color: var(--grey-50); }
.oled-aqualand-benefit-card--accent p { color: var(--text-on-dark-muted); }
.oled-aqualand-steps { background: var(--surface-sunken); }
.oled-aqualand-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.oled-aqualand-step { padding: var(--space-6); background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); }
.oled-aqualand-step > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--brand); color: var(--ink-900); font-weight: var(--fw-bold); }
.oled-aqualand-step h3 { margin: 0 0 var(--space-2); color: var(--text-strong); font-family: var(--font-display); font-size: var(--fs-lg); }
.oled-aqualand-step p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.oled-aqualand-faq__inner { max-width: 900px; }
.oled-aqualand-faq__list { border-top: var(--border-hairline) solid var(--border-subtle); }
.oled-aqualand-faq__item { border-bottom: var(--border-hairline) solid var(--border-subtle); }
.oled-aqualand-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; color: var(--text-strong); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.oled-aqualand-faq__item summary::-webkit-details-marker { display: none; }
.oled-aqualand-faq__item summary span { flex: none; color: var(--brand-deep); font-size: 1.35rem; transition: transform var(--dur-base) var(--ease-out); }
.oled-aqualand-faq__item[open] summary span { transform: rotate(45deg); }
.oled-aqualand-faq__item p { max-width: 70ch; margin: calc(var(--space-2) * -1) 0 var(--space-5); color: var(--text-muted); line-height: 1.65; }
.oled-partner-benefit { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: var(--surface-sunken); border: var(--border-hairline) solid rgba(254,194,39,.45); border-radius: var(--radius-md); }
.oled-partner-benefit--product { padding: var(--space-5) var(--space-6); background: linear-gradient(135deg, var(--surface-sunken), var(--brand-tint)); border-color: rgba(254,194,39,.72); box-shadow: 0 8px 24px rgba(28,24,18,.08); }
.oled-partner-benefit--product .oled-partner-benefit__icon { flex-basis: 40px; width: 40px; height: 40px; }
.oled-partner-benefit--product p { color: var(--text-strong); font-size: var(--fs-base); }
.oled-partner-benefit__icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin-top: 1px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.oled-partner-benefit__icon svg { width: 17px; height: 17px; }
.oled-partner-benefit__content { min-width: 0; flex: 1; }
.oled-partner-benefit__eyebrow { margin: 0 0 var(--space-2); color: var(--brand-deep); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.oled-partner-benefit p { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }
.oled-partner-benefit .vlx-btn { margin-top: var(--space-1); }
.oled-partner-benefit--cart, .oled-partner-benefit--checkout { margin: 0 0 var(--space-5); }
.oled-partner-benefit--cart p, .oled-partner-benefit--checkout p { margin: 0 0 var(--space-3); }
@media (max-width: 760px) {
	.oled-aqualand-benefits, .oled-aqualand-step-grid { grid-template-columns: 1fr; }
	.oled-aqualand-benefit-card { min-height: 0; padding: var(--space-6); }
}

/* unicpo.css */
/*
 * UniCPO Override for Ogledala LED (Vlamix)
 * Uses Vlamix design system tokens to harmonize the configurator.
 */

/* Container reset */
.uni-builderius-container {
    background-color: transparent !important;
    padding: 0 !important;
    font-family: var(--font-body, inherit);
}

/* Info Box (Trenutna povrsina, Otkljucajte popuste) */
.uni-builderius-container .uni-cpo-calculate-info,
.uni-builderius-container > p,
.uni-builderius-container > div[style*="background-color"] { /* Catch inline blue backgrounds */
    background: var(--surface-sunken, #F4F3F0) !important;
    border-radius: var(--radius-lg, 8px) !important;
    padding: var(--space-4, 15px) var(--space-5, 20px) !important;
    margin-bottom: var(--space-5, 24px) !important;
    font-size: var(--fs-sm, 14px) !important;
    color: var(--text-strong, #333) !important;
    line-height: 1.6 !important;
    border: none !important;
}

/* Remove any inline blue background from main options div */
div#uni_cpo_options {
    background-color: transparent !important;
}

/* Labels */
.uni-builderius-container .e-select-label {
    font-weight: var(--fw-semibold, 600) !important;
    font-size: var(--fs-sm, 14px) !important;
    margin-bottom: var(--space-2, 8px) !important;
    display: inline-block !important;
    color: var(--text-strong, #222) !important;
    text-transform: none !important;
}

/* Subtext */
.uni-builderius-container .uni-cpo-subtext {
    font-size: var(--fs-xs, 12px) !important;
    color: var(--text-muted, #777) !important;
    margin-top: var(--space-1, 4px) !important;
    display: block !important;
}

/* Text Inputs, Selects */
.uni-builderius-container input[type="text"],
.uni-builderius-container input[type="number"],
.uni-builderius-container select {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 15px !important;
    border: var(--border-thin, 1px) solid var(--border-default, #E0E0E0) !important;
    border-radius: var(--radius-md, 8px) !important;
    background-color: var(--surface-card, #FFFFFF) !important;
    color: var(--text-strong, #333) !important;
    font-size: var(--fs-base, 15px) !important;
    box-shadow: none !important;
    transition: all var(--dur-base, 0.2s) var(--ease-out, ease-in-out) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.uni-builderius-container input[type="text"]:focus,
.uni-builderius-container input[type="number"]:focus,
.uni-builderius-container select:focus {
    border-color: var(--brand, #FEC227) !important;
    outline: none !important;
    box-shadow: var(--ring-gold, 0 0 0 3px rgba(254, 194, 39, 0.2)) !important;
}

/* Radio buttons container */
.uni-builderius-container .uni_cpo_radio_options {
    list-style: none !important;
    padding: 5px !important;
    margin: 0 0 var(--space-4, 20px) 0 !important;
    border: var(--border-thin, 1px) solid var(--border-default, #E0E0E0) !important;
    border-radius: var(--radius-lg, 8px) !important;
    background-color: var(--surface-card, #FFFFFF) !important;
}

.uni-builderius-container .uni_cpo_radio_options li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: var(--border-hairline, 1px) solid var(--border-subtle, #F0F0F0) !important;
}

.uni-builderius-container .uni_cpo_radio_options li:last-child {
    border-bottom: none !important;
}

.uni-builderius-container .uni_cpo_radio_options li label {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    border-radius: var(--radius-sm, 6px) !important;
    cursor: pointer !important;
    font-size: var(--fs-sm, 14px) !important;
    color: var(--text-strong, #333) !important;
    transition: background-color var(--dur-fast, 0.15s) !important;
}

.uni-builderius-container .uni_cpo_radio_options li input[type="radio"] {
    margin-right: 12px !important;
    accent-color: var(--brand, #FEC227) !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Selected Radio State */
.uni-builderius-container .uni_cpo_radio_options li input[type="radio"]:checked + label,
.uni-builderius-container .uni_cpo_radio_options li.selected label,
.uni-builderius-container .uni_cpo_radio_options li label.selected {
    background-color: var(--brand-tint, #FFF9E6) !important;
    font-weight: var(--fw-medium, 500) !important;
    border-radius: 0 !important; /* because of li border */
}
.uni-builderius-container .uni_cpo_radio_options li:first-child input[type="radio"]:checked + label {
    border-top-left-radius: var(--radius-md, 8px) !important;
    border-top-right-radius: var(--radius-md, 8px) !important;
}
.uni-builderius-container .uni_cpo_radio_options li:last-child input[type="radio"]:checked + label {
    border-bottom-left-radius: var(--radius-md, 8px) !important;
    border-bottom-right-radius: var(--radius-md, 8px) !important;
}

/* Select dropdown wrapper for custom arrow */
.uni-builderius-container .uni-cpo-select-wrapper {
    position: relative;
    display: block;
}
.uni-builderius-container .uni-cpo-select-wrapper::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted, #777);
    pointer-events: none;
}

/* Specific adjustment for Sirina and Visina if they need flex */
.uni-builderius-container .uni_cpo_field_wrap {
    margin-bottom: var(--space-4, 20px) !important;
}

/* Total price section at the bottom */
.uni-builderius-container .uni-cpo-calculate-price {
    font-size: var(--fs-xl, 24px) !important;
    font-weight: var(--fw-bold, 700) !important;
    color: var(--text-strong, #111) !important;
    margin: var(--space-5, 24px) 0 !important;
}