/* ==========================================================================
   Oprava zobrazení produktových obrázků (iOS Safari)
   --------------------------------------------------------------------------
   Problém: kontejnery obrázků mají výšku danou jen přes min-height / max-height
   (příp. aspect-ratio), nikoli přes height. WebKit v takovém případě nepovažuje
   výšku rodiče za "definitivní", takže procentní výšky potomků
   (picture{height:100%}, img{max-height:90%}) se vyhodnotí jako auto / none.
   Obrázek se pak vykreslí v intrinsic velikosti, přeteče dlaždici a rozhodí
   grid. Chrome i Firefox si to dopočítají, Safari ne.
   Řešení: každá úroveň řetězce má definitivní výšku (height / absolutní
   pozicování), procenta se pak vyhodnotí správně ve všech prohlížečích.

   Načítá se jako poslední, po product-list.css i product-detail.css.
   ========================================================================== */


/* === VÝPIS ZBOŽÍ ========================================================== */

/* height místo pouhého min/max-height -> definitivní výška pro potomky */
.product-item__picture {
    height: 290px;
    height: 18.125rem;
    min-height: 18.125rem;
    max-height: 18.125rem;
    overflow: hidden;
}

.product-item__picture picture {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
    /* WebKit: flex item se jinak nesmrskne pod intrinsic velikost obsahu */
    min-height: 0;
    min-width: 0;
}

.product-item__picture img {
    display: block;
    height: auto;
    width: auto;
    max-height: 90%;
    max-width: 90%;
    -o-object-fit: contain;
    object-fit: contain;
    object-position: center;
}

/* Doporučené produkty - malá varianta 100x100 */
.product-item--recommneded .product-item__picture {
    height: 100px;
    height: 6.25rem;
    min-height: 6.25rem;
    max-height: 6.25rem;
    width: 100px;
    width: 6.25rem;
    max-width: 6.25rem;
}

.product-item--recommneded .product-item__picture img {
    max-height: 100%;
    max-width: 100%;
}

/* jumpcontent u doporučených záměrně přesahuje mimo obrázek - nesmí se oříznout */
.product-item--recommneded .product-item__picture {
    overflow: visible;
}


/* === DETAIL ZBOŽÍ - hlavní obrázek ======================================== */

/* Výška plyne z aspect-ratio / min-height, což WebKit neumí použít jako
   základ pro procenta. Obsah se proto pozicuje absolutně - containing block
   je padding box rodiče, jehož výška je vždy definitivní. */
.detail-picture__main {
    overflow: hidden;
    position: relative;
}

.detail-picture__main picture {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 1.875rem;
    height: auto;
    left: 1.875rem;
    position: absolute;
    right: 1.875rem;
    top: 1.875rem;
    width: auto;
}

.detail-picture__main picture img {
    display: block;
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    object-position: center;
}

/* iOS < 15 nezná aspect-ratio - poměr 1:1 dorovnáme pseudoprvkem */
@supports not (aspect-ratio: 1 / 1) {
    .detail-picture__main:before {
        content: "";
        display: block;
        padding-top: 100%;
        width: 0;
    }
}


/* === DETAIL ZBOŽÍ - náhledy =============================================== */

.detail-picture__secondary .item picture {
    min-height: 0;
    min-width: 0;
}

.detail-picture__secondary .item picture img {
    display: block;
    height: auto;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

@supports not (aspect-ratio: 1 / 1) {
    .detail-picture__secondary .item {
        min-height: 130px;
        min-height: 8.125rem;
    }
}