, čo je skrytá náhrada selectu od frameworku – má
* nulové rozmery a nikdy sa nevykreslí. Navyše Bootstrap Icons sa na webe
* vôbec nenačítavajú (používa sa Font Awesome).
*
* Preto si vkladáme vlastný prvok (product-detail.js). Skutočný prvok,
* nie pozadie selectu – pozadie sa nedá otočiť.
*/
.productDetail__main .inputContainer[js-id="input::select#products_variants"] {
position: relative;
}
.productDetail__main .pd-select-arrow {
position: absolute;
right: 13px;
bottom: 13px;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
pointer-events: none;
transition: transform 0.18s ease;
}
.productDetail__main .inputContainer.is-select-open .pd-select-arrow {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.productDetail__main .pd-select-arrow {
transition: none;
}
}
/*
* Modrý box okolo tlačidiel v návrhu nie je – tlačidlá stoja na bielom
* a kupón je až pod nimi cez celú šírku.
*/
.productDetail__main .productDetail__ctaContainer {
background-color: transparent;
padding: 0;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
/* Riadok s tlačidlami zaberá celú šírku, „Kúpiť“ vypĺňa zvyšok. */
.productDetail__main .productDetail__ctaContainer > div:first-child {
flex: 1 1 100%;
display: flex;
align-items: center;
gap: 10px;
margin-right: 0;
}
.productDetail__main .productDetail__ctaContainer > div:first-child > *:not(:last-child) {
margin-right: 0;
}
.productDetail__main .productDetail__ctaContainer .btn--buy {
flex: 1 1 auto;
font-weight: 600;
white-space: nowrap;
}
/* Mobilné šírky sú až na konci súboru – musia prísť po základných hodnotách. */
/*
* Množstvo ako krokovač − / číslo / +, ako je v návrhu.
*
* V šablóne sú obe tlačidlá zabalené v
vedľa
* vstupu, teda v jednom stĺpci. `display: contents` ten obal vyradí z rozloženia,
* takže sa tlačidlá stanú priamymi položkami riadka a dajú sa cez `order`
* rozostaviť na obe strany čísla.
*
* Ikony chevron-up/down skrývame a znamienka kreslíme cez ::before bežným
* písmom – nezávisle na tom, či sa Font Awesome načíta.
*/
.productDetail__main .productDetail__ctaContainer .inputContainer--number {
border: 2px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
background-color: #ffffff;
width: 122px;
min-width: 122px;
}
/*
* Framework dáva .input výšku 50 px. Krokovač má 2px rám na oboch stranách,
* takže vnútro musí byť o 4 px nižšie než cieľových 44 – inak by riadok
* nesedel na rovnakej výške.
*/
.productDetail__main .inputContainer--number .input {
display: flex;
align-items: stretch;
width: 100%;
height: 40px;
}
.productDetail__main .inputContainer--number .input__buttons {
display: contents;
}
.productDetail__main .inputContainer--number .input__buttons button {
order: 1;
width: 34px;
height: auto;
padding: 0;
border: 0;
background: transparent;
color: #9ca3af;
cursor: pointer;
font-size: 17px;
line-height: 1;
transition: background-color 0.15s ease, color 0.15s ease;
}
.productDetail__main .inputContainer--number .input__buttons button:hover {
background-color: #f3f5f7;
color: #167ac6;
}
/* Prvé tlačidlo je „hore“ (pridať), preto ide doprava. */
.productDetail__main .inputContainer--number .input__buttons button:first-child {
order: 3;
}
.productDetail__main .inputContainer--number .input__buttons button i {
display: none;
}
.productDetail__main .inputContainer--number .input__buttons button:first-child::before {
content: "+";
}
.productDetail__main .inputContainer--number .input__buttons button:last-child::before {
content: "\2212";
}
/*
* Vstup má od frameworku vlastný 2px modrý rám a zaoblenie, oboje cez
* !important (global.css ~8865). V krokovači to pôsobí ako krabica v krabici,
* takže to musíme prebiť rovnakou zbraňou. Ohraničenie nesie celý krokovač.
*/
.productDetail__main .inputContainer--number .input input[type="number"] {
order: 2;
flex: 1 1 auto;
min-width: 0 !important;
width: auto;
padding: 0;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
color: #111827;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent;
-moz-appearance: textfield;
appearance: textfield;
}
.productDetail__main .inputContainer--number .input input[type="number"]:focus {
outline: none;
}
/* Zameranie je vidieť na celom krokovači, nie na samotnom čísle. */
.productDetail__main .productDetail__ctaContainer .inputContainer--number:focus-within {
border-color: #167ac6;
}
.productDetail__main .inputContainer--number input[type="number"]::-webkit-outer-spin-button,
.productDetail__main .inputContainer--number input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/*
* Nižší riadok. 44 px je zároveň spodná hranica pohodlného cieľa pre prst,
* takže nižšie už nejdeme.
*/
.productDetail__main .productDetail__ctaContainer .btn--buy,
.productDetail__main .productDetail__ctaContainer .btn--heart {
border-radius: 8px;
height: 44px;
min-height: 44px;
}
/*
* Obľúbené. Srdce má od frameworku farbu #c5c5c5, čo na bielom pozadí
* prakticky splýva – stmavujeme ho a mierne zväčšujeme.
*
* Len pre nezapnutý stav (:not(.is-toggled)), aby sme nezasiahli do farby,
* ktorou sa označuje produkt už pridaný medzi obľúbené.
*/
.productDetail__main .productDetail__ctaContainer .btn--heart {
width: 58px;
min-width: 58px;
}
.productDetail__main .productDetail__ctaContainer .btn--heart i {
font-size: 18px;
}
/*
* Farby nastavujeme VÝHRADNE pre pokojný stav.
*
* Framework má srdce navrhnuté takto (global.css 9196–9215):
* :hover → biele srdce na červenom (#e84c3d)
* .is-toggled → to isté červené, produkt je v obľúbených
* toggled+hover → srdce sa zmení na zlomené = „odobrať“
*
* Bez tých :not(...) by naše biele pozadie prebilo červené a biele srdce
* by na bielom zmizlo.
*/
.productDetail__main .productDetail__ctaContainer .btn--heart:not(:hover):not(.is-toggled):not(.is-followed) {
border: 1px solid #e5e7eb;
background-color: #ffffff;
}
.productDetail__main .productDetail__ctaContainer .btn--heart:not(:hover):not(.is-toggled):not(.is-followed) i {
color: #9ca3af;
}
/* Zľavový kupón: pruh cez celú šírku pod tlačidlami. */
.productDetail__main .productDetail__ctaContainer .text--label-info {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 12px 14px;
background-color: #eaf3fb;
border: 1px solid #cfe3f5;
border-radius: 10px;
color: #14568f;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
}
/*
* Blikanie sa vypína len tu. Pruh s pozadím by pulzoval celý a kód kupónu
* by bol polovicu času neviditeľný.
*/
.productDetail__main .productDetail__ctaContainer .text--label-info.blink {
-webkit-animation: none;
animation: none;
opacity: 1;
}
@media (max-width: 600px) {
.productDetail__main .productDetail__price .productDetail__price__current span.text--small {
font-size: 3.4rem !important;
}
.productDetail__main .productDetail__price {
justify-content: flex-start;
}
.productDetail__saving {
order: 4;
flex-basis: 100%;
align-self: flex-start;
}
}
/* --- 7. Mobilné šírky nákupného riadka ------------------------------------ */
/*
* Na mobile ostáva krokovač, tlačidlo aj srdce v jednom riadku. Aby sa
* tlačidlo zmestilo, krokovač a srdce sú užšie a popis tlačidla je skrátený
* („Koupit“) – to rieši product-detail.js podľa šírky okna.
*
* Blok je zámerne na konci súboru. Základné šírky (122 px / 58 px) sa
* nastavujú vyššie s rovnakou špecificitou, takže musí prísť po nich.
*/
@media (max-width: 600px) {
.productDetail__main .productDetail__ctaContainer > div:first-child {
gap: 8px;
}
.productDetail__main .productDetail__ctaContainer .inputContainer--number {
width: 104px;
min-width: 104px;
}
.productDetail__main .inputContainer--number .input__buttons button {
width: 28px;
}
.productDetail__main .productDetail__ctaContainer .btn--heart {
width: 48px;
min-width: 48px;
}
}
/* --- 8. Karty variant produktu -------------------------------------------- */
/*
* Týká sa VÝHRADNE karuselu variant v detaile (.relatedProducts__content).
* Rovnaké triedy .productCard používa aj výpis v obchode – ten sa nesmie
* zmeniť, preto je pred každým pravidlom .relatedProducts__content.
*
* Pracujeme len s údajmi, ktoré karta varianty naozaj dostáva: názov, obrázok,
* cena, zľava, štítky. Nič nové z backendu.
*/
/*
* Rám ani tieň nepredpisujeme – ostáva pôvodné .site--box (biele pozadie,
* zaoblenie 5 px, bez rámu) a pôvodný tieň pri prejdení myšou
* (web.css: 0 8px 32px rgba(0,0,0,.1)). Meníme len vnútro karty.
*/
.relatedProducts__content .productCard {
overflow: hidden;
background: #fff;
}
.relatedProducts__content .productCard .productCard__preview {
height: 200px;
padding: 18px;
border-radius: 0;
background: #ffffff;
}
/* Štítky ako pilulky vľavo hore. */
.relatedProducts__content .productCard .productCard__labels--left {
top: 10px;
left: 10px;
gap: 2px;
}
/* Farebné štítky z administrácie – rovnaká veľkosť ako sivé štítky pod názvom. */
.relatedProducts__content .productCard .productCard__labels--left .productCard__label p {
font-size: 1.2rem;
}
/* Zľavový štítok vpravo hore. */
.relatedProducts__content .productCard .productCard__labels {
top: 10px;
right: 10px;
}
.relatedProducts__content .productCard .productCard__labels .productCard__label {
background: #d8402f;
color: #fff;
}
/* Názov: väčší, vľavo, dva riadky. */
.relatedProducts__content .productCard .productCard__title {
min-height: 0;
padding: 14px 16px 0;
text-align: left;
flex-grow: 0;
}
.relatedProducts__content .productCard .productCard__title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.35;
color: #111827;
}
.relatedProducts__content .productCard .productCard__title a:hover {
color: #167ac6;
}
/*
* Pätka bola vodorovný pásik s pevnou výškou 43 px. Meníme ju na stĺpec,
* aby sa pod cenu zmestilo tlačidlo cez celú šírku.
*/
.relatedProducts__content .productCard .productCard__footer {
flex-direction: column;
align-items: stretch;
height: auto;
gap: 10px;
padding: 12px 16px 16px;
border-radius: 0;
overflow: visible;
}
/*
* Riadok s ikonou kategórie skrývame. Srdce v ňom má nulovú šírku (skrýva ho
* framework), takže ostávala len osamotená ikona štítu na vlastnom riadku
* a 37 px zbytočného miesta.
*/
.relatedProducts__content .productCard .productCard__footer__platform {
display: none;
}
/*
* Pevná výška bloku s cenou. Bez nej mali karty so zľavou o riadok viac
* (pôvodná cena) a tlačidlá v karuseli nesedeli na jednej úrovni.
* align-content: flex-end pritlačí cenu k spodku, takže ceny sú zarovnané
* naprieč všetkými kartami bez ohľadu na to, či zľavu majú.
*/
.relatedProducts__content .productCard .productCard__footer__price {
order: 2;
display: flex;
align-items: baseline;
align-content: flex-end;
/* framework tu má justify-content: center, cena preto stála na stred */
justify-content: flex-start;
gap: 4px 8px;
flex-wrap: wrap;
min-height: 50px;
padding: 0;
border: 0;
background: transparent;
}
/* Pôvodná cena má vlastný riadok, aby zľava mohla stáť vedľa novej ceny. */
.relatedProducts__content .productCard .productCard__price--old {
flex: 0 0 100%;
}
.relatedProducts__content .productCard .productCard__footer__price p {
margin: 0;
}
.relatedProducts__content .productCard .productCard__footer__price .amount,
.relatedProducts__content .productCard .productCard__footer__price .currency {
font-size: 2rem !important;
font-weight: 700;
color: #111827;
}
/* Pôvodná cena – menšia, prečiarknutá. */
.relatedProducts__content .productCard .productCard__price--old .amount,
.relatedProducts__content .productCard .productCard__price--old .currency {
font-size: 1.3rem !important;
font-weight: 400;
color: #9ca3af;
text-decoration: line-through;
}
/* Tlačidlo cez celú šírku s popisom. */
.relatedProducts__content .productCard .btn--basket {
order: 3;
width: 100%;
height: 34px;
min-height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .03em;
/* Hodnota kľúča BUY je v databáze malými písmenami – verzálky to zrovnajú. */
text-transform: uppercase;
}
.relatedProducts__content .productCard .btn--basket i {
font-size: 1.2rem;
}
/* Veľkosť musí sedieť priamo na spane – tlačidlo ju naň neprenesie. */
.relatedProducts__content .productCard .productCard__buyLabel {
display: inline;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .03em;
}
@media (max-width: 700px) {
.relatedProducts__content .productCard .productCard__preview {
height: 170px;
padding: 14px;
}
.relatedProducts__content .productCard .productCard__footer__price .amount,
.relatedProducts__content .productCard .productCard__footer__price .currency {
font-size: 1.8rem !important;
}
}
/* --- 9. Zľava a štítky na kartách variant ---------------------------------- */
/*
* Obsah dopĺňa product-detail.js. Zľava sa presúva z rohu k cene, štítky sa
* odvodzujú z názvov variant – žiadne nové dáta z backendu.
*/
/* Odznak zľavy v rohu je zbytočný, keď je zľava pri cene. */
.relatedProducts__content .productCard.pd-has-save .productCard__labels {
display: none;
}
.relatedProducts__content .productCard .pd-save {
font-size: 1.15rem;
font-weight: 700;
color: #2e9e5b;
letter-spacing: .02em;
white-space: nowrap;
}
.relatedProducts__content .productCard .pd-chips {
display: flex;
flex-wrap: wrap;
gap: 2px;
padding: 8px 16px 0;
}
.relatedProducts__content .productCard .pd-chip {
padding: 3px 8px;
border-radius: 999px;
background: #f1f3f6;
color: #566270;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}