/**
 * mavatex.cz - detail produktu (sekce/detail.latte, skript mvxDetailBuild). Tokeny --mvx-* z css/vlastni.css.
 * Rozlozeni: .detail_flex = galerie (vlevo) | .detail_right = nakupni panel (vpravo):
 *   .mvx-buy__head | .mvx-mat (materialy) | .mvx-pbox (cena, stepper, CTA, chips) | .mvx-info (trojice)
 */

.mvx-skryt { display: none !important; }

div#detail_zbozi { display: block !important; width: 100%; max-width: none; padding: 0; }
.mvx-detail div#detail_zbozi > .detail_flex { grid-column: 1 / -1; }
.mvx-detail .tpl-detail-hlavni { padding-top: 8px; }
.mvx-detail div#detail_zbozi > .detail_flex { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; width: 100%; max-width: none; float: none; margin: 0; padding: 0; }

/* ---------- galerie ---------- */
.mvx-detail .zbozi_prilohy_2 { grid-row: 1; grid-column: 1; align-self: start; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
.mvx-detail .zbozi_prilohy_popisek_2 { display: none; }
.mvx-detail .zbozi_prilohy_jpg_2 { position: relative; width: 100%; height: auto; aspect-ratio: 1; margin: 0; padding: 0; border-radius: var(--tpl-detail-photo-radius, 20px); background: var(--mvx-surface); overflow: hidden; }
.mvx-detail #img_velky { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0; object-fit: cover; cursor: zoom-in; }
.mvx-detail .zbozi_prilohy_nahledy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; margin: 0; padding: 0; }
.mvx-detail .zbozi_prilohy_nahledy img.img_zbozi { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: var(--mvx-radius); object-fit: cover; cursor: pointer; opacity: .7; transition: opacity .15s, box-shadow .15s; }
.mvx-detail .zbozi_prilohy_nahledy img.img_zbozi:hover { opacity: 1; }
.mvx-detail .zbozi_prilohy_nahledy img.img_zbozi.is-on { opacity: 1; box-shadow: var(--mvx-ring); }
.mvx-detail .zbozi_prilohy_bottom { display: none; }
.mvx-detail .tpl-popis-card { display: none; }
.mvx-gal__arr { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--mvx-ink); font: 700 22px/1 var(--mvx-font); cursor: pointer; box-shadow: var(--mvx-shadow-float); }
.mvx-gal__arr--prev { left: 16px; }
.mvx-gal__arr--next { right: 16px; }
.mvx-gal__arr:hover { background: #fff; }
.mvx-gal__cnt { position: absolute; right: 16px; bottom: 16px; z-index: 3; padding: 6px 12px; border-radius: 999px; background: rgba(42, 42, 42, .8); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; }
.mvx-gal__zoom { position: absolute; left: 16px; bottom: 16px; z-index: 3; padding: 6px 12px; border: 0; border-radius: 999px; background: #fff; color: var(--mvx-ink); font: 600 13px var(--mvx-font); cursor: pointer; }
.mvx-gal__mockhead { margin-top: 18px; font-size: 16px; font-weight: 800; color: var(--mvx-ink); }
.mvx-detail .zbozi_mockups { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.mvx-detail .zbozi_mockups .mockup { display: block; max-width: 100%; border-radius: var(--mvx-radius); overflow: hidden; background: var(--mvx-surface); }
.mvx-detail .zbozi_mockups canvas, .mvx-detail .zbozi_mockups img { max-width: 100%; height: auto; }

/* ---------- pravy sloupec ---------- */
.mvx-detail .detail_right { align-self: start; grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
.mvx-buy__head { display: flex; flex-direction: column; gap: 8px; }
.mvx-buy__meta { font-size: 13px; font-weight: 600; color: var(--mvx-muted); }
.mvx-detail div#detail_zbozi h1, .mvx-buy__head h1 { margin: 0; padding: 0; border: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--mvx-ink); text-align: left; }
.mvx-buy__head p.kratky_popis { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mvx-muted); }

/* materialy */
.mvx-mat { display: flex; flex-direction: column; gap: 10px; }
.mvx-mat__head { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.mvx-mat__katalog { font-size: 13px; font-weight: 600; color: var(--mvx-pink); text-decoration: none; }
.mvx-mat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mvx-mat__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mvx-mat__btn { padding: 12px 14px; border: 1.5px solid var(--mvx-line); border-radius: var(--mvx-radius); background: #fff; color: var(--mvx-ink); font: 600 14px/1.3 var(--mvx-font); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.mvx-mat__btn:hover { border-color: var(--mvx-line-2); }
.mvx-mat__btn.is-on { border-color: var(--mvx-ink); background: #f6f3f1; }
.mvx-mat__tabs .mvx-mat__btn { padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.mvx-mat__tabs .mvx-mat__btn.is-on { background: var(--mvx-ink); color: #fff; }
.mvx-mat__grid .mvx-mat__btn.is-extra { display: none; }
.mvx-mat__grid.is-open .mvx-mat__btn.is-extra { display: block; }
.mvx-mat__more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--mvx-muted); font: 500 13px var(--mvx-font); cursor: pointer; }
.mvx-mat__more:hover { color: var(--mvx-ink); }
.mvx-varianty-skryte { display: none !important; }

/* cenovy box */
.mvx-pbox { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--mvx-line); border-radius: var(--mvx-radius-l); background: #fff; }
.mvx-pbox__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mvx-pbox__cena { font-size: var(--tpl-detail-price-size, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--mvx-ink); }
.mvx-pbox__cap { margin-top: 4px; font-size: 13px; color: var(--mvx-muted); }
.mvx-pbox__stav { font-size: 13px; font-weight: 600; color: var(--mvx-green); text-align: right; }
.mvx-pbox__stav:before { content: "●"; margin-right: 6px; font-size: 10px; vertical-align: 1px; }
.mvx-pbox__stav.dostupnost-stav-warning { color: var(--tpl-stav-chyba, #c0392b); }
.mvx-pbox form.form_polozka { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mvx-pbox .tlacitka-pocet { display: grid; grid-template-columns: 44px 84px 44px 1fr; align-items: stretch; position: relative; margin: 0; padding: 0; }
.mvx-pbox .tlacitka-pocet:before { content: ""; grid-area: 1 / 1 / 2 / 4; border: 1.5px solid var(--mvx-line); border-radius: var(--mvx-radius); pointer-events: none; }
.mvx-pbox .tlacitka-pocet input.zmenit_pocet_minus { grid-area: 1 / 1; }
.mvx-pbox .tlacitka-pocet input#pocet { grid-area: 1 / 2; }
.mvx-pbox .tlacitka-pocet input.zmenit_pocet_plus { grid-area: 1 / 3; }
.mvx-pbox .tlacitka-pocet input.submit.button { grid-area: 1 / 4; margin-left: 12px !important; }
.mvx-pbox > .mvx-pbox__top { order: 1; }
.mvx-pbox > form.form_polozka { order: 2; }
.mvx-pbox > .mvx-pbox__note { order: 3; }
.mvx-pbox > .mvx-dz { order: 4; }
.mvx-pbox > .mvx-chipsq { order: 5; }
.mvx-pbox .tlacitka-pocet .jednotka { display: none; }
.mvx-pbox .tlacitka-pocet input.zmenit_pocet { flex: none; width: 44px; height: 52px; margin: 0; padding: 0; border: 0; background: none !important; color: var(--mvx-ink); font: 700 18px var(--mvx-font); cursor: pointer; box-shadow: none; }
.mvx-pbox .tlacitka-pocet input.zmenit_pocet:hover { background: var(--mvx-surface); }
.mvx-pbox .tlacitka-pocet input#pocet { width: 100% !important; box-sizing: border-box; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; font: 700 16px var(--mvx-font); color: var(--mvx-ink); -moz-appearance: textfield; }
.mvx-pbox .tlacitka-pocet input#pocet::-webkit-outer-spin-button, .mvx-pbox .tlacitka-pocet input#pocet::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mvx-pbox .tlacitka-pocet input.submit.button { height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--mvx-radius); background: var(--mvx-pink); color: #fff; font: 700 16px var(--mvx-font); cursor: pointer; transition: background .15s; }
.mvx-pbox .tlacitka-pocet input.submit.button:hover { background: var(--mvx-pink-dark); }
.mvx-pbox form.form_polozka table.zbozi_tabulka, .mvx-pbox #prepocet, .mvx-detail table.zbozi_tabulka.mnozstevnislevy, .mvx-pbox form .nasobek_hodnoty { display: none !important; }
.mvx-pbox .mvx-dz { margin: 0; gap: 4px; }
.mvx-pbox .mvx-dz__text { font-size: 13px; }
.mvx-pbox__note { font-size: 13px; color: var(--mvx-muted); }
.mvx-pbox__note:empty { display: none; }
.mvx-chipsq { display: flex; flex-wrap: wrap; gap: 8px; }
.mvx-chipq { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--mvx-surface); color: var(--mvx-muted); font: 600 12px var(--mvx-font); cursor: pointer; }
.mvx-chipq.is-on { background: var(--mvx-ink); color: #fff; }


/* info trojice */
.mvx-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mvx-info__i { font-size: 13px; line-height: 1.4; color: var(--mvx-muted); }
.mvx-info__i b { display: block; color: var(--mvx-ink); font-weight: 700; }

/* ---------- zalozky ---------- */
div#tabs.ui-tabs { margin: 40px 0 0; padding: 0; border: 0; background: none; }
div#tabs > ul.ui-tabs-nav { display: flex; gap: 28px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--mvx-line); border-radius: 0; background: none; }
div#tabs > ul.ui-tabs-nav li { float: none; margin: 0; padding: 0; border: 0; background: none; list-style: none; }
div#tabs > ul.ui-tabs-nav li a { display: block; padding: 13px 0; font-size: 14px; font-weight: 600; color: var(--mvx-muted); text-decoration: none; }
div#tabs > ul.ui-tabs-nav li.ui-tabs-active a, div#tabs > ul.ui-tabs-nav li a:hover { color: var(--mvx-pink); box-shadow: inset 0 -2px var(--mvx-pink); }
div#tabs > div.ui-tabs-panel { margin: 0 !important; padding: 24px 0 0; border: 0; background: none; font-size: 15px; line-height: 1.6; color: var(--mvx-ink); max-width: 860px; }

/* souvisejici zbozi ("Hodi se k tomu") */
.mvx-detail .tpl-detail-souvisejici h2, .mvx-detail .tpl-detail-souvisejici h3 { margin: 32px 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--mvx-ink); }
.mvx-detail .tpl-detail-souvisejici div.polozky { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.mvx-detail .tpl-detail-souvisejici div.polozky > .cb, .mvx-detail .tpl-detail-souvisejici div.polozky > .cl { display: none; }

/* "Potrebujete poradit?" (misto chatbotu) */
.mvx-poradit { position: fixed; right: 22px; bottom: calc(22px + var(--mvx-cookie-h, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--mvx-ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.mvx-poradit:hover { color: #fff; background: #000; text-decoration: none; }
.mvx-poradit__dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd137; }
.mvx-poradit__m { display: none; }

@media (max-width: 1100px) {
    .mvx-detail div#detail_zbozi > .detail_flex { gap: 28px; }
    .mvx-detail .tpl-detail-souvisejici div.polozky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* tablet zustava ve 2 sloupcich (galerie | nakupni panel); pod 860 px je galerie nad panelem */
@media (max-width: 860px) {
    .mvx-detail div#detail_zbozi > .detail_flex { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mvx-detail .detail_right { grid-column: 1; grid-row: 2; }
}
@media (max-width: 768px) {
    .mvx-detail .tpl-detail-hlavni { padding-top: 0; margin: 0 calc(var(--mvx-gutter) * -1); }
    .mvx-detail .zbozi_prilohy_jpg_2 { border-radius: 0; }
    .mvx-gal__arr { width: 40px; height: 40px; margin-top: -20px; }
    .mvx-detail .zbozi_prilohy_nahledy { padding: 0 16px; gap: 6px; }
    .mvx-detail .detail_right { padding: 0 16px; gap: 18px; }
    .mvx-detail div#detail_zbozi h1, .mvx-buy__head h1 { font-size: 22px; }
    .mvx-buy__head p.kratky_popis { font-size: 14px; }
    .mvx-mat__grid { grid-template-columns: 1fr; gap: 6px; }
    .mvx-mat__btn { padding: 10px 12px; border-radius: var(--mvx-radius-s); font-size: 13px; }
    .mvx-pbox { padding: 0; border: 0; gap: 12px; }
    .mvx-pbox__cena { font-size: 28px; }
    .mvx-info { grid-template-columns: 1fr; gap: 8px; }
    /* sticky spodni lista: stepper + CTA (skutecna tlacitka formulare), nad cookie listou */
    .mvx-pbox .mvx-pbox__buy { position: fixed; left: 0; right: 0; bottom: var(--mvx-cookie-h, 0px); z-index: 50; padding: 10px 16px 16px; border-top: 1px solid var(--mvx-line); background: #fff; }
    /* jadrove mobilni pravidlo dela z .tlacitka-pocet flex-wrap -> stepper a CTA by se zalomily pod sebe */
    #detail_zbozi div.detail_right div.tlacitka-pocet { display: grid; flex-wrap: nowrap; grid-template-columns: 38px 60px 38px minmax(0, 1fr); }
    #detail_zbozi div.detail_right div.tlacitka-pocet input.submit.button { width: auto !important; min-width: 0; flex: none; }
    .mvx-pbox .tlacitka-pocet:before { border-radius: var(--mvx-radius-s); }
    .mvx-pbox .tlacitka-pocet input.zmenit_pocet { height: 46px; }
    .mvx-pbox .tlacitka-pocet input#pocet { height: 46px; font-size: 14px; }
    .mvx-pbox .tlacitka-pocet input.submit.button { height: 46px; border-radius: var(--mvx-radius-s); font-size: 14px; }
    .mvx-detail { padding-bottom: 96px; }
    div#tabs { margin-top: 24px; padding: 0; }
    div#tabs > ul.ui-tabs-nav { gap: 18px; overflow-x: auto; }
    div#tabs > ul.ui-tabs-nav li a { font-size: 13px; white-space: nowrap; }
    div#tabs > div.ui-tabs-panel { font-size: 14px; }
    .mvx-detail .tpl-detail-souvisejici div.polozky { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    .mvx-poradit { right: 14px; bottom: calc(124px + var(--mvx-cookie-h, 0px)); width: 48px; height: 48px; padding: 0; justify-content: center; }
    .mvx-poradit__dot, .mvx-poradit__t { display: none; }
    .mvx-poradit__m { display: block; font-size: 16px; }
}