/** Shopify CDN: Minification failed

Line 11638:2 Unexpected "{"
Line 11638:3 Expected identifier but found "%"
Line 11639:7 Expected identifier but found whitespace
Line 11639:15 Unexpected "("
Line 11642:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cart-drawer (INDEX:1) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__dialog {
    overflow: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  /* TK — jednosloupcový drawer. Doporučení = per-položková MINI lišta
     „Hodí se k tomu" (.cart-items__fbt, tk-upsell context 'cart-item'). */
  .cart-drawer__layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  @media screen and (min-width: 750px) {
    cart-drawer-component .cart-drawer__dialog {
      width: 420px !important;
      max-width: 96vw !important;
    }
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  /* ═══ TK — "Ledger" cart drawer (2026-07-01) ══════════════════════════
     Compact + modern redesign. Signature = a tabular-nums PRICE RAIL: every
     line price + the grand total lock to one right edge, and the "K úhradě"
     total carries a single 2px lime tick (border-left) as the one accent in
     an otherwise mono-neutral, hairline-only ledger. Height cut via a fixed
     2.75rem thumbnail envelope, zero inter-row margin (left-inset hairline
     replaces the gap), 2-line title clamp, and a tightened summary.
     Lime stays strictly reserved: count pill, progress fill (FSB, untouched),
     focus ring, total tick — never hover fills or dividers.
     ⚠️ base.css loads BEFORE compiled_assets → every override scoped under
     .cart-drawer to out-specify the snippet {% stylesheet %} rules. */
  .cart-drawer {
    --cart-drawer-padding: 0.75rem 1rem;
    --cart-drawer-padding-desktop: 0.75rem 1.25rem;
    --cart-font-size--2xs: 0.62rem;
    --cart-font-size--xs: 0.68rem;
    --cart-font-size--sm: 0.74rem;
    --cart-font-size--md: 0.82rem;
    --cart-font-size--2xl: 1.2rem;
    /* hairline ladder: item / section / inner-stepper */
    --tk-hairline-1: rgb(var(--color-foreground-rgb) / 0.07);
    --tk-hairline-2: rgb(var(--color-foreground-rgb) / 0.1);
    --tk-tile-fill: rgb(var(--color-foreground-rgb) / 0.02);
  }

  /* ── Header — slim, small lime count pill, quiet close ── */
  .cart-drawer .cart-drawer__header {
    min-height: 2.5rem;
    padding-block: 0.5rem;
    align-items: center;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .cart-drawer .cart-drawer__heading {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0; /* .h3 utility má asymetrický margin -> Košík by jel výš než close */
    display: flex;
    align-items: center;
    gap: 0;
  }

  .cart-drawer .cart-drawer__heading--empty {
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  /* count bubble → compact lime pill (was a large padded bubble) */
  .cart-drawer .cart-drawer__heading .cart-bubble {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.4rem;
    margin-left: 0.45rem;
    border-radius: 999px;
    aspect-ratio: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .cart-drawer .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    aspect-ratio: auto;
    min-width: 1.15rem;
  }

  .cart-drawer .cart-drawer__heading .cart-bubble .cart-bubble__background {
    background: #ff5a00;
  }

  .cart-drawer .cart-drawer__heading .cart-bubble .cart-bubble__text,
  .cart-drawer .cart-drawer__heading .cart-bubble .cart-bubble__text-count {
    color: #0a0a0a;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .cart-drawer .cart-drawer__close-button {
    position: static; /* base .close-button je position:fixed s top:margin-lg -> vypadával z flexu a seděl níž než "Košík" */
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--qty-radius, 8px);
    color: rgb(var(--color-foreground-rgb) / 0.6);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .cart-drawer .cart-drawer__close-button:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: #0a0a0a;
  }

  .cart-drawer .cart-drawer__items {
    padding-block: 0.25rem 0.75rem;
  }

  .cart-drawer__fsb {
    display: flex;
    flex-direction: column;
    /* Odsazení mezi lištou dopravy a lištou dárku — bez něj na sebe lepily. */
    gap: 0.7rem;
    width: 100%;
    order: -1;
  }

  /* ── Line items — ledger rows: fixed thumb tile, 2-line title, price rail ── */
  .cart-drawer .cart-items__table-row {
    grid-template-columns: 76px minmax(0, 1fr) minmax(4rem, auto); /* Spigen: sloupec fotky 76 px */
    column-gap: 0.625rem;
    row-gap: 0.2rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
    position: relative;
  }

  /* boxless separation: single left-inset hairline (starts after the thumb),
     zero margin → this is where most of the vertical height is reclaimed */
  .cart-drawer .cart-items--dividers .cart-items__table-row {
    border-bottom: 0;
    margin-bottom: 0; /* (0,3,0) beats .cart-items--dividers … margin (0,2,0) tie */
  }

  /* ⚠️ header-actions.liquid má `.cart-drawer__items .cart-items__table-row
     { padding/margin-bottom: var(--gap-xl) }` (0,2,0) a compiled pořadím PŘEBÍJÍ
     stejné-specificitní pravidlo výš → tady (0,3,0) vyhrává specificitou.

     REDESIGN 2026-08-28: šedé karty pryč (sladěno s /cart) — položky jsou
     vzdušný seznam oddělený hairlinem. Vedlejší efekt: ušetří se padding karty
     i mezera mezi kartami, takže se do draweru vejde VÍC položek než dřív. */
  .cart-drawer .cart-drawer__items .cart-items__table-row {
    /* nesymetricky: mezera POD lištou doporučení (= k další položce) musí být
       větší než mezera mezi položkou a JEJÍ lištou, jinak lišta opticky patří
       k následující položce */
    padding-block: 0.55rem 0.85rem;
    margin-bottom: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.09);
    border-radius: 0;
  }

  /* header-actions má NAVÍC `…__table-row:last-child { padding-block-end: 0;
     border-bottom: none }` (0,3,0) → (0,4,0) sjednocuje. */
  .cart-drawer .cart-drawer__items .cart-items__table-row:last-child {
    padding-block-end: 0.7rem;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* Bundle podřádek visí přímo pod rodičem — mezi nimi žádná linka */
  .cart-drawer .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: 0;
    padding-block-end: 0;
  }

  .cart-drawer .cart-drawer__items .cart-items__nested-line {
    padding-block-start: 0;
  }

  /* fixed square thumbnail on a soft tile — transparent-PNG accessory shots
     (kabely / skla / kryty) sit on a subtle ground instead of raw white */
  .cart-drawer .cart-items__media-container {
    width: 76px; /* Spigen: větší náhled v rámečku (vzor MO drawer) */
    height: 76px; /* explicitně — Safari neumí % výšku obrázku odvodit jen z aspect-ratio (fotka byla neviditelná) */
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  /* contain, ne cover — příslušenství jsou transparentní PNG na výšku i šířku
     a cover jim uřezával kraje (sladěno s /cart). */
  .cart-drawer .cart-items__media-image {
    width: 100%;
    height: 100%;
    max-width: 62px;
    max-height: 62px;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .cart-drawer .cart-items__title {
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-drawer .cart-items__details {
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .cart-drawer .cart-items__details > * + *,
  .cart-drawer .cart-items__bundle li {
    margin-block-start: 0.1rem;
  }

  .cart-drawer .cart-items__variants,
  .cart-drawer .cart-items__variant {
    font-size: 0.8125rem;
    font-weight: 500;
  }

  /* ── Quantity stepper — segmented hairline pill + lime focus ring ── */
  .cart-drawer .cart-items__quantity {
    margin-block-start: 0.25rem;
    gap: 0.375rem;
  }

  .cart-drawer .cart-items__quantity .quantity-selector {
    height: 2rem;
    min-height: 2rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: var(--qty-radius, 8px);
    background: transparent;
    overflow: hidden;
    /* stretch: tlačítka i input vyplní celou výšku pilulky, takže hover
       pozadí sedí těsně u vnitřního děliče (žádná mezera nahoře/dole) */
    align-items: stretch;
    justify-content: flex-start;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .cart-drawer .cart-items__quantity .quantity-selector:focus-within {
    border-color: #ff5a00;
    box-shadow: 0 0 0 2px rgb(255 90 0 / 0.35);
  }

  .cart-drawer .cart-items__quantity .quantity-selector button {
    width: 2rem;
    min-width: 2rem;
    height: auto;
    min-height: 0;
    border-radius: 0; /* segmenty flush -> hover se dotýká děliče */
    color: rgb(var(--color-foreground-rgb) / 0.7);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .cart-drawer .cart-items__quantity .quantity-selector button:hover:not([disabled]) {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: #0a0a0a;
  }

  .cart-drawer .cart-items__quantity .quantity-selector input {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 1.75rem;
    height: auto;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    border-inline: 1px solid var(--tk-hairline-2);
  }

  .cart-drawer .cart-items__remove {
    width: 2rem;
    height: 2rem;
    min-width: auto;
    border-radius: var(--qty-radius, 8px);
    color: rgb(var(--color-foreground-rgb) / 0.45);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .cart-drawer .cart-items__remove:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: #0a0a0a;
  }

  /* ── The price rail — tabular-nums numbers lock to one right edge ── */
  .cart-drawer .cart-items__price {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: end;
  }

  .cart-drawer .cart-items__price-unit {
    font-size: 0.8125rem;
  }

  .cart-drawer .compare-at-price {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  /* Mini lišta doporučení (.cart-items__fbt) stylovaná v cart-products.liquid +
     tk-upsell.liquid; tady jen zjemnění oddělovače po zrušení karet. */
  /* ⚠️ ŽÁDNÁ linka nad lištou — po zrušení karet z ní dělala samostatný blok
     a nešlo poznat, ke KTERÉ položce doporučení patří (uživatel 2026-08-28).
     Přiřazení dělá odsazení pod text položky (šířka náhledu + column-gap)
     a to, že od své položky je lišta blíž než od té následující. */
  .cart-drawer .cart-items__fbt {
    margin-top: 0.35rem;
    padding-top: 0;
    padding-inline-start: calc(2.75rem + 0.625rem);
    border-top: 0;
  }

  /* Pilulka slevy/dárku v úzkém draweru o kousek menší než na /cart */
  .cart-drawer .cart-items__discounts li {
    padding: 3px 7px 3px 6px;
    font-size: 0.8125rem;
  }

  .cart-drawer .cart-items__price-each {
    font-size: 0.8125rem;
  }

  /* ── Summary footer — compact ledger totals ── */
  /* gap: header-actions.liquid dává flexu gap var(--gap-2xl)=32px → FSB↔slevový
     kód i totals↔CTA zely 32px dírami. (0,2,0) přebije (0,1,0). */
  .cart-drawer .cart-drawer__summary {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    padding-block: 0.6rem;
    gap: 0.55rem;
  }

  .cart-drawer .cart__summary-totals {
    gap: 0.35rem;
  }

  /* Lišty (.tk-perk = doprava i dárek) v draweru zhuštěné — menší padding,
     menší dlaždice, nižší dráha, nižší spodní slot. Sdílené hodnoty drží obě
     lišty stejně vysoké i tady. */
  .cart-drawer .tk-perk {
    padding: 0.5rem 0.65rem 0.55rem;
    border-radius: 10px;
  }

  .cart-drawer .tk-perk__tile {
    width: 38px;
    height: 38px;
  }

  .cart-drawer .tk-fsb__msg {
    font-size: 0.8125rem;
  }

  .cart-drawer .tk-perk__foot {
    padding-top: 0.5rem;
    min-height: 1.1rem;
  }

  .cart-drawer .tk-perk__track {
    height: 5px;
  }

  /* slevový kód — nižší input i tlačítko */
  .cart-drawer .cart-discount__input {
    height: 2.25rem;
    min-height: 2.25rem;
    padding-block: 0.35rem;
    font-size: 0.8125rem;
  }

  .cart-drawer .cart-discount__button {
    height: 2.25rem;
    min-height: 2.25rem;
    padding-block: 0;
    padding-inline: 0.9rem;
    font-size: 0.8125rem;
  }

  .cart-drawer .cart__original-total-container,
  .cart-drawer .cart__original-total-container * {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }

  .cart-drawer .cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .cart-drawer .cart__total-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .cart-drawer .cart__total-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    padding-left: 0.55rem;
    border-left: 2px solid #ff5a00; /* the single lime tick */
  }

  .cart-drawer .tax-note {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  /* TK: font-size/weight dedi z base.css "Sjednoceni CTA buttonu" (0.92rem/650),
     aby drawer "Zobrazit kosik" sedel s /cart tlacitky. Tady jen drawer-kompaktni
     vyska/padding + layout. Radius (8px), barvy a hover resi base.css. */
  .cart-drawer .cart__ctas {
    margin-top: 0.25rem;
  }

  .cart-drawer .cart__ctas .cart__checkout-button {
    height: 2.6rem;
    padding-inline: 1.25rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .cart-drawer .cart__ctas .cart__checkout-button[aria-disabled='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .cart-drawer .cart-actions {
    padding-block: 0.25rem;
    gap: 0.4rem;
    margin-block-start: 0;
  }

  .cart-drawer .tax-note {
    font-size: 0.8125rem;
  }

  .cart-drawer .cart-note__label,
  .cart-drawer .cart-note__summary,
  .cart-drawer .cart-note__instructions {
    font-size: 0.8125rem;
  }

  .cart-drawer .cart-items__empty-button {
    margin-top: 1rem;
    padding-block: 0.7rem;
    padding-inline: 1.5rem;
    /* font-size/weight dedi z base.css unified rule (0.92rem/650) */
  }

  @media screen and (max-width: 749px) {
    .cart-drawer {
      --cart-drawer-padding: 0.625rem 0.875rem;
    }

    .cart-drawer .cart-items__title {
      font-size: 0.8125rem;
    }

    .cart-drawer .cart-items__price {
      font-size: 0.9rem;
    }

    .cart-drawer .cart-drawer__heading {
      font-size: 0.86rem;
    }

    /* mobil: summary co nejnižší — ať zbyde místo na položky (uživatel: „sotva
       2 produkty nad sebe") */
    .cart-drawer .cart-drawer__summary {
      padding-block: 0.5rem;
      gap: 0.5rem;
    }

    .cart-drawer .cart-drawer__items {
      padding-block: 0.25rem 0.5rem;
    }

    .cart-drawer .tk-perk {
      padding: 0.45rem 0.6rem 0.5rem;
    }

    .cart-drawer .tk-fsb__msg {
      font-size: 0.8125rem;
    }

    .cart-drawer .cart__total-value {
      font-size: 1.05rem;
    }

    .cart-drawer .cart__ctas .cart__checkout-button {
      height: 2.4rem;
      font-size: 0.86rem;
    }

    /* touch bumps — keep steppers/remove/close ≥36px on mobile */
    .cart-drawer .cart-items__quantity .quantity-selector {
      height: 2.25rem;
      min-height: 2.25rem;
    }

    .cart-drawer .cart-items__quantity .quantity-selector button {
      width: 2.25rem;
      min-width: 2.25rem;
    }

    .cart-drawer .cart-items__remove {
      width: 2.25rem;
      height: 2.25rem;
    }

    .cart-drawer .cart-drawer__close-button {
      width: 2.25rem;
      height: 2.25rem;
    }
  }

  .tk-cart-loading {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 3px;
    width: 100%;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .tk-cart-loading::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--color-foreground);
    opacity: 0.7;
    animation: tkCartLoadingSlide 1.1s ease-in-out infinite;
  }

  @keyframes tkCartLoadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
  }

  /* ═══ TK — iOS: „X" nesmí po otevření vypadat vybraně ═════════════════
     `dialog.showModal()` bez `autofocus` fokusne první focusovatelný prvek
     (= zavírací tlačítko). Fokus je teď na `.cart-drawer__inner` (viz snippet);
     tady se doplní zbytek: neviditelný ring na obalu + vypnutý iOS tap
     highlight / výběr textu na X. */
  .cart-drawer .cart-drawer__inner:focus,
  .cart-drawer .cart-drawer__inner:focus-visible {
    outline: none;
  }

  .cart-drawer .cart-drawer__dialog {
    -webkit-tap-highlight-color: transparent;
  }

  .cart-drawer .cart-drawer__close-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* fokus získaný tapem/klikem (ne klávesnicí) nesmí kreslit ring ani podbarvení */
  .cart-drawer .cart-drawer__close-button:focus:not(:focus-visible) {
    outline: none;
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  /* ═══ TK — PRÁZDNÝ drawer (2026-08-21) ════════════════════════════════
     Původně jen centrovaná věta „Košík je prázdný". Teď plnohodnotná plocha:
     hero + kampaňový banner + regál produktů z kolekce (nastavení sekce).
     ⚠️ Vertikální centrování z `snippets/header-actions.liquid`
     (`.cart-drawer--empty .cart-drawer__inner`, `:not(:has(.cart-form))`) se
     přebíjí SPECIFICITOU — compiled pořadí je nespolehlivé. */
  .cart-drawer .cart-drawer--empty .cart-drawer__inner {
    display: block;
    height: 100%;
    margin-top: 0;
  }

  .cart-drawer .cart-drawer--empty .cart-drawer__layout {
    height: 100%;
  }

  /* (0,4,0) — přebíjí `.cart-drawer:not(:has(.cart-form)) .cart-drawer__content` (0,3,0) */
  .cart-drawer .cart-drawer--empty .cart-drawer__inner .cart-drawer__content {
    justify-content: flex-start;
    text-align: left;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  .cart-drawer .cart-drawer--empty .cart-drawer__header--empty {
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .cart-drawer .cart-drawer--empty .cart-drawer__items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: 0 1rem;
  }

  /* ── Hero: ikonka + nadpis + podtitulek + „Pokračovat v nákupu" ── */
  .tk-cart-empty__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 1.4rem 1.1rem;
  }

  .tk-cart-empty__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 0.65rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  .tk-cart-empty__icon svg {
    width: 22px;
    height: 22px;
  }

  .cart-drawer .cart-drawer--empty .cart-drawer__heading--empty {
    font-size: 0.95rem;
    font-weight: 700;
    justify-content: center;
    margin: 0;
  }

  .tk-cart-empty__sub {
    margin: 0.3rem 0 0;
    max-width: 28ch;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .cart-drawer .tk-cart-empty__hero .cart-items__empty-button {
    margin-top: 0.9rem;
  }

  /* ── Banner + regál ── */
  .tk-cart-empty {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-bottom: 0.5rem;
  }

  /* ── Banner akce ──────────────────────────────────────────────────────
     ZÁMĚRNĚ jen obrázek 2:1 + jedno rohové CTA — vizuální kopie velkého hero
     banneru z homepage (`tk-hero-grid`: `banner_ratio: 2`,
     `big_button_position: corner`, `big_button_text: "Ušetřit"`). Sdělení nese
     grafika, žádné další texty. Barvy dědí z globálního nastavení kampaně
     (`settings.grid_promo_*_color`) inline jako `--tk-ce-*`. */
  .tk-cart-empty__banner {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--tk-ce-bg, #383838);
    color: var(--tk-ce-fg, #fff);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }

  @media (hover: hover) {
    a.tk-cart-empty__banner:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
    }
  }

  /* ⚠️ S obrázkem NESMÍ zůstat tmavé pozadí — obrázek plochu kryje celou, ale
     přes antialiasing zaoblených rohů (a při subpixelové výšce z aspect-ratio)
     pozadí prosvítá po okrajích jako tmavý rámeček. Barevné pozadí má smysl
     jen u textového fallbacku bez obrázku. */
  .tk-cart-empty__banner--media {
    background: transparent;
  }

  /* stejný poměr jako hero banner (banner_ratio: 2) */
  .tk-cart-empty__banner-media {
    line-height: 0;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }

  .tk-cart-empty__banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* bez obrázku ať to není prázdná barevná plocha */
  .tk-cart-empty__banner-fallback {
    display: block;
    padding: 1rem 1.1rem 2.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  /* CTA = zmenšená kopie „corner" tlačítka hero banneru (pilulka, uppercase,
     šipka posun na hover). Text bílý tučný — jako všechna oranžová tlačítka. */
  .tk-cart-empty__banner-cta {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--tk-ce-accent, #ff5a00);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
    transition: box-shadow 0.35s ease;
  }

  .tk-cart-empty__banner-arrow {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
  }

  @media (hover: hover) {
    a.tk-cart-empty__banner:hover .tk-cart-empty__banner-cta {
      box-shadow: 0 8px 22px rgb(0 0 0 / 0.26);
    }

    a.tk-cart-empty__banner:hover .tk-cart-empty__banner-arrow {
      transform: translateX(3px);
    }
  }

  .tk-cart-empty__rail {
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .tk-cart-empty__rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .cart-drawer .tk-cart-empty__rail .tk-upsell__heading {
    margin: 0;
  }

  .tk-cart-empty__rail-all {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    text-decoration: none;
  }

  @media (hover: hover) {
    .tk-cart-empty__rail-all:hover {
      color: var(--color-foreground);
      text-decoration: underline;
    }
  }

  /* 2sloupcová mřížka dlaždic — přebíjí carouselový `flex-basis` z
     `.tk-upsell--drawer .tk-upsell-card` (0,2,0) specificitou (0,3,0). */
  .tk-cart-empty__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    margin-top: 10px;
  }

  .cart-drawer .tk-cart-empty__grid .tk-upsell-card {
    flex: none;
    min-width: 0;
  }


  /* ═══ TK — kompaktní drawer (2026-08-26) ══════════════════════════════
     Naměřeno Playwrightem při viewportu 900 px: jedna položka 182 px (z toho
     regál „Doporučujeme" 70 px = 38 %), spodní souhrn 375 px, na položky
     zbylo 393 px → dva produkty se nevešly. Zmenšuje se to, co bere nejvíc,
     ŽÁDNÁ funkce se neruší. Vše scopované pod `.cart-drawer`, takže /cart
     zůstává beze změny. */

  /* Regál doporučení: dlaždice 60 → 46 px (2 položky = úspora ~30 px) */
  .cart-drawer .tk-upsell--cart-item .tk-upsell-card--mini .tk-upsell-card__media {
    width: 46px;
    height: 46px;
    padding: 3px;
  }

  .cart-drawer .tk-upsell--cart-item {
    gap: 4px 8px;
  }

  .cart-drawer .tk-upsell--cart-item .tk-upsell__minirow {
    gap: 7px;
  }

  /* Spigen: náhled položky 76 px (rámeček jako u MO) */
  .cart-drawer .cart-items__media-container {
    width: 76px;
    height: 76px;
  }
  .cart-drawer .cart-items__table-row {
    --cart-item-media-width-min: 76px;
    --cart-item-media-width-max: 76px;
  }

  /* Pilulka množství 32 → 28 px */
  .cart-drawer .quantity-selector {
    --qty-height: 28px;
  }

  .cart-drawer .quantity-selector button,
  .cart-drawer .quantity-selector input {
    min-height: 28px;
  }

  /* ⚠️ DVA řádky, ne jeden. Na jeden řádek se název dárku nevešel a končil
     výpustkou („Kompaktní kabel USB-C na USB-C, 60W,…“) — uživatel 2026-08-29
     chtěl vidět celý. Rezervovaná výška drží lištu ve stejné velikosti
     i u krátkých názvů, takže se nic nepřeskládá. */
  .cart-drawer .tk-gift .tk-gift__title {
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.3em);
  }

  .cart-drawer__fsb {
    gap: 0.45rem;
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:collection-links (INDEX:2) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media (min-width: 749px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-blog-posts (INDEX:6) */
.featured-blog-posts h3 {
    text-transform: uppercase;
  }
/* END_SECTION:featured-blog-posts */

/* START_SECTION:featured-product (INDEX:7) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Here I should maybe set the width to auto when the ratio is set to adapt */
  .featured-product-section .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:8) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
    }
  }

  /* Dynamic positioning based on block order */
  @media screen and (min-width: 750px) {
    .utilities {
      position: relative;
    }

    /* Reset default positioning */
    .utilities > * {
      order: 0;
      margin-left: 0;
      margin-right: 0;
      position: static;
    }

    /* Exactly 3 items cases: */
    /* A : A : B => A left, A left, B right */
    /* Example: Copyright and policy left, social right */
    .utilities:has(
        .footer-utilities__text:nth-child(1)
          + .footer-utilities__text:nth-child(2)
          + .footer-utilities__icons:nth-child(3)
      ) {
      grid-template-columns: auto auto 1fr;

      .footer-utilities__icons:nth-child(3) {
        justify-content: end;
      }
    }

    /* A : B : A => A left, B center, A right */
    /* Example: Policy left, Socials center, Copyright right */
    .utilities:has(
        .footer-utilities__text:nth-child(1)
          + .footer-utilities__icons:nth-child(2)
          + .footer-utilities__text:nth-child(3)
      ) {
      grid-template-columns: 1fr auto 1fr;

      .footer-utilities__icons:nth-child(2) {
        justify-self: center;
      }

      .footer-utilities__text:nth-child(3) {
        justify-self: end;
      }
    }

    /* B : A : A => B left, A right, A right */
    /* Example: Socials left, Policy right, Copyright right */
    .utilities:has(
        .footer-utilities__icons:nth-child(1)
          + .footer-utilities__text:nth-child(2)
          + .footer-utilities__text:nth-child(3)
      ) {
      grid-template-columns: 1fr auto auto;

      .footer-utilities__text:nth-child(3) {
        justify-content: end;
      }
    }

    /* Exactly 2 items cases: */
    /* A : A => A left, A left */
    /* Example: Copyright left, Policy left */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__text:last-child) {
      grid-template-columns: auto auto;
      justify-content: space-between;

      .footer-utilities__text:nth-child(2) {
        justify-self: end;
      }
    }

    /* B : A => B left, A right */
    /* Example: Socials left, Policy right */
    .utilities:has(.footer-utilities__icons:first-child:nth-last-child(2) + .footer-utilities__text:last-child) {
      grid-template-columns: 1fr 1fr;

      .footer-utilities__text:nth-child(2) {
        justify-self: end;
      }
    }

    /* A : B => A left, B right */
    /* Example: Socials left, Policy right */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__icons:last-child) {
      grid-template-columns: 1fr 1fr;

      .footer-utilities__icons:nth-child(2) {
        justify-self: end;
      }
    }

    /* Exactly 1 items cases: */
    /* A => A left */
    /* Example: Policy left */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(1)) {
      grid-template-columns: 1fr;
      justify-content: start;

      .footer-utilities__text:nth-child(1) {
        justify-self: start;
      }
    }

    /* B => B left */
    /* Example: Socials left */
    .utilities:has(.footer-utilities__icons:first-child:nth-last-child(1)) {
      grid-template-columns: 1fr;
      justify-content: start;

      .footer-utilities__icons:nth-child(1) {
        justify-self: start;
      }
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:9) */
/* Mobile: Single column layout (base styles) */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }
    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:10) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:hero (INDEX:12) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  #header-group:has(> .header-section > #header-component) ~ .content-for-layout .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__image,
  .hero--auto .hero__video {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    :is(.hero__image, .hero__video) {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-wrapper {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__image,
  .hero__video,
  .hero__video-poster {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__image--mobile,
  .hero__video--mobile,
  .hero__video-wrapper--mobile {
    display: none;
  }

  .hero__image--desktop,
  .hero__video--desktop,
  .hero__video-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__image--desktop,
    .hero__video--desktop,
    .hero__video-wrapper--desktop {
      display: none;
    }

    .hero__image--mobile,
    .hero__video--mobile,
    .hero__video-wrapper--mobile {
      display: block;
    }

    .hero__media-wrapper {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-wrapper {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__video-wrapper--desktop {
    position: relative;
  }

  .hero__video-poster--desktop {
    position: absolute;
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-wrapper,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:logo (INDEX:13) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 750px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:15) */
.tk-blog-post-section {
    --tk-blog-post-accent: #ff5a00;
    --tk-blog-post-radius: 24px;
    --tk-blog-read-width: min(1200px, 94vw);
    position: relative;
  }

  /* ── Reading progress bar ───────────────────────────────── */
  .tk-blog-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
  }
  .tk-blog-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--tk-blog-post-accent), #d94c00);
    box-shadow: 0 0 12px rgb(255 90 0 / 0.6);
    will-change: transform;
  }

  /* ── Share block (below article) ────────────────────────── */
  .tk-blog-share-block {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    max-width: var(--tk-blog-read-width);
    margin: clamp(2.75rem, 5vw, 4rem) auto 0;
    padding: clamp(1.85rem, 4vw, 2.75rem) 1.5rem;
    border-radius: 22px;
    text-align: center;
    background:
      radial-gradient(130% 150% at 50% -30%, rgb(255 90 0 / 0.13), transparent 62%),
      rgb(var(--color-foreground-rgb) / 0.02);
    border: 1px solid rgb(255 90 0 / 0.24);
  }
  .tk-blog-share-block__glow {
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: 50%;
    width: 340px;
    height: 340px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 90 0 / 0.22), transparent 70%);
    pointer-events: none;
    filter: blur(6px);
  }
  .tk-blog-share-block__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
  .tk-blog-share-block__eyebrow svg { color: var(--tk-blog-post-accent); }
  .tk-blog-share-block__heading {
    position: relative;
    margin: 0;
    font-family: var(--tk-f-display, var(--font-h1--family, inherit));
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--color-foreground);
  }
  .tk-blog-share {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 0.35rem;
  }
  .tk-blog-share__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .tk-blog-share__btn:hover {
    background: var(--tk-blog-post-accent);
    border-color: var(--tk-blog-post-accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -10px rgb(255 90 0 / 0.7);
  }
  .tk-blog-share__copy .tk-blog-share__icon-check,
  .tk-blog-share__copy.is-copied .tk-blog-share__icon-link {
    display: none;
  }
  .tk-blog-share__copy.is-copied .tk-blog-share__icon-check {
    display: block;
  }
  .tk-blog-share__copy.is-copied {
    background: var(--tk-blog-post-accent);
    border-color: var(--tk-blog-post-accent);
    color: #fff;
  }
  .tk-blog-share__toast {
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    border-radius: 7px;
    background: #0a0a0a;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .tk-blog-share__copy.is-copied .tk-blog-share__toast {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ── Related articles ───────────────────────────────────── */
  .tk-blog-related {
    width: 100%;
    max-width: min(var(--normal-content-width, 64rem), 64rem);
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding-block-start: clamp(2rem, 4vw, 3rem);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  .tk-blog-related__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
  }
  .tk-blog-related__accent {
    display: block;
    width: 32px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tk-blog-post-accent), #d94c00);
  }
  .tk-blog-related__heading {
    margin: 0;
    font-family: var(--tk-f-display, var(--font-h1--family, inherit));
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .tk-blog-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  .tk-blog-related__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: rgb(var(--color-foreground-rgb) / 0.015);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    text-decoration: none;
    color: var(--color-foreground);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) var(--tk-rel-delay, 0s),
      transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) var(--tk-rel-delay, 0s),
      box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .tk-blog-related__card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .tk-blog-related__card:hover {
    border-color: rgb(255 90 0 / 0.5);
    box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.3);
  }
  .tk-blog-related__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }
  .tk-blog-related__img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Spigen: celá produktová fotka */
    padding: 5%;
    box-sizing: border-box;
    background: #fff;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tk-blog-related__card:hover .tk-blog-related__img {
    transform: scale(1.05);
  }
  .tk-blog-related__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / 0.25);
  }
  .tk-blog-related__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem 1.1rem;
  }
  .tk-blog-related__meta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
  .tk-blog-related__title {
    font-family: var(--tk-f-display, var(--font-h1--family, inherit));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tk-blog-related__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }
  .tk-blog-related__more svg {
    transition: transform 0.25s ease;
  }
  .tk-blog-related__card:hover .tk-blog-related__more svg {
    transform: translateX(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-blog-related__card {
      opacity: 1 !important;
      transform: none !important;
      transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
    }
  }

  @media screen and (max-width: 999px) {
    .tk-blog-related__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 649px) {
    .tk-blog-related__grid {
      grid-template-columns: 1fr;
    }
  }

  .tk-blog-post-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
    padding-block-end: clamp(1rem, 2vw, 1.75rem);
  }

  .tk-blog-post-hero > * {
    margin: 0;
    width: 100%;
  }

  .tk-blog-post-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content !important;
    margin-inline: auto;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgb(255 90 0 / 0.14);
    border: 1px solid rgb(255 90 0 / 0.32);
    color: var(--color-foreground);
    font-family: var(--font-body--family, inherit);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  .tk-blog-post-hero__eyebrow:hover {
    background: rgb(255 90 0 / 0.22);
    border-color: rgb(255 90 0 / 0.5);
    transform: translateY(-1px);
  }

  .tk-blog-post-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tk-blog-post-accent);
    box-shadow: 0 0 0 0 rgb(255 90 0 / 0.55);
    animation: tk-blog-post-pulse 2.4s ease-in-out infinite;
  }

  @keyframes tk-blog-post-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(255 90 0 / 0.55); }
    50%      { box-shadow: 0 0 0 7px rgb(255 90 0 / 0); }
  }

  /* Title — restrained editorial scale (block schema sets type_preset h2 + 1rem) */
  .tk-blog-post-hero .text-block {
    --max-width: none !important;
    --text-align: center !important;
    max-width: none !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .tk-blog-post-hero .text-block,
  .tk-blog-post-hero .text-block h1 {
    font-family: var(--tk-f-display, var(--font-h1--family, var(--font-body--family)));
    font-size: clamp(2rem, 4.2vw, 3rem) !important;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 800;
    text-wrap: balance;
    color: var(--color-foreground);
  }

  .tk-blog-post-hero .text-block h1 {
    margin: 0;
  }

  /* Details (date / author) — centered, subdued */
  .tk-blog-post-hero .blog-post-details {
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0.82rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .tk-blog-post-hero__lead {
    font-size: 1rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.75);
    max-width: 42em;
    margin-inline: auto;
  }

  /* Reveal */
  .tk-blog-post-hero > * {
    opacity: 0;
    animation: tk-blog-post-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .tk-blog-post-hero > *:nth-child(1) { animation-delay: 0.05s; }
  .tk-blog-post-hero > *:nth-child(2) { animation-delay: 0.13s; }
  .tk-blog-post-hero > *:nth-child(3) { animation-delay: 0.21s; }
  .tk-blog-post-hero > *:nth-child(4) { animation-delay: 0.29s; }

  @keyframes tk-blog-post-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-blog-post-hero > *,
    .tk-blog-post-hero__eyebrow-dot {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  @media screen and (max-width: 749px) {
    .tk-blog-post-hero .text-block,
    .tk-blog-post-hero .text-block h1 {
      font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
    }
  }

  .blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }

  /* ═══ Spigen mobil: článek — texty zarovnané vlevo, střídmější velikosti, tabulky scrollují ═══ */
  @media screen and (max-width: 749px) {
    .tk-blog-post-hero { align-items: flex-start; text-align: left; gap: 0.7rem; }
    .tk-blog-post-hero .text-block, .tk-blog-post-hero .text-block h1 { text-align: left !important; font-size: clamp(1.55rem, 6.5vw, 2rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em; }
    .tk-blog-post-hero .blog-post-details, .tk-blog-post-hero .blog-post-details *, .tk-blog-post-hero__lead { text-align: left !important; justify-content: flex-start !important; margin-inline: 0 !important; }
    .tk-blog-post-hero__lead { font-size: 1rem; line-height: 1.55; }
    .blog-post-content, .blog-post-content p, .blog-post-content li { font-size: 1rem !important; line-height: 1.6 !important; }
    .blog-post-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.9rem; }
    .blog-post-content table th, .blog-post-content table td { white-space: nowrap; padding: 10px 12px; }
    .blog-post-content table th { font-size: 0.8125rem; }
    .tk-article-figure figcaption { font-size: 0.85rem; }
  }
  /* Související články: karty viditelné i bez IntersectionObserveru (na mobilu zůstávaly skryté) */
  .tk-blog-related__card { opacity: 1 !important; transform: none !important; animation: tk-rel-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--tk-rel-delay, 0s); }
  @keyframes tk-rel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-cart (INDEX:17) */
.cart-page {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-4xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
    min-width: 0;
  }
  .cart-page > * { min-width: 0; }
  .cart-page__more-blocks--inline { margin-top: 0; }
  /* mobil: souhrn s tlačítkem Zaplatit hned pod položkami, doporučené až za ním
     (.cart-page__items se rozpustí do gridu → doporučené lze poslat za souhrn přes order) */
  @media screen and (max-width: 749px) {
    .cart-page:not(.cart-page--empty) .cart-page__items { display: contents; }
    .cart-page:not(.cart-page--empty) .cart-page__more-blocks--inline { order: 10; margin-top: var(--margin-lg); }
  }

  /* Lišty dopravy a dárku: na mobilu pod sebou, od 750px VEDLE SEBE napůl.
     Odsazení od seznamu nese wrapper, ne jednotlivé lišty. */
  .cart-page .tk-cart-bars {
    display: flex;
    flex-direction: column;
    gap: var(--margin-sm);
    margin-block-end: var(--margin-sm);
  }

  @media screen and (min-width: 750px) {
    .cart-page .tk-cart-bars {
      flex-direction: row;
      align-items: stretch;
    }

    .cart-page .tk-cart-bars > * {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-md);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    /* Levý sloupec PEVNĚ do col 1 — jinak by uvolněná buňka col2/row1 (summary
       začíná až row 2) natáhla auto-placementem POLOŽKY vedle titulku. */
    .cart-page__title,
    .cart-page__items,
    .cart-page__more-blocks {
      grid-column: 1;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      /* start na úrovni položek (row 2), ne u titulku „Košík" (row 1) →
         souhrn zarovnaný s horní hranou obsahu košíku (dynamicky, dle výšky titulku) */
      grid-row: 2 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart__container--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }

    .cart__container--extend {
      height: 100%;
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }

  /* ═══ TK — kampaňový banner + regál na /cart (2026-08-21) ══════════════
     Sdílené třídy se snippetem `tk-cart-empty.liquid` (základní vzhled se
     kompiluje ze `sections/cart-drawer.liquid`); tady jen odlišnosti široké
     stránky proti 420px draweru. */
  .cart-page .tk-cart-empty {
    width: 100%;
  }

  /* ── PRÁZDNÝ košík: banner + regál, banner až ZA regálem (`order`) ── */
  .cart-page--empty .tk-cart-empty {
    max-width: 720px;
    margin-inline: auto;
    margin-top: var(--margin-3xl, 32px);
  }

  .cart-page--empty .tk-cart-empty__rail {
    order: 1;
  }

  .cart-page--empty .tk-cart-empty__banner {
    order: 2;
    max-width: 420px;
    margin-inline: auto;
  }

  /* ── PLNÝ košík: malý banner NAD kartou souhrnu (pravý sloupec) ───────
     ⚠️⚠️ `.cart-page__summary` je grid item rodiče se `grid-row: 2 / -1`
     a `align-self: stretch`, takže má výšku danou řádky rodičovského gridu —
     a ty se sází podle LEVÉHO sloupce (`.cart-page__items`). Karta souhrnu je
     typicky vyšší a její sticky vnitřek z buňky přetéká (to je stav theme).
     Dva důsledky, oba tady ošetřené:
       1. `grid-template-rows: subgrid` by banner posadil do 1. subgrid řádku
          (výška dle levého sloupce) a karta souhrnu z 2. řádku by se s ním
          překryla → přepnout na `flex` sloupec.
       2. Ve flexu by `flex-shrink: 1` kartu souhrnu sešrotoval (naměřeno
          485 → 142 px) a sticky vnitřek by se vysypal přes tlačítko Zaplatit
          → `flex: 0 0 auto` na banneru, `flex: 1 0 auto` na kartě souhrnu
          (roste, aby sticky měl kam cestovat, ale NIKDY se nesmršťuje). */
  @media screen and (min-width: 750px) {
    .cart-page__summary:has(.tk-cart-empty) {
      display: flex;
      flex-direction: column;
    }

    .cart-page__summary:has(.tk-cart-empty) > .tk-cart-empty {
      flex: 0 0 auto;
    }

    /* ⚠️ `.cart__summary-container` je SÁM subgrid (`display: grid;
       grid-template-rows: subgrid; grid-row: 1 / -1` v blocks/_cart-summary.liquid)
       - je to řetěz .cart-page > .cart-page__summary > .cart__summary-container.
       Jakmile je rodič flex, subgrid nemá k čemu se vztáhnout, řádky se sesypou
       na 50px a sticky vnitřek (393px) vyteče přes celou stránku. Proto ho tady
       musím degradovat na blok. `flex: 1 0 auto` = roste (sticky má kam
       cestovat u dlouhých košíků), ale NIKDY se nesmršťuje. */
    .cart-page__summary:has(.tk-cart-empty) > .cart__summary-container {
      flex: 1 0 auto;
      display: block;
      grid-template-rows: none;
      grid-row: auto;
    }
  }

  .cart-page__summary .tk-cart-empty {
    margin-block-end: var(--margin-md, 16px);
  }

  /* ⚠️ ŽÁDNÝ POSKOK PO NAČTENÍ. `blocks/_cart-summary.liquid` dává souhrnu na
     desktopu statický `margin-block-start: 5.75rem` (zarovnání s 1. produktem)
     a `tk-cart-sticky.js` ho po načtení dopočítává. S bannerem nad souhrnem by
     JS ten margin nuloval → box s Zaplatit vyskočil o ~81 px nahoru vteřinu po
     načtení. Proto se zarovnání s bannerem řeší **čistě v CSS**:
       banner → stejný `--margin-sm` jaký má `.cart-page__items`
                (`blocks/_cart-products.liquid`) → lícuje s lištou doprava zdarma
       souhrn → 0 (přebít theme fallback)
     `alignSummary()` v tomhle případě inline styly jen vyčistí a nic nepočítá. */
  @media screen and (min-width: 750px) {
    .cart-page__summary:has(.tk-cart-empty) > .tk-cart-empty {
      margin-block-start: var(--margin-sm);
    }

    .cart-page__summary:has(.tk-cart-empty) .cart__summary-inner {
      margin-block-start: 0;
    }
  }

  /* decentní: šířka sloupce, menší rádius, žádné „poskočení" na hover */
  .cart-page__summary .tk-cart-empty__banner {
    max-width: none;
    margin-inline: 0;
    border-radius: 10px;
  }

  @media (hover: hover) {
    .cart-page__summary a.tk-cart-empty__banner:hover {
      transform: none;
      box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
    }
  }

  /* CTA pilulka na menším banneru ať nepřeroste */
  .tk-cart-empty--cart .tk-cart-empty__banner-cta {
    right: 8px;
    bottom: 8px;
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Regál: na široké stránce 3 dlaždice vedle sebe (drawer má 2). */
  @media screen and (min-width: 750px) {
    .cart-page .tk-cart-empty__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .cart-page .tk-cart-empty__grid > * {
    min-width: 0;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TK REDESIGN /cart (2026-08-28) — ÚROVEŇ STRÁNKY
     Doprovod k vzdušnému seznamu položek (`snippets/cart-products.liquid`)
     a bílé kartě souhrnu (`blocks/_cart-summary.liquid`).
     ═══════════════════════════════════════════════════════════════════════════ */
  .cart-page .cart-title h1 {
    font-size: clamp(1.6rem, 3.2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: #0f172a;
  }

  /* Počítadlo kusů vedle nadpisu — tichá pilulka, ne barevná bublina */
  .cart-page .cart-title .cart-bubble__background {
    background-color: rgb(15 23 42 / 0.06);
  }

  .cart-page .cart-title .cart-bubble__text {
    font-weight: 600;
    color: rgb(15 23 42 / 0.62);
  }

  /* Nadpis → lišty → seznam: víc vzduchu, ať stránka dýchá */
  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-md);
  }

  /* Poslední lišta nad seznamem drží odstup od 1. položky (seznam už nemá
     vlastní rámeček, který dřív odstup opticky dělal za něj). */
  .cart-page__items > .cart-items__wrapper {
    margin-block-start: var(--margin-xs);
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:19) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  /* TK: boční filtry o kus užší, produktové karty o to širší. Wrapper má 12 obsahových
     sloupců; filtry zabírají 3 (od 990px) resp. 4 (tablet), zbytek produkty. Sloupcům
     jen přerozdělíme šířku — součet zůstává 12, takže se stránka nikam neposune:
     desktop 3 × 0.82 + 9 × 1.06 = 12, tablet 4 × 0.82 + 8 × 1.09 = 12. */
  .collection-wrapper {
    --tk-grid-col: calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number));
    --tk-facets-scale: 0.82;
  }

  @media screen and (min-width: 750px) {
    .collection-wrapper:has(.facets-block-wrapper--vertical:not(.facets-block-wrapper--drawer):not(.hidden)):not(:has(.collection-wrapper--full-width)) {
      grid-template-columns:
        1fr
        repeat(4, minmax(0, calc(var(--tk-grid-col) * var(--tk-facets-scale))))
        repeat(8, minmax(0, calc(var(--tk-grid-col) * 1.09)))
        1fr;
    }
  }

  @media screen and (min-width: 990px) {
    .collection-wrapper:has(.facets-block-wrapper--vertical:not(.facets-block-wrapper--drawer):not(.hidden)):not(:has(.collection-wrapper--full-width)) {
      grid-template-columns:
        1fr
        repeat(3, minmax(0, calc(var(--tk-grid-col) * var(--tk-facets-scale))))
        repeat(9, minmax(0, calc(var(--tk-grid-col) * 1.06)))
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  /* --------------------------------------------------------------------
     TK — kampaňová dlaždice v mřížce (vkládá tk-grid-promo.js z <template>).
     Sedí v jedné buňce gridu jako produktová karta; roztáhne se na výšku řádku.
     -------------------------------------------------------------------- */
  .tk-grid-promo {
    display: flex;
    min-height: 100%;
  }

  .tk-grid-promo__link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    min-height: 100%;
    padding: 18px;
    overflow: hidden;
    border-radius: 18px;
    background: var(--tk-gp-bg, #383838);
    color: var(--tk-gp-fg, #ffffff);
    text-decoration: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 14px -8px rgba(0, 0, 0, 0.1);
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tk-grid-promo__link:hover {
    transform: translateY(-3px);
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.06),
      0 24px 48px -16px rgba(0, 0, 0, 0.18);
  }

  .tk-grid-promo__media {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .tk-grid-promo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Dlaždice je na výšku, banner na šířku → výřez řídí merchant settingem. */
    object-position: var(--tk-gp-img-x, 72%) center;
    display: block;
  }

  /* Čitelnost textu přes fotku — přechod z barvy pozadí zdola. */
  .tk-grid-promo--media .tk-grid-promo__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tk-gp-bg, #383838) 8%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.05) 100%);
  }

  .tk-grid-promo__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tk-grid-promo__eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tk-gp-accent, #ff5a00);
  }

  .tk-grid-promo__heading {
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
  }

  .tk-grid-promo__text {
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0.85;
  }

  .tk-grid-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--tk-gp-accent, #ff5a00);
    /* bílý tučný text jako všechna oranžová tlačítka (dřív barva pozadí karty) */
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
  }

  .tk-grid-promo__cta svg {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tk-grid-promo__link:hover .tk-grid-promo__cta svg {
    transform: translateX(2px);
  }

  @media screen and (max-width: 749px) {
    .tk-grid-promo__link {
      border-radius: 14px;
    }

    /* ⚠️ Padding jen v textovém režimu. U hotové grafiky (`--bare`) by odsadil
       obrázek od kraje a kolem banneru by prosvítal podklad — a protože je tenhle
       blok v souboru NÍŽ než `.tk-grid-promo--bare { padding: 0 }`, přebil by ho. */
    .tk-grid-promo:not(.tk-grid-promo--bare) .tk-grid-promo__link {
      padding: 14px;
    }

    .tk-grid-promo__text {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-grid-promo__link,
    .tk-grid-promo__cta svg {
      transition: none;
    }

    .tk-grid-promo__link:hover {
      transform: none;
    }
  }

  /* --------------------------------------------------------------------
     Varianta „wide" — úzký pruh přes celou šířku mřížky (po N řadách).
     Fotka nesedí přes celou plochu, ale jen v pravé části a maskou se
     vlevo rozplyne do barvy pozadí → texty jsou čitelné bez tmavého
     přeliv-overlaye přes celý banner.
     -------------------------------------------------------------------- */
  /* ⚠️ Poměr stran drž na NÍZKÉ specificitě (holá třída), aby ho mobilní
     `@media` blok níž v souboru přebil. Když byl v pravidle s `#gf-products`
     (ID = specificita 100), mobilní 3:1 se neuplatnil — media query specificitu
     nezvyšuje — a pruh zůstal 6:1, takže se do něj mobilní grafika vešla jen
     zhruba v polovině šířky. */
  .tk-grid-promo--wide {
    /* Pevný poměr stran = grafika se dá udělat přesně na míru a nic se neořízne.
       Desktop 6:1 (mřížka max ~1408 px → ~235 px na výšku), mobil 3:1. */
    --tk-gp-wide-ratio: 6 / 1;
    min-height: 0;
  }

  /* ⚠️ Mřížku stylují Globo z vlastní CDN a `#gf-products` je ID (specificita 100),
     takže holá třída jejich pravidla nepřebije. Navíc nevíme, jestli je jejich grid
     na daném breakpointu `grid`, nebo `flex` — u flexu je `grid-column` mrtvé a šířku
     drží `flex-basis` (proto tu je i `flex`, ne jen `width`). Bez tohohle vyšel pruh
     na mobilu jako zmenšený banner v jednom sloupci.
     Jsou tu SCHVÁLNĚ jen rozměrové vlastnosti — žádné proměnné, které by se
     přepínaly na breakpointech (viz komentář výš). */
  .tk-grid-promo--wide,
  #gf-products > .tk-grid-promo--wide,
  ul.product-grid > .tk-grid-promo--wide {
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .tk-grid-promo--wide .tk-grid-promo__link {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-height: 0;
    aspect-ratio: var(--tk-gp-wide-ratio);
    padding: 16px clamp(16px, 2.4vw, 32px);
  }

  .tk-grid-promo--wide .tk-grid-promo__media {
    inset: 0 0 0 auto;
    width: min(62%, 760px);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
    mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  }

  .tk-grid-promo--wide .tk-grid-promo__img {
    object-position: center;
  }

  /* Pruh přeliv přes celou plochu nepotřebuje — maskovaná fotka stačí. */
  .tk-grid-promo--wide.tk-grid-promo--media .tk-grid-promo__media::after {
    content: none;
  }

  /* Hotová grafika (overlay = nic / jen tlačítko) → obrázek přes CELOU plochu,
     bez masky, přelivu i paddingu. Platí pro dlaždici i pruh. */
  .tk-grid-promo--bare .tk-grid-promo__media {
    inset: 0;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tk-grid-promo--bare .tk-grid-promo__media::after {
    content: none;
  }

  .tk-grid-promo--bare .tk-grid-promo__link {
    padding: 0;
  }

  /* ⚠️ POZADÍ BOXU MUSÍ BÝT BARVA GRAFIKY, ne tmavá `--tk-gp-bg`. Cokoliv, co
     kolem obrázku zbyde (subpixelový rozdíl mezi `aspect-ratio` boxu a poměrem
     souboru, dorovnání výšky u dlaždice), se jinak vykreslí jako tmavý rámeček.
     Kampaňová grafika má plochý podklad #f6f7f9 → nastavitelné přes settings. */
  .tk-grid-promo--bare .tk-grid-promo__link {
    background: var(--tk-gp-art-bg, #f6f7f9);
  }

  /* `contain` = nikdy nic neuřízne. Zbytek plochy je v barvě podkladu grafiky,
     takže není poznat, že tam obrázek nesahá. Dlaždice se kotví nahoru: buňka
     mřížky je vyšší než 3:4 (produktová karta = čtvercová fotka + název +
     swatche + cena) a VÝŠKA SE LIŠÍ podle délky názvu a přítomnosti hvězdiček,
     takže žádný pevný poměr nikdy nesedne — dorovnání řeší podkladová barva. */
  .tk-grid-promo--bare .tk-grid-promo__img {
    object-fit: contain;
  }

  .tk-grid-promo--tile.tk-grid-promo--bare .tk-grid-promo__img {
    object-position: top center;
  }

  .tk-grid-promo--wide.tk-grid-promo--bare .tk-grid-promo__img {
    object-position: center;
  }

  /* --------------------------------------------------------------------
     CTA tlačítko — vizuálně shodné s velkým bannerem na homepage
     (`.tk-hero-grid__button--solid`, sections/tk-hero-grid.liquid).
     Drženo synchronně ručně: hero je vlastní sekce s vlastním stylesheetem.
     -------------------------------------------------------------------- */
  .tk-grid-promo__btn {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--tk-gp-accent, #ff5a00);
    color: var(--tk-gp-btn-fg, #fff);
    box-shadow: 0 4px 18px var(--tk-gp-btn-glow, rgba(255, 90, 0, 0.4));
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition:
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tk-grid-promo__btn-arrow {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
  }

  .tk-grid-promo__btn--corner {
    right: clamp(14px, 3.2cqi, 44px);
    bottom: clamp(14px, 3.2cqi, 44px);
  }

  .tk-grid-promo__btn--left {
    left: clamp(14px, 3.2cqi, 44px);
    bottom: clamp(14px, 3.2cqi, 44px);
  }

  .tk-grid-promo__btn--bottom {
    left: 50%;
    bottom: clamp(14px, 3.2cqi, 44px);
    transform: translateX(-50%);
  }

  /* Pruh: tlačítko má sedět opticky pod nadpisem, který je VYPÁLENÝ v grafice.
     Grafika se roztahuje na 100 % šířky pruhu, takže odsazení textu je konstantní
     PROCENTO šířky, ne pevný počet pixelů — proto tady procenta místo `clamp(px)`
     výš. (Pixely by navíc stejně neseděly: v této sekci není žádný `container-type`,
     takže `cqi` neměří šířku pruhu, ale viewport.)
     ⚠️ Hodnota 4,35 % je ZMĚŘENÁ z aktuální grafiky (Playwright + canvas sken prvního
     tmavého sloupce: 54 px z 1240). Při výměně kampaně za jinak odsazenou grafiku
     přeměřit a přenastavit `--tk-gp-btn-inset`.
     Mobilní `--m-left` (v media query níž) tohle přebíjí — 3:1 grafika má vlastní kompozici. */
  .tk-grid-promo--wide .tk-grid-promo__btn--left {
    left: var(--tk-gp-btn-inset, 4.35%);
  }

  /* Svisle: tlačítko vycentrované do prostoru POD textem v grafice. Text končí
     na 53,1 % výšky (změřeno stejným skenem), takže střed volné plochy je 76,5 %.
     Původní pixelové `bottom: clamp(14px, 3.2cqi, 44px)` ze základního pravidla
     tady NARÁŽELO do popisku: pruh je 6:1, takže na užším viewportu je nízký,
     ale tlačítko si drželo pevnou výšku (1100 px: překryv 18 px, 1280 px: 10 px).
     Procento výšky drží mezeru symetrickou na každé šířce.
     ⚠️ Jen desktop. Mobilní 3:1 grafika má jinou kompozici a vlastní `bottom: 20%`
     v media query níž — ta má NIŽŠÍ specificitu než tohle pravidlo, takže by ji
     přebilo. Proto je to zavřené v min-width dotazu, ne řešeno pořadím. */
  @media screen and (min-width: 750px) {
    .tk-grid-promo--wide .tk-grid-promo__btn--left {
      top: var(--tk-gp-btn-mid, 76.5%);
      bottom: auto;
      transform: translateY(-50%);
    }
  }

  /* Na dlaždici sedí tlačítko výš než u kraje — grafika má dole slevovou plaketu
     a tlačítko těsně pod ní vypadalo odsunuté do rohu. `--tk-gp-btn-lift` je
     nadzvednutí v % výšky dlaždice, přičítá se k základnímu odsazení.
     ⚠️ Platí jen pro dlaždici s TEXTOVÝM overlayem. U hotové grafiky (`--bare`)
     se tlačítko pozicuje ve flow, viz blok níž. */
  .tk-grid-promo--tile:not(.tk-grid-promo--bare) .tk-grid-promo__btn {
    bottom: calc(var(--tk-gp-btn-lift, 20%) + clamp(14px, 3.2cqi, 44px));
  }

  /* --------------------------------------------------------------------
     Dlaždice s hotovou grafikou: tlačítko NENÍ overlay, ale prvek VE FLOW
     pod obrázkem.

     ⚠️ Absolutní pozicování se tu neosvědčilo a nešlo doladit: výška buňky
     se řídí SOUSEDNÍ produktovou kartou (délka názvu, swatche, hvězdičky),
     takže `bottom: <procenta>` padalo pokaždé jinam. Navíc v téhle sekci
     není žádný `container-type`, takže `cqi` neměří šířku dlaždice, ale
     viewport — na širokém displeji vyšel clamp na strop 44 px a tlačítko
     skončilo přes slevovou plaketu v grafice. Ve flow překryv nevznikne
     z principu, na jakémkoli zařízení.

     Grafika si drží vlastní poměr stran přes `--tk-gp-art-ar` (z Liquidu,
     `image.aspect_ratio`) → box média odpovídá přesně obrázku, ne buňce.
     -------------------------------------------------------------------- */
  .tk-grid-promo--tile.tk-grid-promo--bare .tk-grid-promo__link {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 0 16px;
  }

  /* ⚠️ `flex: none` schválně — médium se NESMÍ smrsknout. Při smrštění by box
     přestal odpovídat poměru grafiky, `object-fit: contain` by ji zúžil a vedle
     fotky by se objevily béžové pruhy podkladu (nahoře fotka nesahá do krajů).
     Když se tlačítko pod grafiku nevejde, je správné nechat dlaždici povyrůst —
     řádek mřížky je `auto`, takže se přizpůsobí. */
  .tk-grid-promo--tile.tk-grid-promo--bare .tk-grid-promo__media {
    position: static;
    inset: auto;
    width: 100%;
    aspect-ratio: var(--tk-gp-art-ar, 3 / 4);
    flex: none;
  }

  .tk-grid-promo--tile.tk-grid-promo--bare .tk-grid-promo__btn {
    position: static;
    align-self: center;
    flex: none;
    /* ruší left/bottom/transform ze základních --corner / --left / --bottom */
    inset: auto;
    transform: none;
  }

  @media screen and (max-width: 749px) {
    .tk-grid-promo--tile.tk-grid-promo--bare .tk-grid-promo__link {
      gap: 10px;
      padding: 0 0 12px;
    }
  }

  /* ⚠️ Hover jen pro skutečný kurzor — na dotyku zůstane `:hover` viset po klepnutí
     i po scrollu prstem přes banner (stejný důvod jako u hero gridu). */
  @media (hover: hover) and (pointer: fine) {
    .tk-grid-promo__link:hover .tk-grid-promo__btn {
      box-shadow: 0 8px 26px var(--tk-gp-btn-glow-hover, rgba(255, 90, 0, 0.55));
    }

    .tk-grid-promo__link:hover .tk-grid-promo__btn-arrow {
      transform: translateX(4px);
    }
  }

  .tk-grid-promo__link:focus-visible .tk-grid-promo__btn {
    box-shadow: 0 8px 26px var(--tk-gp-btn-glow-hover, rgba(255, 90, 0, 0.55));
  }

  /* Malá dlaždice / úzký pruh na mobilu — tlačítko menší, ať se vejde. */
  @media screen and (max-width: 749px) {
    .tk-grid-promo__btn {
      padding: 9px 15px;
      font-size: 13px;
      gap: 6px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-grid-promo__btn,
    .tk-grid-promo__btn-arrow {
      transition: none;
    }
  }

  .tk-grid-promo--wide .tk-grid-promo__body {
    max-width: min(58%, 560px);
  }

  .tk-grid-promo--wide .tk-grid-promo__heading {
    font-size: clamp(1.05rem, 2vw, 1.5rem);
  }

  /* CTA vpravo na střed — v markupu je uvnitř __body (sdílený s dlaždicí),
     proto pozicováním, ne přeskládáním flexu. */
  .tk-grid-promo--wide .tk-grid-promo__cta {
    position: absolute;
    top: 50%;
    right: clamp(16px, 2.4vw, 32px);
    transform: translateY(-50%);
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .tk-grid-promo--wide {
      --tk-gp-wide-ratio: 3 / 1;
    }

    .tk-grid-promo--wide .tk-grid-promo__link {
      border-radius: 14px;
    }

    .tk-grid-promo--wide:not(.tk-grid-promo--bare) .tk-grid-promo__link {
      padding: 12px 14px;
    }

    /* ⚠️ Zúžená fotka vpravo patří JEN k textovému režimu. V `--bare` režimu tohle
       pravidlo (je v souboru níž) přebíjelo `width: 100%` → mobilní pruh vykresloval
       grafiku jen v levé půlce rámečku. */
    .tk-grid-promo--wide:not(.tk-grid-promo--bare) .tk-grid-promo__media {
      width: 46%;
    }

    /* Pruh je na mobilu jen ~114 px vysoký a grafika má text skoro přes celou
       plochu — tlačítko v rohu do něj zasahovalo. Menší a nadzvednuté nad okraj. */
    .tk-grid-promo--wide .tk-grid-promo__btn {
      padding: 6px 11px;
      font-size: 13px;
      gap: 4px;
      letter-spacing: 0.05em;
    }

    .tk-grid-promo--wide .tk-grid-promo__btn {
      bottom: 20%;
    }

    /* Mobilní grafika má jinou kompozici než desktopová, takže i tlačítko může
       patřit jinam. Třída `--m-*` je v souboru níž a přebíjí desktopovou pozici;
       `left`/`right`/`transform` se resetují, aby se varianty nemíchaly. */
    .tk-grid-promo--wide .tk-grid-promo__btn--m-left {
      left: 10px;
      right: auto;
      transform: none;
    }

    .tk-grid-promo--wide .tk-grid-promo__btn--m-corner {
      left: auto;
      right: 10px;
      transform: none;
    }

    .tk-grid-promo--wide .tk-grid-promo__btn--m-bottom {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }

    .tk-grid-promo--wide .tk-grid-promo__body {
      max-width: 62%;
    }

    .tk-grid-promo--wide .tk-grid-promo__cta {
      right: 12px;
      padding: 7px 11px;
      font-size: 0.8125rem;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:21) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:22) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password (INDEX:24) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-enter__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-enter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-enter__admin-link {
    margin: 0;
  }

  .password-enter__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:26) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }

  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

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

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Compact article list (small thumbnail + title) */
  .predictive-search-articles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline: var(--padding-xl);
    margin-block: 0 var(--margin-md);
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
    animation-delay: 250ms;
  }

  .predictive-search-articles__item {
    list-style: none;
  }

  .predictive-search-articles__link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--padding-2xs) var(--padding-xs);
    margin-inline: calc(var(--padding-xs) * -1);
    max-width: 100%;
    width: fit-content;
    border-radius: var(--card-corner-radius);
    color: var(--color-foreground);
    text-decoration: none;
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      transform 100ms var(--animation-timing-active);
  }

  .predictive-search-articles__link:hover,
  .predictive-search-articles__link:focus-visible {
    background-color: var(--card-bg-hover, rgb(var(--color-foreground-rgb) / var(--opacity-5)));
    text-decoration: none;
    outline: none;
  }

  .predictive-search-articles__link:active {
    transform: scale(0.99);
  }

  .predictive-search-articles__media {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--product-corner-radius, 8px);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .predictive-search-articles__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .predictive-search-articles__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50, 0.5));
  }

  .predictive-search-articles__image-placeholder svg {
    width: 24px;
    height: 24px;
  }

  .predictive-search-articles__title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-foreground);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .predictive-search-articles {
      gap: 4px;
    }

    .predictive-search-articles__media {
      width: 48px;
      height: 48px;
    }

    .predictive-search-articles__title {
      font-size: var(--font-size--body-sm);
    }
  }

  /* ===== Compact resource list (collections + pages) — minimalist rows ===== */
  .tk-ps-reslist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline: var(--padding-xl);
    margin-block: 0 var(--margin-md);
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
    animation-delay: 200ms;
  }

  .tk-ps-reslist__item {
    list-style: none;
  }

  /* Kolekce: 2 sloupce na desktopu (mobil zustava 1 sloupec) */
  @media screen and (min-width: 750px) {
    .tk-ps-reslist--cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--gap-lg);
      align-items: start;
    }

    .tk-ps-reslist--cols .tk-ps-reslist__link {
      margin-inline: 0;
    }
  }

  .tk-ps-reslist__link {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--padding-2xs) var(--padding-xs);
    margin-inline: calc(var(--padding-xs) * -1);
    border-radius: var(--card-corner-radius);
    color: var(--color-foreground);
    text-decoration: none;
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      transform 100ms var(--animation-timing-active);
  }

  .tk-ps-reslist__link:hover,
  .tk-ps-reslist__link:focus-visible {
    background-color: var(--card-bg-hover, rgb(var(--color-foreground-rgb) / var(--opacity-5)));
    text-decoration: none;
    outline: none;
  }

  .tk-ps-reslist__link:active {
    transform: scale(0.99);
  }

  .tk-ps-reslist__media {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--product-corner-radius, 8px);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tk-ps-reslist__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .tk-ps-reslist__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50, 0.5));
  }

  .tk-ps-reslist__icon svg {
    width: 20px;
    height: 20px;
  }

  .tk-ps-reslist__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tk-ps-reslist__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size--body-sm);
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .tk-ps-reslist__meta svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
  }

  @media screen and (max-width: 749px) {
    .tk-ps-reslist__media {
      width: 36px;
      height: 36px;
    }
  }

  /* ===== "Zobrazit více" — sbal na 4, tlačítko rozbalí zbytek (produkty + kolekce) ===== */
  .tk-ps-expandable:not(.tk-show-all) > li:nth-child(n + 5) {
    display: none;
  }

  .tk-ps-more {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin: 2px auto var(--margin-md);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / 0.06);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease;
  }

  .tk-ps-more:hover {
    background: rgb(var(--color-foreground-rgb) / 0.12);
    text-decoration: none;
  }

  .tk-ps-more:active {
    transform: scale(0.98);
  }

  .tk-ps-more svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
  }

  /* "Zobrazit celou kolekci" link za nadpisem bestsellerů (flex row title + link) */
  .predictive-search-results__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
  }

  .predictive-search-results__title-row .predictive-search-results__title {
    margin-block-end: 0;
  }

  .tk-ps-header-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.18s ease;
  }

  .tk-ps-header-link:hover {
    opacity: 1;
    text-decoration: none;
  }

  .tk-ps-header-link svg {
    width: 13px;
    height: 13px;
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-information (INDEX:27) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
  }

  /* Hide empty elements from gap calculation */
  .variant-picker-wrapper:not(:has(*)) {
    display: none;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__buy {
    order: 2;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  /* Mobile/tablet styles — stacked layout až do 1099px (původně 749px).
     Na tabletech (768–1024) byl media sloupec v 3-col gridu (1fr | 35vw |
     25vw) komicky malý (~240–310px) → mobile view nastupuje dřív. */
  @media screen and (max-width: 1099px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
      margin-block-start: 24px;
    }

    .product-information__buy {
      grid-column: 2 / 3;
      margin-block-start: 24px;
    }

    /* Sticky scroll-za-nejdelší-sloupec nesmí běžet ve stacked layoutu —
       base.css .sticky-content--desktop je globálně od 750px, takže v rozsahu
       750–1099 buy box stickoval a popisek scrolloval pod ním. */
    .product-information .sticky-content--desktop,
    .product-information .sticky-content--desktop.full-height--desktop > .group-block {
      position: static !important;
    }
  }

  /* Tablet stacked range: galerie NE full-bleed (na mobilu 1/-1 je OK),
     ale v centrálním sloupci s --page-margin (40px) odsazením jako details/buy.
     Pozn.: max-width cap galerie na mobilu/tabletu je v assets/base.css
     (přímý asset = okamžitá propagace; {% stylesheet %} compiled bundle laguje). */
  @media screen and (min-width: 750px) and (max-width: 1099px) {
    .product-information__media {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 1100px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none,
    .product-information__grid:has(.product-information__media:empty) {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(:has(.product-information__media:empty)) {
      /* Media on the left side — 2 columns (no buy section) */
      &.product-information--media-left:not(:has(.product-information__buy)) {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the left side — 3 columns (with buy section) */
      &.product-information--media-left:has(.product-information__buy) {
        grid-template-columns: 1fr min(35vw, var(--sidebar-width)) min(25vw, 350px);

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-information__buy {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side — 2 columns (no buy section) */
      &.product-information--media-right:not(:has(.product-information__buy)) {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Media on the right side — 3 columns (with buy section) */
      &.product-information--media-right:has(.product-information__buy) {
        grid-template-columns: min(25vw, 350px) min(35vw, var(--sidebar-width)) 1fr;

        .product-information__buy {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
          padding-right: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 2;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(:has(.product-information__media:empty)),
      .product-information__grid:not(:has(.product-information__media:empty)) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Configurable media/details column ratio for large screens */
  @media screen and (min-width: 1200px) {
    /* 2-column (no buy section) */
    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty),
        :has(.product-information__buy)
      ).product-information--media-left {
      grid-template-columns: var(--media-width) 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty),
        :has(.product-information__buy)
      ).product-information--media-right {
      grid-template-columns: 1fr var(--media-width);
    }

    /* 3-column (with buy section) */
    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty)
      ).product-information--media-left:has(.product-information__buy) {
      grid-template-columns: var(--media-width) 1fr var(--buy-width, 300px);
    }

    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty)
      ).product-information--media-right:has(.product-information__buy) {
      grid-template-columns: var(--buy-width, 300px) 1fr var(--media-width);
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
  }

  /* Sticky fix: grid has align-items:start which shrink-wraps all columns.
     Columns with sticky CHILDREN need align-self:stretch so parent is taller than child,
     giving the sticky element room to scroll within. */
  @media screen and (min-width: 1100px) {
    .product-information__media:has(.sticky-content--desktop),
    .product-information__buy:has(.sticky-content--desktop) {
      align-self: stretch;
    }
  }

  /* If the header is sticky, make product columns stick underneath the header + announce bar */
  #header-group:has(.tk-header[sticky]) ~ .content-for-layout .product-information .sticky-content,
  #header-group:has(.tk-header[sticky]) ~ .content-for-layout .product-information .sticky-content--desktop {
    --sticky-header-offset: calc(var(--header-height, 0px) + var(--tk-announce-height, 0px) + 16px);
  }

  /* Spigen mobil/tablet: nákupní box (barva, cena, dostupnost, Do košíku) hned pod galerií,
     detaily (materiály, vlastnosti, popis, kompatibilita) až pod ním. Dřív byl buy box ~1000 px pod titulkem. */
  @media screen and (max-width: 1099px) {
    .product-information__buy { order: 1; }
    .product-details { order: 2; }
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:28) */
/* Sjednocení nadpisů featured collection sekcí (např. "Nejprodávanější", "Doporučujeme")
   se zbytkem homepage. _product-list-text bloku používá theme h3 styl (weight 400) — overrideujeme. */
.ui-test-product-list .section-resource-list__header .text-block h3,
.ui-test-product-list .section-resource-list__header .text-block h2 {
  font-size: clamp(28px, 4vw, 36px) !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* "Zobrazit vše" link — matchuje tk-promo-banner__shop-all (chevron + gap hover anim) */
.ui-test-product-list .section-resource-list__header a.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.2s ease;
}
.ui-test-product-list .section-resource-list__header a.link::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.ui-test-product-list .section-resource-list__header a.link:hover {
  gap: 10px;
  color: var(--color-primary, #7B2D8E);
}


/* ── TK Product Carousel ── */
.tk-product-carousel {
  width: 100%;
  padding: 12px 0 20px;
  /* Bleed = pás po stranách scrollportu, aby se neořezával stín karet
     (`0 6px 12px` → ~6px do stran). Definovaný TADY na rootu, ne na __scroll —
     musí ho dědit i __fade--left, který není potomek scrollportu.
     ⚠️ bleed ≤ --page-margin, jinak negativní margin přeteče viewport (iOS hor. scroll). */
  --tk-carousel-bleed: min(12px, var(--page-margin, 16px));
}

.tk-product-carousel__viewport {
  position: relative;
}

.tk-product-carousel__scroll {
  /* ⚠️ Do bleed pásu vlevo zasahuje stín karty AKTUÁLNÍ (chtěný) i PŘEDCHOZÍ
     (nechtěný — čte se jako „vlevo vykukuje kousek"). Oba stíny sdílí ten samý
     pás (gap 12 = bleed 12, dosah stínu ~6px), takže ŽÁDNÁ hodnota bleedu nedá
     jen jeden z nich → cizí stín maskuje `__fade--left` (níž) a je POVINNÝ.
     Bez fade musí být horizontální bleed 0 (pak ale karta nemá vlastní stín
     a působí useknutě). Naměřeno pixely v pásu vlevo (pozadí sekce = 246):
       bleed 12 bez fade → 220 hned na kraji = cizí stín (viditelný skok)
       bleed 12 + fade   → 246→244→…→220 plynule = vlastní stín karty ✅
       bleed 0           → 246 až po kartu = bez stínu, karta plochá
     ⚠️ scroll-padding-inline MUSÍ odpovídat horizontálnímu paddingu, jinak
     mandatory snap po loadu odscrolluje carousel (mizí levá mezera).
     ⚠️ padding/margin drž JEN tady — druhá deklarace níž je nesmí přebíjet. */
  padding: 12px var(--tk-carousel-bleed) 20px;
  margin: -12px calc(-1 * var(--tk-carousel-bleed)) -20px;
  scroll-padding-inline: var(--tk-carousel-bleed);
}

/* Navigation arrows — na desktopu VIDITELNÉ (2026-08-18). Dřív tu bylo
   `display: none !important` („scroll/drag je dostatečný affordance"), jenže na
   desktopu bez touche uživatel neměl carousel jak posunout. Na ≤768px zůstávají
   skryté (dole v mobilním bloku) — tam je swipe přirozený.
   Viditelnost řídí JS `updateNav()` přes `.is-visible` (levá až po odscrollování,
   pravá dokud není konec). */
.tk-product-carousel__nav {
  position: absolute;
  top: calc(50% - 40px);
  transform: translateY(-50%) scale(0.9);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
  /* Spigen: backdrop-filter odstraněn — rozmazání nad scrollujícím obsahem
     se překreslovalo každý snímek posunu a trhalo karusel. */
}

/* Inline SVG má hardcoded width/height 9 — přebít CSS, ať sedí do 36px kolečka. */
.tk-product-carousel__nav svg {
  width: 14px;
  height: 14px;
}

.tk-product-carousel__nav--left { left: -10px; }
.tk-product-carousel__nav--right { right: -10px; }

.tk-product-carousel__nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.tk-product-carousel__nav:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #fff;
}

.tk-product-carousel__nav:active {
  transform: translateY(-50%) scale(0.95);
}

/* Fade vlevo — maskuje stín PŘEDCHOZÍ karty v bleed pásu, vlastní stín aktuální
   karty nechá prosvítat (proto GRADIENT, ne plná barva: u kraje kryje naplno,
   u karty je průhledný). Šířka MUSÍ = bleed, jinak přeteče na kartu.
   Zobrazí se jen když je odscrollováno — `.is-visible` toggluje JS updateNav()
   při scrollLeft > 10, takže v klidu je vidět plný stín první karty.
   ⚠️ Fade byl kdysi vypnutý, protože měl 48px a budil dojem ubraných karet —
   tohle je 12px pás V MEZEŘE, na kartu nikdy nesahá. */
.tk-product-carousel__fade--left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--tk-carousel-bleed, 12px));
  width: var(--tk-carousel-bleed, 12px);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: linear-gradient(to right, var(--color-background, #f6f7f9), transparent);
}

.tk-product-carousel__fade--left.is-visible {
  opacity: 1;
}

/* Vpravo fade NE — tam má vykukující karta být vidět (je to záměrný peek). */
.tk-product-carousel__fade--right { display: none !important; }

/* Scroll area */
.tk-product-carousel__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
  /* Snap na začátek karty (touch nativně; mouse drag ho vypíná přes inline styl).
     scroll-padding + padding/margin definované v bloku výš (bleed). */
  scroll-snap-type: x mandatory;
}
/* Spigen: na desktopu s touchpadem/myší jen `proximity` — `mandatory` po každé
   části gesta (i při dojezdu zpět doleva) násilně dorovnával na kartu a posun
   cukal. Proximity přichytí jen gesto končící blízko hrany karty; šipky a tečky
   zarovnávají na kartu vlastní animací, dotyk zůstává mandatory. */
@media (hover: hover) and (pointer: fine) {
  .tk-product-carousel__scroll {
    scroll-snap-type: none;
  }
}

.tk-product-carousel__scroll::-webkit-scrollbar {
  display: none;
}

/* Tečky (pozice v carouselu) — nahradily desktop scrollbar.
   Tečka = JEDNA KARTA, ne stránka. Aktivní stav jen přes aria-current="true". */
.tk-product-carousel__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin-top: 1.2rem;
}

.tk-product-carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

/* Neviditelná hit-area ~28px (na mobilu jsou tečky jediné ovládání) */
.tk-product-carousel__dot::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.tk-product-carousel__dot[aria-current='true'] {
  width: 24px;
  border-radius: 100px;
  background: var(--color-primary, #7b2d8e);
}

/* ⚠️⚠️ Snap se během dragu vypíná TŘÍDOU, NIKDY inline stylem
   (`scrollEl.style.scrollSnapType`). `base.css` má pravidla, kde je subjektem
   `:has()` BODY (`body:has(.header[transparent])`) a sekce
   (`.shopify-section:not(.header-section):has(.section)`). Mutaci INLINE STYLU
   uvnitř sekce Blink neumí přiřadit ke konkrétnímu selektoru → pro jistotu
   invaliduje celý podstrom body → style recalc CELÉ stránky.
   Naměřeno (Playwright trace, 5 cyklů zap/vyp):
     inline styl → 21 recalců, 1078 ms, nejdelší 118 ms  ← sekaný drag
     třída       → 30 recalců,   20 ms, nejdelší 2,5 ms  ← 50× levnější
   Změna třídy má adresný invalidation set podle jména třídy → :has() se
   nespustí. Platí pro JAKOUKOLI inline mutaci stylu uvnitř sekce. */
.tk-product-carousel__scroll.is-snap-off {
  scroll-snap-type: none;
}

/* ⚠️⚠️ Grab overlay — během tahu překryje karty. Nese `cursor: grabbing`
   a odchytává pointer eventy, takže karty pod ním nedostávají hover.
   POZOR, nevracet to zpátky na `.is-dragging { cursor }` + `.item {
   pointer-events: none }`: `cursor` i `pointer-events` jsou DĚDIČNÉ vlastnosti,
   takže jejich změna na scrollportu/kartách si vynutí style recalc CELÉHO
   podstromu — ve scrollportu je 1441 elementů = ~22 ms, a to 2× na tah
   (přidání i odebrání). Overlay je LIST bez potomků → recalc 1 elementu.
   Navíc zlevňuje HitTest (naměřeno 137 ms na tah): kurzor trefí prázdný div
   místo toho, aby se prohledával strom karty.
   ⚠️ Přepínat TŘÍDOU, ne `style.display` — inline mutace stylu uvnitř sekce
   spustí přes :has() recalc celé stránky (viz `.is-snap-off` výš). */
.tk-product-carousel__grab {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  cursor: grabbing;
}

.tk-product-carousel__grab.is-active {
  display: block;
}

/* Track */
.tk-product-carousel__track {
  display: flex;
  gap: var(--tk-pc-gap, 8px);
}

/* Cards — fractional peek formula `(100% - N*gap) / (N+peek)` zajistí konzistentní
   peek druhé/poslední karty napříč viewporty. Default desktop 4.4 cards (40 % peek).
   POZN: opacity:0 + translateY default odstraněn — způsoboval ~400-500ms perceived
   delay po refreshi (IntersectionObserver fires po paintu, pak stagger 80 + i*60ms).
   Karty teď visible hned na first paint. */
.tk-product-carousel__item {
  flex: 0 0 calc((100% - 4 * var(--tk-pc-gap, 12px)) / 4.4);
  min-width: 0;
  scroll-snap-align: start;
}

/* Mobile (≤480px): 2.1 cards = 2 plné + 10 % peek třetí karty (širší karty) */
@media (max-width: 480px) {
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 2 * var(--tk-pc-gap, 12px)) / 2.1);
  }
}

/* Tablet small (481-768): 2.3 cards = 2 plné + 30 % peek */
@media (min-width: 481px) and (max-width: 768px) {
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 2 * var(--tk-pc-gap, 12px)) / 2.3);
  }
}

/* Tablet large / small desktop (769-1099): 3.3 cards */
@media (min-width: 769px) and (max-width: 1099px) {
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 3 * var(--tk-pc-gap, 12px)) / 3.3);
  }
}

/* Wide desktop (1500-1799): 5.4 cards */
@media (min-width: 1500px) and (max-width: 1799px) {
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 5 * var(--tk-pc-gap, 12px)) / 5.4);
  }
}

/* Ultra-wide (≥1800): 6.4 cards */
@media (min-width: 1800px) {
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 6 * var(--tk-pc-gap, 12px)) / 6.4);
  }
}

/* .is-revealed rule odstraněn — bez opacity:0 defaultu je no-op. */


/* Step-based --tk-pc-cols overrides odstraněny — clamp(210px, 24vw, 280px) na
   .tk-product-carousel__item teď řeší responsive scaling plynule:
   - 360px viewport: 24vw = 86px → clamp na 210px → ~1.7 cards visible (peek)
   - 768px: 184px → 210px → ~3.5 cards visible
   - 1024px: 246px → 246px → ~3.9 cards
   - 1280px (typický laptop): 307px → clamp na 280px → ~4.4 cards
   - 1600px: 384px → 280px → ~5.5 cards
   - 1920px: 461px → 280px → ~6.6 cards
   Min 210px = čitelný název + cena na mobilu. Max 280px = na wide monitor
   karty nezhrubnou neúčelně.

   --tk-pc-cols admin setting je teď ignored (legacy var). */

/* ── Mobile carousel nav size ── */
@media (max-width: 768px) {
  /* Na mobilu šipky nedávají smysl — swipe je přirozenější a kolečka by
     zabírala kartu. */
  .tk-product-carousel__nav {
    display: none !important;
  }

  /* ⚠️ Šířku fade tu NEPŘEPISOVAT — musí zůstat = bleed (jinak přeteče na kartu). */
}
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:29) */
.product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }

  /* Heading sjednocení — matchuje product-list (.ui-test-product-list) */
  product-recommendations .section-resource-list__header .text-block h3,
  product-recommendations .section-resource-list__header .text-block h2 {
    font-size: clamp(28px, 4vw, 36px) !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* "Zobrazit vše" link — matchuje tk-promo-banner__shop-all (chevron + gap hover anim) */
  product-recommendations .section-resource-list__header a.link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.2s ease, color 0.2s ease;
  }
  product-recommendations .section-resource-list__header a.link::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  }
  product-recommendations .section-resource-list__header a.link:hover {
    gap: 10px;
    color: var(--color-primary, #7B2D8E);
  }

  /* ── TK Product Carousel (mirror sections/product-list.liquid) ── */
  .tk-product-carousel {
    width: 100%;
    padding: 12px 0 20px;
    /* Definice na rootu, ne na __scroll — dědí ji i __fade--left (není potomek
       scrollportu). ⚠️ bleed ≤ --page-margin (jinak hor. overflow na iOS). */
    --tk-carousel-bleed: min(12px, var(--page-margin, 16px));
  }

  .tk-product-carousel__viewport {
    position: relative;
  }

  .tk-product-carousel__scroll {
    /* ⚠️ Do bleed pásu zasahuje stín aktuální (chtěný) i PŘEDCHOZÍ karty
       (nechtěný) — cizí maskuje `__fade--left` a je POVINNÝ. Plné vysvětlení
       + naměřené hodnoty v product-list.liquid.
       ⚠️ Hodnoty drž IDENTICKÉ s product-list.liquid — třídy jsou sdílené,
       compiled_assets mixuje pravidla z obou souborů a pořadí není zaručené. */
    padding: 12px var(--tk-carousel-bleed) 20px;
    margin: -12px calc(-1 * var(--tk-carousel-bleed)) -20px;
    scroll-padding-inline: var(--tk-carousel-bleed);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Spigen: drž 1:1 s product-list.liquid — na desktopu jen proximity snap,
     mandatory po každé části gesta násilně dorovnával a posun cukal. */
  @media (hover: hover) and (pointer: fine) {
    .tk-product-carousel__scroll {
      scroll-snap-type: none;
    }
  }

  .tk-product-carousel__scroll::-webkit-scrollbar {
    display: none;
  }

  /* Tečky (pozice v carouselu) — nahradily desktop scrollbar.
     ⚠️ Drž 1:1 s product-list.liquid (sdílené třídy, compiled_assets mixuje oba). */
  .tk-product-carousel__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: center;
    margin-top: 1.2rem;
  }

  .tk-product-carousel__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
  }

  /* Neviditelná hit-area ~28px (na mobilu jsou tečky jediné ovládání) */
  .tk-product-carousel__dot::after {
    content: '';
    position: absolute;
    inset: -10px;
  }

  .tk-product-carousel__dot[aria-current='true'] {
    width: 24px;
    border-radius: 100px;
    background: var(--color-primary, #7b2d8e);
  }

  /* ⚠️⚠️ Snap se vypíná TŘÍDOU, NIKDY inline stylem — inline mutace uvnitř sekce
     spustí přes :has() v base.css recalc celého body (~110 ms). Plné vysvětlení
     + naměřená čísla v product-list.liquid. Drž 1:1. */
  .tk-product-carousel__scroll.is-snap-off {
    scroll-snap-type: none;
  }

  /* ⚠️⚠️ Grab overlay místo `.is-dragging { cursor }` + `.item { pointer-events }`
     — ty jsou DĚDIČNÉ a vynutily by recalc celého podstromu (1441 elementů,
     ~22 ms, 2× na tah) + drahý HitTest. Overlay je list bez potomků.
     Plné vysvětlení v product-list.liquid, drž 1:1. */
  .tk-product-carousel__grab {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    cursor: grabbing;
  }

  .tk-product-carousel__grab.is-active {
    display: block;
  }

  /* Navigation arrows — na desktopu VIDITELNÉ (2026-08-18). Dřív tu bylo
     `display: none !important` („scroll/drag je dostatečný affordance"), jenže na
     desktopu bez touche uživatel neměl carousel jak posunout. Na ≤768px zůstávají
     skryté (dole v mobilním bloku) — tam je swipe přirozený.
     Viditelnost řídí JS `updateNav()` přes `.is-visible` (levá až po odscrollování,
     pravá dokud není konec). */
  .tk-product-carousel__nav {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%) scale(0.9);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Inline SVG má hardcoded width/height 9 — přebít CSS, ať sedí do 36px kolečka. */
  .tk-product-carousel__nav svg {
    width: 14px;
    height: 14px;
  }

  .tk-product-carousel__nav--left { left: -10px; }
  .tk-product-carousel__nav--right { right: -10px; }

  .tk-product-carousel__nav.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .tk-product-carousel__nav:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
    background: #fff;
  }

  .tk-product-carousel__nav:active {
    transform: translateY(-50%) scale(0.95);
  }

  /* Fade vlevo — maskuje stín PŘEDCHOZÍ karty v bleed pásu, vlastní stín karty
     nechá prosvítat. Šířka MUSÍ = bleed. Viz product-list.liquid (drž 1:1 —
     compiled_assets mixuje oba soubory a pořadí není zaručené; dřív tu byla
     48px varianta s `left: 0`, kterou schovával jen `display:none` z druhého
     souboru). */
  .tk-product-carousel__fade--left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--tk-carousel-bleed, 12px));
    width: var(--tk-carousel-bleed, 12px);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: linear-gradient(to right, var(--color-background, #f6f7f9), transparent);
  }

  .tk-product-carousel__fade--left.is-visible {
    opacity: 1;
  }

  /* Vpravo fade NE — vykukující karta má být vidět (záměrný peek). */
  .tk-product-carousel__fade--right { display: none !important; }

  .tk-product-carousel__track {
    display: flex;
    gap: var(--tk-pc-gap, 8px);
  }

  /* Fractional peek formula — konzistentně viditelný peek poslední karty napříč viewporty.
     Default desktop 4.4 cards (40 % peek). User tk-pc-cols setting je teď ignored (legacy).
     POZN: opacity:0 + translateY default odstraněn (perceived delay po refreshi ~400ms). */
  .tk-product-carousel__item {
    flex: 0 0 calc((100% - 4 * var(--tk-pc-gap, 12px)) / 4.4);
    min-width: 0;
  }

  /* Mobile (≤480px): 2.1 cards = 2 plné + 10 % peek třetí karty (širší karty) */
  @media (max-width: 480px) {
    .tk-product-carousel__item {
      flex: 0 0 calc((100% - 2 * var(--tk-pc-gap, 12px)) / 2.1);
    }
  }

  /* Tablet small (481-768): 2.3 cards */
  @media (min-width: 481px) and (max-width: 768px) {
    .tk-product-carousel__item {
      flex: 0 0 calc((100% - 2 * var(--tk-pc-gap, 12px)) / 2.3);
    }
  }

  /* Tablet large / small desktop (769-1099): 3.3 cards */
  @media (min-width: 769px) and (max-width: 1099px) {
    .tk-product-carousel__item {
      flex: 0 0 calc((100% - 3 * var(--tk-pc-gap, 12px)) / 3.3);
    }
  }

  /* Wide desktop (1500-1799): 5.4 cards */
  @media (min-width: 1500px) and (max-width: 1799px) {
    .tk-product-carousel__item {
      flex: 0 0 calc((100% - 5 * var(--tk-pc-gap, 12px)) / 5.4);
    }
  }

  /* Ultra-wide (≥1800): 6.4 cards */
  @media (min-width: 1800px) {
    .tk-product-carousel__item {
      flex: 0 0 calc((100% - 6 * var(--tk-pc-gap, 12px)) / 6.4);
    }
  }

  @media (max-width: 768px) {
    /* Na mobilu šipky nedávají smysl — swipe je přirozenější a kolečka by
       zabírala kartu. */
    .tk-product-carousel__nav {
      display: none !important;
    }

    /* ⚠️ Šířku fade tu NEPŘEPISOVAT — musí zůstat = bleed (jinak přeteče na kartu). */
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:search-results (INDEX:32) */
/* No-results hláška nad fallback (bestseller) kolekcí na /search. Jemný
     info banner s lupou — sjednoceno s TK card/chip tonem. */
  .tk-search-noresults {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgb(var(--color-foreground-rgb, 10 10 10) / 0.04);
    color: var(--tk-ink, #0a0a0a);
  }
  .tk-search-noresults__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb, 10 10 10) / 0.5);
  }
  .tk-search-noresults__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }
  @media (max-width: 749px) {
    .tk-search-noresults {
      padding: 12px 14px;
      /* Banner je přímé dítě <results-list> (full width, mimo #ResultsList
         page-margin) → byl přes celou šířku displeje. Inset 16px = lícuje se
         search barem i kartami (16→364). Ověřeno Playwrightem. */
      margin-inline: 16px;
    }
    .tk-search-noresults__text {
      font-size: 14px;
    }
  }
/* END_SECTION:search-results */

/* START_SECTION:tk-accent-banner (INDEX:37) */
.tk-ab { --ab-ease: cubic-bezier(0.22, 1, 0.36, 1); padding-block: var(--ab-pt, 8px) var(--ab-pb, 56px); }
  .tk-ab__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-ab__card { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(115deg, var(--ab-bg1, #ff5a00) 0%, var(--ab-bg2, #8f0019) 100%); color: #fff; box-shadow: 0 30px 70px -40px rgba(143, 0, 25, 0.7); }
  .tk-ab--dark .tk-ab__card { background: linear-gradient(115deg, var(--ab-bg1, #1c1d22) 0%, var(--ab-bg2, #0f1013) 100%); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7); }
  .tk-ab--light .tk-ab__card { background: linear-gradient(115deg, var(--ab-bg1, #ffffff) 0%, var(--ab-bg2, #f1f2f5) 100%); color: #111; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.35); }
  .tk-ab__fx { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 82% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(40% 80% at 10% 100%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%); }
  .tk-ab--light .tk-ab__fx { background: radial-gradient(60% 120% at 82% 50%, rgba(255, 90, 0, 0.08) 0%, rgba(255, 90, 0, 0) 60%); }
  .tk-ab__content { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 24px 40px; min-height: var(--ab-h, 340px); padding: 40px 48px; box-sizing: border-box; }
  .tk-ab__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 520px; }
  .tk-ab__eyebrow { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .tk-ab--light .tk-ab__eyebrow, .tk-ab--dark .tk-ab__eyebrow { background: #ff5a00; color: #fff; }
  .tk-ab--dark .tk-ab__fx { background: radial-gradient(60% 120% at 82% 50%, rgba(255, 90, 0, 0.22) 0%, rgba(255, 90, 0, 0) 60%); }
  .tk-ab__heading { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
  .tk-ab__desc { margin: 0; font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 46ch; }
  .tk-ab--light .tk-ab__desc { color: rgba(0, 0, 0, 0.62); }
  .tk-ab__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
  .tk-ab__btn { display: inline-flex; align-items: center; gap: 10px; will-change: transform; padding: 13px 22px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--ab-ease), color 0.3s var(--ab-ease), border-color 0.3s var(--ab-ease), transform 0.3s var(--ab-ease); }
  .tk-ab__btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ab-ease); }
  /* CTA barví „Barevné schéma CTA tlačítek" (default Spigen oranžová) — společné
     schéma pro všechny bannery na homepage i chipy v hero značky. */
  .tk-ab .tk-ab__btn--primary { background: var(--cta-bg, #111); color: var(--cta-fg, #fff); font-weight: 700; }
  .tk-ab .tk-ab__btn--primary:hover { background: var(--cta-bg-hover, #111); color: var(--cta-fg-hover, #fff); transform: translateY(-1px); }
  .tk-ab__btn--primary:hover svg { transform: translateX(3px); }
  .tk-ab__btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
  .tk-ab__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
  .tk-ab--light .tk-ab__btn--ghost { border-color: rgba(0, 0, 0, 0.25); color: #111; }
  .tk-ab--light .tk-ab__btn--ghost:hover { border-color: var(--cta-bg, #ff5a00); color: var(--cta-bg, #ff5a00); background: transparent; }
  .tk-ab__media { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; isolation: isolate; }
  .tk-ab__media::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); filter: blur(6px); }
  .tk-ab__img { position: relative; z-index: 1; display: block; backface-visibility: hidden; will-change: transform; width: 100%; max-height: calc(var(--ab-h, 340px) - 40px); object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.45)); transition: transform 0.8s var(--ab-ease); }
  .tk-ab__card:hover .tk-ab__img { transform: translateY(-4px) scale(1.02); }
  @media (max-width: 989px) { .tk-ab__content { padding: 32px 28px; gap: 20px 24px; } }
  @media (max-width: 749px) {
    .tk-ab__inner { padding-inline: 10px; }
    .tk-ab__content { grid-template-columns: 1fr; min-height: 0; padding: 26px 22px 30px; }
    .tk-ab__media { order: -1; }
    .tk-ab__content { padding: 22px 20px 26px; gap: 14px; }
    .tk-ab__img { max-height: 200px; }
    .tk-ab__heading { font-size: clamp(1.5rem, 7vw, 2rem); }
    /* mobil bez filtrů — viz tk-hero-slider: drop-shadow + blur při scrollu/animaci na iOS probliká */
    .tk-ab .tk-ab__media .tk-ab__img { filter: none; }
    .tk-ab .tk-ab__media::after { filter: none; transform: translateZ(0); left: 16%; right: 16%; height: 12%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0)); }
  }
  @media (prefers-reduced-motion: reduce) { .tk-ab__img, .tk-ab__btn { transition: none; } }
/* END_SECTION:tk-accent-banner */

/* START_SECTION:tk-brand-hero (INDEX:41) */
.tk-bhero { --bhero-accent: var(--tk-accent, #ff5a00); --bhero-accent-rgb: 255, 90, 0; --bhero-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; background: #0b0b0d; color: #f5f5f7; padding-block: var(--bhero-pt, 56px) var(--bhero-pb, 56px); }
  .tk-bhero--light { background: #f6f7f9; color: #111; }
  .tk-bhero__glow { position: absolute; right: -10%; top: -40%; width: 60vw; max-width: 900px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(var(--bhero-accent-rgb), 0.28), rgba(var(--bhero-accent-rgb), 0) 70%); filter: blur(24px); pointer-events: none; }
  .tk-bhero--light .tk-bhero__glow { opacity: 0.35; }
  .tk-bhero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 56px; align-items: center; max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-bhero__copy { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
  .tk-bhero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bhero-accent); }
  .tk-bhero__eyebrow span { width: 22px; height: 1px; background: currentColor; }
  .tk-bhero__heading { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: inherit; }
  .tk-bhero__lead { margin: 0; font-size: 1.05rem; line-height: 1.55; color: rgba(245, 245, 247, 0.68); max-width: 52ch; }
  .tk-bhero--light .tk-bhero__lead { color: #55575c; }
  .tk-bhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  /* Chipy řad barví color scheme (default „Spigen oranžová" = scheme-spigen-orange):
     výplň i text bere z primary button rolí schématu, takže se dá přebarvit v editoru
     a stejné schéma jde použít i na dalších sekcích. */
  .tk-bhero .tk-bhero__chip { display: inline-flex; align-items: center; will-change: transform; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--color-primary-button-border); background: var(--color-primary-button-background); color: var(--color-primary-button-text); font-size: 0.84rem; font-weight: 700; text-decoration: none; transition: background 0.3s var(--bhero-ease), border-color 0.3s var(--bhero-ease), color 0.3s var(--bhero-ease), transform 0.3s var(--bhero-ease); }
  .tk-bhero .tk-bhero__chip:hover { background: var(--color-primary-button-hover-background); border-color: var(--color-primary-button-hover-border); color: var(--color-primary-button-hover-text); transform: translateY(-1px); }
  .tk-bhero__media { position: relative; display: flex; justify-content: center; isolation: isolate; }
  /* Spigen: produkt jako průhledný výřez (PNG) přímo na tmavém pozadí — žádná bílá karta ani odlesk,
     jen měkký stín pod produktem (stejný princip jako hero slider na homepage). */
  .tk-bhero__media::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); filter: blur(6px); }
  .tk-bhero__img { position: relative; z-index: 1; display: block; backface-visibility: hidden; width: 100%; max-width: 400px; aspect-ratio: 1; object-fit: contain; padding: 4%; box-sizing: border-box; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.55)); animation: tk-bhero-in 0.8s var(--bhero-ease) both; }
  .tk-bhero--light .tk-bhero__img { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25)); }
  .tk-bhero--light .tk-bhero__media::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)); }
  @keyframes tk-bhero-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
  @media (max-width: 989px) { .tk-bhero__inner { grid-template-columns: 1fr; } .tk-bhero__media { order: -1; } .tk-bhero__img { max-width: 220px; } .tk-bhero { padding-block: min(var(--bhero-pt, 32px), 24px) min(var(--bhero-pb, 32px), 24px); } .tk-bhero__heading { font-size: clamp(2rem, 9vw, 3rem); } }
  @media (prefers-reduced-motion: reduce) { .tk-bhero__img { animation: none; } .tk-bhero__chip { transition: none; } }

  /* Spigen světlý tón: modro-šedý tint jako na PDP a měkčí stíny */
  .tk-bhero--light { background: linear-gradient(180deg, #9db9de 0%, #c3d6ec 50%, #e2ebf6 100%); }
  .tk-bhero--light .tk-bhero__glow { opacity: 0.45; }
  .tk-bhero--light .tk-bhero__img { filter: drop-shadow(0 26px 34px rgba(15, 23, 42, 0.28)); }
  /* mobil bez filtrů — viz tk-hero-slider: drop-shadow + blur při animaci na iOS probliká */
  @media (max-width: 749px) {
    .tk-bhero .tk-bhero__media .tk-bhero__img { filter: none; }
    .tk-bhero .tk-bhero__media::after { filter: none; transform: translateZ(0); left: 16%; right: 16%; height: 12%; }
  }
/* END_SECTION:tk-brand-hero */

/* START_SECTION:tk-compare (INDEX:48) */
.tk-compare {
    width: 100%;
    padding: 0 1.5rem;
  }

  .tk-compare__inner {
    max-width: var(--narrow-page-width);
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .tk-compare__title {
    font-size: var(--font-size--3xl, 28px);
    font-weight: 600;
    margin: 0;
  }

  .tk-compare__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  /* --- Diff-only toggle (iOS-style switch) --- */
  .tk-compare__diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: #555;
  }
  .tk-compare__diff-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .tk-compare__diff-toggle-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: #d8d8d8;
    border-radius: 11px;
    transition: background 0.18s ease;
    flex-shrink: 0;
  }
  .tk-compare__diff-toggle-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
  }
  .tk-compare__diff-toggle input:checked ~ .tk-compare__diff-toggle-track {
    background: #ff5a00;
  }
  .tk-compare__diff-toggle input:checked ~ .tk-compare__diff-toggle-track::before {
    transform: translateX(16px);
  }
  .tk-compare__diff-toggle input:focus-visible ~ .tk-compare__diff-toggle-track {
    outline: 2px solid #ff5a00;
    outline-offset: 2px;
  }
  .tk-compare__diff-toggle:hover .tk-compare__diff-toggle-label {
    color: #111;
  }

  /* Diff-only mode — skryje řádky kde mají všechny produkty stejnou hodnotu.
     Core řádky (obrázek, název) zůstávají vždy. */
  .tk-compare--diff-only .tk-compare__row--same {
    display: none;
  }

  /* --- Scroll wrapper — sjednocený s PDP params card --- */
  .tk-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
  }

  /* --- Table --- */
  .tk-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .tk-compare__label-col {
    width: 160px;
    min-width: 140px;
  }

  .tk-compare__table th,
  .tk-compare__table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
  }

  .tk-compare__table thead th {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    text-align: center;
  }

  .tk-compare__table tbody th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-foreground-secondary, #666);
    background: #F6F7F9;
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tk-compare__table tbody td {
    font-weight: 500;
    color: var(--pt-value-color, #1a1a1a);
  }

  .tk-compare__table tbody tr:last-child th,
  .tk-compare__table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Image row — obrázek v relativním boxu zarovnaném na šířku obrázku, aby ✕
     mohl sedět přesně v jeho pravém horním rohu. */
  .tk-compare__media-cell {
    position: relative;
    text-align: center;
    padding: 0.9rem 1rem 0.75rem !important;
    vertical-align: middle;
  }
  .tk-compare__media-box {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 124px;
  }
  .tk-compare__row--image img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 9px;
    display: block;
    margin: 0;
  }
  .tk-compare__no-img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 9px;
    background: #F6F7F9;
    margin: 0;
  }

  /* Title row */
  .tk-compare__row--title td {
    padding: 0.875rem 1rem;
  }
  .tk-compare__row--title td a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none;
    line-height: 1.35;
  }

  .tk-compare__row--title td a:hover {
    text-decoration: underline;
  }

  .tk-compare__variant-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-foreground-secondary, #666);
    margin-top: 4px;
  }

  /* TK: badge pilulky (Akce/Novinka/Doprodej) v levém horním rohu obrázku */
  .tk-compare__media {
    position: relative;
    display: block;
  }
  .tk-compare__img-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
  }
  /* Nativní „Sleva" badge injektujeme tady, ale její třída .product-badges__badge--sale
     se styluje v tk-product-card.css, který se na compare NEnačítá → byl by holý text.
     Vlastní pill (červený jako Akce/represents_sale badge). */
  .tk-compare__img-badges .product-badges__badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #6b7280;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
  }
  .tk-compare__img-badges .product-badges__badge--sale {
    background: #E23A2E;
  }

  /* TK: sale ceny v compare — přeškrtnutá compare-at + sleva % pill */
  .tk-compare__price-wrap {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .tk-compare__price-compare {
    color: var(--tk-price-compare-color, #3f4652);
    font-weight: 400;
  }

  .tk-compare__price-current--sale {
    color: #E23A2E;
  }

  .tk-compare__price-discount {
    align-self: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: #E23A2E;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 650;
    vertical-align: middle;
  }

  /* Diff highlight — BEZ podbarvení buněk (uživateli vadila výplň). Rozdílný řádek
     pozná podle popisku v label sloupci: lime accent proužek vlevo + tučný tmavý
     text + malá lime tečka. Hodnoty zůstávají na čistém pozadí. */
  .tk-compare__row--diff th {
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #ff5a00;
    padding-left: calc(1rem + 3px);
  }
  .tk-compare__row--diff th::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5a00;
    margin-right: 7px;
    vertical-align: middle;
  }

  /* Price */
  .tk-compare__old-price {
    color: var(--color-foreground-secondary, #999);
    font-size: 0.85em;
    margin-left: 4px;
  }

  /* Availability */
  .tk-compare__avail--yes {
    color: #16a34a;
    font-weight: 500;
  }

  .tk-compare__avail--no {
    color: #dc2626;
    font-weight: 500;
  }

  /* Add-to-cart tlačítko (self-contained — .product-card .tk-card-atc je scoped pod
     .product-card, nedá se reusnout; zrcadlí stejný tmavý-pill vzhled). */
  .tk-compare__row--cta td {
    padding-top: 0.4rem;
    padding-bottom: 1rem;
    vertical-align: top;
  }
  .tk-compare__atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary-button-background, #ff5a00);
    color: var(--color-primary-button-text, #fff);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
  }
  .tk-compare__atc-icon,
  .tk-compare__atc-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    pointer-events: none;
  }
  .tk-compare__atc-check { display: none; }
  @media (hover: hover) {
    .tk-compare__atc:hover { background: var(--color-primary-button-hover-background, #111); color: var(--color-primary-button-hover-text, #fff); }
  }
  .tk-compare__atc:active { transform: translateY(1px); }

  /* loading — spinner */
  .tk-compare__atc.is-loading { pointer-events: none; background: #1e293b; }
  .tk-compare__atc.is-loading .tk-compare__atc-icon { animation: tk-compare-atc-spin 0.9s linear infinite; }

  /* added — krátký success swap (1.8s v JS) */
  .tk-compare__atc.is-added { background: #ff5a00; color: #fff; }
  .tk-compare__atc.is-added .tk-compare__atc-icon,
  .tk-compare__atc.is-added .tk-compare__atc-label { display: none; }
  .tk-compare__atc.is-added .tk-compare__atc-check { display: inline-block; }

  /* disabled / sold-out */
  .tk-compare__atc--disabled,
  .tk-compare__atc[disabled] {
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
  }

  @keyframes tk-compare-atc-spin { to { transform: rotate(360deg); } }

  /* Remove ✕ — kruhové icon-only tlačítko v PRAVÉM HORNÍM ROHU sloupce produktu
     (pozicované v .tk-compare__media-cell = celá buňka sloupce, ne jen obrázek).
     svg vycentrované přes flex (justify+align center + svg display:block). */
  .tk-compare__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #8a8f98;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  }
  .tk-compare__remove svg {
    display: block;
    width: 12px;
    height: 12px;
  }
  .tk-compare__remove:hover {
    color: #E23A2E;
    border-color: rgba(226, 58, 46, 0.45);
    transform: scale(1.08);
  }

  /* --- Loading --- */
  .tk-compare__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    padding: 60px 20px;
    text-align: center;
    color: var(--color-foreground-secondary, #666);
  }
  /* display:flex přebíjí UA [hidden]{display:none} (autor > UA) → zajistit skrytí */
  .tk-compare__loading[hidden] { display: none; }

  .tk-compare__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e5e5;
    border-top-color: #ff5a00;
    border-radius: 50%;
    animation: tk-compare-spin 0.8s linear infinite;
    margin: 0 auto 16px;
  }

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

  /* --- Empty state --- */
  .tk-compare__empty {
    text-align: center;
    padding: 80px 20px;
  }

  .tk-compare__empty-icon {
    opacity: 0.2;
    margin-bottom: 20px;
  }

  .tk-compare__empty-text {
    color: var(--color-foreground-secondary, #666);
    font-size: var(--font-size--md, 16px);
    margin: 0 0 24px;
  }

  /* TK: stejny recept jako PDP ATC (radius 8px, 0.92rem/650, dark+lime hover lift) */
  .button.tk-compare__empty-btn {
    display: inline-flex;
    border-radius: var(--qty-radius, 8px);
    font-size: 0.92rem;
    font-weight: 650;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .button.tk-compare__empty-btn:hover {
    --button-background-color: #0a0a0a;
    --button-color: #ff5a00;
    box-shadow: 0 5px 14px rgba(10, 10, 10, 0.2);
  }

  .button.tk-compare__empty-btn:active {
    transform: translateY(0);
  }

  /* --- Mobile --- */
  @media screen and (max-width: 749px) {
    .tk-compare__inner {
      padding-top: 2rem;
      padding-bottom: 3rem;
    }
    .tk-compare__title {
      font-size: var(--font-size--2xl, 22px);
      margin-bottom: 1.5rem;
    }
    .tk-compare__label-col {
      width: 100px;
      min-width: 90px;
    }
    .tk-compare__table th,
    .tk-compare__table td {
      padding: 8px 10px;
      font-size: 13px;
    }
    .tk-compare__atc {
      height: 34px;
      font-size: 0.8125rem;
      padding: 0 8px;
      gap: 4px;
    }
  }
/* END_SECTION:tk-compare */

/* START_SECTION:tk-contact (INDEX:49) */
.tk-contact {
    padding: var(--tk-page-pad-top) 20px var(--tk-page-pad-bottom);
    background: var(--color-background);
    color: var(--color-foreground);
    --tk-contact-accent: var(--color-primary-button-background);
    --tk-contact-accent-dark: var(--color-primary-button-hover-background);
    --tk-contact-on-accent: var(--color-primary-button-text);
    --tk-contact-tint: color-mix(in srgb, var(--color-primary-button-background) 18%, transparent);
    --tk-contact-radius: 16px;
  }
  .tk-contact__inner { max-width: var(--tk-page-max-w); margin: 0 auto; }

  .tk-contact__header { text-align: center; margin-bottom: 28px; }
  .tk-contact__title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.12;
    letter-spacing: -0.02em; margin: 0 0 14px;
  }
  .tk-contact__intro {
    font-size: 16px; line-height: 1.7; color: rgb(var(--color-foreground-rgb) / 0.62);
    max-width: 56ch; margin: 0 auto;
  }

  .tk-contact__notice { padding: 14px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 24px; }
  .tk-contact__notice--warn { background: color-mix(in srgb, var(--color-error) 10%, var(--color-background)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent); }

  /* ── card ── */
  .tk-contact__card {
    background: var(--color-input-background);
    border: 1px solid rgb(var(--color-border-rgb) / 0.6);
    border-radius: var(--tk-contact-radius);
    padding: clamp(20px, 4vw, 40px);
    box-shadow: 0 1px 2px rgb(var(--color-shadow-rgb) / 0.04), 0 8px 28px rgb(var(--color-shadow-rgb) / 0.05);
  }

  .tk-contact__step[hidden] { display: none !important; }
  .tk-contact__step { display: flex; flex-direction: column; gap: 18px; }

  .tk-contact__grid { display: grid; gap: 18px; }
  @media (min-width: 640px) { .tk-contact__grid { grid-template-columns: 1fr 1fr; } }

  .tk-contact__field { display: flex; flex-direction: column; gap: 7px; }
  .tk-contact__field label { font-size: 13.5px; font-weight: 600; color: var(--color-foreground); }
  .tk-contact__req { color: var(--color-error); }

  .tk-contact__field input,
  .tk-contact__field textarea {
    width: 100%; font: inherit;
    color: var(--color-input-text, var(--color-foreground));
    background-color: var(--color-background);
    padding: 13px 15px;
    border-radius: 11px;
    border: 1.5px solid var(--color-input-border);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .tk-contact__field textarea { resize: vertical; }
  .tk-contact__field input::placeholder,
  .tk-contact__field textarea::placeholder { color: rgb(var(--color-input-text-rgb) / 0.5); }
  .tk-contact__field input:focus,
  .tk-contact__field textarea:focus {
    outline: none; border-color: var(--tk-contact-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-contact-accent) 40%, transparent);
  }

  /* ── consent ── */
  .tk-contact__consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.5; color: rgb(var(--color-foreground-rgb) / 0.7);
    cursor: pointer;
  }
  .tk-contact__consent input {
    flex: none; width: 18px; height: 18px; margin: 1px 0 0;
    accent-color: var(--tk-contact-accent-dark); cursor: pointer;
  }

  .tk-contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

  /* ── buttons ── */
  .tk-contact__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .tk-contact__actions--end { justify-content: flex-end; }
  .tk-contact__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; font-size: 15px; line-height: 1;
    padding: 14px 26px; border-radius: 12px; border: 1.5px solid transparent;
    cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tk-contact__btn--primary {
    background: var(--tk-contact-accent); color: var(--tk-contact-on-accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--tk-contact-accent) 45%, transparent);
  }
  .tk-contact__btn--primary:hover { background: var(--color-primary-button-hover-background); color: var(--color-primary-button-hover-text); transform: translateY(-1px); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary-button-hover-background) 35%, transparent); }
  .tk-contact__btn--primary:active { transform: translateY(0); }
  .tk-contact__btn--primary:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

  .tk-contact__error {
    padding: 12px 14px; border-radius: 11px; font-size: 14px;
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-background)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
  }

  /* ── result ── */
  .tk-contact__result { align-items: center; text-align: center; padding: 28px 8px; gap: 14px; }
  .tk-contact__result-icon {
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center; color: var(--color-primary-button-text); background: var(--color-success);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-success) 30%, transparent);
    animation: tk-contact-pop .35s ease;
  }
  @keyframes tk-contact-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  .tk-contact__result-title { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
  .tk-contact__result-body { font-size: 15.5px; line-height: 1.7; color: rgb(var(--color-foreground-rgb) / 0.65); max-width: 48ch; margin: 0; }

  /* ── kontaktní údaje (firma) ── */
  .tk-contact__info { margin-top: 28px; }
  .tk-contact__info-title {
    text-align: center; font-size: 15px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 18px;
  }
  .tk-contact__info-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .tk-contact__info-item {
    display: flex; align-items: flex-start; justify-content: center; gap: 11px;
    font-size: 14.5px; line-height: 1.55; color: rgb(var(--color-foreground-rgb) / 0.72);
    text-align: center;
  }
  .tk-contact__info-item svg {
    flex: none; margin-top: 2px; color: var(--tk-contact-accent-dark);
  }
  .tk-contact__info-item a {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--tk-contact-accent-dark) 50%, transparent);
    transition: border-color .15s ease, color .15s ease;
  }
  .tk-contact__info-item a:hover { color: var(--tk-contact-accent-dark); border-color: var(--tk-contact-accent-dark); }

  @media (max-width: 749px) {
    .tk-contact { padding: 28px 16px 56px; }
    .tk-contact__actions { flex-direction: column; align-items: stretch; }
    .tk-contact__btn { width: 100%; }
    .tk-contact__info-list { grid-template-columns: 1fr; }
  }
/* END_SECTION:tk-contact */

/* START_SECTION:tk-feature-banner (INDEX:52) */
.tk-fb { --fb-ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--fb-bg, #000);
  }
  .tk-fb--light { background: linear-gradient(180deg, #a5bfe1 0%, #c3d6ec 45%, #dde8f5 100%); }
  /* Přechod do barvy další sekce (fade_to). Lineární gradient přes 100 px působil jako
     rozmazaný pás, proto je přechod kratší (fade_height) a s náběhem: první dvě třetiny
     jsou skoro neznatelné, barva se srovná až těsně u hrany. */
  .tk-fb--fade { background-color: var(--fb-bg, #000);
    background-image: linear-gradient(to bottom,
      rgba(var(--fb-fade-rgb), 0) calc(100% - var(--fb-fade-h, 56px)),
      rgba(var(--fb-fade-rgb), 0.08) calc(100% - var(--fb-fade-h, 56px) * 0.62),
      rgba(var(--fb-fade-rgb), 0.34) calc(100% - var(--fb-fade-h, 56px) * 0.3),
      rgba(var(--fb-fade-rgb), 0.72) calc(100% - var(--fb-fade-h, 56px) * 0.12),
      rgba(var(--fb-fade-rgb), 1) 100%); }
  .tk-fb--fade .tk-fb__media { background: var(--fb-bg, #000); }
  .tk-fb--light .tk-fb__media { background: transparent; }
  .tk-fb { color: var(--fb-fg, #fff); padding-top: var(--fb-pt, 0px); padding-bottom: var(--fb-pb, 56px); }
  .tk-fb__media { display: block; overflow: hidden; background: var(--fb-bg, #000); isolation: isolate; }
  .tk-fb__img { display: block; width: 100%; backface-visibility: hidden; height: auto; max-height: var(--fb-max-h, 700px); object-fit: cover; object-position: center; transition: transform 1.2s var(--fb-ease); }
  .tk-fb__media:hover .tk-fb__img { transform: scale(1.02); }
  .tk-fb__content { max-width: 640px; margin: 0 auto; padding: 36px 32px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .tk-fb__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #ff5a00; }
  .tk-fb__heading { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: inherit; text-wrap: balance; }
  .tk-fb__sub { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--fb-muted, #8a8a8f); max-width: 46ch; }
  /* CTA barví „Barevné schéma CTA tlačítek" (default Spigen oranžová) — sjednoceno
     s hero sliderem a akcentním bannerem. */
  .tk-fb__btn { display: inline-flex; align-items: center; margin-top: 10px; will-change: transform; padding: 12px 22px; border-radius: 999px; background: var(--cta-bg, #fff); color: var(--cta-fg, #000); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform 0.3s var(--fb-ease), background 0.3s var(--fb-ease), color 0.3s var(--fb-ease); }
  .tk-fb__btn:hover { background: var(--cta-bg-hover, #111); color: var(--cta-fg-hover, #fff); transform: translateY(-1px); }
  /* mobil: výřez zarovnaný k horní hraně — střecha zůstane, prázdná podlaha pod autem se odřízne (dřív buď uřízlá střecha, nebo 200 px tmavé mezery) */
  @media (max-width: 749px) { .tk-fb__img { height: 340px; max-height: none; object-fit: cover; object-position: center top; } /* 340 = auto + kousek podlahy pod ním; 22. 9. sníženo z 430 kvůli výšce homepage na mobilu */ .tk-fb__content { padding: 20px 20px 0; gap: 10px; } }
  @media (prefers-reduced-motion: reduce) { .tk-fb__img, .tk-fb__btn { transition: none; } }
/* END_SECTION:tk-feature-banner */

/* START_SECTION:tk-hero-slider (INDEX:56) */
.tk-hs { --hs-red: var(--tk-accent, #ff5a00); --hs-ease: cubic-bezier(0.22, 1, 0.36, 1); padding-block: var(--hs-pt, 8px) var(--hs-pb, 8px); }
  .tk-hs__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-hs__viewport { position: relative; overflow: hidden; border-radius: var(--hs-radius, 20px); background: #f6f7f9; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .tk-hs__track { display: flex; width: 100%; transition: transform 0.75s var(--hs-ease); will-change: transform; }
  .tk-hs__viewport.is-dragging .tk-hs__track { transition: none; }
  .tk-hs__slide { position: relative; flex: 0 0 100%; min-width: 100%; min-height: var(--hs-h, 560px); background: var(--s-bg, #f6f7f9); overflow: hidden; }
  .tk-hs__cover { position: absolute; inset: 0; }
  .tk-hs__cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .tk-hs__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%); }
  .tk-hs__slide--text-light .tk-hs__shade { background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 75%); }
  .tk-hs__content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px 40px; min-height: var(--hs-h, 560px); padding: 48px 56px; box-sizing: border-box; }
  /* Full-bleed varianta: banner přes celou šířku stránky, obsah zarovnaný na šířku stránky */
  .tk-hs--full .tk-hs__inner { max-width: none; padding-inline: 0; }
  .tk-hs--full .tk-hs__viewport { border-radius: 0; }
  .tk-hs--full .tk-hs__content { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: calc(var(--page-margin, 20px) + 36px); }
  .tk-hs--full .tk-hs__arrow--prev { left: max(18px, calc((100% - var(--page-width, 1400px)) / 2 - 8px)); }
  .tk-hs--full .tk-hs__arrow--next { right: max(18px, calc((100% - var(--page-width, 1400px)) / 2 - 8px)); }
  .tk-hs__slide--cover .tk-hs__content { grid-template-columns: minmax(0, 620px); }
  .tk-hs__slide--split .tk-hs__content { z-index: auto; } /* bez vlastního stacking contextu → multiply fotky se počítá vůči pozadí slidu */
  .tk-hs__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 560px; }
  .tk-hs__badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--hs-red); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .tk-hs__title { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--s-title, #111); text-wrap: balance; }
  .tk-hs__desc { margin: 0; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--s-text, #3a3a3f); max-width: 46ch; }
  .tk-hs__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
  .tk-hs__btn { display: inline-flex; align-items: center; gap: 10px; will-change: transform; padding: 14px 24px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 0.3s var(--hs-ease), color 0.3s var(--hs-ease), border-color 0.3s var(--hs-ease), transform 0.3s var(--hs-ease); }
  .tk-hs__btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--hs-ease); }
  /* CTA barví „Barevné schéma CTA tlačítek" (default Spigen oranžová) — stejné schéma
     jako chipy v hero banneru značek, takže se dá přebarvit z theme editoru. */
  .tk-hs .tk-hs__btn--primary { background: var(--cta-bg, #111); color: var(--cta-fg, #fff); font-weight: 700; }
  .tk-hs .tk-hs__btn--primary:hover { background: var(--cta-bg-hover, #111); color: var(--cta-fg-hover, #fff); transform: translateY(-1px); }
  .tk-hs__btn--primary:hover svg { transform: translateX(3px); }
  .tk-hs__btn--ghost { border: 1.5px solid var(--s-title, #111); color: var(--s-title, #111); }
  .tk-hs .tk-hs__btn--ghost:hover { border-color: var(--cta-bg, #ff5a00); color: var(--cta-bg, #ff5a00); }
  .tk-hs__media { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; isolation: isolate; }
  .tk-hs__media picture { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
  .tk-hs__img { display: block; width: 100%; backface-visibility: hidden; max-height: calc(var(--hs-h, 560px) - 64px); object-fit: contain; padding: var(--s-img-pad, 0%); box-sizing: border-box; transform: translateX(24px) scale(0.98); opacity: 0; transition: transform 0.9s var(--hs-ease) 0.1s, opacity 0.7s var(--hs-ease) 0.1s; }
  /* ⚠️ ŽÁDNÝ mix-blend-mode: fotky slidů jsou průhledné PNG výřezy a blend spolu s
     drop-shadow filtrem nutí WebKit přepočítat celou blend skupinu při každém repaintu —
     hover na CTA tlačítku pak probliká pozadí pod/za produktem. Stín řeší filter níž. */
  .tk-hs__slide.is-active .tk-hs__img { transform: none; opacity: 1; }
  .tk-hs__text > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--hs-ease), transform 0.6s var(--hs-ease); }
  .tk-hs__slide.is-active .tk-hs__text > * { opacity: 1; transform: none; }
  .tk-hs__slide.is-active .tk-hs__text > :nth-child(2) { transition-delay: 0.08s; }
  .tk-hs__slide.is-active .tk-hs__text > :nth-child(3) { transition-delay: 0.16s; }
  .tk-hs__slide.is-active .tk-hs__text > :nth-child(4) { transition-delay: 0.24s; }
  .tk-hs__arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 0.3s var(--hs-ease), background 0.3s var(--hs-ease), color 0.3s var(--hs-ease), transform 0.3s var(--hs-ease); }
  .tk-hs__arrow svg { width: 20px; height: 20px; }
  .tk-hs__arrow--prev { left: 18px; } .tk-hs__arrow--next { right: 18px; }
  .tk-hs__viewport:hover .tk-hs__arrow, .tk-hs__viewport:focus-within .tk-hs__arrow { opacity: 1; }
  .tk-hs__arrow:hover { background: var(--hs-red); color: #fff; transform: scale(1.05); }
  .tk-hs__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
  .tk-hs__dot { position: relative; width: 28px; height: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.14); cursor: pointer; overflow: hidden; transition: width 0.35s var(--hs-ease), background 0.3s; }
  .tk-hs__dot::after { content: ""; position: absolute; inset: -10px 0; }
  .tk-hs__dot span { position: absolute; inset: 0; width: 0; background: var(--hs-red); border-radius: inherit; }
  .tk-hs__dot.is-active { width: 56px; }
  .tk-hs__dot.is-active span { width: 100%; }
  .tk-hs__viewport[data-autoplay="true"]:not(.is-paused) .tk-hs__dot.is-active span { width: 0; animation: tk-hs-progress var(--hs-interval, 6s) linear forwards; }
  /* Tmavý slide (tón textu = světlý): jemný radiální přechod pozadí, bílý text, světlý „spotlight" pod fotkou,
     aby multiply nezatmavil produkt (bílé okraje fotky se prolnou do jakéhokoli pozadí). */
  .tk-hs__slide--text-light { background-image: radial-gradient(120% 120% at 78% 45%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%); }
  /* Tmavý split slide: fotka s průhledným pozadím (PNG) bez prolnutí, jemný světelný odlesk za produktem
     a měkký stín pod ním — žádné bílé kolo. */
  .tk-hs__slide--split.tk-hs__slide--text-light .tk-hs__media { position: relative; }
  .tk-hs__slide--split.tk-hs__slide--text-light .tk-hs__media::before { content: none; } /* žádný světelný odlesk — jen produkt a stín */
  .tk-hs__slide--split.tk-hs__slide--text-light .tk-hs__media::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); filter: blur(6px); }
  .tk-hs__slide--split.tk-hs__slide--text-light .tk-hs__img { position: relative; z-index: 1; mix-blend-mode: normal; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.55)); }
  .tk-hs__viewport.is-light-text .tk-hs__dot { background: rgba(255, 255, 255, 0.22); }
  .tk-hs__slide--text-light .tk-hs__btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
  .tk-hs__slide--cover.tk-hs__slide--text-light .tk-hs__badge { background: #fff; color: #111; }
  .tk-hs__slide--cover .tk-hs__dot { background: rgba(255, 255, 255, 0.35); }
  @keyframes tk-hs-progress { to { width: 100%; } }
  @media (max-width: 989px) { .tk-hs__content { padding: 36px 32px; gap: 20px 24px; } }
  @media (max-width: 749px) {
    .tk-hs__inner { padding-inline: 10px; }
    .tk-hs--full .tk-hs__inner { padding-inline: 0; }
    .tk-hs--full .tk-hs__content { padding-inline: 22px; }
    .tk-hs__slide, .tk-hs__content { min-height: var(--hs-h-m, 620px); }
    .tk-hs__content { grid-template-columns: 1fr; align-content: start; padding: 20px 22px 48px; gap: 16px; }
    .tk-hs__media { order: -1; }
    .tk-hs__img { max-height: 230px; }
    .tk-hs__title { font-size: clamp(1.45rem, 6.5vw, 2rem); line-height: 1.08; }
    .tk-hs__desc { font-size: 0.9rem; line-height: 1.5; }
    /* CTA: nikdy na dva řádky (SK/EN texty jsou delší) — menší písmo škálované s šířkou, menší odsazení */
    .tk-hs__actions { gap: 10px; }
    .tk-hs__btn { white-space: nowrap; font-size: clamp(0.7rem, 3.4vw, 0.85rem); letter-spacing: 0.02em; padding: 12px 18px; gap: 8px; max-width: 100%; }
    .tk-hs__btn svg { width: 14px; height: 14px; flex: none; }
    .tk-hs__arrow { display: none; }
    .tk-hs__dots { bottom: 14px; }
  }
  @media (prefers-reduced-motion: reduce) { .tk-hs__track, .tk-hs__img, .tk-hs__text > * { transition: none; } .tk-hs__dot span { animation: none !important; width: 100% !important; } }

  /* Spigen světlé slidy (tint #e8edf3): jemný bílý odlesk, měkčí stín výřezu i podlahy */
  .tk-hs__slide:not(.tk-hs__slide--text-light) { background-image: radial-gradient(70% 100% at 74% 42%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #9db9de 0%, #c3d6ec 45%, #e2ebf6 100%); }
  .tk-hs__slide--split:not(.tk-hs__slide--text-light) .tk-hs__media { position: relative; }
  .tk-hs__slide--split:not(.tk-hs__slide--text-light) .tk-hs__media::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0)); filter: blur(6px); }
  .tk-hs__slide--split:not(.tk-hs__slide--text-light) .tk-hs__img { position: relative; z-index: 1; filter: drop-shadow(0 26px 34px rgba(15, 23, 42, 0.28)); }

  /* Mobil: ŽÁDNÉ filtry na fotce ani na podlaze. iOS WebKit při posunu tracku a nájezdu fotky
     (transform + opacity) přerasterizuje drop-shadow i blur(6px) každý snímek, takže elipsa pod
     produktem probliká — stejný neduh, který na desktopu dělal hover CTA (commit d6e4653).
     Stín nahrazuje měkčí, širší přechod elipsy na vlastní kompozitní vrstvě. Musí být až za
     tint bloky výš, aby vyhrál stejně specifické selektory. */
  @media (max-width: 749px) {
    .tk-hs .tk-hs__slide--split .tk-hs__img { filter: none; }
    .tk-hs .tk-hs__slide--split .tk-hs__media::after { filter: none; transform: translateZ(0); left: 16%; right: 16%; bottom: 4%; height: 12%; background: radial-gradient(closest-side, rgba(15, 23, 42, 0.26), rgba(15, 23, 42, 0)); }
    .tk-hs .tk-hs__slide--split.tk-hs__slide--text-light .tk-hs__media::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); }
  }
/* END_SECTION:tk-hero-slider */

/* START_SECTION:tk-page (INDEX:59) */
.tk-page {
    padding: var(--tk-page-pad-top) 20px var(--tk-page-pad-bottom);
    background: var(--color-background);
    color: var(--color-foreground);
  }

  .tk-page__inner {
    max-width: var(--tk-page-max-w);
    margin: 0 auto;
  }

  .tk-page__header {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .tk-page__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tk-accent-color, #7b2d8e);
    margin-bottom: 14px;
    padding: 4px 12px;
    background: rgba(123, 45, 142, 0.08);
    border-radius: 999px;
  }

  .tk-page__title {
    font-family: var(--font-heading--family, var(--font-body--family));
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-foreground);
  }

  .tk-page__body {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.82);
  }

  .tk-page__body > *:first-child { margin-top: 0; }
  .tk-page__body > *:last-child { margin-bottom: 0; }

  .tk-page__body h1,
  .tk-page__body h2,
  .tk-page__body h3,
  .tk-page__body h4 {
    font-family: var(--font-heading--family, var(--font-body--family));
    color: var(--color-foreground);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 2.2em 0 0.8em;
  }

  .tk-page__body h2 { font-size: 24px; font-weight: 700; }
  .tk-page__body h3 { font-size: 19px; font-weight: 600; }
  .tk-page__body h4 { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

  .tk-page__body p { margin: 0 0 1.1em; }

  .tk-page__body a {
    color: var(--tk-accent-color, #7b2d8e);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s ease;
  }
  .tk-page__body a:hover { color: var(--color-foreground); }

  .tk-page__body ul,
  .tk-page__body ol {
    padding-left: 1.4em;
    margin: 0 0 1.2em;
  }
  .tk-page__body li { margin: 0 0 0.45em; }
  .tk-page__body li::marker { color: var(--tk-accent-color, #7b2d8e); }

  .tk-page__body strong { font-weight: 600; color: var(--color-foreground); }

  .tk-page__body blockquote {
    border-left: 3px solid var(--tk-accent-color, #7b2d8e);
    padding: 4px 0 4px 20px;
    margin: 1.5em 0;
    color: rgba(0, 0, 0, 0.7);
    font-style: italic;
  }

  .tk-page__body hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 2.5em 0;
  }

  .tk-page__body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
    font-size: 15px;
  }
  .tk-page__body th,
  .tk-page__body td {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
  }
  .tk-page__body th { background: rgba(0, 0, 0, 0.03); font-weight: 600; }

  .tk-page__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
  }

  @media (max-width: 749px) {
    .tk-page { padding: 32px 16px 56px; }
    .tk-page__header { margin-bottom: 32px; padding-bottom: 24px; }
    .tk-page__body { font-size: 15px; line-height: 1.7; }
    .tk-page__body h2 { font-size: 21px; }
    .tk-page__body h3 { font-size: 17px; }
  }
/* END_SECTION:tk-page */

/* START_SECTION:tk-popup-newsletter (INDEX:60) */
/* ──────────────────────────────────────────────────────────────
     TK Popup Newsletter — světlá, klidná karta.

     ⚠️ FONTY: theme jede CELÝ na Montserrat. Starší verze tohohle souboru
     měla `var(--tk-f-display, 'Bricolage Grotesque')` / `'Geist'` — ani jeden
     font v theme neexistuje a `--tk-f-*` není nikde definovaná, takže popup
     jel v generickém systémovém sans-serifu a působil jako cizí prvek.
     Fallback proto míří na theme proměnné `--font-heading--family` /
     `--font-body--family` (obě se opravdu definují v
     `snippets/theme-styles-variables.liquid`). Nevracet hardcoded názvy fontů
     a POZOR na `--font-h1--family` — ta v theme NEEXISTUJE, i když ji pár
     starších snippetů používá.

     ⚠️ MÍRA ZDOBENÍ: mezikrok byl tmavá „neon" karta v jazyce product finderu
     (bloby, neonová linka, tečkovaný rastr, obrysové číslo slevy, lime pill
     eyebrow s pulzující tečkou). Uživatel: „ježiš to je moc tryhard, dej to
     světlý, eyebrow badge je moc AI like". Zůstala jediná dekorace: dvě
     hodně jemné lime plochy, co se pomalu převalují v pozadí karty.
     Nepřidávat zpátky neon, rastr, ghost číslo ani eyebrow pilulku.
     ────────────────────────────────────────────────────────────── */
  tk-popup-newsletter {
    display: block;
    --tk-popup-on-accent: #0a0a0a;
    --tk-popup-ink: #0a0a0a;
    --tk-popup-ink-mid: rgba(10, 10, 10, 0.58);
    --tk-popup-ink-low: rgba(10, 10, 10, 0.44);
    --tk-popup-surface: #ffffff;
    --tk-popup-field: #f4f4f5;
    font-family: var(--tk-f-body, var(--font-body--family, inherit));
  }
  tk-popup-newsletter[hidden] { display: none; }

  /* Honeypot "company" — mimo viewport, ⚠️ NE display:none (kontrakt platformy:
     boti display:none pole umí přeskočit, off-screen input vyplní). */
  .tk-popup__hp {
    position: absolute;
    left: -200vw; top: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .tk-popup__backdrop {
    position: fixed; inset: 0;
    background: rgba(12, 12, 14, 0.55);
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    z-index: 9998;
  }
  .tk-popup--open .tk-popup__backdrop { opacity: 1; pointer-events: auto; }

  .tk-popup__card {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -47%) scale(.98);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: var(--tk-popup-surface);
    color: var(--tk-popup-ink);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow:
      0 0 0 1px rgba(10, 10, 10, 0.06),
      0 34px 80px -26px rgba(10, 10, 10, 0.42),
      0 10px 24px -14px rgba(10, 10, 10, 0.14);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    z-index: 9999;
  }
  .tk-popup--open .tk-popup__card {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  /* ── Dekorační vrstva ─────────────────────────────────────────
     Jediná ozdoba: dvě rozmazané lime plochy, co se pomalu převalují za
     obsahem. Mají být sotva vidět — jen aby karta nebyla plochý bílý
     obdélník. Vrstva ořezává plochy k rohům karty a nikdy neposlouchá
     pointer eventy. */
  .tk-popup__fx {
    position: absolute; inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  /* ⚠️ Animují se VÝHRADNĚ `transform` a `opacity` — nikdy velikost, pozice,
     barva ani `filter`. Rozmazaná vrstva se při každé změně geometrie rastruje
     znovu a stálo by to desetiny sekundy hlavního vlákna na sekundu běhu.
     S `will-change: transform` je animace čistě kompoziční = 0 paintů.
     ⚠️ Běží JEN pod `.tk-popup--open`. Element se zbaví `hidden` už ve chvíli,
     kdy se ukáže boční teaser — karta je pak schovaná jen opticky, ale co je
     uvnitř, běží dál. Zavřený popup nesmí stát nic. */
  .tk-popup__wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    will-change: transform;
  }
  .tk-popup__wash--a {
    width: 74%; aspect-ratio: 1.15;
    top: -30%; right: -20%;
    background: radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--tk-popup-accent) 22%, transparent) 0%,
      transparent 68%);
  }
  .tk-popup__wash--b {
    width: 60%; aspect-ratio: .9;
    bottom: -32%; left: -18%;
    background: radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--tk-popup-accent) 13%, transparent) 0%,
      transparent 70%);
  }
  .tk-popup--open .tk-popup__wash--a { animation: tk-popup-wash-a 24s ease-in-out infinite; }
  .tk-popup--open .tk-popup__wash--b { animation: tk-popup-wash-b 31s ease-in-out infinite; }

  /* ── Horní proužek ────────────────────────────────────────────
     Tichá krémová linka s logem, nic víc. Dřív tu byla skládaná scéna s lime
     kruhem a výší slevy — uživatel ji odmítl a chtěl proužek užší, jen s
     logem. ⚠️ Nevracet sem kruh ani číslo.
     S nastavenou fotkou proužek vyroste na plnohodnotný obrazový pruh. */
  .tk-popup__banner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex; align-items: center;
    height: 74px;
    padding: 0 40px;
    background: #f0eae1;
    box-shadow: inset 0 -1px 0 rgba(10, 10, 10, 0.06);
  }
  /* ⚠️ Fotka drží poměr stran, aby karta neskákala podle toho, jestli se
     obrázek stihl načíst. */
  .tk-popup__banner--photo {
    height: auto;
    aspect-ratio: 16 / 7;
    padding: 0;
    display: block;
    box-shadow: none;
  }
  .tk-popup__banner-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Scrim jen pod fotkou — bílé logo na ní musí zůstat čitelné. */
  .tk-popup__banner--photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(8, 8, 10, 0.44) 0%,
      rgba(8, 8, 10, 0.08) 52%,
      rgba(8, 8, 10, 0.22) 100%);
  }

  .tk-popup__banner-logo {
    position: relative;
    z-index: 2;
    width: auto; height: 20px;
    display: block;
  }
  .tk-popup__banner-wordmark {
    position: relative;
    z-index: 2;
    font-family: var(--tk-f-display, var(--font-heading--family, inherit));
    font-size: 16px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--tk-popup-ink);
  }
  .tk-popup__banner--photo .tk-popup__banner-logo,
  .tk-popup__banner--photo .tk-popup__banner-wordmark {
    position: absolute;
    left: 28px; top: 24px;
  }
  .tk-popup__banner--photo .tk-popup__banner-wordmark { color: #fff; }

  /* ── Obsah ───────────────────────────────────────────────── */
  .tk-popup__body {
    position: relative;
    z-index: 2;
    padding: 38px 40px 34px;
    display: flex; flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Každý krok je vlastní flex sloupec — bez toho by se prvky slily dohromady
     jen s vlastními marginy. Success krok si `align-items` přepisuje níž. */
  .tk-popup__step:not([hidden]) {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 18px;
  }

  .tk-popup__close {
    position: absolute; top: 18px; right: 18px;
    width: 38px; height: 38px;
    /* Křížek leží na obrazovém pruhu, ne na bílé — potřebuje vlastní plochu,
       jinak na krémové scéně i na fotce zanikne. */
    background: rgba(255, 255, 255, 0.78);
    border: none; border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    color: rgba(10, 10, 10, 0.6);
    box-shadow: 0 2px 10px rgba(10, 10, 10, 0.12);
    transition: background .2s, color .2s;
    z-index: 4;
  }
  .tk-popup__close:hover { background: #fff; color: var(--tk-popup-ink); }
  .tk-popup__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-popup-accent) 55%, transparent);
  }

  .tk-popup__heading {
    font-family: var(--tk-f-display, var(--font-heading--family, inherit));
    font-size: clamp(28px, 3.6vw, 34px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--tk-popup-ink);
    margin: 0;
    text-wrap: balance;
  }
  .tk-popup__sub {
    color: var(--tk-popup-ink-mid);
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    text-wrap: pretty;
  }

  .tk-popup__form {
    margin: 0;
    display: flex; flex-direction: column; gap: 12px;
    padding-top: 4px;
  }

  /* Vstup + odesílací pilulka v jednom tvaru. Fokus drží barva rámečku,
     žádné hranaté halo v rozích. */
  .tk-popup__field {
    display: flex; align-items: center;
    gap: 4px;
    background: var(--tk-popup-field);
    border: 1.5px solid transparent;
    border-radius: 100px;
    padding: 5px;
    transition: background .2s, border-color .2s;
  }
  .tk-popup__field:hover { background: #eeeef0; }
  .tk-popup__field:focus-within {
    background: #fff;
    border-color: var(--tk-popup-accent);
  }

  .tk-popup__input {
    flex: 1; min-width: 0;
    padding: 15px 10px 15px 22px;
    border: 0;
    background: transparent;
    font-family: inherit;
    /* 16px+ zabrání iOS Safari auto-zoom on focus */
    font-size: 16px;
    color: var(--tk-popup-ink);
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 100px;
    box-sizing: border-box;
  }
  .tk-popup__input::placeholder { color: rgba(10, 10, 10, 0.4); }
  /* Chrome autofill bg by jinak vykreslil ostrý žlutý/modrý obdélník uvnitř pillu */
  .tk-popup__input:-webkit-autofill,
  .tk-popup__input:-webkit-autofill:hover,
  .tk-popup__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--tk-popup-ink);
    transition: background-color 5000s ease-in-out 0s;
    border-radius: 100px;
  }

  .tk-popup__submit {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 26px;
    border: none; border-radius: 100px;
    background: var(--tk-popup-accent);
    color: var(--tk-popup-on-accent);
    font-family: inherit;
    font-weight: 700; font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-sizing: border-box;
    transition: filter .2s, gap .2s;
    white-space: nowrap;
  }
  .tk-popup__submit:hover { filter: brightness(1.05); gap: 11px; }
  .tk-popup__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-popup-accent) 45%, transparent);
  }
  .tk-popup__submit-arrow { transition: transform .2s; }
  .tk-popup__submit:hover .tk-popup__submit-arrow { transform: translateX(2px); }
  .tk-popup__submit-spinner { display: none; animation: tk-popup-spin .8s linear infinite; }
  .tk-popup__submit[aria-busy="true"] .tk-popup__submit-text,
  .tk-popup__submit[aria-busy="true"] .tk-popup__submit-arrow { display: none; }
  .tk-popup__submit[aria-busy="true"] .tk-popup__submit-spinner { display: block; }
  .tk-popup__submit[aria-busy="true"] { pointer-events: none; opacity: .85; }

  .tk-popup__error {
    color: #C53030;
    font-size: 13px;
    padding: 0 20px;
    font-weight: 500;
  }
  /* „Vlídná" varianta — např. 409 already_customer není chyba uživatele,
     tak ať na něj neřveme červenou. */
  .tk-popup__error--notice { color: var(--tk-popup-ink-mid); }

  /* Konec platnosti kódu z API (validUntil) — drobný řádek pod kuponem. */
  .tk-popup__valid {
    font-size: 13px;
    color: var(--tk-popup-ink-low);
    margin: 0;
  }

  .tk-popup__consent {
    font-size: 13px;
    color: var(--tk-popup-ink-low);
    line-height: 1.6;
    /* Jemná linka odděluje právní patičku od formuláře — bez ní se drobný
       šedý text lepí na pilulku a karta působí neuspořádaně. */
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(10, 10, 10, 0.08);
  }
  .tk-popup__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .tk-popup__consent p { margin: 0; }
  .tk-popup__consent p + p { margin-top: 7px; }

  /* ── Krok po odeslání ────────────────────────────────────────
     `:not([hidden])` je povinné — holé `display: flex` by přebilo UA pravidlo
     `[hidden] { display: none }` a success krok by se vykreslil vedle úvodního. */
  .tk-popup__step--success:not([hidden]) {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 16px;
  }
  .tk-popup__check {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--tk-popup-accent);
    color: var(--tk-popup-on-accent);
    display: grid; place-items: center;
    margin: 6px 0 0;
    animation: tk-popup-check .6s cubic-bezier(.22, 1, .36, 1);
  }
  .tk-popup__check::before {
    content: '';
    position: absolute; inset: -9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tk-popup-accent) 20%, transparent);
    z-index: -1;
    animation: tk-popup-halo 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
  }
  .tk-popup__heading--success { text-align: center; }
  .tk-popup__step--success .tk-popup__sub { max-width: 38ch; margin: 0; }

  /* Kód = „utržený" kupon: přerušovaný lime rámeček, jemná lime plocha.
     ⚠️ Hodnota kódu je TMAVÁ, ne lime — lime text na bílé má kontrast ~1,5:1. */
  .tk-popup__code {
    position: relative;
    display: inline-flex; align-items: center; gap: 16px;
    margin: 2px 0 0;
    padding: 15px 22px;
    border: 1.5px dashed color-mix(in srgb, var(--tk-popup-accent) 60%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tk-popup-accent) 10%, transparent);
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .tk-popup__code:hover {
    background: color-mix(in srgb, var(--tk-popup-accent) 18%, transparent);
    border-color: var(--tk-popup-accent);
  }
  .tk-popup__code:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-popup-accent) 45%, transparent);
  }
  .tk-popup__code.is-copied { border-style: solid; border-color: var(--tk-popup-accent); }
  .tk-popup__code-label {
    font-size: 13px;
    color: rgba(10, 10, 10, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-family: inherit;
  }
  .tk-popup__code-value {
    font-family: var(--tk-f-display, var(--font-heading--family, inherit));
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tk-popup-ink);
  }
  .tk-popup__code-copy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.07);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: inherit;
    color: rgba(10, 10, 10, 0.6);
    transition: background .2s, color .2s;
  }
  .tk-popup__code:hover .tk-popup__code-copy { color: var(--tk-popup-ink); }
  .tk-popup__code.is-copied .tk-popup__code-copy {
    background: var(--tk-popup-accent);
    color: var(--tk-popup-on-accent);
  }

  .tk-popup__cta-row {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 2px;
  }
  .tk-popup__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 16px 32px;
    border-radius: 100px;
    background: var(--tk-popup-ink);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    border: 0;
    cursor: pointer;
    transition: filter .2s, transform .2s, box-shadow .2s;
  }
  .tk-popup__cta:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(10, 10, 10, 0.28);
  }
  .tk-popup__cta-skip {
    background: none;
    border: 0;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tk-popup-ink-low);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color .2s;
  }
  .tk-popup__cta-skip:hover { color: var(--tk-popup-ink); }

  /* Postupné nasazení obsahu při otevření. `backwards` drží předanimační stav
     (opacity 0) po dobu delaye, takže prvky nebliknou dřív, než na ně dojde. */
  .tk-popup--open .tk-popup__step:not([hidden]) > * {
    animation: tk-popup-rise .5s cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(1) { animation-delay: 0.10s; }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(2) { animation-delay: 0.16s; }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(3) { animation-delay: 0.22s; }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(4) { animation-delay: 0.28s; }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(5) { animation-delay: 0.34s; }
  .tk-popup--open .tk-popup__step:not([hidden]) > *:nth-child(6) { animation-delay: 0.40s; }

  /* ── Teaser ──────────────────────────────────────────────────
     Svislý boční jazyk. `:not([hidden])` je povinné — holé `display: flex` by
     přebilo UA `[hidden] { display: none }` a jazyk by sice seděl mimo obraz na
     translateX(110%), ale jeho rozostřený stín by čouhal zpátky dovnitř. */
  .tk-popup__teaser:not([hidden]) {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) translateX(110%);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 18px 12px;
    background: var(--tk-popup-accent);
    color: var(--tk-popup-on-accent);
    border: none;
    cursor: pointer;
    box-shadow: -10px 10px 28px -8px rgba(10, 10, 10, 0.3);
    font-family: inherit;
    z-index: 9997;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .2s;
    will-change: transform;
  }
  .tk-popup--teaser-right .tk-popup__teaser {
    right: 0;
    border-radius: 14px 0 0 14px;
  }
  .tk-popup--teaser-left .tk-popup__teaser {
    left: 0;
    transform: translateY(-50%) translateX(-110%);
    border-radius: 0 14px 14px 0;
    box-shadow: 10px 10px 28px -8px rgba(10, 10, 10, 0.3);
  }
  .tk-popup__teaser--show {
    transform: translateY(-50%) translateX(0) !important;
  }
  .tk-popup__teaser:hover { filter: brightness(1.05); }

  .tk-popup__teaser-eyebrow {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 13px;
    opacity: 0.75;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .tk-popup__teaser-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--tk-f-display, var(--font-heading--family, inherit));
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.02em;
  }
  .tk-popup__teaser-close {
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.12);
    color: var(--tk-popup-on-accent);
    transition: background .2s;
  }
  .tk-popup__teaser-close:hover { background: rgba(10, 10, 10, 0.22); }

  /* ── Animace ─────────────────────────────────────────────── */
  @keyframes tk-popup-wash-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
    50%      { transform: translate3d(-12%, 14%, 0) scale(1.16); opacity: 1; }
  }
  @keyframes tk-popup-wash-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
    50%      { transform: translate3d(14%, -12%, 0) scale(1.2); opacity: 1; }
  }
  @keyframes tk-popup-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes tk-popup-check {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.18) rotate(0); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
  }
  @keyframes tk-popup-halo {
    0%   { transform: scale(.96); opacity: .85; }
    50%  { transform: scale(1.06); opacity: .5; }
    100% { transform: scale(.96); opacity: .85; }
  }
  @keyframes tk-popup-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Mobil ───────────────────────────────────────────────────
     Karta se přizpůsobí obsahu, ale nikdy nepřeteče viewport. Dvousloupcový
     panel se scvrkne na úzký ink proužek nahoře — brand tam zůstane, ale
     výšku karty určí text a formulář. Fotka i benefity na mobilu padají. */
  @media (max-width: 749px) {
    .tk-popup__card {
      width: calc(100vw - 24px);
      max-width: 480px;
      height: auto;
      max-height: calc(100dvh - 32px);
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      border-radius: 24px;
    }

    .tk-popup__banner { height: 62px; padding: 0 22px; }
    .tk-popup__banner--photo { height: auto; aspect-ratio: 16 / 7; padding: 0; }
    .tk-popup__banner-logo { height: 17px; }
    .tk-popup__banner-wordmark { font-size: 15px; }
    .tk-popup__banner--photo .tk-popup__banner-logo,
    .tk-popup__banner--photo .tk-popup__banner-wordmark { left: 20px; top: 18px; }
    .tk-popup__body {
      padding: 26px 22px max(24px, env(safe-area-inset-bottom));
      gap: 14px;
    }
    .tk-popup__wash { filter: blur(40px); }
    .tk-popup__heading { font-size: clamp(24px, 6.4vw, 29px); }
    .tk-popup__sub { font-size: 15px; line-height: 1.55; }
    .tk-popup__input { padding: 13px 8px 13px 18px; font-size: 16px; }
    .tk-popup__submit { padding: 13px 18px; font-size: 14px; }
    .tk-popup__consent { font-size: 13px; line-height: 1.55; padding-top: 15px; }
    .tk-popup__close { width: 34px; height: 34px; top: 14px; right: 12px; }
    .tk-popup__check { width: 62px; height: 62px; }
    .tk-popup__code { padding: 13px 17px; gap: 12px; }
    .tk-popup__code-value { font-size: 22px; }
    .tk-popup__cta { padding: 14px 28px; }

    /* Teaser kotví přes svh, ať schovávání adresního řádku na iOS nepřepočítává
       `top: 50%` a jazyk neposkakuje. */
    .tk-popup__teaser {
      top: 50svh;
      padding: 14px 10px;
      gap: 8px;
    }
    .tk-popup__teaser-eyebrow { font-size: 13px; }
    .tk-popup__teaser-text { font-size: 13px; }
    .tk-popup__teaser-close { width: 20px; height: 20px; }
  }

  /* Velmi úzké displeje — tlačítko se scvrkne na ikonu, ať zůstane v pilulce
     vedle vstupu i na 320px. */
  @media (max-width: 380px) {
    .tk-popup__submit { padding: 13px 15px; gap: 0; }
    .tk-popup__submit-text { display: none; }
  }

  /* Shopify injektovaný reCAPTCHA odznak — atribuci Googlu pokrývá text
     souhlasu, badge schováváme globálně. */
  .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-popup__card, .tk-popup__backdrop, .tk-popup__teaser, .tk-popup__check { transition: none; animation: none; }
    /* ⚠️ Specificita: lime plochy jsou pod `.tk-popup--open` (0,2,0), takže
       vypínač musí být taky. */
    .tk-popup--open .tk-popup__wash { animation: none; }
    .tk-popup__check::before { animation: none; }
    .tk-popup--open .tk-popup__step:not([hidden]) > * { animation: none; }
  }
/* END_SECTION:tk-popup-newsletter */

/* START_SECTION:tk-quick-finder (INDEX:64) */
.tk-qf { --qf-red: var(--tk-accent, #ff5a00); --qf-ease: cubic-bezier(0.22, 1, 0.36, 1); padding-block: var(--qf-pt, 12px) var(--qf-pb, 12px); position: relative; z-index: 20; }
  .tk-qf__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-qf__card { position: relative; overflow: visible; border-radius: 22px; padding: 48px 32px; background: #15161a; color: #fff; box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.55); }
  .tk-qf--light .tk-qf__card { background: radial-gradient(70% 110% at 78% 40%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #a5bfe1 0%, #c3d6ec 50%, #dde8f5 100%); color: #111; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 18px 44px -30px rgba(15, 23, 42, 0.35); }
  .tk-qf__glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
  .tk-qf__glow::before { content: ""; position: absolute; right: -10%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 0, 0.28), rgba(255, 90, 0, 0) 72%); filter: blur(10px); }
  .tk-qf--light .tk-qf__glow::before { opacity: 0.35; }
  .tk-qf__head { position: relative; margin-bottom: 14px; }
  .tk-qf__heading { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; }
  .tk-qf__sub { margin: 4px 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); }
  .tk-qf--light .tk-qf__sub { color: rgba(0, 0, 0, 0.6); }
  /* Vzor MO: pole s pevnou šířkou, vycentrovaná, tlačítko vedle */
  .tk-qf__row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; align-items: flex-end; }
  .tk-qf__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 1 320px; }
  .tk-qf__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qf-red); }
  .tk-qf__select { position: relative; }
  .tk-qf__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 16px 0 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; text-align: left; transition: border-color 0.25s var(--qf-ease), background 0.25s var(--qf-ease); }
  .tk-qf--light .tk-qf__trigger { background: #fff; border-color: rgba(15, 23, 42, 0.1); }
  .tk-qf__trigger:hover, .tk-qf__select.is-open .tk-qf__trigger { border-color: rgba(255, 90, 0, 0.7); background: rgba(255, 255, 255, 0.1); }
  .tk-qf--light .tk-qf__trigger:hover, .tk-qf--light .tk-qf__select.is-open .tk-qf__trigger { background: #fff; }
  .tk-qf__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk-qf__value--placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 500; }
  .tk-qf--light .tk-qf__value--placeholder { color: rgba(0, 0, 0, 0.45); }
  .tk-qf__caret { flex: none; width: 16px; height: 16px; opacity: 0.7; transition: transform 0.3s var(--qf-ease); }
  .tk-qf__select.is-open .tk-qf__caret { transform: rotate(180deg); }
  .tk-qf__dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; padding: 8px; border-radius: 14px; background: #fff; color: #111; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45); }
  .tk-qf__search { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; margin-bottom: 6px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.1); font: inherit; font-size: 0.92rem; outline: none; }
  .tk-qf__search:focus { border-color: var(--qf-red); }
  .tk-qf__options { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
  .tk-qf__option { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 0.95rem; font-weight: 500; color: #111; cursor: pointer; }
  /* `display: block` výše přebíjí [hidden] z UA stylu — bez tohohle řádku by se skryté
     volby (filtr podle řady i fulltext) dál zobrazovaly. */
  .tk-qf__option[hidden] { display: none; }
  .tk-qf__option:hover, .tk-qf__option.is-active { background: rgba(0, 0, 0, 0.05); }
  .tk-qf__option.is-selected { color: var(--qf-red); font-weight: 700; }
  .tk-qf__empty { padding: 10px 12px; font-size: 0.9rem; color: rgba(0, 0, 0, 0.5); }
  .tk-qf__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 12px; background: var(--cta-bg, #ff5a00); color: var(--cta-fg, #fff); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.3s var(--qf-ease), color 0.3s var(--qf-ease), transform 0.3s var(--qf-ease), box-shadow 0.3s var(--qf-ease); box-shadow: 0 12px 28px -14px rgba(255, 90, 0, 0.7); }
  .tk-qf__btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--qf-ease); }
  /* Hover podle „Barevné schéma CTA tlačítka" (default Spigen oranžová): černá výplň,
     bílý text — stejně jako CTA v bannerech a na detailu produktu. */
  .tk-qf__btn:hover { background: var(--cta-bg-hover, #111); color: var(--cta-fg-hover, #fff); transform: translateY(-1px); }
  .tk-qf__btn:hover svg { transform: translateX(3px); }
  @media (max-width: 989px) { .tk-qf__card { padding: 32px 22px; } .tk-qf__field { flex: 1 1 260px; } .tk-qf__btn { flex: 1 1 100%; } }
  @media (max-width: 749px) { .tk-qf__card { padding: 22px 16px; border-radius: 16px; } .tk-qf__field { flex: 1 1 100%; } .tk-qf__trigger, .tk-qf__btn { height: 50px; } }
  @media (prefers-reduced-motion: reduce) { .tk-qf__trigger, .tk-qf__btn, .tk-qf__caret { transition: none; } }
/* END_SECTION:tk-quick-finder */

/* START_SECTION:tk-reviews-home (INDEX:65) */
.tk-rh { --rh-red: var(--tk-accent, #ff5a00); --rh-ease: cubic-bezier(0.22, 1, 0.36, 1); padding-block: var(--rh-pt, 64px) var(--rh-pb, 64px); }
  .tk-rh__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-rh__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 32px; }
  .tk-rh__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rh-red); }
  .tk-rh__eyebrow span { width: 22px; height: 1px; background: currentColor; }
  .tk-rh__heading { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
  .tk-rh__sub { margin: 10px 0 0; font-size: 1rem; line-height: 1.55; color: rgba(0, 0, 0, 0.6); max-width: 52ch; }
  .tk-rh__summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.25); }
  .tk-rh__summary-num { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .tk-rh__summary-meta { display: flex; flex-direction: column; gap: 4px; }
  .tk-rh__summary-meta small { font-size: 0.8125rem; color: rgba(0, 0, 0, 0.72); }
  .tk-rh__stars { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 0.1em; line-height: 1; color: rgba(0, 0, 0, 0.14); white-space: nowrap; }
  .tk-rh__stars i { position: absolute; inset: 0; width: var(--rh-fill, 100%); overflow: hidden; font-style: normal; color: var(--rh-red); }
  .tk-rh__stars--lg { font-size: 1.15rem; }
  .tk-rh__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tk-rh__card { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -22px rgba(15, 23, 42, 0.35); transition: transform 0.4s var(--rh-ease), box-shadow 0.4s var(--rh-ease); }
  .tk-rh__card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 22px 44px -22px rgba(15, 23, 42, 0.35); }
  .tk-rh__card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tk-rh__verified { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: #1a7f37; }
  .tk-rh__verified svg { width: 13px; height: 13px; }
  .tk-rh__card-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
  .tk-rh__card-text { margin: 0; font-size: 0.95rem; line-height: 1.65; color: rgba(0, 0, 0, 0.7); flex: 1; }
  .tk-rh__card-foot { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
  .tk-rh__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-weight: 700; font-size: 0.95rem; }
  .tk-rh__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.86rem; }
  .tk-rh__who strong { font-weight: 600; }
  .tk-rh__who a, .tk-rh__who span { color: rgba(0, 0, 0, 0.55); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk-rh__who a:hover { color: var(--rh-red); }
  .tk-rh__date { margin-left: auto; font-size: 0.8125rem; color: rgba(0, 0, 0, 0.72); white-space: nowrap; }
  .tk-rh__empty { text-align: center; padding: 44px 24px; border: 1px dashed rgba(0, 0, 0, 0.14); border-radius: 22px; background: #fff; }
  .tk-rh__empty-stars { font-size: 1.2rem; letter-spacing: 0.25em; color: rgba(0, 0, 0, 0.16); margin-bottom: 12px; }
  .tk-rh__empty-title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
  .tk-rh__empty-text { margin: 0 auto; max-width: 56ch; font-size: 0.95rem; line-height: 1.6; color: rgba(0, 0, 0, 0.6); }
  .tk-rh__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 0.88rem; font-weight: 600; color: #111; }
  .tk-rh__facts li { display: inline-flex; align-items: center; gap: 8px; }
  .tk-rh__facts svg { width: 20px; height: 20px; color: var(--rh-red); }
  .tk-rh__cta { display: flex; justify-content: center; margin-top: 28px; }
  .tk-rh__btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; background: var(--color-primary-button-background, #ff5a00); color: var(--color-primary-button-text, #fff); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: background 0.3s var(--rh-ease), transform 0.3s var(--rh-ease); }
  .tk-rh__btn:hover { background: var(--color-primary-button-hover-background, #111); color: var(--color-primary-button-hover-text, #fff); transform: translateY(-1px); }
  @media (max-width: 989px) { .tk-rh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 749px) { .tk-rh { padding-block: 44px; } .tk-rh__grid { grid-template-columns: 1fr; gap: 14px; } .tk-rh__head { margin-bottom: 22px; } .tk-rh__card { padding: 20px; } }
  @media (prefers-reduced-motion: reduce) { .tk-rh__card, .tk-rh__btn { transition: none; } }
/* END_SECTION:tk-reviews-home */

/* START_SECTION:tk-reviews (INDEX:67) */
.tk-reviews { padding-block: var(--tkr-pt, 40px) var(--tkr-pb, 16px); scroll-margin-top: 140px; }
  .tk-reviews__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-reviews__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 20px; }
  .tk-reviews__heading { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .tk-reviews__summary { margin: 0; font-size: 0.95rem; color: rgba(0, 0, 0, 0.6); }
  .tk-reviews__stars { color: #ff5a00; letter-spacing: 0.08em; }
  .tk-reviews .reviews-tab { padding: 0; }
/* END_SECTION:tk-reviews */

/* START_SECTION:tk-shop-by-category (INDEX:68) */
.tk-sbc { --sbc-accent: var(--tk-accent, #ff5a00); --sbc-ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--color-background); color: var(--color-foreground); }
  .tk-sbc__inner { max-width: var(--page-width, 1400px); margin-inline: auto; padding-inline: var(--page-margin, 20px); }
  .tk-sbc__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
  .tk-sbc__eyebrow { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sbc-accent); }
  .tk-sbc__heading { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .tk-sbc__sub { margin: 6px 0 0; font-size: 0.95rem; color: rgb(var(--color-foreground-rgb) / 0.62); }
  .tk-sbc__more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--color-primary-button-border, #ff5a00); border-radius: 999px; font-size: 0.85rem; font-weight: 700; background: var(--color-primary-button-background, #ff5a00); color: var(--color-primary-button-text, #fff); text-decoration: none; white-space: nowrap; transition: border-color 0.3s var(--sbc-ease), color 0.3s var(--sbc-ease), transform 0.3s var(--sbc-ease); }
  .tk-sbc__more:hover { background: var(--color-primary-button-hover-background, #111); border-color: var(--color-primary-button-hover-border, #111); color: var(--color-primary-button-hover-text, #fff); transform: translateX(2px); }

  .tk-sbc__grid { display: grid; grid-template-columns: repeat(var(--sbc-cols-m, 2), minmax(0, 1fr)); gap: 12px; }
  .tk-sbc__tile { position: relative; display: block; text-decoration: none; color: inherit; isolation: isolate; border-radius: 18px; overflow: hidden; transition: transform 0.5s var(--sbc-ease), box-shadow 0.5s var(--sbc-ease); }
  .tk-sbc__tile:hover { transform: translateY(-3px); }
  .tk-sbc__tile:focus-visible { outline: 2px solid var(--sbc-accent); outline-offset: 2px; }
  .tk-sbc__media { position: relative; overflow: hidden; }
  .tk-sbc__img { display: block; width: 100%; height: 100%; transition: transform 0.6s var(--sbc-ease); }
  .tk-sbc__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, rgb(var(--color-foreground-rgb) / 0.1), rgb(var(--color-foreground-rgb) / 0.03)); }
  .tk-sbc__badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: var(--sbc-accent); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .tk-sbc__content { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tk-sbc__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .tk-sbc__label { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
  .tk-sbc__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 0.45em; border-radius: 99px; font-size: 0.8125rem; font-weight: 700; }
  .tk-sbc__tagline { font-size: 0.82rem; line-height: 1.35; opacity: 0.75; }
  .tk-sbc__arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; transition: background 0.3s var(--sbc-ease), color 0.3s var(--sbc-ease), transform 0.3s var(--sbc-ease); }
  .tk-sbc__tile:hover .tk-sbc__img { transform: scale(1.05); }
  .tk-sbc__tile:hover .tk-sbc__arrow { background: var(--sbc-accent); color: #fff; transform: translateX(3px); }

  /* photo: fotka s tmavým přechodem, popisek přes fotku */
  .tk-sbc--photo .tk-sbc__media { aspect-ratio: 16 / 10; background: #111; }
  .tk-sbc--photo .tk-sbc__img { object-fit: cover; }
  .tk-sbc--photo .tk-sbc__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.28) 40%, transparent 65%); transition: background 0.3s var(--sbc-ease); }
  .tk-sbc--photo .tk-sbc__tile:hover .tk-sbc__scrim { background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.38) 44%, transparent 68%); }
  .tk-sbc--photo .tk-sbc__content { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 16px 16px 18px; color: #fff; }
  .tk-sbc--photo .tk-sbc__label { font-size: 1.35rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
  .tk-sbc--photo .tk-sbc__count { background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
  .tk-sbc--photo .tk-sbc__arrow { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); color: #fff; }
  .tk-sbc--photo .tk-sbc__tile { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  .tk-sbc--photo .tk-sbc__tile:hover { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35); }

  /* gear: světlá dlaždice, produkt contain, popisek pod fotkou */
  .tk-sbc--gear .tk-sbc__tile { background: #f6f7f9; border: 1px solid rgba(0, 0, 0, 0.05); padding: 14px 14px 12px; }
  .tk-sbc--gear .tk-sbc__tile:hover { background: #fff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.25); }
  .tk-sbc--gear .tk-sbc__media { aspect-ratio: 1 / 1; border-radius: 12px; }
  .tk-sbc--gear .tk-sbc__img { object-fit: contain; padding: 8%; box-sizing: border-box; mix-blend-mode: multiply; }
  .tk-sbc--gear .tk-sbc__content { margin-top: 10px; }
  .tk-sbc--gear .tk-sbc__label { font-size: 0.98rem; }
  .tk-sbc--gear .tk-sbc__count { background: rgb(var(--color-foreground-rgb) / 0.08); }
  .tk-sbc--gear .tk-sbc__arrow { width: 30px; height: 30px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); color: var(--color-foreground); }

  /* sbc: spigen.com „Shop by Category" — šedá karta 16:9, popisek vlevo, fotka vpravo (50 %), ořez ukotvený k produktu */
  .tk-sbc--sbc .tk-sbc__header { margin-bottom: 20px; }
  /* Spigen: shodné s nadpisy produktových sekcí (Nejprodávanější, Akce a výprodej): 36px / 700 / -0.02em */
  .tk-sbc--sbc .tk-sbc__heading { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .tk-sbc--sbc .tk-sbc__grid { gap: 12px; }
  .tk-sbc--sbc .tk-sbc__tile { position: relative; display: flex; align-items: center; aspect-ratio: 16 / 9; background: #f6f6f6; border-radius: 16px; color: #111; overflow: hidden; box-shadow: none; transition: background 0.3s var(--sbc-ease), transform 0.4s var(--sbc-ease); }
  .tk-sbc--sbc .tk-sbc__tile:hover { background: #efefef; transform: none; box-shadow: none; }
  /* Fotka: zóna 56 % šířky karty, v klidu posunutá doprava o 6 % karty (= 10.7 % vlastní šířky), takže její levá
     hrana sedí na 50 %; na hover se posune na 0 → fotka plynule „vyjede" doleva. Jen transform = žádný přepočet
     ořezu, žádné trhnutí. Levý okraj zóny je změkčený maskou, aby nikdy nepřekryl popisek (ten je navíc nad ní). */
  .tk-sbc--sbc .tk-sbc__media { position: absolute; inset-block: 0; right: 0; left: auto; width: 56%; aspect-ratio: auto; background: transparent; overflow: hidden; z-index: 1;
    transform: translateX(10.7%); transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 26px); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 26px); }
  .tk-sbc--sbc .tk-sbc__img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transform: none; transition: none; }
  .tk-sbc--sbc .tk-sbc__tile:hover .tk-sbc__media { transform: translateX(0); }
  .tk-sbc--sbc .tk-sbc__tile:hover .tk-sbc__img { transform: none; }
  .tk-sbc--sbc .tk-sbc__content { z-index: 2; }
  @media (prefers-reduced-motion: reduce) { .tk-sbc--sbc .tk-sbc__media { transition: none; } }
  .tk-sbc--sbc .tk-sbc__placeholder { background: transparent; }
  .tk-sbc--sbc .tk-sbc__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 0 0 clamp(14px, 1.8vw, 28px); pointer-events: none; }
  /* Spigen: sjednoceno s dlaždicemi „Nakupujte podle typu" a kartami — tučné 700, 15–16 px */
  .tk-sbc--sbc .tk-sbc__label { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
  .tk-sbc--sbc .tk-sbc__tagline { display: none; }
  .tk-sbc--sbc .tk-sbc__arrow { display: none; }
  .tk-sbc--sbc .tk-sbc__badge { left: auto; right: 10px; top: 10px; }

  @media screen and (min-width: 750px) {
    .tk-sbc__header { margin-bottom: 28px; }
    .tk-sbc__grid { grid-template-columns: repeat(var(--sbc-cols, 4), minmax(0, 1fr)); gap: 16px; }
    .tk-sbc--photo .tk-sbc__media { aspect-ratio: 4 / 3; }
    .tk-sbc--photo .tk-sbc__content { padding: 20px 20px 22px; }
    .tk-sbc--photo .tk-sbc__label { font-size: 1.5rem; }
  }
  @media screen and (max-width: 749px) { .tk-sbc--sbc .tk-sbc__label { font-size: 0.9375rem; font-weight: 700; } .tk-sbc--sbc .tk-sbc__grid { gap: 10px; } }
  @media (prefers-reduced-motion: reduce) { .tk-sbc__tile, .tk-sbc__img, .tk-sbc__arrow, .tk-sbc__scrim, .tk-sbc__more { transition: none; } }
/* END_SECTION:tk-shop-by-category */

/* START_SECTION:tk-upsell-cards (INDEX:70) */
product-recommendations.tk-upc-recos { display: block; }
  .tk-upc-recos.hidden { display: none; }

  .tk-upc-peritem__label {
    font-size: 0.82rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    margin: 18px 0 8px;
  }
  .tk-upc-peritem__label strong { color: var(--color-foreground); font-weight: 600; }
  .tk-upc-peritem__label:first-of-type { margin-top: 4px; }

  .tk-upc-skeleton-row { display: flex; gap: 12px; overflow: hidden; }
  .tk-upc-skeleton-item {
    flex: 0 0 calc((100% - 4 * 12px) / 4.4);
    aspect-ratio: 3 / 4;
    border-radius: var(--style-border-radius-card, 10px);
    background: linear-gradient(90deg, #f0f0f1 25%, #e7e7ea 37%, #f0f0f1 63%);
    background-size: 200% 100%;
    animation: tk-upc-shimmer 1.4s ease infinite;
  }
  @media (max-width: 749px) { .tk-upc-skeleton-item { flex-basis: calc((100% - 2 * 12px) / 2.2); } }
  @keyframes tk-upc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .tk-upc-skeleton-item { animation: none; } }
/* END_SECTION:tk-upsell-cards */

/* START_SECTION:tk-wishlist (INDEX:76) */
.tk-wishlist {
    width: 100%;
    padding: 0 1.5rem;
  }

  .tk-wishlist__inner {
    max-width: var(--narrow-page-width);
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .tk-wishlist__title {
    font-size: var(--font-size--3xl, 28px);
    font-weight: 600;
    margin: 0 0 2rem;
  }

  /* --- Grid --- */
  .tk-wishlist__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  /* Karty jsou <li class="product-grid__item"> v div gridu → bez odrážky */
  .tk-wishlist__grid > li,
  .tk-wishlist__grid > .product-grid__item {
    list-style: none;
    margin: 0;
  }

  /* --- Loading spinner + text (jako compare), rezervuje výšku (min-height) --- */
  .tk-wishlist__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    padding: 40px 20px;
    text-align: center;
    color: var(--color-foreground-secondary, #666);
  }
  /* ⚠️ display:flex výše přebíjí UA [hidden]{display:none} (autor > UA) → bez tohohle
     se loader vizuálně nikdy neschoval, i když JS nastavil hidden=true (kolečko se
     točilo dál i po načtení produktů). */
  .tk-wishlist__loading[hidden] { display: none; }
  .tk-wishlist__loading p { margin: 0; }
  .tk-wishlist__spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e5e5e5;
    border-top-color: #ff5a00;
    border-radius: 50%;
    animation: tk-wishlist-spin 0.8s linear infinite;
    margin: 0 auto 12px;
  }
  @keyframes tk-wishlist-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-wishlist__spinner { animation: none; }
  }

  @media screen and (max-width: 1399px) {
    .tk-wishlist__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @media screen and (max-width: 1099px) {
    .tk-wishlist__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (max-width: 799px) {
    .tk-wishlist__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media screen and (max-width: 549px) {
    .tk-wishlist__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .tk-wishlist__inner {
      padding-top: 2rem;
      padding-bottom: 3rem;
    }
    .tk-wishlist__title {
      font-size: var(--font-size--2xl, 22px);
      margin-bottom: 1.5rem;
    }
  }

  /* --- Card --- */
  .tk-wishlist__card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  }

  .tk-wishlist__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  }

  .tk-wishlist__card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }

  .tk-wishlist__card-media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f5f5f5;
  }

  .tk-wishlist__card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    display: block;
    transition: transform 0.3s ease;
  }

  .tk-wishlist__card:hover .tk-wishlist__card-img {
    transform: scale(1.03);
  }

  .tk-wishlist__card-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  .tk-wishlist__card-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .tk-wishlist__card-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tk-wishlist__card-variant {
    font-size: 13px;
    color: var(--color-foreground-secondary, #666);
    line-height: 1.3;
  }

  .tk-wishlist__card-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-foreground, #111);
  }

  /* TK: slevová cena ve wishlistu (přeškrtnutá compare-at + sleva %) */
  .tk-wishlist__card-price--sale {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tk-wishlist__price-compare {
    font-size: 13px;
    font-weight: 400;
    color: var(--tk-price-compare-color, #3f4652);
  }
  .tk-wishlist__price-now {
    color: #E23A2E;
  }
  .tk-wishlist__price-discount {
    padding: 1px 6px;
    border-radius: 5px;
    background: #E23A2E;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
  }

  /* TK: hodnocení (Judge.me) ve wishlistu */
  .tk-wishlist__card-rating {
    font-size: 13px;
    color: #f5a623;
    font-weight: 600;
    line-height: 1.2;
  }

  /* Badge overlay ve wishlist kartě (reuse .product-badges absolutní pozice) */
  .tk-wishlist__card-media .product-badges { z-index: 2; }

  /* --- Remove button --- */
  .tk-wishlist__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
  }

  .tk-wishlist__card:hover .tk-wishlist__remove {
    opacity: 1;
    pointer-events: auto;
  }

  /* Always show on touch */
  @media (hover: none) {
    .tk-wishlist__remove {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .tk-wishlist__remove:hover {
    background: #fff;
    color: #ff5a00;
  }

  /* --- Empty state --- */
  .tk-wishlist__empty {
    text-align: center;
    padding: 80px 20px;
  }

  .tk-wishlist__empty-icon {
    opacity: 0.2;
    margin-bottom: 20px;
  }

  .tk-wishlist__empty-text {
    color: var(--color-foreground-secondary, #666);
    font-size: var(--font-size--md, 16px);
    margin: 0 0 24px;
  }

  /* TK: stejny recept jako PDP ATC (radius 8px, 0.92rem/650, dark+lime hover lift) */
  .button.tk-wishlist__empty-btn {
    display: inline-flex;
    border-radius: var(--qty-radius, 8px);
    font-size: 0.92rem;
    font-weight: 650;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .button.tk-wishlist__empty-btn:hover {
    --button-background-color: #0a0a0a;
    --button-color: #ff5a00;
    box-shadow: 0 5px 14px rgba(10, 10, 10, 0.2);
  }

  .button.tk-wishlist__empty-btn:active {
    transform: translateY(0);
  }
/* END_SECTION:tk-wishlist */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:78) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }

  /* Spigen: text v roletkách (Certifikováno, doprava…) zarovnaný do bloku */
  .details-content .text-block {
    --text-align: justify;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }
  .details-content .text-block p {
    text-align: justify;
    text-align-last: left;
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:79) */
.text-block {
    width: var(--width);
    max-width: 100%;
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:80) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  .blog-post-item:first-child .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-item:first-child .blog-post-card__image-container {
    width: 70%;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content {
    padding-inline-start: var(--columns-gap);
    width: 30%;

    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
      width: 100%;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:81) */
.blog-post-content {
    max-width: var(--tk-blog-read-width, 47rem);
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb) / 0.92);
  }

  /* Lead — first paragraph reads slightly larger for editorial rhythm */
  .blog-post-content > rte-formatter > p:first-of-type {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-foreground);
  }

  /* Links */
  .blog-post-content a:not(.button) {
    color: var(--color-foreground);
    text-decoration: underline;
    text-decoration-color: rgb(255 90 0 / 0.9);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s ease, background 0.18s ease;
  }
  .blog-post-content a:not(.button):hover {
    text-decoration-color: #d94c00;
    background: rgb(255 90 0 / 0.12);
  }

  /* Blockquote — editorial pull quote */
  .blog-post-content blockquote {
    margin: 1.8em 0;
    padding: 0.25em 0 0.25em 1.4em;
    border-inline-start: 3px solid var(--tk-blog-post-accent, #ff5a00);
    font-size: 1.15rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--color-foreground);
  }
  .blog-post-content blockquote p { margin: 0.4em 0; }

  /* Lists */
  .blog-post-content :is(ul, ol) {
    padding-inline-start: 1.4em;
  }
  .blog-post-content li {
    margin-block: 0.4em;
    padding-inline-start: 0.25em;
  }
  .blog-post-content ul li::marker {
    color: var(--tk-blog-post-accent, #ff5a00);
  }

  /* Horizontal rule */
  .blog-post-content hr {
    margin: 2.4em auto;
    width: 64px;
    height: 0;
    border: 0;
    border-block-start: 2px solid rgb(var(--color-foreground-rgb) / 0.18);
  }

  /* Override inline font-family from pasted content (Word / Google Docs leak) so the article uses the theme font.
     Excludes monospace tags so <code>/<pre> still render in their default monospace stack. */
  .blog-post-content :where(p, h1, h2, h3, h4, h5, h6, li, span, a, em, strong, b, i, u, blockquote, figcaption, td, th, div, label, small) {
    font-family: inherit !important;
  }

  /* Headings — editorial, display font with lime accents
     (font-family !important to beat the pasted-content strip rule above) */
  .blog-post-content :is(h2, h3, h4) {
    font-family: var(--tk-f-display, var(--font-h1--family, inherit)) !important;
    margin-block-start: 2em;
    margin-block-end: 0.6em;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    text-wrap: balance;
  }

  /* H2 — section heading with a short lime underline accent */
  .blog-post-content h2 {
    position: relative;
    font-size: clamp(1.45rem, 3vw, 1.8rem);
    font-weight: 800;
    padding-block-end: 0.55rem;
  }
  .blog-post-content h2::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 2.4rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tk-blog-post-accent, #ff5a00), #d94c00);
  }

  /* H3 — lime square bullet marker before the text */
  .blog-post-content h3 {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: clamp(1.18rem, 2.2vw, 1.38rem);
    font-weight: 700;
  }
  .blog-post-content h3::before {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--tk-blog-post-accent, #ff5a00);
    transform: translateY(-0.08em);
  }

  .blog-post-content h4 {
    font-size: 1.08rem;
    font-weight: 700;
    color: rgb(var(--color-foreground-rgb) / 0.82);
  }

  .blog-post-content :is(p, ul, ol) {
    margin-block: 1em;
  }

  .blog-post-content img {
    border-radius: 14px;
    margin-block: 1.25em;
  }

  .blog-post-content::after {
    content: '';
    display: table;
    clear: both;
  }

  @media (max-width: 749px) {
    .blog-post-content {
      font-size: 1rem;
      line-height: 1.65;
    }

    .blog-post-content > rte-formatter > p:first-of-type {
      font-size: 1.06rem;
    }

    .blog-post-content blockquote {
      font-size: 1.05rem;
    }

    .blog-post-content h2 { font-size: 1.25rem; }
    .blog-post-content h3 { font-size: 1.1rem; }
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:82) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:83) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 65vh;
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }

    .blog-post-featured-image__image {
      max-height: 45vh;
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:84) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:85) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_cart-products (INDEX:86) */
.cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-sm);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:87) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* „K uhrade" total ma vic vzduchu nad sebou (oddeleny od sleveho pole) — jen na /cart
     strance; .cart__total-container je sdilena s cart drawerem, proto scope na .cart-page. */
  .cart-page .cart__total-container {
    margin-block-start: var(--margin-md);
  }

  .cart__summary-item.tax-note {
    font-size: var(--cart-font-size--sm);
  }

  .cart__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart__summary-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-lg);
    container-type: inline-size;
    padding: var(--padding-xl);
    position: sticky;
    top: var(--margin-lg);
    align-self: start;
    /* #f6f7f9 = scheme-2 background (stejna jemna seda jako karty polozek / zbytek webu) */
    background: #f6f7f9;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.07);
    border-radius: var(--style-border-radius-lg);
    box-shadow: 0 1px 2px rgb(var(--color-foreground-rgb) / 0.04), 0 20px 44px -22px rgb(var(--color-foreground-rgb) / 0.2);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xl);
      grid-row: 1 / -1;
      /* Zarovnat vršek karty s prvním produktem (ne s dopravní lištou, která je
         nad ním). grid-row:2/-1 posadí kartu na úroveň .cart-page__items (= lišta);
         odsazení ji spustí o výšku lišty níž, na první produkt. */
      margin-block-start: 5.75rem;
      /* ⚠️ Když je souhrn VYŠŠÍ než viewport (nižší notebooky: slevové pole + totaly
         + Zaplatit + ~3 expresní tlačítka Shop Pay/GPay), připnutý sticky element NEJDE
         doscrollovat PAGE scrollem (drží se nahoře) → spodní CTA nedosažitelné = to je
         ten "ořezává se". Proto cap na výšku viewportu (klíčováno na ŽIVÝ offset
         --tk-cart-sticky-top) + vnitřní scroll s VIDITELNÝM scrollbarem (aby ho user našel).
         Na velkých obrazovkách se karta vejde → žádný scroll. */
      max-height: calc(100dvh - var(--tk-cart-sticky-top, 196px) - var(--margin-lg));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgb(var(--color-foreground-rgb) / 0.35) transparent;
    }
  }

  .cart__summary-inner::-webkit-scrollbar {
    width: 8px;
  }

  .cart__summary-inner::-webkit-scrollbar-thumb {
    background: rgb(var(--color-foreground-rgb) / 0.3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  /* ⚠️ Header je .tk-header (mo→tk rename), NE .header — starý selektor nikdy nematchoval.
     Sticky offset = živě naměřený spodní okraj hlavičky přes JS var --tk-cart-sticky-top
     (assets/tk-cart-sticky.js, mirror tk-globo-filter stickyHeaderBottom). CSS fallback =
     --header-height (.tk-header ~150px) + živá --tk-announce-height (announcement lišta) +
     --margin-lg. NEpoužívat frozen --header-group-height (critical.js ho píše jen jednou,
     header.js ResizeObserver ho přepočítá ale zahazoval → drift). Když je karta vyšší
     než viewport, scrolluje se vnitřně (max-height výše) — page scroll připnutou kartu
     neodkryje. */
  #header-group:has(.tk-header[sticky]) ~ .content-for-layout .cart__summary-inner {
    top: var(--tk-cart-sticky-top, calc(var(--header-height, 0px) + var(--tk-announce-height, 0px) + var(--margin-lg)));
  }

  .cart__summary-container {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart__summary-container:not(.cart__container--extend),
  .cart__summary-container:not(.cart__container--extend) .cart__summary-inner {
    height: auto;
  }

  .cart__container--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart__container--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart__container--extend .cart__summary-inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart__summary-inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TK REDESIGN /cart (2026-08-28) — KARTA SOUHRNU
     Položky jsou nově vzdušný bílý seznam (viz `snippets/cart-products.liquid`),
     takže souhrn je JEDINÁ plocha na stránce = nese hierarchii. Bílý podklad +
     výraznější rámeček + měkký stín, ne šedá výplň (ta by teď splývala s ničím).
     ⚠️ `.cart__total-*`, `.cart__checkout-button`, `.cart-actions` a `.tax-note`
     jsou sdílené s cart drawerem → VŽDY scopovat na `.cart-page`.
     ═══════════════════════════════════════════════════════════════════════════ */
  .cart-page .cart__summary-inner {
    align-items: stretch;
    gap: var(--gap-lg);
    background: #fff;
    border: 1px solid rgb(15 23 42 / 0.1);
    border-radius: 18px;
    box-shadow:
      0 1px 2px rgb(15 23 42 / 0.04),
      0 24px 48px -28px rgb(15 23 42 / 0.28);
  }

  @media screen and (min-width: 750px) {
    .cart-page .cart__summary-inner {
      padding: var(--padding-xl);
    }
  }

  /* Slevový kód / poznámka — jemnější linky, míň „formulářové" */
  .cart-page .cart-actions {
    gap: var(--gap-2xs);
    border-block-color: rgb(15 23 42 / 0.09);
    padding-block: var(--padding-md);
  }

  .cart-page .cart-actions__divider {
    border-block-start-color: rgb(15 23 42 / 0.09);
  }

  .cart-page .cart-discount__input {
    border-radius: 10px;
  }

  .cart-page .cart-discount__button {
    border-radius: 10px;
  }

  /* Mezisoučet / řádky slev */
  .cart-page .cart__summary-item {
    font-size: 0.85rem;
    color: rgb(15 23 42 / 0.7);
  }

  .cart-page .cart__discount-value,
  .cart-page .cart__original-total-value {
    font-variant-numeric: tabular-nums;
  }

  /* „K úhradě" — tichý štítek, hlasitá částka */
  .cart-page .cart__total {
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .cart-page .cart__total-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(15 23 42 / 0.55);
  }

  .cart-page .cart__total-value {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }

  .cart-page .cart__summary-item.tax-note,
  .cart-page .cart__tax-note {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(15 23 42 / 0.5);
  }

  /* CTA — plná šířka, vyšší, výraznější */
  .cart-page .cart__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    width: 100%;
  }

  .cart-page .cart__checkout-button {
    width: 100%;
    min-height: 3.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .cart-page .additional-checkout-buttons {
    width: 100%;
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:88) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-title .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:91) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:93) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

    &[aria-current='true'] {
      opacity: 1;
    }

    .text-block {
      display: inline-block;
    }

    @media (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:97) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--gap);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: var(--layer-flat);
    pointer-events: none;
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    height: 100%;

    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      flex-shrink: 0;
      height: auto;
    }
  }

  @media (max-width: 768px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    gap: var(--gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:98) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product (INDEX:102) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .featured-product-content-bottom:not(:has(product-swatches)) {
    display: none;
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:103) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:104) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:105) */
.menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  header-menu {
    width: 100%;
  }

  /* Drawer menu featured content */
  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /*
      High specificity selectors to subdue non-hovered links without javascript.
      If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
    */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0 var(--menu-horizontal-gap);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

  /* Make overflow menu scrollable when content exceeds viewport */
  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      --submenu-content-opacity: 0;

      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      opacity: var(--submenu-content-opacity);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);

      .menu-list__submenu-inner {
        padding-block-start: 0;
        grid-column: unset;
      }
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;
    transition: color var(--animation-speed) var(--animation-easing);

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--menu-top-level-font-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:107) */
image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:110) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-buy-section (INDEX:113) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-buy-section > .group-block {
      padding-inline: 0;
    }
  }

  /* Container styles */
  .product-buy-section {
    display: flex;
    flex-wrap: wrap;
    align-self: start;
    justify-content: center;
  }

  /* TK „Často kupováno spolu" panel — bílá karta zarovnaná s buy box kartami
     (padding 20 / radius 12 / bílá) šířkou i vzhledem. Přímý child je buď
     .tk-upsell--pdp-panel (manuál) nebo <tk-upsell-recos> (AI fallback host). */
  .product-buy-section > .tk-upsell--pdp-panel,
  .product-buy-section > tk-upsell-recos {
    box-sizing: border-box;
    position: relative;
    flex: 0 0 auto;
    width: calc(100% - 24px);
    margin: 12px auto 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--color-background, #fff);
  }
  .tk-upsell--pdp-panel .tk-upsell__heading {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 12px;
  }
  .tk-upsell--pdp-panel .tk-upsell__list {
    gap: 0;
    /* bleed 10px do paddingu panelu → hover highlight širší (jako buy box),
       s drobným paddingem od kraje. Na listu (ne na kartách) → karty ho vyplní
       bez vodorovného přetečení. */
    margin-inline: -10px;
  }
  /* 5+ produktů (jen manuál) → scroll, max 3.5 karty (peek 4.); karta ~82px →
     3*82 + půl karty ~41 = 287px. ≤4 produkty → bez scrollu, zobrazí všechny.
     ELEGANT: scrollbar SKRYTÝ + fade gradient (mask) na okrajích podle pozice
     scrollu (data-tk-scroll: top/mid/end) → spodní karta se rozpustí = „je toho víc". */
  .tk-upsell--pdp-panel .tk-upsell__list--scroll {
    max-height: 287px;
    overflow: hidden auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  }
  .tk-upsell--pdp-panel .tk-upsell__list--scroll::-webkit-scrollbar { width: 0; height: 0; }
  .tk-upsell--pdp-panel .tk-upsell__list--scroll[data-tk-scroll='mid'] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  }
  .tk-upsell--pdp-panel .tk-upsell__list--scroll[data-tk-scroll='end'] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px);
    mask-image: linear-gradient(to bottom, transparent, #000 30px);
  }
  /* KLIKATELNÁ šipka dolů ve fade zóně — signalizuje „scrolluj pro víc" +
     klik = odscrollovat. Jemný bounce, mizí na konci scrollu. Injektuje JS. */
  .tk-upsell__scroll-arrow {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.25s ease, color 0.15s ease;
    animation: tk-upc-arrow-bounce 1.5s ease-in-out infinite;
  }
  .tk-upsell__scroll-arrow:hover { color: var(--color-primary, #7b2d8e); }
  .tk-upsell__scroll-arrow svg { width: 16px; height: 16px; }
  .product-buy-section > .tk-upsell--pdp-panel:has(.tk-upsell__list--scroll[data-tk-scroll='end']) .tk-upsell__scroll-arrow {
    opacity: 0;
    pointer-events: none;
  }
  @keyframes tk-upc-arrow-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-upsell__scroll-arrow { animation: none; }
  }

  /* Větší slevová badge (default price-discount-badge je moc malá) */
  .tk-upsell--pdp-panel .price-discount-badge,
  .tk-upsell--pdp-single .price-discount-badge {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
  }

  /* JEDEN doporučený produkt z metafieldu v buy boxu (mezi cenou/košíkem a accordiony).
     Neutrální bílá karta (žádná lime) — nepřebíjí zbytek stránky. */
  .product-buy-section .tk-upsell--pdp-single {
    box-sizing: border-box;
    width: 100%;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--color-background, #fff);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    box-shadow: 0 1px 3px rgb(var(--color-foreground-rgb) / 0.06);
  }
  .tk-upsell--pdp-single .tk-upsell__heading {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 9px;
  }
  .tk-upsell--pdp-single .tk-upsell__list {
    gap: 0;
  }
  /* menší text názvu produktu → vejde se víc (3 řádky). (0,3,0) přebije base --add. */
  .tk-upsell--pdp-single .tk-upsell-card--add .tk-upsell-card__title {
    font-size: 0.8125rem;
    line-height: 1.3;
    -webkit-line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-buy-section > .group-block {
      height: min-content;
    }
  }

  /* Výška ovládacích prvků buy boxu (ATC, Hlídat dostupnost, případný qty
     selector). Od 2026-07-29 je ATC jediný prvek v řádku → smí být vyšší. */
  .product-buy-section {
    --tk-buybox-control-h: 48px;
  }

  /* Compact quantity selector for buy section — výška přes --tk-buybox-control-h
     sdílenou s ATC buttonem níže (NE --height-buy-buttons, ta je ~52px).
     Pozn.: na PDP je picker vypnutý (buy-buttons → show_quantity: false),
     pravidla drží pro případ zapnutí zpět / jiné použití bloku. */
  .product-buy-section .quantity-selector {
    --quantity-selector-width: 100px;
    height: var(--tk-buybox-control-h, 44px);
    border-radius: var(--qty-radius, 8px);
    background-color: var(--qty-bg, var(--color-input-background));
    border-color: var(--qty-border-color, var(--color-input-border));
  }

  /* Disable whole-selector hover — only buttons get hover */
  .product-buy-section .quantity-selector:hover {
    background-color: var(--qty-bg, var(--color-input-background));
  }

  .product-buy-section .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 36px;
    height: 100%;
    border-radius: 0;
    transition: background-color var(--animation-speed) var(--animation-easing);
  }

  .product-buy-section .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    background-color: var(--qty-hover-bg, var(--color-input-hover-background));
  }

  .product-buy-section .quantity-selector .quantity-minus {
    border-start-start-radius: var(--qty-radius, 8px);
    border-end-start-radius: var(--qty-radius, 8px);
    border-inline-end: 1px solid var(--qty-border-color, var(--color-input-border));
  }

  .product-buy-section .quantity-selector .quantity-plus {
    border-start-end-radius: var(--qty-radius, 8px);
    border-end-end-radius: var(--qty-radius, 8px);
    border-inline-start: 1px solid var(--qty-border-color, var(--color-input-border));
  }

  .product-buy-section .quantity-selector input[type='number'] {
    max-width: calc(var(--quantity-selector-width) - 72px);
    font-size: var(--font-size--sm);
  }

  .product-buy-section .quantity-selector svg {
    width: 12px;
    height: 12px;
  }

  /* Accordion dividers: only between items, not on first/last */
  .product-buy-section .accordion--dividers accordion-custom:first-child .details {
    border-block-start: none;
  }

  .product-buy-section .accordion--dividers accordion-custom:last-child .details {
    border-block-end: none;
  }

  /* Compact buy button height to match (sdílená výška s quantity selektorem).
     Design sjednocený s .tk-rez-trigger (tk-rez-notify.css): radius 8px jako
     qty selector, font 0.92rem/650, hover = dark bg + lime text + lift. */
  .product-buy-section .add-to-cart-button {
    height: var(--tk-buybox-control-h, 44px);
    border-radius: var(--qty-radius, 8px);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .product-buy-section .add-to-cart-button:hover:not([disabled]) {
    --button-background-color: #0a0a0a;
    --button-color: #ff5a00;
    box-shadow: 0 5px 14px rgba(10, 10, 10, 0.2);
  }

  .product-buy-section .add-to-cart-button:active:not([disabled]) {
    transform: translateY(0);
  }

  /* ── Doprava v buy boxu ──────────────────────────────────────
     Pořadí v group_buy_box (product.json): cena → sklad/expedice →
     „(i) Možnosti dopravy" → JEZDEC dopravy zdarma → ATC.
     Vlasová linka nad jezdcem odděluje „o produktu" od „doprava + koupit". */
  .product-buy-section .tk-pdp-fsb {
    padding-block-start: 14px;
    border-block-start: 1px solid rgba(10, 10, 10, 0.08);
  }

  /* Trigger je třetí řádek stejného odstavce jako Skladem/Doručení — group gap
     (12px) by ho utrhl, proto se celý odečte; rozestup pak dělá jen vlastní
     5px padding triggeru (≈ row-gap 4px v product-inventory). */
  .product-buy-section .tk-shipopt {
    margin-block-start: -12px;
  }

  /* Omnibus 30-day low price → (i) icon + tooltip, server-rendered
     v blocks/price.liquid z variant metafieldů custom.omnibus_price(_eur) */

  .price-row__vat-inline .tk-omnibus-trigger {
    margin-inline-start: 0.5em;
  }

  .tk-omnibus-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(10, 10, 10, 0.6);
    background: rgba(10, 10, 10, 0.07);
    border-radius: 50%;
    cursor: help;
    vertical-align: -3px;
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  /* POZOR: žádný transform na triggeru — tooltip je position:fixed child
     a transform na předkovi by změnil jeho containing block (tip by se
     pozicoval relativně k triggeru místo viewportu = rozbité). Scale jen
     na ikoně (sibling tooltipu, bez fixed potomků). */
  .tk-omnibus-trigger:hover,
  .tk-omnibus-trigger:focus-visible {
    color: #ff5a00;
    background: #0a0a0a;
    outline: none;
  }

  .tk-omnibus-trigger__icon {
    transition: transform 0.2s ease;
  }

  .tk-omnibus-trigger:hover .tk-omnibus-trigger__icon,
  .tk-omnibus-trigger:focus-visible .tk-omnibus-trigger__icon {
    transform: scale(1.12);
  }

  .tk-omnibus-trigger__icon circle:first-of-type {
    /* Vnější kroužek pryč — kruhový tvar dělá background chipu */
    display: none;
  }

  .tk-omnibus-trigger__icon {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .tk-omnibus-trigger__tip {
    position: fixed;
    top: 0;
    left: 0;
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body--family, inherit);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
    padding: 9px 14px;
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 24px rgba(10, 10, 10, 0.28),
      0 2px 8px rgba(10, 10, 10, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition:
      opacity 0.18s ease,
      visibility 0.18s ease,
      transform 0.18s ease;
    z-index: 9999;
    text-align: left;
  }

  /* Zvýrazněná cena v tooltipu (JS sync rozdělí label: cena) */
  .tk-omnibus-trigger__tip strong {
    color: #ff5a00;
    font-weight: 700;
    white-space: nowrap;
  }

  .tk-omnibus-trigger__tip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: var(--tk-tip-arrow-x, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0a0a0a;
  }

  .tk-omnibus-trigger__tip--below::after {
    bottom: auto;
    top: -5px;
    border-top-color: transparent;
    border-bottom-color: #0a0a0a;
  }

  .tk-omnibus-trigger:hover .tk-omnibus-trigger__tip,
  .tk-omnibus-trigger:focus-visible .tk-omnibus-trigger__tip,
  .tk-omnibus-trigger:focus .tk-omnibus-trigger__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .product-buy-section .product-form-buttons button {
    padding-block: var(--padding-md);
  }

  /* ── USP accordion (FAQ box) polish ─────────────────────────────
     Plynulejší rozbalení: base.css transitions (block-size/opacity/padding
     na .details-content i ::details-content) čtou --animation-speed-slow
     a --animation-easing → lokální override v accordion scope. */
  .product-buy-section .accordion {
    --animation-speed-slow: 0.45s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .product-buy-section .accordion summary.details__header {
    gap: 10px;
    padding-block: 11px;
    padding-inline: 10px;
    margin-inline: -10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
  }

  .product-buy-section .accordion summary.details__header:hover {
    background-color: rgba(10, 10, 10, 0.035);
  }

  /* Ikona bez pozadí (chip varianta zamítnuta userem); margin-inline-end
     z _accordion-row.liquid vynulovaný (dělal dvojitou mezeru spolu s gap) */
  .product-buy-section .accordion .details__icon {
    flex: 0 0 auto;
    margin-inline-end: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .product-buy-section .accordion details[open] .details__icon {
    transform: scale(1.08);
  }

  .product-buy-section .accordion .details__header > .icon-caret {
    margin-inline-start: auto;
    color: rgba(10, 10, 10, 0.4);
    transition: color 0.2s ease;
  }

  .product-buy-section .accordion details[open] > summary .icon-caret {
    color: #0a0a0a;
  }

  .product-buy-section .accordion .icon-caret > svg {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Obsah s mírným odsazením, menší šedé písmo */
  .product-buy-section .accordion .details-content {
    padding-inline-start: 0;
    padding-inline-end: 12px;
    padding-block-end: 16px;
  }

  .product-buy-section .accordion .details-content p {
    font-size: 0.82rem !important;
    line-height: 1.65 !important;
    color: rgba(10, 10, 10, 0.65);
    margin-block: 0 0.6em;
  }

  .product-buy-section .accordion .details-content p:last-child {
    margin-block-end: 0;
  }

  /* Jemnější dividery mezi řádky */
  .product-buy-section .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start-color: rgba(10, 10, 10, 0.07);
  }

  /* PDP description: hanging indent — wrapped text začne na úrovni textu, ne pod bullet */
  .product-information .text-block ul,
  .product-information .text-block ol,
  .product-information rte-formatter ul,
  .product-information rte-formatter ol {
    padding-inline-start: 1.5em;
    margin-inline-start: 0;
    list-style-position: outside;
  }

  .product-information .text-block li,
  .product-information rte-formatter li {
    padding-inline-start: 0.25em;
  }

  /* Když rich text wrapne <li> obsah do <p>, blok by zalomil text pod bullet — udělej <p> inline */
  .product-information .text-block li > p,
  .product-information rte-formatter li > p {
    display: inline;
    margin: 0;
  }
/* END_BLOCK:_product-buy-section */

/* START_BLOCK:_product-details (INDEX:117) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-header (INDEX:118) */
.product-header {
    grid-column: 2;
  }
  /* Hlavní název produktu je <h1> (SEO/a11y). Neutralizovat výchozí styly h1, ať vypadá
     identicky jako předchozí <p> — dědí velikost/řez/řádkování z text-block presetu, bez
     výchozích h1 marginů. Tučnost dělá <strong> uvnitř, ne sám h1. */
  .product-header .text-block h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    color: inherit;
  }
/* END_BLOCK:_product-header */

/* START_BLOCK:_product-list-text (INDEX:121) */
.tk-list-heading {
    position: relative;
    padding-inline-start: calc(var(--tk-list-heading-icon, 52px) + 14px);
  }

  .tk-list-heading__icon {
    position: absolute;
    inset-inline-start: 0;
    bottom: -0.1em;
    width: auto;
    height: var(--tk-list-heading-icon, 52px);
    object-fit: contain;
    pointer-events: none;
  }

  @media screen and (max-width: 749px) {
    .tk-list-heading {
      padding-inline-start: calc(var(--tk-list-heading-icon, 52px) * 0.72 + 10px);
    }

    .tk-list-heading__icon {
      height: calc(var(--tk-list-heading-icon, 52px) * 0.72);
    }
  }
/* END_BLOCK:_product-list-text */

/* START_BLOCK:_product-media-gallery (INDEX:122) */
.dialog-zoomed-gallery {
    cursor: grab;
  }

  .dialog--preloading {
    opacity: 0;
  }

  /* Disable PDP zoom button on mobile (≤749px) — keep swipe in slideshow instead */
  @media screen and (max-width: 749px) {
    .product-media-container__zoom-button {
      display: none !important;
    }
  }

  /* Loading spinner overlay for zoom dialog */
  .tk-zoom-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    animation: tkZoomSpin 0.9s linear infinite;
    transition: opacity 0.18s ease;
  }
  zoom-dialog dialog.is-loading .tk-zoom-spinner {
    opacity: 1;
    transition-delay: 0.12s;
  }
  @keyframes tkZoomSpin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-zoom-spinner { animation: none; }
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: grab;
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image:active {
    cursor: grabbing;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  /* === LIGHTBOX OVERRIDES === */

  /* Semi-transparent dark overlay — page visible behind */
  zoom-dialog dialog {
    background: rgba(0, 0, 0, 0.82);
    transition: opacity 0.4s ease;
  }

  /* Smooth fade-out before dialog closes */
  zoom-dialog dialog.dialog--closed {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Horizontal scroll-snap on ALL screen sizes (mobile already has this in base.css) */
  .dialog-zoomed-gallery {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: 100%;
    overscroll-behavior: none;
    scrollbar-width: none;
  }

  .dialog-zoomed-gallery::-webkit-scrollbar {
    display: none;
  }

  /* Each image = full viewport width, centered with generous space */
  .dialog-zoomed-gallery .product-media-container {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    background: transparent !important;
    height: 100%;
  }

  /*
    Safari fix: obaly kolem <img> jsou flex items s min-height/min-width: auto
    (drag-zoom-wrapper si to navíc explicitně dědí přes `min-height: inherit`).
    Automatic minimum size pak nedovolí položce zmenšit se pod intrinsic výšku
    fotky → `max-height: 70vh` níž se neprosadí, obrázek přeteče dolů a vyleze
    z viewportu. Blink to s aspect-ratio řetězcem toleruje, WebKit ne.
  */
  .dialog-zoomed-gallery .product-media-container,
  .dialog-zoomed-gallery .product-media,
  .dialog-zoomed-gallery .product-media__drag-zoom-wrapper {
    min-height: 0;
    min-width: 0;
  }

  /* Strip opaque backgrounds on wrappers so overlay shows through */
  .dialog-zoomed-gallery .product-media,
  .dialog-zoomed-gallery .product-media__drag-zoom-wrapper {
    background-color: transparent !important;
  }

  /* White background on images (for transparent PNGs) */
  .dialog-zoomed-gallery .product-media__image {
    background-color: #fff;
  }

  /* Image wrapper: auto sizing */
  .dialog-zoomed-gallery .product-media-container--image .product-media {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Drag-zoom wrapper: don't force full dimensions in lightbox */
  .dialog-zoomed-gallery .product-media__drag-zoom-wrapper {
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image: contained, floating in dark space, rounded corners */
  .dialog-zoomed-gallery .product-media__image {
    object-fit: contain;
    max-height: 70vh;
    max-width: 60vw;
    border-radius: 10px;

    /* Sám <img> je taky flex item — bez tohohle mu automatic minimum size
       ve WebKitu přebije max-height výš. */
    min-height: 0;
    min-width: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery .product-media__image {
      max-height: 65vh;
      max-width: 85vw;
    }
  }

  /* Thumbnails: ALWAYS bottom (override desktop right-side layout from base.css) */
  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: relative;
      flex-direction: row;
      inset: unset;
      max-height: unset;
      overflow-y: unset;
      overflow-x: auto;
      animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
      animation-delay: calc(var(--animation-speed) * 1.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  /* Thumbnail styling on dark background */
  .dialog-thumbnails-list__thumbnail {
    opacity: 0.6;
    transition: opacity 0.2s ease;
    overflow: hidden;
    background-color: #fff !important;
    padding: 0 !important;
    border: none !important;
    margin: 0;
    line-height: 0;
    font-size: 0;
    box-shadow: none !important;
    aspect-ratio: 1;
  }

  .dialog-thumbnails-list__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    aspect-ratio: unset !important;
  }

  .dialog-thumbnails-list__thumbnail:hover {
    opacity: 0.9;
  }

  .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
    opacity: 1;
    outline-color: #fff;
  }

  /* Lightbox arrow buttons */
  .lightbox-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--layer-raised);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
    backdrop-filter: blur(4px);
  }

  .lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .lightbox-arrow--prev {
    left: var(--margin-lg);
  }

  .lightbox-arrow--next {
    right: var(--margin-lg);
  }

  .lightbox-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Hide arrows on mobile (swipe is enough) */
  @media screen and (max-width: 749px) {
    .lightbox-arrow {
      display: none;
    }
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:123) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:124) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > placeholder-image,
  .slide__image-container > placeholder-image > img {
    width: 100%;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:125) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    fill: currentColor;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accelerated-checkout (INDEX:127) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:128) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .accordion .details__header > .svg-wrapper {
    flex-shrink: 0;
    width: var(--accordion-icon-size, var(--icon-size-xs));
    height: var(--accordion-icon-size, var(--icon-size-xs));
  }

  .accordion .details__header > .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:131) */
.buy-buttons-block {
    width: 100%;
  }

  .tk-buy-buttons-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .tk-buy-buttons-row > product-form-component {
    flex: 1 1 0%;
    min-width: 0;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons > *:not(.quantity-selector, .quantity-rules, .quantity-label) {
    flex: 1 1 185px;
    min-width: fit-content;
  }

  .product-form-buttons--stacked > *:not(.quantity-selector, .quantity-rules, .quantity-label) {
    flex-basis: 51%; /* Force the buttons to be on separate rows */
  }

  .product-form-buttons button {
    width: 100%;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.quantity-rules) .quantity-selector {
    margin-inline-end: var(--gap-sm);
    margin-block-end: var(--gap-sm);
  }

  .quantity-selector:has(+ .quantity-rules) {
    margin-block-end: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-buttons .shopify-payment-button__button {
    width: 100%;
    min-height: var(--minimum-touch-target);
  }

  /* Sold-out: množstevní selektor je k ničemu a disabled „Není skladem" button
     dubluje stock badge (product-inventory nad buttons) → obojí schovat.
     add-to-cart-component zůstává v DOM (display:none) kvůli refs pro morph
     a Rez app injektovanému tlačítku (proxy click z .tk-rez-trigger funguje
     i přes display:none). „Hlídat dostupnost" se stává hlavním CTA — full
     width varianta v assets/tk-rez-notify.css. */
  .product-form-buttons--soldout .quantity-selector,
  .product-form-buttons--soldout .quantity-label,
  .product-form-buttons--soldout .quantity-rules {
    display: none;
  }

  .product-form-buttons--soldout add-to-cart-component {
    display: none;
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap-2xl);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:contact-form-submit-button (INDEX:134) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:email-signup (INDEX:137) */
email-signup-block {
    display: block;
  }

  .email-signup-block {
    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background-color: transparent;
  }

  .email-signup__input-group:not(:has(.email-signup__button--integrated)) {
    gap: var(--gap-xs);
  }

  .email-signup__input-group:not(:has(.email-signup__button--arrow)) {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  .email-signup__input {
    width: 100%;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group .email-signup__input--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;

    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);

    &:focus-visible {
      --box-shadow-multiplier: 1.75;
      --box-shadow-color: var(--color-input-text);

      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group {
    --button-actual-width: var(--button-size);
  }

  .email-signup__input:has(+ .email-signup__button--arrow.email-signup__button--integrated) {
    padding-inline-end: calc(var(--button-size) + var(--padding-sm));

    @media screen and (max-width: 749px) {
      text-align: left;
    }
  }

  .email-signup__input:has(+ .email-signup__button--integrated.email-signup__button--text) {
    padding-inline-end: calc(var(--button-actual-width) + var(--padding-xs) + var(--margin-xs));

    @media screen and (max-width: 749px) {
      text-align: left;
    }
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    aspect-ratio: 1;
    padding-inline: var(--padding-xs);

    &:not(.email-signup__button--integrated) {
      width: auto;
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);

    position: absolute;
    height: calc(100% - (var(--button-offset) * 2) - (var(--border-width) * 2));
    right: calc(var(--button-offset) + var(--border-width));
    top: calc(var(--button-offset) + var(--border-width));
    width: max-content;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    --button-offset: calc(10% - var(--border-width));

    right: 0;

    &.email-signup__button--text.button-unstyled {
      padding: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:139) */
.collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) {
    justify-content: space-between;
  }

  dialog-component.facets-block-wrapper:not(:has(.facets--drawer[open])) {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .collection-wrapper:has(.collection-wrapper--full-width) .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content,
  .sorting-filter__options {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }

  /* ═══ Spigen mobil: boční panel přesunutý do šuplíku (tk-facets-drawer.js) ═══
     .facets uvnitř slotu dědí drawer rozměry (height/width = drawer, top/bottom) → obsah přetékal přes
     Třídit a spodní lištu a lišta byla dvakrát. Tady se z něj udělá obyčejný blok v toku. */
  @media screen and (max-width: 749px) {
    .tk-drawer-slot .facets,
    .tk-drawer-slot .facets--vertical {
      display: block !important;
      position: static !important;
      top: auto !important; bottom: auto !important;
      height: auto !important; max-height: none !important;
      width: 100% !important; max-width: none !important;
      overflow: visible !important;
      padding: 0 var(--drawer-padding, 20px) !important;
      margin: 0 !important;
      box-shadow: none !important; border: 0 !important;
    }
    .tk-drawer-slot .facets__form-wrapper, .tk-drawer-slot .facets__form { height: auto !important; display: block !important; }
    .tk-drawer-slot .facets__actions, .tk-drawer-slot .facets__title-wrapper { display: none !important; }
    .tk-drawer-slot .facets__filters-wrapper { padding: 0; }

    /* šuplík: hlavička nahoře, obsah scrolluje, spodní lišta jednou a pevně dole */
    .facets--drawer[open] { justify-content: flex-start; overflow: hidden; }
    .facets--drawer .facets__form-wrapper { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .facets--drawer .facets__form { height: auto; }
    .facets--drawer > .facets__actions { position: static; flex: 0 0 auto; margin-top: 0; padding-block: 10px 14px; background: var(--color-background); border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08); }
    .facets--drawer .sorting-filter { padding-inline: var(--drawer-padding, 20px); }

    /* typografie šuplíku — menší, kompaktnější */
    .facets--drawer .facets-drawer__title { font-size: 22px; }
    .facets--drawer .facets__title-wrapper { padding-block: 10px; }
    .facets--drawer .facets__label { font-size: 15px !important; }
    .facets--drawer .facets__summary { padding-block: 12px !important; }
    .facets--drawer .sorting-filter, .facets--drawer .sorting-filter__summary, .facets--drawer .sorting-filter__label { font-size: 15px !important; }
    .facets--drawer .facets-remove__pill { font-size: 13px !important; padding: 6px 11px 6px 12px; }
    .facets--drawer .checkbox__label-text { font-size: 14px; }
    .facets--drawer .facets__see-results, .facets--drawer .facets__clear-all { font-size: 14px; min-height: 44px; }
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:142) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 6ch 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 750px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }
    @media screen and (max-width: 750px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }
    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:144) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:145) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:147) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 750px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:148) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:150) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:151) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:152) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:153) */
.price-row {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em;
  }

  .price-vat-line {
    margin-block-start: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .price-row__vat-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1;
    align-self: baseline;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
  }

  .price-row [ref="priceContainer"] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    flex-wrap: wrap;
  }

  product-price .price {
    font-weight: var(--price-font-weight, inherit);
  }

  product-price .compare-at-price {
    font-weight: 400;
    font-size: 0.5em;
    color: var(--tk-price-compare-color, #3f4652);
    opacity: 1;
  }

  {%- comment -%}
    TK: na PDP (price-row, ne uvnitř .product-card) sjednotit sale stav s kartami —
    sleva cena červená + bold, % badge jako červený gradient pill. Karty mají vlastní
    pravidla v tk-product-card.css (vyšší specificita .product-card …), takže se nepřekrývá.
  {%- endcomment -%}
  .price-row product-price:has(.compare-at-price) .price {
    color: #dc2626;
    font-weight: 800;
  }

  .price-discount-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 0.28em 0.55em;
    border-radius: 0.4em;
    font-size: 0.42em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  }

  .price-ex-vat {
    font-size: 0.75em;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-top: 0.2em;
  }

  .tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  .pdp-discount {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-block-start: 0.6rem;
    padding: 0.45rem 0.65rem 0.45rem 0.55rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: #0A0A0A;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.18), rgba(255, 90, 0, 0.32));
    border: 1px solid rgba(255, 90, 0, 0.55);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    max-width: 100%;
  }

  .pdp-discount:hover,
  .pdp-discount:focus-visible {
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.32), #ff5a00);
    border-color: #ff5a00;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(255, 90, 0, 0.85);
    outline: none;
    text-decoration: none;
  }

  .pdp-discount__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(10, 10, 10, 0.92);
    color: #ff5a00;
    flex-shrink: 0;
  }

  .pdp-discount__text {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em;
    min-width: 0;
  }

  .pdp-discount__text strong {
    font-weight: 700;
  }

  .pdp-discount__code {
    display: inline-flex;
    align-items: center;
    padding: 0.05em 0.45em;
    background: rgba(10, 10, 10, 0.92);
    color: #FFFFFF;
    border-radius: 5px;
    font-family: var(--font-body--family, ui-monospace, SFMono-Regular, monospace);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.92em;
    white-space: nowrap;
  }

  .pdp-discount__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin-inline-start: auto;
    padding-inline-start: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(10, 10, 10, 0.78);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
  }

  .pdp-discount:hover .pdp-discount__cta,
  .pdp-discount:focus-visible .pdp-discount__cta {
    color: #0A0A0A;
    transform: translateX(2px);
  }

  @media (max-width: 480px) {
    .pdp-discount {
      gap: 0.4rem;
      padding: 0.4rem 0.55rem;
      font-size: 0.8125rem;
    }

    .pdp-discount__cta {
      font-size: 0.8125rem;
      padding-inline-start: 0.3rem;
    }
  }

  .pdp-discount__icon-check,
  .pdp-discount__label-success {
    display: none;
  }

  .pdp-discount.is-loading {
    pointer-events: none;
    opacity: 0.7;
  }

  .pdp-discount.is-loading .pdp-discount__icon-default {
    animation: tk-discount-spin 0.7s linear infinite;
  }

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

  .pdp-discount.is-activated {
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.55), #ff5a00);
    border-color: #ff5a00;
  }

  .pdp-discount.is-activated .pdp-discount__icon-default,
  .pdp-discount.is-activated .pdp-discount__label-default,
  .pdp-discount.is-activated .pdp-discount__cta {
    display: none;
  }

  .pdp-discount.is-activated .pdp-discount__icon-check,
  .pdp-discount.is-activated .pdp-discount__label-success {
    display: inline-flex;
  }

  .pdp-discount.is-activated .pdp-discount__icon {
    background: #0A0A0A;
    color: #ff5a00;
  }

  .pdp-discount__label-success {
    font-weight: 600;
  }

  .pdp-discount__label-default strong {
    font-weight: 700;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-actions (INDEX:154) */
/* Spigen: SKU a EAN na jednom řádku, min. 13px, čitelná šedá */
  .product-sku-ean {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    padding-top: 10px;
  }

  .product-sku-ean__item {
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-foreground-muted);
  }

  .product-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
    overflow: visible;
  }

  .product-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.75rem;
    color: var(--color-foreground-muted);
    transition: color 0.2s ease;
    white-space: nowrap;
  }

  /* Mobile: zmenšit a vejít všechny tři na jeden řádek s gap */
  @media screen and (max-width: 749px) {
    .product-actions {
      justify-content: flex-start;
      gap: 14px;
      row-gap: 8px;
    }

    .product-action {
      font-size: 0.65rem;
      gap: 4px;
      padding: 2px 0;
    }

    .product-action__icon {
      width: 13px;
      height: 13px;
    }
  }

  .product-action:hover {
    color: var(--color-foreground);
  }

  .product-action__icon {
    flex-shrink: 0;
  }

  /* Wishlist — ensure scale animation is not clipped */
  .product-action--wishlist {
    overflow: visible;
  }

  .product-action--wishlist.is-active {
    color: var(--color-primary-button-background);
  }

  .product-action--wishlist.is-active .product-action__heart {
    fill: var(--color-primary-button-background);
    stroke: var(--color-primary-button-background);
  }

  /* Compare */
  .product-action--compare {
    overflow: visible;
  }

  .product-action--compare.is-active {
    color: var(--color-primary-button-background);
  }

  /* Overlay (backdrop) — vlastní div místo nativního dialog top-layeru kvůli
     kompatibilitě s rozšířeními (Bitwarden inline menu). Design 1:1 jako modal:
     blur + radiální gradient, vycentrovaná karta. */
  .product-actions-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(
      120% 120% at 50% 30%,
      rgb(var(--color-shadow-rgb) / 0.55),
      rgb(var(--color-shadow-rgb) / 0.72)
    );
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    animation: tk-inquiry-overlay-in var(--animation-speed, 0.3s) var(--animation-easing, ease);
  }
  .product-actions-overlay[hidden] { display: none; }
  @keyframes tk-inquiry-overlay-in { from { opacity: 0; } to { opacity: 1; } }

  /* Dialog — design sjednocený s Rez „Hlídat dostupnost" modalem: radius, vrstvený shadow.
     Vycentrovaný flex child → výška dle obsahu, scroll až když přeroste viewport. */
  .product-actions-dialog {
    position: relative;
    box-shadow:
      inset 0 1px 0 rgb(var(--color-background-rgb) / 0.65),
      0 0 0 1px rgb(var(--color-shadow-rgb) / 0.06),
      0 24px 60px rgb(var(--color-shadow-rgb) / 0.28),
      0 6px 18px rgb(var(--color-shadow-rgb) / 0.14);
    border: none;
    border-radius: var(--tk-r-xl, 22px);
    background-color: var(--color-background);
    padding: 30px 30px 28px;
    width: 92vw;
    max-width: 520px;
    max-height: 92dvh;
    overflow-y: auto;
    animation: tk-inquiry-dialog-in var(--animation-speed, 0.3s) var(--animation-easing, ease);
  }
  .product-actions-dialog:focus { outline: none; }
  /* Jen fade, ŽÁDNÝ transform: s posunem/scale se pole hýbe i po otevření a
     Bitwarden vykreslí inline ikonu na staré pozici (než se refokusuje). */
  @keyframes tk-inquiry-dialog-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Lime accent proužek nahoře — sjednocení s kontaktem/withdrawal kartou */
  .product-actions-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--tk-r-xl, 22px) var(--tk-r-xl, 22px) 0 0;
    background: var(--color-primary-button-background);
  }

  @media screen and (max-width: 749px) {
    .product-actions-overlay { padding: 14px; }
    .product-actions-dialog { padding: 26px 22px 24px; max-height: 90dvh; }
  }

  .product-actions-dialog__heading {
    margin: 0 0 4px;
    font-family: var(--tk-f-display, var(--font-h1--family, inherit));
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  /* Oddělovač mezi hlavičkou a formulářem — jako .rez-notify-modal-header
     border-bottom v Rez modalu */
  .product-actions-dialog__intro {
    margin: 0 0 10px;
    font-size: var(--font-size--sm);
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .product-actions-dialog__product-name {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    font-size: var(--font-size--sm);
    color: var(--color-foreground-muted);
  }

  .product-actions-dialog__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
  }

  .product-actions-dialog__field label {
    font-size: var(--font-size--sm);
    font-weight: 600;
  }

  .product-actions-dialog__field input,
  .product-actions-dialog__field textarea {
    padding: 12px 14px;
    border: 1.5px solid var(--color-input-border);
    border-radius: 11px;
    font-family: var(--font-body--family);
    /* 16px napevno (ne var(--font-size--sm)=14px) — iOS Safari zoomuje při fokusu
       inputu s font-size < 16px. Stejně to řeší footer newsletter input. */
    font-size: 16px;
    background: var(--color-input-background);
    color: var(--color-input-text);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .product-actions-dialog__field input::placeholder,
  .product-actions-dialog__field textarea::placeholder {
    color: rgb(var(--color-input-text-rgb) / 0.5);
    opacity: 1;
  }

  /* Lime focus ring — stejný jako e-mail input v Rez modalu */
  .product-actions-dialog__field input:focus,
  .product-actions-dialog__field textarea:focus {
    outline: none;
    border-color: var(--color-primary-button-background);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-button-background) 35%, transparent);
  }

  /* Submit sjednocený s ATC buttonem (viz _product-buy-section.liquid):
     radius 8px, font 0.92rem/650, hover dark+lime+lift. Vyšší specificita
     (.button. + :not) nutná — .button:hover z base.css (loaduje se PO
     compiled assets) by jinak vyhrál tie na custom props. */
  .product-actions-dialog__submit {
    width: 100%;
    margin-top: 6px;
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 700;
    min-height: 48px;
    --button-background-color: var(--color-primary-button-background);
    --button-color: var(--color-primary-button-text);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-button-background) 45%, transparent);
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.12s ease;
  }

  .button.product-actions-dialog__submit:hover:not([disabled]) {
    --button-background-color: var(--color-primary-button-hover-background);
    --button-color: var(--color-primary-button-hover-text);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary-button-hover-background) 35%, transparent);
  }

  .button.product-actions-dialog__submit:active:not([disabled]) {
    transform: translateY(0);
  }

  .button.product-actions-dialog__submit[disabled] {
    opacity: 0.6;
    box-shadow: none;
  }

  /* X dovnitř karty — base .close-button je position:fixed (= roh obrazovky).
     Vyšší specificita přebije fixed na absolute vůči .product-actions-dialog. */
  .product-actions-dialog .product-actions-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    opacity: 0.7;
  }
  .product-actions-dialog .product-actions-dialog__close:hover { opacity: 1; }

  /* Souhlas (GDPR) — povinný pro odeslání na backend */
  .product-actions-dialog__consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: -4px 0 16px;
    font-size: var(--font-size--xs, 0.8rem);
    line-height: 1.5;
    color: var(--color-foreground-muted);
    cursor: pointer;
  }

  .product-actions-dialog__consent input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--color-primary-button-background);
    cursor: pointer;
  }

  /* honeypot — skryté pole proti spamu */
  .product-actions-dialog__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .product-actions-dialog__error {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: var(--font-size--sm);
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-background));
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
  }

  /* Potvrzovací stav po odeslání dotazu */
  .product-actions-dialog__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 8px 8px;
  }

  .product-actions-dialog__result[hidden] {
    display: none;
  }

  .product-actions-dialog__result-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-primary-button-text);
    background: var(--color-success);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-success) 30%, transparent);
    animation: tk-inquiry-pop 0.35s ease;
  }

  @keyframes tk-inquiry-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  .product-actions-dialog__result-title {
    margin: 0;
    font-family: var(--tk-f-display, var(--font-h1--family, inherit));
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .product-actions-dialog__result-body {
    margin: 0;
    max-width: 42ch;
    font-size: var(--font-size--sm);
    line-height: 1.6;
    color: var(--color-foreground-muted);
  }
/* END_BLOCK:product-actions */

/* START_BLOCK:product-custom-property (INDEX:156) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:158) */
.product-inventory {
    /* Dva samostatné řádky: Skladem / Doručení — záměrně NE row layout
       (CZ texty se lámaly na 2 řádky, EN na 1 → nekonzistence napříč locales).
       Sedí mezi cenou a buy buttons (block_order v product.json). */
    display: flex;
    flex-direction: column;
    align-items: var(--inventory-alignment, flex-start);
    row-gap: 4px;
  }

  .product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    /* Stejný gap jako __delivery → texty obou řádků začínají na stejném x */
    gap: 8px;
  }

  /* Stejná šířka ikony jako truck v __delivery (14px) — kvůli zarovnání textů.
     SVG (dot-v-kruhu s halo) kompletně nahrazen čistým CSS kolečkem přes
     ::before — přesná kontrola velikosti/pozice, currentColor ze status class. */
  .product-inventory__icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
  }

  .product-inventory__icon svg {
    display: none;
  }

  .product-inventory__icon::before {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-in_stock + .product-inventory__text {
    font-weight: 700;
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }


  .product-inventory__delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-foreground);
  }

  .product-inventory__delivery-icon {
    flex-shrink: 0;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:159) */
.product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  .product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:162) */
.rating-wrapper {
    width: 100%;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-text,
  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:163) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    fill: currentColor;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:164) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 750px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:165) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: clip;
    gap: 0;
    flex-shrink: 0;
    padding: 6px;
    margin: -6px;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }
  }

  swatches-variant-picker-component .variant-option--swatches {
    padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .variant-option--swatches {
    overflow-list::part(list) {
      gap: var(--gap-sm);
    }

    overflow-list[defer]::part(list) {
      flex-wrap: nowrap;
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_BLOCK:swatches */

/* START_BLOCK:tk-cart-recommendations (INDEX:167) */
/* min-width:0 — karusel jinak zvedne min-content šířku grid sloupce a na mobilu roztáhne stránku (432px na 390px displeji) */
  .tk-cart-recos { position: relative; margin-top: 18px; min-width: 0; max-width: 100%; }
  .tk-cart-recos .tk-upsell, .tk-cart-recos .tk-upsell__scroll, .cart-page__more-blocks { min-width: 0; max-width: 100%; }
  .tk-cart-recos .tk-upsell__heading { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 14px; padding-right: 96px; }
  /* přesně 4 karty na šířku levého sloupce — žádná „useknutá" pátá karta u sloupce se souhrnem */
  .tk-cart-recos .tk-upsell--carousel .tk-upsell-card { flex: 0 0 calc((100% - 3 * 12px) / 4) !important; }
  @media (max-width: 749px) { .tk-cart-recos .tk-upsell--carousel .tk-upsell-card { flex-basis: calc((100% - 12px) / 2.15) !important; } }
  .tk-cart-recos .tk-upsell__scroll { scroll-snap-type: x mandatory; scroll-padding-inline: 0; }
  .tk-cart-recos__nav { position: absolute; top: -4px; right: 0; display: flex; gap: 6px; z-index: 2; }
  .tk-cart-recos__arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(var(--color-foreground-rgb) / 0.15); background: var(--color-background, #fff); color: var(--color-foreground); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .tk-cart-recos__arrow svg { width: 14px; height: 14px; }
  .tk-cart-recos__arrow:hover { background: #ff5a00; border-color: #ff5a00; color: #fff; }
  .tk-cart-recos__arrow:disabled { opacity: 0.35; pointer-events: none; }
  @media (max-width: 749px) { .tk-cart-recos__nav { display: none; } .tk-cart-recos .tk-upsell__heading { padding-right: 0; } }
/* END_BLOCK:tk-cart-recommendations */

/* START_BLOCK:tk-free-shipping (INDEX:168) */
/* Prázdný košík + produkt pod hranicí = žádné „zbývá X" (rozhodnutí uživatele
     2026-07-29). Element zůstává v DOM kvůli realtime odkrytí po ATC. */
  .tk-pdp-fsb--hidden {
    display: none;
  }

  .tk-pdp-fsb {
    --tk-fsb-accent: #ff5a00;
    --tk-fsb-ink: #0a0a0a;
    --tk-fsb-cart: 0%;
    --tk-fsb-prosp: 0%;
    --tk-fsb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
    width: 100%;
  }

  .tk-pdp-fsb__msg {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .tk-pdp-fsb__msg strong {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .tk-pdp-fsb__amount {
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-foreground);
  }

  /* Fajfka jen ve stavech, kdy je doprava zdarma jistá */
  .tk-pdp-fsb__check {
    flex: none;
    display: none;
  }

  .tk-pdp-fsb--done .tk-pdp-fsb__check,
  .tk-pdp-fsb--reach .tk-pdp-fsb__check,
  .tk-pdp-fsb--product .tk-pdp-fsb__check {
    display: block;
  }

  .tk-pdp-fsb__track {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: rgb(var(--color-foreground-rgb) / 0.09);
    /* místo nad linkou pro kamion */
    margin-top: 15px;
  }

  .tk-pdp-fsb__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    transition: width 0.65s var(--tk-fsb-ease);
  }

  /* Světlejší „co přidá tenhle produkt" segment vzadu */
  .tk-pdp-fsb__fill--prosp {
    width: var(--tk-fsb-prosp);
    background: rgb(255 90 0 / 0.42);
  }

  /* Plná výplň = co je v košíku teď */
  .tk-pdp-fsb__fill--cart {
    width: var(--tk-fsb-cart);
    min-width: 0;
    background: var(--tk-fsb-accent);
  }

  /* Košík prázdný → není co kreslit plnou barvou */
  .tk-pdp-fsb--product .tk-pdp-fsb__fill--cart {
    opacity: 0;
  }

  /* Kamion jede na čele prospektivní výplně */
  .tk-pdp-fsb__truck {
    position: absolute;
    bottom: 1px;
    left: clamp(24px, var(--tk-fsb-prosp), 100%);
    transform: translateX(-100%);
    color: var(--tk-fsb-ink);
    line-height: 0;
    transition: left 0.65s var(--tk-fsb-ease);
    will-change: left;
  }

  @media (prefers-reduced-motion: no-preference) {
    .tk-pdp-fsb--done .tk-pdp-fsb__truck,
    .tk-pdp-fsb--reach .tk-pdp-fsb__truck,
    .tk-pdp-fsb--product .tk-pdp-fsb__truck {
      animation: tkPdpFsbSettle 0.55s var(--tk-fsb-ease);
    }
  }

  @keyframes tkPdpFsbSettle {
    0% { transform: translateX(-100%) translateY(0); }
    45% { transform: translateX(-100%) translateY(-3px); }
    100% { transform: translateX(-100%) translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-pdp-fsb__fill,
    .tk-pdp-fsb__truck {
      transition: none;
    }
  }

  /* ── Dárek zdarma v buy boxu ─────────────────────────────────────────── */
  /* ⚠️ `position: relative` kvůli tooltipu — ten je absolutní vůči tomuhle. */
  /* ⚠️ ŽÁDNÉ `width: 100%` — blokový flex zabere šířku rodiče sám. S ním prvek
     v některých kontejnerech přetekl a byly vidět jen vodorovné linky rámečku,
     boky vyběhly mimo. `max-width` je pojistka pro totéž.
     Vzhled schválně shodný s lištami v košíku (lime hairline, ne šedá výplň). */
  .tk-pdp-gift {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0.65rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgb(255 90 0 / 0.55);
    border-radius: 10px;
    background: rgb(255 90 0 / 0.05);
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / 0.78);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .tk-pdp-gift:hover {
    border-color: rgb(255 90 0 / 0.95);
    box-shadow: 0 5px 16px -8px rgb(255 90 0 / 0.7);
  }

  .tk-pdp-gift__thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--color-background, #fff);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding: 3px;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .tk-pdp-gift__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tk-pdp-gift__body {
    display: block;
    min-width: 0;
  }

  /* První řádek nese sdělení, druhý říká co to je a co to stojí. Obojí se musí
     vejít do úzkého buy boxu, proto krátký text a `text-wrap: balance`. */
  .tk-pdp-gift__lead {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-foreground);
    text-wrap: balance;
  }

  /* ⚠️ `overflow-wrap` je nutnost — `nbsp-models` slepí tokeny s číslicemi
     nezlomitelnou mezerou a dlouhý název by jinak roztáhl celý blok. */
  /* Název se ukazuje CELÝ — dvouřádkový ořez usekával „…0,1 m, Černá“ těsně
     před koncem. Clamp zůstává jako pojistka pro extrémně dlouhé názvy. */
  .tk-pdp-gift__name {
    display: -webkit-box;
    margin-top: 0.14rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    overflow: hidden;
    /* `break-word`, ne `anywhere` — `anywhere` láme i uprostřed slova. */
    overflow-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* Hodnota na vlastním řádku — přilepená za název se mísila s jeho koncem
     („Černá · běžně 179 Kč“). */
  .tk-pdp-gift__value {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: nowrap;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .tk-pdp-gift__value s {
    font-weight: 650;
  }
/* END_BLOCK:tk-free-shipping */

/* START_BLOCK:tk-ksp (INDEX:169) */
/* Blok je vždy v DOM (kvůli theme editoru), ale bez bodů nesmí žrát gap
     buy sekce — proto :has() prázdný stav skryje. */
  .tk-ksp-block:not(:has(.tk-ksp)) {
    display: none;
  }

  /* KSP musí být v pravém sloupci ÚPLNĚ NAHOŘE — jenže `blocks/_product-details.liquid`
     rendruje `view-product-title` + snippet `variant-switcher` (barevný přepínač
     napříč produkty, `.tk-color-switcher`) NATVRDO PŘED content_for 'blocks',
     takže žádné pořadí v `block_order` KSP nad switcher nedostane — u produktů
     s barevnými sourozenci (MO13) skončily pilulky pod ním.
     Obsah group-blocku je flex sloupec, takže to řeší `order`. */
  .product-details .group-block-content > .tk-ksp-block {
    order: -1;
  }

  /* Přepínač instancí. 1100 px = breakpoint, na kterém product-information
     přechází z jednoho sloupce do mřížky (viz sections/product-information.liquid
     „Desktop styles"). ⚠️ Když se ten breakpoint pohne, musí se pohnout i tady,
     jinak se pilulky buď zdvojí, nebo zmizí úplně. */
  @media screen and (max-width: 1099px) {
    .tk-ksp-block--grid {
      display: none;
    }

    /* Na mobilu se dlaždice ROZTÁHNOU přes celou šířku pruhu (356 z 390 px).
       `flex: 1 1 auto` = rostou ze své přirozené šířky, takže volné místo
       se rozdělí POMĚRNĚ podle délky popisku.

       ⚠️ Schválně NE tyhle dvě zdánlivě přímočařejší cesty:
       - `flex: 1 1 0` / grid `repeat(3, 1fr)` = stejné díly → krátký popisek
         dostane stejně místa jako dlouhý, takže „Výkon 240 W" se láme na
         „Výkon 240 / W" (nebo se ořízne na „Výkon 24…"), i když je vedle
         v řádku volno.
       - `justify-content: space-between` na kontejneru → při zalomení na dva
         řádky roztrhne první řádek na protilehlé kraje a druhý nechá viset
         vlevo.
       Obojí ověřeno naživo, viz notes/features.md. */
    .product-header .tk-ksp__item {
      flex: 1 1 auto;
      justify-content: center;
    }

    /* U pilulky s vysvětlivkou nese tvar `__trigger`, `__item` je jen obal —
       roztáhnout se proto musí obojí, jinak trigger zůstane úzký. */
    .product-header .tk-ksp__trigger {
      width: 100%;
      justify-content: center;
    }
  }

  @media screen and (min-width: 1100px) {
    .tk-ksp-block--stacked {
      display: none;
    }
  }

  /* Pruh štítků nad kartou buy boxu. Zarovnání na levou hranu karty řeší
     padding-inline: 12px na buy sekci, který sdílí s group_buy_boxem. */
  .tk-ksp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Tvar navazuje na .tk-badge (promo pilulky na kartách/galerii): radius 7,
     weight 650. Plocha je neutrálně šedá a barvu nese jen ikona — výslovné
     rozhodnutí uživatele (2026-08-13), lime plocha přes celou pilulku byla moc.
     ⚠️ Pozadí stránky pod pilulkami je rgb(246,247,249), ne bílá; proto
     tak vysoká alfa — slabší šedá by s podkladem splynula. */
  .tk-ksp__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    border-radius: 7px;
    background: rgba(10, 10, 10, 0.065);
    color: #0a0a0a;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0.01em;
    /* „480 Mb/s" ani „⌀ 3,2 mm" se nesmí lámat uprostřed hodnoty. */
    white-space: nowrap;
  }

  /* Ikona = plná oranžová plocha čipu s BÍLÝM glyfem — stejně jako všechna
     oranžová tlačítka na webu (rozhodnutí 21. 9. 2026). Tmavý glyf byl zvyk
     z doby lime akcentu MO; na Spigen oranžové (#ff5a00) má bílá kontrast
     ~3:1 a tenká linka je čitelnější než tmavá. Barevný TAH ikony bez plochy
     nepoužívat — na šedé ploše pilulky se ztrácí. */
  .tk-ksp__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #ff5a00;
    color: #fff;
  }

  .tk-ksp__icon svg {
    display: block;
    width: 13px;
    height: 13px;
  }

  /* ── Volitelná vysvětlivka (pole `tooltip` metaobjektu) ─────────────
     U pilulky nese tvar `__trigger`, ne `__item` — položka je pak jen
     pozicovací obal pro bublinu. Bublina je CSS-only (žádný JS jako
     u tk-shipopt): kotví se na levou hranu pilulky a `max-width` ji drží
     uvnitř úzkého sloupce. U posledních pilulek v řádku by jinak mohla
     vytéct doprava, proto `--tk-ksp-tip-w` nepřesahuje šířku sloupce. */
  .tk-ksp__item--tip {
    position: relative;
    padding: 0;
    background: none;
  }

  .tk-ksp__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    border: none;
    border-radius: 7px;
    background: rgba(10, 10, 10, 0.065);
    color: #0a0a0a;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    cursor: help;
    transition: background-color 0.2s ease;
  }

  .tk-ksp__trigger .tk-ksp__label {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(10, 10, 10, 0.35);
  }

  .tk-ksp__trigger:hover,
  .tk-ksp__trigger:focus-visible {
    background: rgba(10, 10, 10, 0.11);
  }

  .tk-ksp__tip {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: min(260px, 70vw);
    padding: 8px 10px;
    border-radius: 9px;
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    white-space: normal;
    box-shadow: 0 10px 28px rgba(10, 10, 10, 0.24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-3px);
    transition:
      opacity 0.18s ease,
      visibility 0.18s ease,
      transform 0.18s ease;
  }

  .tk-ksp__trigger:hover + .tk-ksp__tip,
  .tk-ksp__trigger:focus-visible + .tk-ksp__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-ksp__tip,
    .tk-ksp__trigger {
      transition: none;
    }
  }
/* END_BLOCK:tk-ksp */

/* START_BLOCK:tk-shipping-options (INDEX:171) */
/* Hover musí reagovat JEN na textu, ne po celé šířce buy boxu — a protože
     pointerenter/leave visí na hostu (ne na tlačítku), musí se zúžit i host. */
  .tk-shipopt {
    position: relative;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
  }

  .tk-shipopt__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Šířka podle obsahu. Negativní margin + stejný padding = highlight má
       kolem textu vzduch, ale text pořád začíná na x=0, tj. na stejné ose
       jako „Skladem" / „Doručení" nad ním. */
    width: auto;
    padding: 5px 8px;
    margin-inline: -8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    /* font-size + gap 8px = stejná osa jako řádky „Skladem" / „Doručení"
       v product-inventory, pod kterými trigger sedí (block_order v product.json) */
    color: rgb(var(--color-foreground-rgb) / 0.62);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .tk-shipopt__trigger:hover,
  .tk-shipopt__trigger:focus-visible {
    background-color: rgba(10, 10, 10, 0.04);
    color: var(--color-foreground);
  }

  /* (i) chip: 14px = šířka ikon v product-inventory → texty všech tří řádků
     začínají na stejném x. Vzhled i chování 1:1 s .tk-omnibus-trigger —
     tlumené kolečko, na hoveru černé s lime glyfem. */
  .tk-shipopt__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.09);
    color: rgba(10, 10, 10, 0.62);
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease;
  }

  .tk-shipopt__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tk-shipopt__trigger:hover .tk-shipopt__icon,
  .tk-shipopt__trigger:focus-visible .tk-shipopt__icon,
  .tk-shipopt[data-open] .tk-shipopt__icon {
    background: #0a0a0a;
    color: #ff5a00;
    transform: scale(1.12);
  }

  .tk-shipopt__label {
    flex: 0 1 auto;
    min-width: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.28);
  }

  .tk-shipopt__trigger:hover .tk-shipopt__label {
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  /* ── Plovoucí panel s tabulkou ──────────────────────────────────
     POZOR: `position: fixed` + z-index 9999 je záměr, ne libovůle —
     absolutně pozicovaný panel v buy boxu mizel pod kartou „Doporučujeme
     zakoupit" (pozicovaný sourozenec za ním v DOM). Pozici počítá JS
     (assets/tk-pdp-shipping.js): na myši nalevo od kurzoru, na dotyku /
     klávesnici nad-pod triggerem. Stejný pattern jako omnibus tooltip.
     ⚠️ Žádný `transform` na .tk-shipopt ani na triggeru — udělal by z nich
     containing block a fixed panel by se pozicoval vůči nim. */
  .tk-shipopt__panel {
    /* Vzhled 1:1 s omnibus tooltipem (.tk-omnibus-trigger__tip v
       _product-buy-section.liquid): tmavá karta, lime akcent na částkách. */
    --tk-shipopt-ink: #0a0a0a;
    --tk-shipopt-accent: #ff5a00;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 24px));
    padding: 15px 18px 14px;
    border-radius: 12px;
    background: var(--tk-shipopt-ink);
    color: rgba(255, 255, 255, 0.85);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 2px 8px rgba(10, 10, 10, 0.18),
      0 16px 44px rgba(10, 10, 10, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      opacity 0.18s ease,
      visibility 0.18s ease,
      transform 0.18s ease;
  }

  .tk-shipopt__heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
  }

  .tk-shipopt__heading svg {
    flex: none;
    color: var(--tk-shipopt-accent, #ff5a00);
  }

  .tk-shipopt[data-open] .tk-shipopt__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-shipopt__panel,
    .tk-shipopt__icon {
      transition: none;
    }
  }

  /* ── Tabulka ────────────────────────────────────────────────── */
  .tk-shipopt__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .tk-shipopt__table th {
    padding: 0 8px 6px 0;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: start;
    color: rgba(255, 255, 255, 0.42);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .tk-shipopt__table td {
    padding: 8px 10px 8px 0;
    color: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .tk-shipopt__table tr:last-child td {
    border-bottom: none;
  }

  .tk-shipopt__table th:last-child,
  .tk-shipopt__table td:last-child {
    padding-inline-end: 0;
    text-align: end;
  }

  .tk-shipopt__price {
    font-weight: 700;
    white-space: nowrap;
    color: var(--tk-shipopt-accent, #ff5a00) !important;
  }

  /* ⚠️ Řádek „zdarma nad X" je jediná buňka s colspan=3, takže na něj sedlo
     pravidlo `td:last-child { text-align: end }` a fajfka i text utekly
     doprava. Fix = explicitní `text-align: start` + flex wrapper UVNITŘ buňky
     (flex přímo na `td` by ji vyřadil z table layoutu, proto __free-inner). */
  .tk-shipopt__free td {
    padding-top: 10px;
    padding-inline-end: 0;
    text-align: start;
  }

  .tk-shipopt__free-inner {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .tk-shipopt__free-inner > svg {
    flex: none;
  }

  .tk-shipopt__free strong {
    font-weight: 700;
    white-space: nowrap;
    color: var(--tk-shipopt-accent, #ff5a00);
  }

  .tk-shipopt__note {
    margin: 9px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
  }

  .tk-shipopt__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--tk-shipopt-accent, #ff5a00);
    transition: color 0.2s ease;
  }

  .tk-shipopt__link:hover {
    color: #fff;
  }

  .tk-shipopt__link svg {
    transition: transform 0.2s ease;
  }

  .tk-shipopt__link:hover svg {
    transform: translateX(2px);
  }
/* END_BLOCK:tk-shipping-options */

/* START_BLOCK:tk-spec-accordions (INDEX:172) */
/* Spigen: bez roletek — Materiály (nad features) a Kompatibilita (pod popisem) jsou vždy viditelné */
  .tk-spec { margin-block: 6px 4px; display: flex; flex-direction: column; gap: 14px; }
  .tk-spec--materials { margin-block: 0 4px; }
  .tk-spec__desc-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
  .tk-spec__desc-title img { display: none !important; }
  .tk-spec__title--features { margin-top: 6px; }
  /* nadpis popisu je vytažený nahoru → v samotném popisu ho skryjeme */
  .product-details:has(.tk-spec--with-title) [class*="product_description"] h2 { display: none !important; }
  .product-details:has(.tk-spec--with-title) [class*="product_description"] ul { margin-top: 0; }
  /* Spigen: v hero jen odrážky klíčových vlastností — intro odstavce, kapitoly (h3/p) a fotky z popisu
     se skryjí, když popis odrážky má (fotky a kapitoly vykresluje sekce O produktu). */
  .product-details [class*="product_description"]:has(ul) :is(h3, p, img, figure, h4, div:has(> img), div:has(> p > img)) { display: none !important; }
  /* odrážky vlastností ve Spigen červené */
  .product-details [class*="product_description"] ul li::marker { color: #ff5a00; }
  .tk-spec--compat { margin-block: 10px 4px; }
  .tk-spec__item { display: flex; flex-direction: column; gap: 8px; }
  .tk-spec__title { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.72); }
  .tk-spec__body { padding: 0; }
  .tk-spec__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .tk-spec__chip { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; padding: 5px 11px; border-radius: 999px; background: #ff5a00; color: #fff; border: 1px solid #ff5a00; }
  /* Odrážky kompatibility = stejná konstrukce jako odrážky popisu (Klíčové vlastnosti):
     nativní disc marker, `padding-inline-start: 1.5em`, velikost písma dědí z těla → tečky
     i začátek textu lícují s řádky v sekci nad tím (.text-block ul v base.css). */
  .tk-spec__list { margin: 0; padding: 0 0 0 1.5em; list-style: disc outside; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 16px; font-size: inherit; line-height: var(--line-height--body-loose, 1.7); color: rgb(var(--color-foreground-rgb) / 0.85); }
  .tk-spec__list li { padding-inline-start: 0.25em; }
  .tk-spec__list li::marker { color: #ff5a00; }
  .tk-spec__note { margin: 6px 0 0; font-size: 0.875rem; color: rgb(var(--color-foreground-rgb) / 0.72); }
  .tk-spec__notes { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: rgb(var(--color-foreground-rgb) / 0.72); }
  .tk-spec__list:empty + .tk-spec__notes { margin-top: 0; }
/* END_BLOCK:tk-spec-accordions */

/* START_BLOCK:tk-variant-switcher (INDEX:173) */
.tk-variant-switcher-block:empty { display: none; }
  .tk-variant-switcher-block .tk-color-switcher { margin-block: 2px 6px; }
  /* Buy box (Spigen): řada barevných teček, zalamuje se; fotka jen jako fallback bez hex barvy */
  .tk-variant-switcher-block .tk-color-switcher__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 2px 0 2px 2px;
  }
  .tk-variant-switcher-block .tk-color-switcher__option:not(.tk-color-switcher__option--dot) { width: 56px; gap: 6px; }
  .tk-variant-switcher-block .tk-color-switcher__swatch:not(.tk-color-switcher__swatch--dot) { width: 48px; height: 48px; border-radius: 10px; }
  .tk-variant-switcher-block .tk-color-switcher__name { font-size: 0.8125rem; max-width: 100%; overflow-wrap: anywhere; }
/* END_BLOCK:tk-variant-switcher */

/* START_BLOCK:variant-picker (INDEX:174) */
/* Premium swatch ring — box-shadow based, cross-browser consistent */
  .variant-picker-wrapper .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);
    border-radius: var(--variant-picker-swatch-radius);
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .variant-picker-wrapper .variant-option__button-label--has-swatch:hover {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3.5px rgb(var(--color-foreground-rgb) / 0.3);
    transform: scale(1.1);
  }

  .variant-picker-wrapper .variant-option__button-label--has-swatch:has(:checked) {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3.5px var(--color-foreground);
  }

  .variant-picker-wrapper .variant-option__button-label--has-swatch:has(:checked):hover {
    transform: scale(1.1);
  }
/* END_BLOCK:variant-picker */

/* START_BLOCK:video (INDEX:175) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:176) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* TK: radius sladeny s CTA buttony (8px misto pillu) — viz base.css "Sjednoceni CTA buttonu" */
  .account-actions__shop-login {
    --buttons-radius: var(--qty-radius, 8px);
  }

  .account-actions__google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #dadce0;
    border-radius: var(--qty-radius, 8px);
    background-color: #fff;
    color: #3c4043;
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .account-actions__google-btn:hover {
    background-color: #f8f9fa;
    border-color: #c6c9cd;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.10), 0 1px 3px 1px rgba(60, 64, 67, 0.06);
  }

  .account-actions__google-btn:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
  }

  .account-actions__google-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .account-actions__google-text {
    line-height: 1;
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 300px) {
      grid-template-columns: 1fr;
    }
  }

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  /* TK: "Dalsi moznosti prihlaseni" + Objednavky/Adresy — stejny recept jako PDP ATC
     (radius 8px, font 0.92rem/650, hover dark bg + lime text + lift). Specificita
     (0,3,0) s :hover > base .button:hover (0,2,0). */
  .account-actions__link.button,
  .account-actions__link.button-secondary {
    border-radius: var(--qty-radius, 8px);
    font-size: 0.92rem;
    font-weight: 650;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .account-actions__link.button:hover,
  .account-actions__link.button-secondary:hover {
    --button-background-color: #0a0a0a;
    --button-color: #ff5a00;
    border-color: #0a0a0a;
    box-shadow: 0 5px 14px rgba(10, 10, 10, 0.2);
  }

  .account-actions__link.button:active,
  .account-actions__link.button-secondary:active {
    transform: translateY(0);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

    .account-actions :is(a.button, a.button-secondary):focus-visible {
      outline: none;
      overflow: visible;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--focus-outline-offset));
        border: var(--focus-outline-width) solid currentColor;
        border-radius: var(--qty-radius, 8px);
        display: inherit;
      }
    }

    .account-actions a.button:focus-visible::after {
      border-color: var(--button-background-color);
      border-radius: var(--qty-radius, 8px);
    }
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:177) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
    anchor-name: --account-button-trigger;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:178) */
.account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:179) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;
    position-anchor: --account-button-trigger;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    left: unset;
    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    top: calc(anchor(bottom) + var(--header-padding));
    right: anchor(right);

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }

    @supports not (position-anchor: --account-button-trigger) {
      top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
      right: calc(var(--anchor-right) * 1px);
    }

    @supports not selector(:popover-open) {
      &.\:popover-open {
        --account-popover-opacity: 1;
        --account-popover-y: 0px;
      }
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }

    .account-popover__panel:popover-open {
      --account-popover-opacity: 0.7;
      --account-popover-y: 20px;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:add-to-cart-button (INDEX:180) */
.add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-video (INDEX:183) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bento-grid (INDEX:184) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

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

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific cases === */

    /* Exactly 1 item */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(1)) {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(2)) {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(4)) {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(5)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(7)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(8)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(10)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(11)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:185) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:188) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:189) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-discount (INDEX:191) */
.cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-heureka-consent (INDEX:194) */
.cart-heureka {
    display: block;
    margin-block-start: var(--margin-xs, 0.75rem);
    padding: 0.8rem 0.9rem;
    background: rgb(var(--color-foreground-rgb) / 0.035);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: var(--border-radius, 10px);
  }

  .cart-heureka__label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    cursor: pointer;
  }

  .cart-heureka__checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin: 0;
    margin-block-start: 0.02rem;
    display: grid;
    place-content: center;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.28);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .cart-heureka__checkbox::after {
    content: "";
    inline-size: 0.32rem;
    block-size: 0.62rem;
    margin-block-end: 0.12rem;
    border: solid rgb(var(--color-background-rgb, 255 255 255));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.13s ease;
  }

  .cart-heureka__checkbox:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .cart-heureka__checkbox:checked {
    background: rgb(var(--color-foreground-rgb));
    border-color: rgb(var(--color-foreground-rgb));
  }

  .cart-heureka__checkbox:checked::after {
    transform: rotate(45deg) scale(1);
  }

  .cart-heureka__checkbox:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.45);
    outline-offset: 2px;
  }

  .cart-heureka__text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
/* END_SNIPPET:cart-heureka-consent */

/* START_SNIPPET:cart-icon-component (INDEX:195) */
cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }
/* END_SNIPPET:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:197) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__table {
    width: 100%;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.75rem, 15cqi, 4.5rem) minmax(0, 1fr) auto;
    grid-template-areas:
      'media details  details'
      'media quantity price'
      'media error    error'
      'fbt   fbt      fbt';
    column-gap: var(--gap-md);
    row-gap: var(--gap-sm);
    align-items: start;
    padding: var(--padding-md);
    margin-bottom: var(--cart-items-gap);
    /* #f6f7f9 = scheme-2 background (standardni jemna seda plocha na webu) misto ciste sede rgb(fg/α) */
    background: #f6f7f9;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.06);
    border-radius: var(--style-border-radius-md);
    transition: background var(--animation-speed) var(--animation-easing);
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    margin-bottom: 0;
  }

  /* Nested (bundle) radky navazuji na svuj rodicovsky card bez mezery mezi nimi. */
  .cart-items__table-row:has(+ .cart-items__nested-line) {
    margin-bottom: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .cart-items__nested-line {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--cart-font-size--md);
    line-height: 1.3;
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
  }



  .cart-items__variant {
    display: inline-block;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    flex: 0 1 var(--quantity-selector-width);
    font-size: var(--cart-font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    align-self: center;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: var(--cart-font-size--md);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .cart-items__price-was {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-weight: var(--font-weight-normal, 400);
  }

  .cart-items__price .compare-at-price {
    font-size: var(--cart-font-size--xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__discount-badge {
    display: inline-block;
    background: #e53935;
    color: #fff;
    font-size: var(--cart-font-size--2xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 3px 6px;
    border-radius: var(--style-border-radius-xs);
    white-space: nowrap;
    font-variant-numeric: normal;
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
    font-weight: var(--font-weight-normal, 400);
  }

  /* MINI lišta „Hodí se k tomu" pod položkou (tk-upsell context 'cart-item',
     styly dlaždic/tooltipů sdílené v tk-upsell.liquid). Hairline oddělovač
     od obsahu položky; když fallback nic nenajde → celá buňka collapse. */
  .cart-items__fbt {
    grid-area: fbt;
    min-width: 0;
    margin-top: var(--margin-2xs, 4px);
    padding-top: var(--padding-xs, 8px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.07);
  }

  .cart-items__fbt:has(> .tk-upsell-recos--hidden) {
    display: none;
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--style-border-radius-sm);
    background: rgb(var(--color-foreground-rgb) / 0.03);
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--cart-font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  /* Kompaktní stepper + koš (na /cart; drawer má vlastní menší přes
     .cart-drawer overrides s vyšší specificitou) */
  .cart-items__quantity .quantity-selector {
    height: 2.4rem;
    min-height: 2.4rem;
  }

  .cart-items__remove {
    width: 2.4rem;
    height: 2.4rem;
  }

  .cart__original-total-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &:has(.cart__installments) {
      row-gap: var(--gap-xs);
    }
  }

  .cart__original-total-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--cart-font-size--sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart__total-value {
    font-size: var(--cart-font-size--2xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    /* TK: sladeno s CTA buttony (radius 8px misto pillu) — viz base.css "Sjednoceni CTA buttonu".
       Tahle rule je v compiled_assets/styles.css (loaduje se PO base.css), takze musi nest 8px sama. */
    --shopify-accelerated-checkout-button-border-radius: var(--qty-radius, 8px);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 4rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TK REDESIGN /cart (2026-08-28) — VZDUŠNÝ SEZNAM MÍSTO ŠEDÝCH KARET
     ⚠️ Všechno scopnuté na `.cart-page` (≥ 0,2,0). Tenhle snippet sdílí markup
     s cart DRAWEREM (`snippets/cart-drawer.liquid`), a ten si drží svoje karty —
     bez scopu by se rozsypal. Nové pravidlo pro /cart proto VŽDY s `.cart-page`.
     ═══════════════════════════════════════════════════════════════════════════ */
  .cart-page {
    --tk-cart-ink: #0f172a;
    --tk-cart-muted: #64748b;
    --tk-cart-line: rgb(15 23 42 / 0.09);
  }

  /* ── Řádek položky: žádná karta, jen hairline mezi položkami ── */
  .cart-page .cart-items__table-row {
    --tk-cart-media: 4.5rem;

    grid-template-columns: var(--tk-cart-media) minmax(0, 1fr) auto;
    column-gap: var(--gap-md);
    row-gap: var(--gap-sm);
    padding: var(--padding-lg, 20px) 0;
    margin-bottom: 0;
    background: none;
    border: 0;
    border-block-end: 1px solid var(--tk-cart-line);
    border-radius: 0;
  }

  .cart-page .cart-items__table-row:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  /* Bundle podřádek visí přímo pod rodičem — mezi nimi žádná linka */
  .cart-page .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-block-end: 0;
    padding-block-end: var(--padding-2xs, 6px);
  }

  .cart-page .cart-items__nested-line {
    padding-block-start: 0;
  }

  /* ── Náhled: čtvercová bílá dlaždice, produkt se nikdy neuřízne ── */
  .cart-page .cart-items__media-container {
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--tk-cart-line);
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  @media (hover: hover) {
    .cart-page .cart-items__media-container:hover {
      border-color: rgb(15 23 42 / 0.22);
      box-shadow: 0 6px 16px -8px rgb(15 23 42 / 0.3);
    }
  }

  /* Safari: `height: 100%` uvnitř aspect-ratio boxu se nevyřeší → obrázek měl přirozených 1440 px, řádek
     tabulky neviditelně narostl a náhled byl prázdný. Proto pevný čtverec přes aspect-ratio + max-height. */
  .cart-page .cart-items__media-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 100%;
    object-fit: contain;
  }
  .cart-page .cart-items__media-container { overflow: hidden; }

  /* ── Texty položky ── */
  .cart-page .cart-items__details {
    color: var(--tk-cart-muted);
  }

  .cart-page .cart-items__details > * + * {
    margin-block-start: 0.3rem;
  }

  .cart-page .cart-items__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--tk-cart-ink);
  }

  @media (hover: hover) {
    .cart-page .cart-items__title:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  .cart-page .cart-items__variants,
  .cart-page .cart-items__variants *,
  .cart-page .cart-items__bundle,
  .cart-page .cart-items__bundle * {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--tk-cart-muted);
  }

  /* Automatická sleva / dárek → lime pilulka (stejný jazyk jako lišta dopravy).
     ⚠️ Záměrně BEZ `.cart-page` scopu — pilulku chceme i v cart draweru. */
  .cart-items__discounts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .cart-items__discounts li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgb(15 23 42 / 0.75);
    background: rgb(255 90 0 / 0.16);
    border: 1px solid rgb(255 90 0 / 0.55);
    border-radius: 999px;
  }

  .cart-items__discount-dot {
    flex: none;
    width: 6px;
    height: 6px;
    background: #ff5a00;
    border-radius: 50%;
  }

  /* ── Cena: vpravo nahoře na lince s názvem ── */
  .cart-page .cart-items__price {
    align-self: start;
    gap: 4px;
    min-width: 6.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tk-cart-ink);
  }

  /* Bez scopu — cenu za kus chceme i v draweru */
  .cart-items__price-each {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .cart-page .cart-items__price-was {
    gap: 6px;
  }

  .cart-page .cart-items__price .compare-at-price {
    font-size: 0.8125rem;
    color: var(--tk-cart-muted);
  }

  .cart-page .cart-items__discount-badge {
    padding: 3px 7px;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    background: #dc2626;
    border-radius: 999px;
  }

  /* ── Stepper + Odebrat ── */
  .cart-page .cart-items__quantity {
    gap: 0.6rem;
  }

  .cart-page .cart-items__quantity .quantity-selector {
    height: 2.5rem;
    min-height: 2.5rem;
    border-radius: 999px;
  }

  /* ⚠️ `.button` v base.css je `display: grid` → ikona a popisek „Odebrat" se
     naskládaly POD SEBE. Musí to být inline-flex v řádku. */
  .cart-page .cart-items__remove {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 2.5rem;
    min-height: 0;
    gap: 6px;
    padding-inline: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--tk-cart-muted);
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease;
  }

  .cart-page .cart-items__remove svg {
    flex: none;
    width: 14px;
    height: 14px;
  }

  /* Placený dárek (nárok zanikl, JS ho nestihl odebrat) — červené varování.
     Bez scopu: musí být vidět na /cart i v draweru. */
  .cart-items__gift-lost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.3;
    color: #b91c1c;
    background: rgb(220 38 38 / 0.09);
    border: 1px solid rgb(220 38 38 / 0.35);
    border-radius: 999px;
  }

  .cart-items__gift-lost svg {
    flex: none;
  }

  /* ⚠️ Řádek účtovaného dárku se ODHALÍ AŽ PO 1,6 s.
     Při přidávání dárku do košíku existuje krátký okamžik, kdy ho Shopify vrátí
     ještě za plnou cenu (sleva se dopočítá až vzápětí). Řádek s červeným
     varováním v tu chvíli probliknul a zase zmizel — nešlo to ani přečíst a
     působilo to jako chyba (nahlášeno 2026-08-29).
     Když je stav přechodný, morph řádek odstraní dřív, než se stihne ukázat.
     Když je stav skutečný, zákazník ho po chvilce uvidí — pojistka drží.
     ⚠️ `display` v keyframes umí Chrome 116+/Safari 17.4+; kde ne, řádek se
     ukáže hned (= původní chování, tedy bezpečný fallback). */
  .cart-items__table-row:has(.cart-items__gift-lost) {
    animation: tk-gift-lost-reveal 1.6s steps(1, end) both;
  }

  @keyframes tk-gift-lost-reveal {
    from { display: none; }
    to { display: grid; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-items__table-row:has(.cart-items__gift-lost) {
      animation: none;
    }
  }

  /* ⚠️ Popisek „Odebrat" schovat NESCOPOVANĚ — span je v markupu vždycky, takže
     scopnutý `display: none` by ho v cart DRAWERU nechal viditelný a v úzkém
     2rem tlačítku by se zalomil pod ikonu. Ukazuje se až na širokém /cart
     (container query níž). */
  .cart-items__remove-label {
    display: none;
  }

  @media (hover: hover) {
    .cart-page .cart-items__remove:hover {
      color: #dc2626;
      background: rgb(220 38 38 / 0.07);
    }
  }

  /* ── Mini lišta doporučení pod položkou (úzký /cart) ──
     ⚠️ ŽÁDNÁ linka nad lištou. Po zrušení karet dělal horní hairline z lišty
     opticky vlastní blok a nešlo poznat, ke které položce patří (uživatel
     2026-08-28). Přiřazení dělá ODSAZENÍ: lišta začíná tam, kde text položky,
     a od SVÉ položky ji dělí menší mezera než od té následující. */
  .cart-page .cart-items__fbt {
    margin-top: 0.5rem;
    padding-top: 0;
    padding-inline-start: calc(var(--tk-cart-media) + var(--gap-md));
    border-top: 0;
  }

  /* ══ ŠIROKÝ /cart ══════════════════════════════════════════════════════════
     Cena jde NAHORU vedle názvu; dolní pás nese stepper vlevo a doporučení
     vpravo. ⚠️ Stepper i doporučení sedí ve STEJNÉ grid oblasti `actions` —
     grid to dovolí a `justify-self` je rozhodí na opačné strany. Díky tomu
     šířka doporučení (1 / 2 / 3 dlaždice) NEPOSOUVÁ cenu = konec cik caku,
     který dřív řešil dopočítávaný pevný sloupec.
     ⚠️ Uvnitř `@container` nelze stylovat `.cart-page` (je to PŘEDEK containeru
     `.cart-items`) — proměnné proto sedí na řádku, ne na stránce. */
  @container cart-items (min-width: 800px) {
    .cart-page .cart-items__table-row {
      --tk-cart-media: 6.25rem;

      grid-template-areas:
        'media details price'
        'media actions actions'
        'media error   error';
      column-gap: var(--gap-lg);
      padding-block: 1.25rem;
    }

    .cart-page .cart-items__title {
      font-size: 1rem;
    }

    .cart-page .cart-items__quantity {
      grid-area: actions;
      align-self: center;
      justify-self: start;
    }

    .cart-page .cart-items__fbt {
      grid-area: actions;
      align-self: center;
      justify-self: end;
      margin: 0;
      padding: 0;
      border: 0;
    }

    /* label inline PŘED dlaždicemi (v pásu je vodorovně místa dost) */
    .cart-page .cart-items__fbt .tk-upsell--mini {
      flex-direction: row;
      align-items: center;
      gap: 6px 10px;
    }

    .cart-page .cart-items__remove-label {
      display: inline;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:198) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    padding-block: var(--padding-xs);
    margin-block-start: var(--margin-3xs);
  }

  /* Když nad slevovým kódem nic není (mezisoučet z cart-level slevy = prázdný
     .cart__original-total-container), zruš horní border/padding cart-actions —
     jinak tam visí osamocený divider nad „Slevový kód". */
  .cart__original-total-container:empty + .cart-actions {
    border-block-start: none;
    padding-block-start: 0;
    margin-block-start: 0;
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    padding-block-start: var(--margin-xl);
  }

  .cart__installments {
    color: var(--color-foreground);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:200) */
.collection-card {
    --fixed-card-height: var(--height-small);
    flex: 1 1 var(--card-width-small);
    width: 100%;
    position: relative;
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--collection-card-gap);
    display: flex;
    flex-direction: column;
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    z-index: var(--layer-flat);
    pointer-events: none;

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--collection-card-gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment);
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }

    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form (INDEX:203) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_SNIPPET:contact-form */

/* START_SNIPPET:disclosure-content (INDEX:204) */
.disclosure-content {
    display: grid;
    grid-template-rows: 1fr;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(-5% -5% 0 -5%);
    opacity: 1;

    &[inert] {
      grid-template-rows: 0fr;
      opacity: 0;
    }

    & > * {
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-content {
      transition-property: grid-template-rows, opacity;
      transition-duration: var(--surface-transition-duration);
      transition-timing-function: var(--surface-transition-timing);
    }
  }
/* END_SNIPPET:disclosure-content */

/* START_SNIPPET:disclosure-trigger (INDEX:205) */
.disclosure-trigger {
    cursor: pointer;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-sm);
    width: 100%;
    border: none;
    background: #0000;

    &[aria-expanded='true'] .horizontal {
      rotate: 90deg;
    }

    &:is(:hover, :focus-visible) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }

    .horizontal {
      transform-box: fill-box;
      transform-origin: center;
    }

    svg {
      aspect-ratio: 1;
      width: var(--icon-size-xs);
    }
  }

  .disclosure-trigger__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  @media (prefers-reduced-motion: no-preference) {
    .disclosure-trigger .horizontal {
      transition: rotate var(--surface-transition-duration) var(--surface-transition-timing);
    }
  }
/* END_SNIPPET:disclosure-trigger */

/* START_SNIPPET:divider (INDEX:206) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:209) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    .featured-blog-posts-card__image {
      min-height: 200px;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:210) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:211) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:facets-actions (INDEX:212) */
/* Facets - Actions */
  .facets__actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      --button-color: var(--color-primary);

      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      background-color: transparent;
      position: static;
      transform: none;
    }
  }

  @starting-style {
    .facets__clear-all.active {
      opacity: 0;
      transform: translateY(100%);
    }

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:213) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:filters-toggle (INDEX:214) */
/* Facets - Toggle */
  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  /* Filter count */
  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }
/* END_SNIPPET:filters-toggle */

/* START_SNIPPET:gift-card-recipient-form (INDEX:217) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form */

/* START_SNIPPET:grid-density-controls (INDEX:220) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:221) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:222) */
.cart-drawer {
    --cart-drawer-padding: var(--padding-lg) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .cart-drawer__dialog {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
  }

  .cart-drawer__content {
    padding: 0;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .header-actions__action .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:223) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

    @media screen and (min-width: 750px) {
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[open] .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-lg);
    will-change: transform;
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:229) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    white-space: pre;
    width: 100%;
    will-change: font-size;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-space {
    display: inline-flex;
    width: 0.5ch;
  }

  :is(.jumbo-text-char, .jumbo-text-line) {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    [data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'],
    .ready[data-text-effect='reveal'] .jumbo-text-line {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-char {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'],
    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:232) */
.facets input:checked + label {
    font-weight: 500;
  }
  /* Spigen: zaškrtnuté položky filtrů v brand červené */
  .facets .checkbox__input:checked + .checkbox__label .icon-checkmark { background-color: #ff5a00 !important; border-color: #ff5a00 !important; }
  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark { background-color: #e04f00 !important; border-color: #e04f00 !important; }
  .facets .checkbox:has(.checkbox__input:checked) .checkbox__label-text { color: #ff5a00; font-weight: 600; }
  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark { border-color: #ff5a00; background-color: rgb(255 90 0 / 0.06); }
  .facets__pill-input:checked + .facets__pill-label { --pill-label-color-rgb: 255 255 255; --pill-label-background-color-rgb: 255 90 0; }
  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(input:checked) { box-shadow: inset 0 0 0 2px #ff5a00 !important; color: #ff5a00; }
  .facets__active-pill, .facets__active-filter-pill { --pill-label-border-color: #ff5a00; }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;

    &.variant-option--swatches-disabled,
    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;

    .variant-option--swatches-disabled &,
    .variant-option--swatches:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .variant-option--images {
    position: relative;
  }

  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover:not(:has(input:disabled)),
    &:has(input:checked) {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    &:has(input:disabled),
    &:has(input:disabled):hover {
      --image-facet-border-opacity: 0;

      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      img {
        opacity: var(--disabled-opacity);
      }

      input,
      label,
      .facets__image-label {
        cursor: not-allowed;
      }

      .facets__image-wrapper {
        border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
        border-radius: var(--image-facet-border-radius);
      }
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;

    .variant-option--images:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
    font-weight: 500;
  }

  .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:233) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .drawer-localization__button .icon-flag,
  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-foreground);
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector,
  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:234) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:242) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:243) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;
    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page']):not(.pagination__link--gap):not(
        .pagination__link--disabled
      )::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap):not(.pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap):not(.pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;
      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:predictive-search-products-list (INDEX:245) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:246) */
.predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:predictive-search (INDEX:247) */
predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* TK: „Vyhledat" submit tlačítko v hlavičce modalu. Skryté dokud je input
     prázdný — stav čteme z [hidden] reset buttonu (JS ho toggluje podle obsahu
     inputu), takže nepotřebujeme vlastní JS. Vzhled = signature CTA (dark
     #0a0a0a → lime #ff5a00 na hoveru), jen kompaktní. */
  .predictive-search__submit-button {
    --button-background-color: #0a0a0a;
    --button-color: #fff;

    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 0;
    padding-block: 0;
    padding-inline: 16px;
    margin-inline-end: var(--margin-2xs);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .predictive-search-form__header-inner:has(.predictive-search__reset-button:not([hidden]))
    .predictive-search__submit-button {
    display: inline-flex;
  }

  .predictive-search__submit-button:hover {
    --button-background-color: #0a0a0a;
    --button-color: #ff5a00;
  }

  .predictive-search__submit-button:active {
    transform: scale(0.97);
    transition: transform 100ms var(--animation-timing-active);
  }

  @media screen and (max-width: 749px) {
    .predictive-search__submit-button {
      height: 32px;
      padding-inline: 12px;
      font-size: 0.8125rem;
      margin-inline-end: 0;
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  /* Signature CTA design (radius 8px, dark #0a0a0a + lime #ff5a00 hover) je
     v assets/base.css (sjednoceny CTA recept) — base.css se loaduje az za
     compiled_assets, takze hover custom props vyhrajou nad .button-primary. */
  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }

  /* Recent searches chips */
  .tk-recent-searches {
    padding-inline: var(--padding-xl);
    margin-block-end: var(--margin-md);
  }

  .tk-recent-searches[hidden] {
    display: none;
  }

  .tk-recent-searches__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-block-end: var(--margin-xs);
  }

  .tk-recent-searches__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .tk-recent-searches__item {
    list-style: none;
  }

  .tk-recent-searches__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: var(--color-foreground);
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .tk-recent-searches__chip:hover {
    background: rgb(var(--color-foreground-rgb) / 0.12);
    text-decoration: none;
  }

  .tk-recent-searches__chip:active {
    transform: scale(0.97);
  }

  .tk-recent-searches__chip-label {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-filter (INDEX:248) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }

  /* Dual range slider */
  .price-facet__slider {
    position: relative;
    height: 32px;
    margin: 4px 0 8px;
    max-width: 100%;
    overflow: hidden;
  }
  .price-facet__slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: #e0e0e0;
    border-radius: 2px;
  }
  .price-facet__slider-range {
    position: absolute;
    height: 100%;
    background: #ff5a00;
    border-radius: 2px;
  }
  .price-facet__slider-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    margin: 0;
    padding: 0;
    height: 0;
  }
  .price-facet__slider-thumb::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ff5a00;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
  }
  .price-facet__slider-thumb::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ff5a00;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
  }
  .price-facet__slider-thumb--max::-webkit-slider-thumb {
    z-index: 2;
  }
  .price-facet__slider-thumb--max::-moz-range-thumb {
    z-index: 2;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card-badges (INDEX:250) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card (INDEX:252) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* Hide the variant swatches for product cards that show a swatches variant picker */
  :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches {
    display: none;
  }

  /* For single-option products with swatches: always show add-to-cart, always hide choose button */
  :is(.product-card):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    .quick-add__button--choose {
    display: none;
  }

  /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component))
    .quick-add__button--add {
    display: none;
  }

  /* Hover effect for single variant product cards and product blocks */

  /* stylelint-disable selector-max-specificity */
  :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover {
    & .quick-add__button--choose {
      display: none;
    }

    & .quick-add__button--add {
      display: grid;
    }
  }

  .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows {
    display: none;
  }

  .product-card[data-no-swatch-selected]
    slideshow-component[data-generic-media-size='1']
    slideshow-arrows:has(+ slideshow-slides slideshow-slide[variant-image]:not([hidden])) {
    display: flex;
  }

  .product-card .variant-option__swatch svg {
    display: none;
  }

  .product-card [data-available-count='0'] ~ svg {
    display: block;
  }

  .product-card .jdgm-prev-badge__text {
    display: none !important;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:256) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  /* TK: prevent stray clicks while a facet morph is in flight.
     Browsers with View Transition API also cross-fade automatically. */
  #ResultsList[data-tk-morphing] {
    pointer-events: none;
  }
  /* Fallback dim for browsers without View Transition support */
  @supports not (view-transition-name: none) {
    #ResultsList[data-tk-morphing] {
      opacity: 0.65;
      transition: opacity 0.18s ease;
    }
    #ResultsList {
      transition: opacity 0.25s ease;
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-media (INDEX:257) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quick-add-modal (INDEX:259) */
.quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    height: fit-content;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    max-width: var(--wide-content-width);
    overflow-y: auto;
    max-height: 100vh;

    @media screen and (max-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
    /* Two column, small first image */
    .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
    .product-media-container:nth-of-type(odd)
    .product-media > *,
    /* Two column, large first image */
    .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
      .product-media-container:is(:first-of-type, :nth-of-type(even))
      .product-media > *,
      /* Carousel */
    .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 750px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 750px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .variant-picker__form {
    display: block;
  }

  .quick-add-modal__content .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 750px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
    }
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }

  .quick-add-modal__content .product-details .variant-picker {
    --product-swatches-padding-block-end: 0px;

    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    /* Prevent overlap between title and close button */
    padding-inline: 0 calc(var(--minimum-touch-target) / 2);
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: min(var(--gap-2xl), var(--gap));
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:first-child {
      border-top-right-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:last-child {
      border-bottom-right-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding: var(--padding-2xl);
    max-height: 100%;
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media slideshow-controls {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:260) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-top: calc(var(--quick-add-offset) + var(--padding-block-start));
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-left: calc(var(--quick-add-offset) + var(--padding-inline-end));

    position: absolute;
    display: var(--quick-add-mobile-display, none);
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    inset: max(var(--quick-add-top), calc((var(--border-radius) + var(--quick-add-top)) * (1 - cos(45deg))))
      max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))))
      max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))))
      max(var(--quick-add-left), calc((var(--border-radius) + var(--quick-add-left)) * (1 - cos(45deg))));
    width: auto;
    height: auto;
    z-index: var(--layer-raised);
    cursor: default;
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);

      display: var(--quick-add-display, flex);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: transparent;
  }

  .quick-add__button {
    display: grid;
    padding: var(--padding-xs) var(--padding-sm);
    align-items: center;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-color: transparent;
    box-shadow: var(--shadow-popover);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    border-radius: 100px;

    @media screen and (min-width: 750px) {
      display: none;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }
  }

  /* Sold-out state: always show disabled button, dim it, replace text via CSS.
     :not([data-loading]) prevents flash during swatch variant switching. */
  .quick-add .quick-add__button[disabled]:not([data-loading]) {
    display: grid !important;
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
  }

  .quick-add .quick-add__button[disabled]:not([data-loading]) .add-to-cart-icon {
    display: none;
  }

  .quick-add .quick-add__button[disabled]:not([data-loading]) .add-to-cart-text__content {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  .quick-add .quick-add__button[disabled]:not([data-loading]) .add-to-cart-text__content::after {
    content: var(--sold-out-label, 'Sold out');
    font-size: 0.875rem;
    line-height: 1;
  }

  /* Show quick-add button on product card hover (not just image hover) */
  @media screen and (min-width: 750px) {
    product-card:hover .quick-add__button {
      display: grid;
      will-change: margin, opacity;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
    }
  }

  .quick-add__button .add-to-cart-text {
    gap: var(--gap-2xs);
    line-height: 1;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    animation-name: none;
  }

  .quick-add__button .add-to-cart-text--added {
    position: relative;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: end;
    line-height: 1;

    @media screen and (min-width: 750px) {
      width: 0;
    }
  }

  .quick-add__button .add-to-cart-text__content {
    interpolate-size: allow-keywords;
  }

  .quick-add__button.atc-added .add-to-cart-text {
    opacity: 0;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    opacity: 1;
    width: auto;

    @supports (width: calc-size(auto, size)) {
      width: calc-size(auto, size);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  /* Sold-out notification toast */
  .quick-add-toast {
    position: fixed;
    top: var(--padding-md, 16px);
    right: var(--padding-md, 16px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 8px);
    padding: var(--padding-sm, 12px) var(--padding-md, 16px);
    background-color: #fde8e8;
    color: #991b1b;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: min(400px, calc(100vw - 2 * var(--padding-md, 16px)));
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .quick-add-toast--visible {
    opacity: 1;
    transform: translateX(0);
  }

  .quick-add-toast__icon {
    flex-shrink: 0;
    display: flex;
    color: #dc2626;
  }

  .quick-add-toast__text strong {
    font-weight: 600;
  }

  @keyframes atc-fade-in {
    from {
      opacity: 0;
      transform: translateX(1em);
      position: absolute;
    }

    to {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }
  }

  @keyframes atc-fade-out {
    from {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }

    to {
      opacity: 0;
      transform: translateX(-1em);
      position: absolute;
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:261) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  /* kotvení badge overlaye (.tk-card-badges) na obrázek, ne na celou kartu */
  .resource-card__media {
    position: relative;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:262) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-modal (INDEX:267) */
/* Search modal — premium redesign */
  .search-modal {
    --search-border-radius: 16px;
    --search-border-width: 0;
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-modal__content {
    --modal-top-margin: var(--search-modal-top, 5dvh);
    --modal-width: min(1120px, 90dvw); /* Spigen: širší okno na desktopu */
    /* mobil (fullscreen) — zachovat dosavadní výšku */
    --modal-max-height: 80dvh;

    padding: 0;
    border: none;
    background: transparent;

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      max-width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
      /* Obsah vyplní dostupnou výšku od search baru dolů (víc karet vidět),
         se zachováním ~72px na search header + spodní okraj → modal se vejde
         do viewportu a zbytek se scrolluje (viz scroll-down šipka). */
      --modal-max-height: calc(100dvh - var(--modal-top-margin, 5dvh) - 72px);
    }
  }

  /* Premium backdrop — instant cover, then blur fades in */
  .search-modal__content::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Hide backdrop on mobile (fullscreen) */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: top center;
    animation: tk-search-open 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border-radius: var(--search-border-radius);
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(0, 0, 0, 0.05);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: tk-search-close 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  @keyframes tk-search-open {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(-8px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes tk-search-close {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    to {
      opacity: 0;
      transform: scale(0.96) translateY(-8px);
    }
  }

  .search-modal__content[open] {
    display: flex;
  }

  /* Search input — larger, more prominent */
  .search-modal__content .search-input {
    font-size: 18px;
    padding-block: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .search-modal__content .predictive-search-form__header {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    background: var(--color-background);
    padding: 4px 8px;

    @media screen and (min-width: 750px) {
      padding: 4px 12px;
      border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    }
  }

  .search-modal__content .predictive-search-form__header-inner {
    border: none;
    border-radius: 0;
  }

  /* Results area — výška z --modal-max-height (viz .search-modal__content),
     aby modal vždy seděl ve viewportu a víc karet bylo vidět. */
  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .search-modal__content .predictive-search-results__inner {
    padding-block: 20px;
  }

  /* Reset (Vymazat) button — fit text on desktop */
  .search-modal__content .predictive-search__reset-button {
    flex-shrink: 0;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
    font-size: 13px;
  }

  @media screen and (min-width: 750px) {
    .search-modal__content .predictive-search__reset-button {
      padding-inline: 12px;
      font-size: 14px;
    }
  }

  /* Close button — subtle circle */
  .search-modal__content .predictive-search__close-modal-button {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }

  .search-modal__content .predictive-search__close-modal-button:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }

  /* Content wrapper — clean bottom corners */
  .search-modal__content .predictive-search-form__content-wrapper {
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  /* ===== Product cards — mega menu style ===== */

  .search-modal__content .predictive-search-results__wrapper-products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--gap-sm);
  }

  @media screen and (min-width: 750px) {
    .search-modal__content .predictive-search-results__wrapper-products {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }

  /* (Capování search-results na 4 řeší .tk-ps-expandable + "Zobrazit více" —
     viz sections/predictive-search.liquid. Compact/recently-viewed = carousel
     zobrazí vše, žádný nth-child hide nepotřebují.) */

  /* ===== Bestsellery (empty state) — kompaktní jako "nedávno zobrazené" ===== */
  /* 6 karet v řadě na desktopu, menší karty/swatche. Vyšší specificita (2 třídy
     wrapperu) + !important, ať přebije repeat(4)/repeat(2) z pravidel výše. */
  .search-modal__content .predictive-search-results__wrapper-products.predictive-search-results__wrapper-products--compact {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: var(--gap-sm);
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .resource-card__title {
    font-size: 13px;
    -webkit-line-clamp: 3;
    min-height: calc(3 * 10px * 1.3);
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .price {
    font-size: 13px;
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .compare-at-price {
    font-size: 13px;
    opacity: 0.75;
    text-decoration-thickness: 1px;
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .price-discount-badge {
    font-size: 13px;
    padding: 1px 5px;
  }

  /* Spigen: tečky variant v celém vyhledávacím okně vždy kulaté */
  .search-modal__content .tk-card-swatch--dot { border-radius: 50% !important; }

  /* Menší swatche v úzkých kartách (sibling i mini) */
  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-card-swatch--sibling {
    width: 14px;
    height: 14px;
    border-radius: 50%; /* Spigen: barevné tečky, ne čtverečky */
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-card-swatches--sibling {
    gap: 4px;
    margin-top: 4px;
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-mini-swatches .tk-mini-swatch {
    width: 10px;
    height: 10px;
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-mini-swatches .tk-mini-swatch--image {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }

  /* ===== Bestsellery — SJEDNOCENÁ VÝŠKA KARET =====
     Karty se lišily výškou podle přítomnosti swatchů a podle toho, jestli se
     akční cena zalomila. Fixujeme všechny variabilní části:
     (1) cena vždy na 1 řádek (nowrap) — akční blok se nezalomí,
     (2) swatch zóna = 1 fixní řádek, rezervovaný i když je prázdný (mini
         container se renderuje vždy, i bez swatchů).
     Obrázek (čtverec, responsivní) + název (fixní 3 řádky) už výšku nemění.
     → všechny karty stejná výška. */
  /* Akční ceny NAD SEBE (ne vedle sebe — v úzké kartě se překrývaly):
     přeškrtnutá na 1. řádku, akční cena + -X% pill na 2. řádku, vše centrované.
     `min-height` rezervuje 2 řádky i pro NEAKČNÍ produkt (1 cena) → karty
     zůstanou stejně vysoké. `white-space: nowrap` drží každou cenu vcelku. */
  .search-modal__content .predictive-search-results__wrapper-products--compact [ref="priceContainer"] {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    row-gap: 0;
    column-gap: 4px;
    min-height: calc(2 * 12px * 1.3);
    white-space: nowrap;
  }

  /* Deterministické pořadí: přeškrtnutá (order 0, vlastní řádek nahoře),
     akční cena (order 1) + -X% (order 2) pod ní. ⚠️ MUSÍ se řadit i cenová
     skupina — JS sibling-swap (tk-product-card.js) renderuje ceny v OPAČNÉM
     pořadí než Liquid (price→compare vs compare→price); bez explicitního
     order:1 na .price skončila přeškrtnutá jednou nahoře, jindy uprostřed. */
  .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product [ref="priceContainer"] > span:has(.compare-at-price) {
    order: 0;
    flex: 0 0 100%;
    text-align: center;
  }

  .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product [ref="priceContainer"] > span:has(.price) {
    order: 1;
  }

  /* Grid stabilita — karty se nesmí roztáhnout přes 1fr kvůli obsahu */
  .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product,
  .search-modal__content .predictive-search-results__wrapper-products--compact .resource-card__content {
    min-width: 0;
  }

  /* Swatch zóna = 1 fixní řádek (nowrap → nezalomí na víc řádků; height drží
     výšku i když prázdná). Bez overflow:hidden, ať hover „pop" swatchu neuřízne. */
  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-mini-swatches,
  .search-modal__content .predictive-search-results__wrapper-products--compact .tk-card-swatches--sibling {
    min-height: 22px;
    height: 22px;
    margin-top: 4px;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Produkt má typicky BUĎ mini NEBO sibling swatche. Když má sibling (v obsahu),
     prázdný mini reserve (za kartou) skryj — jinak by karta měla 2 swatch řádky. */
  .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product:has(.tk-card-swatches--sibling) .tk-mini-swatches {
    display: none;
  }

  .search-modal__content .predictive-search-results__card--product {
    display: flex;
    flex-direction: column;
    padding: 8px !important;
    border-radius: 10px !important;
    transition: background 0.25s ease !important;
  }

  .search-modal__content .predictive-search-results__card--product,
  .search-modal__content .predictive-search-results__card--product:active,
  .search-modal__content .predictive-search-results__card--product[aria-selected='true'] {
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    background-color: transparent !important;
    margin: 0 !important;
    outline: none !important;
    border-color: transparent !important;
  }

  .search-modal__content .predictive-search-results__card--product:hover {
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    margin: 0 !important;
    outline: none !important;
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card {
    --resource-card-corner-radius: 0;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    height: auto;
    transition: none;
    flex: 1;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card,
  .search-modal__content .predictive-search-results__card--product .resource-card:hover {
    box-shadow: none;
    background: transparent;
    transform: none;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--color-background);
    overflow: hidden;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    transition: transform 0.4s ease;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card:hover .resource-card__image {
    transform: scale(1.04);
  }

  .search-modal__content .predictive-search-results__card--product .resource-card__image--secondary {
    display: none !important;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card__content {
    min-width: 0;
    gap: 3px;
    text-align: center;
    padding: 0;
  }

  /* ⚠️ `text-align: center` výše NECENTRUJE hvězdy — `.tk-rating-badge` je flex
     kontejner, takže na rozmístění jeho položek text-align nepůsobí a hvězdy by
     se packly doleva, zatímco název je uprostřed. Stejný důvod, proč má
     `[ref="priceContainer"]` níže vlastní `justify-content: center`.
     Řádkové (non-compact) výsledky si vlastní `justify-content: flex-start`
     přebijí níž — tam je název zarovnaný vlevo. */
  .search-modal__content .predictive-search-results__card--product .tk-rating-badge {
    justify-content: center;
  }

  .search-modal__content .predictive-search-results__card--product .resource-card__title {
    font-size: 13px;
    font-weight: 400;
    color: #1d1d1f;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 12px * 1.3);
  }

  .search-modal__content .predictive-search-results__card--product [ref="priceContainer"] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }

  .search-modal__content .predictive-search-results__card--product [ref="priceContainer"] > span:has(.compare-at-price) {
    order: 1;
  }

  .search-modal__content .predictive-search-results__card--product .compare-at-price {
    font-size: 13px;
    opacity: 0.75;
  }

  .search-modal__content .predictive-search-results__card--product .price {
    font-size: 13px;
    font-weight: 700;
    color: #0a0a0b;
  }

  /* Sleva: aktuální cena červeně, badge červený pill (sjednoceno s kartami) */
  .search-modal__content .predictive-search-results__card--product [ref="priceContainer"]:has(.compare-at-price) .price {
    color: #dc2626;
    font-weight: 800;
  }

  .search-modal__content .predictive-search-results__card--product .price-discount-badge {
    order: 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 999px;
    padding: 1px 5px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Scroll-down hint (chevron) — když výsledky přetékají a není vidět footer */
  .search-modal__content .predictive-search-form__content {
    position: relative;
  }

  .search-modal__content .predictive-search-form__content.tk-ps-scrollable:not(.tk-ps-at-bottom)::after {
    content: '';
    position: sticky;
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    margin-top: -56px;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center 60%,
      linear-gradient(to top, var(--color-background) 14%, rgb(var(--color-background-rgb) / 0.85) 50%, rgb(var(--color-background-rgb) / 0));
    background-size: 20px 20px, 100% 100%;
    pointer-events: none;
    z-index: 5;
    animation: tkMegaScrollHintBob 1.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  }

  /* Swatches in search — same as mega menu */
  .search-modal__content .tk-mini-swatches {
    justify-content: center;
    margin-top: 2px;
    position: relative;
    z-index: 2;
  }

  /* Recently viewed — smaller cards (desktop 6 v řadě; mobil = carousel níže) */
  .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  @media screen and (min-width: 750px) {
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products {
      grid-template-columns: repeat(6, 1fr) !important;
    }
  }

  .search-modal__content .recently-viewed-wrapper .resource-card__title {
    font-size: 13px;
    -webkit-line-clamp: 3;
    min-height: calc(3 * 10px * 1.3);
  }

  .search-modal__content .recently-viewed-wrapper .price {
    font-size: 13px;
  }

  .search-modal__content .recently-viewed-wrapper .tk-mini-swatches .tk-mini-swatch {
    width: 10px;
    height: 10px;
  }

  .search-modal__content .recently-viewed-wrapper .tk-mini-swatches .tk-mini-swatch--image {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }

  /* Sibling swatche menší i v recently-viewed (jako compact bestsellery) */
  .search-modal__content .recently-viewed-wrapper .tk-card-swatch--sibling {
    width: 14px;
    height: 14px;
    border-radius: 50%; /* Spigen: barevné tečky, ne čtverečky */
  }

  .search-modal__content .recently-viewed-wrapper .tk-card-swatches--sibling {
    gap: 4px;
    margin-top: 4px;
  }

  /* ===== Nedávno zobrazené — SJEDNOCENÁ VÝŠKA KARET (stejně jako bestsellery) =====
     Doplní menší velikosti akční ceny/badge + akční ceny nad sebe s rezervou
     2 řádků + swatch zóna = 1 fixní řádek. */
  .search-modal__content .recently-viewed-wrapper .compare-at-price {
    font-size: 13px;
    opacity: 0.75;
    text-decoration-thickness: 1px;
  }

  .search-modal__content .recently-viewed-wrapper .price-discount-badge {
    font-size: 13px;
    padding: 1px 5px;
  }

  .search-modal__content .recently-viewed-wrapper [ref="priceContainer"] {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    row-gap: 0;
    column-gap: 4px;
    min-height: calc(2 * 12px * 1.3);
    white-space: nowrap;
  }

  /* Deterministické pořadí cen (viz stejný komentář u bestsellerů výše) —
     přeškrtnutá order 0 nahoře, akční cena order 1 + -X% order 2 pod ní.
     order:1 na .price je NUTNÝ kvůli opačnému pořadí z JS sibling-swapu. */
  .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product [ref="priceContainer"] > span:has(.compare-at-price) {
    order: 0;
    flex: 0 0 100%;
    text-align: center;
  }

  .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product [ref="priceContainer"] > span:has(.price) {
    order: 1;
  }

  .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product,
  .search-modal__content .recently-viewed-wrapper .resource-card__content {
    min-width: 0;
  }

  .search-modal__content .recently-viewed-wrapper .tk-mini-swatches,
  .search-modal__content .recently-viewed-wrapper .tk-card-swatches--sibling {
    min-height: 22px;
    height: 22px;
    margin-top: 4px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product:has(.tk-card-swatches--sibling) .tk-mini-swatches {
    display: none;
  }

  /* ===== Section headings — subtle uppercase ===== */
  .search-modal__content .predictive-search-results__title {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.72);
    font-weight: 600;
  }

  /* ===== "View all" button — subtler ===== */
  .search-modal__content .predictive-search-results__see-all {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }

  .search-modal__content .predictive-search-results__see-all:hover {
    opacity: 1;
  }

  /* ===== Produkty ve VÝSLEDCÍCH vyhledávání = řádky s ikonkou (desktop i mobil) =====
     Jako kolekce/stránky, ne grid. Cílí jen na search-results wrapper: přímý
     potomek __products (vyloučí recently-viewed, vnořený) + :not(--compact)
     (vyloučí bestsellery). Bestsellery + recently-viewed = carousel (níže). */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 2px;
  }

  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .predictive-search-results__card--product {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    scroll-snap-align: none;
  }

  /* Klikaci overlay pres CELY radek vcetne paddingu <li>. `.resource-card__link`
     je absolutne pozicovany vuci `.resource-card` (inset: 0), takze bez tohohle
     konci presne na hrane karty a 6/8px ramecek <li> — tedy ta cast, ktera se
     na hoveru podbarvuje — klikatelny nebyl. Zaporne insety = presne padding
     <li>; mezera mezi radky (flex gap 2px) zustava nezabrana, takze se overlaye
     sousednich radku neprekryvaji. */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card__link {
    inset: -6px -8px;
  }

  /* karta → řádek: thumbnail vlevo + (název + cena) vpravo */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card__media {
    width: 44px;
    flex: 0 0 44px;
    aspect-ratio: 1;
  }

  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card__content {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    text-align: left;
  }

  /* Badge pilulky nad názvem (span přes celou šířku řádku). Když produkt badge
     nemá, element se nevykreslí → žádná prázdná řádka, název + cena zůstanou v jedné. */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .tk-card-badges--inline {
    grid-column: 1 / -1;
    margin-bottom: 3px;
  }

  /* ⚠️ Hvězdy musí spanovat celou šířku řádku stejně jako badge pilulky.
     `.resource-card__content` je tu GRID `1fr auto` (název | cena) — bez explicitního
     grid-column by hvězdy zabraly buňku ř2/sl1, název by spadl do CENOVÉHO sloupce
     a cena na vlastní řádek. Bez recenzí se element nevykreslí → žádná prázdná řádka. */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .tk-rating-badge {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-bottom: 2px;
  }

  /* Padding přes `--tk-badge-pad-*`, NE shorthandem — shorthand by zahodil
     optický nudge z .tk-badge (viz assets/tk-product-card.css). */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .tk-card-badges--inline .tk-badge {
    font-size: 0.8125rem;
    --tk-badge-pad-block: 2px;
    --tk-badge-pad-inline: 6px;
    --tk-badge-nudge: 0.5px;
  }

  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card__title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    -webkit-line-clamp: 2;
    min-height: 0;
    text-align: left;
  }

  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) [ref="priceContainer"] {
    flex: 0 0 auto;
    justify-content: flex-end !important;
    white-space: nowrap;
  }

  /* V řádku jen ikona + název + cena → swatche skrýt */
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .tk-card-swatches--sibling,
  .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .tk-mini-swatches {
    display: none !important;
  }

  /* ===== Mobil: u akčního produktu poskládat ceny nad sebe =====
     V řádku [ikona | název | cena] zabíral akční blok (přeškrtnutá + akční
     cena + -X% pill) v jedné lince skoro půl šířky → název se ořezával.
     Na mobilu: cenový kontejner = flex COLUMN (přeškrtnutá / akční cena / -X%
     pod sebou, zarovnané vpravo). ⚠️ KLÍČ: ve sloupcovém směru je max-content
     ŠÍŘKA kontejneru = nejširší JEDNA cena (ne součet), takže grid `auto`
     sloupec (viz .resource-card__content: grid 1fr auto) se reálně zúží →
     názvu (1fr) zbyde víc místa. (flex-wrap + basis:100% NEfungovalo — grid
     `auto` track se pořád počítal z rozbaleného max-content = plná šířka.)
     Neakční produkt = jen cena (1 prvek) → sloupec se stejně zúží na cenu. */
  @media screen and (max-width: 749px) {
    /* Cenový sloupec je teď až 3 řádky (přeškrtnutá/akční/-X%) → obsah zarovnat
       NAHORU, jinak se dvouřádkový název vycentruje do vysoké řádky a odskočí
       dolů = velká mezera pod badge. */
    .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) .resource-card__content {
      align-items: start;
    }

    .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) [ref="priceContainer"] {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-end;
      row-gap: 0;
    }

    .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) [ref="priceContainer"] > span:has(.compare-at-price) {
      order: 0;
      line-height: 1.15;
    }

    .search-modal__content .predictive-search-results__products > .predictive-search-results__wrapper-products:not(.predictive-search-results__wrapper-products--compact) [ref="priceContainer"] .price-discount-badge {
      order: 2;
      align-self: flex-end;
      margin-top: 1px;
    }
  }

  /* ===== Mobil: layout na celou výšku (fixní header, scroll obsah, reálný footer) ===== */
  @media screen and (max-width: 749px) {
    /* Bestsellery (compact) + Nedávno zobrazené na mobilu: horizontální
       carousel místo gridu (ten dělal nevyrovnané řady + svislý scroll).
       Jedna řada, swipe, skrytý scrollbar, snap; align-items:stretch →
       jednotná výška karet bez ohledu na swatche/akci. */
    .search-modal__content .predictive-search-results__wrapper-products.predictive-search-results__wrapper-products--compact,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products {
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap;
      align-items: stretch;
      overflow-x: auto;
      overflow-y: hidden;
      gap: var(--gap-sm);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 2px;
    }

    .search-modal__content .predictive-search-results__wrapper-products--compact::-webkit-scrollbar,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products::-webkit-scrollbar {
      display: none;
    }

    .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product {
      flex: 0 0 30%;
      scroll-snap-align: start;
    }

    /* Žádný hover rámeček/podbarvení na kartách carouselu (bestsellery +
       nedávno zobrazené) — na dotyku :hover/:focus/aria-selected po tapu
       „přilne" a vypadá divně. */
    .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product:hover,
    .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product:active,
    .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product:focus-visible,
    .search-modal__content .predictive-search-results__wrapper-products--compact .predictive-search-results__card--product[aria-selected='true'],
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product:hover,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product:active,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product:focus-visible,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__card--product[aria-selected='true'] {
      background-color: transparent !important;
      outline: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    /* Indikátor „scrolluj doprava" — jen gradient fade přilepený sticky
       k pravému okraji carouselu; JS přidá .tk-scroll-right dokud není konec.
       ::after je flex item se zápornou margin (net 0 šířky) → překrývá poslední
       viditelnou kartu, netlačí layout. */
    .search-modal__content .predictive-search-results__wrapper-products--compact::after,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products::after {
      content: '';
      position: sticky;
      right: 0;
      flex: 0 0 80px;
      align-self: stretch;
      width: 80px;
      margin-left: -80px;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      transition: opacity 0.2s ease;
      background: linear-gradient(to right, transparent, var(--color-background) 80%);
    }

    .search-modal__content .predictive-search-results__wrapper-products--compact.tk-scroll-right::after,
    .search-modal__content .recently-viewed-wrapper .predictive-search-results__wrapper-products.tk-scroll-right::after {
      opacity: 1;
    }

    /* Bílé pozadí přes celý fullscreen dialog (jinak by pod formem prosvítal
       obsah stránky — dialog má background: transparent). */
    .search-modal__content {
      background: var(--color-background);
    }

    /* Footer "Zobrazit vše" připnutý dole + obsah scrolluje uvnitř (ověřeno
       Playwrightem na živém webu napříč stavy — empty/krátké/přetékající).
       KLÍČ: predictive-search-component MUSÍ být column flex se stretch, ale
       BEZ height:100% (to kolabovalo obsah na 0 = prázdný modal). Komponenta
       se na výšku dialogu (100dvh) roztáhne sama (dialog je display:flex →
       align-items:stretch). Form pak flex:1 vyplní komponentu, content
       scrolluje, footer (sourozenec content) zůstává dole. */
    .search-modal__content predictive-search-component {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .search-modal__content .predictive-search-form {
      flex: 1 1 0%;
      min-height: 0;
      height: auto;
      display: flex;
      flex-direction: column;
    }

    /* top:auto ZRUŠÍ zděděné base top:100% (header-dropdown default) — bez něj
       se wrapper odsune o 100% dolů a obsah/footer spadnou pod fold. */
    .search-modal__content .predictive-search-form__content-wrapper {
      position: relative;
      top: auto;
      flex: 1 1 0%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* Obsah vyplní zbytek a scrolluje (zrušit 80dvh cap) */
    .search-modal__content .predictive-search-form__content {
      flex: 1;
      min-height: 0;
      max-height: none;
    }

    /* "Zobrazit vše" = reálná spodní lišta v toku, ne overlay přes obsah */
    .search-modal__content .predictive-search-form__footer {
      position: static;
      padding: var(--padding-sm) var(--padding-md) calc(var(--padding-sm) + env(safe-area-inset-bottom, 0px));
      background: var(--color-background);
      background-image: none;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .search-modal__content .predictive-search-form__footer .predictive-search__search-button {
      width: 100%;
      margin: 0;
    }

    /* Footer je v toku → zrušit velký spodní padding pod obsahem */
    .search-modal__content .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results)) > .predictive-search-form__content {
      padding-block-end: var(--padding-md);
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:268) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:269) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  /* ⚠️ Subjekt SCHVÁLNĚ #header-group, ne body: `body:has(...)` nutí Chrome
     přepočítat celý dokument při každé změně stylu kdekoli (9-15 fps na všem,
     co se hýbe). Sémantika stejná, jen se ptáme zdola. */
  #header-group:has(> .header-section > #header-component[transparent]):not(
      :has(> .header-section + .shopify-section)
    )
    ~ main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:sorting (INDEX:277) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: flex;
    right: 0;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-mobile-wrapper .sorting-filter__options {
    border-radius: var(--style-border-radius-popover);
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
    min-width: var(--facets-panel-min-width);
    max-width: var(--facets-panel-width);
    max-height: var(--facets-panel-height);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .sorting-filter__options {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: content-visibility var(--animation-speed-slow) allow-discrete,
      padding-block var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }

    &:focus-within {
      overflow-y: visible;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:285) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:tk-article-carousel (INDEX:290) */
/* ════ TK Article carousel — carousel v těle článku ════
     Rám i karty jsou sdílené s homepage (tk-product-carousel + theme blok
     _product-card), tady je jen hlavička bloku, rozšíření mimo čtecí sloupec
     a neutralizace typografie článku, která by jinak zasahovala do karet. */
  .tk-artprod {
    /* tělo článku má vlastní inline font-family / barvu / řádkování (vložený
       HTML wrapper) → explicitně zpátky theme hodnoty */
    font-family: var(--tk-f-body, var(--font-body--family, inherit));
    display: block;
    margin-block: 2.6em;
    color: var(--color-foreground, #14141a);
    line-height: normal;
  }

  /* Blok zůstává v šířce článku (žádné přetékání do stran) — carousel se tak
     drží čtecího sloupce a karty jsou celkově menší, včetně výšky. */

  /* ⚠️ Počet karet MUSÍ být přebitý. Theme počítá šířku karty z VIEWPORTU
     (`.tk-product-carousel__item`: 4,4 karty do 1499px, 5,4 do 1799px, 6,4 nad),
     protože na homepage je kontejner široký jako stránka. Tady je kontejner
     pevný (šířka článku ≈ 700px), takže na velkém monitoru by v něm theme
     naskládalo 6,4 karty po ~100px. Držíme pevně 4,4 karty — tedy stejně,
     kolik jich bylo vidět v předchozí široké verzi. Chceš větší karty? Změň
     jediné číslo 4.4 (např. na 3.4 = tři a kousek). Mobil (<750px) si řídí
     theme sám (2,1 karty). */
  @media (min-width: 750px) {
    .tk-artprod .tk-product-carousel__item {
      flex: 0 0 calc((100% - 4 * var(--tk-pc-gap, 12px)) / 4.4);
    }
  }

  /* Karta se zmenšuje JAKO CELEK (text, štítky, tlačítko i obrázek), ne že by
     jen zúžený box zůstal s velkým písmem: `zoom` na obalu karty ji vysází
     v širším layoutu a vykreslí zmenšenou. Vnitřek pak vypadá stejně vyváženě
     jako karta na mobilu (tam mají karty prakticky stejnou šířku).
     ⚠️ Zoom je schválně JEN na obalu karty, ne na carouselu — geometrii
     scrolleru (a tím i měření v JS: šipky, tečky, dojezd dragu) nechává být.
     Míru zmenšení řídí jediné číslo. */
  .tk-artprod .resource-list__item {
    zoom: 0.9;
  }

  .tk-artprod__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }
  .tk-artprod__titles { min-width: 0; }

  .tk-artprod__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
  .tk-artprod__dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tk-blog-post-accent, #ff5a00);
  }

  .tk-artprod__heading {
    font-family: var(--tk-f-display, var(--font-h1--family, inherit)) !important;
    margin: 7px 0 0;
    padding: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-foreground, #14141a);
    display: block;
  }
  /* nadpis bloku nesmí dostat dekorace nadpisů z .blog-post-content */
  .blog-post-content .tk-artprod__heading::before,
  .blog-post-content .tk-artprod__heading::after { content: none; }

  .tk-artprod__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--color-foreground, #14141a);
    white-space: nowrap;
  }
  .tk-artprod__more:hover { color: var(--tk-accent, #ff5a00); }
  .tk-artprod__more svg { transition: transform 0.16s ease; }
  .tk-artprod__more:hover svg { transform: translateX(2px); }

  /* Karty ani jejich rozměry tady NEPŘEBÍJÍME — jsou to tytéž theme karty
     v témže rámu jako na homepage, takže se chovají stejně. Cokoli přidaného
     by parita rozbilo. */

  /* ── Neutralizace typografie článku uvnitř karet ──
     .blog-post-content stylizuje VŠECHNY odkazy (podtržení + hover pozadí),
     odstavce i seznamy; tělo článku si navíc veze vlastní inline <style>
     (.mo-wide-article img { display:block; margin:24px auto; max-width:720px }).
     Selektory přes .tk-artprod mají vyšší specificitu než obojí. */
  .blog-post-content .tk-artprod a:not(.button) {
    text-decoration: none;
    background: none;
  }
  .blog-post-content .tk-artprod :is(img, svg),
  .tk-artprod .tk-product-carousel :is(img, svg) {
    margin: 0;
    border-radius: 0;
    max-width: 100%;
  }
  .blog-post-content .tk-artprod :is(p, ul, ol) {
    margin-block: 0;
    padding-inline-start: 0;
  }
  .blog-post-content .tk-artprod li { margin-block: 0; }
  .blog-post-content .tk-artprod li::marker { content: none; }
/* END_SNIPPET:tk-article-carousel */

/* START_SNIPPET:tk-article-products (INDEX:292) */
/* ════ TK Article products — carousel v těle článku ════
     Rám i karty jsou sdílené s homepage (tk-product-carousel + tk-product-card-full),
     tady je jen hlavička bloku, rozšíření mimo čtecí sloupec a neutralizace
     typografie článku, která by jinak zasahovala do karet. */
  .tk-artprod {
    /* tělo článku má vlastní inline font-family (vložený HTML wrapper) →
       explicitně zpátky theme font */
    font-family: var(--tk-f-body, var(--font-body--family, inherit));
    display: block;
    margin-block: 2.6em;
  }
  .tk-artprod--hidden { display: none !important; }

  /* Na desktopu blok přeteče úzký čtecí sloupec článku (47rem), ať jsou karty
     stejně velké jako na homepage. Počítáno vůči středu sloupce, takže zůstane
     vycentrovaný. */
  @media (min-width: 1000px) {
    .tk-artprod {
      width: min(92vw, 1080px);
      margin-inline: calc(50% - min(46vw, 540px));
    }
  }

  .tk-artprod__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
  }
  .tk-artprod__titles { min-width: 0; }

  .tk-artprod__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
  .tk-artprod__dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tk-blog-post-accent, #ff5a00);
  }

  .tk-artprod__heading {
    font-family: var(--tk-f-display, var(--font-h1--family, inherit)) !important;
    margin: 7px 0 0;
    padding: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-foreground, #14141a);
    display: block;
  }
  /* nadpis bloku nesmí dostat dekorace nadpisů z .blog-post-content */
  .blog-post-content .tk-artprod__heading::before,
  .blog-post-content .tk-artprod__heading::after { content: none; }

  .tk-artprod__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--color-foreground, #14141a);
    white-space: nowrap;
  }
  .tk-artprod__more:hover { color: var(--tk-accent, #ff5a00); }
  .tk-artprod__more svg { transition: transform 0.16s ease; }
  .tk-artprod__more:hover svg { transform: translateX(2px); }

  /* Skeleton, než dorazí karty z hledání (query režim) */
  .tk-artprod__skel {
    aspect-ratio: 3 / 4;
    border-radius: var(--style-border-radius-card, 10px);
    background: linear-gradient(90deg, #f0f0f1 25%, #e7e7ea 37%, #f0f0f1 63%);
    background-size: 200% 100%;
    animation: tk-artprod-shimmer 1.4s ease infinite;
  }
  @keyframes tk-artprod-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-artprod__skel { animation: none; }
  }

  /* ── Neutralizace typografie článku uvnitř karet ──
     .blog-post-content stylizuje VŠECHNY odkazy (podtržení + hover pozadí),
     obrázky (radius + svislé margins) a odstavce/seznamy. V kartách je to
     nežádoucí, tyhle selektory mají vyšší specificitu. */
  .blog-post-content .tk-artprod a:not(.button) {
    text-decoration: none;
    background: none;
  }
  .blog-post-content .tk-artprod img {
    border-radius: 0;
    margin-block: 0;
  }
  .blog-post-content .tk-artprod :is(p, ul, ol) {
    margin-block: 0;
    padding-inline-start: 0;
  }
  .blog-post-content .tk-artprod li { margin-block: 0; }
  .blog-post-content .tk-artprod li::marker { content: none; }
/* END_SNIPPET:tk-article-products */

/* START_SNIPPET:tk-free-shipping-bar (INDEX:311) */
/* ═══════════════════════════════════════════════════════════════════════════
     .tk-perk — SDÍLENÁ KOSTRA LIŠT „doprava zdarma" a „dárek zdarma".
     ⚠️ Definovaná JEN TADY; `tk-gift-bar.liquid` přidává jen odchylky dárku.
     Akcent nese custom property, tinty se z ní míchají přes color-mix —
     před každým color-mix je rgb() fallback pro starší Safari.
     ═══════════════════════════════════════════════════════════════════════════ */
  .tk-perk {
    --perk-pct: 0%;
    --perk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.75rem 0.65rem;
    border: 1px solid;
    border-color: color-mix(in srgb, var(--perk-accent) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--perk-accent) 6%, transparent);
    transition: border-color 0.4s ease, background 0.4s ease;
  }

  /* Nárok splněn — o stupeň sytější rám i podklad. */
  .tk-perk--on {
    border-color: color-mix(in srgb, var(--perk-accent) 72%, transparent);
    background: color-mix(in srgb, var(--perk-accent) 11%, transparent);
  }

  .tk-perk__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  /* Dlaždice — stejný jazyk jako náhledy položek košíku (bílá, hairline).
     ⚠️ Badge přesahuje roh, proto ŽÁDNÝ overflow: hidden — obrázek uvnitř
     ořezává vlastní border-radius. */
  .tk-perk__tile {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-background, #fff);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding: 3px;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .tk-perk__tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
  }

  /* Badge „splněno" v rohu dlaždice — nahrazuje dřívější pilulky i plovoucí
     fajfku vpravo (obojí působilo genericky a fajfka se na široké liště
     ztrácela). Bílý prstenec ji odsazuje od podkladu. */
  .tk-perk__tile-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--perk-accent);
    color: var(--perk-ink);
    box-shadow: 0 0 0 2px var(--color-background, #fff);
  }

  .tk-perk__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Stavový řádek. `min-height` drží 1 řádek při výměně obsahu mezi stavy —
     lišta nesmí poskočit. Částky a zvýraznění nesou <strong>/<b>/<s> uvnitř. */
  .tk-perk__sub {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    min-height: 1.4em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .tk-perk__sub strong,
  .tk-perk__sub b {
    font-weight: 700;
    color: var(--color-foreground);
  }

  .tk-perk__sub s {
    color: rgb(var(--color-foreground-rgb) / 0.42);
    text-decoration-thickness: 1px;
    margin-inline-end: 0.15em;
  }

  /* ── Dráha ────────────────────────────────────────────────────────────────
     Spodní slot: `margin-top: auto` ho přišpendlí ke dnu, takže při lištách
     vedle sebe (stejná výška přes stretch) leží OBĚ dráhy na stejné lince.
     Dráha je absolutní (nemění výšku slotu, smí se vytratit přes opacity)
     a slot zároveň hostí akce dárku na /cart (tlačítko / odkaz). */
  .tk-perk__foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: auto;
    padding-top: 0.55rem;
    min-height: 1.5rem;
  }

  /* Na /cart je slot vyšší kvůli tlačítku „Chci dárek" — STEJNĚ u obou lišt,
     aby dráhy lícovaly. V draweru drží menší výšku overridy v cart-drawer. */
  .tk-fsb--cart .tk-perk__foot,
  .tk-gift--cart .tk-perk__foot {
    min-height: 2.2rem;
  }

  /* Čistá dráha bez jezdce. ⚠️ Jezdec (ikona jedoucí po dráze) ZRUŠEN 2026-09-01
     — 20px ikona nad 6px dráhou neměla v patičce místo a trčela do textu nad
     sebou („vypadá to rozbitě", Mac 2026-09-01); navíc duplikovala ikonu/fotku
     v dlaždici. NEVRACET bez vyřešení výšky slotu. */
  .tk-perk__track {
    position: absolute;
    inset-inline: 0;
    bottom: 1px;
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
    transition: opacity 0.5s ease;
  }

  .tk-perk__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--perk-pct);
    min-width: 6px;
    border-radius: 999px;
    background: var(--perk-accent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--perk-accent) 62%, #fff), var(--perk-accent));
    transition: width 0.65s var(--perk-ease);
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-perk__fill,
    .tk-perk__track {
      transition: none;
    }
  }

  /* ═══ OSLAVA ODEMČENÍ (sdílená; třídu přidává tk-gift.js / tk-fsb.js) ═════
     Tichá a plynulá (zadání uživatele): dech záře, přejezd lesku, nadechnutí
     dlaždice. Vše na kompozitoru — záře je předmalovaný overlay animovaný
     JEN přes opacity, žádné box-shadow/background keyframy (sekaly).
     ⚠️ Žádná opacity-from-0 animace na prvcích, které existují už PŘED
     startem oslavy — třída přichází až ~260 ms po morphu a prvek by blikl. */
  .tk-perk--celebrate {
    z-index: 1;
    border-color: color-mix(in srgb, var(--perk-accent) 88%, transparent);
  }

  .tk-perk--celebrate::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: color-mix(in srgb, var(--perk-accent) 12%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--perk-accent) 24%, transparent);
    opacity: 0;
    animation: tk-perk-breathe 2.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes tk-perk-breathe {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
  }

  .tk-perk--celebrate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 34%,
      rgb(255 255 255 / 0.5) 50%,
      transparent 66%
    );
    background-size: 260% 100%;
    animation: tk-perk-sweep 2.4s cubic-bezier(0.33, 0, 0.2, 1) 0.25s both;
  }

  @keyframes tk-perk-sweep {
    from { background-position: 190% 0; }
    to { background-position: -90% 0; }
  }

  .tk-perk--celebrate .tk-perk__tile {
    animation: tk-perk-tile 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
  }

  @keyframes tk-perk-tile {
    0% { transform: scale(1); }
    30% { transform: scale(1.07); }
    100% { transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-perk--celebrate::before,
    .tk-perk--celebrate::after,
    .tk-perk--celebrate .tk-perk__tile {
      animation: none;
    }

    .tk-perk--celebrate {
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--perk-accent) 20%, transparent);
      transition: box-shadow 0.6s ease;
    }
  }

  /* ── Specifika lišty dopravy ─────────────────────────────────────────────── */
  .tk-fsb {
    --perk-accent: #ff5a00;
    --perk-ink: #0a0a0a;
  }

  /* Jediný textový řádek — o chlup větší než stavové řádky dárku a svisle
     vystředěný vůči dlaždici (řádek `margin-block: auto` dělí volný prostor
     s `margin-top: auto` na slotu dráhy). */
  .tk-fsb .tk-perk__row {
    margin-block: auto;
  }

  .tk-fsb .tk-fsb__msg {
    font-size: 0.8125rem;
  }

  .tk-fsb__amount {
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-foreground);
  }

  .tk-fsb--drawer {
    width: 100%;
  }
/* END_SNIPPET:tk-free-shipping-bar */

/* START_SNIPPET:tk-gift-bar (INDEX:314) */
/* ═══ ODCHYLKY DÁRKU — sdílená kostra `.tk-perk` žije v tk-free-shipping-bar ═══
     ⚠️ ORANŽOVÁ, NE LIME — lišty stojí vedle sebe a ve stejné barvě splývaly.
     #f08c00 je zostřená oranžová (původní #e69e3f z announcement lišty přišla
     uživateli „míň ostrá" vedle syté lime, 2026-08-29). */
  .tk-gift {
    --perk-accent: #f08c00;
    --perk-deep: #8a4a00;
    --perk-ink: #241300;
  }

  /* Dlaždice s fotkou dárku větší než sdílených 44px a s menším vnitřním
     okrajem — produktové fotky mají hodně bílého kolem a ve 38px drawer
     dlaždici byl kabel „bobínek" (Mac feedback 2026-09-01). Přebíjí i drawer
     override `.cart-drawer .tk-perk__tile` (0,2,0) vyšší specificitou. */
  .tk-gift .tk-perk__tile {
    width: 56px;
    height: 56px;
    padding: 1px;
  }

  .cart-drawer .tk-gift .tk-perk__tile {
    width: 48px;
    height: 48px;
  }

  /* Zoom fotky dárku — produktovky mají zapečené bílé okraje, bez přiblížení
     je produkt maličký (u aktuálního kabelu zabírá obsah jen 55 % výšky
     čtvercového cropu). Ořez dělá wrapper (ne dlaždice — té přesahuje roh
     badge „v košíku"). Scale 1.7 ladí na tenhle kabel: obsah pak plní ~93 %
     výšky dlaždice. ⚠️ Při výměně dárku za produkt focený víc nadoraz zoom
     SNÍŽIT, jinak se produkt ořízne. */
  .tk-gift .tk-gift__tile-clip {
    position: absolute;
    inset: 2px;
    display: block;
    border-radius: 8px;
    overflow: hidden;
  }

  .tk-gift .tk-gift__tile-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.7);
  }

  /* Hodnota dárku vpravo — přeškrtnutá částka, pod ní ZDARMA. Stejný jazyk
     jako ceny položek košíku (částky vpravo v textu, žádné pilulky). */
  .tk-gift__value {
    flex: none;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    text-align: right;
  }

  .tk-gift__value s {
    font-size: 0.76rem;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    text-decoration-thickness: 1px;
    white-space: nowrap;
  }

  .tk-gift__value em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--perk-deep);
  }

  .tk-gift .tk-gift__title {
    display: -webkit-box;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-foreground);
    text-decoration: none;
    overflow: hidden;
    /* `break-word`, ne `anywhere` — `anywhere` láme i uprostřed slova. */
    overflow-wrap: break-word;
    /* Název celý — dva řádky usekávaly konec („…0,1 m, Černá“). */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .tk-gift .tk-gift__title:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Proklik přes CELÝ řádek — v draweru s nárokem vede na /cart, jinak na
     produkt. Klikat jen do titulku by byla zbytečně přesná práce.
     ⚠️ Překryv je SAMOSTATNÝ <a>, ne `::after` titulku — titulek musí vést
     VŽDY na produkt (uživatel 2026-09-02), takže už nemůže být zároveň
     nositelem prokliku na /cart. Titulek leží NAD překryvem (z-index 2). */
  .tk-gift .tk-gift__row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .tk-gift .tk-gift__title {
    position: relative;
    z-index: 2;
  }

  .tk-gift .tk-perk__sub {
    margin-top: 0.15rem;
  }

  /* Stavové řádky po odemčení — zvýraznění (<strong> z locale) v tmavé
     oranžové, ať stav nese text, ne pilulka. */
  .tk-gift__sub--on strong,
  .tk-gift__sub--on b {
    color: var(--perk-deep);
  }

  .tk-gift__amount {
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-foreground);
  }

  /* Na /cart dráha po odemčení DOJEDE do 100 % (transition výplně 0.65 s)
     a pak uvolní slot akcím — zpoždění nechá dojezd doznít. V draweru
     zůstává plná (žádné akce, plná dráha = splněno, stejně jako u dopravy). */
  .tk-gift--cart.tk-gift--unlocked .tk-perk__track {
    opacity: 0;
    transition: opacity 0.5s ease 0.85s;
  }

  /* Tlačítka musí zůstat NAD roztaženým proklikem řádku. */
  .tk-gift .tk-gift__btn,
  .tk-gift .tk-gift__link {
    position: relative;
    z-index: 2;
  }

  /* ⚠️ Barvy explicitně ve všech stavech, selektory přes rodiče (0,2,0) — theme
     má vlastní hover pro tlačítka, který nastaví bílé pozadí a na světlém
     podkladu tlačítko zmizí. Hover PROHLUBUJE oranžovou (žádná lime). */
  .tk-gift .tk-gift__btn {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--perk-accent);
    border-radius: 999px;
    background-color: var(--perk-accent);
    color: var(--perk-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--perk-ease), box-shadow 0.2s ease, opacity 0.2s ease;
  }

  .tk-gift .tk-gift__btn:hover,
  .tk-gift .tk-gift__btn:focus-visible {
    background-color: #d97e00;
    border-color: #d97e00;
    color: var(--perk-ink);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px -5px rgb(217 126 0 / 0.85);
  }

  .tk-gift .tk-gift__btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .tk-gift .tk-gift__link {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background-color: transparent;
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }

  .tk-gift .tk-gift__link:hover,
  .tk-gift .tk-gift__link:focus-visible {
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
    color: var(--color-foreground);
  }

  .tk-gift[data-busy] .tk-gift__btn,
  .tk-gift[data-busy] .tk-gift__link {
    opacity: 0.45;
    pointer-events: none;
  }

  .tk-gift--drawer {
    width: 100%;
  }
/* END_SNIPPET:tk-gift-bar */

/* START_SNIPPET:tk-gift-modal (INDEX:315) */
.tk-gift-modal__dialog {
    width: min(94vw, 520px);
    max-height: min(92dvh, 760px);
    padding: 2.2rem 2rem 1.9rem;
    border: none;
    border-radius: 22px;
    background: var(--color-background, #fff);
    color: var(--color-foreground);
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.45);
    /* Svisle scrollovat (dlouhý název na malém displeji), vodorovně nikdy. */
    overflow-x: hidden;
    overflow-y: auto;
  }

  @media screen and (max-width: 560px) {
    .tk-gift-modal__dialog {
      padding: 1.8rem 1.3rem 1.5rem;
    }
  }

  .tk-gift-modal__dialog::backdrop {
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(2px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .tk-gift-modal__dialog[open] {
      animation: tkGiftModalIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ⚠️ Backdrop se dřív objevil SKOKEM, zatímco okno najíždělo — tvrdý
       kontrast. Teď se prolne spolu s ním. */
    .tk-gift-modal__dialog[open]::backdrop {
      animation: tkGiftModalFade 0.38s ease;
    }

    /* Výstup: `dialog.close()` okno utínal skokem. JS (`tk-gift.js #close`)
       nejdřív přidá tuhle třídu, zavře až po doběhnutí (230 ms časovač). */
    .tk-gift-modal__dialog.tk-gift-modal--closing {
      animation: tkGiftModalOut 0.22s ease both;
    }

    .tk-gift-modal__dialog.tk-gift-modal--closing::backdrop {
      animation: tkGiftModalFade 0.22s ease both reverse;
    }
  }

  @keyframes tkGiftModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: none; }
  }

  @keyframes tkGiftModalFade {
    from { opacity: 0; }
  }

  @keyframes tkGiftModalOut {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
  }

  .tk-gift-modal__close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .tk-gift-modal__close:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: var(--color-foreground);
  }

  .tk-gift-modal__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.35em;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* oranžová jako lišta dárku; lime zůstává jen tlačítku „Chci dárek",
       protože to je primární CTA a ta je na webu všude lime */
    color: #8a5410;
  }

  .tk-gift-modal__title {
    margin: 0.6rem 0 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .tk-gift-modal__text {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.68);
  }

  /* Celá karta je proklik na produkt. */
  .tk-gift-modal__product {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
    margin-top: 1.4rem;
    padding: 0.95rem;
    border: 1px solid rgb(230 158 63 / 0.55);
    border-radius: 16px;
    background: linear-gradient(135deg, rgb(230 158 63 / 0.14), transparent 70%);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .tk-gift-modal__product:hover {
    border-color: rgb(230 158 63 / 0.95);
    box-shadow: 0 6px 18px -8px rgb(230 158 63 / 0.75);
    transform: translateY(-1px);
  }

  .tk-gift-modal__thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-background, #fff);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding: 4px;
  }

  .tk-gift-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tk-gift-modal__info {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ⚠️ `nbsp-models` lepí tokeny s číslicemi nezlomitelnou mezerou, takže
     „USB-C, 60W, 480 Mb/s, 0,1 m“ je jeden neroztržitelný řetězec — bez
     `overflow-wrap` roztáhne kartu a rámeček vyteče z okna. Snippet na to
     sám upozorňuje ve své dokumentaci. */
  .tk-gift-modal__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .tk-gift-modal__price {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    margin-top: 0.3rem;
    font-size: 0.92rem;
  }

  .tk-gift-modal__price s {
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  .tk-gift-modal__free {
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a5410;
    background: rgb(230 158 63 / 0.2);
    border-radius: 999px;
  }

  /* Popis dárku — po zrušení hover tooltipu je tohle jediné místo, kde se
     zákazník o produktu něco dozví bez odchodu z košíku. */
  .tk-gift-modal__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .tk-gift-modal__detail {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    transition: color 0.2s ease, gap 0.2s ease;
  }

  .tk-gift-modal__product:hover .tk-gift-modal__detail {
    gap: 0.45em;
    color: var(--color-foreground);
  }

  .tk-gift-modal__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  /* ⚠️ Barvy jsou nastavené EXPLICITNĚ ve všech stavech a selektory jdou přes
     rodiče (0,2,0). Theme má vlastní hover pro tlačítka, který jinak nastaví
     bílé pozadí — a to na bílém modalu zmizí. Nespoléhat na dědění ani na
     pořadí v compiled_assets. */
  .tk-gift-modal .tk-gift-modal__confirm {
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1px solid #ff5a00;
    border-radius: 999px;
    background-color: #ff5a00;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .tk-gift-modal .tk-gift-modal__confirm:hover,
  .tk-gift-modal .tk-gift-modal__confirm:focus-visible {
    background-color: #d94c00;
    border-color: #d94c00;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgb(182 0 35 / 0.95);
  }

  .tk-gift-modal .tk-gift-modal__confirm:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .tk-gift-modal .tk-gift-modal__decline {
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
    border-radius: 999px;
    background-color: transparent;
    color: rgb(var(--color-foreground-rgb) / 0.62);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .tk-gift-modal .tk-gift-modal__decline:hover,
  .tk-gift-modal .tk-gift-modal__decline:focus-visible {
    border-color: rgb(var(--color-foreground-rgb) / 0.38);
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    color: var(--color-foreground);
  }

  .tk-gift-modal[data-busy] .tk-gift-modal__confirm,
  .tk-gift-modal[data-busy] .tk-gift-modal__decline {
    opacity: 0.45;
    pointer-events: none;
  }
/* END_SNIPPET:tk-gift-modal */

/* START_SNIPPET:tk-glossary (INDEX:316) */
/* ── Označený pojem v textu ─────────────────────────────── */
  /* Tučné písmo dělá viditelnost, tenká limetková linka pod účařím dělá
     signál „tady je vysvětlivka“. Linka je schválně nízko a tenká, aby
     nelezla do písmen. Podbarvení jen na hover. */
  .tk-term {
    --tk-term-accent: #ff5a00;
    --tk-term-accent-strong: #d94c00;
    --tk-term-ink: #d94c00;
    padding: 0.02em 0.14em;
    margin-inline: -0.14em;
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-foreground);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0.075em;
    text-decoration-color: rgb(255 90 0 / 0.95);
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
    cursor: help;
    /* aby zvýraznění drželo tvar i u pojmu zalomeného přes dva řádky */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    /* nástup: krátké zvýraznění, které vyprchá a nechá po sobě linku */
    animation: tk-term-reveal 0.9s cubic-bezier(0.22, 0.75, 0.3, 1);
    transition: background-color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .tk-term:hover,
  .tk-term.is-active {
    background-color: rgb(255 90 0 / 0.22);
    text-decoration-color: var(--tk-term-accent-strong);
  }

  @keyframes tk-term-reveal {
    from {
      background-color: rgb(255 90 0 / 0.34);
      text-decoration-color: rgb(255 90 0 / 0);
    }
    60% {
      background-color: rgb(255 90 0 / 0.16);
    }
    to {
      background-color: transparent;
      text-decoration-color: rgb(255 90 0 / 0.95);
    }
  }
  @keyframes tk-term-icon-reveal {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Poslední slovo pojmu a ikonka nesmí skončit na jiném řádku. */
  .tk-term__tail {
    white-space: nowrap;
  }

  .tk-term__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.92em;
    height: 0.92em;
    margin-inline-start: 0.3em;
    padding: 0;
    border: 1.2px solid rgb(182 0 35 / 0.75);
    border-radius: 50%;
    vertical-align: 0.12em;
    background: transparent;
    color: var(--tk-term-ink);
    text-decoration: none;
    cursor: pointer;
    animation: tk-term-icon-reveal 0.5s 0.08s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .tk-term__icon svg {
    display: block;
    width: 46%;
    height: 46%;
  }
  /* Pohodlný cíl prstu na mobilu, aniž by ikonka opticky narostla. */
  .tk-term__icon::after {
    content: '';
    position: absolute;
    inset: -0.35em -0.3em;
    border-radius: 6px;
  }
  .tk-term:hover .tk-term__icon,
  .tk-term.is-active .tk-term__icon {
    background: #232326;
    border-color: #232326;
    color: var(--tk-term-accent);
    transform: scale(1.06);
  }
  .tk-term__icon:focus-visible {
    outline: 2px solid var(--tk-term-accent-strong);
    outline-offset: 2px;
  }

  /* ── Bublina s vysvětlením ──────────────────────────────── */
  .tk-term-pop {
    --tk-term-pop-bg: #1a1a1e;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 310px;
    padding: 0.78rem 0.95rem 0.85rem;
    border-radius: 12px;
    background: var(--tk-term-pop-bg);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 0.07),
      0 12px 28px rgb(0 0 0 / 0.26),
      0 2px 6px rgb(0 0 0 / 0.16);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 0.75, 0.3, 1), visibility 0.16s;
  }
  .tk-term-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .tk-term-pop__arrow {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 2px;
    background: var(--tk-term-pop-bg);
    transform: rotate(45deg);
  }
  .tk-term-pop.is-below .tk-term-pop__arrow {
    bottom: auto;
    top: -4px;
  }

  .tk-term-pop__title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tk-term-accent, #ff5a00);
  }
  .tk-term-pop__text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.86);
    text-wrap: pretty;
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-term,
    .tk-term__icon,
    .tk-term-pop {
      transition: none;
      animation: none;
    }
  }
/* END_SNIPPET:tk-glossary */

/* START_SNIPPET:tk-grid-skeleton (INDEX:318) */
/* ----------------------------------------------------------------------------
     Grid skeleton + spinner — překlene Globo client-side render gap, kdy je
     grid prázdný a vypadá jako „nic nenalezeno". Sdíleno search + kolekce.
  ---------------------------------------------------------------------------- */
  /* Skeleton = NEPRŮHLEDNÝ OVERLAY nad reálným obsahem. Reálný obsah
     (.collection-wrapper) renderuje NORMÁLNĚ (opacity 1) — kdybychom ho
     schovali přes opacity:0, Globo produkty vůbec nevyrenderuje (ověřeno).
     Overlay ho vizuálně zakryje, dokud Globo + náš JS + noUiSlider nedoběhnou;
     JS pak skeleton odfaduje a odebere → pod ním hotový obsah.

     ⚠️ position:absolute je v BASE (ne až v .tk-grid-holding přidaném JS) —
     jinak se na refreshi 1 frame vykreslil v normal flow a po přidání holding
     class skočil nahoru o padding results-listu (~5–8px, hlavně na search). */
  .tk-grid-skeleton {
    position: absolute;
    inset: 0;
    /* Přepiš `.section > * { grid-column: 2 }` — abs containing block by jinak
       byl jen central column posunutý doprava; přes celý grid (1/-1) overlay
       pokryje full width a inner se pak sám vycentruje na central column. */
    grid-column: 1 / -1;
    z-index: 5;
    margin: 0;
    /* padding-top 24 (mobil) = pills (řadicí lišta) sednou na reálný controls
       bar (+24), zároveň pod breadcrumb (+10). Grid drží na +73 (24+41+8).
       Desktop přepíše na 32. */
    padding: 24px 0 0;
    /* Pojistka proti přetečení do footeru — grid je clampnutý na 3 řady, ale
       collapsed řády (grid-auto-rows:0) můžou nechat reziduální gap; clip. */
    overflow: hidden;
    transition: opacity 0.35s ease;
  }

  /* results-list potřebuje být positioned ancestor (kvůli abs skeletonu) +
     mít výšku. Přes :has (ne JS class) → platí už při prvním renderu, takže
     žádný reflow skok. Zmizí jakmile JS skeleton po reveal odebere z DOM.
     100vh kryje viewport → patička je pod foldem dokud se nenačtou produkty. */
  results-list:has(.tk-grid-skeleton) {
    position: relative;
    min-height: 100vh;
  }

  /* Bílé pozadí overlaye je v ::before odsazené 12px odshora — `results-list`
     má `margin-top: -10px` (Tinker default, stáhne grid k breadcrumbu), takže
     overlay začíná ~10px V breadcrumbu; bez odsazení neprůhledné pozadí
     překryje jeho spodek (vidět hlavně na mobilu). Horních 12px tak zůstane
     průhledných → breadcrumb je čitelný; grid je o moc níž (+73/+90), nic se
     nepropíše. z-index:-1 drží pozadí pod obsahem (pills/karty). */
  .tk-grid-skeleton::before {
    content: '';
    position: absolute;
    inset: 12px 0 0 0;
    background: var(--color-background);
    z-index: -1;
  }
  /* Desktop: padding-top = offset TREE/sidebaru od vršku results-listu
     (kolekce +32, search +40 = liší se .section padding-top dle template).
     Offset GRIDU (ghost karet) řeší navíc topbar níž: kolekce karta +109,
     search +117 (viz topbar @media min-width:1025). */
  @media (min-width: 1025px) {
    .tk-grid-skeleton {
      padding-top: 32px;
    }
    /* Search má na desktopu tree o ~8px níž (tree +40 vs +32) → posun celého
       skeletonu o 8px dolů. Mobil má search i kolekce stejně, proto jen desktop. */
    .tk-grid-skeleton--search {
      padding-top: 40px;
    }
  }
  .tk-grid-skeleton--out {
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-grid-skeleton {
      transition: none;
    }
  }

  /* Vnitřní kontejner = central column (zrcadlí .section grid-column 2):
     omezený na page-content-width, centrovaný, s page-margin gutterem. Tím
     skeleton respektuje page-width místo roztažení přes celý ultrawide. */
  .tk-grid-skeleton__inner {
    /* Přesně central column .section gridu (= šířka .collection-wrapper).
       Fallback kdyby var nebyla definovaná (jiný wrapper než .section). */
    width: var(
      --full-page-grid-central-column-width,
      min(106.25rem, calc(100% - var(--page-margin, 40px) * 2))
    );
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 48px;
  }

  /* Ghost sort toolbar (jen SEARCH desktop — viz blok @media níž). Default skrytý.
     Stejná central column jako __inner → sort pill vpravo lícuje s page-width. */
  .tk-grid-skeleton__toolbar {
    display: none;
    width: var(
      --full-page-grid-central-column-width,
      min(106.25rem, calc(100% - var(--page-margin, 40px) * 2))
    );
    margin-inline: auto;
  }

  /* Ghost sort pill injektovaný do headeru (JS): breadcrumb (kolekce) NEBO
     search-form (search), absolutně vpravo → přesně tam, kde Globo doručí reálný
     sort. radius 12 = card styl reálného sort pillu. Shimmer dědí z .__pill. */
  .breadcrumb:has(.tk-grid-skeleton__bc-sort),
  .search-page-input__parent:has(.tk-grid-skeleton__bc-sort) {
    position: relative;
  }
  /* ⚠️ position absolute !important — `.tk-grid-skeleton__pill` base má position:
     relative (pro shimmer) a je v souboru POZDĚJI (stejná specificita), takže by
     jinak vyhrálo → ghost by plaval v toku (uprostřed). */
  .tk-grid-skeleton__bc-sort {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px;
    height: 41px;
    border-radius: 12px;
  }
  /* Desktop ghost sort pilly (toolbar i bc) = 12px radius jako reálný sort pill. */
  .tk-grid-skeleton__toolbar .tk-grid-skeleton__pill--sort {
    border-radius: 12px;
  }
  /* (Skrytí reálného sortu během holdu řeší skeleton JS přes INLINE opacity —
     CSS `:has(results-list.tk-grid-holding)` ani scoped selektory nefungovaly
     /sort se ukazoval brzo/. Viz hideRealSort()/showRealSort() v <script> výše.) */

  /* Mobil: reálný grid je inset --margin-lg (16px wrapper padding) + 4px
     #gf-products padding = karty/buttony na x=20. Central column (page-margin
     12px) byl o ~8px širší → na ≤749 inset přesně 20px na stranu. */
  @media (max-width: 749px) {
    .tk-grid-skeleton__inner {
      width: calc(100% - 40px);
    }
  }

  /* Sidebar = #gf-tree placeholder (fixní 268 px). Reálný tree je ≤1024 px
     off-canvas, proto skrytý — viz blok níž. Na desktopu zrcadlí rámeček
     reálného #gf-tree (bílá karta + 1px border + radius 8px + padding 16),
     aby loading stav ladil a reveal byl bez horizontálního posunu (čáry
     odsazené paddingem na stejnou pozici jako reálné labely). Sidebar je
     ≤1024 display:none, takže frame v base je neviditelný na mobilu. */
  .tk-grid-skeleton__sidebar {
    flex: 0 0 268px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: #fff;
    /* Border ve stylu produktových karet (jako reálný #gf-tree). */
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
    padding: 6px 16px 14px;
  }

  .tk-grid-skeleton__filter {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tk-grid-skeleton__main {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Topbar = placeholder řadicí lišty (#gf-controls-container / .gf-actions):
     filter pill vlevo (margin-right:auto), sort pill vpravo (justify flex-end).
     Výška + margin tak, aby grid (ghost karty) přistál na reálné 1. kartě:
     mobil ≈ 73px (padding 24 + topbar 41 + margin 8),
     desktop kolekce +109 / search +117 (padding 32/40 + topbar 8+49+20). */
  .tk-grid-skeleton__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 41px;
    margin-bottom: 8px;
  }

  /* Desktop topbar. KOLEKCE: sort je přesunutý do breadcrumbu (viz
     tk-globo-filter.js relocateControlsToBreadcrumb) → v produktovém sloupci
     žádná řadicí lišta → topbar pryč, ghost grid stoupne na +32 (= úroveň
     ghost sidebaru/tree, sjednocený horní okraj jako reálné karty na +32).
     SEARCH: breadcrumb nemá → sort zůstává nad gridem → topbar drží ghost grid
     na +117 (pad 40 + topbar 8+49+20), zrcadlí reálnou .gf-actions.
     Musí být ZA base rule (media query nezvyšuje specificitu, rozhoduje pořadí). */
  @media (min-width: 1025px) {
    /* Sort je mimo produktový sloupec (kolekce→breadcrumb, search→search-form
       řádek) → in-main topbar i top-level toolbar pryč → ghost grid na úrovni
       sidebaru/tree. Ghost sort je injektovaný do headeru (breadcrumb / search-form,
       absolutně vpravo) — viz .tk-grid-skeleton__bc-sort + <script>. */
    .tk-grid-skeleton__topbar,
    .tk-grid-skeleton__toolbar {
      display: none;
    }
  }

  /* Pill placeholdery v topbaru (filter + sort). */
  .tk-grid-skeleton__pill {
    flex: 0 0 auto;
    height: 38px;
    /* radius 12 = card styl reálného mobilního filtr+sort pillu (= mobilní karty).
       Desktop sort ghost (toolbar/bc) má vlastní override 16 níž. */
    border-radius: 12px;
    background: var(--tk-skeleton-base, rgba(0, 0, 0, 0.06));
    position: relative;
    overflow: hidden;
  }
  /* Filter „Filtrovat" — jen ≤1024 px (off-canvas trigger), tlačen vlevo. */
  .tk-grid-skeleton__pill--filter {
    display: none;
    width: 108px;
    margin-right: auto;
  }
  /* Sort „Nejprodávanější ▾" — vpravo, na všech viewportech. */
  .tk-grid-skeleton__pill--sort {
    width: 150px;
  }

  /* Grid breakpointy zrcadlí reálný #gf-products / .product-grid:
     ≥1100 repeat(4), 750–1099 auto-fill 180px, ≤749 auto-fill 140px. */
  .tk-grid-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* Clamp na 3 řady nezávisle na počtu sloupců: 3 explicitní auto řady,
       implicitní (4.+) kolabují na 0 → karty v nich se přes overflow:hidden
       schovají. Drží skeleton ~3 řady (vyplní viditelnou plochu); spodek pod
       foldem ořízne overflow:hidden overlaye. */
    grid-template-rows: repeat(3, max-content);
    grid-auto-rows: 0;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media (min-width: 1100px) {
    .tk-grid-skeleton__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 749px) {
    .tk-grid-skeleton__grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
    }
  }

  /* ≤1024 px: tree off-canvas → skrýt sidebar, ukázat filter pill (trigger),
     grid plnou šířkou (stejně jako reálný layout). */
  @media (max-width: 1024px) {
    .tk-grid-skeleton__sidebar {
      display: none;
    }
    .tk-grid-skeleton__inner {
      gap: 0;
    }
    .tk-grid-skeleton__pill--filter {
      display: block;
    }
  }

  @media (max-width: 749px) {
    .tk-grid-skeleton__pill {
      height: 36px;
    }
    .tk-grid-skeleton__pill--filter {
      width: 100px;
    }
    .tk-grid-skeleton__pill--sort {
      width: 140px;
    }
  }

  .tk-grid-skeleton__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Karty v collapsed řádech (výška 0) se oříznou na nic. */
    overflow: hidden;
  }

  .tk-grid-skeleton__img {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--tk-skeleton-base, rgba(0, 0, 0, 0.06));
    overflow: hidden;
    position: relative;
  }

  .tk-grid-skeleton__line {
    height: 12px;
    border-radius: 6px;
    background: var(--tk-skeleton-base, rgba(0, 0, 0, 0.06));
    overflow: hidden;
    position: relative;
  }

  .tk-grid-skeleton__line--lg {
    width: 85%;
    margin-top: 4px;
  }

  .tk-grid-skeleton__line--sm {
    width: 55%;
  }

  .tk-grid-skeleton__line--price {
    width: 40%;
    height: 14px;
    margin-top: 4px;
  }

  /* Filter sidebar řádky. */
  .tk-grid-skeleton__line--filter-title {
    width: 60%;
    height: 14px;
    margin-bottom: 4px;
  }

  .tk-grid-skeleton__line--filter-opt {
    width: 85%;
    height: 10px;
  }
  .tk-grid-skeleton__line--filter-opt:nth-child(3) {
    width: 70%;
  }
  .tk-grid-skeleton__line--filter-opt:nth-child(4) {
    width: 78%;
  }

  /* Shimmer přes pseudo-element (běží přes všechny placeholdery). */
  .tk-grid-skeleton__img::after,
  .tk-grid-skeleton__line::after,
  .tk-grid-skeleton__pill::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.55),
      transparent
    );
    animation: tk-grid-skeleton-shimmer 1.3s ease-in-out infinite;
  }

  @keyframes tk-grid-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-grid-skeleton__img::after,
    .tk-grid-skeleton__line::after,
    .tk-grid-skeleton__pill::after {
      animation: none;
    }
  }
/* END_SNIPPET:tk-grid-skeleton */

/* START_SNIPPET:tk-sticky-buy-bar (INDEX:348) */
.tk-sticky-buy {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-block-start: 1px solid rgba(10, 10, 10, 0.08);
    box-shadow: 0 -6px 24px rgba(10, 10, 10, 0.1);
    padding-block: 10px;
    padding-block-end: max(10px, env(safe-area-inset-bottom));
    transform: translateY(110%);
    visibility: hidden;
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.32s;
  }

  .tk-sticky-buy.is-visible {
    transform: translateY(0);
    visibility: visible;
  }

  .tk-sticky-buy__inner {
    width: 100%;
    max-width: var(--narrow-page-width, 106.25rem);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .tk-sticky-buy__info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
  }

  .tk-sticky-buy__thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    object-fit: contain;
  }

  .tk-sticky-buy__title {
    font-family: var(--font-body--family);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0a0a0a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tk-sticky-buy__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Spigen: v liště jen cena — „včetně DPH" (+ Omnibus trigger) zůstává jen v buy boxu */
  .tk-sticky-buy__price .price-row__vat-inline { display: none !important; }
  .tk-sticky-buy__price,
  .tk-sticky-buy__price [ref="priceContainer"] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    font-family: var(--font-body--family);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
    color: #0a0a0a;
  }

  /* Sale stav zrcadlený z buy boxu (clone nemá obalující product-price element,
     proto vlastní pravidla — viz blocks/price.liquid) */
  .tk-sticky-buy__price:has(.compare-at-price) .price {
    color: #dc2626;
    font-weight: 800;
  }

  .tk-sticky-buy__price .compare-at-price {
    font-weight: 400;
    font-size: 0.62em;
    color: var(--tk-price-compare-color, #3f4652);
    opacity: 1;
  }

  .tk-sticky-buy__price .price-discount-badge {
    font-size: 0.8125rem;
  }

  /* Naklonovaný kupónový pill — bez horního marginu z buy boxu */
  .tk-sticky-buy__coupon {
    display: inline-flex;
    min-width: 0;
  }

  .tk-sticky-buy__coupon[hidden] {
    display: none;
  }

  .tk-sticky-buy__coupon .pdp-discount {
    margin-block-start: 0;
  }

  .tk-sticky-buy__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding-inline: 22px;
    border: 0;
    border-radius: var(--qty-radius, 8px);
    background: #ff5a00;
    color: #fff;
    font-family: var(--font-body--family);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }

  @media (hover: hover) {
    .tk-sticky-buy__cta:hover {
      background: #0a0a0a;
      color: #ff5a00;
      box-shadow: 0 5px 14px rgba(10, 10, 10, 0.2);
    }
  }

  .tk-sticky-buy__cta-icon {
    flex: 0 0 auto;
  }

  /* Ikona dle stavu: košík (dostupné) vs zvonek (sold-out) */
  .tk-sticky-buy__cta-icon--bell {
    display: none;
  }

  .tk-sticky-buy--soldout .tk-sticky-buy__cta-icon--cart {
    display: none;
  }

  .tk-sticky-buy--soldout .tk-sticky-buy__cta-icon--bell {
    display: inline-block;
  }

  @media screen and (max-width: 749px) {
    .tk-sticky-buy {
      padding-block: 8px;
      padding-block-end: max(8px, env(safe-area-inset-bottom));
    }

    .tk-sticky-buy__inner {
      gap: 10px;
    }

    /* Thumbnail + název na mobilu pryč — fotka je stejně v galerii nad lištou
       a 40px obrázek jen ubíral místo ceně (u akční ceny se pak zalomil celý
       řádek: cena nahoře, obří tlačítko pod ní). */
    .tk-sticky-buy__info {
      display: none;
    }

    .tk-sticky-buy__title {
      display: none;
    }

    .tk-sticky-buy__right {
      flex: 1 1 auto;
      justify-content: flex-end;
      gap: 8px 10px;
    }

    /* Cena vyplní zbytek řádku vedle tlačítka. `flex-basis: 0` je klíčové:
       s content-basis (u akční ceny ~170 px) se řádek zalomil a CTA spadlo
       samo pod cenu přes celou šířku. S basis 0 se cena vejde vždy a při
       nedostatku místa se zalomí uvnitř sebe (na 2 řádky), ne celý řádek. */
    .tk-sticky-buy__price {
      font-size: 1.05rem;
      display: flex;
      flex: 1 1 0;
      min-width: 0;
      justify-content: flex-start;
      gap: 0.15em 0.4em;
      line-height: 1.2;
    }

    .tk-sticky-buy__price .compare-at-price {
      font-size: 0.68em;
    }

    /* Kupónový pill na mobilu na vlastní řádek (nad cenou + tlačítkem) */
    .tk-sticky-buy--has-coupon .tk-sticky-buy__coupon {
      order: -1;
      flex: 1 1 100%;
    }

    .tk-sticky-buy__coupon .pdp-discount {
      width: 100%;
    }

    .tk-sticky-buy__cta {
      flex: 0 0 auto;
      min-height: 44px;
      padding-inline: 20px;
      gap: 6px;
      font-size: 0.95rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-sticky-buy {
      transition: none;
    }
  }
/* END_SNIPPET:tk-sticky-buy-bar */

/* START_SNIPPET:tk-upsell (INDEX:352) */
.tk-upsell {
    --tk-upsell-radius: 14px;
    width: 100%;
  }
  .tk-upsell-recos--hidden { display: none !important; }

  .tk-upsell__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: #14141a;
  }
  .tk-upsell--buybox .tk-upsell__heading {
    font-size: 13px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(20, 20, 26, 0.55);
    margin-bottom: 10px;
  }

  /* ── PDP / cart: horizontální scroll carousel ── */
  .tk-upsell__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tk-upsell__scroll::-webkit-scrollbar { display: none; }
  .tk-upsell--carousel .tk-upsell-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 1 * 12px) / 2.15);
  }
  @media (min-width: 750px) {
    .tk-upsell--carousel .tk-upsell-card { flex-basis: calc((100% - 3 * 12px) / 3.4); }
  }
  @media (min-width: 1100px) {
    .tk-upsell--carousel .tk-upsell-card { flex-basis: calc((100% - 4 * 12px) / 4.4); }
  }

  /* ── Drawer: vertikální stack kompaktních karet ── */
  .tk-upsell__list { display: flex; flex-direction: column; gap: 8px; }

  /* ── Buybox: 4 malé ikonky v řadě ── */
  .tk-upsell__icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* ════ KARTA — brand vzhled (čistá, jako product cards) ════ */
  .tk-upsell-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .tk-upsell-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--style-border-radius-card, 10px);
    overflow: hidden;
    background: var(--color-card-background, #f5f5f6);
  }
  .tk-upsell-card__img { width: 100%; height: 100%; object-fit: cover; }
  .tk-upsell-card__img--placeholder { background: #f0f0f1; }
  .tk-upsell-card__info { display: flex; flex-direction: column; gap: 3px; padding: 8px 0 0; }
  .tk-upsell-card__title {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--color-foreground, #14141a);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (hover: hover) { .tk-upsell-card__title:hover { color: var(--tk-accent, #ff5a00); } }

  /* cena renderuje brand snippet `price` — jen zarovnání */
  .tk-upsell-card__price { margin-top: 1px; }
  .tk-upsell-card__price .price { font-size: 0.92rem; font-weight: 700; }

  .tk-upsell-card__action { margin-top: 8px; }
  .tk-upsell-card__form { display: block; }
  .tk-upsell-card__form .shopify-product-form { display: block; }

  /* Add tlačítko — full-width, brand accent na hover */
  .tk-upsell-card__add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--style-border-radius-buttons-primary, 100px);
    background: var(--color-primary-button-background, #ff5a00);
    color: var(--color-primary-button-text, #fff);
    border: 1px solid var(--color-primary-button-border, #ff5a00);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .tk-upsell-card__add:hover { background: var(--color-primary-button-hover-background, #111); border-color: var(--color-primary-button-hover-border, #111); color: var(--color-primary-button-hover-text, #fff); }
  .tk-upsell-card__add .add-to-cart-icon svg { width: 15px; height: 15px; }
  .tk-upsell-card__add--choose { text-decoration: none; }

  /* ════ KARTA — compact (drawer) — CLICK-THROUGH link, horizontální ════ */
  .tk-upsell-card--compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 8px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
  }
  @media (hover: hover) {
    .tk-upsell-card--compact:hover { background: rgb(var(--color-foreground-rgb) / 0.04); }
  }
  .tk-upsell-card--compact .tk-upsell-card__media {
    flex: 0 0 60px;
    width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-card-background, #f5f5f6);
    display: block;
  }
  .tk-upsell-card--compact .tk-upsell-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tk-upsell-card--compact .tk-upsell-card__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
  }
  .tk-upsell-card--compact .tk-upsell-card__title {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-foreground, #14141a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (hover: hover) {
    .tk-upsell-card--compact:hover .tk-upsell-card__title { color: var(--tk-accent, #ff5a00); }
  }
  .tk-upsell-card--compact .tk-upsell-card__price { margin: 0; }
  .tk-upsell-card--compact .tk-upsell-card__price .price { font-size: 0.86rem; font-weight: 700; }
  .tk-upsell-card__go {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgb(var(--color-foreground-rgb) / 0.4);
    transition: color 0.15s ease, transform 0.15s ease;
  }
  @media (hover: hover) {
    .tk-upsell-card--compact:hover .tk-upsell-card__go { color: var(--tk-accent, #ff5a00); transform: translateX(2px); }
  }

  /* ════ KARTA — add (PDP panel): [obrázek] [název + cena] [ikonka košíku] ════
     Obrázek + název = proklik na produkt. Přidat JEN ikonkou. Konzistentní
     padding u všech karet, jemný oddělovač jen MEZI kartami. */
  .tk-upsell-card--add {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    /* padding-inline = breathing room mezi obsahem a okrajem hover highlightu.
       Bleed (širší hover jako buy box) je na .tk-upsell__list, ne na kartě —
       jinak by záporný margin karty přetekl vodorovně při svislém scrollu. */
    padding: 12px 10px;
    border-radius: 10px;
    transition: background-color 0.15s ease;
  }
  /* hover jen na zařízeních s myší (na touch se „hover" lepí při scrollu = rušivé) */
  @media (hover: hover) {
    .tk-upsell-card--add:hover { background-color: rgb(var(--color-foreground-rgb) / 0.05); }
  }
  /* celá karta = proklik na produkt (stretched link přes název), tlačítko nad ním */
  .tk-upsell-card--add .tk-upsell-card__title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .tk-upsell-card--add .tk-upsell-card__action { position: relative; z-index: 1; }
  /* oddělovač = ROVNÁ linka mezi kartami (ne border na zaoblené kartě → žádné
     zaoblené rohy), zarovnaná s obsahem */
  .tk-upsell-card--add + .tk-upsell-card--add::before {
    content: '';
    position: absolute;
    top: -0.5px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.09);
  }
  .tk-upsell-card__media-link { flex: 0 0 56px; display: block; }
  .tk-upsell-card--add .tk-upsell-card__media {
    width: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-card-background, #f5f5f6);
    display: block;
  }
  .tk-upsell-card--add .tk-upsell-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tk-upsell-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .tk-upsell-card--add .tk-upsell-card__title {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--color-foreground, #14141a);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (hover: hover) {
    .tk-upsell-card--add .tk-upsell-card__title:hover { color: var(--tk-accent, #ff5a00); }
  }
  .tk-upsell-card--add .tk-upsell-card__price { margin: 0; }
  .tk-upsell-card--add .tk-upsell-card__price .price { font-size: 0.88rem; font-weight: 700; }
  .tk-upsell-card--add .tk-upsell-card__action { flex: 0 0 auto; align-self: center; }

  /* ikonkové tlačítko košíku (bez textu) */
  .tk-upsell-card--add .tk-upsell-card__add {
    position: relative;   /* „Přidáno" overlay (inset:0) uvnitř tlačítka */
    overflow: hidden;
    width: 40px;
    height: 40px;
    padding: 0;
    min-height: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text, #fff);
    border: none;
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  @media (hover: hover) {
    .tk-upsell-card--add .tk-upsell-card__add:hover:not([disabled]) {
      background-color: #0a0a0a;
      color: #ff5a00;
    }
  }
  .tk-upsell-card--add .tk-upsell-card__add :is(.add-to-cart-icon, .add-to-cart-icon--added, .svg-wrapper) svg {
    width: 18px;
    height: 18px;
  }
  /* skryj texty — jen ikonka */
  .tk-upsell-card--add .tk-upsell-card__add .add-to-cart-text__content { display: none; }
  .tk-upsell-card--add .tk-upsell-card__add .add-to-cart-text--added > span:not(.svg-wrapper) { display: none; }
  .tk-upsell-card--add .tk-upsell-card__add--choose { text-decoration: none; }

  /* zvoneček „Hlídat dostupnost" (vyprodáno) — neutrální barva, ne lime add */
  .tk-upsell-card--add .tk-upsell-card__add--notify {
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
    color: rgb(var(--color-foreground-rgb) / 0.6);
    text-decoration: none;
  }
  @media (hover: hover) {
    .tk-upsell-card--add .tk-upsell-card__add--notify:hover {
      background-color: rgb(var(--color-foreground-rgb) / 0.12);
      color: var(--color-foreground);
    }
  }
  /* vyprodaná karta jemně ztlumená (obrázek + název) */
  .tk-upsell-card--add:has(.tk-upsell-card__add--notify) .tk-upsell-card__media,
  .tk-upsell-card--add:has(.tk-upsell-card__add--notify) .tk-upsell-card__title { opacity: 0.62; }

  /* ════ KARTA — icons (buybox) — jen obrázek + cena ════ */
  .tk-upsell-card--icons { text-align: center; }
  .tk-upsell-card--icons .tk-upsell-card__info { padding: 5px 0 0; align-items: center; gap: 0; }
  .tk-upsell-card--icons .tk-upsell-card__price .price { font-size: 0.8125rem; font-weight: 600; }
  .tk-upsell-card--icons .tk-upsell-card__media { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .tk-upsell-card--icons:hover .tk-upsell-card__media {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 20, 26, 0.1);
  }

  /* ════ SKELETON (loading shimmer) ════ */
  .tk-upsell-card--skeleton {
    border: none;
    padding: 0;
    background: linear-gradient(90deg, #f0f0f1 25%, #e7e7ea 37%, #f0f0f1 63%);
    background-size: 200% 100%;
    animation: tk-upsell-shimmer 1.4s ease infinite;
    border-radius: var(--tk-upsell-radius);
  }
  .tk-upsell--carousel .tk-upsell-card--skeleton { aspect-ratio: 3 / 4; }
  .tk-upsell--compact .tk-upsell-card--skeleton { height: 66px; border-radius: 12px; }
  .tk-upsell--icons .tk-upsell-card--skeleton { aspect-ratio: 1 / 1; border-radius: 10px; }
  @keyframes tk-upsell-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-upsell-card--skeleton { animation: none; }
  }

  /* ── Brand badge (custom.badges) NAD názvem, v flow (ne overlay na obrázku,
     tam zabíral moc místa). Decentně zmenšené; vyšší specificita přebije
     globální tk-product-card.css. ── */
  .tk-upsell-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
    line-height: 0;
  }
  .tk-upsell-card__badges:empty { display: none; }
  /* Padding přes `--tk-badge-pad-*`, NE shorthandem (viz assets/tk-product-card.css).
     `--tk-badge-nudge: 0` = tahle varianta má `line-height: 1.15`, takže px-nudge
     nepotřebuje; `--tk-badge-trim-comp` = (1.15em − cap 0.7em)/2, aby ořez
     `text-box-trim` nezmenšil pilulku. */
  .tk-upsell-card .tk-badge {
    font-size: 0.8125rem;
    --tk-badge-pad-block: 2px;
    --tk-badge-pad-inline: 6px;
    --tk-badge-nudge: 0px;
    --tk-badge-trim-comp: 0.225em;
    line-height: 1.15;
    border-radius: 5px;
  }

  /* ════ KONSOLIDOVANÝ CART/DRAWER REGÁL — „Doplňte svůj košík" ════
     Kontexty 'cart'/'drawer': JEDEN blok pod položkami. AKTUÁLNĚ NEVOLANÉ
     (uživatel zvolil per-položkovou mini lištu, viz níž) — wrapper
     .tk-cart-upsell by renderoval cart-drawer.liquid / main-cart.liquid. */
  .tk-cart-upsell {
    margin-top: var(--margin-md, 16px);
    padding-top: var(--padding-md, 14px);
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* fallback recos nic nenašel (element se sám schová) → collapse i s borderem */
  .tk-cart-upsell:has(.tk-upsell-recos--hidden) { display: none; }

  /* nadpis = tichý uppercase micro-label (ladí s „ledger" designem draweru) */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell__heading {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    margin: 0 0 10px;
  }

  /* drawer (~420px): 2.6 dlaždice na šířku — useknutá 3. karta = jasná scroll
     affordance. Přebíjí viewport-based basis z .tk-upsell--carousel výš. */
  .tk-upsell--drawer .tk-upsell-card {
    flex: 0 0 calc((100% - 2 * 12px) / 2.6);
  }

  /* ── Dlaždice: vertikální grid karta — obrázek (řádek 1) + název/cena (řádek 2).
     Quick-add tlačítko i badge jdou do BUŇKY OBRÁZKU (grid-area 1/1) jako overlay
     → nezaberou vlastní řádek = kompaktní. Action 'cart-add' → karta --add je
     defaultně horizontální (PDP panel) → tady přerovnat na vertikální. ── */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    padding: 0;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add:hover {
    background: transparent;
  }

  /* oddělovač mezi kartami (z vertikálního panel listu) tady nechceme */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add + .tk-upsell-card--add::before {
    content: none;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__media-link {
    grid-area: 1 / 1;
    width: 100%;
    flex: none;
    display: block;
  }

  /* obrázkové okno 4/3, bílé pozadí, hairline border */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--style-border-radius-sm, 8px);
    background: #fff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.07);
    box-sizing: border-box;
    padding: 6px;
    overflow: hidden;
  }

  /* ⚠️ Obrázek se VŽDY zmenší do okna, NIKDY se neuřízne — contain letterboxuje.
     !important: cover je definovaný 3× a compiled pořadí je nespolehlivé. */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card__media img,
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card__img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    display: block;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__body {
    grid-area: 2 / 1;
    min-width: 0;
    gap: 2px;
  }

  /* badge (Novinka/Akce) → levý horní roh obrázku (absolute vůči kartě —
     position:relative nese base .tk-upsell-card--add) */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__badges {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    margin: 0;
  }

  /* název 2 řádky s REZERVOVANOU výškou → ceny zarovnané napříč dlaždicemi */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__title {
    font-size: 0.8125rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.3em);
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card__price {
    min-height: 1.1em;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card__price .price {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold, 700);
  }

  /* quick-add tlačítko → pravý spodní roh obrázku (grid-area 1/1 overlay) */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__action {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    position: static;
    margin: 7px;
    z-index: 2;
    flex: none;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__add {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 1px 4px rgb(var(--color-foreground-rgb) / 0.18);
  }

  /* jen ikona v rohu — text „Do košíku" schovat */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__add .add-to-cart-text__content {
    display: none;
  }

  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__add :is(.add-to-cart-icon, .svg-wrapper) svg {
    width: 15px;
    height: 15px;
  }

  /* stretched-link (::after přes celou kartu) VYPNOUT — kolidoval by s quick-add
     klikem i horizontálním swipe; navigaci na produkt drží media-link + název. */
  :is(.tk-upsell--cart, .tk-upsell--drawer) .tk-upsell-card--add .tk-upsell-card__title::after {
    content: none;
  }

  /* „Přidáno" feedback + loading (tk-fbt-add.js) — globální behaviorální stavy */
  .tk-upsell-card__add.tk-fbt-add--done,
  .tk-upsell-card__mini-add.tk-fbt-add--done {
    background-color: #0a0a0a;
    color: #ff5a00;
  }

  .tk-upsell-card__add.is-loading,
  .tk-upsell-card__mini-add.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  /* ════ MINI LIŠTA (cart-item) — per-položková „Hodí se k tomu" ════
     Jednořádková: inline micro-label + 3 thumbnaily 44px s + tlačítkem v rohu.
     Název + cena JEN v hover/focus tooltipu → minimum vizuálního šumu. */
  .tk-upsell--mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
  }

  .tk-upsell--mini .tk-upsell__heading {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-foreground-rgb) / 0.72);
    margin: 0;
    white-space: nowrap;
    flex: none;
  }

  .tk-upsell__minirow {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .tk-upsell-card--mini {
    position: relative;
    flex: none;
  }

  .tk-upsell-card__mini-media {
    display: block;
  }

  .tk-upsell-card--mini .tk-upsell-card__media {
    width: 60px;
    height: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.09);
    box-sizing: border-box;
    padding: 4px;
    overflow: hidden;
    display: block;
  }

  /* contain (celý produkt vidět, nikdy neuřízne) — !important kvůli cover v base */
  .tk-upsell-card--mini .tk-upsell-card__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
  }

  /* + tlačítko UVNITŘ obrázku (pravý spodní roh) — nesmí přesahovat rámeček dlaždice.
     Malé a decentní; na touch o chlup větší (tap target). */
  .tk-upsell-card__mini-add {
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--color-primary-button-background, #ff5a00);
    color: var(--color-primary-button-text, #fff);
    box-shadow: 0 1px 3px rgb(var(--color-foreground-rgb) / 0.18);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  @media (hover: hover) {
    .tk-upsell-card__mini-add:hover {
      background-color: #0a0a0a;
      color: #ff5a00;
    }
  }

  @media (hover: none) {
    .tk-upsell-card__mini-add {
      width: 20px;
      height: 20px;
    }
  }

  .tk-upsell-card__mini-add svg {
    width: 9px;
    height: 9px;
    display: block;
  }

  /* tooltip (název + cena) nad dlaždicí. Desktop: hover/focus. Touch: první tap
     na thumbnail tooltip OTEVŘE (.tip-open, řeší tk-upsell.js), druhý tap / tap
     na tooltip naviguje na produkt.
     ⚠️ Skrytý stav = display:none, NE jen opacity:0 — absolutně pozicovaný box
     s opacity:0 se pořád počítá do scrollable overflow → na mobilu dělal
     horizontální scrollbar stránky. */
  .tk-upsell-card__tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    z-index: 6;
    width: max-content;
    max-width: 190px;
    background: #14141a;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 9px;
    border-radius: 7px;
    pointer-events: none;
  }

  /* 2.+ dlaždice: tooltip kotvit k PRAVÉ hraně — roste doleva (do prostoru
     lišty), nikdy nepřeteče pravý okraj košíku/draweru */
  .tk-upsell-card--mini:nth-child(n + 2) .tk-upsell-card__tip {
    left: auto;
    right: 0;
  }

  .tk-upsell-card__tip-price {
    display: block;
    font-weight: 700;
    color: #ff5a00;
    margin-top: 1px;
  }

  /* hint „Zobrazit produkt ›" — jen na touch (kde tooltip = mezikrok k detailu) */
  .tk-upsell-card__tip-hint {
    display: none;
    margin-top: 3px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.65);
  }

  @media (hover: hover) {
    .tk-upsell-card--mini:hover .tk-upsell-card__tip,
    .tk-upsell-card--mini:focus-within .tk-upsell-card__tip {
      display: block;
    }
  }

  /* touch: otevřený stav (.tip-open přidává tk-upsell.js) — tooltip je klikatelný
     (tap na něj naviguje na produkt) */
  .tk-upsell-card--mini.tip-open .tk-upsell-card__tip {
    display: block;
    pointer-events: auto;
    cursor: pointer;
  }

  @media (hover: none) {
    .tk-upsell-card__tip-hint {
      display: block;
    }
  }

  /* skeleton mini = 60px čtverečky */
  .tk-upsell--mini .tk-upsell-card--skeleton {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }
/* END_SNIPPET:tk-upsell */

/* START_SNIPPET:variant-main-picker (INDEX:360) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill,
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }
    .variant-option__button-label__pill {
      transition-property: transform;
    }
    .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
      transition-property: clip-path;
    }
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }
    .variant-option__button-label::after {
      transition-property: clip-path;
    }
    .variant-option__button-label::before {
      transition-property: border-color;
    }
    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);
    cursor: pointer;
    display: flex;
    flex: 0 0 calc(3ch + 1.3em);
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: calc(3ch + 1.3em);
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */
    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }
    /* ::after/::before act as a fake border for the button style variant */
    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }
    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }
    &:has(:checked):not(.variant-option__button-label--has-swatch):not(:has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }
    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */
  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }
    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    display: block;
    flex-basis: auto;
    min-height: auto;
    outline: none;
    /* overflow visible (override base clip) aby akční badge mohl přesahovat kruh */
    overflow: visible;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* TK: akční badge na barevném swatchi (varianta ve slevě) */
  .variant-option__sale-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 16px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1.5px solid var(--color-background, #fff);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }

  .variant-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  /* Hide ONLY non-existent option values (combined listing: barvy, které
     pro aktuálně zvolený Model nemají variantu). Reálně existující ale
     vyprodané varianty zůstávají viditelné se strikethrough indikátorem.
     VÝJIMKA: Model zařízení se vždy zobrazuje celý (i když pro aktuálně
     zvolenou barvu varianta neexistuje) — uživatel chce vidět všechny
     podporované modely. Non-existent kombinace se zobrazí se strikethrough. */
  .variant-option:not([data-tk-device-option]) .variant-option__button-label:has([data-option-available='false']:not([data-variant-exists])) {
    display: none !important;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .variant-option__button-label--has-swatch:hover {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3.5px rgb(var(--color-foreground-rgb) / 0.3);
    transform: scale(1.1);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3.5px var(--color-foreground);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    background-color: inherit;
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label input,
  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label--has-swatch svg {
    stroke: #d32f2f;
    stroke-width: 2px;
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--color-variant-border);

    line {
      stroke-width: var(--options-border-width);
    }

    line:last-of-type {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
      stroke: rgb(var(--color-variant-text-rgb) / 1);
    }
  }

  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  /* ═══════ Unified design: Barva (buttons) + Model zařízení (dropdown) ═══════
     Vertikální stack (theme default), ale sjednocený typografický + interakční
     language. Pokud má produkt Model zařízení (combined listing), oba
     selektory v rámci fomuláře používají:
       - Stejný tvar labelu (legend / <label>)
       - Stejné border/radius tokens
       - Stejný hover feeling (background/border/text)
       - Stejné paddingy */

  /* Target fieldsetů a dropdownu jen když form obsahuje Model zařízení */
  .variant-picker__form:has(.variant-option--dropdowns[data-tk-device-option]) {
    gap: 1.125rem;
  }

  /* Sjednocená legenda Barva a <label> Model */
  .variant-picker__form:has(.variant-option--dropdowns[data-tk-device-option]) legend,
  .variant-option--dropdowns[data-tk-device-option] > label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 0.5rem;
    padding: 0;
  }

  /* Selected value inline u Barva (např. "Barva  Černá") */
  .variant-picker__form:has(.variant-option--dropdowns[data-tk-device-option])
    legend .variant-option__swatch-value {
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb) / 0.65);
    margin-inline-start: 0.375rem;
  }

  /* ═══ Model zařízení dropdown ═══ */
  .variant-option--dropdowns[data-tk-device-option] {
    margin-block: 0;
    max-width: 280px;
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper {
    margin-top: 0;
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper:hover {
    background-color: var(--color-variant-hover-background);
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper:focus-within {
    border-color: var(--color-selected-variant-border);
    box-shadow: 0 0 0 var(--focus-outline-width) rgb(var(--color-foreground-rgb) / 0.12);
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs) + 0.5rem);
    font-size: inherit;
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
    background: transparent;
    min-height: calc(3ch + 1.3em);
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select:focus-visible {
    outline: none;
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper .icon {
    right: var(--padding-md);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    color: currentcolor;
    opacity: 0.75;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper:hover .icon {
    opacity: 1;
  }

  .variant-option--dropdowns[data-tk-device-option] .variant-option__select-wrapper:focus-within .icon {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
  }

  /* Vyprodané modely — ztlumené + přeškrtnuté, žádný textový suffix */
  .variant-option--dropdowns[data-tk-device-option] option[data-option-available='false'] {
    color: rgb(var(--color-foreground-rgb) / 0.4);
    text-decoration: line-through;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-switcher (INDEX:363) */
/* === IMAGE mode (barvy) — přesunuto z color-switcher.liquid při cleanupu === */
  .tk-color-switcher {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-block: 4px 18px;
  }

  .tk-color-switcher__label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .tk-color-switcher__current {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-foreground);
  }

  .tk-color-switcher__options {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Each option = image swatch + name below */
  .tk-color-switcher__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 72px;
    text-decoration: none;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    cursor: pointer;
  }

  .tk-color-switcher__option--current {
    cursor: default;
    color: var(--color-foreground);
  }

  /* Square-ish product-image thumbnail (12px radius — jako karty/zbytek webu) */
  .tk-color-switcher__swatch {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    /* Bílé pozadí — zbytek pole (mimo contain obrázek) je vždy bílý. */
    background-color: #fff;
    /* contain: celý obrázek produktu se vejde do swatche bez ořezu (uživatel
       chce vidět celý produkt, ne výřez). Bez paddingu → obrázek vyplní pole
       co nejvíc (žádné umělé prázdné okraje nahoře/dole). */
    background-size: contain;
    background-position: center;
    /* no-repeat: jinak by se obrázek (zvlášť u contain) dlaždicově opakoval. */
    background-repeat: no-repeat;
    border: 1.5px solid rgb(0 0 0 / 0.08);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Solid-color fallback swatch (no product image) */
  .tk-color-switcher__swatch--color {
    background-size: auto;
  }

  /* Akční badge na barevném swatchi (sourozenec ve slevě) */
  .tk-color-switcher__sale {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 2px solid var(--color-background, #fff);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
    pointer-events: none;
  }

  /* Hover (inactive) — lift + lime ring */
  a.tk-color-switcher__option:hover .tk-color-switcher__swatch {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px rgb(255 90 0 / 0.55),
      0 10px 22px -10px rgb(0 0 0 / 0.3);
  }

  a.tk-color-switcher__option:focus-visible { outline: none; }
  a.tk-color-switcher__option:focus-visible .tk-color-switcher__swatch {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff5a00;
  }

  /* Selected — solid lime ring + check */
  .tk-color-switcher__option--current .tk-color-switcher__swatch {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px #ff5a00,
      0 4px 16px -6px rgb(255 90 0 / 0.5);
  }

  .tk-color-switcher__name {
    font-size: 0.8125rem;
    line-height: 1.15;
    text-align: center;
    font-weight: 500;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
  }

  .tk-color-switcher__option--current .tk-color-switcher__name {
    font-weight: 700;
  }

  /* ===== Spigen: tečky (stejný jazyk jako swatche na kartách) ===== */
  .tk-color-switcher__option--dot { width: auto; gap: 0; }
  .tk-color-switcher__option--dot .tk-color-switcher__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tk-color-switcher__option--dot { position: relative; }
  .tk-color-switcher__swatch--dot {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgb(15 23 42 / 0.16);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 1px 2px rgb(15 23 42 / 0.08);
  }
  a.tk-color-switcher__option--dot:hover .tk-color-switcher__swatch--dot {
    transform: scale(1.14);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 2px 8px rgb(15 23 42 / 0.22);
  }
  a.tk-color-switcher__option--dot:focus-visible .tk-color-switcher__swatch--dot,
  .tk-color-switcher__option--current .tk-color-switcher__swatch--dot {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 0 0 2px #fff, 0 0 0 4px #ff5a00;
  }
  .tk-color-switcher__swatch--dot .tk-color-switcher__sale { top: -6px; right: -8px; min-width: 16px; height: 15px; font-size: 13px; padding: 0 3px; }

  @media (max-width: 480px) {
    .tk-color-switcher__options { gap: 12px; }
    .tk-color-switcher__option { width: 64px; }
    .tk-color-switcher__swatch { width: 50px; height: 50px; }
    .tk-color-switcher__name { font-size: 0.8125rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tk-color-switcher__swatch { transition: none !important; }
    a.tk-color-switcher__option:hover .tk-color-switcher__swatch { transform: none; }
  }

  /* === TEXT mode — A1 spotlight řádky (balení, délka) === */
  .tk-vsel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-block: 4px 18px;
    max-width: 360px;
  }
  .tk-vsel__label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }

  .tk-vsel__panel {
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 14px 34px -26px rgb(0 0 0 / 0.22);
  }

  .tk-vsel__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background 0.25s ease;
  }
  .tk-vsel__row + .tk-vsel__row {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  a.tk-vsel__row:hover { background: rgb(var(--color-foreground-rgb) / 0.025); }
  a.tk-vsel__row:focus-visible { outline: none; background: rgb(255 90 0 / 0.1); }

  /* lime hrana vlevo — roste u vybraného */
  .tk-vsel__bar {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0;
    background: linear-gradient(180deg, #ff5a00, #d94c00);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tk-vsel__radio {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2px solid rgb(var(--color-foreground-rgb) / 0.25);
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .tk-vsel__radio svg { display: block; }

  .tk-vsel__val {
    flex: 1;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .tk-vsel__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .tk-vsel__pl {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .tk-vsel__price {
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .tk-vsel__was {
    font-size: 0.8125rem;
    color: var(--tk-price-compare-color, #3f4652);
    opacity: 1;
    font-variant-numeric: tabular-nums;
  }

  /* promo: markdown (compare_at) = červený pill, kupón (discount_code) = lime chip s kódem */
  .tk-vsel__off { font-size: 0.8125rem; font-weight: 800; line-height: 1; white-space: nowrap; }
  .tk-vsel__off--md { background: #e23b3b; color: #fff; padding: 2px 6px; border-radius: 999px; }
  .tk-vsel__off--cp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgb(255 90 0 / 0.22);
    color: #d94c00;
    padding: 2px 7px;
    border-radius: 7px;
  }
  .tk-vsel__off--cp b { color: var(--color-foreground); font-weight: 800; letter-spacing: 0.02em; }

  .tk-vsel__stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .tk-vsel__dot { width: 6px; height: 6px; border-radius: 50%; font-style: normal; flex: none; }
  .tk-vsel__stock--in { color: #1f9d55; }
  .tk-vsel__stock--in .tk-vsel__dot { background: #1f9d55; }
  .tk-vsel__stock--out { color: #c23b3b; }
  .tk-vsel__stock--out .tk-vsel__dot { background: #c23b3b; }

  /* vybraný řádek */
  .tk-vsel__row--current {
    background: linear-gradient(90deg, rgb(255 90 0 / 0.16), rgb(255 90 0 / 0) 70%);
    cursor: default;
  }
  .tk-vsel__row--current .tk-vsel__bar { width: 4px; }
  .tk-vsel__row--current .tk-vsel__radio { border-color: #d94c00; background: #ff5a00; }

  /* vyprodáno */
  .tk-vsel__row--soldout { opacity: 0.55; }
  .tk-vsel__row--soldout .tk-vsel__val { color: rgb(var(--color-foreground-rgb) / 0.6); }

  @media (max-width: 480px) {
    .tk-vsel__row { padding: 13px 14px; gap: 11px; }
    .tk-vsel__val,
    .tk-vsel__price { font-size: 0.96rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-vsel__bar,
    .tk-vsel__row,
    .tk-vsel__radio { transition: none !important; }
  }
/* END_SNIPPET:variant-switcher */

/* START_SNIPPET:video (INDEX:364) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */