/* ==========================================================================
product-card.css - 2026-08-06
Dopracowanie karty produktu (prawa kolumna, galeria mobile, glowne CTA).
GDZIE JEST WPIETY: osobnym na poczatku szablonow detalu produktu
themes/leo_bicomart/modules/appagebuilder/views/templates/front/details/
detail2769694536.tpl -> desktop (ps_appagebuilder_details_shop.active=1)
detail3228582902.tpl -> mobile/tablet (active_mobile/active_tablet=1)
To sa REALNIE renderowane szablony karty produktu. catalog/product.tpl NIE
jest uzywany, bo appagebuilder zawsze ustawia $product.productLayout.
Plik laduje sie PO paczce theme-*.css i PO magiczoomplus.css (osobny
z ), wiec przy rownej specyficznosci wygrywa. Tam gdzie custom.css
uzywa selektora z ID (#component_steps_container), tutaj dokladana jest
dodatkowa czesc #main.product-detail zeby przebic specyficznosc.
NIE dotyka: custom.css, header-menu.css, menu-promo.css, a11y-fixes.css,
fullslider.css, head.tpl, stylesheets.tpl, layout-both-columns.tpl.
========================================================================== */
/* ==========================================================================
1. Krotki opis w prawej kolumnie: zwijanie / rozwijanie
Klasa .alm-desc-collapsible jest dodawana przez product-card.js TYLKO gdy
tresc realnie nie miesci sie w limicie. Krotkie opisy zostaja nietkniete,
bez przycisku i bez gradientu (zero pustych, martwych kontrolek).
========================================================================== */
.description-short.alm-desc-collapsible {
position: relative;
max-height: 192px; /* 8 wierszy przy line-height 24px */
overflow: hidden;
transition: max-height .3s ease;
}
.description-short.alm-desc-collapsible::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 68px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
pointer-events: none;
}
/* Po rozwinieciu gradient znika calkowicie (content:none usuwa pseudoelement,
samo display:none wystarczyloby, ale content:none jest odporniejsze na
nadpisania z motywu). */
.description-short.alm-desc-collapsible.alm-desc-expanded {
max-height: 6000px;
}
.description-short.alm-desc-collapsible.alm-desc-expanded::after {
content: none;
display: none;
}
/* Pasek akcji pod opisem: "Rozwin" / "Zwin" + odsylacz do pelnego opisu. */
.alm-desc-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 20px;
margin: -12px 0 20px 0;
}
.alm-desc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
color: #2a8300;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.alm-desc-toggle:hover,
.alm-desc-toggle:focus {
color: #1f6300;
}
.alm-desc-toggle:focus-visible {
outline: 2px solid #2a8300;
outline-offset: 3px;
border-radius: 3px;
}
.alm-desc-toggle .alm-ico {
width: 16px;
height: 16px;
flex: 0 0 16px;
transition: transform .25s ease;
}
.alm-desc-toggle[aria-expanded="true"] .alm-ico {
transform: rotate(180deg);
}
/* Odsylacz do pelnego opisu w zakladce na dole strony. Domyslnie ukryty,
pokazuje sie po rozwinieciu (lub od razu, gdy opis nie byl skracany). */
.alm-desc-full {
display: none;
align-items: center;
gap: 6px;
color: #521a06;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.alm-desc-full.alm-visible {
display: inline-flex;
}
.alm-desc-full:hover,
.alm-desc-full:focus {
color: #2a8300;
}
.alm-desc-full .alm-ico {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
/* Chwilowe podswietlenie celu po przewinieciu (opis w zakladce, krok
konfiguratora) - uzytkownik od razu widzi, gdzie wyladowal. */
.alm-flash {
animation: alm-flash 1.6s ease-out 1;
}
@keyframes alm-flash {
0% { box-shadow: 0 0 0 3px rgba(42, 131, 0, .55); }
100% { box-shadow: 0 0 0 3px rgba(42, 131, 0, 0); }
}
/* ==========================================================================
2. Odnosniki do wyboru parametrow, POD glownym CTA
Renderowane przez product-card.js wylacznie dla produktow z konfiguratorem
i wylacznie dla tych parametrow, ktore realnie istnieja w konfiguratorze
danego produktu (zero martwych linkow).
========================================================================== */
.alm-param-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 0 0 18px 0;
padding: 0;
list-style: none;
}
.alm-param-links li {
margin: 0;
padding: 0;
list-style: none;
}
.alm-param-link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 8px 12px;
box-sizing: border-box;
border: 1px solid #e0dad3;
border-radius: 12px;
background: #fbfaf8;
color: #3d3a36;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: border-color .18s ease, background-color .18s ease,
box-shadow .18s ease, transform .18s ease;
}
.alm-param-link .alm-ico {
width: 26px;
height: 26px;
flex: 0 0 26px;
color: #2a8300;
}
.alm-param-link .alm-param-label {
flex: 1 1 auto;
min-width: 0;
}
.alm-param-link .alm-param-arrow {
width: 14px;
height: 14px;
flex: 0 0 14px;
color: #a49a90;
transition: transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.alm-param-link:hover {
border-color: #2a8300;
background: #f2f8ee;
color: #1f6300;
box-shadow: 0 3px 9px 0 rgba(42, 131, 0, .16);
transform: translateY(-1px);
}
.alm-param-link:hover .alm-param-arrow {
transform: translateX(3px);
color: #2a8300;
}
}
.alm-param-link:focus-visible {
outline: 3px solid #2a8300;
outline-offset: 2px;
}
/* Po otwarciu konfiguratora skrot przestaje byc potrzebny - akordeon jest
juz na ekranie, a dwa rownolegle wejscia w to samo mylily. */
.alm-param-links.alm-hidden {
display: none;
}
/* ==========================================================================
3. Galeria na mobile: miniaturki wyzej
theme.css: .MagicToolboxContainer .MagicToolboxSelectorsContainer
{ margin-top:15px; padding-top:15px; border-top:1px solid #e7e1db }
magiczoomplus.module.css dokladal jeszcze padding-top:5px.
Razem ~36 px pustego pasa z kreska nad miniaturkami, przez co cena
wypadala ponizej pierwszego ekranu. Selektor z "div." ma specyficznosc
0,2,1 i przebija oba zrodla.
========================================================================== */
@media (max-width: 991px) {
div.MagicToolboxContainer .MagicToolboxSelectorsContainer,
div.MagicToolboxContainer.selectorsBottom .MagicToolboxSelectorsContainer {
margin-top: 0;
padding-top: 0;
border-top: 0 none;
}
/* Odstep pod glownym zdjeciem tez byl liczony podwojnie. */
#main.product-detail .product-cover,
#main.product-detail div.MagicToolboxContainer > a {
margin-bottom: 6px;
}
#main.product-detail .images-container {
margin-bottom: 6px;
}
}
/* ==========================================================================
4. Glowne CTA: zielone, wyrazniejszy hover, odstep, subtelne pulsowanie
Zmienne --alm-cta-* pochodza z custom.css (:root). Tutaj redefiniujemy je
WYLACZNIE w obrebie karty produktu, wiec reszta sklepu zostaje bez zmian.
Kontrast bieli na #2a8300 = 4,83:1 (CTA to 21px/700, czyli tekst duzy,
wymog WCAG AA 3:1 spelniony z zapasem); hover #1f6300 = 7,29:1.
========================================================================== */
#main.product-detail {
--alm-cta-tlo: #2a8300;
--alm-cta-tlo-hover: #1f6300;
--alm-cta-cien: 0 4px 10px 0 rgba(42, 131, 0, .30);
--alm-cta-cien-hover: 0 8px 20px 0 rgba(42, 131, 0, .42);
}
/* Sam podmiana zmiennej NIE wystarcza dla przycisku standardowego: theme.css
ma regule .product-quantity .add .btn-primary (specyficznosc 0,3,0), ktora
bije .product-actions .add-to-cart (0,2,0) z custom.css. Dopoki obie barwy
byly brazowe, nie bylo tego widac. Dlatego tlo ustawiamy jeszcze raz, z
selektorem, ktory te 0,3,0 przebija. */
#main.product-detail .product-quantity .add .btn-primary.add-to-cart,
#main.product-detail .product-actions .add-to-cart {
background-color: var(--alm-cta-tlo);
color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
#main.product-detail #component_steps_container > .btn.showmore:hover,
#main.product-detail .product-quantity .add .btn-primary.add-to-cart:hover,
#main.product-detail .product-actions .add-to-cart:hover {
background-color: var(--alm-cta-tlo-hover);
color: #ffffff;
box-shadow: var(--alm-cta-cien-hover);
transform: translateY(-2px) scale(1.015);
}
}
#main.product-detail #component_steps_container > .btn.showmore:active,
#main.product-detail .product-quantity .add .btn-primary.add-to-cart:active,
#main.product-detail .product-actions .add-to-cart:active {
transform: translateY(0) scale(1);
box-shadow: 0 2px 5px 0 rgba(42, 131, 0, .34);
}
#main.product-detail #component_steps_container > .btn.showmore:focus-visible,
#main.product-detail .product-actions .add-to-cart:focus-visible {
outline: 3px solid var(--alm-cta-tlo);
outline-offset: 3px;
}
/* Wariant "konfiguracja" nie mial zadnego odstepu od dolu - przyklejal sie
do tego, co pod nim (a od dzis do grupy odnosnikow parametrow). */
#main.product-detail #component_steps_container > .btn.showmore {
margin-bottom: 14px;
}
/* Subtelne pulsowanie: zmienia sie WYLACZNIE cien, bez skali, bez zmiany
koloru i bez drgania. Trzy cykle i koniec, start 1,5 s po zaladowaniu -
przyciaga wzrok raz, potem znika z pola uwagi. */
@keyframes alm-cta-puls {
0%, 100% { box-shadow: var(--alm-cta-cien); }
50% { box-shadow: 0 8px 24px 0 rgba(42, 131, 0, .52); }
}
#main.product-detail #component_steps_container > .btn.showmore,
#main.product-detail .product-actions .add-to-cart {
animation: alm-cta-puls 2.4s ease-in-out 1.5s 3 both;
}
@media (prefers-reduced-motion: reduce) {
#main.product-detail #component_steps_container > .btn.showmore,
#main.product-detail .product-actions .add-to-cart,
.alm-flash {
animation: none !important;
}
.description-short.alm-desc-collapsible,
.alm-param-link,
.alm-desc-toggle .alm-ico {
transition: none !important;
}
#main.product-detail #component_steps_container > .btn.showmore:hover,
#main.product-detail .product-actions .add-to-cart:hover,
.alm-param-link:hover {
transform: none !important;
}
}
/* ==========================================================================
5. Blok wiarygodnosci w prawej kolumnie
Tresc wylacznie z realnych danych sklepu (patrz komentarz w szablonie).
========================================================================== */
.alm-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px 18px;
margin: 0 0 18px 0;
padding: 14px 16px;
list-style: none;
border: 1px solid #e7e1db;
border-radius: 14px;
background: #fbfaf8;
}
.alm-trust li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.35;
color: #3d3a36;
}
.alm-trust .alm-ico {
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-top: 1px;
color: #2a8300;
}
.alm-trust strong {
font-weight: 700;
color: #2b2724;
}
.alm-trust a {
color: #3d3a36;
text-decoration: underline;
text-underline-offset: 2px;
}
.alm-trust a:hover,
.alm-trust a:focus {
color: #2a8300;
}
.alm-trust .alm-trust-sub {
display: block;
color: #6b635b;
font-size: 13px;
}