/* ==========================================================================
   EMMA INTERNATIONAL · COMPONENTS & MODULES
   ========================================================================== */

@layer components {
  /* --- Tlačidlá & Akcie --- */
  .tlacidlo {
    min-block-size: 44px;
    padding: var(--odstup-2xs) var(--odstup-m);
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
    color: var(--text);
    font-size: var(--velkost-m);
    transition: background-color var(--prechod), color var(--prechod), border-color var(--prechod);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
    cursor: pointer;
    background: transparent;
  }
  .tlacidlo:hover {
    background-color: color-mix(in srgb, var(--akcent) 18%, transparent);
    text-decoration: none;
  }
  .tlacidlo--hlavne {
    background: linear-gradient(135deg, #8C6B28 0%, #73561A 100%);
    color: #FFFFFF;
    font-weight: 600;
    border-color: #8C6B28;
    box-shadow: 0 2px 8px rgba(140, 107, 40, 0.25);
  }
  .tlacidlo--hlavne:hover {
    background: linear-gradient(135deg, #A8863A 0%, #8C6B28 100%);
    box-shadow: 0 4px 14px rgba(140, 107, 40, 0.35);
    color: #FFFFFF;
  }
  :root[data-tema="tmava"] .tlacidlo--hlavne {
    background: linear-gradient(135deg, #C5A059 0%, #B38F46 50%, #94722D 100%);
    color: #000000;
    border-color: #C5A059;
    box-shadow: 0 2px 10px rgba(197, 160, 89, 0.25);
  }
  :root[data-tema="tmava"] .tlacidlo--hlavne:hover {
    background: linear-gradient(135deg, #DFC38A 0%, #C5A059 50%, #B38F46 100%);
    box-shadow: 0 4px 18px rgba(197, 160, 89, 0.42);
    color: #000000;
  }
  .akcie {
    gap: var(--odstup-s);
    flex-wrap: wrap;
    margin-block-start: var(--odstup-l);
    display: flex;
  }

  /* --- Titulná fotografia / Hero Cover --- */
  .hero__titul-obal {
    width: 100%;
    margin-block-start: var(--odstup-s);
    margin-block-end: var(--odstup-xl);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ciara);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    background: #0B0B0B;
  }

  :root[data-tema="tmava"] .hero__titul-obal {
    border-color: rgba(197, 160, 89, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  }

  .hero__titul-obal picture,
  .profil-foto-obal picture {
    display: block;
    width: 100%;
  }

  .hero__titul-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 500;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Profilová fotografia (stránka Martina Harazinová) */
  .profil-foto-obal {
    width: 100%;
    margin-block: var(--odstup-m) var(--odstup-l);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ciara);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    background: #0B0B0B;
  }

  :root[data-tema="tmava"] .profil-foto-obal {
    border-color: rgba(197, 160, 89, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  }

  .profil-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 500;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* --- Hlavička & Navigácia --- */
  .hlavicka {
    z-index: 50;
    background-color: color-mix(in srgb, var(--povrch) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--hranica);
    position: sticky;
    inset-block-start: 0;
  }
  .hlavicka__obal {
    justify-content: space-between;
    align-items: center;
    gap: var(--odstup-m);
    padding-block: var(--odstup-xs);
    flex-wrap: wrap;
    display: flex;
  }
  .hlavicka__znacka {
    min-block-size: 48px;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
    gap: var(--odstup-xs);
  }
  .hlavicka__logo-obrazok {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform var(--prechod), filter var(--prechod);
  }
  .hlavicka__logo-obrazok:hover {
    transform: scale(1.02);
  }
  .hlavicka__logo--tmava {
    display: none;
  }
  .hlavicka__logo--svetla {
    display: block;
  }
  :root[data-tema="tmava"] .hlavicka__logo--svetla {
    display: none;
  }
  :root[data-tema="tmava"] .hlavicka__logo--tmava {
    display: block;
  }
  .hlavicka__logo-tenke {
    color: var(--text-tlmeny);
    letter-spacing: 0.16em;
    font-size: 0.7em;
  }
  .hlavicka__znak {
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }
  .hlavicka__prepinac {
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--odstup-xs);
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
    color: var(--text);
    cursor: pointer;
    background: transparent;
  }
  .navigacia {
    gap: var(--odstup-s);
    inline-size: 100%;
    flex-direction: column;
    padding-block-end: var(--odstup-s);
    display: none;
  }
  .navigacia--otvorena {
    display: flex;
  }
  .navigacia__zoznam {
    gap: var(--odstup-2xs);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .navigacia__odkaz {
    min-block-size: 44px;
    color: var(--text-tlmeny);
    align-items: center;
    text-decoration: none;
    display: flex;
    transition: color var(--prechod);
  }
  .navigacia__odkaz:hover {
    color: var(--akcent);
    text-decoration: none;
  }
  .navigacia__odkaz[aria-current="page"] {
    color: var(--akcent);
    box-shadow: inset 0 -2px 0 var(--akcent);
  }

  @media (width >= 1024px) {
    .hlavicka__prepinac {
      display: none;
    }
    .navigacia {
      align-items: center;
      gap: var(--odstup-m);
      flex-direction: row;
      inline-size: auto;
      padding-block-end: 0;
      display: flex;
    }
    .navigacia__zoznam {
      gap: var(--odstup-m);
      flex-direction: row;
    }
  }

  /* --- Hero Sekcia --- */
  .hero {
    padding-block: var(--odstup-2xl) var(--odstup-3xl);
  }
  .hero--podstranka {
    padding-block: var(--odstup-2xl) var(--odstup-xl);
  }
  .hero__nadpis {
    max-inline-size: 30ch;
  }
  .hero--podstranka .hero__nadpis {
    max-inline-size: 18ch;
  }
  /* --- Zjednotená typografia úvodných odstavcov (Perex / Lead) --- */
  .perex,
  .hero__perex {
    font-family: var(--pismo-text);
    font-size: var(--velkost-perex);
    line-height: 1.6;
    color: var(--text);
    max-inline-size: var(--sirka-textu);
    margin-block-start: var(--odstup-m);
    margin-block-end: var(--odstup-l);
    text-wrap: pretty;
  }
  .perex strong,
  .hero__perex strong {
    color: var(--text-jasny);
    font-weight: 600;
  }
  .perex a,
  .hero__perex a {
    color: var(--akcent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--akcent) 50%, transparent);
  }
  .perex a:hover,
  .hero__perex a:hover {
    color: var(--text-jasny);
  }
  .hero__doplnenie {
    color: var(--text-tlmeny);
    margin-block-start: var(--odstup-m);
  }
  .hero .akcie {
    margin-block-end: var(--odstup-2xl);
  }

  /* --- Sekcia Rozlíšenie & Vidlica --- */
  .vidlica {
    block-size: 5rem;
    inline-size: 100%;
    fill: none;
    stroke: var(--akcent);
    stroke-width: 1px;
    opacity: 0.5;
    margin-block-start: var(--odstup-l);
  }
  .rozdvojka {
    gap: var(--odstup-m);
    display: grid;
  }
  @media (width >= 768px) {
    .rozdvojka {
      grid-template-columns: 1fr 1fr;
    }
  }
  .pripad {
    gap: var(--odstup-s);
    padding: var(--odstup-m);
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
    background-color: var(--povrch-card);
    align-content: start;
    display: grid;
  }
  .pripad__stav {
    color: var(--akcent);
    font-size: var(--velkost-s);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* --- Pás Ako pracujeme --- */
  .pas {
    gap: var(--odstup-l);
    display: grid;
    position: relative;
  }
  .pas:before {
    content: "";
    background-color: var(--akcent);
    opacity: 0.4;
    inline-size: 1px;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.3125rem;
  }
  .zastavka {
    padding-inline-start: var(--odstup-l);
    position: relative;
  }
  .zastavka:before {
    content: "";
    border: 1px solid var(--akcent);
    background-color: var(--povrch);
    border-radius: 50%;
    block-size: 0.6875rem;
    inline-size: 0.6875rem;
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-start: 0;
  }
  @media (width >= 900px) {
    .pas {
      gap: var(--odstup-m);
      grid-template-columns: repeat(4, 1fr);
    }
    .pas:before {
      block-size: 1px;
      inline-size: auto;
      inset-block: 0.3125rem auto;
      inset-inline: 0;
    }
    .zastavka {
      padding-block-start: var(--odstup-l);
      padding-inline-start: 0;
    }
    .zastavka:before {
      inset-block-start: 0;
    }
  }
  .zastavka__sloveso {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    letter-spacing: 0.08em;
    color: var(--akcent);
  }
  .zastavka__text {
    color: var(--text-tlmeny);
    margin-block-start: var(--odstup-2xs);
  }

  /* --- Dvojdiel: Hárok (6 pilierov) a Bočný panel (3 úrovne) --- */
  .dvojdiel {
    gap: var(--odstup-xl);
    display: grid;
  }
  @media (width >= 1000px) {
    .dvojdiel {
      grid-template-columns: 1fr 20rem;
      align-items: start;
    }
    .dvojdiel--uzky {
      grid-template-columns: 1fr 18rem;
    }
    .bok {
      border-inline-start: 1px solid color-mix(in srgb, var(--akcent) 40%, transparent);
      padding-inline-start: var(--odstup-l);
      position: sticky;
      inset-block-start: var(--odstup-2xl);
    }
  }
  .harok {
    display: grid;
  }
  .harok__riadok {
    gap: var(--odstup-2xs);
    padding-block: var(--odstup-m);
    display: grid;
  }
  .harok__riadok + .harok__riadok {
    border-block-start: 1px solid color-mix(in srgb, var(--akcent) 30%, transparent);
  }
  @media (width >= 768px) {
    .harok__riadok {
      gap: var(--odstup-l);
      grid-template-columns: 22rem 1fr;
      align-items: baseline;
    }
  }
  @media (width >= 900px) {
    .harok__riadok--sluzby {
      gap: var(--odstup-2xl);
      grid-template-columns: 18rem 1fr;
      align-items: start;
    }
  }
  .harok__nazov {
    font-size: var(--velkost-l);
  }
  .harok__nazov--velky {
    font-size: var(--velkost-xl);
  }
  .harok__popis {
    color: var(--text-tlmeny);
    max-inline-size: var(--sirka-textu);
  }
  .harok__text {
    color: var(--text-tlmeny);
    max-inline-size: var(--sirka-textu);
  }
  .harok__text strong {
    color: var(--text);
  }

  .bok {
    gap: var(--odstup-l);
    align-content: start;
    display: grid;
  }
  .bok__nadpis {
    font-size: var(--velkost-l);
  }
  .bok__text {
    color: var(--text-tlmeny);
  }

  /* --- Úrovne --- */
  .uroven {
    gap: var(--odstup-2xs);
    align-content: start;
    display: grid;
  }
  .uroven__nazov {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    font-weight: 400;
  }
  .uroven__popis {
    color: var(--text-tlmeny);
  }
  .trojica {
    gap: var(--odstup-l);
    display: grid;
  }
  @media (width >= 768px) {
    .trojica {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* --- Polovice s linkami --- */
  .polovice {
    gap: var(--odstup-l);
    display: grid;
  }
  @media (width >= 900px) {
    .polovice {
      column-gap: var(--odstup-2xl);
      grid-template-columns: 1fr 1fr;
    }
    .polovice--linky > * {
      border-inline-start: 2px solid var(--akcent);
      padding-inline-start: var(--odstup-m);
    }
  }

  /* --- Výzva CTA --- */
  .vyzva__nadpis {
    max-inline-size: 20ch;
  }

  /* --- Kroky spolupráce (ako-pracujeme) --- */
  .kroky {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kroky > * + * {
    margin-block-start: var(--odstup-m);
  }
  .krok {
    gap: var(--odstup-s);
    grid-template-columns: auto 1fr;
    align-items: start;
    display: grid;
  }
  .krok__cislo-text {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
    overflow: hidden;
  }
  .krok__cislo {
    inline-size: var(--odstup-l);
    block-size: var(--odstup-l);
    border: 1px solid var(--akcent);
    color: var(--akcent);
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: flex;
  }
  .krok__nazov {
    font-size: var(--velkost-l);
  }
  .krok__popis {
    max-inline-size: var(--sirka-textu);
    color: var(--text-tlmeny);
    margin-block-start: var(--odstup-3xs);
  }
  .postup__nadpis {
    margin-block-end: var(--odstup-2xl);
  }
  .postup__poznamka {
    border-inline-start: 2px solid var(--akcent);
    margin-block-start: var(--odstup-xl);
    padding-inline-start: var(--odstup-m);
    color: var(--text-tlmeny);
  }
  .udrzanie__zoznam {
    columns: 2;
    column-gap: var(--odstup-2xl);
    max-inline-size: 60rem;
    padding-inline-start: var(--odstup-l);
    color: var(--text-tlmeny);
  }
  .udrzanie__zoznam li {
    break-inside: avoid;
  }
  .udrzanie__zoznam li::marker {
    color: var(--akcent);
  }
  .udrzanie__zoznam > * + * {
    margin-block-start: var(--odstup-2xs);
  }
  @media (width < 700px) {
    .udrzanie__zoznam {
      columns: 1;
    }
  }

  /* --- Služby: Úvod & Kotvy --- */
  .sluzby__uvod {
    margin-block: var(--odstup-m) var(--odstup-xl);
  }
  .sluzby__uvod > p:first-child {
    font-family: var(--pismo-text);
    font-size: var(--velkost-perex);
    line-height: 1.6;
    color: var(--text);
    max-inline-size: var(--sirka-textu);
    margin-block-end: var(--odstup-s);
    text-wrap: pretty;
  }
  .sluzby__uvod > p:first-child strong {
    color: var(--text-jasny);
    font-weight: 600;
  }
  .sluzby__uvod > p + p {
    font-size: var(--velkost-m);
    color: var(--text-tlmeny);
    line-height: var(--vyska-riadku);
    max-inline-size: var(--sirka-textu);
  }
  .kotvy {
    gap: var(--odstup-2xs) var(--odstup-m);
    flex-wrap: wrap;
    margin-block-end: var(--odstup-l);
    display: flex;
  }
  .kotvy__odkaz {
    min-block-size: 44px;
    color: var(--akcent);
    font-size: var(--velkost-s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration-color: color-mix(in srgb, var(--akcent) 50%, transparent);
    align-items: center;
    display: inline-flex;
  }
  .kotvy__odkaz:hover {
    color: var(--text);
  }

  /* --- Otázky & Odpovede (FAQ) --- */
  .otazky {
    gap: var(--odstup-xl) var(--odstup-2xl);
    display: grid;
  }
  @media (width >= 900px) {
    .otazky {
      grid-template-columns: 1fr 1fr;
    }
  }
  .otazka {
    gap: var(--odstup-s);
    border-block-start: 1px solid color-mix(in srgb, var(--akcent) 30%, transparent);
    align-content: start;
    padding-block-start: var(--odstup-m);
    display: grid;
  }
  .otazka dt {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
  }
  .otazka dd {
    color: var(--text-tlmeny);
    max-inline-size: var(--sirka-textu);
    margin-inline-start: 0;
  }

  /* --- Formulár & Kontaktné údaje --- */
  .udaje {
    font-style: normal;
    color: var(--text-tlmeny);
    display: grid;
    gap: var(--odstup-2xs);
  }
  .udaje__odkaz {
    color: var(--text);
  }
  .udaje__oddelovac {
    color: var(--text-tlmeny);
  }
  .formular {
    max-inline-size: var(--sirka-textu);
    container-type: inline-size;
  }
  .formular__polia > * + * {
    margin-block-start: var(--odstup-m);
  }
  .formular__pole {
    gap: var(--odstup-3xs);
    flex-direction: column;
    display: flex;
  }
  .formular__stitok {
    font-size: var(--velkost-s);
    color: var(--text-tlmeny);
  }
  .formular__stitok--vedla {
    align-self: center;
  }
  .formular__volitelne {
    color: var(--text-tlmeny);
    opacity: 0.8;
  }
  .formular__vstup {
    min-block-size: 44px;
    padding: var(--odstup-2xs) var(--odstup-xs);
    background-color: var(--povrch);
    border: 1px solid var(--hranica);
    border-radius: var(--polomer);
    color: var(--text);
    transition: border-color var(--prechod);
  }
  .formular__vstup:focus {
    border-color: var(--focus);
    outline: none;
  }
  .formular__vstup--text {
    resize: vertical;
    min-block-size: 8rem;
  }
  .formular__suhlas {
    gap: var(--odstup-xs);
    align-items: center;
    display: flex;
  }
  .formular__zaskrtavacie {
    min-block-size: 1.25rem;
    min-inline-size: 1.25rem;
    accent-color: var(--akcent);
  }
  .formular__zasady {
    font-size: var(--velkost-s);
    color: var(--text-tlmeny);
    margin-block-start: var(--odstup-2xs);
  }
  .formular__chyba {
    color: var(--chyba);
    font-size: var(--velkost-s);
  }
  .formular__pasca {
    display: none;
  }
  .formular__stav {
    min-block-size: 1.5rem;
    font-size: var(--velkost-s);
    margin-block: var(--odstup-s);
  }
  .formular__stav--odosiela { color: var(--text-tlmeny); }
  .formular__stav--uspech { color: var(--uspech); }
  .formular__stav--chyba { color: var(--chyba); }
  .formular__stav a {
    color: var(--zlata);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .formular__stav a:hover {
    color: var(--zlata-svetla);
  }
  .formular__odoslat {
    margin-block-start: var(--odstup-m);
  }

  /* --- O nás & Členstvá --- */
  .pas-clenstiev {
    container-type: inline-size;
  }
  .pas-clenstiev__nadpis {
    font-size: var(--velkost-l);
    margin-block-end: var(--odstup-s);
  }
  .pas-clenstiev__zoznam {
    gap: var(--odstup-s);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .pas-clenstiev__polozka {
    gap: var(--odstup-3xs);
    padding: var(--odstup-2xs) var(--odstup-s);
    border: 1px solid var(--akcent);
    background-color: var(--povrch-card);
    border-radius: var(--polomer);
    overflow-wrap: anywhere;
    flex-direction: column;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 0;
    max-inline-size: 100%;
    display: flex;
    position: relative;
  }
  .pas-clenstiev__odkaz {
    gap: var(--odstup-3xs);
    text-decoration-color: var(--akcent);
    flex-direction: column;
    display: flex;
  }
  .pas-clenstiev__odkaz:after {
    content: "";
    border-radius: var(--polomer);
    position: absolute;
    inset: 0;
  }
  .pas-clenstiev__skratka {
    font-family: var(--pismo-display);
    font-size: var(--velkost-m);
    letter-spacing: 0.08em;
  }
  .pas-clenstiev__nazov {
    color: var(--text-tlmeny);
    font-size: var(--velkost-s);
    max-inline-size: 22ch;
  }
  .text-stranky {
    margin-block-start: var(--odstup-m);
  }
  .uvod, .nadpis-podsekcie {
    font-size: var(--velkost-l);
  }
  .po-uvode {
    margin-block-start: var(--odstup-2xl);
  }
  .chybajuce {
    max-inline-size: var(--sirka-textu);
    margin-block-start: var(--odstup-m);
  }

  /* --- GDPR & Organizačná smernica --- */
  .poziadavky {
    padding-inline-start: var(--odstup-m);
    color: var(--text-tlmeny);
  }
  .poziadavky > li + li {
    margin-block-start: var(--odstup-2xs);
  }

  .dokument-stiahnutie {
    gap: var(--odstup-m);
    padding: var(--odstup-m) var(--odstup-l);
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
    background-color: var(--povrch-card);
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    margin-block: var(--odstup-l);
  }
  .dokument-stiahnutie__info {
    display: flex;
    align-items: center;
    gap: var(--odstup-m);
  }
  .dokument-stiahnutie__ikona {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--akcent);
    flex-shrink: 0;
  }
  .dokument-stiahnutie__nazov {
    font-size: var(--velkost-m);
    font-weight: 600;
    color: var(--text-jasny);
  }
  .dokument-stiahnutie__popis {
    font-size: var(--velkost-s);
    color: var(--text-tlmeny);
  }

  .smernica-nav {
    padding: var(--odstup-m);
    border: 1px solid var(--hranica);
    border-radius: var(--polomer);
    background-color: var(--povrch-2);
    margin-block: var(--odstup-m) var(--odstup-xl);
  }
  .smernica-nav__nadpis {
    font-size: var(--velkost-s);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--akcent);
    margin-block-end: var(--odstup-s);
    font-weight: 600;
  }
  .smernica-nav__zoznam {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--odstup-xs);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .smernica-nav__odkaz {
    font-size: var(--velkost-s);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--odstup-2xs);
    transition: color var(--prechod);
  }
  .smernica-nav__odkaz::before {
    content: "→";
    color: var(--akcent);
  }
  .smernica-nav__odkaz:hover {
    color: var(--akcent-lesk);
    text-decoration: underline;
  }

  .smernica-grid {
    display: grid;
    gap: var(--odstup-m);
    grid-template-columns: 1fr;
    margin-block-start: var(--odstup-m);
  }
  @media (width >= 768px) {
    .smernica-grid--2 {
      grid-template-columns: 1fr 1fr;
    }
  }

  .smernica-karta {
    padding: var(--odstup-m);
    border: 1px solid var(--hranica);
    border-radius: var(--polomer);
    background-color: var(--povrch-card);
    display: flex;
    flex-direction: column;
    gap: var(--odstup-xs);
  }
  .smernica-karta--zvyraznena {
    border-color: var(--akcent);
  }
  .smernica-karta__nadpis {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    color: var(--text-jasny);
    margin: 0;
  }
  .smernica-karta__tag {
    align-self: flex-start;
    font-size: var(--velkost-xs);
    color: var(--akcent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .smernica-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: var(--velkost-xs);
    border-radius: var(--polomer-plny);
    background-color: color-mix(in srgb, var(--akcent) 15%, transparent);
    color: var(--akcent);
    border: 1px solid color-mix(in srgb, var(--akcent) 30%, transparent);
    margin-inline-end: 0.35rem;
    margin-block-end: 0.25rem;
  }

  .smernica-zoznam {
    padding-inline-start: 1.25rem;
    color: var(--text);
  }
  .smernica-zoznam > li + li {
    margin-block-start: var(--odstup-2xs);
  }
  .smernica-zoznam li strong {
    color: var(--text-jasny);
  }

  .smernica-sekcia {
    scroll-margin-top: calc(var(--vyska-hlavicky) + var(--odstup-l));
    padding-block-start: var(--odstup-xl);
    border-block-start: 1px solid color-mix(in srgb, var(--hranica) 50%, transparent);
  }
  .smernica-sekcia:first-of-type {
    border-block-start: none;
    padding-block-start: 0;
  }


  /* --- Citácia & Filozofia zakladateľky --- */
  .citacia-filozofia {
    margin: var(--odstup-l) 0;
    padding: var(--odstup-m) var(--odstup-l);
    border-left: 4px solid var(--akcent);
    background-color: var(--povrch-card);
    border-radius: 0 var(--polomer) var(--polomer) 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }
  .citacia-filozofia__text {
    font-size: var(--velkost-m);
    line-height: 1.75;
    font-style: italic;
    color: var(--text);
    margin: 0;
  }
  .citacia-filozofia__autor {
    margin-block-start: var(--odstup-s);
    font-family: var(--pismo-display);
    font-size: var(--velkost-m);
    color: var(--akcent);
    font-weight: 600;
  }

  /* --- Certifikácie a akreditácie --- */
  .certifikacie-mriezka {
    display: grid;
    gap: var(--odstup-m);
    grid-template-columns: 1fr;
    margin-block-start: var(--odstup-m);
  }
  @media (width >= 768px) {
    .certifikacie-mriezka {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .certifikat-karta {
    padding: var(--odstup-m);
    border: 1px solid var(--hranica);
    border-radius: var(--polomer);
    background-color: var(--povrch-card);
    display: flex;
    flex-direction: column;
    gap: var(--odstup-xs);
    transition: border-color var(--prechod), transform var(--prechod);
  }
  .certifikat-karta:hover {
    border-color: var(--akcent);
    transform: translateY(-2px);
  }
  .certifikat-karta--plna {
    grid-column: 1 / -1;
  }
  .certifikat-karta__zahlavie {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--odstup-xs);
    flex-wrap: wrap;
  }
  .certifikat-karta__nazov {
    font-family: var(--pismo-display);
    font-size: var(--velkost-l);
    color: var(--text-jasny);
    margin: 0;
  }
  .certifikat-karta__odznak {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    background-color: var(--akcent-jemny);
    color: var(--akcent);
    border: 1px solid var(--akcent);
    border-radius: var(--polomer);
  }
  .certifikat-karta__polozky {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--odstup-2xs);
    font-size: var(--velkost-s);
    color: var(--text-tlmeny);
  }
  .certifikat-karta__polozky strong {
    color: var(--text);
  }

  /* --- Pätička & Téma Switcher --- */
  .doplnit {
    color: var(--chyba);
    letter-spacing: 0.06em;
  }
  .paticka {
    padding-block: var(--odstup-xl);
    border-block-start: 1px solid var(--hranica);
    background-color: var(--povrch-2);
    color: var(--text-tlmeny);
    font-size: var(--velkost-s);
    margin-block-start: var(--odstup-3xl);
  }
  .paticka__firma {
    color: var(--text);
  }
  .paticka a {
    align-items: center;
    min-block-size: 44px;
    display: inline-flex;
  }
  .paticka__kontakt {
    align-items: center;
    gap: var(--odstup-3xs);
    flex-wrap: wrap;
    display: flex;
  }
  .paticka__logo-znak {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
    margin-block-end: var(--odstup-s);
    filter: invert(1) hue-rotate(180deg) brightness(0.65);
  }
  :root[data-tema="tmava"] .paticka__logo-znak {
    filter: none;
  }
  .paticka > .obal {
    position: relative;
  }
  .paticka__tema {
    block-size: 44px;
    inline-size: 44px;
    color: var(--akcent);
    cursor: pointer;
    background: transparent;
    border: 0;
    place-content: center;
    margin: 0;
    padding: 0;
    display: grid;
    position: absolute;
    inset-block-start: -0.375rem;
    inset-inline-end: 0;
  }
  @media (width < 700px) {
    .paticka__firma {
      padding-inline-end: calc(44px + var(--odstup-s));
    }
  }
  .paticka__tema svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linecap: round;
    block-size: 1.375rem;
    inline-size: 1.375rem;
  }
  :root:not([data-ucinna="tmava"]) .paticka__tema-slnko,
  :root[data-ucinna="tmava"] .paticka__tema-mesiac {
    display: none;
  }
}


/* --- MAP4Y Cards, Visuals & Teza --- */
@layer components{.hero{padding-block:var(--odstup-2xl) var(--odstup-3xl)}.hero__nadpis{letter-spacing:.08em}.hero__podnadpis{max-inline-size:30ch;color:var(--akcent);font-family:var(--pismo-display);font-size:var(--velkost-xl);line-height:var(--vyska-riadku-nadpis);margin-block-start:var(--odstup-2xs)}.hero__perex{color:var(--text);font-family:var(--pismo-text);font-size:var(--velkost-perex);line-height:1.6;margin-block-start:var(--odstup-m);margin-block-end:var(--odstup-l);text-wrap:pretty}.teza{max-inline-size:24ch;font-family:var(--pismo-display);font-size:var(--velkost-xl);line-height:var(--vyska-riadku-nadpis);text-wrap:balance;margin-block-start:var(--odstup-l)}.teza-zvysok{color:var(--text-tlmeny);margin-block-start:var(--odstup-m)}.akcie{gap:var(--odstup-s);flex-wrap:wrap;margin-block-start:var(--odstup-xl);display:flex}.dvojica{gap:var(--odstup-xl);align-items:start;display:grid}.scena-kariet{align-self:start}@media (width>=900px){.dvojica{grid-template-columns:minmax(0, var(--sirka-textu)) 1fr}}.karty__uvod{font-size:var(--velkost-perex);line-height:1.6}.scena-kariet{align-content:center;justify-items:center;min-block-size:28rem;inline-size:100%;display:grid;position:relative}.karta{block-size:100%;inline-size:100%;padding:var(--odstup-m);border-radius:var(--polomer);display:grid}.karta--lice{background-color:var(--karta-lice);border:1px solid var(--zlato);place-content:center;position:relative}.karta--lice:before{content:"";border:1px solid var(--zlato);border-radius:var(--polomer);opacity:.5;position:absolute;inset:.5rem}.karta__zona{font-family:var(--pismo-display);font-size:var(--velkost-l);letter-spacing:.1em;color:var(--zlato);text-align:center}.karta--rub{background-color:var(--karta-rub);color:var(--text-na-pergamene);align-content:space-between}.karta__pole{border-block-end:1px solid var(--zlato);font-size:var(--velkost-s);letter-spacing:.08em;text-transform:uppercase;padding-block-end:var(--odstup-2xs)}.karta__pole--zaznam{color:color-mix(in srgb, var(--text-na-pergamene) 65%, var(--karta-rub));border-block-end:0;padding-block-end:0}.otocna{z-index:1;perspective:60rem;inline-size:min(100%,15rem)}.otocna__vnutro{aspect-ratio:63/88;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,0,.2,1);display:block;position:relative}.scena-kariet.je-otocena .otocna__vnutro{transform:rotateY(180deg)}.otocna__strana{backface-visibility:hidden;position:absolute;inset:0}.otocna__strana--rub{transform:rotateY(180deg)}.mini{aspect-ratio:63/88;border-radius:2px;inline-size:4.5rem;display:block}.mini--lice{background-color:var(--karta-lice);border:1px solid var(--zlato);position:relative}.mini--lice:before{content:"";border:1px solid var(--zlato);opacity:.5;border-radius:1px;position:absolute;inset:.25rem}.mini--obluk{transform:rotate(var(--uhol)) translateY(-8.5rem);transition:transform .5s cubic-bezier(.2,0,.2,1);transition-delay:calc(var(--i) * 35ms);margin-block-start:-3.15rem;margin-inline-start:-2.25rem;position:absolute;inset-block-start:60%;inset-inline-start:50%}.scena-kariet.je-otocena .mini--obluk{transform:rotate(var(--uhol)) translateY(-9.25rem)}@media (prefers-reduced-motion:reduce){.otocna__vnutro,.mini{transition:none}}.vidlica{block-size:5rem;inline-size:100%;fill:none;stroke:var(--akcent);stroke-width:1px;opacity:.5;margin-block-start:var(--odstup-l)}.rozdvojka{gap:var(--odstup-m);display:grid}@media (width>=768px){.rozdvojka{grid-template-columns:1fr 1fr}}.pripad{gap:var(--odstup-s);padding:var(--odstup-m);border:1px solid var(--akcent);border-radius:var(--polomer);background-color:var(--povrch);align-content:start;display:grid}.pripad__stav{color:var(--akcent);font-size:var(--velkost-s);letter-spacing:.12em;text-transform:uppercase}.trojica{gap:var(--odstup-l);display:grid}@media (width>=768px){.trojica{grid-template-columns:repeat(3,1fr)}}.uroven{gap:var(--odstup-2xs);align-content:start;display:grid}.uroven__nazov{font-size:var(--velkost-l)}.uroven__popis{color:var(--text-tlmeny)}.vizual{place-self:center}.vizual-me{aspect-ratio:63/88;inline-size:min(15rem,58vw);position:relative}.vizual-me__karta{border:1px solid var(--zlato);border-radius:var(--polomer);background-color:var(--karta-lice);position:absolute;inset:0}.vizual-me__karta:before{content:"";border:1px solid var(--zlato);border-radius:var(--polomer);opacity:.5;position:absolute;inset:.5rem}.vizual-me__sipka{fill:none;block-size:100%;inline-size:100%;stroke:var(--akcent);stroke-width:.8px;stroke-linecap:round;pointer-events:none;position:absolute;inset:0;overflow:visible}.vizual-me__oblucik{stroke-dasharray:3 3}.vizual-me__odkryv{fill:none;stroke:#fff;stroke-width:8px;stroke-linecap:round;stroke-dasharray:100 900;stroke-dashoffset:var(--odkryte,0)}.vizual-me__ciel{transition:opacity .25s cubic-bezier(.2,0,.2,1)}.vizual-me.je-riadene:not(.je-dokreslene) .vizual-me__ciel{opacity:0}.vizual-me__krok-bod{fill:var(--akcent);stroke:none}.vizual-me__slovo{fill:var(--akcent);stroke:none;font-family:Segoe Script,Bradley Hand,Snell Roundhand,cursive;font-size:10px}@media (prefers-reduced-motion:reduce){.vizual-me__ciel{transition:none}}}

/* --- Team / Náš tím --- */
@layer components {
  .tim-sekcia-popis {
    max-inline-size: 70ch;
    margin-block-end: var(--odstup-xl);
  }

  .tim-filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: var(--odstup-2xl);
    padding-block: var(--odstup-s);
  }

  .tim-filter-tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    border: 1px solid var(--ciara);
    background: var(--povrch);
    color: var(--text-tlmeny);
    font-size: var(--velkost-s);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--prechod);
    text-decoration: none;
    user-select: none;
    font-family: var(--pismo-text);
  }

  .tim-filter-tlacidlo:hover {
    border-color: var(--akcent);
    color: var(--akcent);
    transform: translateY(-1px);
  }

  .tim-filter-tlacidlo--aktivne {
    background: var(--akcent);
    border-color: var(--akcent);
    color: #ffffff;
    font-weight: 600;
  }

  :root[data-tema="tmava"] .tim-filter-tlacidlo--aktivne {
    color: #000000;
  }

  .tim-filter-pocitadlo {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    background: color-mix(in srgb, currentColor 18%, transparent);
  }

  .tim-mriezka {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--odstup-l);
    margin-block-end: var(--odstup-3xl);
  }

  @media (min-width: 768px) {
    .tim-mriezka {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
  }

  /* Jednotlivá karta experta - kompaktná s jemným zaobleným orámovaním */
  .tim-karta {
    background: var(--povrch-card, #FFFFFF);
    border: 1px solid var(--hranica);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform var(--prechod), border-color var(--prechod), box-shadow var(--prechod);
    position: relative;
  }

  :root[data-tema="tmava"] .tim-karta {
    background: #111111;
    border-color: rgba(197, 160, 89, 0.24);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  .tim-karta:hover {
    border-color: var(--akcent);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(140, 107, 40, 0.12);
  }

  :root[data-tema="tmava"] .tim-karta:hover {
    box-shadow: 0 10px 24px rgba(197, 160, 89, 0.16);
  }

  .tim-karta[hidden] {
    display: none !important;
  }

  /* Zmenšená fotografia experta */
  .tim-karta__foto-obal {
    width: 140px;
    height: 140px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F8F5EE;
    border-radius: 14px;
    position: relative;
    margin: 0 auto 1.15rem auto;
    border: 1px solid var(--hranica);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
  }

  :root[data-tema="tmava"] .tim-karta__foto-obal {
    border-color: rgba(197, 160, 89, 0.2);
  }

  .tim-karta__foto-obal picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tim-karta__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
  }

  .tim-karta:hover .tim-karta__foto {
    transform: scale(1.04);
  }

  .tim-karta__telo {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  /* Zmena písma mena pod fotkou na moderný bezpätkový Inter */
  .tim-karta__meno {
    font-family: var(--pismo-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0 0 0.35rem 0;
    color: var(--text-jasny);
    text-align: center;
  }

  .tim-karta__meno a {
    color: inherit;
    text-decoration: none;
  }

  .tim-karta__meno a:hover {
    color: var(--akcent);
  }

  .tim-karta__rola {
    font-size: 0.8rem;
    color: var(--akcent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: 0.75rem;
    text-align: center;
  }

  .tim-karta__stitky {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-block-end: 0.85rem;
  }

  .tim-stitok {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--akcent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--akcent) 25%, transparent);
    color: var(--text);
  }

  /* Popis činnosti so zalomeným textom */
  .tim-karta__popis {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
    margin-block-end: var(--odstup-m);
    flex-grow: 1;
    text-wrap: pretty;
    text-align: left;
  }

  .tim-karta__pata {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-block-start: 1px solid var(--ciara);
    padding-block-start: var(--odstup-s);
    margin-block-start: auto;
    gap: 0.75rem;
    font-size: var(--velkost-s);
    flex-wrap: wrap;
  }

  .tim-karta__posobenie {
    font-size: 0.825rem;
    color: var(--text-tlmeny);
    line-height: 1.4;
  }

  .tim-karta__posobenie-nazov {
    color: var(--text);
    font-weight: 600;
    display: block;
  }

  /* Kontajner pre linky (za sebou) */
  .tim-karta__odkazy {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  /* Tlačidlo / odkaz s logom NAD textom */
  .tim-odkaz-ikona {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--akcent);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--akcent) 28%, transparent);
    background: color-mix(in srgb, var(--akcent) 6%, transparent);
    transition: all var(--prechod);
    line-height: 1;
    min-width: 52px;
  }

  .tim-odkaz-ikona:hover {
    background: var(--akcent);
    color: #ffffff;
    border-color: var(--akcent);
    transform: translateY(-2px);
    text-decoration: none;
  }

  :root[data-tema="tmava"] .tim-odkaz-ikona:hover {
    color: #000000;
  }

  /* Striktné obmedzenie veľkosti loga 'in' */
  .tim-odkaz-ikona svg,
  svg.tim-in-ikona {
    width: 18px !important;
    height: 18px !important;
    inline-size: 18px !important;
    block-size: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* Sekcia ostatní experti (kompaktný akordeón s kartovým zaoblením) */
  .tim-ostatni-sekcia {
    margin-block-start: var(--odstup-3xl);
    padding-block-start: var(--odstup-2xl);
    border-block-start: 1px solid var(--ciara);
  }

  .tim-ostatni-zoznam {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: var(--odstup-l);
  }

  .tim-ostatni-polozka {
    background: var(--povrch-card, #FFFFFF);
    border: 1px solid var(--hranica);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: border-color var(--prechod), box-shadow var(--prechod);
    overflow: hidden;
  }

  :root[data-tema="tmava"] .tim-ostatni-polozka {
    background: #111111;
    border-color: rgba(197, 160, 89, 0.2);
  }

  .tim-ostatni-polozka[hidden] {
    display: none !important;
  }

  .tim-ostatni-polozka:hover,
  .tim-ostatni-polozka[open] {
    border-color: var(--akcent);
    box-shadow: 0 6px 18px rgba(140, 107, 40, 0.08);
  }

  :root[data-tema="tmava"] .tim-ostatni-polozka:hover,
  :root[data-tema="tmava"] .tim-ostatni-polozka[open] {
    box-shadow: 0 6px 18px rgba(197, 160, 89, 0.12);
  }

  .tim-ostatni-suhrn {
    padding: var(--odstup-s) var(--odstup-m);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odstup-m);
    font-weight: 500;
  }

  .tim-ostatni-suhrn::-webkit-details-marker {
    display: none;
  }

  .tim-ostatni-hlavicka-vlavo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .tim-ostatni-meno {
    font-family: var(--pismo-text);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-jasny);
  }

  .tim-ostatni-rola {
    font-size: 0.8rem;
    color: var(--akcent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .tim-ostatni-sipka {
    width: 16px !important;
    height: 16px !important;
    inline-size: 16px !important;
    block-size: 16px !important;
    stroke: var(--akcent);
    stroke-width: 2;
    fill: none;
    transition: transform var(--prechod);
    flex-shrink: 0;
  }

  .tim-ostatni-polozka[open] .tim-ostatni-sipka {
    transform: rotate(180deg);
  }

  .tim-ostatni-telo {
    padding: 0 var(--odstup-m) var(--odstup-m);
    border-block-start: 1px dashed var(--ciara);
    margin-block-start: var(--odstup-xs);
    padding-block-start: var(--odstup-s);
  }

  /* Teaser karta pre Náš tím na o-nas.html a index.html */
  .karta-tim-odkaz {
    background: var(--povrch-card, #FFFFFF);
    border: 1px solid var(--akcent);
    border-radius: 16px;
    padding: var(--odstup-xl);
    margin-block: var(--odstup-2xl);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  :root[data-tema="tmava"] .karta-tim-odkaz {
    background: #111111;
  }

  .karta-tim-odkaz::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: var(--akcent);
  }

  .karta-tim-odkaz__hlavicka {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--akcent);
    font-size: var(--velkost-s);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-block-end: var(--odstup-2xs);
  }

  /* --- MAP4Y Fotografie kariet --- */
  .karty-foto-drziak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .karty-foto-obal {
    position: relative;
    border-radius: var(--polomer-l, 14px);
    overflow: hidden;
    border: 1px solid rgba(197, 160, 89, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: var(--povrch);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
  }

  :root[data-tema="tmava"] .karty-foto-obal {
    border-color: rgba(197, 160, 89, 0.28);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  }

  .karty-foto-obal:hover {
    transform: translateY(-3px);
    border-color: var(--akcent);
    box-shadow: 0 16px 40px rgba(197, 160, 89, 0.18);
  }

  .karty-foto-obal picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .karty-foto {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
    object-fit: cover;
  }

  .karty-foto-obal--krabicka {
    max-width: 360px;
    margin-inline: auto;
  }

  .karty-foto__popisok {
    font-size: var(--velkost-s, 0.85rem);
    color: var(--text-tlmeny);
    margin-top: 0.65rem;
    text-align: center;
    font-style: italic;
  }
}