/* Scope je body.type-detail, ne trida pridavana skriptem: type-detail
dava Shoptet na body uz ze serveru v HTML, takze cele CSS plati od
prvniho vykresleni. Drive to viselo na tride ho-det z detail-extra.js
a stranka do te doby (~150 ms) problikavala v sablone. */
/* detail-extra.css — hodiny-online.cz, detail produktu
Patří do user/documents/assets/rkUpravy/, načítá se jako poslední
z vlastních CSS. Po každé změně zvednout ?v= v administraci. */
body.type-detail {
--ho-det-ink: #1a1a1a; /* stejná jako --rd-ink v redesign-extra.css */
--ho-det-sed: #6f6f6f;
--ho-det-text: #4d4d4d; /* barva běžného textu webu, "světle černá" */
--ho-det-ramecek: #e2e2e2;
--ho-det-zlata: var(--color-primary, #B5A264);
--ho-det-cervena: #c42e36; /* stejná jako sleva u ceny (.price-save */
--ho-det-pole: #f6f4f1; /* výplň počítadla kusů, z předlohy */
/* Hranaté rohy jako zbytek webu (menu, lišta záložek, pás důvěry). */
--ho-det-r: 0;
--ho-det-r-vel: 0;
--ho-det-vyska: 64px; /* počítadlo i CTA, z předlohy */
--ho-det-mezera: 18px;
--ho-det-foto: 440px; /* strop výšky fotky, aby se pod ni vešla galerie */
/* Předloha má CTA v akcentu a cenu tmavou. */
--ho-det-cta: var(--ho-det-zlata);
--ho-det-cena: var(--ho-det-ink);
/* Lišta záložek kopíruje horní menu (.navigation-in). */
--ho-det-lista-v: 48px; /* 8. 10. 2026 sníženo z 54 na 48 px */
--ho-det-lista-font: 16px;
--ho-det-lista-rez: 600;
}
/* 1. Pravý sloupec — pořadí bloků podle předlohy */
/* Pořadí platí i na mobilu. */
body.type-detail .p-info-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Výchozí pořadí pro bloky, které se objeví jen u některých produktů */
body.type-detail .p-info-wrapper > * { order: 105; }
body.type-detail .p-info-wrapper > .ho-det-znacka { order: 10; }
body.type-detail .p-info-wrapper > .p-detail-inner-header { order: 20; }
body.type-detail .p-info-wrapper > .p-final-price-wrapper { order: 30; }
body.type-detail .p-info-wrapper > .quantity-discounts { order: 35; }
body.type-detail .p-info-wrapper > .ho-det-media { order: 40; }
body.type-detail .p-info-wrapper > .ho-det-prehravac { order: 50; }
body.type-detail .p-info-wrapper > .add-to-cart { order: 70; }
body.type-detail .p-info-wrapper > .availability-value { order: 80; }
body.type-detail .p-info-wrapper > .detail-parameters { order: 90; }
body.type-detail .p-info-wrapper > .social-buttons-wrapper { order: 100; }
/* Pas vyhod sedi v HTML v pravem sloupci a JS ho stehuje pod sloupce.
Dokud tam neni, je skryty - jinak na okamzik probliknul vedle fotky.
Po presunu uz neni potomkem .p-info-wrapper, takze se sam odkryje. */
body.type-detail .p-info-wrapper > .benefitBanner { display: none; }
/* Nadpis má stejný řez nahoře i dole (na mobilu zůstává nad fotkou). */
body.type-detail .p-detail-inner-header { margin: 0 0 var(--ho-det-mezera); }
body.type-detail .p-detail-inner-header h1 {
margin: 0 0 6px !important;
font-family: var(--template-headings-font, "Exo 2"), sans-serif !important;
font-size: clamp(22px, 2vw, 32px) !important;
font-weight: 700 !important;
line-height: 1.18 !important;
color: var(--ho-det-ink) !important;
}
@media (max-width: 991px) {
/* Pod fotkou chybí odsazení, cena se lepila na pás náhledů. */
body.type-detail .p-info-wrapper { margin-top: 24px; }
}
body.type-detail .ho-det-znacka {
margin: 0 0 10px;
font-size: 15px;
}
body.type-detail .ho-det-znacka a {
color: var(--ho-det-ink);
text-decoration: underline;
}
body.type-detail .ho-det-znacka a:hover { color: var(--ho-det-zlata); }
/* Kód i jeho popisek šablona skrývá, předloha je má pod nadpisem. */
body.type-detail .p-detail-inner-header .p-code {
display: block !important;
font-size: 14px;
color: var(--ho-det-sed);
}
body.type-detail .p-detail-inner-header .p-code .p-code-label { display: inline !important; }
/* Odkaz na záložku s popisem předloha nemá — záložky jsou hned pod tím. */
body.type-detail .p-info-wrapper > .p-short-description,
body.type-detail .p-info-wrapper > p:has(> a[href="#description"]) {
display: none;
}
/* 2. Cena */
body.type-detail .p-final-price-wrapper {
margin: 0 0 var(--ho-det-mezera);
line-height: 1.25;
}
/* Přeškrtnutou i cenu bez DPH má šablona zlatě, vedle velké ceny je to moc. */
body.type-detail .p-final-price-wrapper .price-standard,
body.type-detail .p-final-price-wrapper .price-standard span {
font-size: 15px;
color: var(--ho-det-sed) !important;
}
body.type-detail .p-final-price-wrapper .price-save {
margin-left: 6px;
font-size: 15px;
font-weight: 600;
}
body.type-detail .p-final-price-wrapper .price-final {
display: block;
margin: 2px 0;
font-family: var(--template-headings-font, "Exo 2"), sans-serif;
font-size: clamp(28px, 2.4vw, 36px);
font-weight: 700;
line-height: 1.1;
color: var(--ho-det-cena) !important;
}
body.type-detail .p-final-price-wrapper .price-final .price-final-holder { color: inherit; }
body.type-detail .p-final-price-wrapper .price-additional {
display: block;
font-size: 15px;
color: var(--ho-det-sed) !important;
}
/* 3. Tlačítka Zvuk hodin / Video hodin */
/* Předloha je má vedle sebe a jen na část šířky sloupce, ne přes celou. */
body.type-detail .ho-det-media {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 var(--ho-det-mezera);
}
body.type-detail .ho-det-media__btn {
flex: none;
display: flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 24px 8px 14px;
background: #fff;
border: 1px solid var(--ho-det-ramecek);
border-radius: var(--ho-det-r);
font-family: var(--template-font, "Source Sans 3"), sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--ho-det-ink);
text-align: left;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
body.type-detail .ho-det-media__btn:hover,
body.type-detail .ho-det-media__btn:focus-visible {
border-color: var(--ho-det-zlata);
box-shadow: 0 0 0 1px var(--ho-det-zlata) inset;
}
body.type-detail .ho-det-media__btn[aria-expanded="true"] { border-color: var(--ho-det-zlata); }
/* Kroužek u videa je součástí jeho SVG — zvuk ho podle předlohy nemá. */
body.type-detail .ho-det-media__ikona {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--ho-det-zlata);
}
body.type-detail .ho-det-media__ikona svg { display: block; }
/* 4. Přehrávač zvuku */
body.type-detail .ho-det-prehravac {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 var(--ho-det-mezera);
padding: 10px 14px;
background: #fff;
border: 1px solid var(--ho-det-zlata);
border-radius: var(--ho-det-r);
}
body.type-detail .ho-det-prehravac[hidden] { display: none; }
body.type-detail .ho-det-prehravac__play {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: none;
border: 0;
color: var(--ho-det-ink);
cursor: pointer;
}
body.type-detail .ho-det-prehravac__cas {
flex: none;
min-width: 80px;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--ho-det-sed);
}
body.type-detail .ho-det-prehravac__draha {
position: relative;
flex: 1 1 auto;
height: 8px;
background: #e8e8e8;
border-radius: 4px;
cursor: pointer;
}
body.type-detail .ho-det-prehravac__vypln {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--ho-det-zlata);
border-radius: 4px;
pointer-events: none;
}
body.type-detail .ho-det-prehravac__hlasitost {
flex: none;
width: 80px;
accent-color: var(--ho-det-zlata);
cursor: pointer;
}
@media (max-width: 767px) {
body.type-detail .ho-det-prehravac__hlasitost { display: none; }
body.type-detail .ho-det-media { gap: 8px; }
body.type-detail .ho-det-media__btn { padding-right: 16px; }
}
/* 5. Množství + do košíku */
body.type-detail .add-to-cart {
display: flex;
align-items: stretch;
gap: 12px;
margin: 0 0 var(--ho-det-mezera);
}
/* Předloha: plná světlá výplň, žádný rámeček, stejná výška jako CTA. */
/* Šablona nechává vpravo 30 px paddingu pro svoje absolutně umístěné */
body.type-detail .add-to-cart .quantity {
position: relative;
flex: none;
width: auto;
padding: 0;
display: flex;
align-items: stretch;
background: var(--ho-det-pole);
border: 1px solid color-mix(in srgb, var(--ho-det-ink) 18%, #fff);
border-radius: var(--ho-det-r-vel);
overflow: hidden;
}
body.type-detail .add-to-cart .quantity label { order: 2; margin: 0; }
body.type-detail .add-to-cart .quantity .decrease { order: 1; }
body.type-detail .add-to-cart .quantity .increase { order: 3; }
body.type-detail .add-to-cart .quantity .increase,
body.type-detail .add-to-cart .quantity .decrease {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: auto;
min-height: var(--ho-det-vyska);
padding: 0;
background: transparent;
border: 0;
color: var(--ho-det-ink);
cursor: pointer;
}
body.type-detail .add-to-cart .quantity .increase:hover,
body.type-detail .add-to-cart .quantity .decrease:hover { background: rgba(0, 0, 0, .05); }
/* Šablona má v tlačítkách šipky ikonfontem a znaménka schovaná — prohodit. */
body.type-detail .add-to-cart .quantity .increase::before,
body.type-detail .add-to-cart .quantity .decrease::before { content: none; }
body.type-detail .add-to-cart .quantity .increase__sign,
body.type-detail .add-to-cart .quantity .decrease__sign {
display: block;
font-size: 28px;
font-weight: 500;
line-height: 1;
}
body.type-detail .add-to-cart .quantity input.amount {
width: 62px;
min-height: var(--ho-det-vyska);
padding: 0;
background: transparent;
border: 0;
font-size: 18px;
font-weight: 700;
color: var(--ho-det-ink) !important; /* šablona barví inputy zlatě */
text-align: center;
}
body.type-detail .add-to-cart .add-to-cart-button {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--ho-det-vyska);
padding: 8px 20px;
background: var(--ho-det-cta);
border: 0;
border-radius: var(--ho-det-r-vel);
font-size: 16px;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: #fff;
/* Šablona má na tlačítku `transition: all .3s`, takže se po načtení */
transition: filter .15s;
}
body.type-detail .add-to-cart .add-to-cart-button:hover { filter: brightness(.94); }
/* Na mobilu šablona počítadlo s CTA zalamuje pod sebe a zabírá tím dvě */
@media (max-width: 767px) {
body.type-detail { --ho-det-vyska: 56px; }
body.type-detail .add-to-cart {
flex-wrap: nowrap;
gap: 10px;
}
body.type-detail .add-to-cart .quantity .increase,
body.type-detail .add-to-cart .quantity .decrease { width: 42px; }
body.type-detail .add-to-cart .quantity input.amount {
width: 44px;
font-size: 16px;
}
body.type-detail .add-to-cart .add-to-cart-button {
width: auto;
min-width: 0;
padding: 8px 10px;
gap: 8px;
font-size: 14px;
letter-spacing: .2px;
}
body.type-detail .add-to-cart .add-to-cart-button::before { width: 19px; height: 19px; }
}
/* Šablona si před text dává šipku ikonfontem, předloha má tašku. */
body.type-detail .add-to-cart .add-to-cart-button::before {
content: "";
width: 22px;
height: 22px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* 5b. Množstevní sleva — rozbalovací box */
body.type-detail .quantity-discounts {
margin: 0 0 var(--ho-det-mezera);
background: #fff;
border: 1px solid var(--ho-det-ramecek);
border-radius: var(--ho-det-r);
overflow: hidden;
}
/* Původní nadpis nahradil popisek v hlavičce boxu. */
body.type-detail .ho-det-sleva .quantity-discounts__headline { display: none; }
body.type-detail .ho-det-sleva__hlava {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 10px 14px;
background: none;
border: 0;
font-family: var(--template-font, "Source Sans 3"), sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--ho-det-ink);
text-align: left;
cursor: pointer;
}
body.type-detail .ho-det-sleva__hlava:hover { background: var(--ho-det-pole); }
body.type-detail .ho-det-sleva__ikona {
flex: none;
width: 20px;
height: 20px;
background: var(--ho-det-zlata);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,');
}
/* min-width: 0 — bez něj si dlouhý popisek vynutí šířku a rozbije sloupec. */
body.type-detail .ho-det-sleva__nazev {
flex: 1 1 auto;
min-width: 0;
}
/* Odznak má stejnou červenou i velikost jako sleva u ceny. */
body.type-detail .ho-det-sleva__stav {
flex: none;
padding: 3px 10px;
background: none;
border-radius: var(--ho-det-r);
font-size: 15px;
font-weight: 600;
color: var(--ho-det-cervena);
white-space: nowrap;
}
/* dosažená sleva — ztmavne */
body.type-detail .ho-det-sleva.je-aktivni .ho-det-sleva__stav {
color: color-mix(in srgb, var(--ho-det-cervena) 75%, #000);
}
body.type-detail .ho-det-sleva__sipka {
flex: none;
width: 16px;
height: 16px;
background: var(--ho-det-sed);
transition: transform .2s;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,');
}
body.type-detail .ho-det-sleva__hlava[aria-expanded="true"] .ho-det-sleva__sipka { transform: rotate(180deg); }
body.type-detail .ho-det-sleva__telo { border-top: 1px solid var(--ho-det-ramecek); }
body.type-detail .ho-det-sleva__telo[hidden] { display: none; }
body.type-detail .quantity-discounts__table {
display: flex;
flex-direction: column;
width: 100%;
max-width: none; /* šablona ji drží na 450 px */
border: 0;
border-radius: 0;
overflow: hidden;
}
body.type-detail .quantity-discounts__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 10px 14px;
background: #fff;
border: 0;
border-top: 1px solid var(--ho-det-ramecek);
border-radius: 0;
font-size: 15px;
}
body.type-detail .quantity-discounts__item:first-child { border-top: 0; }
/* Platný stupeň má v šabloně zelený outline — nahrazen zlatým proužkem. */
body.type-detail .quantity-discounts__item--highlighted {
outline: 0;
background: color-mix(in srgb, var(--ho-det-zlata) 12%, #fff);
box-shadow: inset 3px 0 0 var(--ho-det-zlata);
}
body.type-detail .quantity-discounts__item--highlighted .quantity-discounts__title { color: var(--ho-det-ink) !important; }
body.type-detail .quantity-discounts__title {
font-weight: 400;
color: var(--ho-det-text) !important;
}
body.type-detail .quantity-discounts__price-wrapper,
body.type-detail .quantity-discounts__price-wrapper * {
font-weight: 700;
color: var(--ho-det-ink) !important;
white-space: nowrap;
}
body.type-detail .quantity-discounts__save {
margin: 0;
max-width: none; /* šablona ho drží na 450 px jako tabulku */
padding: 10px 14px;
border-top: 1px solid var(--ho-det-ramecek);
background: var(--ho-det-pole);
font-size: 14px;
color: var(--ho-det-sed);
text-align: left;
}
body.type-detail .quantity-discounts__save strong { color: var(--ho-det-ink); }
/* Na mobilu se popis stupně a cena na jeden řádek nevejdou. */
@media (max-width: 767px) {
body.type-detail .ho-det-sleva__hlava {
gap: 8px;
padding: 10px 12px;
font-size: 14px;
}
body.type-detail .ho-det-sleva__stav { padding: 3px 8px; font-size: 12px; }
/* Stupeň a cena se na 390 px vejdou na jeden řádek; wrap je jen pojistka */
body.type-detail .quantity-discounts__item {
flex-wrap: wrap;
gap: 2px 10px;
padding: 10px 12px;
font-size: 14px;
}
body.type-detail .quantity-discounts__title { flex: 1 1 auto; min-width: 0; }
body.type-detail .quantity-discounts__price-wrapper { flex: none; }
}
/* 6. Dostupnost + doprava — jeden panel */
body.type-detail .p-info-wrapper > .availability-value {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
margin: 0;
padding: 12px 16px;
background: #f6f6f6;
background: color-mix(in srgb, var(--ho-det-dostupnost, #009901) 9%, #fff);
border: 1px solid var(--ho-det-ramecek);
border-color: color-mix(in srgb, var(--ho-det-dostupnost, #009901) 22%, #fff);
border-radius: var(--ho-det-r) var(--ho-det-r) 0 0;
font-size: 15px;
}
body.type-detail .p-info-wrapper > .availability-value::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: var(--ho-det-dostupnost, #009901);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
body.type-detail .availability-value .availability-label { font-weight: 600; }
body.type-detail .availability-value .availability-amount { color: var(--ho-det-sed); }
/* Produkty "Na dotaz": text dostupnosti je ve style.css schovaný a místo něj */
body.type-detail.na-dotaz .availability-value .availability-label,
body.type-detail.na-dotaz .availability-value .availability-label span {
width: auto !important;
max-width: none !important;
height: auto !important;
}
body.type-detail.na-dotaz .p-info-wrapper > .availability-value::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* Čárkované podtržení od tooltipů v panelu ruší klid, text zůstává s title. */
body.type-detail .availability-value .acronym,
body.type-detail .delivery-time .acronym {
border-bottom: 0 !important;
text-decoration: none !important;
}
body.type-detail .p-info-wrapper > table.detail-parameters,
body.type-detail .p-info-wrapper > table.detail-parameters > tbody,
body.type-detail .p-info-wrapper > table.detail-parameters > tbody > tr {
display: block;
width: 100%;
margin: 0;
}
body.type-detail .p-info-wrapper > table.detail-parameters {
margin-bottom: var(--ho-det-mezera);
border: 1px solid var(--ho-det-ramecek);
border-top: 0;
border-radius: 0 0 var(--ho-det-r) var(--ho-det-r);
}
body.type-detail .p-info-wrapper > table.detail-parameters th {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
font-size: 15px;
font-weight: 400;
text-align: left;
}
body.type-detail .p-info-wrapper > table.detail-parameters th::before {
content: "";
flex: none;
width: 22px;
height: 22px;
background: var(--ho-det-ink);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* Datum zůstává na řádku s popiskem, tmavé; popisek je světlejší. */
body.type-detail .p-info-wrapper > table.detail-parameters th > * { white-space: nowrap; }
body.type-detail .delivery-time-label {
align-self: center;
margin: 0;
padding: 0;
font-weight: 400;
line-height: 1.3;
color: var(--ho-det-text) !important; /* šablona ho má zlatě */
}
/* Šablona má pod datem 12px paddingu, takže text sedí nad středem řádku. */
body.type-detail .delivery-time {
align-self: center;
margin: 0;
padding: 0;
line-height: 1.3;
}
body.type-detail .delivery-time,
body.type-detail .delivery-time .acronym {
display: inline;
font-weight: 700;
vertical-align: baseline;
color: var(--ho-det-ink) !important;
}
body.type-detail a.shipping-options {
display: inline-flex !important;
align-items: center;
gap: 4px;
margin-left: auto;
padding-left: 12px;
font-size: 15px;
color: var(--ho-det-ink);
text-decoration: underline;
white-space: nowrap;
}
/* Bez termínu dodání (zboží na dotaz) zbyde v řádku jen ikona auta */
body.type-detail .p-info-wrapper > table.detail-parameters th:not(:has(.delivery-time)) a.shipping-options {
margin-left: 0;
padding-left: 0;
}
body.type-detail a.shipping-options:hover { color: var(--ho-det-zlata); }
/* Na mobilu odkaz spadne pod termín (s nowrap přetékal ven). */
@media (max-width: 767px) {
body.type-detail .p-info-wrapper > table.detail-parameters th { flex-wrap: wrap; }
body.type-detail a.shipping-options {
width: 100%;
margin-left: 0;
padding-left: 32px; /* zarovnání pod text, ne pod ikonu */
white-space: normal;
}
}
body.type-detail a.shipping-options::after {
content: "";
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* 7. Řádek ikon — Oblíbené / Hlídací pes / Zeptat se / Tisk / Sdílet */
body.type-detail .social-buttons-wrapper { margin: 0 0 var(--ho-det-mezera); }
body.type-detail .social-buttons-wrapper .link-icons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 0;
padding: 4px 0;
}
/* Barvu odkazů drží šablona přes #content, proto !important. */
body.type-detail .link-icons > * {
display: flex !important;
align-items: center;
gap: 8px;
margin: 0;
padding: 2px 16px;
font-size: 15px;
line-height: 1.2;
color: var(--ho-det-ink) !important;
cursor: pointer;
}
body.type-detail .link-icons > *:first-child { padding-left: 0; }
body.type-detail .link-icons > * + * { border-left: 1px solid var(--ho-det-ramecek); }
body.type-detail .link-icons > *:hover { color: var(--ho-det-zlata) !important; }
/* Předloha má tenké tmavé obrysové ikony, šablona zlaté z ikonfontu — */
body.type-detail .link-icons .link-icon span { display: inline; }
body.type-detail .link-icons .link-icon::before,
body.type-detail .link-icons .ho-det-oblibene::before {
content: "";
flex: none;
width: 23px;
height: 23px;
margin: 0;
background: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.type-detail .link-icons .ho-det-oblibene::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .link-icons .link-icon.watchdog::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .link-icons .link-icon.chat::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .link-icons .link-icon.print::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .link-icons .link-icon.share::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* Původní Oblíbené od dkLab si doplněk vrací zpět — skrývají se. */
body.type-detail .p-info-wrapper .detail-parameters #dkLabFavouriteDiv { display: none !important; }
body.type-detail .link-icons .ho-det-oblibene {
color: var(--ho-det-ink);
text-decoration: none;
}
/* uložené: plné zlaté srdce i text. !important kvůli `.link-icons > *` výš */
body.type-detail .link-icons .ho-det-oblibene.je-v-oblibenych {
color: var(--ho-det-zlata) !important;
}
body.type-detail .link-icons .ho-det-oblibene.je-v-oblibenych::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* 8. Štítky u fotky */
body.type-detail .ho-det-stitky {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: max-content;
max-width: calc(100% - 28px);
pointer-events: none;
}
/* Šířka musí být max-content, jinak se box spočítá bez ikony a text */
body.type-detail .ho-det-stitky .ho-det-stitek {
position: static;
display: inline-flex !important;
flex: none;
align-items: center;
gap: 8px;
width: max-content !important;
max-width: 100%;
height: auto !important;
min-width: 0;
margin: 0;
padding: 7px 14px;
background: color-mix(in srgb, var(--ho-stitek, #B5A264) 14%, #fff) !important;
border-radius: var(--ho-det-r) !important;
color: color-mix(in srgb, var(--ho-stitek, #B5A264) 78%, #000) !important;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: left;
text-indent: 0;
white-space: nowrap;
box-shadow: none;
}
body.type-detail .ho-det-stitky .ho-det-stitek::before,
body.type-detail .ho-det-stitky .ho-det-stitek::after { content: none; }
body.type-detail .ho-det-stitky .ho-det-stitek[data-ikona]::before {
content: "";
flex: none;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.type-detail .ho-det-stitek[data-ikona="doprava"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .ho-det-stitek[data-ikona="sleva"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .ho-det-stitek[data-ikona="darek"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* Zvuk a Video mají podle předlohy plnou ikonu, ne obrysovou. */
body.type-detail .ho-det-stitek[data-ikona="zvuk"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .ho-det-stitek[data-ikona="video"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* Prázdné původní schránky po přestěhovaných štítcích a značce. */
body.type-detail .p-image .flags-extra { display: none !important; }
body.type-detail .p-detail-info { display: none !important; }
/* Na úzkém displeji zabíraly pilulky půlku fotky. */
@media (max-width: 767px) {
body.type-detail .ho-det-stitky {
top: 8px;
left: 8px;
gap: 5px;
max-width: calc(100% - 16px);
}
body.type-detail .ho-det-stitky .ho-det-stitek {
gap: 6px;
padding: 5px 10px;
font-size: 12px;
}
body.type-detail .ho-det-stitky .ho-det-stitek[data-ikona]::before {
width: 14px;
height: 14px;
}
}
/* 8b. Doplňkové parametry v záložce s popisem */
body.type-detail .extended-description {
padding: 22px 24px 24px;
background: #fff;
border: 1px solid var(--ho-det-ramecek);
border-radius: var(--ho-det-r);
}
/* Nadpis i tabulka jsou ve velikosti původní šablonové tabulky */
body.type-detail .extended-description h3 {
margin: 0 0 14px;
font-family: var(--template-headings-font, "Exo 2"), sans-serif;
font-size: 18px;
font-weight: 400;
color: var(--ho-det-zlata);
}
body.type-detail .extended-description table.detail-parameters {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
body.type-detail .extended-description .detail-parameters tr:nth-child(odd) { background: #f7f7f7; }
/* 3px svisle + řádkování 1.3 ze 14px = 24 px, jako původní tabulka. */
body.type-detail .extended-description .detail-parameters th,
body.type-detail .extended-description .detail-parameters td {
padding: 3px 14px;
font-size: 14px;
line-height: 1.3;
text-align: left;
vertical-align: middle;
border: 0;
}
body.type-detail .extended-description .detail-parameters th {
width: 42%;
font-weight: 400;
color: var(--ho-det-zlata);
}
/* Hodnoty netučně, šedá jako popis. EAN má vlastní zlatou, proto i potomci. */
body.type-detail .extended-description .detail-parameters td,
body.type-detail .extended-description .detail-parameters td * {
font-weight: 400;
color: var(--ho-det-text) !important;
text-decoration: none;
}
body.type-detail .extended-description .detail-parameters td a:hover { text-decoration: underline; }
/* 9. Pás důvěry a lišta záložek */
/* Šablona dává řádku s fotkou a pravým sloupcem margin-bottom: 38 px. */
body.type-detail .p-detail .row.product-top { margin-bottom: 0; }
/* Mezi fotkou a pásem náhledů bylo taky 38 px ze šablony, takže levý */
body.type-detail .p-image { margin-bottom: 10px; }
/* Nad pasem ma byt 35 px od radku ikon. Ten si drzi vlastni odstup
(--ho-det-mezera), takze se odecte - jinak by se mezery secetly. */
body.type-detail .p-detail > .benefitBanner.ho-det-pas {
width: 100%;
margin: calc(35px - var(--ho-det-mezera)) 0 28px;
padding: 18px 10px;
background: var(--ho-det-pole);
border-radius: 0;
flex-wrap: nowrap;
}
/* Položky mají od šablony margin-bottom: 15 px. */
body.type-detail .p-detail > .benefitBanner.ho-det-pas .benefitBanner__item {
flex: 1 1 0;
margin-bottom: 0;
}
/* Ikony pásu jsou PNG s bílým pozadím, pás je béžový - čtverce tím svítily. */
body.type-detail .benefitBanner .benefitBanner__img { mix-blend-mode: multiply; }
/* Loga mají různý poměr stran — pevná výška je srovná. */
body.type-detail .benefitBanner .benefitBanner__img {
width: auto;
height: 44px;
max-width: 56px;
object-fit: contain;
}
@media (max-width: 991px) {
body.type-detail .p-detail > .benefitBanner.ho-det-pas { flex-wrap: wrap; }
body.type-detail .p-detail > .benefitBanner.ho-det-pas .benefitBanner__item { flex: 1 1 50%; }
}
/* Skryté jen do chvíle, než je redesign-extra.js přestěhuje na konec
stránky do obalu .ho-produkty — proto přímý potomek .p-detail. */
body.type-detail .p-detail > .products-related-header,
body.type-detail .p-detail > .products-related { display: none !important; }
body.type-detail .browse-p,
body.type-detail .browse-p .p-all { display: none !important; }
/* Padding řádku nechat — drží lištu na šířku kontejneru, stejně jako menu. */
body.type-detail .p-detail-tabs-wrapper .shp-tabs-row { margin-bottom: 26px; }
/* Hranaté rohy — horní menu je taky hranaté. */
body.type-detail .p-detail-tabs-wrapper .shp-tabs-holder {
background: var(--ho-det-zlata);
border-radius: 0;
}
body.type-detail #p-detail-tabs {
display: flex;
width: 100%;
margin: 0;
border: 0;
}
/* min-width: 0 je povinné. */
body.type-detail #p-detail-tabs > li {
display: flex !important;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
background: none;
border: 0;
}
/* Podobné a Diskuze předloha nemá; Podobné už dnes skrývá starší pravidlo. */
body.type-detail #p-detail-tabs > li:has(> a[href="#productsAlternative"]),
body.type-detail #p-detail-tabs > li:has(> a[href="#productDiscussion"]) { display: none !important; }
body.type-detail #p-detail-tabs > li > a {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--ho-det-lista-v);
padding: 8px 12px;
background: transparent;
border: 0;
border-right: 1px solid rgba(255, 255, 255, .28);
border-radius: 0;
color: #fff;
font-size: var(--ho-det-lista-font);
font-weight: var(--ho-det-lista-rez);
line-height: 1.2;
letter-spacing: normal;
text-align: center;
text-transform: uppercase;
}
body.type-detail #p-detail-tabs > li:last-child > a { border-right: 0; }
body.type-detail #p-detail-tabs > li > a:hover,
body.type-detail #p-detail-tabs > li.active > a {
background: color-mix(in srgb, var(--ho-det-zlata) 78%, #000);
color: #fff;
}
/* Hamburger od responsive-nav je zbytečný — detail-extra.js schované */
body.type-detail .p-detail-tabs-wrapper .navigation-btn,
body.type-detail .p-detail-tabs-wrapper .hidden-links { display: none !important; }
/* Shoptet na kliknutí do lišty volá scrollIntoView() PRÁVĚ na tenhle obal */
body.type-detail .p-detail-tabs-wrapper { scroll-margin-top: var(--ho-det-kotva, 16px); }
/* Na úzkém displeji se záložky zalomí do řádků. */
@media (max-width: 991px) {
body.type-detail .p-detail-tabs-wrapper .shp-tabs-row { margin-bottom: 20px; }
/* Holder si bere 20 px po stranách, o které pak přišly záložky. */
body.type-detail .p-detail-tabs-wrapper .shp-tabs-holder { padding: 0; }
body.type-detail #p-detail-tabs {
flex-wrap: wrap;
gap: 1px;
}
body.type-detail #p-detail-tabs > li { flex: 1 1 auto; }
body.type-detail #p-detail-tabs > li > a {
min-height: 46px;
padding: 8px 12px;
font-size: 14px;
border-right: 0;
}
}
/* 10. Fotka a galerie náhledů */
body.type-detail .p-image .p-main-image {
display: block;
text-align: center;
}
body.type-detail .p-image .p-main-image img {
width: auto;
max-width: 100%;
max-height: var(--ho-det-foto);
margin: 0 auto;
}
body.type-detail .p-thumbnails { margin-bottom: 0; }
body.type-detail .p-thumbnails a.p-thumbnail img {
border-color: var(--ho-det-ramecek);
transition: border-color .15s;
}
body.type-detail .p-thumbnails a.p-thumbnail:hover img { border-color: var(--ho-det-zlata); }
/* Vybraný náhled: zlatý rámeček místo proužku, který kreslí šablona. */
body.type-detail .p-thumbnails a.p-thumbnail.highlighted::before { content: none; }
body.type-detail .p-thumbnails a.p-thumbnail.highlighted img {
border-color: var(--ho-det-zlata);
box-shadow: inset 0 0 0 2px var(--ho-det-zlata);
}
body.type-detail .p-thumbnails .thumbnail-prev,
body.type-detail .p-thumbnails .thumbnail-next {
display: block;
width: 34px;
height: 34px;
margin-top: -17px;
background: #fff;
border: 1px solid var(--ho-det-ramecek);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
font-size: 0; /* glyf ikonfontu se nahrazuje maskou */
}
body.type-detail .p-thumbnails .thumbnail-prev { left: 4px; }
body.type-detail .p-thumbnails .thumbnail-next { right: 4px; }
/* Glyf šablony má line-height: 0 a vertical-align: middle, takže v kolečku */
body.type-detail .p-thumbnails .thumbnail-prev::before,
body.type-detail .p-thumbnails .thumbnail-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 15px;
margin: -7px 0 0 -7px;
background: var(--ho-det-ink);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.type-detail .p-thumbnails .thumbnail-prev::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
body.type-detail .p-thumbnails .thumbnail-next::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* Čtverec, kterým šablona zvětšuje klikací plochu, by vykoukl z kolečka. */
body.type-detail .p-thumbnails .thumbnail-prev::after,
body.type-detail .p-thumbnails .thumbnail-next::after { content: none; }
/* 11. Záložka Video */
body.type-detail .ho-det-video {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto 20px;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--ho-det-r);
overflow: hidden;
}
body.type-detail .ho-det-video video,
body.type-detail .ho-det-video iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
}
body.type-detail .ho-det-video video { cursor: pointer; }
body.type-detail .ho-det-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
padding: 0 0 0 5px;
background: rgba(0, 0, 0, .62);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background .2s, transform .2s;
}
body.type-detail .ho-det-video__play:hover {
background: var(--ho-det-zlata);
transform: translate(-50%, -50%) scale(1.08);
}
body.type-detail .ho-det-video__play[hidden] { display: none; }
/* Shoptetí vlastní videa ve stejné šířce jako naše, ne přes celý panel. */
body.type-detail #productVideos > h3 {
max-width: 900px;
margin: 10px auto;
font-family: var(--template-headings-font, "Exo 2"), sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--ho-det-ink);
}
body.type-detail #productVideos > iframe {
display: block;
width: 100%;
max-width: 900px;
height: auto;
margin: 0 auto 20px;
aspect-ratio: 16 / 9;
border-radius: var(--ho-det-r);
}
/* 12. Sekce důvěry — blok staví redesign-extra.js, tady se jen zužuje. */
body.type-detail .ho-duvera--detail {
margin: 0 0 28px;
}
/* Heureka */
/* Obsah na střed, ne u levého kraje — blok je široký a logo s čísly
se v něm jinak krčí vlevo. Na mobilu se tím vystředí první řádek
(logo + hodnocení), text zůstává pod ním přes celou šířku. */
body.type-detail .ho-duvera--detail .ho-heureka {
gap: 18px;
padding: 14px 18px;
border-radius: var(--ho-det-r);
justify-content: center;
}
body.type-detail .ho-duvera--detail .ho-heureka__odznak img {
width: 76px;
height: 76px;
}
body.type-detail .ho-duvera--detail .ho-heureka__znacka { gap: 5px; }
body.type-detail .ho-duvera--detail .ho-heureka__hvezdy { font-size: 15px; letter-spacing: 2px; }
body.type-detail .ho-duvera--detail .ho-heureka__cislo { font-size: 21px; }
body.type-detail .ho-duvera--detail .ho-heureka__text { padding-left: 18px; }
body.type-detail .ho-duvera--detail .ho-heureka__doporuceni {
margin-bottom: 8px;
padding: 7px 11px;
font-size: 13px;
}
body.type-detail .ho-duvera--detail .ho-heureka__doporuceni strong { font-size: 21px; }
body.type-detail .ho-duvera--detail .ho-heureka__odkaz { font-size: 14px; }
/* pomoc s výběrem */
body.type-detail .ho-duvera--detail .ho-pomoc__text {
padding: 14px 8px 14px 20px;
}
body.type-detail .ho-duvera--detail .ho-pomoc__nadpis { font-size: 18px; }
body.type-detail .ho-duvera--detail .ho-pomoc__popis {
margin-top: 5px;
font-size: 13px;
}
body.type-detail .ho-duvera--detail .ho-pomoc__cta {
margin-top: 10px;
padding: 6px 15px;
border-radius: var(--ho-det-r);
font-size: 13px;
}
/* fotka určovala výšku celého pruhu */
body.type-detail .ho-duvera--detail .ho-pomoc__foto {
max-height: 128px;
}
/* -------------------------------------------------------------------------
13. Související produkty — sekce jako na homepage, karta 300 px
Řadu staví a stěhuje redesign-extra.js (funkce souvisejici()), vzhled
dědí z .ho-produkty v redesign-extra.css. Tady jen to, co se liší.
------------------------------------------------------------------------- */
body.type-detail .ho-produkty--souvisejici { margin: 0 0 28px; }
/* Šablona drží řadu jako blok s plovoucími sloupci. */
body.type-detail .ho-produkty--souvisejici .products-related { display: flex !important; }
body.type-detail .ho-produkty--souvisejici .products-related-header { display: block !important; }
/* Přes limit. Specificita musí být vyšší než
`.desktop.type-detail .products-related.p-switchable .inactive`
v header-extra.css, který má display: unset !important. */
body.type-detail .ho-produkty--souvisejici .products-related .product.ho-nad-limit {
display: none !important;
}
/* Šablona na mobilu polovinu řady skrývá (.related-sm-screen-hide), takže
ze šesti karet zbyly čtyři. V posuvné řadě se vejdou všechny. */
body.type-detail .ho-produkty--souvisejici .products-related .product:not(.ho-nad-limit) {
display: block !important;
}
/* Oddělovač mezi řádky původní mřížky — v jedné řadě nemá co dělat
a při border-box ukrajoval 1 px z výšky karty. */
body.type-detail .ho-produkty--souvisejici .products-related .product { border: 0; }
/* Nadpis stejný jako .homepage-group-title na homepage. */
body.type-detail .ho-produkty--souvisejici .products-related-header {
margin: 0 0 16px;
padding: 0;
border: 0;
font-size: 21.6px;
font-weight: 700;
/* header-extra.css barví .products-related-header zlatě přes !important */
color: var(--ho-det-ink) !important;
text-align: left;
}
/* Karta 300 px. Obrázek dostane zbytek výšky, takže se přizpůsobí sám
a nezáleží na tom, jak dlouhý je název. */
body.type-detail .ho-produkty--souvisejici .products .p {
height: 300px;
padding: 12px;
}
body.type-detail .ho-produkty--souvisejici .products .p .image {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
body.type-detail .ho-produkty--souvisejici .products .p .image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* Kompaktnější text, aby na obrázek zbylo stejně místa jako na homepage. */
body.type-detail .ho-produkty--souvisejici .products .p a.name {
margin-bottom: 2px;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Dostupnost zůstává (je uvnitř .ratings-wrapper), pryč jde jen prázdné
místo po hvězdičkách. O ušetřené pixely se přihlásí obrázek. */
body.type-detail .ho-produkty--souvisejici .products .p .ratings-wrapper { margin-bottom: 6px; }
body.type-detail .ho-produkty--souvisejici .products .p .stars-placeholder { display: none; }
body.type-detail .ho-produkty--souvisejici .products .p .prices { margin-bottom: 8px; }
body.type-detail .ho-produkty--souvisejici .products .p .price-final strong { font-size: 18px; }
body.type-detail .ho-produkty--souvisejici .products .p .add-to-cart-button {
padding: 8px 10px;
font-size: 13px;
}
/* Na mobilu řada jede prstem (zděděno z .ho-produkty), karta se roztáhne
podle obsahu — pevná výška by na dvou sloupcích tlačila obrázek na pár px. */
@media (max-width: 767px) {
/* Pevných 300 px by na dvou sloupcích zmáčklo obrázek, výšku určuje
obsah. `height: 100%` je ale nutné — bez něj se rámeček karty
nenatáhne na výšku řady a karty s kratší dostupností
(„Na dotaz" proti „Skladem u nás…") jsou o 17 px nižší. */
body.type-detail .ho-produkty--souvisejici .products .p { height: 100%; }
body.type-detail .ho-produkty--souvisejici .products .p .image { flex: none; }
body.type-detail .ho-produkty--souvisejici .products .p .image img { max-height: 120px; }
}