/* Ciper – základ: písma, tokeny, reset, typografia, kontajner */

/* Archivo (variabilné: váha 400–800, šírka 62–125 %) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Share Tech Mono – iba .lcd. Google pre túto rodinu nemá blok latin-ext,
   preto je "latin-ext" podmnožina slovenských/českých písmen (Č, Ď, Ľ, Ň, Š, Ť, Ž …). */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/share-tech-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+106-107, U+10C-10F, U+11A-11B, U+139-13A, U+13D-13E, U+143-144, U+147-148, U+154-155, U+158-15B, U+160-161, U+164-165, U+16E-16F, U+179-17A, U+17D-17E, U+1D3-1D4, U+301, U+30A, U+30C;
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/share-tech-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* farby značky */
  --zelena: #18A44B;
  --zelena-tmava: #13853D;
  --tmava: #262A2B;
  --led: #61CE70;
  --podklad: #F4F4F4;
  --doska: #EEF0F1;
  --linka: #D5D9DB;
  --text2: #555B5E;
  --hlinik: #CDD1D3;
  --hlinik-okraj: #A9AFB2;
  /* odvodené (z mockupov L/B) */
  --biela: #FFFFFF;
  --linka-svetla: #E3E5E6;
  --text-na-tmavom: #BFC5C8;
  --text-na-tmavom-drobny: #A0A8AB;
  --linka-na-tmavom: #3E4546;
  --okraj-na-tmavom: #5A6164;
  --skrutka: #9CA3A6;
  --klavesa: #33383A;
  --klavesa-tien: #1C1F20;

  --pismo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pismo-lcd: 'Share Tech Mono', ui-monospace, monospace;

  --okraj-stranky: 16px;
  --sirka-obsahu: 1296px;
  --sirka-textu: 720px;
  --radius-karta: 14px;
  --radius-pole: 10px;
  --vyska-btn: 52px;
  --vyska-hlavicky: 60px;
}
@media (min-width: 900px) {
  :root {
    --okraj-stranky: 72px;
    --vyska-btn: 56px;
    --vyska-hlavicky: 76px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tmava);
  background: var(--biela);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) {
  body { font-size: 17px; }
}

img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--zelena-tmava); }
a:hover { color: var(--zelena); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1, h2 { font-stretch: 125%; }
h1 { font-size: 34px; line-height: 1.06; }
h2 { font-size: 26px; }
h3 { font-size: 20px; font-stretch: 112%; }
@media (min-width: 900px) {
  h1 { font-size: 56px; }
  h2 { font-size: 34px; }
  h3 { font-size: 22px; }
}
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--zelena-tmava);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* kontajner: mobil 16 px okraje, PC 72 px */
.kontajner {
  width: 100%;
  max-width: calc(var(--sirka-obsahu) + 2 * var(--okraj-stranky));
  margin-inline: auto;
  padding-inline: var(--okraj-stranky);
}

/* iba pre čítačky obrazovky */
.skryte,
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* odkaz "Preskočiť na obsah" */
.skok-na-obsah,
body a.skok-na-obsah {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--tmava);
  color: var(--biela);
  font-weight: 700;
  text-decoration: none;
}
body a.skok-na-obsah:focus,
body a.skok-na-obsah:focus-visible {
  top: 8px;
  color: var(--biela);
}

main:focus { outline: none; }

/* nadpis stránky (page.php, ak ho obsah nemá) */
.stranka__hlavicka { padding-top: 28px; }
.nadpis-stranky { margin: 0 0 20px; }
@media (min-width: 900px) {
  .stranka__hlavicka { padding-top: 56px; }
  .nadpis-stranky { margin-bottom: 32px; }
}
.obsah-stranky { padding-bottom: 48px; }
.obsah-stranky > * { max-width: var(--sirka-textu); }
/* stránky WooCommerce (košík, pokladňa, účet): obsah na celú šírku kontajnera */
.obsah-stranky--wc > * { max-width: none; }
.stranka__hlavicka--wc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.stranka__krok { margin: 0 0 20px; font-size: 15px; color: var(--text2); }
@media (min-width: 900px) {
  .stranka__krok { margin-bottom: 32px; font-size: 16px; }
}