/* ==========================================================================
   Tonery a náplne do tlačiarní - verejná časť
   Dizajn: "papierové" pozadie, atramentové akcenty (cyan/magenta/žltá).
   ========================================================================== */

:root {
   --paper: #EDEFF2;
   --paper-2: #efefef;
   --ink: #141414;
   --ink-2: #161513;
   --cyan: rgba(0, 174, 239, 0.85);
   --cyan-full: rgba(0, 174, 239, 1);
   --cyan-deep: #04222c;
   --magenta: rgba(236, 0, 140, 0.85);
   --yellow: rgba(255, 212, 0, 0.85);
   --line: #D6D8DB;
   --line-dark: #3a3730;
   --muted: #6b665c;
   --muted-dark: #a39d8f;
   --radius: 16px;
   --shadow: 0 10px 24px rgba(33, 24, 16, 0.08);
   --max-width: 1180px;
   --sub: #5B594F;

   /* zachované pre spätnú kompatibilitu s pôvodnými menami premenných */
   --color-bg: var(--paper);
   --color-bg-muted: var(--paper-2);
   --color-border: var(--line);
   --color-text: var(--ink);
   --color-text-muted: var(--muted);
   --color-accent: var(--cyan);
   --color-accent-dark: #0087b8;
   --color-accent-bg: #e4f6fd;
   --color-success: #17803d;
   --color-success-bg: #ecfdf3;
}

@font-face {
   font-family: "Font Awesome 7 Free";
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
   font-family: "Font Awesome 7 Brands";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("../webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
   font-family: "Font Awesome 7 Free";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}

/* archivo-100 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 100;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-100.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-100italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 100;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-100italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-200 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 200;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-200.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-200italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 200;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-200italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-300 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 300;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-300.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-300italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 300;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-300italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-regular - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 400;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-regular.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 400;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-500 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 500;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-500.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-500italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 500;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-500italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-600 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 600;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-600.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-600italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 600;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-600italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-700 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 700;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-700.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-700italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 700;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-700italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-800 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 800;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-800.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-800italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 800;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-800italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-900 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: normal;
   font-weight: 900;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-900.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* archivo-900italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Archivo';
   font-style: italic;
   font-weight: 900;
   src: url('../webfonts/archivo/archivo-v25-latin-ext-900italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-100 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   src: url('../webfonts/inter/inter-v20-latin-ext-100.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-100italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 100;
   src: url('../webfonts/inter/inter-v20-latin-ext-100italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   src: url('../webfonts/inter/inter-v20-latin-ext-200.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-200italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 200;
   src: url('../webfonts/inter/inter-v20-latin-ext-200italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   src: url('../webfonts/inter/inter-v20-latin-ext-300.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 300;
   src: url('../webfonts/inter/inter-v20-latin-ext-300italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   src: url('../webfonts/inter/inter-v20-latin-ext-regular.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 400;
   src: url('../webfonts/inter/inter-v20-latin-ext-italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   src: url('../webfonts/inter/inter-v20-latin-ext-500.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-500italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 500;
   src: url('../webfonts/inter/inter-v20-latin-ext-500italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   src: url('../webfonts/inter/inter-v20-latin-ext-600.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 600;
   src: url('../webfonts/inter/inter-v20-latin-ext-600italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   src: url('../webfonts/inter/inter-v20-latin-ext-700.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 700;
   src: url('../webfonts/inter/inter-v20-latin-ext-700italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   src: url('../webfonts/inter/inter-v20-latin-ext-800.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-800italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 800;
   src: url('../webfonts/inter/inter-v20-latin-ext-800italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   src: url('../webfonts/inter/inter-v20-latin-ext-900.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Inter';
   font-style: italic;
   font-weight: 900;
   src: url('../webfonts/inter/inter-v20-latin-ext-900italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-100 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 100;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-100.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-100italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 100;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-100italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-200 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 200;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-200.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-200italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 200;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-200italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-300 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 300;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-300.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-300italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 300;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-300italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-regular - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 400;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-regular.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 400;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-500 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 500;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-500.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-500italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 500;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-500italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-600 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 600;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-600.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-600italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 600;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-600italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-700 - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: normal;
   font-weight: 700;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-700.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-mono-700italic - latin-ext */
@font-face {
   font-display: swap;
   /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 700;
   src: url('../webfonts/ibm-plex-mono/ibm-plex-mono-v20-latin-ext-700italic.woff2') format('woff2');
   /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



.fa-solid {
   font-family: "Font Awesome 7 Free";
   font-weight: 900;
}

.fa-regular {
   font-family: "Font Awesome 7 Free";
   font-weight: 400;
}

.fa-brands {
   font-family: "Font Awesome 7 Brands";
   font-weight: 400;
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
   font-family: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-weight: 800;
   letter-spacing: -0.01em;
   line-height: 1.2;
   margin: 0 0 0.5em;
}

/* Jednotná typografická škála pre nadpisy naprieč celým webom - platí
   rovnako pre hero na úvodnej stránke ako aj pre .page-title na
   podstránkach (brand/tlačiareň/toner/kontakt/o nás/...), aby H1 aj H2
   mali všade rovnakú veľkosť namiesto toho, aby sa líšili stránku od
   stránky. Konkrétne kontexty (napr. .hero h1, .page-title) si nastavujú
   už len okraje (margin), veľkosť písma zdedia odtiaľto. */
h1 {
   font-size: clamp(1.9rem, 4.2vw, 3rem);
}

h2 {
   font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

h3 {
   font-size: 1rem;
}

.mono,
code {
   font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

a {
   color: var(--cyan-deep);
   text-decoration: underline;
}

a:hover {
   text-decoration: underline;
}

p {
   margin: 0 0 1em;
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

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

:focus-visible {
   outline: 2px solid var(--cyan);
   outline-offset: 2px;
}

.wrap {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 0 32px;
}

.eyebrow {
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--muted);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.eyebrow.on-dark {
   color: var(--muted-dark);
}

.eyebrow::before {
   content: "";
   width: 20px;
   height: 2px;
   background: var(--cyan);
   flex-shrink: 0;
}

/* ---------------- hravé dekoratívne prvky (konfety bodky + jemné škvrny) ---------------- */
/* Pridáva sa cez triedu .decor-dots na sekciu/hero blok - čisto CSS, žiadne
   externé obrázky. ::before kreslí niekoľko farebných bodiek + dve mäkké
   rozmazané škvrny v rohoch, za obsahom (z-index -1), takže sa dá bezpečne
   pridať na akýkoľvek blok s position:relative. */

.decor-dots {
   position: relative;
   isolation: isolate;
}

.decor-dots::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background-repeat: no-repeat;
   background-image:
      /* radial-gradient(circle, var(--cyan) 0%, transparent 72%),
     radial-gradient(circle, var(--magenta) 0%, transparent 72%), */
      radial-gradient(circle, var(--cyan) 0 70%, transparent 71%),
      radial-gradient(circle, var(--magenta) 0 70%, transparent 71%),
      radial-gradient(circle, var(--yellow) 0 70%, transparent 71%),
      radial-gradient(circle, var(--magenta) 0 70%, transparent 71%),
      radial-gradient(circle, var(--cyan) 0 70%, transparent 71%),
      radial-gradient(circle, var(--magenta) 0 70%, transparent 71%),
      radial-gradient(circle, var(--yellow) 0 70%, transparent 71%);
   background-size:
      /* 420px 420px, 360px 360px, */
      25px 25px, 18px 18px, 30px 30px, 15px 15px,
      22px 22px, 26px 26px, 17px 17px;
   background-position:
      97% -10%, -8% 106%,
      6% 20%, 93% 14%, 89% 80%, 4% 86%, 97% 48%, 14% 95%, 55% 4%;
   /* opacity: 0.22; */
}

/* ---------------- ink mark (logo) ---------------- */

.ink-mark {
   position: relative;
   width: 28px;
   height: 24px;
   flex-shrink: 0;
}

.ink-mark span {
   position: absolute;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   mix-blend-mode: multiply;
}

.ink-mark .c {
   background: var(--cyan);
   top: 0;
   left: 4px;
}

.ink-mark .m {
   background: var(--magenta);
   top: 8px;
   left: 0;
}

.ink-mark .y {
   background: var(--yellow);
   top: 8px;
   left: 8px;
}

/* ---------------- header ---------------- */

.utility {
   background: var(--ink);
   color: #EDEAE0;
   font-size: 13px;
}

.utility .wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 8px;
   padding-bottom: 8px;
}

.utility .tag {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.utility .tag i {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--yellow);
   display: inline-block;
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: #fff;
   backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--line);
}

.site-header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
}

.logo {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: 'Archivo', sans-serif;
   font-weight: 800;
   font-size: 18px;
   color: var(--ink);
   text-decoration: none;
}

.logo:hover {
   text-decoration: none;
}

.logo-img {
   display: none;
   /* nahradené ink-mark logom priamo v markupe */
}

.main-nav {
   display: flex;
   gap: 16px;
}

.main-nav a {
   color: var(--ink);
   font-weight: 600;
   font-size: 13.5px;
   padding: 8px 22px;
   text-decoration: none;
   border-radius: 20px;
}

.main-nav a:hover {
   /* background: #f3f1e9; */
   background: var(--paper-2);
}

.main-nav a.active {
   color: #fff;
   text-decoration: none;
   background: var(--ink);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 4px;
   background: none;
   border: 0;
   cursor: pointer;
   padding: 8px;
}

.nav-toggle span {
   width: 22px;
   height: 2px;
   background: var(--ink);
   display: block;
}

/* ---------------- hero + vyhľadávanie ---------------- */

.hero {
   padding: 68px 0 48px;
   position: relative;
}

.hero-inner {
   max-width: 620px;
}

.hero-inner.homehero {
   margin: auto;
   text-align: center;
}

.hero-inner.homehero>.eyebrow {
   justify-content: center;
}

.hero-inner.homehero>.eyebrow:before {
   display: none;
}

.hero h1 {
   margin: 10px 0 16px;
}

.hero__lead {
   color: var(--muted);
   max-width: 480px;
   font-size: 1.05rem;
   margin: auto auto 26px;
}

.search-box {
   max-width: 560px;
   text-align: left;
   margin: auto;
}

.search-tabs,
.toggle-group {
   display: inline-flex;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 24px;
   padding: 4px;
   margin-bottom: 14px;
   gap: 4px;
}

.search-tab,
.toggle-group button {
   border: 0;
   background: transparent;
   padding: 9px 18px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   color: var(--muted);
   cursor: pointer;
   font-family: inherit;
}

.search-tab:hover {
   /* background: #f3f1e9; */
   background: var(--paper-2);
}

.search-tab.active,
.toggle-group button.active {
   background: var(--ink);
   color: var(--paper);
}

.search-input-wrap {
   position: relative;
   display: flex;
   gap: 10px;
}

.search-input {
   flex: 1;
   width: 100%;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 14px;
   padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
   color: var(--ink);
}

.search-input::placeholder {
   color: #a49f92;
}

.search-input:focus {
   outline: none;
   border-color: var(--cyan);
   box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

.search-spinner {
   position: absolute;
   right: 18px;
   top: 50%;
   width: 16px;
   height: 16px;
   margin-top: -8px;
   border: 2px solid var(--line);
   border-top-color: var(--cyan);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

.search-results {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 8px;
   box-shadow: var(--shadow);
   max-height: 340px;
   overflow-y: auto;
   z-index: 20;
}

.search-results__item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   cursor: pointer;
   border-bottom: 1px solid var(--line);
}

.search-results__item:last-child {
   border-bottom: 0;
}

.search-results__item:hover,
.search-results__item.is-active {
   background: var(--paper-2);
}

.search-results__label {
   font-weight: 600;
   font-size: 0.9rem;
   font-family: 'IBM Plex Mono', monospace;
}

.search-results__sub {
   font-size: 0.78rem;
   color: var(--muted);
   white-space: nowrap;
}

.search-results__empty {
   padding: 16px;
   color: var(--muted);
   font-size: 0.88rem;
}

.search-hint {
   margin: 10px 4px 0;
   font-size: 12.5px;
   color: var(--muted);
}

/* ---------------- stats bar ---------------- */

.hero__stats {
   border-top: 1px solid var(--line);
   /* border-bottom: 1px solid var(--line); */
   display: flex;
   gap: 56px;
   padding: 26px 0;
   margin-top: 40px;
   flex-wrap: wrap;
   justify-content: center;
}

.hero__stats>div {
   display: flex;
   flex-direction: column;
   text-align: center;
}

.hero__stats strong {
   font-family: 'Archivo', sans-serif;
   font-size: 26px;
   padding-bottom: 6px;
   border-bottom: 3px solid var(--cyan);
   color: var(--ink);
}

.hero__stats strong>span {
   font-family: 'Archivo', sans-serif;
   font-size: 26px;
   color: var(--ink);
}

.hero__stats>div:nth-child(2) strong {
   border-color: var(--magenta);
}

.hero__stats>div:nth-child(3) strong {
   border-color: var(--yellow);
}

.hero__stats span {
   font-size: 12.5px;
   color: var(--muted);
   margin-top: 6px;
}

/* ---------------- sekcie ---------------- */

.section {
   padding: 36px 0 0;
}

.section-down {
   padding: 36px 0 60px;
}

#znacky {
   padding: 60px 0;
}

.section--muted {
   background: var(--paper);
}

/* .section--narrow {
    max-width: 760px;
} */

.section__title,
.section h2 {
   margin-bottom: 8px;
}

.page-title {
   margin-bottom: 12px;
}

.page-lead,
.section .lead {
   color: var(--muted);
   font-size: 14.5px;
   max-width: 560px;
}

/* ---------------- brand grid ---------------- */

.brand-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
}

.brand-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 22px 10px;
   border: 1px solid var(--line);
   border-radius: 16px;
   font-weight: 700;
   font-size: 12.5px;
   color: var(--ink);
   background: #fff;
   text-align: center;
   transition: border-color 0.15s, transform 0.15s;
   text-decoration: none;
}

/* .brand-grid a:nth-child(6n+1) {
    border-color: var(--cyan);
}

.brand-grid a:nth-child(6n+2) {
    border-color: var(--magenta);
}

.brand-grid a:nth-child(6n+3) {
    border-color: var(--yellow);
} */

.brand-card:hover {
   /* border-color: var(--cyan); */
   transform: translateY(-2px);
   text-decoration: none;
}

.brand-card__badge {
   width: 32px;
   height: 32px;
   border-radius: 7px;
   background: var(--paper-2);
   color: var(--muted);
   font-family: 'Archivo', sans-serif;
   font-weight: 800;
   font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ---------------- dark band ---------------- */

.dark-section,
.dark-band {
   background: var(--ink-2);
   color: var(--paper);
   padding: 60px 0;
}

.dark-section h2,
.dark-band h2 {
   color: var(--paper);
}

.dark-section__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 44px;
   align-items: center;
}

.value-grid,
.benefit-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 26px 36px;
   margin-top: 28px;
}

.value-item,
.benefit-item {
   display: flex;
   gap: 13px;
   align-items: flex-start;
}

.dot,
.benefit-item__icon {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   margin-top: 7px;
   flex-shrink: 0;
   background: var(--cyan);
}

.benefit-item__icon {
   width: 24px;
   height: 24px;
   margin-top: 0;
   background: transparent;
   border: 1.5px solid var(--paper);
   color: var(--paper);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
}

.value-item:nth-child(4n+1) .dot,
.benefit-list .benefit-item:nth-child(4n+1) .benefit-item__icon {
   border-color: var(--cyan);
   color: var(--cyan);
   background: transparent;
}

.value-item:nth-child(4n+2) .dot,
.benefit-list .benefit-item:nth-child(4n+2) .benefit-item__icon {
   border-color: var(--magenta);
   color: var(--magenta);
}

.value-item:nth-child(4n+3) .dot,
.benefit-list .benefit-item:nth-child(4n+3) .benefit-item__icon {
   border-color: var(--yellow);
   color: var(--yellow);
}

.value-item:nth-child(4n+4) .dot,
.benefit-list .benefit-item:nth-child(4n+4) .benefit-item__icon {
   border-color: var(--paper);
   color: var(--paper);
}

.value-item h3,
.benefit-item h3 {
   font-size: 15.5px;
   margin-bottom: 4px;
   color: #fff;
}

.value-item p,
.benefit-item p {
   font-size: 13.5px;
   color: var(--muted-dark);
   margin: 0;
}

.dark-section__illustration {
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius);
   min-height: 220px;
}

.icon-card-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.icon-card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius);
   padding: 22px;
}

.icon-card__icon {
   font-size: 1.4rem;
   margin-bottom: 10px;
   display: block;
}

.icon-card h3 {
   font-size: 1rem;
   color: #fff;
   margin: 0 0 8px;
}

.icon-card p {
   color: var(--muted-dark);
   font-size: 0.9rem;
   margin: 0;
}

.cta-btn {
   border: 1px solid transparent;
   background: var(--cyan-full);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   padding: 8px 22px;
   border-radius: 20px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.cta-btn:hover {
   filter: brightness(0.94);
   text-decoration: none;
}

.cta-btn--outline,
.cta-btn.ghost {
   background: transparent;
   border: 1px solid var(--line-dark);
   color: var(--paper);
}

.cta-btn--outline:hover,
.cta-btn.ghost:hover {
   background: rgba(255, 255, 255, 0.06);
}

/* ---------------- karty (služby) ---------------- */

.cards-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
   margin: 28px 0;
}

.card {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 22px;
   background: #fff;
}

.card h3 {
   font-size: 1rem;
}

.card p {
   color: var(--muted);
   margin-bottom: 0;
   font-size: 0.9rem;
}

.cta-text {
   font-size: 1rem;
   margin-top: 24px;
}

/* ---------------- kontakt hero (text + dekoratívna ilustrácia) ---------------- */

.contact-hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   padding: 14px 0 6px;
}

.contact-hero__text {
   max-width: 560px;
}

.contact-hero__art {
   width: 200px;
   height: auto;
   flex-shrink: 0;
}

/* ---------------- o nás hero + príbeh (text + dekoratívne ilustrácie) ---------------- */

.about-hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   padding: 14px 0 6px;
}

.about-hero__text {
   max-width: 560px;
}

.about-hero__art {
   width: 260px;
   height: auto;
   flex-shrink: 0;
   border-radius: var(--radius);
}

.story {
   display: flex;
   align-items: center;
   gap: 28px;
   margin: 6px 0 60px;
}

.story__art {
   width: 150px;
   height: auto;
   flex-shrink: 0;
}

.story h2 {
   margin-bottom: 10px;
}

.story p:last-child {
   margin-bottom: 0;
}

/* ---------------- ikonové "dlaždice" (farebné kruhové pozadie pre ikonu) ---------------- */

.icon-tile {
   width: 44px;
   height: 44px;
   border-radius: var(--radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   flex-shrink: 0;
   margin-bottom: 10px;
}

.icon-tile--cyan {
   background: var(--color-accent-bg);
   color: var(--cyan-full);
}

.icon-tile--magenta {
   background: #fbe2f0;
   color: var(--magenta);
}

.icon-tile--yellow {
   background: #fdf3ce;
   color: var(--yellow);
}

.icon-tile--mint {
   background: var(--color-success-bg);
   color: var(--color-success);
}

/* ---------------- kontakt ---------------- */

.contact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 18px;
   margin-top: 28px;
}

.contact-item {
   border: 1px solid var(--line);
   /* border-top: 3px solid var(--line); */
   border-radius: var(--radius);
   padding: 22px 20px;
   background: #fff;
   transition: transform 0.15s, box-shadow 0.15s;
}

.contact-item:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow);
}

/* .contact-grid .contact-item:nth-child(3n+1) {
   border-color: var(--color-success);
}

.contact-grid .contact-item:nth-child(3n+2) {
   border-color: var(--cyan);
}

.contact-grid .contact-item:nth-child(3n+3) {
   border-color: var(--magenta)
} */

.contact-item h3 {
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--muted);
   margin-bottom: 6px;
   font-family: inherit;
   font-weight: 700;
}

.contact-item p {
   margin: 0;
   font-size: 1.02rem;
   font-weight: 600;
}

.contact-item a {
   text-decoration: none;
}

.contact-item__hint {
   display: block;
   margin-top: 6px;
   font-size: 12px;
   font-weight: 600;
   color: var(--color-success);
}

/* ---------------- callout (upútavka, napr. "hľadáte konkrétny toner?") ---------------- */

.callout {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 20px 22px;
   margin: 30px 0 60px;
}

.callout__icon {
   font-size: 1.5rem;
   flex-shrink: 0;
   line-height: 1;
}

.callout h3 {
   font-size: 0.95rem;
   margin-bottom: 4px;
}

.callout p {
   font-size: 13.5px;
   color: var(--muted);
   margin: 0;
}

/* ---------------- farebné dlaždice s číslami (napr. štatistiky na "O nás") ---------------- */

.stat-tiles {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   margin: 28px 0 50px;
}

.stat-tile {
   border-radius: var(--radius);
   padding: 20px 18px;
   color: #141414;
   border: 1px solid var(--line);
   background: #fff;
}

.stat-tile strong,
.stat-tile strong>span {
   display: block;
   font-family: 'Archivo', sans-serif;
   font-size: 1.6rem;
   margin-bottom: 4px;
}

.stat-tile span {
   font-size: 12.5px;
   opacity: 0.92;
}

.stat-tile i {
   padding: 8px;
   border-radius: 8px;
   width: 30px;
   height: 30px;
}

.stat-tile:nth-child(4n+1) i {
   background: rgba(0, 174, 239, 0.15);
   color: var(--cyan);
}

.stat-tile:nth-child(4n+2) i {
   background: rgba(236, 0, 140, 0.15);
   color: var(--magenta);
}

.stat-tile:nth-child(4n+3) i {
   background: rgba(255, 212, 0, 0.15);
   color: var(--yellow);
}

.stat-tile:nth-child(4n+4) i {
   background: rgba(20, 20, 20, 0.15);
   color: #141414;
}

/* ---------------- kamenná predajňa / visit ---------------- */

.visit {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 44px;
   align-items: center;
   padding: 25px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
}

.visit-map {
   /* height: 260px; */
   border-radius: var(--radius);
   background:
      linear-gradient(var(--paper-2) 1px, transparent 1px),
      linear-gradient(90deg, var(--paper-2) 1px, transparent 1px);
   background-size: 24px 24px;
   background-color: #fff;
   border: 1px solid var(--line);
   position: relative;
   overflow: hidden;
}

.visit-map .pin {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -100%);
   font-size: 34px;
   line-height: 1;
   filter: drop-shadow(0 4px 4px rgba(33, 24, 16, 0.18));
}

.visit-list li {
   display: flex;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid var(--line);
   font-size: 14.5px;
}

.visit-list li:last-child {
   border-bottom: none;
}

.visit-list b {
   font-weight: 600;
   min-width: 90px;
   display: inline-block;
}

/* ---------------- ako to funguje (kroky) ---------------- */

.steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.step-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 24px;
}

.step-num {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Archivo', sans-serif;
   font-weight: 800;
   font-size: 14px;
   color: #fff;
   margin-bottom: 16px;
   background: var(--cyan);
}

.step-card:nth-child(2) .step-num {
   background: var(--magenta);
}

.step-card:nth-child(3) .step-num {
   background: #c99a00;
}

.step-card h3 {
   font-size: 16px;
   margin-bottom: 6px;
}

.step-card p {
   font-size: 13.5px;
   color: var(--muted);
   margin: 0;
}

/* ---------------- breadcrumb + title row ---------------- */

.breadcrumb {
   padding: 36px 0 0;
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 18px;
}

.toner.breadcrumb,
.combo.breadcrumb {
  padding: 0;
  margin-bottom: 36px;
}

.breadcrumb a {
   color: var(--muted);
   text-decoration: none;
}

.breadcrumb a:hover {
   color: var(--cyan-deep);
}

.title-row {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 0 4px;
}

.title-row .brand-card__badge,
.title-row__badge {
   width: 46px;
   height: 46px;
   border-radius: 9px;
   font-size: 16px;
}

.subline {
   font-size: 13.5px;
   color: var(--muted);
   margin-top: 2px;
}

.subline b {
   color: var(--ink);
   font-weight: 700;
}

/* ---------------- brand hero (dvojstĺpcová hlavička značky) ---------------- */

.brand-hero {
   display: flex;
   align-items: flex-start;
   gap: 40px;
   padding: 18px 0 34px;
}

.brand-hero__aside {
   flex: 0 0 375px;
   max-width: 375px;
}

.brand-hero__logo {
   width: 375px;
   height: 375px;
   max-width: 100%;
   aspect-ratio: 1 / 1;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   margin-bottom: 16px;
}

.brand-hero__logo img {
   max-width: 68%;
   max-height: 68%;
   width: auto;
   height: auto;
   object-fit: contain;
}

.brand-hero__logo--badge {
   background: var(--paper-2);
   color: var(--muted);
   font-family: 'Archivo', sans-serif;
   font-weight: 800;
   font-size: 4rem;
}

.brand-hero__title {
   margin-bottom: 6px;
}

.brand-hero__text {
   flex: 1;
   min-width: 260px;
   padding-top: 6px;
}

.brand-hero__text .subline {
   margin-bottom: 16px;
}

.brand-hero__lead {
   max-width: none;
   font-size: 15px;
   margin-bottom: 0;
}

/* ---------------- toolbar / pill filtre / rýchly filter ---------------- */

.toolbar {
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
   margin: 22px 0 4px;
}

.filter-input {
   flex: 0 1 260px;
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 8px;
   padding: 10px 14px;
   font-size: 13.5px;
   color: var(--ink);
}

.filter-input::placeholder {
   color: #a49f92;
}

.filter-input:focus {
   outline: none;
   border-color: var(--cyan);
   box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

.chip-row,
.pill-row {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   padding: 16px 0 22px;
   border-bottom: 1px solid var(--line);
   margin-bottom: 22px;
}

.chip,
.pill {
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 20px;
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 500;
   color: var(--muted);
   transition: all 0.12s;
   text-decoration: none;
}

.chip:hover,
.pill:hover {
   border-color: var(--cyan);
   color: var(--ink);
   text-decoration: none;
}

.chip--active,
.pill.active,
.pill--active {
   background: var(--ink);
   border-color: var(--ink);
   color: var(--paper);
   text-decoration: none;
}

.result-count {
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 14px;
}

.result-count b {
   color: var(--ink);
}

.view-toggle {
   display: inline-flex;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 4px;
   margin-bottom: 20px;
}

.view-toggle a {
   padding: 7px 18px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 0.85rem;
   color: var(--muted);
   text-decoration: none;
}

.view-toggle a.active {
   background: var(--ink);
   color: var(--paper);
   text-decoration: none;
}

/* ---------------- zoznamy modelov (model-chip grid) ---------------- */

.model-list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 9px;
}

.model-list--columns {
   grid-template-columns: repeat(3, 1fr);
}

.model-list li {
   border: 0;
   padding: 0;
   font-size: 13.5px;
}

.model-list li a {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   height: 100%;
   gap: 8px;
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 8px;
   padding: 12px 14px;
   font-weight: 500;
   color: var(--ink);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   transition: border-color 0.12s, transform 0.12s;
   text-decoration: none;
}

.model-list li a:hover {
   border-color: var(--cyan);
   transform: translateX(2px);
   text-decoration: none;
}

.model-list li a::after {
   content: "→";
   opacity: 0;
   color: var(--cyan);
   font-family: 'Inter', sans-serif;
   transition: opacity 0.12s;
}

.model-list li a:hover::after {
   opacity: 1;
}

.empty-state {
   padding: 40px 0;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
}

/* ---------------- toner grid (karty na stránke tlačiarne) ---------------- */

.toner-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 16px;
   padding-bottom: 60px;
}

.toner-card {
   display: flex;
   flex-direction: column;
   gap: 6px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 0 0 16px;
   background: #fff;
   color: var(--ink);
   overflow: hidden;
   transition: box-shadow 0.15s, transform 0.15s;
   text-decoration: none;
}

.toner-card:hover {
   box-shadow: var(--shadow);
   transform: translateY(-3px);
   text-decoration: none;
}

.toner-card__type,
.toner-card h3,
.toner-card__codes,
.toner-card__price {
   padding-left: 16px;
   padding-right: 16px;
}

.toner-card__type {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--muted);
   font-weight: 700;
}

.toner-card h3 {
   font-size: 1rem;
   margin: 4px 0;
   font-family: 'IBM Plex Mono', monospace;
   font-weight: 500;
}

.toner-card__codes {
   font-size: 0.8rem;
   color: var(--muted);
   margin: 0;
}

.toner-card__price {
   margin-top: auto;
   font-weight: 700;
   color: var(--cyan-deep);
}

.toner-card__image {
   width: 100%;
   height: 100%;
   background: var(--paper-2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
   overflow: hidden;
   border-bottom: 3px solid var(--cyan);
}

.toner-grid .toner-card:nth-child(4n+2) .toner-card__image {
   border-bottom-color: var(--magenta);
}

.toner-grid .toner-card:nth-child(4n+3) .toner-card__image {
   border-bottom-color: var(--yellow);
}

.toner-grid .toner-card:nth-child(4n+4) .toner-card__image {
   border-bottom-color: var(--ink);
}

.toner-card__image img {
   /* max-height: 72px; */
   width: auto;
   height: 100%;
}

.related {
   margin-top: 44px;
   padding-bottom: 60px;
}

/* ---------------- pagination ---------------- */

.pagination {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   width: fit-content;
   margin-top: 28px;
   background: #fff;
   padding: 8px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   justify-content: center;
   text-align: center;
   align-items: center;
   margin-left: auto;
   margin-right: auto;
}

.pagination a,
.pagination span.pagination__arrow--disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 34px;
   height: 34px;
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--muted);
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
}

.pagination a:hover {
   border-color: var(--cyan);
   color: var(--ink);
   text-decoration: none;
}

.pagination a.active {
   background: var(--ink);
   border-color: var(--ink);
   color: var(--paper);
   text-decoration: none;
}

.pagination__arrow--disabled {
   opacity: 0.35;
}

.pagination__dots {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   color: var(--muted);
}

/* ---------------- obrázky produktov (detail tlačiarne / tonera) ---------------- */

.product-image {
   width: 100%;
   max-width: 30%;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow: hidden;
   background: #fff;
   margin-bottom: 20px;
}

.product-image img {
   width: 100%;
   height: 325px;
   display: block;
   object-fit: cover;
}

.detail-layout {
   display: flex;
   gap: 32px;
   align-items: flex-start;
   flex-wrap: wrap;
   padding-bottom: 30px;
}

.detail-layout__body {
   flex: 1;
   min-width: 260px;
}

/* 
@media (min-width: 721px) {
    .detail-layout__body {
       order: 1;
    }
    .product-image {
       order: 2;
    }
} */

/* ---------------- badge / potvrdenie kompatibility ---------------- */

.badge {
   display: inline-block;
   background: #fff;
   color: var(--cyan-deep);
   font-size: 0.74rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   padding: 5px 12px;
   border-radius: 999px;
   margin-bottom: 12px;
   border: 1px solid var(--line);
}

.badge-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 12px;
}

.badge-row .badge {
   margin-bottom: 0;
}

.badge--stock {
   background: var(--color-success-bg);
   color: var(--color-success);
   border-color: var(--color-success);
}

.spec-line {
   font-size: 14.5px;
   color: var(--ink);
   margin-bottom: 10px;
}

.title-row__logo,
.brand-card__logo {
   display: block;
   object-fit: contain;
}

.title-row .title-row__logo {
   width: 46px;
   height: 46px;
   border-radius: 9px;
   background: var(--paper-2);
   padding: 6px;
}

.brand-card__logo {
   width: 74px;
   height: 32px;
   padding: 4px;
   background: var(--paper-2);
   border-radius: 7px;
}

.compat-confirm {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--color-success-bg);
   color: var(--color-success);
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 999px;
   font-size: 0.85rem;
   margin-bottom: 16px;
}

.price-display {
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--cyan-deep);
   font-family: 'Archivo', sans-serif;
}

/* ---------------- order CTA (3 možnosti objednávky namiesto ceny) ---------------- */

.order-cta {
   margin-top: 6px;
}

.order-cta__lead {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 14px;
}

.order-cta__grid {
   display: grid;
   /* grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));*/
   grid-template-columns: repeat(2, 1fr);
   gap: 14px;
}

.order-cta__card {
   display: flex;
   flex-direction: column;
   gap: 3px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 18px 16px;
   background: #fff;
   color: var(--ink);
   transition: border-color 0.15s, transform 0.15s;
   text-decoration: none;
}

a.order-cta__card:hover {
   border-color: var(--cyan);
   transform: translateY(-2px);
   text-decoration: none;
}

.order-cta__card .icon-tile {
   margin-bottom: 10px;
}

.order-cta__title {
   font-weight: 700;
   font-size: 14.5px;
}

.order-cta__desc {
   font-size: 12.5px;
   color: var(--muted);
   margin-bottom: 4px;
}

.order-cta__action {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   font-weight: 600;
   color: var(--cyan-deep);
   /* margin-top: auto; */
}

/* ---------------- FAQ ---------------- */

.faq-section__grid {
   display: grid;
   grid-template-columns: 1fr 1.3fr;
   gap: 48px;
   align-items: start;
}

.faq-contact-grid {
   display: grid;
   /* grid-template-columns: repeat(2, 1fr); */
   gap: 14px;
   margin-top: 24px;
}

.faq-contact-card {
   display: flex;
   align-items: center;
   gap: 12px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 14px 16px;
   background: #fff;
}

.faq-contact-card:hover {
   text-decoration: none;
   border-color: var(--cyan);
}

.faq-contact-card__icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--paper-2);
   color: var(--cyan-deep);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.1rem;
}

.faq-contact-card strong {
   display: block;
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   color: var(--muted);
   font-weight: 700;
}

.faq-accordion {
   display: flex;
   flex-direction: column;
}

.faq-item {
   border-bottom: 1px solid var(--line);
   background: transparent;
   padding: 0;
   border-radius: 0;
}

.faq-item summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 18px 16px;
   font-weight: 500;
   font-size: 14.5px;
   cursor: pointer;
   list-style: none;
   border-left: 3px solid transparent;
   transition: border-color 0.15s;
}

.faq-item[open] summary {
   border-left-color: var(--cyan);
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary::after {
   content: "+";
   flex-shrink: 0;
   font-size: 1.5rem;
   color: var(--magenta);
   font-weight: 400;
   transition: transform 0.2s, color 0.2s;
}

.faq-item[open] summary::after {
   content: "+";
   transform: rotate(45deg);
   color: var(--cyan);
}

.faq-item p {
   color: var(--muted);
   padding: 0 4px 18px 14px;
   margin: 0;
   max-width: 640px;
   font-size: 13.5px;
}

/* ---------------- recenzie (carousel) ---------------- */

.reviews-section {
   background: var(--paper);
}

.reviews-track-wrap {
   position: relative;
}

.reviews-track-wrap::before {
   content: "";
   position: absolute;
   top: 0;
   left: -2px;
   bottom: 18px;
   width: 60px;
   pointer-events: none;
   background: linear-gradient(to left,
         transparent,
         var(--paper));
}

.reviews-track-wrap::after {
   content: "";
   position: absolute;
   top: 0;
   right: -2px;
   bottom: 18px;
   width: 60px;
   pointer-events: none;
   background: linear-gradient(to right,
         transparent,
         var(--paper));
}

.reviews-track {
   display: flex;
   gap: 16px;
   overflow-x: auto;
   scroll-snap-type: none;
   padding: 6px 2px 18px;
   margin: 0 -2px;
   cursor: grab;
   user-select: none;
   scrollbar-width: none;
}

.reviews-track.is-dragging {
   cursor: grabbing;
   scroll-snap-type: none;
}

.reviews-track::-webkit-scrollbar {
   height: 6px;
}

.reviews-track::-webkit-scrollbar-thumb {
   background: var(--line);
   border-radius: 4px;
}

.review-card {
   flex: 0 0 280px;
   scroll-snap-align: start;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 20px;
}

.review-card__stars {
   color: var(--yellow);
   letter-spacing: 2px;
   font-size: 0.95rem;
   margin-bottom: 10px;
}

.review-card__stars .empty {
   color: var(--line);
}

.review-card__text {
   font-size: 0.9rem;
   color: var(--ink);
   margin-bottom: 12px;
}

.review-card__author {
   font-size: 0.78rem;
   color: var(--muted);
   font-weight: 600;
}

.reviews-nav {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: -6px;
}

.reviews-nav button {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--ink);
   line-height: 0.9;
   cursor: pointer;
   align-items: center;
   font-size: 0.7rem;
}

.reviews-nav button:hover {
   border-color: var(--cyan);
   color: var(--cyan-deep);
}

/* ---------------- upper footer ---------------- */

.upper-footer {
   background: var(--paper-2);
   border-top: 1px solid var(--line);
   padding: 40px 0;
}

/* ---------------- admin preview bar (údržba, admin je prihlásený) ---------------- */

.admin-preview-bar {
   background: var(--ink-2);
   color: #fff;
   font-size: 0.85rem;
   text-align: center;
   padding: 8px 16px;
}

.admin-preview-bar a {
   color: #7fd4f7;
   font-weight: 600;
   margin-left: 8px;
}

/* ---------------- footer ---------------- */

.site-footer {
   background: #fff;
   color: var(--sub);
   margin-top: 0;
}

.foot-bar {
   height: 6px;
   background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
}

.wrap.site-footer__inner {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
   padding: 50px 32px;
}

@media (max-width: 900px) {
   .wrap.site-footer__inner {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 579px) {
   .wrap.site-footer__inner {
      grid-template-columns: 1fr;
   }
   .product-image {
       max-width: 100%;
     }
}

/* .site-footer .logo {
    color: var(--paper);
} */

.footer-logo {
   margin-bottom: 10px;
   align-items: flex-start;
}

.footer-logo .logo-img {
   display: none;
}

.site-footer__inner>div.fcol {
   display: flex;
   flex-direction: column;
   font-size: 13px;
}

.site-footer__inner>div.fcol h4 {
   color: var(--ink);
   font-size: 13px;
   margin-top: 0;
   margin-bottom: 14px;
   font-weight: 700;
}

.site-footer__inner>div.fcol a {
   margin-bottom: 8px;
   color: var(--sub);
}

.site-footer__inner>div.fcol a:hover {
   color: var(--cyan-full);
}

.site-footer__bottom {
   border-top: 1px solid var(--line);
   padding: 20px 32px;
   font-size: 12px;
   color: var(--sub);
}

.site-footer__inner>div.fcol a.footbtn {
   width: fit-content;
   color: #fff;
}

.site-footer__inner>div.fcol.contacts a {
   display: flex;
   gap: 5px;
   align-items: baseline;
}

/* 
.site-footer__bottom,
.site-footer .wrap.site-footer__bottom {
    padding-left: 32px;
    padding-right: 32px;
} */

/* ---------------- maintenance / error ---------------- */

.maintenance-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: var(--paper-2);
}

.maintenance-box {
   max-width: 460px;
   text-align: center;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 40px 32px;
   box-shadow: var(--shadow);
}

.error-page {
   text-align: left;
}

/* ---------------- responzivita ---------------- */

@media (max-width: 900px) {
   .wrap {
      padding: 0 20px;
   }

   .brand-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .value-grid,
   .benefit-list,
   .dark-section__grid,
   .cards-grid,
   .faq-section__grid,
   .visit {
      grid-template-columns: 1fr;
   }

   .icon-card-grid {
      grid-template-columns: 1fr;
   }

   .model-list {
      grid-template-columns: repeat(3, 1fr);
   }

   .brand-hero__aside {
      flex-basis: 260px;
   }

   .brand-hero__logo {
      width: 260px;
      height: 260px;
   }

   .order-cta__grid {
      grid-template-columns: 1fr 1fr;
   }

   .stat-tiles {
      grid-template-columns: repeat(2, 1fr);
   }

   .contact-hero__art {
      width: 140px;
   }

   .about-hero__art {
      width: 200px;
   }

   .site-footer__bottom {
      padding: 20px 20px;
   }
}

.main-nav__address { display: none; }

@media (max-width: 1080px) {

   .steps,
   .site-footer__inner {
      grid-template-columns: 1fr;
   }

   .nav-toggle {
      display: flex;
   }

   .main-nav {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      flex-direction: column;
      gap: 0;
      display: none;
      padding: 8px 20px 16px;
   }
   
   .main-nav.is-open {
      display: flex;
   }
   
   .main-nav a {
      padding: 12px 10px;
      border-bottom: 1px solid var(--line);
      text-align: center;
   }
   
   .main-nav a.active {
      color: var(--cyan-full);
      background: none;
   }
   .main-nav__address { display: block; }
}

@media (min-width: 580px) and (max-width: 768px) {
    .product-image {
       max-width: 50%;
    }
}

@media (max-width: 768px) {
   .hero {
      padding: 44px 0 36px;
   }

   /* na mobile chceme 2 stĺpce namiesto 1 pri výbere značky a zoznamoch modelov */
   .brand-grid,
   .model-list,
   .model-list--columns {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   .faq-contact-grid {
      grid-template-columns: 1fr;
   }

   .detail-layout {
      flex-direction: column;
   }

   .review-card {
      flex-basis: 240px;
   }

   .brand-hero {
      flex-direction: column;
      gap: 18px;
   }

   .brand-hero__aside,
   .brand-hero__logo {
      max-width: none;
      width: 100%;
   }

   .brand-hero__logo {
      height: auto;
      aspect-ratio: 1 / 1;
      max-width: 260px;
   }

   .brand-hero__text {
      padding-top: 0;
   }


   .order-cta__grid {
      grid-template-columns: 1fr;
   }

   .contact-hero {
      flex-direction: column;
      align-items: flex-start;
   }

   .contact-hero__art {
      display: none;
   }

   .about-hero {
      flex-direction: column;
      align-items: flex-start;
   }

   .about-hero__art {
      display: none;
   }

   .story {
      flex-direction: column;
      align-items: flex-start;
   }

   .story__art {
      width: 120px;
   }
}


a.cta-btn,
a.btn,
.site-footer a {
   text-decoration: none;
}

.faq-search {
   background: var(--white, #fff);
   border: 1px solid var(--line, #e4e0d2);
   border-radius: 14px;
   padding: 16px 18px;
   display: flex;
   align-items: center;
   gap: 10px;
   max-width: 560px;
   margin-top: 28px;
}

.faq-search i {
   color: var(--sub, #5b594f);
}

.faq-search input {
   border: none;
   outline: none;
   font-size: 15px;
   width: 100%;
   background: transparent;
   color: inherit;
}

.faq-categories {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   padding: 28px 0 44px;
}

.faq-categories__link {
   font-size: 13px;
   font-weight: 700;
   padding: 10px 16px;
   border-radius: 20px;
   background: var(--white, #fff);
   border: 1px solid var(--line, #e4e0d2);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: inherit;
   text-decoration: none;
}

.faq-categories__link:hover {
   text-decoration: none;
   border-color: var(--cyan);
}

.dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

.dot--cyan {
   background: #00b4ef;
}

.dot--magenta {
   background: #ef0080;
}

.dot--yellow {
   background: #ffdd00;
}

.dot--key {
   background: #141414;
}

.faq-group {
   margin-bottom: 50px;
   scroll-margin-top: 100px;
}

.faq-group__head {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
}

.faq-group__head .dot {
   width: 9px;
   height: 9px;
   margin-top: 0;
}

.faq-group__head h2 {
   margin-bottom: 0;
}

.faq-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.faq-item {
   background: var(--white, #fff);
   border: 1px solid var(--line, #e4e0d2);
   border-radius: 14px;
   overflow: hidden;
}

.faq-item__q {
   list-style: none;
   cursor: pointer;
   padding: 18px 20px;
   font-size: 14px;
   font-weight: 700;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
}

.faq-item__q::-webkit-details-marker {
   display: none;
}

.faq-item__icon {
   color: #ef0080;
   flex-shrink: 0;
   transition: transform .15s ease;
}

.faq-item[open] .faq-item__icon {
   transform: rotate(45deg);
}

.faq-item__a {
   font-size: 13px;
   color: var(--sub, #5b594f);
   padding: 0 20px 18px;
   margin: 0 20px 18px;
   border-top: 1px solid var(--line, #e4e0d2);
   padding-top: 12px;
}

.cta-panel {
   background: var(--cyan-full);
   padding: 40px 44px;
   border-radius: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 8px;
   margin-bottom: 60px;
}

.cta-panel h3 {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   margin: 0;
}

.cta-panel p {
   font-size: 13px;
   color: #fff;
   margin: 4px 0 0;
}

.cta-panel .btn--primary {
   background: #ffdf15;
   color: #141414;
   font-weight: 700;
   padding: 12px 22px;
   border-radius: 20px;
   text-decoration: none;
   white-space: nowrap;
}

.faq-categories__link .dot {
   margin-top: 0;
}


/* Page-scoped styly pre GDPR / legal stranky - umiestni do assets/css/gdpr.css
   (rovnaky subor moze pouzit aj obchodne-podmienky.php / cookies.php, ak maju rovnaku strukturu). */

.legal-updated {
   font-size: 13px;
   color: var(--sub, #5b594f);
   margin-top: 10px;
}

.legal-toc {
   display: flex;
   flex-direction: column;
   gap: 6px;
   background: var(--white, #fff);
   border: 2px solid var(--line, #e4e0d2);
   border-radius: 14px;
   padding: 18px 20px;
   max-width: 420px;
   margin-top: 24px;
}

.legal-toc a {
   font-size: 13px;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
}

.legal-toc a:hover {
   text-decoration: underline;
}

.legal-doc {
   max-width: 760px;
}

.legal-section {
   margin-top: 44px;
   padding-top: 8px;
   scroll-margin-top: 100px;
}

.legal-section:first-child {
   margin-top: 32px;
}

.legal-section h2 {
   font-size: 19px;
   font-weight: 700;
   letter-spacing: -0.01em;
   margin-bottom: 12px;
}

.legal-section p {
   font-size: 14px;
   color: var(--sub, #5b594f);
   margin-bottom: 12px;
}

.legal-section p:last-child {
   margin-bottom: 0;
}

.legal-section a {
   color: var(--cyan-full);
   font-weight: 600;
}

.legal-list {
   font-size: 14px;
   color: var(--sub, #5b594f);
   padding-left: 20px;
   margin-bottom: 12px;
   list-style: disc;
}

.legal-list li {
   margin-bottom: 8px;
   line-height: 1.6;
}

.legal-list strong {
   color: var(--key, #141414);
}

.legal-note {
   background: #fff;
   border-radius: 10px;
   padding: 10px 14px;
   font-size: 12px;
   font-family: 'JetBrains Mono', monospace;
   color: var(--sub, #5b594f);
}


@media (max-width: 524px) {
   .hero__stats>div {
      width: 40%;
   }
}

@media (min-width: 901px) {
   .fcol.leftmove {
      padding-left: 60px;
   }
}

.google-reviews-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #ffffff;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 8px 16px;
   margin-top: 12px;
   margin-bottom: 20px;
   font-size: 14px;
   color: #5b6472;
   max-width: 100%;
   flex-wrap: wrap;
   row-gap: 4px;
}

.google-reviews-text {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
}

.google-reviews-text strong {
   color: #1a1f2b;
   font-weight: 700;
   white-space: nowrap;
}

.google-reviews-text .stars {
   color: var(--yellow);
   letter-spacing: 1px;
   white-space: nowrap;
}

.google-reviews-text .rating-count {
   white-space: nowrap;
}

.google-reviews-text a {
   color: var(--cyan-full);
   text-decoration: none;
   font-weight: 600;
   white-space: nowrap;
}

.google-reviews-text a:hover {
   text-decoration: underline;
}

@media (max-width: 480px) {
   .google-reviews-badge {
      padding: 8px 14px;
      font-size: 13px;
      border-radius: 16px;
      text-align: center;
      justify-content: center;
   }
}

/* Page-scoped styly pre GDPR / legal stranky - umiestni do assets/css/gdpr.css
   (rovnaky subor moze pouzit aj obchodne-podmienky.php / cookies.php, ak maju rovnaku strukturu). */

.legal-updated {
   font-size: 13px;
   color: var(--sub, #5b594f);
   margin-top: 10px;
}

.legal-toc {
   display: flex;
   flex-direction: column;
   gap: 6px;
   background: var(--white, #fff);
   border: 2px solid var(--line, #e4e0d2);
   border-radius: 14px;
   padding: 18px 20px;
   max-width: 420px;
   margin-top: 24px;
}

.legal-toc a {
   font-size: 13px;
   font-weight: 600;
   color: inherit;
   text-decoration: none;
}

.legal-toc a:hover {
   text-decoration: underline;
}

.legal-doc {
   max-width: 760px;
   padding-bottom: 60px;
}

.legal-section {
   margin-top: 44px;
   padding-top: 8px;
}

.legal-section:first-child {
   margin-top: 32px;
}

.legal-section h2 {
   font-size: 19px;
   font-weight: 700;
   letter-spacing: -0.01em;
   margin-bottom: 12px;
}

.legal-section p {
   font-size: 14px;
   color: var(--sub, #5b594f);
   margin-bottom: 12px;
}

.legal-section p:last-child {
   margin-bottom: 0;
}

.legal-list {
   font-size: 14px;
   color: var(--sub, #5b594f);
   padding-left: 20px;
   margin-bottom: 12px;
}

.legal-list li {
   margin-bottom: 8px;
   line-height: 1.6;
}

.legal-list strong {
   color: var(--key, #141414);
}

.legal-list--numbered {
   list-style: decimal;
}

.legal-list--numbered>li::marker {
   font-weight: 700;
   color: var(--key, #141414);
}

.legal-list ul {
   list-style: disc;
   margin: 8px 0 4px 4px;
   padding-left: 16px;
}

.legal-list ul li {
   margin-bottom: 6px;
}

.legal-note {
   background: var(--cream, #f0ede4);
   border-radius: 10px;
   padding: 10px 14px;
   font-size: 12px;
   color: var(--sub, #5b594f);
}

.store-visit {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   background: #fff;
   padding: 64px 24px;
}

.store-visit__inner {
   margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 460px) 1fr;
   gap: 48px;
   align-items: center;
}

.store-visit__tag {
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: 700;
   color: var(--muted);
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
}

.store-visit__tag::before {
   content: "";
   width: 20px;
   height: 2px;
   background: var(--cyan);
   flex-shrink: 0;
}

.store-visit__heading {
   font-weight: 800;
   letter-spacing: -0.01em;
   line-height: 1.15;
   font-size: clamp(1.6rem, 3vw, 2.1rem);
   margin: 0 0 12px;
   color: #1a1f2b;
}

.store-visit__lead {
   font-size: 15px;
   color: var(--muted);
   margin: 0 0 28px;
   max-width: 40ch;
}

.store-visit__facts {
   list-style: none;
   margin: 0 0 28px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.store-visit__fact {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
}

.store-visit__fact:first-child {
   padding-top: 0;
}

.store-visit__fact:last-child {
   border-bottom: none;
}

.store-visit__icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   color: var(--cyan-deep, var(--cyan));
   margin-top: 2px;
}

.store-visit__fact-label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--muted);
   margin-bottom: 2px;
}

.store-visit__fact-value {
   display: block;
   font-size: 15px;
   color: #1a1f2b;
   line-height: 1.5;
}

.store-visit__cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--cyan-full, var(--cyan-deep));
   color: #fff;
   font-weight: 700;
   font-size: 14px;
   text-decoration: none;
   padding: 12px 22px;
   border-radius: 999px;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.store-visit__cta:hover {
   text-decoration: none;
   transform: translateY(-1px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.store-visit__cta svg {
   transition: transform 0.15s ease;
}

.store-visit__cta:hover svg {
   transform: translateX(2px);
}

.store-visit__map {
   position: relative;
   display: block;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid var(--line);
   aspect-ratio: 16 / 11;
   background: #fff;
}

.store-visit__map-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.3s ease;
}

.store-visit__map:hover .store-visit__map-img {
   transform: scale(1.03);
}

.store-visit__map-badge {
   position: absolute;
   left: 16px;
   bottom: 16px;
   background: #fff;
   color: #1a1f2b;
   font-size: 13px;
   font-weight: 700;
   padding: 8px 14px;
   border-radius: 999px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
   .store-visit__inner {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .store-visit__map {
      aspect-ratio: 16 / 9;
      order: -1;
   }
}

@media (max-width: 480px) {
   .store-visit {
      padding: 40px 18px;
   }

   .store-visit__fact {
      gap: 12px;
   }
}

.site-header__actions {
   display: flex;
   align-items: center;
   gap: 14px;
}

/* NOVÝ súbor, umiestni do assets/css/odstupenie.css. Nezasahuje do žiadneho existujúceho
   CSS - iba štýly pre formulár na stránke Odstúpenie od kúpnej zmluvy. Reuse gdpr.css
   (.legal-doc, .legal-section a pod.) pre okolitý text, tu je len samotný formulár. */

.odstupenie-form {
   margin-top: 24px;
}

.form-row {
   margin-bottom: 20px;
}

.form-row label {
   display: block;
   font-size: 13px;
   font-weight: 700;
   margin-bottom: 6px;
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.form-grid .form-row {
   margin-bottom: 0;
}

.form-grid {
   margin-bottom: 20px;
}

.odstupenie-form input[type="text"],
.odstupenie-form input[type="email"],
.odstupenie-form input[type="tel"],
.odstupenie-form input[type="date"],
.odstupenie-form textarea {
   width: 100%;
   font-family: inherit;
   font-size: 14px;
   border: 2px solid var(--line, #e4e0d2);
   border-radius: 10px;
   padding: 12px 14px;
   background: var(--white, #fff);
   color: inherit;
}

.odstupenie-form input:focus,
.odstupenie-form textarea:focus {
   outline: none;
   border-color: var(--cyan, #00b4ef);
}

.odstupenie-form textarea {
   resize: vertical;
   min-height: 80px;
}

.field-error {
   display: block;
   font-size: 12px;
   color: #a32d2d;
   margin-top: 6px;
}

.form-checkbox {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 13px;
   color: var(--sub, #5b594f);
   margin-bottom: 8px;
   cursor: pointer;
}

.form-checkbox input {
   margin-top: 3px;
}

.form-note {
   font-size: 12px;
   color: var(--sub, #5b594f);
   margin-top: 16px;
}

.form-alert {
   background: #fceaea;
   border: 2px solid #f0a3a3;
   color: #791f1f;
   font-size: 13px;
   font-weight: 600;
   border-radius: 12px;
   padding: 14px 16px;
   margin-top: 20px;
}

.form-success {
   background: #eaf3de;
   border: 2px solid #97c459;
   color: #27500a;
   border-radius: 16px;
   padding: 24px;
   margin-top: 24px;
}

.form-success strong {
   display: block;
   font-size: 16px;
   margin-bottom: 6px;
}

.form-success p {
   font-size: 13px;
   margin: 0;
}

/* Honeypot - skryté aj vizuálne aj z tabulátora/screenreaderov, nie cez display:none
   (niektoré filtre botov to ignorujú), ale mimo viditeľnej oblasti. */
.hp-field {
   position: absolute;
   left: -9999px;
   top: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

@media (max-width:700px) {
   .form-grid {
      grid-template-columns: 1fr;
   }
}

.site-footer .site-logo {
   max-width: 170px;
}

.btn-wasup {
   background: #25D366;
   /* border-radius: 50%; */
   padding: 8px 10px;
   /* font-size: 20px; */
   line-height: 1.1;
}

.mobwhat {
  display: none !important;
}

.site-header__inner {
   height: auto;
   min-height: 70px;
   padding: 10px 30px;
}

.header-actions-group {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
}

.header-actions-buttons {
   display: flex;
   align-items: center;
   gap: 14px;
}

.header-actions-address {
   font-size: 12px;
   font-weight: 600;
   color: red;
   /* opacity: 0.6; */
}

@media (max-width: 600px) {
    .head-number {
       display: none;
    }
    .header-bnt:not(.btn-wasup) {
       border-radius: 50%;
       padding: 10px 8px;
       font-size: 16px;
       line-height: 1.1;
    }
    .header-actions-address {
       display: none;
    }
    .btn-wasup {
       border-radius: 50%;
       font-size: 20px;
       padding: 8px 6px;
    }
    .mobwhat {
      display: block !important;
    }
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: var(--cyan);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-full);
}


/* ---------------- recyklácia kaziet (medzi "Ako to funguje" a "Predajňa") ---------------- */

.recycle-section {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   background: var(--paper);
   padding: 64px 24px;
}

.recycle-section__inner {
   margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(0, 460px) 1fr;
   gap: 48px;
   align-items: center;
}

.recycle-section__heading {
   font-family: 'Archivo', sans-serif;
   font-weight: 800;
   letter-spacing: -0.01em;
   line-height: 1.15;
   font-size: clamp(1.6rem, 3vw, 2.1rem);
   margin: 0 0 12px;
   color: var(--ink);
}

.recycle-section__lead {
   font-size: 15px;
   color: var(--muted);
   margin: 0 0 28px;
   max-width: 46ch;
}

.recycle-section__facts {
   list-style: none;
   margin: 0 0 28px;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0;
}

.recycle-section__fact {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
}

.recycle-section__fact:first-child {
   padding-top: 0;
}

.recycle-section__fact:last-child {
   border-bottom: none;
}

.recycle-section__icon {
   width: 20px;
   flex-shrink: 0;
   font-size: 16px;
   color: var(--cyan-deep, var(--cyan));
   margin-top: 3px;
}

.recycle-section__fact-label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--muted);
   margin-bottom: 2px;
}

.recycle-section__fact-value {
   display: block;
   font-size: 15px;
   color: var(--ink);
   line-height: 1.5;
}

.recycle-section__photo {
   position: relative;
   display: block;
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--line);
   aspect-ratio: 4 / 3;
   background: #fff;
}

.recycle-section__photo-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.recycle-section__badge {
   position: absolute;
   left: 16px;
   bottom: 16px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--ink);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   padding: 8px 14px;
   border-radius: 999px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.recycle-section__badge i {
   color: var(--cyan-full);
}

@media (max-width: 900px) {
   .recycle-section__inner {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .recycle-section__photo {
      aspect-ratio: 16 / 9;
      order: -1;
   }
}

@media (max-width: 480px) {
   .recycle-section {
      padding: 40px 18px;
   }

   .recycle-section__fact {
      gap: 12px;
   }
}

.site-logo {
  max-width: 200px;
}

@media (max-width: 524px) {
  .site-logo {
    max-width: 150px;
  }
}

.footer-nav-cta {
    position: relative;
    animation: navButtonPulse 1.5s ease-in-out infinite;
    z-index: 1;
    margin-top: 8px;
}

.footer-nav-cta::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--cyan-full);
    border-radius: 24px;
    opacity: 0;
    animation: navButtonRing 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes navButtonPulse {
    0%, 100% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.08);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes navButtonRing {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.footer-nav-cta:hover {
    animation-play-state: paused;
}

.footer-nav-cta:hover::after {
    animation-play-state: paused;
}