/**
 * Varianty produktu jako dlaždice - styly k variant-tiles.js.
 *
 * Vše je schované za třídou .ce-has-variant-tiles, kterou přidává skript.
 * Bez funkčního JS tedy zůstane původní vzhled se selecty.
 */

.ce-has-variant-tiles .variant-list select.ce-variant-select--replaced {
    display: none !important;
}

/* Název parametru nad dlaždice, aby měly k dispozici celou šířku.
   Platí hned od prvního vykreslení, aby se rozložení nikam neposouvalo
   ve chvíli, kdy select vystřídají dlaždice. */
.detail-parameters tr.variant-list,
.detail-parameters tr.variant-list > th,
.detail-parameters tr.variant-list > td {
    display: block;
    padding-right: 0;
}

.detail-parameters tr.variant-list > th {
    margin-bottom: 6px;
    font-weight: 600;
}

.detail-parameters tr.variant-list > td {
    position: relative;
    padding-bottom: 14px;
    min-height: 62px;
}

/* Více hodnot se ve sloupci s detailem obvykle zalomí do dvou řádků. */
.detail-parameters tr.variant-list > td:has(option:nth-child(6)) {
    min-height: 124px;
}

/*
 * Než se skript dostane ke slovu, překryje select "kostra" dlaždic.
 * Shoptet vykresluje selecty v půlce stránky, ale svůj 380 kB velký skript
 * až za nimi, takže by jinak byly stovky milisekund vidět.
 *
 * Překryv je jen vizuální - select pod ním dál funguje - a po třech
 * sekundách sám zmizí. Když se skript z jakéhokoli důvodu nespustí,
 * zůstane stránka plně použitelná i s původními selecty.
 */
.detail-parameters tr.variant-list > td::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 14px;
    left: 0;
    z-index: 2;
    border-radius: 8px;
    background-color: var(--ce-variant-skeleton-bg, #fff);
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 58px, var(--ce-variant-skeleton-bg, #fff) 58px 62px),
        repeating-linear-gradient(to right, #ededed 0 104px, var(--ce-variant-skeleton-bg, #fff) 104px 112px);
    pointer-events: none;
    animation:
        ce-variant-skeleton-pulse 1.1s ease-in-out infinite alternate,
        ce-variant-skeleton-timeout 0s linear 3s forwards;
}

@keyframes ce-variant-skeleton-pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: .6;
    }
}

@keyframes ce-variant-skeleton-timeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Dlaždice jsou hotové - kostra už není potřeba. */
.ce-has-variant-tiles .detail-parameters tr.variant-list > td::before {
    display: none;
}

/* Tlačítko do košíku vypadá nedostupně hned, ne až po naběhnutí skriptu.
   Neplatí, pokud je varianta předvybraná z odkazu (?variantId=...). */
body.type-product:has(.variant-list select):not(:has(.variant-list option[selected])) .add-to-cart-button {
    opacity: .5;
    cursor: not-allowed;
    animation: ce-variant-skeleton-timeout 0s linear 3s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .detail-parameters tr.variant-list > td::before {
        animation: ce-variant-skeleton-timeout 0s linear 3s forwards;
    }
}

.ce-variant-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0;
}

.ce-variant-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 104px;
    min-height: 58px;
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ce-variant-tile__name {
    font-weight: 700;
    font-size: 15px;
}

.ce-variant-tile__price {
    font-size: 13px;
    color: #767676;
    white-space: nowrap;
}

.ce-variant-tile__price:empty {
    display: none;
}

.ce-variant-tile:hover,
.ce-variant-tile:focus-visible {
    border-color: var(--color-primary-hover, #1997e5);
    outline: none;
}

.ce-variant-tile.is-selected {
    border-color: var(--color-secondary, #468c98);
    background: rgba(70, 140, 152, .08);
    box-shadow: inset 0 0 0 1px var(--color-secondary, #468c98);
}

.ce-variant-tile.is-selected .ce-variant-tile__price {
    color: var(--color-secondary, #468c98);
}

/* Kombinace, která u aktuálního výběru neexistuje. Zůstává klikatelná,
   aby se dal výběr přenastavit, ale je zřetelně odlišená. */
.ce-variant-tile.is-unavailable {
    opacity: .45;
}

.ce-variant-tile.is-unavailable .ce-variant-tile__name {
    text-decoration: line-through;
}

/* Zvýraznění parametru, který ještě není vybraný, po kliknutí na košík. */
.ce-variant-tiles.is-warning .ce-variant-tile {
    animation: ce-variant-warning 1.2s ease;
}

@keyframes ce-variant-warning {
    0%, 100% {
        border-color: #e0e0e0;
    }
    20%, 60% {
        border-color: #d0021b;
    }
    40%, 80% {
        border-color: #e0e0e0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce-variant-tiles.is-warning .ce-variant-tile {
        animation: none;
        border-color: #d0021b;
    }
}

/* Tlačítko do košíku, dokud není zvolená varianta */

.ce-cart-guard {
    position: relative;
}

.add-to-cart-button.ce-cart-blocked {
    opacity: .5;
    cursor: not-allowed;
}

.ce-cart-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;
    max-width: 260px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #1a1937;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    pointer-events: none;
}

.ce-cart-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #1a1937;
}

.add-to-cart-button.ce-cart-blocked:hover + .ce-cart-tooltip,
.add-to-cart-button.ce-cart-blocked:focus + .ce-cart-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 480px) {
    .ce-variant-tile {
        min-width: 88px;
        min-height: 52px;
        padding: 6px 10px;
    }

    .ce-variant-tile__name {
        font-size: 14px;
    }

    .ce-cart-tooltip {
        white-space: normal;
    }
}