/* Pouzdro s hodnocením (graded slab): náhled karty v pouzdře se štítkem. Rozložení počítá frontend/src/pouzdro/stitek.ts
   z rozměrů pouzdra (formát STITEK_HRG, vlastnosti.pouzdro), tady je jen vzhled. Jen na webu, netiskne se. */

.pouzdro { position: relative; aspect-ratio: var(--pouzdro-pomer, 82.5 / 136.5); border-radius: 4.5% / 2.8%; background: linear-gradient(160deg, rgba(234, 244, 255, .75), rgba(200, 222, 243, .45) 45%, rgba(236, 245, 255, .7)); border: 2px solid rgba(120, 160, 200, .75); box-shadow: 0 10px 24px -14px rgba(34, 34, 59, .55), inset 0 0 0 3px rgba(255, 255, 255, .65), inset 0 0 0 4px rgba(120, 160, 200, .35); box-sizing: border-box; }
.pouzdro > * { position: absolute; }
.pouzdro__okenko, .pouzdro__kapsa { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(110, 150, 190, .55), 0 0 0 1px rgba(255, 255, 255, .6); }
.pouzdro__karta { overflow: hidden; border-radius: 4.8% / 3.4%; }
.pouzdro__karta img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pouzdro__stitek { display: block; box-shadow: 0 1px 2px rgba(34, 34, 59, .25); background: #fff; }
.pouzdro__lesk { inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25) 76%, rgba(255, 255, 255, 0) 82%); }

/* Konfigurátor: pouzdro kolem náhledu karty, karta v něm zůstává živá (překlápění, úpravy). */
.pouzdro--prekryv { position: absolute; aspect-ratio: auto; z-index: 3; pointer-events: none; background: linear-gradient(160deg, rgba(234, 244, 255, .55), rgba(200, 222, 243, .25) 45%, rgba(236, 245, 255, .5)); }
.pouzdro--prekryv[hidden] { display: none; }
.pouzdro--prekryv .pouzdro__kapsa { background: none; }
.konf__nahled.pouzdro-zapnuto .flip { margin-top: var(--pouzdro-nahore, 0); margin-bottom: var(--pouzdro-dole, 0); max-width: min(360px, calc(42vh * var(--pomer-cislo, .716))); margin-left: auto; margin-right: auto; }
.konf__nahled--3d .pouzdro--prekryv { display: none; }
.konf__nahled--3d.pouzdro-zapnuto .flip { margin-top: 0; margin-bottom: 0; }
@media (max-width: 900px) {
  .konf__nahled.pouzdro-zapnuto .flip { max-width: min(100%, calc(17vh * var(--pomer-cislo, .716))); }
}

.pouzdro-volba { margin: var(--m-5) 0 0; padding: var(--m-4); border: 2px solid var(--linka); border-radius: var(--r-l); background: var(--bila); }
.pouzdro-volba__nadpis { font-size: var(--t-l); margin: 0 0 var(--m-2); }
.pouzdro-volba__zapnout { display: flex; gap: var(--m-2); align-items: flex-start; font-weight: 700; cursor: pointer; }
.pouzdro-volba__zapnout input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--inkoust); }
.pouzdro-volba__popis { margin: var(--m-2) 0 0; font-size: var(--t-s); color: var(--inkoust-2); }
.pouzdro-volba__pole { margin-top: var(--m-4); }
.pouzdro-volba__stav, .stitek-uprava__stav { margin: var(--m-2) 0 0; font-size: var(--t-s); font-weight: 700; }
.pouzdro-volba__stav:empty, .stitek-uprava__stav:empty { display: none; }

.stitek-pole__styl { display: flex; flex-wrap: wrap; gap: var(--m-2) var(--m-4); margin: 0 0 var(--m-3); padding: 0; border: 0; }
.stitek-pole__styl legend { font-weight: 800; margin-bottom: 6px; padding: 0; }
.stitek-pole__volba { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.stitek-pole__mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--m-3); }
.stitek-pole__pole { margin-bottom: var(--m-3); }
.stitek-pole__pole--siroke { grid-column: 1 / -1; }
.stitek-pole__pole small { font-size: 13px; color: var(--inkoust-2); }

/* Košík: malé pouzdro s náhledem karty místo obrázku doplňku. */
.kosik__pouzdro { line-height: 0; }
.pouzdro--mini { width: 100%; border-width: 1px; }
.stitek-uprava { margin: var(--m-2) 0 0; }
.stitek-uprava summary { font-size: var(--t-s); font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.stitek-uprava__formular { margin-top: var(--m-3); }
.kosik__polozka[data-pouzdro-polozka] .kosik__obrazek { align-self: start; position: sticky; top: calc(var(--hlava-v, 64px) + 8px); }