@charset "UTF-8";
/* ==========================================================================
   UPTLAC.SK — main.css
   Dizajnový systém: tokeny, typografia, layout, tlačidlá, formuláre, shell.
   Vizuálny smer: pre-press vernakulár (orezové značky, sútlač, CMYK prúžok).
   ========================================================================== */

/* ------------------------------------------------------------------ FONTS */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}

/* ----------------------------------------------------------------- TOKENS */
:root{
  /* Ink & paper — farby lisu a papiera */
  --ink:#0B1B26;            /* tlačová čerň s modrým nádychom */
  --ink-2:#12324A;          /* navy */
  --ink-3:#3B5568;          /* stlmený text na svetlom */
  --muted:#65788A;
  --paper:#FFFFFF;
  --paper-2:#F5F7F9;        /* off-white archový papier */
  --paper-3:#EDF1F4;
  --line:#DFE5EA;
  --line-2:#C9D3DA;

  /* Značka */
  --brand:#0092CA;          /* povinná primárna farba */
  --brand-600:#007CAD;
  --brand-700:#00658C;
  --brand-050:#E8F5FB;
  --brand-100:#CDE9F5;

  /* CMYK — len pre pre-press prvky, badge Akcia a kontrolný prúžok */
  --cy:#0092CA;
  --ma:#C8007D;
  --ye:#FFC700;
  --ky:#0B1B26;

  /* Sémantické */
  --ok:#0E8A5F;   --ok-bg:#E7F5EF;
  --warn:#B45309; --warn-bg:#FDF3E7;
  --err:#C0392B;  --err-bg:#FCECEA;

  /* Typografia */
  --f-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1rem;
  --t-lg:1.125rem; --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem;
  --t-4xl:3rem; --t-5xl:4rem;

  /* Priestor */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;

  --wrap:1320px;
  --wrap-narrow:920px;
  --gutter:clamp(1rem,4vw,2.5rem);

  --r-sm:4px; --r:6px; --r-lg:10px; --r-xl:16px; --r-full:999px;

  --sh-1:0 1px 2px rgba(11,27,38,.06),0 1px 1px rgba(11,27,38,.04);
  --sh-2:0 4px 16px rgba(11,27,38,.07),0 1px 3px rgba(11,27,38,.05);
  --sh-3:0 16px 44px rgba(11,27,38,.12),0 3px 10px rgba(11,27,38,.06);
  --sh-brand:0 8px 24px rgba(0,146,202,.24);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:72px;
  --topbar-h:38px;
  --z-header:600; --z-mega:610; --z-drawer:700; --z-modal:800; --z-toast:900;
}

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--brand-700);text-decoration:none}
a:hover{color:var(--brand)}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}

/* Inline SVG ikony bez triedy (v prose zoznamoch, checklistoch, kontaktoch)
   dostávajú pevný rozmer, aby sa vo flexe neroztiahli na celý kontajner. */
li > svg:first-child,
li > svg:last-child,
p > svg,
dt > svg,
dd > svg,
.field__hint > svg,
.check > svg{width:1.15em;height:1.15em;flex:none}
svg{max-width:100%}
/* Okrúhle ikonové odznaky (success stavy, benefit kruhy) — ikona vnútri
   nesmie vyplniť celý kruh; drží sa na ~45 % priemeru. */
span[style*="border-radius:50%"] > svg{width:45%;height:45%}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.skip{
  position:absolute;left:var(--sp-4);top:-100px;z-index:999;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r);
  transition:top .2s var(--ease);font-weight:600;
}
.skip:focus{top:var(--sp-4);color:#fff}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------ TYPOGRAFIA */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.1rem,1.3rem + 3.2vw,3.6rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1rem + .7vw,1.5rem)}
h4{font-size:var(--t-lg)}
h5{font-size:var(--t-md)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
small{font-size:var(--t-sm)}

.lead{font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.62;color:var(--ink-3)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-size:.9em;letter-spacing:-.01em;font-variant-ligatures:none}
.tnum{font-variant-numeric:tabular-nums}

/* Eyebrow — mono štítok s orezovou značkou. Nesie typ obsahu, nie ozdobu. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);
  margin-bottom:var(--sp-3);
}
.eyebrow::before{
  content:'';width:14px;height:14px;flex:none;
  border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;
  opacity:.85;
}
.on-ink .eyebrow{color:#6FD0F2}

/* --------------------------------------------------------------- LAYOUT */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.section--tight{padding-block:clamp(2rem,1.5rem + 2vw,3.25rem)}
.section--paper{background:var(--paper-2)}
.section--ink{background:var(--ink);color:#D5E2EB}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink a{color:#7FD8F7}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);margin-bottom:var(--sp-6);flex-wrap:wrap}
.sec-head__text{max-width:62ch}
.sec-head p{margin-top:.75rem;color:var(--ink-3)}
.section--ink .sec-head p{color:#9FB6C6}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.flow > * + *{margin-top:var(--sp-4)}

/* ------------------------------------------------- PRE-PRESS SIGNATURES */
/* Orezová značka — používa sa v rohoch hárkových kompozícií. */
.crop{position:absolute;width:18px;height:18px;pointer-events:none;opacity:.55}
.crop::before,.crop::after{content:'';position:absolute;background:var(--ink-3)}
.crop::before{width:100%;height:1px;top:0;left:0}
.crop::after{width:1px;height:100%;top:0;left:0}
.crop--tr{transform:scaleX(-1)}
.crop--bl{transform:scaleY(-1)}
.crop--br{transform:scale(-1)}

/* CMYK kontrolný prúžok — deliaci prvok medzi sekciami. */
.controlstrip{display:flex;height:5px;width:100%}
.controlstrip span{flex:1}
.controlstrip span:nth-child(1){background:var(--cy)}
.controlstrip span:nth-child(2){background:var(--ma)}
.controlstrip span:nth-child(3){background:var(--ye)}
.controlstrip span:nth-child(4){background:var(--ky)}
.controlstrip--fine{height:3px}

/* Sútlačový kríž */
.regmark{width:22px;height:22px;flex:none;opacity:.6}

/* -------------------------------------------------------------- TLAČIDLÁ */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-base);line-height:1;
  padding:.875rem 1.375rem;border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  text-align:center;white-space:nowrap;position:relative;
}
.btn:hover{color:var(--btn-fg);transform:translateY(-1px);box-shadow:var(--sh-brand)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bd:var(--brand);--btn-fg:var(--brand-700);box-shadow:none}
.btn--ink{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}
.btn--ink:hover{box-shadow:0 8px 24px rgba(11,27,38,.22)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--light:hover{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.btn--outline-light:hover{--btn-bd:#fff;box-shadow:none}
.btn--sm{padding:.55rem .875rem;font-size:var(--t-sm)}
.btn--lg{padding:1.0625rem 1.75rem;font-size:var(--t-md)}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

/* Magnetické CTA — jemný posun kurzorom, riadené v main.js */
.btn--magnet{will-change:transform}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:600;
  color:var(--brand-700);font-size:var(--t-base);
}
.link-arrow svg{width:1em;height:1em;transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------- BADGES */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;padding:.3rem .5rem;border-radius:var(--r-sm);
  background:var(--paper-3);color:var(--ink-3);white-space:nowrap;
}
.badge--brand{background:var(--brand-050);color:var(--brand-700)}
.badge--sale{background:#FCE7F3;color:var(--ma)}
.badge--new{background:var(--ok-bg);color:var(--ok)}
.badge--custom{background:#F1ECFB;color:#6B46C1}
.badge--express{background:var(--warn-bg);color:var(--warn)}
.badge--ink{background:var(--ink);color:#fff}
.badge--ship{background:var(--ok-bg);color:var(--ok)}

/* ------------------------------------------------------------ FORMULÁRE */
.field{display:block;margin-bottom:var(--sp-4)}
.field__label{
  display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);
  margin-bottom:.4rem;
}
.field__label .req{color:var(--ma);margin-left:.15rem}
.field__hint{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:.35rem}
.field__err{display:none;font-size:var(--t-xs);color:var(--err);margin-top:.35rem;font-weight:500}

.input,.select,.textarea{
  width:100%;padding:.75rem .875rem;border:1.5px solid var(--line-2);
  border-radius:var(--r);background:#fff;color:var(--ink);
  font-size:var(--t-base);transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#9AAAB7}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050);
}
.textarea{min-height:120px;resize:vertical;line-height:1.55}
.select{
  appearance:none;padding-right:2.5rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2365788A' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .875rem center;background-size:16px;
}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--err);background:var(--err-bg)}
.field.is-invalid .field__err{display:block}
.field.is-valid .input,.field.is-valid .select{border-color:var(--ok)}

.check{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-sm);cursor:pointer;line-height:1.5}
.check input{
  appearance:none;width:19px;height:19px;flex:none;margin-top:1px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;
  transition:all .15s var(--ease);cursor:pointer;
}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.check input[type=radio]:checked{box-shadow:inset 0 0 0 3.5px #fff}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Množstvo */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff}
.qty button{width:40px;height:44px;display:grid;place-items:center;color:var(--ink-3);transition:background .15s}
.qty button:hover{background:var(--paper-2);color:var(--brand-700)}
.qty input{
  width:64px;height:44px;border:0;text-align:center;font-family:var(--f-mono);
  font-size:var(--t-base);font-weight:500;background:transparent;
  border-inline:1px solid var(--line);
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

/* ----------------------------------------------------------------- TOPBAR */
.topbar{
  background:var(--ink);color:#B7C8D4;font-size:var(--t-xs);
  height:var(--topbar-h);display:flex;align-items:center;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.topbar__list{display:flex;align-items:center;gap:var(--sp-5)}
.topbar__item{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar__item svg{width:14px;height:14px;flex:none;opacity:.8}
.topbar a{color:#B7C8D4;transition:color .15s}
.topbar a:hover{color:#fff}
.topbar__ship{
  color:#8CE0B5;font-weight:600;
}
.topbar__ship svg{opacity:1}

/* ----------------------------------------------------------------- HEADER */
.header{
  position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.header.is-stuck{box-shadow:0 6px 24px rgba(11,27,38,.08)}
.header__bar{
  display:flex;align-items:center;gap:var(--sp-5);
  height:var(--header-h);transition:height .25s var(--ease);
}
.header.is-stuck .header__bar{height:62px}
.header__logo{flex:none;display:block}
.header__logo img{height:38px;width:auto;transition:height .25s var(--ease)}
.header.is-stuck .header__logo img{height:32px}
.header__actions{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex:none}

.iconbtn{
  position:relative;width:44px;height:44px;border-radius:var(--r);
  display:grid;place-items:center;color:var(--ink-2);transition:background .15s,color .15s;
}
.iconbtn:hover{background:var(--paper-2);color:var(--brand-700)}
.iconbtn svg{width:21px;height:21px}
.iconbtn__count{
  position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 4px;
  border-radius:var(--r-full);background:var(--brand);color:#fff;
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  display:grid;place-items:center;line-height:1;
}
.iconbtn__count[data-count="0"]{display:none}
.header__cta{margin-left:.5rem}

/* Hlavná navigácia */
.nav{display:flex;align-items:center;gap:.125rem;flex:none}
.nav__link{
  display:flex;align-items:center;gap:.35rem;padding:.6rem .7rem;border-radius:var(--r);
  font-size:var(--t-base);font-weight:500;color:var(--ink-2);
  transition:background .15s,color .15s;white-space:nowrap;
}
.nav__link:hover,.nav__item.is-open .nav__link{background:var(--paper-2);color:var(--brand-700)}
.nav__link svg{width:13px;height:13px;opacity:.6;transition:transform .2s var(--ease)}
.nav__item.is-open .nav__link svg{transform:rotate(180deg)}
.nav__item{position:static}

/* ----------------------------------------------------------------- FOOTER */
.footer{background:var(--ink);color:#A9BECD;padding-block:var(--sp-8) var(--sp-5);position:relative}
.footer a{color:#A9BECD;transition:color .15s}
.footer a:hover{color:#fff}
.footer__top{
  display:grid;gap:var(--sp-6);
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;
  padding-bottom:var(--sp-7);
}
.footer__brand img{height:36px;width:auto;margin-bottom:var(--sp-4)}
.footer__brand p{font-size:var(--t-sm);line-height:1.65;max-width:34ch;color:#8FA6B6}
.footer h4{
  color:#fff;font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-4);
}
.footer__list li + li{margin-top:.6rem}
.footer__list a{font-size:var(--t-sm)}
.footer__contact li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);margin-bottom:.7rem}
.footer__contact svg{width:15px;height:15px;flex:none;margin-top:.2rem;color:var(--brand)}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:#7B94A6;
}
/* Firemné údaje sú dlhý reťazec a stláčali zoznam odkazov do dvoch riadkov,
   ktoré potom pôsobili odskočené. Údaje sa preto smú skracovať ako prvé,
   odkazy si držia svoju šírku a copyright dostal vlastný riadok. */
.footer__legal{flex:0 1 auto;margin-left:auto}
.footer__copy{flex:1 1 100%;order:5}
.footer__legal a{font-size:var(--t-xs)}
.footer__social{display:flex;gap:.5rem}
.footer__social a{
  width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(255,255,255,.06);transition:background .15s;
}
.footer__social a:hover{background:var(--brand)}
.footer__social svg{width:17px;height:17px}
.footer__company{font-family:var(--f-mono);font-size:var(--t-xs);color:#6A8296;flex:1 1 300px;min-width:0}
/* Farebný sútlačový prúžok patrí na horný okraj pätičky. */
.footer > .controlstrip{position:absolute;top:0;left:0;right:0}
/* Právne odkazy chodia z menu ako zoznam — vodorovne, bez odrážok. */
.footer__legal ul{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:.4rem var(--sp-4);margin:0;padding:0;
}
.footer__legal li{margin:0;line-height:1.6}
.footer__copy{font-size:var(--t-xs);color:#7B94A6;display:flex;gap:.15rem;align-items:center;flex-wrap:wrap}
.footer__sep{opacity:.5}
.footer__h4--spaced{margin-top:var(--sp-5)}
.footer__note{font-size:var(--t-sm);color:#8FA6B6;margin:0}
.footer__ok{color:#8CE0B5;font-size:var(--t-xs);margin-top:.6rem;font-family:var(--f-mono)}
.footer .field--flush{margin:0;flex:1;min-width:0}

/* Newsletter */
.nl__form{display:flex;gap:.5rem;margin-top:var(--sp-3)}
.nl__form .input{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;
}
.nl__form .input::placeholder{color:#7B94A6}
.nl__form .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,146,202,.2)}

/* --------------------------------------------------------- BREADCRUMBS */
.crumbs{padding-block:var(--sp-4);font-size:var(--t-sm)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li + li::before{content:'/';color:var(--line-2);font-family:var(--f-mono)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-700)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* --------------------------------------------------------------- UTILITY */
.stack-sm > * + *{margin-top:var(--sp-2)}
.stack > * + *{margin-top:var(--sp-4)}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.hide{display:none !important}
.nowrap{white-space:nowrap}

/* Scroll progress */
.scrollbar{
  position:fixed;top:0;left:0;height:2px;background:var(--brand);width:0;
  z-index:calc(var(--z-header) + 5);transition:width .1s linear;
}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}