/*
    Doma - prvek Doporučené produkty, směr „Polička“.

    Fotka produktu se zaoblenými horními rohy stojí na vlastní dřevěné poličce (světlý dub),
    na rohu fotky visí na provázku zlatá visačka s ikonou (sluchátka, když má produkt ukázku
    zvuku, jinak nákupní taška). Na konci poličky stojí dekorace (květina, hrnek, svíčka...).
    Pod poličkou je název, ukázka zvuku a cenovka - cena vlevo, tlačítko vpravo.

    Jen CSS nad dnešními značkami, takže Klasická i náhled v adminu mají stejné HTML jako dřív:
    - web má mezi kartou a obsahem obal .card-body, admin ne - obal se tu ruší (display:contents)
      a karta .product je mřížka v obou;
    - polička je ::after karty (vlastní řádek mřížky), dekorace ::before karty, provázek
      a visačka jsou ::before a ::after rámu fotky, cenovka je ::before patičky (řádek mřížky
      pod cenou a tlačítkem);
    - jestli má produkt zvuk, prozradí ukázka (.sample) - ta se vykresluje jen u produktu
      s ukázkou zvuku;
    - poličky v řadě jsou ve stejné výšce díky subgridu: řada produktů je mřížka a každá karta
      v ní zabírá tři řádky (fotka, polička, obsah). Fotky se drží spodního okraje řádku.

    Rám fotky nemá overflow:hidden (visačka z něj přečnívá) - fotku ořezává zaoblení a clip-path
    na obrázku samotném. Pohyb (nadzvednutí fotky, houpnutí visačky, přiblížení) je jen při
    najetí myší a bez omezeného pohybu.
*/

.theme-doma .product{
    /* o kolik je fotka z každé strany užší než polička */
    --doma-product-inset:2.6rem;
    --doma-product-radius:1.4rem;
    /* podklad rámu - prosvítá u celého obrázku a než se fotka načte */
    --doma-product-frame:color-mix(in oklab, var(--doma-line) 45%, var(--palette-cream));
    /* provázek - z barvy textu kontextu, takže v tmavé sekci zesvětlá */
    --doma-product-string:color-mix(in oklab, var(--doma-text, var(--palette-brown)) 70%, var(--palette-apricot));
    /* zelené tlačítko - paleta Domy zelenou nemá, šalvějová ladí s papírem */
    --doma-product-green:#B7CDB0;
    --doma-product-green-text:#2E3B2A;
    /* polička - horní plocha (zkrácená pohledem shora), přední hrana a stín na stěně pod ní */
    --doma-shelf-top:.55rem;
    --doma-shelf-front:1.45rem;
    --doma-shelf-board:calc(var(--doma-shelf-top) + var(--doma-shelf-front));
    --doma-shelf-wall-shadow:2.4rem;
    --doma-shelf-shadow-color:color-mix(in srgb, var(--doma-shadow-base) 30%, transparent);
    /* výřez textury dřeva - každá polička v řadě jiný (podle pořadí, níže) */
    --doma-shelf-grain:0rem;
    /* násobek velikosti dekorací - samotná velikost je podíl šířky karty (viz Dekorace na poličce) */
    --doma-decor-scale:1;
}

/* ------------------------------------------------------------------------------------------
    Karta - bez rámečku a podkladu Klasické, mřížka: fotka / polička / obsah
------------------------------------------------------------------------------------------ */
.theme-doma .product.card{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
    /* polička leží pod fotkou se zápornou vrstvou - bez izolace by zapadla pod pozadí sekce */
    isolation:isolate;
    width:100%;
    max-width:46rem;
    aspect-ratio:auto;
    margin:0 auto;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}
.theme-doma .product.card > .card-body{
    display:contents;
}

/* řada produktů - mřížka, aby poličky v řadě byly ve stejné výšce (počet sloupců jako v Klasické) */
.theme-doma .cm-row:has(> :is(.cm-col-50,.cm-col-33,.cm-col-25) > .product.card){
    --doma-product-columns:3;
    display:grid;
    grid-template-columns:repeat(var(--doma-product-columns), minmax(0,1fr));
    column-gap:4rem;
    row-gap:0;
    margin:0;
}
.theme-doma .cm-row:has(> .cm-col-50 > .product.card){
    --doma-product-columns:2;
}
.theme-doma .cm-row:has(> .cm-col-25 > .product.card){
    --doma-product-columns:4;
}
.theme-doma .cm-row > :is(.cm-col-50,.cm-col-33,.cm-col-25):has(> .product.card){
    display:contents;
}
.theme-doma .cm-row > :is(.cm-col-50,.cm-col-33,.cm-col-25) > .product.card{
    grid-row:span 3;
    grid-template-rows:subgrid;
    row-gap:0;
}
/* dva produkty mají širší sloupce - karty je vyplní víc */
.theme-doma .cm-row > .cm-col-50 > .product.card{
    max-width:54rem;
}
/* čtyři a víc v řadě - menší název, aby se vešel */
.theme-doma .cm-row > .cm-col-25 > .product.card .product-content h3{
    font-size:2.1rem;
}
@media (max-width: 1199px){
    .theme-doma .cm-row:has(> .cm-col-25 > .product.card){
        --doma-product-columns:3;
        column-gap:3rem;
    }
}
@media (max-width: 991px){
    .theme-doma .cm-row:has(> :is(.cm-col-33,.cm-col-25) > .product.card){
        --doma-product-columns:2;
    }
}
@media (max-width: 767px){
    .theme-doma .cm-row:has(> :is(.cm-col-50,.cm-col-33,.cm-col-25) > .product.card){
        --doma-product-columns:1;
    }
}

/* ------------------------------------------------------------------------------------------
    Fotka - zaoblené horní rohy, stojí na zadní části horní plochy poličky. Světlo jde zleva
    shora, stín fotky proto padá na stěnu vpravo.
------------------------------------------------------------------------------------------ */
.theme-doma .product.card .img-container{
    grid-row:1;
    grid-column:1;
    align-self:end;
    position:relative;
    /* posun při najetí - top místo translate, aby rám nezaložil vlastní vrstvu (visačka musí zůstat nad dekorací) */
    top:0;
    width:auto;
    margin:0 var(--doma-product-inset) -.1rem;
    overflow:visible;
    border:0;
    border-radius:var(--doma-product-radius) var(--doma-product-radius) 0 0;
    background-color:var(--doma-product-frame);
    box-shadow:.8rem .2rem 1.6rem -.8rem var(--doma-shadow-strong), 0 0 .2rem var(--doma-shadow-tape);
}
/*
    Ořez obrázku nese clip-path (kvůli přiblížení při najetí). Obrázek s automatickou výškou má
    do načtení nulovou výšku a s ořezem by ho prohlížeč nikdy nepovažoval za viditelný - líné
    načítání (loading="lazy") by se nespustilo. Proto aspoň 1 px.
*/
.theme-doma .product.card .img-container img{
    min-height:1px;
    border-radius:var(--doma-product-radius) var(--doma-product-radius) 0 0;
    clip-path:inset(0 round var(--doma-product-radius) var(--doma-product-radius) 0 0);
}
/* pevný rám (rozmazané pozadí, vyplnit, celý obrázek) je v Domě čtverec */
.theme-doma .product.card .img-container:is(.blurred,.filled,.whole){
    aspect-ratio:1/1;
}
/*
    Rozmazaná kopie je zvětšená na 120 %, aby schovala měkké okraje. Rám ji neořízne, proto
    ořez nese ona sama - výřez o 1/12 z každé strany po zvětšení přesně vyplní rám.
*/
.theme-doma .product.card .img-container img.img-background{
    border-radius:0;
    clip-path:inset(8.3333% round calc(var(--doma-product-radius) / 1.2) calc(var(--doma-product-radius) / 1.2) 0 0);
}
.theme-doma .product.card .img-container a:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
    border-radius:var(--doma-product-radius) var(--doma-product-radius) 0 0;
}

/*
    Polička - každý produkt s obrázkem má vlastní. Je to deska ze světlého dubu: úzká horní plocha
    (pohled mírně shora), přední hrana a pod ní stín na stěně. Dřevo je jeden pruh textury
    (products/oak.webp - horní plocha i hrana, vodorovně navazuje), každá polička z něj ukáže
    jiný výřez. Stín na stěně se kreslí do spodní části pseudoprvku, která přesahuje řádek
    (záporný okraj) - box-shadow by ořízl clip-path, který dělá zkosené konce horní plochy.
*/
.theme-doma .product.card:has(.img-container)::after{
    content:"";
    grid-row:2;
    grid-column:1;
    position:relative;
    z-index:-1;
    height:calc(var(--doma-shelf-board) + var(--doma-shelf-wall-shadow));
    margin-bottom:calc(var(--doma-shelf-wall-shadow) * -1);
    background:
        /* kontaktní stín fotky na horní ploše */
        linear-gradient(180deg, color-mix(in srgb, var(--doma-shadow-base) 45%, transparent), transparent)
            var(--doma-product-inset) 0 / calc(100% - var(--doma-product-inset) * 2) var(--doma-shelf-top) no-repeat,
        /* konce desky - levý chytá světlo, pravý je ve stínu */
        linear-gradient(90deg,
            rgb(255 246 232 / .55) 0 .1rem,
            color-mix(in srgb, var(--doma-shadow-base) 16%, transparent) .1rem .3rem,
            transparent 1rem calc(100% - 1rem),
            color-mix(in srgb, var(--doma-shadow-base) 34%, transparent) calc(100% - .2rem))
            0 0 / 100% var(--doma-shelf-board) no-repeat,
        /* dřevo */
        url("products/oak.webp") var(--doma-shelf-grain) 0 / 66.7rem var(--doma-shelf-board) repeat-x,
        /* stín na stěně - střed a měkké konce (světlo zleva, stín je lehce posunutý doprava) */
        radial-gradient(farthest-side at 100% 0, var(--doma-shelf-shadow-color), color-mix(in srgb, var(--doma-shelf-shadow-color) 40%, transparent) 40%, transparent)
            .8rem var(--doma-shelf-board) / 2.4rem var(--doma-shelf-wall-shadow) no-repeat,
        linear-gradient(180deg, var(--doma-shelf-shadow-color), color-mix(in srgb, var(--doma-shelf-shadow-color) 40%, transparent) 40%, transparent)
            3.2rem var(--doma-shelf-board) / calc(100% - 5.4rem) var(--doma-shelf-wall-shadow) no-repeat,
        radial-gradient(farthest-side at 0 0, var(--doma-shelf-shadow-color), color-mix(in srgb, var(--doma-shelf-shadow-color) 40%, transparent) 40%, transparent)
            right 0 top var(--doma-shelf-board) / 2.2rem var(--doma-shelf-wall-shadow) no-repeat;
    /* zkosené konce horní plochy - zadní hrana desky je kratší než přední */
    clip-path:polygon(.4rem 0, calc(100% - .4rem) 0, 100% var(--doma-shelf-top), 100% 100%, 0 100%, 0 var(--doma-shelf-top));
}
/* každá polička jiný výřez dřeva (posun podle pořadí v řadě) */
.theme-doma .cm-row > .cm-col:nth-child(5n+2) > .product.card{
    --doma-shelf-grain:-23.3rem;
}
.theme-doma .cm-row > .cm-col:nth-child(5n+3) > .product.card{
    --doma-shelf-grain:-41.9rem;
}
.theme-doma .cm-row > .cm-col:nth-child(5n+4) > .product.card{
    --doma-shelf-grain:-12.7rem;
}
.theme-doma .cm-row > .cm-col:nth-child(5n+5) > .product.card{
    --doma-shelf-grain:-55.1rem;
}

/*
    Provázek a visačka na pravém horním rohu fotky. Provázek vychází z horní hrany fotky a vede
    do očka visačky; visačka se kolem očka natáčí.
*/
.theme-doma .product.card .img-container::before,
.theme-doma .product.card:not(:has(.img-container)) .product-content::before{
    content:"";
    position:absolute;
    z-index:3;
    background-color:var(--doma-product-string);
    pointer-events:none;
}
.theme-doma .product.card .img-container::before{
    top:-1.6rem;
    right:-3rem;
    width:6rem;
    height:5rem;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M8 16C12-1 33-3 32 42'/%3E%3Cpath d='M17 16C22 5 33 6 32 42'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M8 16C12-1 33-3 32 42'/%3E%3Cpath d='M17 16C22 5 33 6 32 42'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.theme-doma .product.card .img-container::after,
.theme-doma .product.card:not(:has(.img-container)) .product-content::after{
    /* nákupní taška - přeložený horní okraj a ucho na přední straně */
    --doma-product-tag-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l3 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M15.5 10.5a3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
    content:"";
    position:absolute;
    z-index:4;
    width:5rem;
    height:6.1rem;
    /* zkosená ramena visačky nahoře, zaoblený spodek */
    border-radius:1.3rem 1.3rem .7rem .7rem / 1.1rem 1.1rem .7rem .7rem;
    background:
        var(--doma-product-tag-icon) 50% 2.6rem / 2.2rem 2.2rem no-repeat,
        radial-gradient(circle at 50% 1.25rem, var(--palette-cream) .38rem, color-mix(in srgb, var(--palette-brown) 45%, transparent) .46rem, transparent .54rem),
        linear-gradient(180deg, var(--palette-lightgold), var(--palette-gold));
    box-shadow:0 8px 12px -4px var(--doma-shadow);
    rotate:7deg;
    transform-origin:50% 1.25rem;
    pointer-events:none;
}
.theme-doma .product.card .img-container::after{
    top:1.5rem;
    right:-2.5rem;
}
/* produkt se zvukem - sluchátka */
.theme-doma .product.card:has(.sample) .img-container::after,
.theme-doma .product.card:not(:has(.img-container)):has(.sample) .product-content::after{
    --doma-product-tag-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3' y='14' width='4.5' height='7' rx='1.6'/%3E%3Crect x='16.5' y='14' width='4.5' height='7' rx='1.6'/%3E%3C/svg%3E");
}

/* produkt bez obrázku - polička není, visačka visí na smyčce vedle názvu */
.theme-doma .product.card:not(:has(.img-container)) .product-content{
    position:relative;
}
.theme-doma .product.card:not(:has(.img-container)) .product-content::before{
    top:1.8rem;
    right:.4rem;
    width:5rem;
    height:3.6rem;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 36' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M25 35C11 20 13 2 25 2S39 20 25 35'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 36' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M25 35C11 20 13 2 25 2S39 20 25 35'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.theme-doma .product.card:not(:has(.img-container)) .product-content::after{
    top:4.1rem;
    right:.4rem;
}
.theme-doma .product.card:not(:has(.img-container)) .product-content h3{
    min-height:8.4rem;
    padding-right:6.6rem;
}

/* ------------------------------------------------------------------------------------------
    Dekorace na poličce - vyříznutý předmět focený z boku ve výšce očí (products/decor/*.webp,
    světlo zleva, zapečený jemný kontaktní stín pod dnem) stojí na konci poličky a smí přesahovat
    přes roh fotky. Je to ::before karty - položka mřížky ve stejné buňce jako fotka, přitažená ke
    spodnímu okraji řádku (absolutní umístění do řádku subgridu prohlížeče neumí). Velký záporný
    horní okraj zajistí, že výšku řádku nikdy neovlivní. Obrázek se stáhne, jen když se předmět
    opravdu vykreslí.

    Velikost je podíl šířky karty (procenta šířky i okrajů se počítají ze šířky buňky mřížky),
    takže dekorace drží poměr k fotce v každé šířce okna i v každém počtu sloupců. Dno předmětu
    sedí na horní ploše desky, kousek před fotkou (70 % její hloubky): --doma-decor-drop je podíl výšky obrázku
    pod dnem (kontaktní stín, převislé části), okraj dole ho odečte.

    Pořadí v řadě určuje předmět i stranu: liché produkty mají předmět vlevo (vyšší a převislé
    - břečťan, váza, knihy, kaktus), sudé vpravo (nízké - svíčka, oblázky, hrnek, sukulent,
    přesýpací hodiny), protože vpravo nahoře visí visačka. Sousední produkty mají vždy jiný
    předmět, v mřížce o 2-4 sloupcích i ten pod sebou. Visačka a provázek leží nad dekorací
    (vyšší z-index; rám fotky proto nesmí založit vlastní vrstvu - posun při najetí je přes top).

    Bez dekorace: produkt bez obrázku, obsah přes obrázek (dekorace by zakryla název a cenu),
    produkt v článku a styl prvku s vypnutou volbou „Dekorace na poličce“ (cm-style-decor-off).
------------------------------------------------------------------------------------------ */
.theme-doma .cm-row > .cm-col > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-width:calc(var(--doma-decor-w) * var(--doma-decor-scale));
    content:"";
    display:block;
    position:relative;
    z-index:2;
    grid-row:1;
    grid-column:1;
    align-self:end;
    justify-self:start;
    width:var(--doma-decor-width);
    height:auto;
    aspect-ratio:var(--doma-decor-ratio);
    margin:-80rem 0 calc(var(--doma-shelf-top) * -.7 - var(--doma-decor-width) / var(--doma-decor-ratio) * var(--doma-decor-drop, 0)) var(--doma-decor-x, 0);
    background:no-repeat 50% 100% / 100% 100%;
    /* světlo zleva - měkký stín padá doprava na fotku a stěnu (kontaktní stín je v obrázku) */
    filter:drop-shadow(.2rem .05rem .25rem color-mix(in srgb, var(--doma-shadow-base) 24%, transparent));
    transform-origin:var(--doma-decor-pivot, 50%) 100%;
    pointer-events:none;
}
/* vlevo - liché produkty */
.theme-doma .cm-row > .cm-col:nth-child(8n+1) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:47%;
    --doma-decor-ratio:1.7990; /* 367 × 204 px */
    --doma-decor-drop:.0294;
    --doma-decor-x:-8%;
    --doma-decor-pivot:56%;
    background-image:url("products/decor/ivy.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(8n+3) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:22%;
    --doma-decor-ratio:0.7886; /* 194 × 246 px */
    --doma-decor-drop:.0244;
    --doma-decor-x:-3%;
    --doma-decor-pivot:70%;
    background-image:url("products/decor/vase.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(8n+5) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:20%;
    --doma-decor-ratio:2.1099; /* 192 × 91 px */
    --doma-decor-drop:.0769;
    --doma-decor-x:2%;
    --doma-decor-pivot:50%;
    background-image:url("products/decor/books.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(8n+7) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:9%;
    --doma-decor-ratio:0.4545; /* 80 × 176 px */
    --doma-decor-drop:.0227;
    --doma-decor-x:4%;
    --doma-decor-pivot:50%;
    background-image:url("products/decor/cactus.webp");
}
/* vpravo - sudé produkty */
.theme-doma .cm-row > .cm-col:nth-child(10n+2) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:12%;
    --doma-decor-ratio:0.9120; /* 114 × 125 px */
    --doma-decor-drop:.04;
    justify-self:end;
    margin-right:3.5%;
    background-image:url("products/decor/candle.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(10n+4) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:10.5%;
    --doma-decor-ratio:0.8348; /* 96 × 115 px */
    --doma-decor-drop:.0435;
    justify-self:end;
    margin-right:3%;
    background-image:url("products/decor/stones.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(10n+6) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:12%;
    --doma-decor-ratio:1.0769; /* 112 × 104 px */
    --doma-decor-drop:.0385;
    justify-self:end;
    margin-right:3%;
    background-image:url("products/decor/mug.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(10n+8) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:10%;
    --doma-decor-ratio:0.6544; /* 89 × 136 px */
    --doma-decor-drop:.0294;
    justify-self:end;
    margin-right:3.5%;
    background-image:url("products/decor/succulent.webp");
}
.theme-doma .cm-row > .cm-col:nth-child(10n+10) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    --doma-decor-w:6.5%;
    --doma-decor-ratio:0.4028; /* 58 × 144 px */
    --doma-decor-drop:.0278;
    justify-self:end;
    margin-right:4.5%;
    background-image:url("products/decor/hourglass.webp");
}
/*
    Rám bez pevného poměru může být nízký (fotka na šířku) a visačka by pak visela přímo nad
    předmětem vpravo. Předmět proto stojí před fotkou vlevo od visačky, ať je fotka jakákoli.
*/
.theme-doma .cm-row > .cm-col:nth-child(2n) > .product.card:has(.img-container.auto-height):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
    margin-right:calc(var(--doma-product-inset) + 3rem);
}
/* tablet a telefon - převislý břečťan a tráva ve váze nesmí přečnívat z obrazovky */
@media (max-width: 991px){
    .theme-doma .cm-row > .cm-col:is(:nth-child(8n+1),:nth-child(8n+3)) > .product.card:has(.img-container):not(.content-over-image,.blog-article-detail *,.cm-style-decor-off *)::before{
        --doma-decor-x:0%;
    }
}

/* ------------------------------------------------------------------------------------------
    Obsah pod poličkou - název, ukázka zvuku, cenovka
------------------------------------------------------------------------------------------ */
.theme-doma .product.card .product-content{
    grid-row:3;
    grid-column:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:2.2rem .4rem 5.6rem;
    background:none;
}
.theme-doma .product.card .product-content h3{
    display:block;
    min-height:0;
    margin:0 0 1.6rem;
    padding:0;
    font-size:2.4rem;
    line-height:1.2;
    text-align:left;
    color:var(--doma-heading);
}
.theme-doma .product.card .product-content h3 a{
    color:inherit;
    text-decoration:none;
    transition:color .3s;
}
.theme-doma .product.card .product-content h3 a:hover{
    color:var(--link-color, var(--palette-terracotta));
}
.theme-doma .product.card .product-content h3 a:focus-visible{
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
    border-radius:.4rem;
}

/*
    Patička je mřížka: ukázka zvuku přes celou šířku, pod ní cenovka (cena a tlačítko). Podklad
    cenovky je ::before ve stejném řádku. Prostřední řádek pohltí volné místo, takže cenovky
    v řadě karet končí ve stejné výšce.
*/
.theme-doma .product.card .product-footer{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr auto;
    align-items:center;
    padding:0;
    border:0;
}
.theme-doma .product.card .product-footer::before{
    content:"";
    grid-row:3;
    grid-column:1 / -1;
    align-self:stretch;
    border:1px solid var(--doma-line);
    border-radius:var(--doma-product-radius);
    background-color:var(--palette-paper);
    box-shadow:0 14px 28px -24px var(--doma-shadow-strong);
}

/* ukázka zvuku - kulaté tlačítko a vlnka (do prvního přehrání jen naznačená) */
.theme-doma .product.card .sample{
    grid-row:1;
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:1rem;
    min-width:0;
    margin:0 0 1.6rem;
    overflow:visible;
    color:var(--doma-text-body);
}
/* kulaté tlačítko přehrání - span i button (přístupnější varianta), výchozí vzhled tlačítka se ruší */
.theme-doma .product.card .sample > :is(span,button){
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:4.4rem;
    height:4.4rem;
    padding:0;
    border:0;
    border-radius:50%;
    background-color:var(--palette-butter);
    cursor:pointer;
}
/* fokus z klávesnice - kroužek kolem celého kolečka (tlačítko může ležet i uvnitř obalu span) */
.theme-doma .product.card .sample > button:focus-visible,
.theme-doma .product.card .sample > span:has(> button:focus-visible){
    outline:3px solid var(--palette-terracotta);
    outline-offset:3px;
}
.theme-doma .product.card .sample > span > button{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}
.theme-doma .product.card .sample > span > button:focus-visible{
    outline:none;
}
.theme-doma .product.card .sample .sample-icon{
    width:2.8rem !important;
    height:2.8rem !important;
    margin:0;
}
.theme-doma .product.card .sample .sample-icon path:first-child{
    fill:transparent !important;
}
.theme-doma .product.card .sample .sample-icon path:not(:first-child){
    fill:var(--palette-brown) !important;
}
/* trojúhelník „přehrát“ je v ikoně jen obrys - tah ho vyplní (pauza má cest víc, ta zůstává) */
.theme-doma .product.card .sample .sample-icon path:nth-child(2):last-child{
    stroke:var(--palette-brown);
    stroke-width:64;
    stroke-linejoin:round;
}
/* text „Přehrát ukázku“ zůstává pro odečítače, vidět je místo něj naznačená vlnka */
.theme-doma .product.card .sample p{
    flex:1 1 auto;
    min-width:0;
    height:2.6rem;
    overflow:hidden;
    white-space:nowrap;
    text-indent:110%;
    background:linear-gradient(90deg, var(--palette-gold) 0 46%, var(--doma-line) 46%);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M4 12v8M14 8v16M24 13v6M34 5v22M44 10v12M54 14v4M64 7v18M74 11v10M84 3v26M94 9v14M104 12v8M114 6v20M124 13v6M134 9v14M144 4v24M154 11v10M164 8v16M174 13v6M184 10v12M194 14v4'/%3E%3C/svg%3E") 0 50% / 32rem 100% repeat-x;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M4 12v8M14 8v16M24 13v6M34 5v22M44 10v12M54 14v4M64 7v18M74 11v10M84 3v26M94 9v14M104 12v8M114 6v20M124 13v6M134 9v14M144 4v24M154 11v10M164 8v16M174 13v6M184 10v12M194 14v4'/%3E%3C/svg%3E") 0 50% / 32rem 100% repeat-x;
}
/* skutečná vlna se vykreslí až po prvním kliknutí - do té doby místo nezabírá */
.theme-doma .product.card .sample:has(> p) .wave{
    flex:0 0 0;
}
/*
    Nepřehraná část vlny má od knihovny světle šedou (#ECECEC), která na krémovém papíře skoro
    zmizí - v Domě ji filtr ztmaví do teplé béžové. Přehraná část (barva tlačítek) zůstává.
*/
.theme-doma .product.card .sample .wave > div::part(canvases){
    filter:brightness(.86) sepia(.4);
}

/* cenovka - cena vlevo, tlačítko vpravo */
.theme-doma .product.card .product-footer .price{
    grid-row:3;
    grid-column:1;
    z-index:1;
    justify-content:flex-start;
    min-width:0;
    padding:.8rem 1rem .8rem 1.8rem;
    font-weight:400;
    color:var(--palette-brown);
}
.theme-doma .product.card .product-footer .price p{
    font-family:var(--font-heading, inherit);
    font-size:2.5rem !important;
    font-weight:400;
    line-height:1;
    color:inherit;
}
.theme-doma .product.card .product-footer .price .old-price{
    margin-bottom:.4rem;
    font-family:var(--font-body, inherit);
    font-size:1.4rem;
    line-height:1.2;
    color:color-mix(in oklab, var(--palette-brown) 72%, var(--palette-paper));
}
.theme-doma .product.card .product-footer .price .price-discounted,
.theme-doma .product.card .product-footer .price .price-discounted .old-price{
    line-height:1.05;
}
.theme-doma .product.card .product-footer .btn{
    grid-row:3;
    grid-column:2;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:4.4rem;
    margin:.8rem .8rem .8rem 0;
    padding:0 2rem;
    font-size:1.45rem;
    line-height:1.2;
    white-space:nowrap;
}
.theme-doma .product.card .product-footer .btn.middle{
    min-height:4.8rem;
    padding:0 2.4rem;
    font-size:1.6rem;
}
.theme-doma .product.card .product-footer .btn.bigger{
    min-height:5.6rem;
    padding:0 3rem;
    font-size:1.75rem;
}

/* ------------------------------------------------------------------------------------------
    Barvy tlačítka (volba prvku) - hlavní bere barvy šablony, ostatní ladí s papírem
------------------------------------------------------------------------------------------ */
.theme-doma .product .btn-green,
.theme-doma .product .btn-green:hover{
    background:var(--doma-product-green);
    color:var(--doma-product-green-text) !important;
    box-shadow:none;
}
.theme-doma .product .btn-white,
.theme-doma .product .btn-white:hover{
    border:1.5px solid color-mix(in oklab, var(--doma-line) 80%, var(--palette-brown));
    background:var(--palette-paper);
    color:var(--palette-brown) !important;
    box-shadow:none;
}
.theme-doma .product .btn-black,
.theme-doma .product .btn-black:hover{
    background:var(--palette-brown);
    color:var(--palette-cream) !important;
    box-shadow:none;
}

/* ------------------------------------------------------------------------------------------
    Obsah přes obrázek - panel 3:4 na poličce, název a cenovka u spodní hrany fotky
------------------------------------------------------------------------------------------ */
.theme-doma .product.card.content-over-image:has(.img-container) .img-container{
    position:relative;
    top:auto;
    left:auto;
    height:auto;
    aspect-ratio:3/4;
}
.theme-doma .product.card.content-over-image:has(.img-container) .img-container img:not(.img-background){
    height:100%;
    object-fit:cover;
}
/*
    Obsah leží ve stejné buňce jako fotka a výšku řádku neurčuje (contain:size) - drží se
    spodního okraje panelu, popis po rozbalení vyjede nahoru přes fotku.
*/
.theme-doma .product.card.content-over-image:has(.img-container) .product-content{
    grid-row:1;
    grid-column:1;
    align-self:stretch;
    contain:size;
    z-index:2;
    justify-content:flex-end;
    /* spodní okraj stejně jako fotka - panel stojí na zadní části horní plochy poličky */
    margin:0 var(--doma-product-inset) -.1rem;
    padding:6rem 1.6rem 1.6rem 2.2rem;
    overflow:clip;
    border-radius:var(--doma-product-radius) var(--doma-product-radius) 0 0;
    background:linear-gradient(0deg,
        color-mix(in srgb, var(--palette-paper) 97%, transparent) 0%,
        color-mix(in srgb, var(--palette-paper) 88%, transparent) 40%,
        color-mix(in srgb, var(--palette-paper) 0%, transparent) 68%);
}
.theme-doma .product.card.content-over-image:has(.img-container) .product-content h3{
    margin-bottom:1.4rem;
    font-size:2.3rem;
    color:var(--palette-brown);
}
.theme-doma .product.card.content-over-image:has(.img-container) .product-footer{
    flex:none;
    grid-template-rows:auto 0 auto;
}
.theme-doma .product.card.content-over-image:has(.img-container) .product-footer::before{
    border-color:color-mix(in oklab, var(--doma-line) 70%, var(--palette-paper));
    background-color:color-mix(in oklab, var(--palette-butter) 28%, var(--palette-paper));
    box-shadow:none;
}
.theme-doma .product.card.content-over-image:has(.img-container) .sample{
    color:var(--palette-brown);
}
/* pod panelem zbývá jen odsazení od další řady (stín na stěně do něj zasahuje) */
.theme-doma .product.card.content-over-image:has(.img-container)::after{
    margin-bottom:calc(5.6rem - var(--doma-shelf-wall-shadow));
}

/* popis - po najetí myší i při pohybu klávesnicí uvnitř karty */
.theme-doma .product.card.content-over-image .product-description{
    padding:0;
    font-size:1.5rem !important;
    color:color-mix(in oklab, var(--palette-brown) 86%, var(--palette-paper));
}
.theme-doma .product.card.content-over-image:is(:hover,:focus-within) .product-description{
    max-height:14rem;
    padding:0 0 1.4rem;
    opacity:1;
}

/* tmavý přechod - hnědá z palety, světlé texty, průsvitná cenovka */
.theme-doma .product.card.content-over-image.dark-overlay:has(.img-container) .product-content{
    background:linear-gradient(0deg,
        color-mix(in srgb, var(--palette-brown) 94%, transparent) 0%,
        color-mix(in srgb, var(--palette-brown) 80%, transparent) 38%,
        color-mix(in srgb, var(--palette-brown) 0%, transparent) 68%);
}
.theme-doma .product.card.content-over-image.dark-overlay:has(.img-container) :is(.product-content h3,.sample,.product-footer .price,.product-description){
    color:var(--palette-cream);
}
.theme-doma .product.card.content-over-image.dark-overlay:has(.img-container) .product-footer .price .old-price{
    color:color-mix(in srgb, var(--palette-cream) 82%, transparent);
}
.theme-doma .product.card.content-over-image.dark-overlay:has(.img-container) .product-footer::before{
    border-color:color-mix(in srgb, var(--palette-cream) 22%, transparent);
    background-color:color-mix(in srgb, var(--palette-cream) 12%, transparent);
}
.theme-doma .product.card.content-over-image.dark-overlay:has(.img-container) .sample p{
    background:linear-gradient(90deg, var(--palette-gold) 0 46%, color-mix(in srgb, var(--palette-cream) 35%, transparent) 46%);
}

/* ------------------------------------------------------------------------------------------
    Jeden produkt - na šířku: fotka s poličkou vlevo, obsah vpravo (v úzkém místě pod sebou)
------------------------------------------------------------------------------------------ */
.theme-doma .cm-row > .cm-col-100:has(> .product.card){
    container:doma-product / inline-size;
}
/* od 64rem (obsah sloupce bez odsazení) - vejde se i do sloupce článku */
@container doma-product (min-width: 64rem){
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image){
        grid-template-columns:minmax(0,40rem) minmax(0,52rem);
        grid-template-rows:auto auto;
        justify-content:center;
        align-items:center;
        column-gap:clamp(3.2rem, 5cqi, 5.6rem);
        max-width:100%;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image){
        --doma-product-inset:3.4rem;
        --doma-decor-scale:1.05;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image)::after{
        margin-bottom:calc(5.6rem - var(--doma-shelf-wall-shadow));
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .product-content{
        grid-row:1 / span 2;
        grid-column:2;
        align-self:center;
        padding:0 0 5.6rem;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .product-content h3{
        margin-bottom:2.2rem;
        font-size:clamp(2.8rem, 4.4cqi, 4.2rem);
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .product-footer{
        flex:none;
        grid-template-rows:auto 0 auto;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .sample{
        margin-bottom:2.2rem;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .sample > :is(span,button){
        width:5.2rem;
        height:5.2rem;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .sample p{
        height:3.2rem;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .product-footer .price p{
        font-size:clamp(2.6rem, 3.2cqi, 3.4rem) !important;
    }
    .theme-doma .cm-col-100 > .product.card:has(.img-container):not(.content-over-image) .product-footer .btn:not(.middle,.bigger){
        min-height:5.2rem;
        padding:0 2.8rem;
        font-size:1.6rem;
    }
}

/* ------------------------------------------------------------------------------------------
    Bez obrázku i názvu - jen tlačítko s cenou (nebo vlastním textem) v textu stránky
------------------------------------------------------------------------------------------ */
.theme-doma .product.full-width{
    margin:0 auto 2rem;
}
.theme-doma .product.full-width .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:.4rem .8rem;
    min-width:0;
    min-height:5.2rem;
    padding:1.2rem 2.4rem;
    font-size:1.6rem;
    font-weight:700;
    line-height:1.25;
    white-space:normal;
}
.theme-doma .product.full-width .btn.middle{
    min-height:5.8rem;
    padding:1.3rem 2.8rem;
    font-size:1.8rem;
}
.theme-doma .product.full-width .btn.bigger{
    min-height:6.4rem;
    padding:1.4rem 3.2rem;
    font-size:2.1rem;
}
/* ikonka cenovky před textem */
.theme-doma .product.full-width .btn::before{
    content:"";
    flex:none;
    width:1em;
    height:1em;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5V11l9.5 9.5a1.5 1.5 0 0 0 2.1 0l5.9-5.9a1.5 1.5 0 0 0 0-2.1L11 3H4.5A1.5 1.5 0 0 0 3 4.5z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5V11l9.5 9.5a1.5 1.5 0 0 0 2.1 0l5.9-5.9a1.5 1.5 0 0 0 0-2.1L11 3H4.5A1.5 1.5 0 0 0 3 4.5z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.theme-doma .product.full-width .btn .old-price{
    display:inline;
    font-size:80%;
    font-weight:600;
    line-height:inherit;
    color:inherit;
    opacity:.7;
}

/* ------------------------------------------------------------------------------------------
    Pohyb - jen při najetí myší a bez omezeného pohybu: fotka se nadzvedne z poličky,
    obrázek se jemně přiblíží (ořez se zúží stejným tempem, takže rám zůstává), visačka se
    houpne kolem očka
------------------------------------------------------------------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .product.card :is(.img-container,.img-container img:not(.img-background)),
    .theme-doma .product.card.content-over-image:has(.img-container) .product-content{
        transition:top .9s var(--doma-ease), translate .9s var(--doma-ease), scale 1.4s var(--doma-ease), clip-path 1.4s var(--doma-ease);
    }
    .theme-doma .product.card::before{
        transition:rotate 1.6s var(--doma-ease);
    }
    .theme-doma .product.card .img-container::after,
    .theme-doma .product.card:not(:has(.img-container)) .product-content::after{
        transition:rotate 1.2s var(--doma-ease);
    }
    .theme-doma .product.card .sample > :is(span,button){
        transition:translate .6s var(--doma-ease);
    }
    /* rám fotky se zvedá přes top - translate by založil vrstvu a dekorace by překryla visačku */
    .theme-doma .product.card:not(.content-over-image):hover .img-container{
        top:-.6rem;
    }
    .theme-doma .product.card.content-over-image:has(.img-container):hover :is(.img-container,.product-content){
        translate:0 -.6rem;
    }
    /* rostliny a tráva ve váze se jemně zhoupnou */
    .theme-doma .cm-row > .cm-col:is(:nth-child(8n+1),:nth-child(8n+3),:nth-child(8n+7)) > .product.card:hover::before{
        rotate:-1.5deg;
    }
    .theme-doma .product.card:hover .img-container img:not(.img-background){
        scale:1.04;
        clip-path:inset(1.923% round calc(var(--doma-product-radius) / 1.04) calc(var(--doma-product-radius) / 1.04) 0 0);
    }
    .theme-doma .product.card:hover .img-container::after,
    .theme-doma .product.card:not(:has(.img-container)):hover .product-content::after{
        rotate:-5deg;
    }
    .theme-doma .product.card .sample > :is(span,button):hover{
        translate:0 -2px;
    }
}
@media (prefers-reduced-motion: reduce){
    .theme-doma .product.card.content-over-image .product-description{
        transition:none;
    }
}

/* ------------------------------------------------------------------------------------------
    Telefon a tablet
------------------------------------------------------------------------------------------ */
@media (max-width: 991px){
    .theme-doma .product.card .product-content h3{
        font-size:2.2rem;
    }
}
@media (max-width: 767px){
    .theme-doma .product.card .product-content{
        padding-bottom:4.8rem;
    }
    .theme-doma .product.card.content-over-image:has(.img-container)::after{
        margin-bottom:calc(4.8rem - var(--doma-shelf-wall-shadow));
    }
}

/* ------------------------------------------------------------------------------------------
    Produkt vložený do článku (kód s:ID) - lístek na šířku jako v návrhu článku: papírová karta
    s páskou, malý obrázek vlevo, vpravo název, ukázka zvuku a pod přerušovanou linkou cena
    s tlačítkem. Polička tu není; štítkem je visačka na rohu obrázku (sluchátka / taška) - text
    štítku by potřeboval údaj, který produkt nemá. Tlačítko je hnědé jako v návrhu (barvu
    produktu v článku nevolí redaktor, dává ji článek).
------------------------------------------------------------------------------------------ */
.theme-doma .blog-article-detail .cm-row > .cm-col-100:has(> .product.card){
    /* rozvržení jednoho produktu na šířku s poličkou tu neplatí */
    container-type:normal;
}
.theme-doma .blog-article-detail .content-text .product.card{
    --doma-product-radius:1.6rem;
    position:relative;
    grid-template-columns:15rem minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
    column-gap:2.6rem;
    max-width:none;
    margin:0;
    padding:2.2rem;
    border-radius:2.4rem;
    background:var(--palette-paper);
    box-shadow:0 30px 60px -40px var(--doma-shadow-strong);
    rotate:-.6deg;
}
.theme-doma .blog-article-detail .content-text .product.card:not(:has(.img-container)){
    grid-template-columns:minmax(0,1fr);
}
/* páska nahoře vpravo */
.theme-doma .blog-article-detail .content-text .product.card::before{
    content:"";
    position:absolute;
    z-index:5;
    top:-1.3rem;
    right:4rem;
    width:10rem;
    height:2.6rem;
    background-color:color-mix(in srgb, var(--palette-butter) 92%, transparent);
    rotate:4deg;
    pointer-events:none;
}
/* bez poličky (ani textura dřeva se nestahuje) */
.theme-doma .blog-article-detail .content-text .product.card::after{
    content:none;
    background:none;
}
.theme-doma .blog-article-detail .content-text .product.card .img-container{
    grid-row:1;
    grid-column:1;
    align-self:center;
    margin:0;
    aspect-ratio:1/1;
    border-radius:var(--doma-product-radius);
    box-shadow:none;
}
.theme-doma .blog-article-detail .content-text .product.card .img-container img:not(.img-background){
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    border-radius:var(--doma-product-radius);
    clip-path:inset(0 round var(--doma-product-radius));
}
/* menší visačka a provázek - natočení a zmenšení kolem očka */
.theme-doma .blog-article-detail .content-text .product.card .img-container::after{
    scale:.8;
}
.theme-doma .blog-article-detail .content-text .product.card .img-container::before{
    scale:.8;
    transform-origin:3.2rem 4.2rem;
}
.theme-doma .blog-article-detail .content-text .product.card .product-content{
    grid-row:1;
    grid-column:2;
    padding:0;
}
.theme-doma .blog-article-detail .content-text .product.card:not(:has(.img-container)) .product-content{
    grid-column:1;
}
.theme-doma .blog-article-detail .content-text .product.card .product-content h3{
    margin:0 0 1.4rem;
    font-size:2.8rem;
    font-weight:400;
    line-height:1.2;
}
.theme-doma .blog-article-detail .content-text .product.card .sample{
    margin-bottom:1.4rem;
}
.theme-doma .blog-article-detail .content-text .product.card .product-footer{
    flex:none;
    grid-template-rows:auto 0 auto;
}
/* místo cenovky přerušovaná linka nad cenou a tlačítkem */
.theme-doma .blog-article-detail .content-text .product.card .product-footer::before{
    grid-row:3;
    align-self:start;
    height:0;
    border:0;
    border-top:2px dashed var(--doma-line);
    border-radius:0;
    background:none;
    box-shadow:none;
}
.theme-doma .blog-article-detail .content-text .product.card .product-footer .price{
    padding:1.4rem 1rem 0 0;
}
.theme-doma .blog-article-detail .content-text .product.card .product-footer .price p{
    font-size:3rem !important;
}
.theme-doma .blog-article-detail .content-text .product.card .product-footer .btn,
.theme-doma .blog-article-detail .content-text .product.card .product-footer .btn:hover{
    min-height:4.8rem;
    margin:1.4rem 0 0;
    padding:0 2.4rem;
    font-size:1.5rem;
    background:var(--palette-brown);
    color:var(--palette-cream) !important;
    box-shadow:none;
}
/* při najetí se zvedne celý lístek, ne jen obrázek */
.theme-doma .blog-article-detail .content-text .product.card:hover .img-container{
    top:0;
    translate:none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .theme-doma .blog-article-detail .content-text .product.card{
        transition:translate .9s var(--doma-ease);
    }
    .theme-doma .blog-article-detail .content-text .product.card:hover{
        translate:0 -.6rem;
    }
    .theme-doma .blog-article-detail .content-text .product.card:hover .img-container img:not(.img-background){
        clip-path:inset(1.923% round calc(var(--doma-product-radius) / 1.04));
    }
}
/* telefon - obrázek nad textem */
@media (max-width: 575px){
    .theme-doma .blog-article-detail .content-text .product.card{
        grid-template-columns:minmax(0,1fr);
        row-gap:2.2rem;
    }
    .theme-doma .blog-article-detail .content-text .product.card .img-container{
        justify-self:start;
        width:15rem;
    }
    .theme-doma .blog-article-detail .content-text .product.card .product-content{
        grid-row:2;
        grid-column:1;
    }
    .theme-doma .blog-article-detail .content-text .product.card .product-content h3{
        font-size:2.6rem;
    }
}