/* ==========================================================
EA ELEKTRONIKA – CUSTOM CSS
Optimized full replacement
OpenCart 3.0.6.0 / Journal 3.1.8
========================================================== */
/* ==========================================================
GENERAL OVERRIDES
========================================================== */
.module-blocks-191 .title.module-title::after {
display: none;
}
.mobile-header-active .mobile-wrapper-header > span {
display: none;
}
.route-product-product .page-title,
.route-product-category .page-title {
margin-top: 30px;
}
#logo a > img {
height: 100%;
}
.module-blocks-247 .module-item-1
.block-content:not(.block-html):not(.block-text) {
height: inherit !important;
}
.top-bar > div:first-child {
width: 95%;
}
.top-bar > div:first-child > ul > li:nth-child(3) {
position: absolute;
right: 0;
transform: translateX(-65%);
}
.desktop-header-active .header-mega .desktop-search-wrapper > div {
width: 66%;
}
.desktop-header-active .header-mega .desktop-search-wrapper {
justify-content: flex-start !important;
}
.smartsearch .smartsearch-page {
color: #ffffff !important;
background: rgba(143, 196, 74, 1) !important;
}
.product-thumb .price .price-normal {
font-size: 18px;
}
.route-product-product #product-product
.product-right .product-price-group .price-group .product-price {
font-size: 40px;
}
/* ==========================================================
PRODUCT OPTIONS – IMAGE CARDS
========================================================== */
/* Image checkboxes retain their smaller layout. */
#product .checkbox img,
.product-options .checkbox img {
display: block !important;
width: 150px !important;
height: 150px !important;
max-width: 150px !important;
max-height: 150px !important;
object-fit: contain !important;
}
#product .checkbox label,
.product-options .checkbox label {
min-width: 165px !important;
min-height: 165px !important;
padding: 10px !important;
}
/* Radio-image option item. */
#product .radio,
.product-options .radio {
display: inline-block !important;
margin: 0 45px 30px 0 !important;
vertical-align: top !important;
}
#product .radio label,
.product-options .radio label {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 260px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
color: #24364f !important;
text-align: left !important;
white-space: normal !important;
cursor: pointer;
}
/* Hide the native input visually while preserving label interaction. */
#product .radio label input,
.product-options .radio label input {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
#product .radio label img,
.product-options .radio label img,
#product .radio img.img-thumbnail,
.product-options .radio img.img-thumbnail {
box-sizing: border-box !important;
display: block !important;
width: 250px !important;
height: 250px !important;
max-width: 250px !important;
max-height: 250px !important;
margin: 0 0 10px !important;
padding: 0 !important;
object-fit: contain !important;
border: 2px solid #9aa3ad !important;
border-radius: 4px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#product .radio label .option-name-final,
.product-options .radio label .option-name-final,
#product .radio label .option-price-final,
.product-options .radio label .option-price-final {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
font-size: 20px !important;
line-height: 1.25 !important;
}
#product .radio label .option-name-final,
.product-options .radio label .option-name-final {
color: #24364f !important;
font-weight: 400 !important;
}
#product .radio label .option-price-final,
.product-options .radio label .option-price-final {
margin-top: 4px !important;
color: #6baa35 !important;
font-weight: 700 !important;
}
#product .form-group,
.product-options .form-group {
margin-bottom: 35px !important;
}
#product .radio label.option-selected img,
.product-options .radio label.option-selected img {
border-color: #6baa35 !important;
border-width: 4px !important;
box-shadow: 0 0 0 3px rgba(107, 170, 53, 0.18) !important;
}
#product .radio label.option-selected .option-name-final,
.product-options .radio label.option-selected .option-name-final {
font-weight: 700 !important;
}
#product .radio label.option-selected::after,
.product-options .radio label.option-selected::after {
content: "Izbrano";
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
padding: 7px 10px;
color: #ffffff;
background: #6baa35;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
/* =========================================================
EA ELEKTRONIKA – AI OZNAKE
CELOTEN CSS
========================================================= */
/*
* Vsebnik slike, na katerega JavaScript pripne oznako.
*/
.ea-ai-host {
position: relative !important;
}
/*
* Kadar je vsebnik privzeto inline.
*/
.ea-ai-host-inline {
display: inline-block !important;
max-width: 100% !important;
}
/* =========================================================
OSNOVNA AI OZNAKA
Bannerji in velika produktna slika
========================================================= */
.ea-ai-label {
position: absolute !important;
left: 7px !important;
right: auto !important;
bottom: 7px !important;
top: auto !important;
z-index: 999 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100% - 14px) !important;
height: auto !important;
margin: 0 !important;
padding: 3px 7px 3px 4px !important;
background: rgba(8, 24, 48, 0.68) !important;
border: 1px solid rgba(255, 255, 255, 0.38) !important;
border-radius: 7px !important;
color: rgba(255, 255, 255, 0.88) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 9px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-decoration: none !important;
text-transform: none !important;
white-space: nowrap !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0.82 !important;
visibility: visible !important;
overflow: hidden !important;
pointer-events: none !important;
user-select: none !important;
}
/*
* Majhen krog AI pred besedilom.
*/
.ea-ai-label::before {
content: "AI" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 15px !important;
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
height: 15px !important;
margin: 0 4px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.65) !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.95) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 7px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
/* =========================================================
KATEGORIJE IN SEZNAMI IZDELKOV
Samo majhen diskreten krog AI
========================================================= */
.product-thumb .ea-ai-label,
.product-layout .ea-ai-label,
.product-grid .ea-ai-label,
.product-list .ea-ai-label {
left: 6px !important;
right: auto !important;
bottom: 6px !important;
top: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 1px !important;
background: rgba(8, 24, 48, 0.48) !important;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
opacity: 0.62 !important;
overflow: hidden !important;
}
.product-thumb .ea-ai-label::before,
.product-layout .ea-ai-label::before,
.product-grid .ea-ai-label::before,
.product-list .ea-ai-label::before {
content: "AI" !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 6px !important;
font-weight: 700 !important;
line-height: 14px !important;
}
/* =========================================================
DODATNE SLIČICE NA PRODUKTNI STRANI
Samo majhen diskreten krog AI
========================================================= */
.additional-images .ea-ai-label,
.additional-image .ea-ai-label,
.image-additional .ea-ai-label,
.thumbnails .ea-ai-label,
.product-images .swiper-slide .ea-ai-label {
left: 3px !important;
right: auto !important;
bottom: 3px !important;
top: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 17px !important;
min-width: 17px !important;
max-width: 17px !important;
height: 17px !important;
margin: 0 !important;
padding: 1px !important;
background: rgba(8, 24, 48, 0.48) !important;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
opacity: 0.62 !important;
overflow: hidden !important;
}
.additional-images .ea-ai-label::before,
.additional-image .ea-ai-label::before,
.image-additional .ea-ai-label::before,
.thumbnails .ea-ai-label::before,
.product-images .swiper-slide .ea-ai-label::before {
content: "AI" !important;
flex: 0 0 13px !important;
width: 13px !important;
min-width: 13px !important;
max-width: 13px !important;
height: 13px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 6px !important;
font-weight: 700 !important;
line-height: 13px !important;
}
/* =========================================================
RAZRED COMPACT, KI GA DODA JAVASCRIPT
========================================================= */
.ea-ai-label.ea-ai-compact {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
height: 18px !important;
padding: 1px !important;
background: rgba(8, 24, 48, 0.48) !important;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
opacity: 0.62 !important;
overflow: hidden !important;
}
.ea-ai-label.ea-ai-compact::before {
content: "AI" !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 6px !important;
font-weight: 700 !important;
line-height: 14px !important;
}
/* =========================================================
POVEČANA SLIKA V POPUPU
========================================================= */
.ea-ai-popup-label {
position: fixed !important;
left: 0;
top: 0;
right: auto !important;
bottom: auto !important;
z-index: 2147483647 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 3px 7px 3px 4px !important;
background: rgba(8, 24, 48, 0.68) !important;
border: 1px solid rgba(255, 255, 255, 0.38) !important;
border-radius: 7px !important;
color: rgba(255, 255, 255, 0.88) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 9px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.2 !important;
text-decoration: none !important;
text-transform: none !important;
white-space: nowrap !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
user-select: none !important;
}
.ea-ai-popup-label::before {
content: "AI" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 15px !important;
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
height: 15px !important;
margin: 0 4px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.65) !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.95) !important;
font-size: 7px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.ea-ai-popup-label.ea-ai-popup-visible {
opacity: 0.82 !important;
visibility: visible !important;
}
/* =========================================================
MOBILNE NAPRAVE
========================================================= */
@media (max-width: 767px) {
.ea-ai-label {
left: 5px !important;
bottom: 5px !important;
padding: 2px 6px 2px 3px !important;
font-size: 8px !important;
}
.ea-ai-label::before {
flex-basis: 14px !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
margin-right: 3px !important;
font-size: 7px !important;
}
.product-thumb .ea-ai-label,
.product-layout .ea-ai-label,
.product-grid .ea-ai-label,
.product-list .ea-ai-label,
.additional-images .ea-ai-label,
.additional-image .ea-ai-label,
.image-additional .ea-ai-label,
.thumbnails .ea-ai-label,
.ea-ai-label.ea-ai-compact {
width: 17px !important;
min-width: 17px !important;
max-width: 17px !important;
height: 17px !important;
padding: 1px !important;
font-size: 0 !important;
}
.ea-ai-popup-label {
padding: 2px 6px 2px 3px !important;
font-size: 8px !important;
}
.ea-ai-popup-label::before {
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
margin-right: 3px !important;
font-size: 7px !important;
}
}
/* =========================================================
AI LABEL – MOBILE CATEGORY VIEW FIX
Add at the END of Custom CSS
========================================================= */
@media (max-width: 767px) {
/*
* Ensure the mobile product image wrappers can display
* the AI badge above the image.
*/
body.route-product-category .product-thumb .image,
body.route-product-category .product-thumb .image > a,
body.route-product-category .product-layout .image,
body.route-product-category .product-layout .image > a,
body.route-product-category .product-grid .image,
body.route-product-category .product-grid .image > a {
position: relative !important;
overflow: visible !important;
isolation: isolate !important;
}
/*
* Force the category AI badge to remain visible.
*/
body.route-product-category .product-thumb .ea-ai-label,
body.route-product-category .product-layout .ea-ai-label,
body.route-product-category .product-grid .ea-ai-label,
body.route-product-category .product-list .ea-ai-label {
position: absolute !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
left: 6px !important;
right: auto !important;
bottom: 6px !important;
top: auto !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 1px !important;
background: rgba(8, 24, 48, 0.58) !important;
border: 1px solid rgba(255, 255, 255, 0.40) !important;
border-radius: 50% !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20) !important;
opacity: 0.78 !important;
visibility: visible !important;
overflow: hidden !important;
transform: none !important;
clip: auto !important;
clip-path: none !important;
z-index: 2147483000 !important;
pointer-events: none !important;
}
body.route-product-category .product-thumb .ea-ai-label::before,
body.route-product-category .product-layout .ea-ai-label::before,
body.route-product-category .product-grid .ea-ai-label::before,
body.route-product-category .product-list .ea-ai-label::before {
content: "AI" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 14px !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.95) !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 6px !important;
font-weight: 700 !important;
line-height: 14px !important;
opacity: 1 !important;
visibility: visible !important;
}
}
@media (max-width: 760px) {
.ea-home-h1 {
font-size: 28px !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 12px 16px !important;
}
}
@media (max-width: 470px) {
.ea-home-h1 {
font-size: 24px !important;
}
}
@media (max-width: 1024px) {
.mobile-header .logo img,
.mobile-header .mobile-logo img,
.mobile-bar .logo img,
.mobile-logo img,
#logo img {
width: auto !important;
height: auto !important;
max-width: 220px !important;
max-height: 72px !important;
object-fit: contain !important;
}
}
@media (max-width: 1024px) and (orientation: landscape) {
.mobile-header .logo img,
.mobile-header .mobile-logo img,
.mobile-bar .logo img,
.mobile-logo img,
#logo img {
max-width: 190px !important;
max-height: 58px !important;
}
}
/* Homepage banner – vedno ohrani natančno razmerje 3 : 1 */
@media (max-width: 1024px) {
.master-slider[data-options*='"width":2172'][data-options*='"height":724'] {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 1 !important;
overflow: hidden !important;
}
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-container,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-inner-controls-cont,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-view,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-slide-container,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-slide,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-slide-bgcont {
height: 100% !important;
}
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
.ms-slide-bgcont img,
.master-slider[data-options*='"width":2172'][data-options*='"height":724']
img.ms-slide-bg {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain !important;
top: 0 !important;
left: 0 !important;
}
}
/* ==========================================================
HOMEPAGE PRODUCT INTRO CARDS
XTAR / ENERGIJA + POLNILNIKI
OPTIMIZIRANO:
- skupne lastnosti so definirane samo enkrat
- XTAR levi 25-% blok ima lasten frame + arrow element
- polnilniki desni 25-% blok uporabljajo levo pseudo puščico
- oba bloka imata transparentno ozadje, svetel tekst in zelen CTA
========================================================== */
/* ==========================================================
SKUPNA OSNOVA – OBA 25-% INTRO BLOKA
========================================================== */
.ea-category-intro {
--ea-intro-dark: #182127;
--ea-intro-arrow-fill: #101a22;
--ea-intro-green: #8fc44a;
--ea-intro-green-hover: #7fb33d;
position: relative;
z-index: 5;
width: 100%;
min-height: 570px;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0;
padding: 14px 20px 20px !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* ==========================================================
KICKER
========================================================== */
.ea-category-intro .ea-category-kicker {
position: relative;
z-index: 3;
margin: 0 0 6px !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.84) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.90);
}
/* ==========================================================
NASLOV
========================================================== */
.ea-category-intro h2 {
position: relative;
z-index: 3;
margin: 0 0 6px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.10 !important;
letter-spacing: -0.02em !important;
text-shadow: 0 2px 7px rgba(0, 0, 0, 0.95);
}
/* ==========================================================
OPIS
========================================================== */
.ea-category-intro p {
position: relative;
z-index: 3;
max-width: 100% !important;
margin: 0 0 12px !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.38 !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}
/* ==========================================================
ZELEN CTA – OBA BLOKA
========================================================== */
.ea-category-intro .ea-category-button {
position: relative;
z-index: 3;
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: auto;
padding: 10px 18px;
background: var(--ea-intro-green) !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 8px !important;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
box-shadow: 0 7px 18px rgba(88, 137, 31, 0.27) !important;
transition:
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.ea-category-intro .ea-category-button:hover,
.ea-category-intro .ea-category-button:focus {
background: var(--ea-intro-green-hover) !important;
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow: 0 9px 20px rgba(88, 137, 31, 0.34) !important;
}
/* ==========================================================
XTAR – LEVI 25-% BLOK
HTML uporablja:
.ea-category-frame
.ea-category-arrow
========================================================== */
body .ea-category-intro:not(.ea-category-intro--right)::before,
body .ea-category-intro:not(.ea-category-intro--right)::after {
content: none !important;
display: none !important;
}
body .ea-category-intro:not(.ea-category-intro--right) .ea-category-frame {
position: absolute !important;
top: -10px !important;
left: -10px !important;
bottom: -10px !important;
width: calc(400% + 12px) !important;
height: auto !important;
display: block !important;
box-sizing: border-box !important;
background: transparent !important;
border: 2px solid var(--ea-intro-dark) !important;
border-radius: 8px !important;
box-shadow: 0 0 12px rgba(8, 16, 24, 0.10) !important;
pointer-events: none !important;
z-index: 50 !important;
}
body .ea-category-intro:not(.ea-category-intro--right) .ea-category-arrow {
position: absolute !important;
top: 47% !important;
right: -14px !important;
display: block !important;
width: 0 !important;
height: 0 !important;
border-top: 14px solid transparent !important;
border-bottom: 14px solid transparent !important;
border-left: 14px solid var(--ea-intro-dark) !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
z-index: 60 !important;
}
/* ==========================================================
POLNILNIKI – DESNI 25-% BLOK
PUŠČICA KAŽE LEVO
========================================================== */
body .ea-category-intro.ea-category-intro--right::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: -23px !important;
right: auto !important;
width: 24px !important;
height: 46px !important;
background: rgba(255, 255, 255, 0.92) !important;
clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
z-index: 100 !important;
}
body .ea-category-intro.ea-category-intro--right::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: -19px !important;
right: auto !important;
width: 20px !important;
height: 38px !important;
background: var(--ea-intro-arrow-fill) !important;
background-image: none !important;
clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
z-index: 101 !important;
}
/* ==========================================================
TABLET – DO 1024px
========================================================== */
@media (max-width: 1024px) {
body .ea-category-intro:not(.ea-category-intro--right) {
min-height: 540px;
padding: 18px 20px 20px !important;
border: 2px solid var(--ea-intro-dark) !important;
border-radius: 12px !important;
overflow: hidden !important;
}
body .ea-category-intro.ea-category-intro--right {
min-height: 500px;
padding: 18px 20px 20px !important;
overflow: hidden !important;
}
body .ea-category-intro:not(.ea-category-intro--right) .ea-category-frame,
body .ea-category-intro:not(.ea-category-intro--right) .ea-category-arrow,
body .ea-category-intro.ea-category-intro--right::before,
body .ea-category-intro.ea-category-intro--right::after {
content: none !important;
display: none !important;
}
.ea-category-intro .ea-category-kicker {
font-size: 12px !important;
}
.ea-category-intro h2 {
margin-bottom: 6px !important;
font-size: 26px !important;
line-height: 1.10 !important;
}
.ea-category-intro p {
margin-bottom: 12px !important;
font-size: 13.5px !important;
line-height: 1.38 !important;
}
}
/* ==========================================================
MOBILNI – DO 760px
========================================================== */
@media (max-width: 760px) {
body .ea-category-intro:not(.ea-category-intro--right) {
min-height: 500px;
padding: 16px 18px 18px !important;
}
body .ea-category-intro.ea-category-intro--right {
min-height: 470px;
padding: 16px 18px 18px !important;
}
.ea-category-intro .ea-category-kicker {
font-size: 11.5px !important;
}
.ea-category-intro h2 {
margin-bottom: 5px !important;
font-size: 24px !important;
line-height: 1.12 !important;
}
.ea-category-intro p {
margin-bottom: 10px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.ea-category-intro .ea-category-button {
min-height: 47px;
font-size: 15px;
}
}
/* ==========================================================
MANJŠI MOBILNI – DO 470px
========================================================== */
@media (max-width: 470px) {
body .ea-category-intro:not(.ea-category-intro--right) {
min-height: 480px;
padding: 15px 16px 17px !important;
}
body .ea-category-intro.ea-category-intro--right {
min-height: 450px;
padding: 15px 16px 17px !important;
}
.ea-category-intro h2 {
font-size: 22px !important;
}
.ea-category-intro p {
font-size: 12.5px !important;
}
}
/* ==========================================================
EA ELEKTRONIKA
LOVSKE KAMERE – HOMEPAGE
DESKTOP:
- potrjeni dark/orange izgled
- skupni oranžni okvir
TABLET / MOBILE:
- krajši intro blok
- manj praznega prostora za kamero
- brez raztegnjenega desktop okvirja
========================================================== */
/* ==========================================================
GLAVNI INTRO BLOK – DESKTOP
========================================================== */
.ea-hunting-intro {
position: relative;
z-index: 5;
width: 100%;
min-height: 570px;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* ==========================================================
DESKTOP – SKUPNI ORANŽNI OKVIR
========================================================== */
.ea-hunting-intro::after {
content: "";
position: absolute;
top: -44px;
left: 0;
width: calc(445% + 24px);
height: calc(100% + 44px);
box-sizing: border-box;
border: 2px solid #ff8700;
border-radius: 8px;
pointer-events: none;
z-index: 50;
box-shadow: 0 0 12px rgba(255, 135, 0, 0.10);
}
.ea-hunting-intro::before {
content: none !important;
display: none !important;
}
/* ==========================================================
ZGORNJI DEL
========================================================== */
.ea-hunting-head {
position: relative;
z-index: 3;
width: 100%;
box-sizing: border-box;
padding: 22px 22px 0;
}
.ea-hunting-kicker {
margin: 0 0 8px;
color: #ff8700;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.07em;
text-transform: uppercase;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}
.ea-hunting-intro h2 {
margin: 0;
padding: 0;
font-size: 27px;
font-weight: 800;
line-height: 1.07;
letter-spacing: -0.02em;
text-transform: uppercase;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}
.ea-hunting-intro h2 span,
.ea-hunting-intro h2 strong {
display: block;
}
.ea-hunting-intro h2 span {
color: #ffffff;
}
.ea-hunting-intro h2 strong {
margin-top: 4px;
color: #ff8700;
font-weight: 800;
}
.ea-hunting-intro h2::after {
content: "";
display: block;
width: 52px;
height: 3px;
margin-top: 11px;
background: #ff8700;
border-radius: 3px;
box-shadow: 0 0 8px rgba(255, 135, 0, 0.30);
}
/* ==========================================================
PROSTOR ZA KAMERO
========================================================== */
.ea-hunting-visual-space {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 165px;
pointer-events: none;
}
/* ==========================================================
SPODNJA VSEBINA
========================================================== */
.ea-hunting-content {
position: relative;
z-index: 3;
width: 100%;
box-sizing: border-box;
margin-top: auto;
padding: 14px 22px 20px;
background: linear-gradient(
180deg,
rgba(5, 9, 12, 0.00) 0%,
rgba(5, 9, 12, 0.55) 15%,
rgba(5, 9, 12, 0.90) 38%,
rgba(5, 9, 12, 0.98) 100%
);
}
.ea-hunting-description {
margin: 0 0 11px;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 14px;
font-weight: 400;
line-height: 1.42;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80);
}
.ea-hunting-highlights {
margin: 0 0 15px;
padding: 0;
list-style: none;
}
.ea-hunting-highlights li {
position: relative;
margin: 0 0 6px;
padding-left: 19px;
color: rgba(255, 255, 255, 0.94) !important;
font-size: 13.5px;
font-weight: 500;
line-height: 1.35;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80);
}
.ea-hunting-highlights li:last-child {
margin-bottom: 0;
}
.ea-hunting-highlights li::before {
content: "";
position: absolute;
top: 0.62em;
left: 1px;
width: 7px;
height: 7px;
background: #ff8700;
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 7px rgba(255, 135, 0, 0.50);
}
.ea-hunting-button {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
box-sizing: border-box;
padding: 11px 18px;
color: #ffffff !important;
background: linear-gradient(135deg, #ffa51f 0%, #ff8700 100%);
border: 0;
border-radius: 7px;
font-size: 15px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
box-shadow: 0 8px 20px rgba(255, 135, 0, 0.26);
transition:
transform 0.2s ease,
filter 0.2s ease,
box-shadow 0.2s ease;
}
.ea-hunting-button:hover,
.ea-hunting-button:focus {
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 11px 25px rgba(255, 135, 0, 0.34);
}
.ea-hunting-button-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -1px;
font-size: 24px;
font-weight: 400;
line-height: 1;
}
/* ==========================================================
TABLET – DO 1024px
========================================================== */
@media (max-width: 1024px) {
.ea-hunting-intro {
min-height: 560px;
overflow: hidden !important;
}
.ea-hunting-intro::after {
content: "";
position: absolute;
top: 0;
left: 20px;
width: 70px;
height: 3px;
background: #ff8700;
border: 0;
border-radius: 3px;
box-shadow: 0 0 8px rgba(255, 135, 0, 0.25);
pointer-events: none;
z-index: 50;
}
.ea-hunting-head {
padding: 22px 22px 0;
}
.ea-hunting-kicker {
font-size: 12px;
}
.ea-hunting-intro h2 {
font-size: 27px;
}
.ea-hunting-visual-space {
min-height: 190px;
}
.ea-hunting-content {
padding: 18px 22px 22px;
background: linear-gradient(
180deg,
rgba(5, 9, 12, 0.05) 0%,
rgba(5, 9, 12, 0.62) 18%,
rgba(5, 9, 12, 0.93) 45%,
rgba(5, 9, 12, 0.99) 100%
);
}
.ea-hunting-description {
margin-bottom: 12px;
font-size: 14px;
}
.ea-hunting-highlights {
margin-bottom: 16px;
}
.ea-hunting-highlights li {
margin-bottom: 6px;
font-size: 13.5px;
}
}
/* ==========================================================
MOBILNI – DO 760px
========================================================== */
@media (max-width: 760px) {
.ea-hunting-intro {
min-height: 520px;
}
.ea-hunting-head {
padding: 20px 18px 0;
}
.ea-hunting-kicker {
margin-bottom: 7px;
font-size: 11.5px;
}
.ea-hunting-intro h2 {
font-size: 24px;
line-height: 1.08;
}
.ea-hunting-intro h2::after {
width: 46px;
margin-top: 10px;
}
.ea-hunting-visual-space {
min-height: 175px;
}
.ea-hunting-content {
padding: 16px 18px 20px;
background: linear-gradient(
180deg,
rgba(5, 9, 12, 0.00) 0%,
rgba(5, 9, 12, 0.58) 16%,
rgba(5, 9, 12, 0.93) 42%,
rgba(5, 9, 12, 1.00) 100%
);
}
.ea-hunting-description {
margin-bottom: 11px;
font-size: 13.5px;
line-height: 1.40;
}
.ea-hunting-highlights {
margin-bottom: 15px;
}
.ea-hunting-highlights li {
margin-bottom: 6px;
padding-left: 18px;
font-size: 13px;
line-height: 1.35;
}
.ea-hunting-button {
min-height: 47px;
font-size: 14px;
}
}
/* ==========================================================
MANJŠI MOBILNI – DO 470px
========================================================== */
@media (max-width: 470px) {
.ea-hunting-intro {
min-height: 500px;
}
.ea-hunting-head {
padding: 18px 16px 0;
}
.ea-hunting-kicker {
font-size: 11px;
}
.ea-hunting-intro h2 {
font-size: 22px;
}
.ea-hunting-visual-space {
min-height: 160px;
}
.ea-hunting-content {
padding: 15px 16px 18px;
}
.ea-hunting-description {
font-size: 13px;
}
.ea-hunting-highlights li {
font-size: 12.5px;
}
.ea-hunting-button {
min-height: 46px;
font-size: 13.5px;
}
}
/* ==========================================================
EA ELEKTRONIKA
RADON HERO NEW
FINAL RESPONSIVE PARALLAX HERO
========================================================== */
/* ==========================================================
HERO – DESKTOP
========================================================== */
.ea-radon-hero {
position: relative;
isolation: isolate;
width: 100%;
min-height: clamp(760px, 80vh, 840px);
display: flex;
align-items: center;
box-sizing: border-box;
margin: 0;
padding: 42px 5vw 68px;
background-image:
linear-gradient(
90deg,
rgba(2, 5, 8, 0.30) 0%,
rgba(2, 5, 8, 0.12) 29%,
rgba(2, 5, 8, 0.00) 54%
),
url("https://www.eaelektronika.com/image/catalog/banner/final-hero-background-radon.png_compress.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
/* ==========================================================
SUBTLE BOTTOM TRANSITION
========================================================== */
.ea-radon-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.00) 62%,
rgba(0, 0, 0, 0.08) 78%,
rgba(0, 0, 0, 0.25) 100%
);
}
/* ==========================================================
CONTENT PANEL
========================================================== */
.ea-radon-hero__content {
position: relative;
z-index: 3;
width: min(470px, 37vw);
box-sizing: border-box;
transform: translateY(-24px);
margin: 0;
padding: 25px 28px 27px 32px;
color: #ffffff;
background:
linear-gradient(
90deg,
rgba(3, 7, 10, 0.90) 0%,
rgba(3, 7, 10, 0.82) 61%,
rgba(3, 7, 10, 0.47) 82%,
rgba(3, 7, 10, 0.00) 100%
);
border-left: 3px solid #ff8a00;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
/* ==========================================================
KICKER
========================================================== */
.ea-radon-hero__kicker {
margin: 0 0 9px !important;
padding: 0 !important;
color: #ff9700 !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase;
}
/* ==========================================================
TITLE
========================================================== */
.ea-radon-hero__title {
margin: 0 0 17px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: clamp(37px, 2.65vw, 51px) !important;
font-weight: 900 !important;
line-height: 0.98 !important;
letter-spacing: -0.035em !important;
text-transform: uppercase;
}
.ea-radon-hero__title span {
display: block;
margin-top: 5px;
color: #ff8a00 !important;
}
/* ==========================================================
LEAD
========================================================== */
.ea-radon-hero__lead {
margin: 0 0 7px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.ea-radon-hero__text {
max-width: 425px;
margin: 0 0 18px !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
/* ==========================================================
MESSAGE
========================================================== */
.ea-radon-hero__message {
position: relative;
margin: 0 0 21px !important;
padding: 15px 0 15px 68px !important;
color: rgba(255, 255, 255, 0.95) !important;
font-size: 14.5px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
}
.ea-radon-hero__message::before {
content: "\2622";
position: absolute;
top: 50%;
left: 0;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #111111;
background: #ff9200;
border-radius: 50%;
font-family: Arial, sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1;
text-shadow: none;
box-shadow: 0 0 18px rgba(255, 138, 0, 0.28);
transform: translateY(-50%);
}
.ea-radon-hero__message strong {
color: #ff9700 !important;
font-weight: 800 !important;
}
/* ==========================================================
CTA CONTAINER
========================================================== */
.ea-radon-hero__actions {
width: 100%;
display: flex;
align-items: stretch;
gap: 10px;
}
/* ==========================================================
CTA BUTTON
========================================================== */
.ea-radon-hero__button {
min-width: 205px;
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
box-sizing: border-box;
padding: 12px 24px;
border-radius: 6px;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.025em;
text-align: center;
text-decoration: none !important;
text-shadow: none !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ea-radon-hero__button span {
font-size: 23px;
font-weight: 400;
line-height: 0;
}
/* ==========================================================
PRIMARY CTA
========================================================== */
.ea-radon-hero__button--primary {
color: #111111 !important;
background:
linear-gradient(
135deg,
#ffc21a 0%,
#ff9000 54%,
#ff7a00 100%
) !important;
border: 1px solid #ffa000 !important;
box-shadow: 0 7px 22px rgba(255, 133, 0, 0.34) !important;
}
.ea-radon-hero__button--primary:hover,
.ea-radon-hero__button--primary:focus {
color: #111111 !important;
transform: translateY(-2px);
box-shadow: 0 11px 29px rgba(255, 133, 0, 0.47) !important;
}
/* ==========================================================
LARGE DESKTOP
========================================================== */
@media (min-width: 1600px) {
.ea-radon-hero {
min-height: 830px;
padding-left: 6vw;
padding-right: 6vw;
}
.ea-radon-hero__content {
width: 480px;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 1024px) {
.ea-radon-hero {
min-height: 720px;
align-items: flex-end;
padding: 38px 5vw 38px;
background-image:
linear-gradient(
180deg,
rgba(2, 5, 8, 0.00) 0%,
rgba(2, 5, 8, 0.04) 47%,
rgba(2, 5, 8, 0.62) 100%
),
url("https://www.eaelektronika.com/image/catalog/banner/final-hero-background-radon.png_compress.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.ea-radon-hero__content {
width: min(490px, 68vw);
transform: none;
padding: 25px 26px 27px 29px;
}
.ea-radon-hero__title {
font-size: 40px !important;
}
.ea-radon-hero__lead {
font-size: 16.5px !important;
}
.ea-radon-hero__text {
font-size: 14px !important;
}
}
/* ==========================================================
PHONE – PORTRAIT
========================================================== */
@media (max-width: 760px) and (orientation: portrait) {
.ea-radon-hero {
width: 100%;
min-height: 0;
display: block;
padding: calc(177.78vw + 12px) 14px 24px;
background-color: #03070a;
background-image:
url("https://www.eaelektronika.com/image/catalog/banner/final-hero-background-radon-mobile.png_compress.png");
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
overflow: visible;
}
.ea-radon-hero::after {
display: none;
}
.ea-radon-hero__content {
width: 100%;
max-width: none;
box-sizing: border-box;
transform: none;
margin: 0;
padding: 24px 22px 24px;
background:
linear-gradient(
180deg,
rgba(7, 12, 16, 0.98) 0%,
rgba(3, 7, 10, 1.00) 100%
);
border-left: 0;
border-top: 3px solid #ff8a00;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.90);
}
.ea-radon-hero__kicker {
margin-bottom: 9px !important;
font-size: 11.5px !important;
letter-spacing: 0.14em !important;
}
.ea-radon-hero__title {
margin-bottom: 17px !important;
font-size: clamp(28px, 7.8vw, 32px) !important;
line-height: 1.02 !important;
}
.ea-radon-hero__title span {
margin-top: 5px;
}
.ea-radon-hero__lead {
margin-bottom: 8px !important;
font-size: 16px !important;
}
.ea-radon-hero__text {
max-width: none;
margin-bottom: 18px !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
}
.ea-radon-hero__message {
margin-bottom: 21px !important;
padding: 16px 0 16px 70px !important;
font-size: 13.5px !important;
}
.ea-radon-hero__message::before {
width: 50px;
height: 50px;
font-size: 44px;
box-shadow: 0 0 18px rgba(255, 138, 0, 0.30);
}
.ea-radon-hero__actions {
display: block;
}
.ea-radon-hero__button {
width: 100%;
min-width: 0;
min-height: 54px;
font-size: 13.5px !important;
text-shadow: none !important;
}
}
/* ==========================================================
SMALL PHONE
========================================================== */
@media (max-width: 470px) and (orientation: portrait) {
.ea-radon-hero {
padding: calc(177.78vw + 10px) 12px 20px;
}
.ea-radon-hero__content {
padding: 21px 18px 21px;
}
.ea-radon-hero__title {
font-size: clamp(27px, 7.6vw, 30px) !important;
}
.ea-radon-hero__lead {
font-size: 15px !important;
}
.ea-radon-hero__text {
font-size: 13px !important;
}
.ea-radon-hero__message {
font-size: 13px !important;
}
}
/* ==========================================================
PHONE LANDSCAPE
========================================================== */
@media (max-width: 900px) and (orientation: landscape) {
.ea-radon-hero {
min-height: 620px;
display: flex;
align-items: flex-end;
padding: 30px 5vw;
background-image:
linear-gradient(
90deg,
rgba(2, 5, 8, 0.52) 0%,
rgba(2, 5, 8, 0.10) 55%,
rgba(2, 5, 8, 0.00) 100%
),
url("https://www.eaelektronika.com/image/catalog/banner/final-hero-background-radon.png_compress.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.ea-radon-hero__content {
width: min(470px, 58vw);
transform: none;
}
.ea-radon-hero__title {
font-size: 34px !important;
}
}
/* ==========================================================
ACCESSIBILITY
========================================================== */
@media (prefers-reduced-motion: reduce) {
.ea-radon-hero {
background-attachment: scroll;
}
.ea-radon-hero__button {
transition: none;
}
}
/* ==========================================================
PRODUCT CARDS – MOBILE IMAGE AREA
GLOBALNO ZA VSE PRODUKTNE KARTICE
========================================================== */
@media (max-width: 760px) {
.product-thumb .image,
.product-thumb a.product-img,
.product-thumb a.product-img > div {
background: #ffffff !important;
}
.product-thumb a.product-img > div {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 320px;
box-sizing: border-box;
padding: 10px 12px !important;
overflow: hidden;
}
.product-thumb a.product-img img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 300px !important;
margin: auto !important;
object-fit: contain !important;
}
}
/* ==========================================================
RADON BLOG – HOMEPAGE
Module: Blog o radonu
========================================================== */
.module-blog_posts-341 .post-thumb {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border: 1px solid #e0e4e7;
border-radius: 10px;
box-shadow:
0 4px 14px rgba(20, 42, 63, 0.04);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
/* ----------------------------------------------------------
CARD HOVER
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb:hover {
transform: translateY(-4px);
border-color: rgba(244, 130, 0, 0.35);
box-shadow:
0 12px 28px rgba(20, 42, 63, 0.10);
}
/* ----------------------------------------------------------
IMAGE
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb .image {
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
background: #ffffff;
}
.module-blog_posts-341 .post-thumb .image img {
display: block;
width: 100%;
height: auto;
transition: transform 0.35s ease;
}
.module-blog_posts-341 .post-thumb:hover .image img {
transform: scale(1.025);
}
/* ----------------------------------------------------------
CONTENT AREA
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb .caption {
flex: 1;
display: flex;
flex-direction: column;
padding: 18px 20px 20px !important;
text-align: left !important;
}
/* ----------------------------------------------------------
POST TITLE
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb .name,
.module-blog_posts-341 .post-thumb .post-title,
.module-blog_posts-341 .post-thumb h4 {
margin: 0 0 10px !important;
text-align: left !important;
}
.module-blog_posts-341 .post-thumb .name a,
.module-blog_posts-341 .post-thumb .post-title a,
.module-blog_posts-341 .post-thumb h4 a {
color: #233851 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-align: left !important;
text-decoration: none !important;
transition: color 0.18s ease;
}
.module-blog_posts-341 .post-thumb .name a:hover,
.module-blog_posts-341 .post-thumb .post-title a:hover,
.module-blog_posts-341 .post-thumb h4 a:hover {
color: #f58200 !important;
}
/* ----------------------------------------------------------
DESCRIPTION
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb .description {
margin: 0 0 16px !important;
color: #68727c !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-align: left !important;
}
.module-blog_posts-341 .post-thumb .description p {
margin: 0 !important;
text-align: left !important;
}
/* ----------------------------------------------------------
READ MORE
---------------------------------------------------------- */
.module-blog_posts-341 .post-thumb .button-group {
margin-top: auto !important;
text-align: left !important;
}
.module-blog_posts-341 .post-thumb .button-group .btn {
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 4px 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #f58200 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-transform: uppercase;
transition:
color 0.18s ease,
transform 0.18s ease;
}
.module-blog_posts-341 .post-thumb .button-group .btn:hover {
color: #d96f00 !important;
transform: translateX(3px);
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (max-width: 1024px) {
.module-blog_posts-341 .post-thumb .caption {
padding: 17px 18px 19px !important;
}
.module-blog_posts-341 .post-thumb .name a,
.module-blog_posts-341 .post-thumb .post-title a,
.module-blog_posts-341 .post-thumb h4 a {
font-size: 17px !important;
}
}
/* ----------------------------------------------------------
PHONE
---------------------------------------------------------- */
@media (max-width: 760px) {
.module-blog_posts-341 .post-thumb {
border-radius: 9px;
}
.module-blog_posts-341 .post-thumb .caption {
padding: 16px 17px 18px !important;
}
.module-blog_posts-341 .post-thumb .name,
.module-blog_posts-341 .post-thumb .post-title,
.module-blog_posts-341 .post-thumb h4 {
margin-bottom: 9px !important;
}
.module-blog_posts-341 .post-thumb .name a,
.module-blog_posts-341 .post-thumb .post-title a,
.module-blog_posts-341 .post-thumb h4 a {
font-size: 17px !important;
line-height: 1.32 !important;
}
.module-blog_posts-341 .post-thumb .description {
margin-bottom: 14px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.module-blog_posts-341 .post-thumb .button-group .btn {
font-size: 14px !important;
}
}
/* ==========================================================
EA ELEKTRONIKA
KOLOIDNO HERO NEW
========================================================== */
.ea-colloid-hero {
--ea-colloid-navy: #123f4d;
--ea-colloid-green: #169bb5;
--ea-colloid-green-dark: #17677a;
--ea-colloid-text: #35545d;
position: relative;
isolation: isolate;
display: flex;
align-items: center;
width: calc(100% - 56px);
max-width: 1880px;
min-height: clamp(510px, 31vw, 620px);
box-sizing: border-box;
margin: 28px auto 24px;
padding: 52px 58px 54px;
overflow: hidden;
color: var(--ea-colloid-navy);
background-color: #f8fafb;
background-image: url("https://www.eaelektronika.com/image/catalog/banner/koloidi-new-hero-updated-desktop.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid rgba(35, 56, 81, 0.09);
border-radius: 22px;
box-shadow: 0 13px 35px rgba(26, 47, 68, 0.08);
}
.ea-colloid-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(245, 253, 254, 0.22) 0%,
rgba(245, 253, 254, 0.14) 30%,
rgba(245, 253, 254, 0.08) 44%,
rgba(245, 253, 254, 0.03) 55%,
rgba(245, 253, 254, 0) 68%
);
}
.ea-colloid-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: inherit;
}
.ea-colloid-hero__content {
position: relative;
z-index: 2;
width: 48%;
max-width: 680px;
box-sizing: border-box;
margin: 0;
padding: 0 18px 0 0;
text-align: left;
}
.ea-colloid-hero__title {
margin: 0 0 13px !important;
padding: 0 !important;
color: var(--ea-colloid-navy) !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(42px, 3.15vw, 60px) !important;
font-weight: 900 !important;
line-height: 0.98 !important;
letter-spacing: -0.04em !important;
text-transform: uppercase;
}
.ea-colloid-hero__divider {
width: 72px;
height: 4px;
margin: 0 0 19px;
background: linear-gradient(90deg, #169bb5 0%, #57c7d9 100%);
border-radius: 4px;
}
.ea-colloid-hero__subtitle {
max-width: 620px;
margin: 0 0 20px !important;
padding: 0 !important;
color: var(--ea-colloid-green-dark) !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(20px, 1.45vw, 26px) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
}
.ea-colloid-hero__lead {
max-width: 590px;
margin: 0 0 10px !important;
padding: 0 !important;
color: var(--ea-colloid-navy) !important;
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
}
.ea-colloid-hero__text {
max-width: 630px;
margin: 0 0 28px !important;
padding: 0 !important;
color: var(--ea-colloid-text) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.58 !important;
}
.ea-colloid-hero__actions {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0;
}
.ea-colloid-hero__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
min-width: 250px;
min-height: 56px;
box-sizing: border-box;
padding: 14px 30px;
color: #ffffff !important;
background: linear-gradient(135deg, #087d9c 0%, #0b9fba 100%) !important;
border: 1px solid rgba(5, 105, 130, 0.35) !important;
border-radius: 7px;
box-shadow: 0 8px 20px rgba(4, 104, 132, 0.18), 0 2px 5px rgba(4, 76, 96, 0.12);
font-family: "Montserrat", sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.025em;
text-align: center;
text-decoration: none !important;
text-shadow: none !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ea-colloid-hero__button-arrow {
display: inline-block;
font-size: 26px;
font-weight: 400;
line-height: 0;
transition: transform 0.18s ease;
}
.ea-colloid-hero__button:hover,
.ea-colloid-hero__button:focus {
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 11px 25px rgba(4, 104, 132, 0.24), 0 3px 7px rgba(4, 76, 96, 0.14);
}
.ea-colloid-hero__button:hover .ea-colloid-hero__button-arrow,
.ea-colloid-hero__button:focus .ea-colloid-hero__button-arrow {
transform: translateX(4px);
}
@media (min-width: 1600px) {
.ea-colloid-hero {
min-height: 600px;
padding-right: 68px;
padding-left: 68px;
background-size: cover;
}
.ea-colloid-hero__content {
max-width: 710px;
}
.ea-colloid-hero__lead {
font-size: 20px !important;
}
.ea-colloid-hero__text {
font-size: 16.5px !important;
}
}
@media (max-width: 1200px) {
.ea-colloid-hero {
width: calc(100% - 32px);
min-height: 550px;
margin: 18px auto 20px;
padding: 40px 38px 42px;
background-position: center center;
background-size: cover;
border-radius: 18px;
}
.ea-colloid-hero::before {
background: linear-gradient(
90deg,
rgba(245, 253, 254, 0.24) 0%,
rgba(245, 253, 254, 0.16) 39%,
rgba(245, 253, 254, 0.09) 52%,
rgba(245, 253, 254, 0.03) 65%,
rgba(245, 253, 254, 0) 77%
);
}
.ea-colloid-hero__content {
width: 53%;
max-width: 540px;
padding-right: 10px;
}
.ea-colloid-hero__title {
font-size: clamp(37px, 4.2vw, 48px) !important;
}
.ea-colloid-hero__subtitle {
margin-bottom: 17px !important;
font-size: 20px !important;
}
.ea-colloid-hero__lead {
font-size: 17px !important;
}
.ea-colloid-hero__text {
margin-bottom: 24px !important;
font-size: 14.5px !important;
line-height: 1.52 !important;
}
}
@media (max-width: 760px) and (orientation: portrait) {
.ea-colloid-hero {
display: block;
width: calc(100% - 24px);
min-height: 0;
margin: 12px auto 18px;
padding: 27px 20px clamp(390px, 112vw, 535px);
background-color: #f8fafb;
background-image: url("https://www.eaelektronika.com/image/catalog/banner/koloidi-new-hero-updated-mobile.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
border-radius: 16px;
box-shadow: 0 9px 26px rgba(26, 47, 68, 0.08);
}
.ea-colloid-hero::before {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.92) 38%,
rgba(255, 255, 255, 0.76) 49%,
rgba(255, 255, 255, 0.34) 60%,
rgba(255, 255, 255, 0) 73%
);
}
.ea-colloid-hero__content {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.ea-colloid-hero__title {
margin-bottom: 11px !important;
font-size: clamp(32px, 9.2vw, 39px) !important;
line-height: 1 !important;
}
.ea-colloid-hero__divider {
width: 62px;
margin-bottom: 16px;
}
.ea-colloid-hero__subtitle {
margin-bottom: 16px !important;
font-size: 18.5px !important;
line-height: 1.28 !important;
}
.ea-colloid-hero__lead {
margin-bottom: 8px !important;
font-size: 16px !important;
line-height: 1.43 !important;
}
.ea-colloid-hero__text {
max-width: none;
margin-bottom: 22px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.ea-colloid-hero__actions {
display: block;
}
.ea-colloid-hero__button {
width: 100%;
max-width: 340px;
min-width: 0;
min-height: 54px;
padding: 13px 24px;
font-size: 14px !important;
}
}
@media (max-width: 470px) and (orientation: portrait) {
.ea-colloid-hero {
width: calc(100% - 20px);
padding: 23px 17px clamp(355px, 108vw, 475px);
border-radius: 14px;
}
.ea-colloid-hero__title {
font-size: clamp(29px, 8.8vw, 34px) !important;
}
.ea-colloid-hero__subtitle {
font-size: 17px !important;
}
.ea-colloid-hero__lead {
font-size: 15px !important;
}
.ea-colloid-hero__text {
margin-bottom: 19px !important;
font-size: 13.5px !important;
line-height: 1.47 !important;
}
.ea-colloid-hero__button {
max-width: none;
font-size: 13.5px !important;
}
}
@media (max-width: 900px) and (orientation: landscape) {
.ea-colloid-hero {
display: flex;
align-items: center;
width: calc(100% - 28px);
min-height: 500px;
margin: 14px auto 18px;
padding: 32px 35px;
background-image: url("https://www.eaelektronika.com/image/catalog/banner/koloidi-new-hero-updated-desktop.png");
background-position: center center;
background-size: cover;
}
.ea-colloid-hero::before {
background: linear-gradient(
90deg,
rgba(245, 253, 254, 0.24) 0%,
rgba(245, 253, 254, 0.14) 42%,
rgba(245, 253, 254, 0.05) 58%,
rgba(245, 253, 254, 0) 73%
);
}
.ea-colloid-hero__content {
width: 53%;
max-width: 480px;
}
.ea-colloid-hero__title {
font-size: 35px !important;
}
.ea-colloid-hero__subtitle {
font-size: 17px !important;
}
.ea-colloid-hero__lead {
font-size: 15px !important;
}
.ea-colloid-hero__text {
font-size: 13px !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.3
CONTINUOUS BACKGROUND + BLOG ALIGNMENT
CONFIRMED:
ROW 8 = HERO
ROW 9 = PRODUCTS
ROW 10 = BLOG
IMPORTANT:
- DOES NOT CHANGE TYPOGRAPHY, TEXT COLORS OR BUTTONS
- DOES NOT CHANGE PRODUCT/BLOG CARD CONTENT STYLES
- DOES NOT SET .swiper / .swiper-slide / .grid-item WIDTHS
- HERO INTERNAL STYLING REMAINS UNTOUCHED
========================================================= */
/* ---------------------------------------------------------
REMOVE OLD EXPERIMENTAL PSEUDO PANELS
--------------------------------------------------------- */
.grid-row.grid-row-top-8::before,
.grid-row.grid-row-top-8::after,
.grid-row.grid-row-top-9::before,
.grid-row.grid-row-top-9::after,
.grid-row.grid-row-top-10::before,
.grid-row.grid-row-top-10::after,
.module-products-234::before,
.module-products-234::after,
.module-blog_posts-40::before,
.module-blog_posts-40::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------
ONE EXACT BASE COLOR FOR HERO + PRODUCTS + BLOG
This removes the visible color seam below the hero.
--------------------------------------------------------- */
.grid-row.grid-row-top-8,
.grid-row.grid-row-top-9,
.grid-row.grid-row-top-10 {
position: relative !important;
isolation: isolate;
background-color: #eef7f9 !important;
border: 0 !important;
overflow: visible !important;
}
/* HERO ROW:
same #eef7f9 base as ROW 9, with only transparent ambient light */
.grid-row.grid-row-top-8 {
background-image:
radial-gradient(
ellipse at 12% 18%,
rgba(74, 193, 215, 0.17) 0%,
rgba(74, 193, 215, 0.075) 30%,
rgba(74, 193, 215, 0) 58%
),
radial-gradient(
ellipse at 90% 22%,
rgba(140, 198, 63, 0.055) 0%,
rgba(140, 198, 63, 0) 42%
),
linear-gradient(
180deg,
#eef7f9 0%,
#eef7f9 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
/* PRODUCTS ROW:
identical base, slightly cooler ambient light */
.grid-row.grid-row-top-9 {
background-image:
radial-gradient(
ellipse at 13% 26%,
rgba(74, 193, 215, 0.10) 0%,
rgba(74, 193, 215, 0) 46%
),
radial-gradient(
ellipse at 88% 72%,
rgba(140, 198, 63, 0.035) 0%,
rgba(140, 198, 63, 0) 42%
),
linear-gradient(
180deg,
#eef7f9 0%,
#eef7f9 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(31, 91, 108, 0.028) !important;
}
/* BLOG ROW:
begins with the exact same #eef7f9 and only fades out near the end */
.grid-row.grid-row-top-10 {
background-image:
radial-gradient(
ellipse at 86% 72%,
rgba(140, 198, 63, 0.055) 0%,
rgba(140, 198, 63, 0) 44%
),
radial-gradient(
ellipse at 10% 30%,
rgba(74, 193, 215, 0.065) 0%,
rgba(74, 193, 215, 0) 46%
),
linear-gradient(
180deg,
#eef7f9 0%,
#eef7f9 52%,
#f5fafb 82%,
#fbfcfd 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 26px 58px rgba(18, 48, 61, 0.05) !important;
}
/* ---------------------------------------------------------
TRANSPARENT JOURNAL WRAPPERS
Geometry remains unchanged.
--------------------------------------------------------- */
.grid-row.grid-row-top-8 > .grid-cols,
.grid-row.grid-row-top-8 > .grid-cols > .grid-col,
.grid-row.grid-row-top-8 .grid-items,
.grid-row.grid-row-top-8 .grid-item,
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-9 > .grid-cols > .grid-col,
.grid-row.grid-row-top-9 .grid-items,
.grid-row.grid-row-top-9 .grid-item,
.grid-row.grid-row-top-10 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols > .grid-col,
.grid-row.grid-row-top-10 .grid-items,
.grid-row.grid-row-top-10 .grid-item {
background-color: transparent !important;
background-image: none !important;
}
/* Module shells transparent.
Titles, text and card internals are deliberately untouched. */
.module-products-234,
.module-products-234 .module-body,
.module-products-234 .module-item,
.module-blog_posts-40,
.module-blog_posts-40 .module-body,
.module-blog_posts-40 .module-item {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
BLOG ALIGNMENT
Frontend screenshot shows ROW 10 about 16px wider on each side.
Center the OUTER blog module only; no slide-width CSS is used.
--------------------------------------------------------- */
.module-blog_posts-40 {
box-sizing: border-box !important;
margin-left: 16px !important;
margin-right: 16px !important;
}
/* ---------------------------------------------------------
CARD DEPTH ONLY
No typography, text color or content changes.
--------------------------------------------------------- */
.module-products-234 .product-thumb {
box-shadow:
0 4px 0 rgba(18, 69, 84, 0.055),
0 13px 28px rgba(18, 48, 61, 0.095),
0 26px 48px rgba(18, 48, 61, 0.055) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease !important;
}
.module-blog_posts-40 .post-thumb {
box-shadow:
0 4px 0 rgba(18, 69, 84, 0.045),
0 12px 26px rgba(18, 48, 61, 0.085),
0 24px 44px rgba(18, 48, 61, 0.05) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease !important;
}
/* ---------------------------------------------------------
DESKTOP HOVER
--------------------------------------------------------- */
@media (min-width: 1025px) {
.module-products-234 .product-thumb:hover {
transform: translateY(-6px);
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.05),
0 18px 36px rgba(18, 48, 61, 0.125),
0 34px 60px rgba(18, 48, 61, 0.075) !important;
}
.module-blog_posts-40 .post-thumb:hover {
transform: translateY(-5px);
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.045),
0 17px 34px rgba(18, 48, 61, 0.11),
0 31px 56px rgba(18, 48, 61, 0.07) !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.module-blog_posts-40 {
margin-left: 12px !important;
margin-right: 12px !important;
}
.module-products-234 .product-thumb,
.module-blog_posts-40 .post-thumb {
box-shadow:
0 3px 0 rgba(18, 69, 84, 0.045),
0 9px 20px rgba(18, 48, 61, 0.07),
0 18px 34px rgba(18, 48, 61, 0.042) !important;
}
}
/* ---------------------------------------------------------
MOBILE
Same continuous color field, smaller blog alignment inset.
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-8,
.grid-row.grid-row-top-9 {
background-image:
linear-gradient(
180deg,
#eef7f9 0%,
#eef7f9 100%
) !important;
}
.grid-row.grid-row-top-10 {
background-image:
linear-gradient(
180deg,
#eef7f9 0%,
#eef7f9 64%,
#fbfcfd 100%
) !important;
box-shadow:
0 18px 38px rgba(18, 48, 61, 0.038) !important;
}
.module-blog_posts-40 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.module-products-234 .product-thumb,
.module-blog_posts-40 .post-thumb {
transform: none !important;
box-shadow:
0 2px 0 rgba(18, 69, 84, 0.04),
0 7px 15px rgba(18, 48, 61, 0.055),
0 14px 26px rgba(18, 48, 61, 0.035) !important;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.module-products-234 .product-thumb,
.module-blog_posts-40 .post-thumb {
transition: none !important;
}
.module-products-234 .product-thumb:hover,
.module-blog_posts-40 .post-thumb:hover {
transform: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.4 – EYE-CATCHING RESPONSIVE POLISH
Goals:
- Blog outer alignment: 20px on desktop
- Clearly rounded blog cards
- Softer, organic 3D instead of straight rectangular feel
- Rounded, tactile blog buttons
- One continuous colloidal stage
- No carousel/grid width changes
========================================================= */
/* ---------------------------------------------------------
CONTINUOUS STAGE – SOFT SIDE DEPTH
Makes ROW 8/9/10 feel like one luminous environment.
--------------------------------------------------------- */
.grid-row.grid-row-top-8 {
box-shadow:
inset 26px 0 42px -40px rgba(15, 142, 170, 0.20),
inset -26px 0 42px -40px rgba(15, 142, 170, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
.grid-row.grid-row-top-9 {
box-shadow:
inset 26px 0 42px -40px rgba(15, 142, 170, 0.18),
inset -26px 0 42px -40px rgba(15, 142, 170, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(31, 91, 108, 0.028) !important;
}
.grid-row.grid-row-top-10 {
box-shadow:
inset 26px 0 42px -40px rgba(15, 142, 170, 0.15),
inset -26px 0 42px -40px rgba(140, 198, 63, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.26),
0 28px 60px rgba(18, 48, 61, 0.055) !important;
}
/* ---------------------------------------------------------
BLOG ALIGNMENT
User-requested desktop inset: 20px.
--------------------------------------------------------- */
.module-blog_posts-40 {
margin-left: 20px !important;
margin-right: 20px !important;
}
/* ---------------------------------------------------------
PRODUCT CARDS – MORE ORGANIC 3D SHAPE
No width changes.
--------------------------------------------------------- */
.module-products-234 .product-thumb {
position: relative !important;
border:
1px solid rgba(24, 76, 92, 0.13) !important;
border-radius:
20px !important;
overflow:
hidden !important;
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.055),
0 14px 30px rgba(18, 48, 61, 0.10),
0 28px 52px rgba(18, 48, 61, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
/* Very subtle glossy highlight */
.module-products-234 .product-thumb::after {
content: "";
position: absolute;
z-index: 5;
top: 0;
right: 0;
left: 0;
height: 42px;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0) 100%
);
border-radius:
20px 20px 0 0;
}
/* ---------------------------------------------------------
BLOG CARDS – LARGE ROUNDED GLASS TILES
--------------------------------------------------------- */
.module-blog_posts-40 .post-thumb {
position: relative !important;
height: 100%;
display: flex;
flex-direction: column;
border:
1px solid rgba(24, 76, 92, 0.13) !important;
border-radius:
24px !important;
overflow:
hidden !important;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.995) 0%,
rgba(255, 255, 255, 0.985) 72%,
rgba(246, 251, 252, 0.995) 100%
) !important;
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.048),
0 14px 30px rgba(18, 48, 61, 0.095),
0 28px 52px rgba(18, 48, 61, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
/* Blog image follows the rounded card shape */
.module-blog_posts-40 .post-thumb .image {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius:
23px 23px 0 0 !important;
}
.module-blog_posts-40 .post-thumb .image img {
display: block;
width: 100%;
height: auto;
transition:
transform 0.38s ease,
filter 0.38s ease;
}
/* Proper internal breathing room */
.module-blog_posts-40 .post-thumb .caption {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding:
20px 22px 22px !important;
}
/* Push CTA to same visual baseline */
.module-blog_posts-40 .post-thumb .button-group {
margin-top: auto !important;
padding-top: 8px;
text-align: center !important;
}
/* ---------------------------------------------------------
BLOG CTA – ROUNDED COLLOIDAL BUTTON
Applies to the Journal button inside these blog cards only.
--------------------------------------------------------- */
.module-blog_posts-40 .post-thumb .button-group .btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 150px !important;
min-height: 42px !important;
box-sizing: border-box;
margin: 0 !important;
padding: 10px 18px !important;
color: #17485a !important;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(231, 247, 250, 0.98) 100%
) !important;
border:
1px solid rgba(15, 142, 170, 0.30) !important;
border-radius:
999px !important;
box-shadow:
0 3px 0 rgba(15, 142, 170, 0.11),
0 9px 18px rgba(18, 48, 61, 0.08) !important;
transition:
transform 0.18s ease,
color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease !important;
}
/* ---------------------------------------------------------
DESKTOP – MORE DYNAMIC, BUT STILL PREMIUM
--------------------------------------------------------- */
@media (min-width: 1025px) {
.module-products-234 .product-thumb:hover {
transform:
translateY(-8px) scale(1.006);
border-color:
rgba(15, 142, 170, 0.30) !important;
box-shadow:
0 6px 0 rgba(18, 69, 84, 0.05),
0 21px 42px rgba(18, 48, 61, 0.14),
0 40px 70px rgba(18, 48, 61, 0.085),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-40 .post-thumb:hover {
transform:
translateY(-7px) scale(1.005);
border-color:
rgba(140, 198, 63, 0.30) !important;
box-shadow:
0 6px 0 rgba(18, 69, 84, 0.045),
0 20px 40px rgba(18, 48, 61, 0.13),
0 38px 66px rgba(18, 48, 61, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-40 .post-thumb:hover .image img {
transform:
scale(1.035);
filter:
saturate(1.035) contrast(1.015);
}
.module-blog_posts-40 .post-thumb .button-group .btn:hover {
color:
#ffffff !important;
background:
linear-gradient(
135deg,
#0d8eaa 0%,
#18a6bd 100%
) !important;
box-shadow:
0 4px 0 rgba(7, 101, 124, 0.15),
0 13px 24px rgba(15, 142, 170, 0.22) !important;
transform:
translateY(-2px);
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.module-blog_posts-40 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.module-products-234 .product-thumb {
border-radius:
17px !important;
}
.module-products-234 .product-thumb::after {
border-radius:
17px 17px 0 0;
}
.module-blog_posts-40 .post-thumb {
border-radius:
20px !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius:
19px 19px 0 0 !important;
}
.module-blog_posts-40 .post-thumb .caption {
padding:
18px 19px 20px !important;
}
.module-blog_posts-40 .post-thumb .button-group .btn {
min-height:
40px !important;
padding:
9px 16px !important;
}
}
/* ---------------------------------------------------------
MOBILE
Responsive means a deliberate mobile design, not a scaled desktop.
--------------------------------------------------------- */
@media (max-width: 760px) {
.module-blog_posts-40 {
margin-left: 12px !important;
margin-right: 12px !important;
}
.grid-row.grid-row-top-8,
.grid-row.grid-row-top-9,
.grid-row.grid-row-top-10 {
box-shadow:
inset 14px 0 24px -24px rgba(15, 142, 170, 0.12),
inset -14px 0 24px -24px rgba(15, 142, 170, 0.09) !important;
}
.grid-row.grid-row-top-10 {
box-shadow:
inset 14px 0 24px -24px rgba(15, 142, 170, 0.10),
inset -14px 0 24px -24px rgba(140, 198, 63, 0.07),
0 16px 34px rgba(18, 48, 61, 0.035) !important;
}
.module-products-234 .product-thumb {
transform:
none !important;
border-radius:
15px !important;
box-shadow:
0 3px 0 rgba(18, 69, 84, 0.04),
0 8px 18px rgba(18, 48, 61, 0.065),
0 16px 28px rgba(18, 48, 61, 0.04) !important;
}
.module-products-234 .product-thumb::after {
height:
28px;
border-radius:
15px 15px 0 0;
}
.module-blog_posts-40 .post-thumb {
transform:
none !important;
border-radius:
18px !important;
box-shadow:
0 3px 0 rgba(18, 69, 84, 0.04),
0 8px 18px rgba(18, 48, 61, 0.06),
0 16px 28px rgba(18, 48, 61, 0.038),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius:
17px 17px 0 0 !important;
}
.module-blog_posts-40 .post-thumb .caption {
padding:
16px 16px 18px !important;
}
.module-blog_posts-40 .post-thumb .button-group {
padding-top:
10px;
}
.module-blog_posts-40 .post-thumb .button-group .btn {
min-width:
140px !important;
min-height:
40px !important;
padding:
9px 15px !important;
border-radius:
999px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.module-blog_posts-40 {
margin-left: 10px !important;
margin-right: 10px !important;
}
.module-blog_posts-40 .post-thumb {
border-radius:
16px !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius:
15px 15px 0 0 !important;
}
.module-blog_posts-40 .post-thumb .caption {
padding:
15px 14px 16px !important;
}
.module-blog_posts-40 .post-thumb .button-group .btn {
min-width:
132px !important;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.module-products-234 .product-thumb,
.module-blog_posts-40 .post-thumb,
.module-blog_posts-40 .post-thumb .image img,
.module-blog_posts-40 .post-thumb .button-group .btn {
transition:
none !important;
}
.module-products-234 .product-thumb:hover,
.module-blog_posts-40 .post-thumb:hover,
.module-blog_posts-40 .post-thumb .button-group .btn:hover {
transform:
none !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.5 – HERO WIDTH ALIGNMENT
Goal:
- ROW 9 Products and ROW 10 Blog use the SAME outer width
as the approved hero
- Keep native Journal carousel geometry inside that width
- No .swiper / .swiper-slide / .grid-item width rules
========================================================= */
/* ---------------------------------------------------------
DESKTOP / LARGE SCREENS
Match hero: width calc(100% - 56px), max-width 1880px
--------------------------------------------------------- */
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols {
width: calc(100% - 56px) !important;
max-width: 1880px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Both modules now share exactly the same parent width.
Remove the extra blog-only outer inset from v5.4. */
.module-blog_posts-40 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
Match hero breakpoint: calc(100% - 32px)
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols {
width: calc(100% - 32px) !important;
}
}
/* ---------------------------------------------------------
MOBILE PORTRAIT
Match hero: calc(100% - 24px)
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols {
width: calc(100% - 24px) !important;
}
.module-blog_posts-40 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
Match hero: calc(100% - 20px)
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols {
width: calc(100% - 20px) !important;
}
}
/* ---------------------------------------------------------
PHONE LANDSCAPE
Match hero: calc(100% - 28px)
--------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
.grid-row.grid-row-top-9 > .grid-cols,
.grid-row.grid-row-top-10 > .grid-cols {
width: calc(100% - 28px) !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.6 – CONTENT ALIGNMENT REFINEMENT
Purpose:
- Product carousel/title slightly tighter than v5.5
- Blog title/cards visually aligned to the hero edges
- Compensates for Journal's different Products vs Blog
internal wrapper/gutter behavior
- No slide/card width rules
========================================================= */
/* ---------------------------------------------------------
DESKTOP
Product content needs only a small inward correction.
--------------------------------------------------------- */
.module-products-234 {
box-sizing: border-box !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Blog's Journal structure starts much farther left than Products.
Correct it asymmetrically so the visible title/cards line up
with the approved hero, without setting swiper/slide widths. */
.module-blog_posts-40 {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 52px !important;
padding-right: 20px !important;
}
/* Keep rounded Blog cards from v5.4/v5.5 */
.module-blog_posts-40 .post-thumb {
border-radius: 24px !important;
overflow: hidden !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius: 23px 23px 0 0 !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
Reduce the structural correction proportionally.
--------------------------------------------------------- */
@media (max-width: 1200px) {
.module-products-234 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.module-blog_posts-40 {
padding-left: 30px !important;
padding-right: 16px !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.module-products-234 {
padding-left: 6px !important;
padding-right: 6px !important;
}
.module-blog_posts-40 {
padding-left: 22px !important;
padding-right: 14px !important;
}
.module-blog_posts-40 .post-thumb {
border-radius: 20px !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius: 19px 19px 0 0 !important;
}
}
/* ---------------------------------------------------------
MOBILE
Keep the same visual alignment logic, but much lighter.
--------------------------------------------------------- */
@media (max-width: 760px) {
.module-products-234 {
padding-left: 4px !important;
padding-right: 4px !important;
}
.module-blog_posts-40 {
padding-left: 12px !important;
padding-right: 8px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.module-blog_posts-40 .post-thumb {
border-radius: 18px !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius: 17px 17px 0 0 !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.module-products-234 {
padding-left: 2px !important;
padding-right: 2px !important;
}
.module-blog_posts-40 {
padding-left: 8px !important;
padding-right: 6px !important;
}
.module-blog_posts-40 .post-thumb {
border-radius: 16px !important;
}
.module-blog_posts-40 .post-thumb .image {
border-radius: 15px 15px 0 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.7 – ROW 10 WIDTH + BOTTOM BREATHING SPACE
Fixes:
- ROW 10 Blog uses the SAME internal horizontal inset as ROW 9
- Removes the previous asymmetric Blog correction
- Adds visible breathing space below Blog cards
- No carousel / slide / grid-item width changes
========================================================= */
/* ---------------------------------------------------------
DESKTOP
Match Blog module inset to Products module inset.
--------------------------------------------------------- */
.module-products-234,
.module-blog_posts-40 {
box-sizing: border-box !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Remove any previous extra Blog-only tightening */
.module-blog_posts-40 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Give ROW 10 a proper visual ending below the cards */
.grid-row.grid-row-top-10 {
padding-bottom: 40px !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.module-products-234,
.module-blog_posts-40 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 32px !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.module-products-234,
.module-blog_posts-40 {
padding-left: 6px !important;
padding-right: 6px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 28px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.module-products-234,
.module-blog_posts-40 {
padding-left: 4px !important;
padding-right: 4px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 22px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.module-products-234,
.module-blog_posts-40 {
padding-left: 2px !important;
padding-right: 2px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 18px !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.8 – ROW 10 WIDTH + DOUBLE BOTTOM SPACE
Fixes:
- ROW 10 Blog content is inset 20px more than ROW 9
to compensate for Journal's different Blog module structure
- ROW 10 bottom breathing space doubled
- No swiper / slide / grid-item width rules
========================================================= */
/* ---------------------------------------------------------
DESKTOP
ROW 9 stays at 12px.
ROW 10 gets +20px correction on both sides = 32px total.
--------------------------------------------------------- */
.module-products-234 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.module-blog_posts-40 {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Double the previous 40px bottom breathing room */
.grid-row.grid-row-top-10 {
padding-bottom: 80px !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.module-products-234 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.module-blog_posts-40 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 64px !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.module-products-234 {
padding-left: 6px !important;
padding-right: 6px !important;
}
.module-blog_posts-40 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 56px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.module-products-234 {
padding-left: 4px !important;
padding-right: 4px !important;
}
.module-blog_posts-40 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 44px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.module-products-234 {
padding-left: 2px !important;
padding-right: 2px !important;
}
.module-blog_posts-40 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.grid-row.grid-row-top-10 {
padding-bottom: 36px !important;
}
}
/* =========================================================
EA ELEKTRONIKA – COLLOIDAL EXPERIENCE
VERSION 5.9 – ENGLISH + TABLET LANDSCAPE
Goals:
- Make final colloidal styling language-independent by
targeting module TYPE inside confirmed ROW 9 / ROW 10.
- Preserve Slovenian styling.
- Fix tablet-landscape hero crop by keeping the full 3:1 banner.
- Keep carousel geometry native; tablet 3-items-per-row must
be set in Journal's Items per Row settings.
========================================================= */
/* =========================================================
LANGUAGE-INDEPENDENT MODULE TARGETS
Works for Slovenian and English even if module IDs differ.
========================================================= */
.grid-row.grid-row-top-9 .module-products,
.grid-row.grid-row-top-10 .module-blog_posts,
.grid-row.grid-row-top-9 .module-products .module-body,
.grid-row.grid-row-top-10 .module-blog_posts .module-body,
.grid-row.grid-row-top-9 .module-products .module-item,
.grid-row.grid-row-top-10 .module-blog_posts .module-item {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Desktop horizontal corrections – same final geometry as v5.8 */
.grid-row.grid-row-top-9 .module-products {
box-sizing: border-box !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.grid-row.grid-row-top-10 .module-blog_posts {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* =========================================================
LANGUAGE-INDEPENDENT PRODUCT CARDS
========================================================= */
.grid-row.grid-row-top-9 .module-products .product-thumb {
position: relative !important;
border: 1px solid rgba(24, 76, 92, 0.13) !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.055),
0 14px 30px rgba(18, 48, 61, 0.10),
0 28px 52px rgba(18, 48, 61, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
.grid-row.grid-row-top-9 .module-products .product-thumb::after {
content: "";
position: absolute;
z-index: 5;
top: 0;
right: 0;
left: 0;
height: 42px;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 20px 20px 0 0;
}
/* =========================================================
LANGUAGE-INDEPENDENT BLOG CARDS
========================================================= */
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb {
position: relative !important;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(24, 76, 92, 0.13) !important;
border-radius: 24px !important;
overflow: hidden !important;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.995) 0%,
rgba(255, 255, 255, 0.985) 72%,
rgba(246, 251, 252, 0.995) 100%
) !important;
box-shadow:
0 5px 0 rgba(18, 69, 84, 0.048),
0 14px 30px rgba(18, 48, 61, 0.095),
0 28px 52px rgba(18, 48, 61, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .image {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 23px 23px 0 0 !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .image img {
display: block;
width: 100%;
height: auto;
transition:
transform 0.38s ease,
filter 0.38s ease;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .caption {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20px 22px 22px !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .button-group {
margin-top: auto !important;
padding-top: 8px;
text-align: center !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .button-group .btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 150px !important;
min-height: 42px !important;
box-sizing: border-box;
margin: 0 !important;
padding: 10px 18px !important;
color: #17485a !important;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(231, 247, 250, 0.98) 100%
) !important;
border: 1px solid rgba(15, 142, 170, 0.30) !important;
border-radius: 999px !important;
box-shadow:
0 3px 0 rgba(15, 142, 170, 0.11),
0 9px 18px rgba(18, 48, 61, 0.08) !important;
transition:
transform 0.18s ease,
color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease !important;
}
/* =========================================================
DESKTOP HOVER – BOTH LANGUAGES
========================================================= */
@media (min-width: 1025px) {
.grid-row.grid-row-top-9 .module-products .product-thumb:hover {
transform: translateY(-8px) scale(1.006);
border-color: rgba(15, 142, 170, 0.30) !important;
box-shadow:
0 6px 0 rgba(18, 69, 84, 0.05),
0 21px 42px rgba(18, 48, 61, 0.14),
0 40px 70px rgba(18, 48, 61, 0.085),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb:hover {
transform: translateY(-7px) scale(1.005);
border-color: rgba(140, 198, 63, 0.30) !important;
box-shadow:
0 6px 0 rgba(18, 69, 84, 0.045),
0 20px 40px rgba(18, 48, 61, 0.13),
0 38px 66px rgba(18, 48, 61, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb:hover .image img {
transform: scale(1.035);
filter: saturate(1.035) contrast(1.015);
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .button-group .btn:hover {
color: #ffffff !important;
background:
linear-gradient(
135deg,
#0d8eaa 0%,
#18a6bd 100%
) !important;
box-shadow:
0 4px 0 rgba(7, 101, 124, 0.15),
0 13px 24px rgba(15, 142, 170, 0.22) !important;
transform: translateY(-2px);
}
}
/* =========================================================
TABLET LANDSCAPE HERO
3:1 source banner is shown fully – no cover crop.
Target includes iPad / iPad Pro landscape widths.
========================================================= */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) {
.ea-colloid-hero {
display: flex;
align-items: center;
width: calc(100% - 32px);
aspect-ratio: 3 / 1;
min-height: 0 !important;
height: auto !important;
margin: 16px auto 18px;
padding: 24px 30px 26px;
background-image:
url("https://www.eaelektronika.com/image/catalog/banner/koloidi-new-hero-updated-desktop.png");
background-repeat: no-repeat;
background-position: center center;
/* The source artwork is exactly 3:1, so this avoids truncation. */
background-size: 100% 100% !important;
border-radius: 18px;
}
.ea-colloid-hero::before {
background:
linear-gradient(
90deg,
rgba(245, 253, 254, 0.20) 0%,
rgba(245, 253, 254, 0.12) 40%,
rgba(245, 253, 254, 0.045) 58%,
rgba(245, 253, 254, 0) 74%
);
}
.ea-colloid-hero__content {
width: 50%;
max-width: 500px;
padding-right: 8px;
}
.ea-colloid-hero__title {
margin-bottom: 8px !important;
font-size: clamp(29px, 3.25vw, 40px) !important;
line-height: 1 !important;
}
.ea-colloid-hero__divider {
width: 56px;
height: 3px;
margin-bottom: 11px;
}
.ea-colloid-hero__subtitle {
margin-bottom: 11px !important;
font-size: clamp(15px, 1.65vw, 19px) !important;
line-height: 1.22 !important;
}
.ea-colloid-hero__lead {
margin-bottom: 6px !important;
font-size: clamp(13px, 1.35vw, 16px) !important;
line-height: 1.35 !important;
}
.ea-colloid-hero__text {
margin-bottom: 15px !important;
font-size: clamp(11px, 1.15vw, 13.5px) !important;
line-height: 1.42 !important;
}
.ea-colloid-hero__button {
min-width: 190px;
min-height: 44px;
padding: 10px 20px;
font-size: 12.5px !important;
}
.ea-colloid-hero__button-arrow {
font-size: 21px;
}
}
/* =========================================================
TABLET MODULE POLISH – BOTH LANGUAGES
Card COUNT remains controlled by Journal, not CSS.
========================================================= */
@media (max-width: 1366px) and (min-width: 761px) {
.grid-row.grid-row-top-9 .module-products {
padding-left: 8px !important;
padding-right: 8px !important;
}
.grid-row.grid-row-top-10 .module-blog_posts {
padding-left: 24px !important;
padding-right: 24px !important;
}
.grid-row.grid-row-top-9 .module-products .product-thumb {
border-radius: 17px !important;
box-shadow:
0 4px 0 rgba(18, 69, 84, 0.05),
0 11px 24px rgba(18, 48, 61, 0.085),
0 22px 42px rgba(18, 48, 61, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.grid-row.grid-row-top-9 .module-products .product-thumb::after {
border-radius: 17px 17px 0 0;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb {
border-radius: 20px !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .image {
border-radius: 19px 19px 0 0 !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .caption {
padding: 18px 19px 20px !important;
}
}
/* =========================================================
MOBILE – BOTH LANGUAGES
========================================================= */
@media (max-width: 760px) {
.grid-row.grid-row-top-9 .module-products {
padding-left: 4px !important;
padding-right: 4px !important;
}
.grid-row.grid-row-top-10 .module-blog_posts {
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.grid-row.grid-row-top-9 .module-products .product-thumb {
transform: none !important;
border-radius: 15px !important;
box-shadow:
0 3px 0 rgba(18, 69, 84, 0.04),
0 8px 18px rgba(18, 48, 61, 0.065),
0 16px 28px rgba(18, 48, 61, 0.04) !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb {
transform: none !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(18, 69, 84, 0.04),
0 8px 18px rgba(18, 48, 61, 0.06),
0 16px 28px rgba(18, 48, 61, 0.038),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .image {
border-radius: 17px 17px 0 0 !important;
}
.grid-row.grid-row-top-10 .module-blog_posts .post-thumb .caption {
padding: 16px 16px 18px !important;
}
}
/* =========================================================
EA ELEKTRONIKA – RADON EXPERIENCE
VERSION 6.0 – DARK GRAPHITE RESPONSIVE REDESIGN
Dynamic targeting:
- Radon Blog row = row containing .module-blog_posts-341
- Radon Products row = row immediately before that Blog row
- Radon Hero row = row containing .ea-radon-hero
Goals:
- Product + Blog sections aligned to Hero width
- Continuous dark graphite environment
- White / warm-gray section headings for contrast
- Orange radiation accent
- Premium rounded 3D cards
- Responsive without changing carousel/slide widths
IMPORTANT:
- NO .swiper width rules
- NO .swiper-slide width rules
- NO .grid-item width rules
- NO items-per-row changes
========================================================= */
/* ---------------------------------------------------------
RADON ROW IDENTIFICATION
--------------------------------------------------------- */
.grid-row:has(.ea-radon-hero),
.grid-row:has(+ .grid-row .module-blog_posts-341),
.grid-row:has(.module-blog_posts-341) {
--ea-radon-bg: #24282d;
--ea-radon-bg-deep: #1b1f23;
--ea-radon-panel: #2d3238;
--ea-radon-panel-soft: #343a40;
--ea-radon-text: #f5f7f8;
--ea-radon-muted: #c6ccd1;
--ea-radon-orange: #ff8a00;
--ea-radon-orange-soft: #ffad3d;
position: relative !important;
isolation: isolate;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* ---------------------------------------------------------
ONE DARK GRAPHITE ENVIRONMENT
--------------------------------------------------------- */
.grid-row:has(.ea-radon-hero) {
background:
radial-gradient(
ellipse at 12% 16%,
rgba(255, 138, 0, 0.11) 0%,
rgba(255, 138, 0, 0.035) 32%,
rgba(255, 138, 0, 0) 58%
),
linear-gradient(
180deg,
#171a1e 0%,
#20242a 100%
) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) {
background:
radial-gradient(
ellipse at 88% 22%,
rgba(255, 138, 0, 0.075) 0%,
rgba(255, 138, 0, 0) 43%
),
linear-gradient(
180deg,
#20242a 0%,
#24282d 100%
) !important;
padding-top: 34px !important;
}
.grid-row:has(.module-blog_posts-341) {
background:
radial-gradient(
ellipse at 10% 34%,
rgba(255, 138, 0, 0.06) 0%,
rgba(255, 138, 0, 0) 44%
),
radial-gradient(
ellipse at 88% 78%,
rgba(255, 173, 61, 0.035) 0%,
rgba(255, 173, 61, 0) 46%
),
linear-gradient(
180deg,
#24282d 0%,
#1f2328 76%,
#1a1e22 100%
) !important;
padding-bottom: 72px !important;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.18) !important;
}
/* ---------------------------------------------------------
SAME OUTER WIDTH FOR HERO / PRODUCTS / BLOG
--------------------------------------------------------- */
.ea-radon-hero,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width: calc(100% - 56px) !important;
max-width: 1880px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Hero becomes part of the same premium frame */
.ea-radon-hero {
margin-top: 28px !important;
margin-bottom: 22px !important;
border:
1px solid rgba(255, 255, 255, 0.075) !important;
border-radius:
24px !important;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.12),
0 22px 48px rgba(0, 0, 0, 0.26),
0 44px 88px rgba(0, 0, 0, 0.19) !important;
}
/* Transparent Journal wrappers inside the Radon stage */
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-items,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-item,
.grid-row:has(.module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(.module-blog_posts-341) .grid-items,
.grid-row:has(.module-blog_posts-341) .grid-item {
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
}
/* ---------------------------------------------------------
PRODUCT / BLOG MODULE SHELLS
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.module-blog_posts-341,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-body,
.module-blog_posts-341 .module-body,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item,
.module-blog_posts-341 .module-item {
background:
transparent !important;
background-color:
transparent !important;
background-image:
none !important;
border:
0 !important;
box-shadow:
none !important;
}
/* Small equal inset so both carousels align visually */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.module-blog_posts-341 {
box-sizing:
border-box !important;
padding-left:
14px !important;
padding-right:
14px !important;
}
/* ---------------------------------------------------------
SECTION HEADERS – CONTRAST FIX
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title {
position:
relative !important;
color:
var(--ea-radon-text) !important;
background:
transparent !important;
border:
0 !important;
box-shadow:
none !important;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.22) !important;
}
/* Replace the green underline with Radon orange */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title::after,
.module-blog_posts-341
.title.module-title::after {
background:
linear-gradient(
90deg,
var(--ea-radon-orange) 0%,
var(--ea-radon-orange-soft) 72%,
rgba(255, 173, 61, 0) 100%
) !important;
box-shadow:
0 2px 10px rgba(255, 138, 0, 0.22) !important;
}
/* ---------------------------------------------------------
PRODUCT CARDS – LIGHT LAB TILES ON DARK STAGE
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
position:
relative !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 73%,
#f7f8f9 100%
) !important;
border:
1px solid rgba(255, 255, 255, 0.13) !important;
border-radius:
20px !important;
overflow:
hidden !important;
box-shadow:
0 5px 0 rgba(0, 0, 0, 0.18),
0 16px 32px rgba(0, 0, 0, 0.24),
0 32px 58px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
/* Warm radiation highlight */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb::after {
content:
"";
position:
absolute;
z-index:
5;
top:
0;
left:
0;
right:
0;
height:
40px;
pointer-events:
none;
background:
linear-gradient(
180deg,
rgba(255, 169, 61, 0.10) 0%,
rgba(255, 169, 61, 0) 100%
);
border-radius:
20px 20px 0 0;
}
/* ---------------------------------------------------------
BLOG CARDS – PREMIUM ROUNDED LIGHT TILES
--------------------------------------------------------- */
.module-blog_posts-341 .post-thumb {
height:
100%;
display:
flex;
flex-direction:
column;
overflow:
hidden !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 74%,
#f6f7f8 100%
) !important;
border:
1px solid rgba(255, 255, 255, 0.12) !important;
border-radius:
22px !important;
box-shadow:
0 5px 0 rgba(0, 0, 0, 0.16),
0 15px 30px rgba(0, 0, 0, 0.22),
0 30px 54px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
.module-blog_posts-341 .post-thumb .image {
border-radius:
21px 21px 0 0 !important;
overflow:
hidden !important;
}
.module-blog_posts-341 .post-thumb .caption {
padding:
20px 22px 22px !important;
}
/* Blog CTA becomes a tactile orange pill */
.module-blog_posts-341 .post-thumb .button-group .btn {
min-width:
146px !important;
min-height:
42px !important;
display:
inline-flex !important;
align-items:
center;
justify-content:
center;
gap:
8px;
margin:
0 !important;
padding:
10px 18px !important;
color:
#171a1e !important;
background:
linear-gradient(
135deg,
#ffb13f 0%,
#ff8a00 100%
) !important;
border:
1px solid rgba(255, 160, 0, 0.48) !important;
border-radius:
999px !important;
box-shadow:
0 3px 0 rgba(118, 61, 0, 0.22),
0 10px 20px rgba(255, 138, 0, 0.16) !important;
font-weight:
800 !important;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease !important;
}
/* ---------------------------------------------------------
DESKTOP INTERACTION
--------------------------------------------------------- */
@media (min-width: 1025px) {
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb:hover {
transform:
translateY(-7px) scale(1.004);
border-color:
rgba(255, 138, 0, 0.34) !important;
box-shadow:
0 6px 0 rgba(0, 0, 0, 0.16),
0 22px 42px rgba(0, 0, 0, 0.29),
0 42px 72px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-341 .post-thumb:hover {
transform:
translateY(-7px) scale(1.004);
border-color:
rgba(255, 138, 0, 0.36) !important;
box-shadow:
0 6px 0 rgba(0, 0, 0, 0.15),
0 21px 40px rgba(0, 0, 0, 0.27),
0 40px 68px rgba(0, 0, 0, 0.17),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-341 .post-thumb .button-group .btn:hover {
transform:
translateY(-2px);
filter:
brightness(1.04);
box-shadow:
0 4px 0 rgba(118, 61, 0, 0.20),
0 14px 26px rgba(255, 138, 0, 0.24) !important;
}
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.ea-radon-hero,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width:
calc(100% - 32px) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products,
.module-blog_posts-341 {
padding-left:
10px !important;
padding-right:
10px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-bottom:
58px !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.ea-radon-hero {
border-radius:
20px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
border-radius:
17px !important;
}
.module-blog_posts-341 .post-thumb {
border-radius:
19px !important;
}
.module-blog_posts-341 .post-thumb .image {
border-radius:
18px 18px 0 0 !important;
}
.module-blog_posts-341 .post-thumb .caption {
padding:
18px 19px 20px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.ea-radon-hero,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width:
calc(100% - 24px) !important;
}
.ea-radon-hero {
border-radius:
16px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-top:
22px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-bottom:
42px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products,
.module-blog_posts-341 {
padding-left:
6px !important;
padding-right:
6px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
transform:
none !important;
border-radius:
15px !important;
box-shadow:
0 3px 0 rgba(0, 0, 0, 0.14),
0 9px 18px rgba(0, 0, 0, 0.20),
0 17px 30px rgba(0, 0, 0, 0.12) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb::after {
height:
28px;
border-radius:
15px 15px 0 0;
}
.module-blog_posts-341 .post-thumb {
transform:
none !important;
border-radius:
17px !important;
box-shadow:
0 3px 0 rgba(0, 0, 0, 0.13),
0 9px 18px rgba(0, 0, 0, 0.18),
0 17px 30px rgba(0, 0, 0, 0.11) !important;
}
.module-blog_posts-341 .post-thumb .image {
border-radius:
16px 16px 0 0 !important;
}
.module-blog_posts-341 .post-thumb .caption {
padding:
16px 16px 18px !important;
}
.module-blog_posts-341 .post-thumb .button-group .btn {
min-width:
136px !important;
min-height:
40px !important;
padding:
9px 15px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.ea-radon-hero,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width:
calc(100% - 20px) !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-bottom:
34px !important;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb,
.module-blog_posts-341 .post-thumb,
.module-blog_posts-341 .post-thumb .button-group .btn {
transition:
none !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb:hover,
.module-blog_posts-341 .post-thumb:hover,
.module-blog_posts-341 .post-thumb .button-group .btn:hover {
transform:
none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 6.1 – RADON WIDTH ALIGNMENT + UNIFIED HEADERS
Fixes:
- Radon Products and Blog sections use the same visual width
as the Radon hero.
- Removes unequal module-level insets that made the two
Radon sections look different in width.
- Product and Blog section headers use the SAME font size.
- The same header-size fix is applied to Colloidal.
- No carousel / swiper / slide / grid-item width rules.
========================================================= */
/* =========================================================
RADON – EXACT SECTION WIDTH ALIGNMENT
========================================================= */
/* Keep both Radon content rows on exactly the same outer rail
as the Radon hero. */
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width: calc(100% - 56px) !important;
max-width: 1880px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* The column and module shells must fill that rail completely. */
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(.module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.module-blog_posts-341 {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Remove the previous unequal outer correction.
Journal carousel padding remains responsible for the
internal card spacing. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.module-blog_posts-341 {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* One common visual inset for the two section titles. */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title {
margin-left: 14px !important;
margin-right: 14px !important;
}
/* =========================================================
RADON – UNIFIED PRODUCT / BLOG HEADER SIZE
========================================================= */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title {
font-size: 22px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
}
/* =========================================================
COLLOIDAL – UNIFIED PRODUCT / BLOG HEADER SIZE
========================================================= */
.module-products-234 .title.module-title,
.module-blog_posts-40 .title.module-title {
font-size: 22px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
}
/* =========================================================
TABLET / SMALL DESKTOP
========================================================= */
@media (max-width: 1200px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width: calc(100% - 32px) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title,
.module-products-234 .title.module-title,
.module-blog_posts-40 .title.module-title {
font-size: 20px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width: calc(100% - 24px) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title,
.module-products-234 .title.module-title,
.module-blog_posts-40 .title.module-title {
font-size: 17px !important;
line-height: 1.28 !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title {
margin-left: 8px !important;
margin-right: 8px !important;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media (max-width: 470px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(.module-blog_posts-341) > .grid-cols {
width: calc(100% - 20px) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title,
.module-products-234 .title.module-title,
.module-blog_posts-40 .title.module-title {
font-size: 16px !important;
}
}
/* =========================================================
EA ELEKTRONIKA – RATMAN UPPER EXPERIENCE
VERSION 6.2 – ROW 11 HERO SPLIT
CONFIRMED JOURNAL STRUCTURE:
ROW 11 = 45% TEXT / 55% EXISTING RATMAN VIDEO
ROW 12 = RATMAN PRODUCTS (NOT STYLED IN THIS VERSION)
DESIGN:
- full-width black / graphite Ratman environment
- left editorial text composition
- signature full-width yellow divider with bright flare
- existing video preserved on the right
- responsive 45/55 desktop, stacked <= 1024px
IMPORTANT:
- no product-card styling yet
- no carousel width rules
- no swiper / slide / grid-item width rules
========================================================= */
/* ---------------------------------------------------------
ROW 11 – FULL RATMAN STAGE
--------------------------------------------------------- */
.grid-row.grid-row-top-11 {
--ea-ratman-black: #070809;
--ea-ratman-graphite: #111316;
--ea-ratman-text: #f6f7f8;
--ea-ratman-muted: #c9cdd1;
--ea-ratman-yellow: #ffc400;
--ea-ratman-yellow-hot: #fff4b0;
--ea-ratman-orange: #ff9800;
position: relative !important;
isolation: isolate;
padding: 48px 0 44px !important;
background:
radial-gradient(
ellipse at 18% 44%,
rgba(255, 196, 0, 0.055) 0%,
rgba(255, 196, 0, 0.018) 34%,
rgba(255, 196, 0, 0) 58%
),
radial-gradient(
ellipse at 88% 20%,
rgba(255, 255, 255, 0.035) 0%,
rgba(255, 255, 255, 0) 46%
),
linear-gradient(
180deg,
#090a0b 0%,
#050607 100%
) !important;
border: 0 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 -1px 0 rgba(255, 196, 0, 0.05) !important;
overflow: hidden !important;
}
/* Subtle technical texture – no icons or decorative badges */
.grid-row.grid-row-top-11::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
pointer-events: none;
opacity: 0.20;
background-image:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.015) 1px,
transparent 1px
),
linear-gradient(
0deg,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px
);
background-size: 38px 38px;
mask-image:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.16) 42%,
rgba(0, 0, 0, 0) 72%
);
}
/* Content rail aligned with the premium homepage sections */
.grid-row.grid-row-top-11 > .grid-cols {
position: relative;
z-index: 1;
width: calc(100% - 56px) !important;
max-width: 1880px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
}
/* Journal wrappers stay neutral */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col,
.grid-row.grid-row-top-11 .grid-items,
.grid-row.grid-row-top-11 .grid-item,
.grid-row.grid-row-top-11 .module,
.grid-row.grid-row-top-11 .module-body,
.grid-row.grid-row-top-11 .module-item,
.grid-row.grid-row-top-11 .block-body,
.grid-row.grid-row-top-11 .block-wrapper,
.grid-row.grid-row-top-11 .block-content {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
45% LEFT COLUMN – TEXT AREA
--------------------------------------------------------- */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:first-child {
box-sizing: border-box !important;
padding: 12px 42px 12px 10px !important;
}
.ea-ratman-intro {
width: 100%;
max-width: 760px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: var(--ea-ratman-text);
text-align: left;
}
.ea-ratman-kicker {
margin: 0 0 14px;
color: var(--ea-ratman-yellow) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
}
.ea-ratman-title {
margin: 0 !important;
padding: 0 !important;
color: var(--ea-ratman-text) !important;
font-family: "Archivo Black", "Montserrat", sans-serif !important;
font-size: clamp(44px, 3.45vw, 68px) !important;
font-weight: 900 !important;
line-height: 0.98 !important;
letter-spacing: -0.035em !important;
text-transform: uppercase;
text-shadow:
0 4px 18px rgba(0, 0, 0, 0.36);
}
.ea-ratman-title > span {
display: block;
}
.ea-ratman-title-white {
color: #f7f7f5 !important;
}
.ea-ratman-title-yellow {
color: var(--ea-ratman-yellow) !important;
text-shadow:
0 0 20px rgba(255, 196, 0, 0.045),
0 4px 18px rgba(0, 0, 0, 0.38);
}
/* ---------------------------------------------------------
SIGNATURE FULL-WIDTH RATMAN DIVIDER + STATIC FLARE
Matches approved mockup: thin full-width yellow line with
one narrow, bright horizontal light burst. No animation.
--------------------------------------------------------- */
.ea-ratman-divider {
--ea-ratman-flare-x: 63%;
position: relative;
width: 100%;
height: 14px;
margin: 14px 0 18px;
overflow: visible;
pointer-events: none;
}
/* Full-width yellow line */
.ea-ratman-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1.5px;
transform: translateY(-50%);
background:
linear-gradient(
90deg,
rgba(255, 190, 0, 0.90) 0%,
#ffc400 12%,
#ffc400 88%,
rgba(255, 190, 0, 0.72) 100%
);
box-shadow:
0 0 3px rgba(255, 196, 0, 0.30),
0 0 7px rgba(255, 160, 0, 0.12);
}
/* Static narrow horizontal flare – no oval lens shape */
.ea-ratman-divider::after {
content: "";
position: absolute;
left: var(--ea-ratman-flare-x);
top: 50%;
width: 138px;
height: 8px;
transform: translate(-50%, -50%);
border-radius: 999px;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(255, 252, 218, 1) 6%,
rgba(255, 226, 90, 0.98) 14%,
rgba(255, 188, 0, 0.82) 28%,
rgba(255, 151, 0, 0.36) 48%,
rgba(255, 139, 0, 0.10) 68%,
rgba(255, 139, 0, 0) 100%
);
filter: blur(0.55px);
box-shadow:
0 0 4px rgba(255, 255, 232, 0.96),
0 0 10px rgba(255, 223, 92, 0.82),
0 0 20px rgba(255, 184, 0, 0.48),
0 0 34px rgba(255, 128, 0, 0.20);
animation: none !important;
}
/* ---------------------------------------------------------
BODY COPY
--------------------------------------------------------- */
.ea-ratman-text {
max-width: 680px;
margin: 0 0 24px !important;
color: var(--ea-ratman-muted) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
letter-spacing: -0.01em !important;
}
/* ---------------------------------------------------------
RATMAN CTA
--------------------------------------------------------- */
.ea-ratman-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 26px;
min-width: 286px;
min-height: 54px;
box-sizing: border-box;
padding: 13px 24px !important;
color: #111214 !important;
background:
linear-gradient(
135deg,
#ffd32a 0%,
#ffc400 58%,
#ffad00 100%
) !important;
border: 1px solid rgba(255, 214, 55, 0.70) !important;
border-radius: 7px !important;
box-shadow:
0 4px 0 rgba(116, 71, 0, 0.26),
0 12px 26px rgba(255, 174, 0, 0.18) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 15px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: 0.025em !important;
text-decoration: none !important;
text-transform: uppercase;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease !important;
}
.ea-ratman-button-arrow {
display: inline-flex;
font-size: 25px;
font-weight: 500;
line-height: 1;
transform: translateY(-1px);
}
/* ---------------------------------------------------------
55% RIGHT COLUMN – PRESERVE EXISTING VIDEO DESIGN
No decorative border is added.
--------------------------------------------------------- */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child {
box-sizing: border-box !important;
padding: 0 8px 0 18px !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child iframe,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child img {
max-width: 100%;
border: 0 !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
DESKTOP HOVER
--------------------------------------------------------- */
@media (min-width: 1025px) {
.ea-ratman-button:hover {
color: #090a0b !important;
filter: brightness(1.055);
transform: translateY(-3px);
box-shadow:
0 5px 0 rgba(116, 71, 0, 0.22),
0 17px 32px rgba(255, 174, 0, 0.28) !important;
}
}
/* ---------------------------------------------------------
SMALL DESKTOP / TABLET LANDSCAPE
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row.grid-row-top-11 {
padding: 38px 0 36px !important;
}
.grid-row.grid-row-top-11 > .grid-cols {
width: calc(100% - 32px) !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:first-child {
padding: 10px 28px 10px 6px !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child {
padding: 0 4px 0 14px !important;
}
.ea-ratman-kicker {
font-size: 12px !important;
}
.ea-ratman-title {
font-size: clamp(38px, 3.7vw, 54px) !important;
}
.ea-ratman-text {
font-size: 15px !important;
}
.ea-ratman-divider {
--ea-ratman-flare-x: 62%;
height: 13px;
margin: 13px 0 16px;
}
.ea-ratman-divider::after {
width: 120px;
height: 7px;
}
}
/* ---------------------------------------------------------
STACKED TABLET / MOBILE
Journal columns are already 100% at <= 1024px.
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row.grid-row-top-11 {
padding: 34px 0 34px !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:first-child,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:first-child {
padding-bottom: 30px !important;
}
.ea-ratman-intro {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.ea-ratman-title {
font-size: clamp(42px, 6.8vw, 64px) !important;
}
.ea-ratman-divider {
--ea-ratman-flare-x: 62%;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-11 {
padding: 27px 0 28px !important;
}
.grid-row.grid-row-top-11 > .grid-cols {
width: calc(100% - 24px) !important;
}
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:first-child {
padding-bottom: 24px !important;
}
.ea-ratman-kicker {
margin-bottom: 11px;
font-size: 10.5px !important;
letter-spacing: 0.095em !important;
}
.ea-ratman-title {
font-size: clamp(32px, 10vw, 47px) !important;
line-height: 1 !important;
}
.ea-ratman-divider {
--ea-ratman-flare-x: 60%;
height: 11px;
margin: 10px 0 15px;
}
.ea-ratman-divider::before {
height: 1px;
}
.ea-ratman-divider::after {
width: 92px;
height: 6px;
box-shadow:
0 0 3px rgba(255, 255, 232, 0.92),
0 0 8px rgba(255, 223, 92, 0.72),
0 0 16px rgba(255, 184, 0, 0.40),
0 0 26px rgba(255, 128, 0, 0.18);
}
.ea-ratman-text {
margin-bottom: 20px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.ea-ratman-button {
width: 100%;
min-width: 0;
min-height: 50px;
justify-content: space-between;
padding: 12px 19px !important;
font-size: 14px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row.grid-row-top-11 > .grid-cols {
width: calc(100% - 20px) !important;
}
.ea-ratman-title {
font-size: clamp(29px, 9.6vw, 40px) !important;
}
.ea-ratman-text br {
display: none;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ea-ratman-divider::after,
.ea-ratman-button {
animation: none !important;
transition: none !important;
}
.ea-ratman-button:hover {
transform: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA – RATMAN
VERSION 6.4 – APPROVED MOCKUP DIVIDER
Final divider treatment:
- static only
- full-width thin gold line
- no oval / capsule flare
- compact white-hot center
- long horizontal yellow-orange light spill
- flare position follows approved mockup
========================================================= */
.ea-ratman-divider {
--ea-ratman-flare-x: 67%;
position: relative;
width: 100%;
height: 14px;
margin: 14px 0 18px;
overflow: visible;
pointer-events: none;
}
/* Full-width line – same visual character as approved mockup */
.ea-ratman-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1.5px;
transform: translateY(-50%);
background:
linear-gradient(
90deg,
rgba(255, 174, 0, 0.68) 0%,
rgba(255, 190, 0, 0.95) 7%,
#ffc400 26%,
#ffc400 72%,
rgba(255, 184, 0, 0.90) 93%,
rgba(255, 160, 0, 0.58) 100%
);
box-shadow:
0 0 2px rgba(255, 196, 0, 0.55),
0 0 7px rgba(255, 151, 0, 0.18);
}
/* Approved mockup flare:
a tiny white-hot center with a long horizontal light spill.
No visible oval edge, no animation. */
.ea-ratman-divider::after {
content: "";
position: absolute;
left: var(--ea-ratman-flare-x);
top: 50%;
width: 164px;
height: 14px;
transform: translate(-50%, -50%);
background:
radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 1) 0,
rgba(255, 255, 244, 1) 1.5px,
rgba(255, 236, 128, 0.98) 3px,
rgba(255, 196, 0, 0.86) 5px,
rgba(255, 159, 0, 0.34) 8px,
rgba(255, 142, 0, 0) 12px
),
radial-gradient(
ellipse at 50% 50%,
rgba(255, 215, 57, 0.78) 0%,
rgba(255, 186, 0, 0.52) 18%,
rgba(255, 150, 0, 0.22) 42%,
rgba(255, 130, 0, 0.07) 62%,
rgba(255, 130, 0, 0) 78%
);
border: 0;
border-radius: 0;
filter: blur(0.15px);
box-shadow: none;
opacity: 1;
animation: none !important;
}
/* Tablet */
@media (max-width: 1024px) {
.ea-ratman-divider {
--ea-ratman-flare-x: 66%;
height: 13px;
margin: 13px 0 16px;
}
.ea-ratman-divider::after {
width: 142px;
height: 13px;
}
}
/* Mobile */
@media (max-width: 760px) {
.ea-ratman-divider {
--ea-ratman-flare-x: 64%;
height: 11px;
margin: 10px 0 15px;
}
.ea-ratman-divider::before {
height: 1px;
}
.ea-ratman-divider::after {
width: 112px;
height: 11px;
}
}
/* =========================================================
EA ELEKTRONIKA – RATMAN
VERSION 6.5 – APPROVED FLARE / LINE REFINEMENT
Changes:
- Static flare only
- Wider horizontal flare
- Main line becomes locally thicker/brighter around flare
- Keeps the thin full-width signature line elsewhere
========================================================= */
.ea-ratman-divider {
--ea-ratman-flare-x: 63%;
height: 15px;
margin: 14px 0 18px;
}
/* Thin full-width line + local thickened section around the flare */
.ea-ratman-divider::before {
top: 50%;
height: 7px;
transform: translateY(-50%);
background:
linear-gradient(
90deg,
rgba(255, 188, 0, 0.88) 0%,
rgba(255, 198, 0, 0.98) 12%,
#ffc400 50%,
rgba(255, 198, 0, 0.98) 88%,
rgba(255, 188, 0, 0.70) 100%
) center / 100% 1.5px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 249, 198, 0.95) 0%,
rgba(255, 224, 83, 0.88) 16%,
rgba(255, 190, 0, 0.68) 36%,
rgba(255, 154, 0, 0.30) 58%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 190px 7px no-repeat;
box-shadow:
0 0 3px rgba(255, 196, 0, 0.30),
0 0 7px rgba(255, 160, 0, 0.12);
}
/* Wider static hot spot – no capsule edge, no animation */
.ea-ratman-divider::after {
left: var(--ea-ratman-flare-x);
top: 50%;
width: 172px;
height: 8px;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 238, 1) 5%,
rgba(255, 240, 143, 0.98) 11%,
rgba(255, 210, 40, 0.92) 20%,
rgba(255, 178, 0, 0.72) 34%,
rgba(255, 147, 0, 0.34) 54%,
rgba(255, 132, 0, 0.10) 72%,
rgba(255, 132, 0, 0) 100%
);
filter: blur(0.35px);
box-shadow:
0 0 4px rgba(255, 255, 232, 0.98),
0 0 10px rgba(255, 225, 96, 0.86),
0 0 21px rgba(255, 183, 0, 0.52),
0 0 38px rgba(255, 126, 0, 0.22);
animation: none !important;
}
@media (max-width: 1200px) {
.ea-ratman-divider::before {
background:
linear-gradient(
90deg,
rgba(255, 188, 0, 0.88) 0%,
rgba(255, 198, 0, 0.98) 12%,
#ffc400 50%,
rgba(255, 198, 0, 0.98) 88%,
rgba(255, 188, 0, 0.70) 100%
) center / 100% 1.5px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 249, 198, 0.95) 0%,
rgba(255, 224, 83, 0.86) 18%,
rgba(255, 190, 0, 0.62) 38%,
rgba(255, 154, 0, 0.26) 60%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 168px 7px no-repeat;
}
.ea-ratman-divider::after {
width: 150px;
height: 8px;
}
}
@media (max-width: 760px) {
.ea-ratman-divider::before {
height: 6px;
background:
linear-gradient(
90deg,
rgba(255, 188, 0, 0.86) 0%,
#ffc400 15%,
#ffc400 85%,
rgba(255, 188, 0, 0.68) 100%
) center / 100% 1px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 249, 198, 0.92) 0%,
rgba(255, 222, 75, 0.82) 20%,
rgba(255, 184, 0, 0.56) 42%,
rgba(255, 145, 0, 0.20) 64%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 132px 6px no-repeat;
}
.ea-ratman-divider::after {
width: 116px;
height: 7px;
}
}
/* =========================================================
EA ELEKTRONIKA – RATMAN
VERSION 6.6 – MOCKUP-MATCH FLARE PROPORTIONS
Fix:
- Narrower flare to match approved mockup
- Small bright white/yellow core
- Local line thickening only close to the core
- Static, no animation
========================================================= */
.ea-ratman-divider {
--ea-ratman-flare-x: 67%;
height: 13px;
margin: 14px 0 18px;
}
/* Thin full-width gold line with a compact local thickening */
.ea-ratman-divider::before {
top: 50%;
height: 6px;
transform: translateY(-50%);
background:
linear-gradient(
90deg,
rgba(255, 187, 0, 0.82) 0%,
rgba(255, 198, 0, 0.96) 12%,
#ffc400 50%,
rgba(255, 198, 0, 0.96) 88%,
rgba(255, 187, 0, 0.72) 100%
) center / 100% 1.4px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 255, 238, 0.98) 0%,
rgba(255, 239, 126, 0.92) 12%,
rgba(255, 210, 36, 0.84) 28%,
rgba(255, 177, 0, 0.52) 50%,
rgba(255, 147, 0, 0.18) 70%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 118px 6px no-repeat;
box-shadow:
0 0 3px rgba(255, 196, 0, 0.26),
0 0 6px rgba(255, 160, 0, 0.10);
}
/* Compact static light burst – no lens/capsule shape */
.ea-ratman-divider::after {
left: var(--ea-ratman-flare-x);
top: 50%;
width: 98px;
height: 5px;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 235, 1) 7%,
rgba(255, 239, 116, 0.98) 15%,
rgba(255, 205, 27, 0.90) 27%,
rgba(255, 174, 0, 0.60) 44%,
rgba(255, 145, 0, 0.24) 64%,
rgba(255, 135, 0, 0) 100%
);
filter: blur(0.15px);
box-shadow:
0 0 3px rgba(255, 255, 238, 1),
0 0 7px rgba(255, 228, 102, 0.82),
0 0 15px rgba(255, 184, 0, 0.46),
0 0 26px rgba(255, 132, 0, 0.18);
animation: none !important;
}
@media (max-width: 1200px) {
.ea-ratman-divider {
--ea-ratman-flare-x: 67%;
}
.ea-ratman-divider::before {
background:
linear-gradient(
90deg,
rgba(255, 187, 0, 0.82) 0%,
rgba(255, 198, 0, 0.96) 12%,
#ffc400 50%,
rgba(255, 198, 0, 0.96) 88%,
rgba(255, 187, 0, 0.72) 100%
) center / 100% 1.3px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 255, 238, 0.96) 0%,
rgba(255, 237, 118, 0.90) 14%,
rgba(255, 206, 30, 0.80) 30%,
rgba(255, 172, 0, 0.48) 52%,
rgba(255, 143, 0, 0.16) 72%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 104px 6px no-repeat;
}
.ea-ratman-divider::after {
width: 86px;
height: 5px;
}
}
@media (max-width: 760px) {
.ea-ratman-divider {
--ea-ratman-flare-x: 65%;
height: 11px;
margin: 10px 0 15px;
}
.ea-ratman-divider::before {
height: 5px;
background:
linear-gradient(
90deg,
rgba(255, 187, 0, 0.80) 0%,
#ffc400 15%,
#ffc400 85%,
rgba(255, 187, 0, 0.68) 100%
) center / 100% 1px no-repeat,
radial-gradient(
ellipse at center,
rgba(255, 255, 238, 0.94) 0%,
rgba(255, 233, 108, 0.86) 16%,
rgba(255, 201, 25, 0.72) 34%,
rgba(255, 165, 0, 0.38) 56%,
rgba(255, 140, 0, 0.12) 74%,
rgba(255, 140, 0, 0) 100%
) var(--ea-ratman-flare-x) 50% / 82px 5px no-repeat;
}
.ea-ratman-divider::after {
width: 68px;
height: 4px;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 6.7 – RATMAN FLARE LOCAL THICKNESS
Only change from v6.6:
- Keep line, flare width, position and glow unchanged
- Make the line immediately around the flare just slightly thicker
========================================================= */
.ea-ratman-divider::before {
background-size:
100% 1.4px,
118px 7px !important;
}
@media (max-width: 1200px) {
.ea-ratman-divider::before {
background-size:
100% 1.3px,
104px 7px !important;
}
}
@media (max-width: 760px) {
.ea-ratman-divider::before {
background-size:
100% 1px,
82px 6px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 6.8 – RATMAN SLIDER EDGE CLEANUP
Only change from v6.7:
- Remove the black vertical side bands around the RATMAN video
- Keep the current ROW 11 layout and divider unchanged
- Force the single HTML5 video slide to fill its 16:9 stage
========================================================= */
/* Right column itself must not create extra horizontal gutters */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child {
padding-left: 18px !important;
padding-right: 0 !important;
}
/* RATMAN single-video slider: clean 16:9 stage */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .master-slider,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-container,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-inner-controls-cont,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-view,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-container,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: transparent !important;
background-color: transparent !important;
}
/* The visible slider stage follows the actual video ratio */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .master-slider,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-container,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-view {
aspect-ratio: 16 / 9 !important;
height: auto !important;
overflow: hidden !important;
}
/* Internal Master Slider layers must fill that stage */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-container,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont {
height: 100% !important;
}
/* HTML5 video fills the entire slider – no black bars left/right */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont video {
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Tablet/mobile: no artificial side padding around the stacked video */
@media (max-width: 1024px) {
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 6.9 – RATMAN VIDEO SIDE-BAR CROP
The remaining black vertical strips are inside the rendered
video area, so the video is cropped very slightly horizontally.
Slider geometry, divider and ROW 11 layout remain unchanged.
========================================================= */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-view,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont {
overflow: hidden !important;
}
/* Crop only a few percent from left/right to remove encoded side bars. */
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont video {
position: relative !important;
left: 50% !important;
width: 104% !important;
max-width: none !important;
height: 100% !important;
transform: translateX(-50%) !important;
transform-origin: center center !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Slightly smaller crop on tablet/mobile. */
@media (max-width: 1024px) {
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide video,
.grid-row.grid-row-top-11 > .grid-cols > .grid-col:last-child .ms-slide-bgcont video {
width: 103% !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.0 – RATMAN PRODUCT CARDS / ROW 12
Target: approved RATMAN mockup
- 3 industrial black/yellow cards
- image on the left, product information on the right
- thin yellow title rule
- price/footer across the bottom
- yellow cart CTA
- continuous black RATMAN environment from ROW 11
- NO carousel / swiper / grid-item width overrides
========================================================= */
/* ---------------------------------------------------------
ROW 12 – CONTINUOUS RATMAN PRODUCT STAGE
--------------------------------------------------------- */
.grid-row.grid-row-top-12 {
--ea-ratman-card-black: #070809;
--ea-ratman-card-black-2: #0b0d0f;
--ea-ratman-card-line: rgba(255, 196, 0, 0.30);
--ea-ratman-card-yellow: #ffc400;
--ea-ratman-card-yellow-hot: #ffd529;
--ea-ratman-card-text: #f2f3f4;
--ea-ratman-card-muted: #c0c3c7;
position: relative !important;
padding: 0 0 54px !important;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(255, 196, 0, 0.025) 0%,
rgba(255, 196, 0, 0) 54%
),
linear-gradient(
180deg,
#050607 0%,
#050607 100%
) !important;
border: 0 !important;
box-shadow: none !important;
}
/* Align ROW 12 with the ROW 11 content rail. */
.grid-row.grid-row-top-12 > .grid-cols {
width: calc(100% - 56px) !important;
max-width: 1880px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
}
/* Keep Journal wrappers neutral. */
.grid-row.grid-row-top-12 > .grid-cols > .grid-col,
.grid-row.grid-row-top-12 .module-products,
.grid-row.grid-row-top-12 .module-products .module-body,
.grid-row.grid-row-top-12 .module-products .module-item {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* The upper hero already contains the section headline. */
.grid-row.grid-row-top-12 .module-products > .title.module-title,
.grid-row.grid-row-top-12 .module-products .module-title {
display: none !important;
}
/* ---------------------------------------------------------
RATMAN CARD SHELL
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
position: relative !important;
display: grid !important;
grid-template-columns: 48% 52% !important;
align-items: stretch !important;
min-height: 388px !important;
height: 100% !important;
box-sizing: border-box !important;
padding: 0 0 86px !important;
overflow: hidden !important;
color: var(--ea-ratman-card-text) !important;
background:
radial-gradient(
ellipse at 24% 34%,
rgba(255, 255, 255, 0.055) 0%,
rgba(255, 255, 255, 0.018) 34%,
rgba(255, 255, 255, 0) 64%
),
linear-gradient(
135deg,
#0a0b0d 0%,
#050607 58%,
#08090a 100%
) !important;
border: 1px solid var(--ea-ratman-card-line) !important;
border-radius: 14px !important;
box-shadow:
0 16px 38px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
transition:
transform 0.20s ease,
border-color 0.20s ease,
box-shadow 0.20s ease !important;
}
/* Subtle technical sheen, not a glossy consumer card. */
.grid-row.grid-row-top-12 .module-products .product-thumb::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(
118deg,
rgba(255, 255, 255, 0.026) 0%,
rgba(255, 255, 255, 0) 28%
);
border-radius: inherit;
}
/* ---------------------------------------------------------
PRODUCT BADGES – MATCH MOCKUP
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
position: absolute;
z-index: 6;
top: 17px;
left: calc(48% + 20px);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
box-sizing: border-box;
padding: 3px 10px;
color: var(--ea-ratman-card-yellow);
background: rgba(4, 5, 6, 0.84);
border: 1px solid rgba(255, 196, 0, 0.56);
border-radius: 4px;
box-shadow:
0 0 14px rgba(255, 196, 0, 0.06);
font-family: "Montserrat", sans-serif;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.035em;
text-transform: uppercase;
pointer-events: none;
}
.grid-row.grid-row-top-12 .module-products .module-item:nth-child(1) .product-thumb::before {
content: "RATMAN PRO";
}
.grid-row.grid-row-top-12 .module-products .module-item:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR";
}
.grid-row.grid-row-top-12 .module-products .module-item:nth-child(3) .product-thumb::before {
content: "RATMAN";
}
/* ---------------------------------------------------------
IMAGE – LEFT HALF
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
position: relative !important;
z-index: 2;
grid-column: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 28px 14px 20px 18px !important;
background:
radial-gradient(
ellipse at 46% 45%,
rgba(255, 255, 255, 0.075) 0%,
rgba(255, 255, 255, 0.028) 32%,
rgba(255, 255, 255, 0) 68%
) !important;
border: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image > a,
.grid-row.grid-row-top-12 .module-products .product-thumb .image .product-img {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
display: block !important;
width: auto !important;
max-width: 94% !important;
height: auto !important;
max-height: 270px !important;
margin: auto !important;
object-fit: contain !important;
filter:
drop-shadow(0 16px 22px rgba(0, 0, 0, 0.40));
transition:
transform 0.24s ease,
filter 0.24s ease !important;
}
/* ---------------------------------------------------------
CAPTION – RIGHT HALF
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
position: static !important;
z-index: 3;
grid-column: 2 !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 55px 26px 24px 20px !important;
color: var(--ea-ratman-card-text) !important;
background: transparent !important;
text-align: left !important;
}
/* Product title. */
.grid-row.grid-row-top-12 .module-products .product-thumb .name {
position: relative !important;
margin: 0 0 17px !important;
padding: 0 0 16px !important;
text-align: left !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background:
linear-gradient(
90deg,
rgba(255, 196, 0, 0.92) 0%,
rgba(255, 196, 0, 0.54) 70%,
rgba(255, 196, 0, 0.16) 100%
);
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
color: #f1f2f3 !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(17px, 1.08vw, 22px) !important;
font-weight: 500 !important;
line-height: 1.34 !important;
letter-spacing: 0.018em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
/* Product description / specification list. */
.grid-row.grid-row-top-12 .module-products .product-thumb .description {
margin: 0 !important;
padding: 0 !important;
color: var(--ea-ratman-card-muted) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.48 !important;
text-align: left !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description li {
position: relative;
margin: 0 0 13px !important;
padding: 0 0 0 27px !important;
color: var(--ea-ratman-card-muted) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description li::before {
content: "✓";
position: absolute;
left: 0;
top: -1px;
color: var(--ea-ratman-card-yellow);
font-size: 17px;
font-weight: 900;
line-height: 1.2;
}
/* ---------------------------------------------------------
FOOTER – PRICE LEFT / CART RIGHT
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 85px;
height: 1px;
background: rgba(255, 196, 0, 0.10);
pointer-events: none;
}
/* Price block. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
position: absolute !important;
z-index: 7;
left: 28px !important;
bottom: 25px !important;
max-width: calc(58% - 28px);
margin: 0 !important;
padding: 0 !important;
color: #f4f4f4 !important;
text-align: left !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-normal,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-new {
color: #f4f4f4 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 23px !important;
font-weight: 600 !important;
line-height: 1.1 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-old,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-tax,
.grid-row.grid-row-top-12 .module-products .product-thumb .price small {
display: block;
margin-top: 5px;
color: #a9adb1 !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
text-decoration-thickness: 1px;
}
/* Button group becomes the yellow footer CTA on the right. */
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group {
position: absolute !important;
z-index: 8;
right: 18px !important;
bottom: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* Hide secondary product actions in this homepage treatment. */
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .wishlist,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .compare,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-wishlist,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-compare {
display: none !important;
}
/* Cart button – RATMAN hazard yellow. */
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group button[data-loading-text],
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-width: 172px !important;
min-height: 52px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 10px 18px !important;
color: #090a0b !important;
background:
linear-gradient(
180deg,
var(--ea-ratman-card-yellow-hot) 0%,
var(--ea-ratman-card-yellow) 100%
) !important;
border: 1px solid #e7ad00 !important;
border-radius: 6px !important;
box-shadow:
0 8px 18px rgba(255, 196, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
transition:
transform 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease !important;
}
/* Keep cart icon dark, like the mockup. */
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart i,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart i,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn i {
color: #090a0b !important;
}
/* ---------------------------------------------------------
DESKTOP INTERACTION
--------------------------------------------------------- */
@media (min-width: 1025px) {
.grid-row.grid-row-top-12 .module-products .product-thumb:hover {
transform: translateY(-4px);
border-color: rgba(255, 196, 0, 0.48) !important;
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 196, 0, 0.035),
inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb:hover .image img {
transform: scale(1.025);
filter:
drop-shadow(0 18px 28px rgba(0, 0, 0, 0.48));
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart:hover,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart:hover,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn:hover {
transform: translateY(-1px);
background:
linear-gradient(
180deg,
#ffda3d 0%,
#ffc400 100%
) !important;
box-shadow:
0 10px 22px rgba(255, 196, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
}
/* ---------------------------------------------------------
<= 1440px – KEEP MOCKUP COMPOSITION COMPACT
--------------------------------------------------------- */
@media (max-width: 1440px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
grid-template-columns: 46% 54% !important;
min-height: 360px !important;
padding-bottom: 82px !important;
}
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
left: calc(46% + 17px);
top: 15px;
font-size: 10px;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding: 50px 18px 20px 17px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 17px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description {
font-size: 12px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
max-height: 238px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group button[data-loading-text],
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn {
min-width: 150px !important;
min-height: 48px !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 13px !important;
}
}
/* ---------------------------------------------------------
TABLET – CARD INTERNAL LAYOUT STACKS CLEANLY
Items-per-row remains controlled by Journal.
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row.grid-row-top-12 {
padding-bottom: 42px !important;
}
.grid-row.grid-row-top-12 > .grid-cols {
width: calc(100% - 32px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
padding-bottom: 84px !important;
}
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
top: 16px;
left: 18px;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 230px !important;
padding: 24px 18px 8px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
max-height: 215px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding: 20px 20px 22px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 17px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group button[data-loading-text],
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn {
min-width: 145px !important;
}
}
/* ---------------------------------------------------------
PHONE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 {
padding-bottom: 34px !important;
}
.grid-row.grid-row-top-12 > .grid-cols {
width: calc(100% - 24px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb {
padding-bottom: 132px !important;
border-radius: 11px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 220px !important;
padding: 26px 18px 6px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding: 18px 18px 22px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name {
margin-bottom: 14px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 16px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description {
font-size: 12px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 18px !important;
right: 18px !important;
bottom: 76px !important;
max-width: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-normal,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-new {
font-size: 21px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
justify-content: stretch !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group button[data-loading-text],
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group .btn {
width: 100% !important;
min-width: 0 !important;
min-height: 50px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
bottom: 130px;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row.grid-row-top-12 > .grid-cols {
width: calc(100% - 20px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 205px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
max-height: 195px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.1 - RATMAN PRODUCT CARD CORRECTION
Corrections after RATMAN_HOME Product Grid Style was created:
- v7.0 visual rules were overriding Journal grid-style changes
- remove forced 100% card height so cards can become compact
- hide tax line in RATMAN cards
- force the real Journal cart controls visible when present
- correct RATMAN badges by static grid position (carousel is OFF)
- keep Journal responsible for Items per Row / card widths
========================================================= */
/* ---------------------------------------------------------
COMPACT CARD HEIGHT
v7.0 used height:100%, which can inherit an oversized Journal
grid-item height. Let card content define its own height instead.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
height: auto !important;
min-height: 350px !important;
align-self: start !important;
}
@media (max-width: 1440px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
min-height: 342px !important;
}
}
/* ---------------------------------------------------------
PRICE FOOTER
The approved mockup does not show the tax / Brez DDV line.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .price-tax,
.grid-row.grid-row-top-12 .module-products .product-thumb .tax,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .tax {
display: none !important;
}
/* ---------------------------------------------------------
REAL JOURNAL PRODUCT BUTTONS
RATMAN_HOME supplies the actual functional Add to Cart control.
Force the existing control visible; do not create fake buttons.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper,
.grid-row.grid-row-top-12 .module-products .product-thumb .product-buttons {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group {
display: flex !important;
}
/* Hide non-cart actions in this homepage card treatment. */
.grid-row.grid-row-top-12 .module-products .product-thumb .wishlist,
.grid-row.grid-row-top-12 .module-products .product-thumb .compare,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-wishlist,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-compare,
.grid-row.grid-row-top-12 .module-products .product-thumb [class*="wishlist"],
.grid-row.grid-row-top-12 .module-products .product-thumb [class*="compare"] {
display: none !important;
}
/* Functional cart button - cover Journal's common cart class variants. */
.grid-row.grid-row-top-12 .module-products .product-thumb .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb button[data-loading-text],
.grid-row.grid-row-top-12 .module-products .product-thumb button[onclick*="cart.add"],
.grid-row.grid-row-top-12 .module-products .product-thumb a[onclick*="cart.add"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-width: 172px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 10px 18px !important;
opacity: 1 !important;
visibility: visible !important;
color: #090a0b !important;
background: linear-gradient(180deg, #ffd529 0%, #ffc400 100%) !important;
border: 1px solid #e7ad00 !important;
border-radius: 6px !important;
box-shadow:
0 8px 18px rgba(255, 196, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-transform: uppercase !important;
}
/* ---------------------------------------------------------
BADGES
Carousel is OFF, so use the actual Journal grid position.
These rules override the fallback v7.0 module-item badge rule.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .grid-items > .grid-item:nth-child(1) .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .product-layout:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .grid-items > .grid-item:nth-child(2) .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .product-layout:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .grid-items > .grid-item:nth-child(3) .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .product-layout:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* Fallback for non-carousel Journal module-body output. */
.grid-row.grid-row-top-12 .module-products .module-body > .module-item:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .module-body > .module-item:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .module-body > .module-item:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* ---------------------------------------------------------
MOCKUP PROPORTIONS
Keep the image/text split, but tighten vertical spacing.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
padding-top: 22px !important;
padding-bottom: 14px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding-top: 48px !important;
padding-bottom: 18px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description li {
margin-bottom: 9px !important;
}
/* Footer remains fixed inside the card, matching the mockup. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
bottom: 24px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group {
bottom: 18px !important;
}
/* Phone layout from v7.0 remains intact. */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
min-height: 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.2 – RATMAN ACTUAL JOURNAL GRID OVERRIDE
Context confirmed in Journal:
- custom Product Grid Style is already selected and configured
- Add to Cart is enabled
- remaining issue is frontend CSS / Journal markup targeting
This patch:
- does NOT require more Journal setting changes
- broadens functional Add-to-Cart targeting for Journal 3 markup
- corrects badges across common Journal grid/swiper wrappers
- does NOT change Items per Row, swiper widths or grid-item widths
========================================================= */
/* ---------------------------------------------------------
FUNCTIONAL JOURNAL BUTTON GROUP
Cover the real Journal 3 wrappers regardless of whether the
selected grid style places them in product-thumb / caption / footer.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .button-group,
.grid-row.grid-row-top-12 .module-products .buttons-group,
.grid-row.grid-row-top-12 .module-products .buttons-wrapper,
.grid-row.grid-row-top-12 .module-products .product-buttons,
.grid-row.grid-row-top-12 .module-products .cart-group {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper,
.grid-row.grid-row-top-12 .module-products .product-thumb .product-buttons {
position: absolute !important;
z-index: 12 !important;
right: 18px !important;
bottom: 18px !important;
left: auto !important;
top: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Quantity / stepper is not part of the approved mockup. */
.grid-row.grid-row-top-12 .module-products .product-thumb .stepper,
.grid-row.grid-row-top-12 .module-products .product-thumb .quantity,
.grid-row.grid-row-top-12 .module-products .product-thumb .quantity-input,
.grid-row.grid-row-top-12 .module-products .product-thumb input[name*="quantity"] {
display: none !important;
}
/* Functional Add to Cart – broad Journal 3 selector set. */
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group > a,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group > button,
.grid-row.grid-row-top-12 .module-products .product-thumb button[onclick*="cart.add"],
.grid-row.grid-row-top-12 .module-products .product-thumb a[onclick*="cart.add"],
.grid-row.grid-row-top-12 .module-products .product-thumb button[data-loading-text] {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 11px !important;
width: auto !important;
min-width: 172px !important;
max-width: none !important;
height: auto !important;
min-height: 52px !important;
margin: 0 !important;
padding: 10px 18px !important;
opacity: 1 !important;
visibility: visible !important;
color: #090a0b !important;
background:
linear-gradient(
180deg,
#ffd529 0%,
#ffc400 100%
) !important;
border: 1px solid #e7ad00 !important;
border-radius: 6px !important;
box-shadow:
0 8px 18px rgba(255, 196, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.005em !important;
text-transform: uppercase !important;
transform: none !important;
}
/* Keep both icon and text visible when Journal outputs them. */
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart .btn-text,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart .btn-text,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart span,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart span,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart i,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart i {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
color: #090a0b !important;
}
/* ---------------------------------------------------------
BADGES
v7.0 fallback made every card RATMAN PRO when the Journal
wrapper nesting changed. Cover the actual common wrapper variants.
--------------------------------------------------------- */
/* Default first-card fallback only. */
.grid-row.grid-row-top-12 .module-products .product-thumb::before {
content: "RATMAN PRO" !important;
}
/* Direct product layouts. */
.grid-row.grid-row-top-12 .module-products .product-layout:nth-of-type(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout:nth-of-type(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout:nth-of-type(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* Direct grid children. */
.grid-row.grid-row-top-12 .module-products .grid-items > *:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .grid-items > *:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .grid-items > *:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* Journal can retain swiper wrappers even with carousel disabled. */
.grid-row.grid-row-top-12 .module-products .swiper-wrapper > .swiper-slide:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .swiper-wrapper > .swiper-slide:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .swiper-wrapper > .swiper-slide:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* Generic immediate module-body children. */
.grid-row.grid-row-top-12 .module-products .module-body > *:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .module-body > *:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .module-body > *:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* ---------------------------------------------------------
FOOTER RESERVE
Preserve room for price left + real cart button right.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
padding-bottom: 86px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 28px !important;
right: auto !important;
bottom: 24px !important;
max-width: calc(55% - 28px) !important;
}
/* Phone layout keeps full-width CTA below price. */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
padding-bottom: 132px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper,
.grid-row.grid-row-top-12 .module-products .product-thumb .product-buttons {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
width: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group {
width: 100% !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .button-cart,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group > a,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group > button,
.grid-row.grid-row-top-12 .module-products .product-thumb button[onclick*="cart.add"],
.grid-row.grid-row-top-12 .module-products .product-thumb a[onclick*="cart.add"],
.grid-row.grid-row-top-12 .module-products .product-thumb button[data-loading-text] {
width: 100% !important;
min-width: 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.3 – RATMAN REAL BUTTON DOM / CARD FOOTER
Confirmed live DOM in ROW 12:
.product-grid
> .product-layout
> .product-thumb
> .image
> .caption
> .buttons-wrapper
.button-group
.cart-group
.wish-group
> .extra-group
Changes:
- use the confirmed direct product-layout structure
- hide wishlist / compare / extra buttons for RATMAN only
- keep only the real functional Add to Cart button
- equal-height desktop cards
- price left / cart right footer
- correct the three RATMAN badges
- no swiper, slide or grid-item width overrides
========================================================= */
/* ---------------------------------------------------------
EXACT BADGES – confirmed product-layout direct children
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout:nth-child(1) .product-thumb::before {
content: "RATMAN PRO" !important;
}
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout:nth-child(2) .product-thumb::before {
content: "M8 TERMINATOR" !important;
}
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout:nth-child(3) .product-thumb::before {
content: "RATMAN" !important;
}
/* ---------------------------------------------------------
EQUAL HEIGHT DESKTOP CARDS
--------------------------------------------------------- */
@media (min-width: 1025px) {
.grid-row.grid-row-top-12 .module-products .product-grid {
align-items: stretch !important;
}
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout {
display: flex !important;
align-self: stretch !important;
}
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout > .product-thumb {
width: 100% !important;
height: 100% !important;
grid-template-columns: 43% 57% !important;
padding-bottom: 88px !important;
}
}
/* ---------------------------------------------------------
RATMAN FOOTER – real Journal buttons
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
position: absolute !important;
z-index: 20 !important;
right: 18px !important;
bottom: 18px !important;
left: auto !important;
top: auto !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .button-group {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Only the functional cart action is used in the approved RATMAN card. */
.grid-row.grid-row-top-12 .module-products .product-thumb .wish-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .extra-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-wishlist,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-compare,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-extra {
display: none !important;
}
/* Quantity remains functional through its hidden input, but the visible stepper is not shown. */
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
border: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .stepper {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Main RATMAN cart CTA. */
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 184px !important;
max-width: none !important;
min-height: 52px !important;
height: 52px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 20px !important;
opacity: 1 !important;
visibility: visible !important;
color: #090a0b !important;
background:
linear-gradient(
180deg,
#ffd52b 0%,
#ffc400 100%
) !important;
border: 1px solid #e3aa00 !important;
border-radius: 6px !important;
box-shadow:
0 8px 18px rgba(255, 196, 0, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
transform: none !important;
}
/* Cart icon before Journal button text – mockup treatment. */
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart::before {
content: "\f07a";
display: inline-block;
margin-right: 12px;
color: #090a0b;
font-family: "FontAwesome";
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart .btn-text {
display: inline !important;
color: #090a0b !important;
font: inherit !important;
}
@media (min-width: 1025px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart:hover {
transform: translateY(-1px) !important;
background:
linear-gradient(
180deg,
#ffdd48 0%,
#ffc400 100%
) !important;
box-shadow:
0 10px 22px rgba(255, 196, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
}
/* ---------------------------------------------------------
PRICE / FOOTER DIVIDER
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 28px !important;
right: auto !important;
bottom: 27px !important;
max-width: calc(100% - 250px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
left: 0 !important;
right: 0 !important;
bottom: 87px !important;
background: rgba(255, 196, 0, 0.12) !important;
}
/* No tax line in the approved RATMAN footer. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price-tax {
display: none !important;
}
/* ---------------------------------------------------------
TABLET / PHONE
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
right: 18px !important;
bottom: 18px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
min-width: 160px !important;
}
}
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
width: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
width: 100% !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
min-width: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 18px !important;
right: 18px !important;
bottom: 78px !important;
max-width: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
bottom: 132px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.4 – RATMAN CARD PROPORTION FINISH
Based on the confirmed v7.3 frontend:
- keep correct badges
- keep real functional Add to Cart
- keep equal desktop heights
- make cards shorter and closer to the approved mockup
- tighten image/text composition and footer
- no swiper / slide / grid-item width overrides
========================================================= */
@media (min-width: 1025px) {
/* Compact mockup-like card height. */
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout > .product-thumb {
min-height: 0 !important;
height: 382px !important;
grid-template-columns: 46% 54% !important;
padding-bottom: 74px !important;
}
/* Image area. */
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 0 !important;
padding: 24px 16px 18px 18px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
max-width: 94% !important;
max-height: 238px !important;
}
/* Text area. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding: 48px 22px 16px 18px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name {
margin-bottom: 13px !important;
padding-bottom: 12px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 17px !important;
line-height: 1.34 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt {
margin: 0 !important;
padding: 10px 0 0 !important;
font-size: 12px !important;
line-height: 1.42 !important;
border-top: 1px solid rgba(255, 255, 255, 0.56) !important;
border-bottom: 0 !important;
gap: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
position: relative !important;
margin: 0 !important;
padding: 7px 0 7px 18px !important;
color: #aeb2b6 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.48) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::first-letter {
color: #ffc400;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
font-size: 10px !important;
line-height: 1.2 !important;
}
/* Shorter footer, matching the mockup proportions. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
bottom: 73px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 24px !important;
bottom: 22px !important;
max-width: calc(100% - 238px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-normal,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-new {
font-size: 22px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
right: 16px !important;
bottom: 15px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
min-width: 178px !important;
height: 48px !important;
min-height: 48px !important;
padding-left: 18px !important;
padding-right: 18px !important;
font-size: 13px !important;
}
/* Slightly lower badge, visually tied to the text column. */
.grid-row.grid-row-top-12 .module-products .product-layout .product-thumb::before {
top: 15px !important;
left: calc(46% + 18px) !important;
}
}
/* Medium desktop / laptop. */
@media (min-width: 1025px) and (max-width: 1440px) {
.grid-row.grid-row-top-12 .module-products .product-grid > .product-layout > .product-thumb {
height: 370px !important;
grid-template-columns: 45% 55% !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img {
max-height: 222px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding: 45px 17px 14px 16px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 16px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .description,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt {
font-size: 11.5px !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout .product-thumb::before {
left: calc(45% + 16px) !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.5 – RATMAN CARD TYPOGRAPHY + CLEAN FEATURES
Changes from v7.4:
- tighter typography closer to the approved mockup
- remove separator lines between key-feature rows
- keep only one subtle yellow divider under the product title
- strengthen image depth/shadow treatment
- reduce the visual dominance of the white product-image stage
- no carousel / swiper / grid-item width changes
========================================================= */
/* ---------------------------------------------------------
TYPOGRAPHY – RATMAN PRODUCT CARDS
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb,
.grid-row.grid-row-top-12 .module-products .product-thumb .caption,
.grid-row.grid-row-top-12 .module-products .product-thumb .name a,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line,
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .btn-cart {
font-family: "Montserrat", Arial, sans-serif !important;
}
/* Product title – less heavy and closer to mockup. */
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.36 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
}
/* Feature copy. */
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt {
margin: 0 !important;
padding: 8px 0 0 !important;
color: #b9bdc1 !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.48 !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
/* REMOVE the horizontal separator lines between individual features. */
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line:last-child {
position: relative !important;
margin: 0 0 8px !important;
padding: 0 0 0 20px !important;
color: #b5b9bd !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
}
/* Replace the text bullet with a clean RATMAN yellow check. */
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #ffc400;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
}
/* Hide the literal bullet character already printed by Twig. */
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
font-size: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::after {
content: attr(data-ea-feature);
font-size: 12px;
}
/*
Because the current Twig prints the bullet as literal text, restore
readable text through normal rendering while visually suppressing the
bullet itself with a hanging-indent technique.
*/
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
font-size: 12px !important;
text-indent: -0.72em !important;
padding-left: 1.72em !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::first-letter {
color: transparent !important;
font-size: 1px !important;
}
/* Keep only the thin yellow product-title divider. */
.grid-row.grid-row-top-12 .module-products .product-thumb .name {
position: relative !important;
margin-bottom: 14px !important;
padding-bottom: 12px !important;
border: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name::after {
height: 1px !important;
background:
linear-gradient(
90deg,
rgba(255, 196, 0, 0.95) 0%,
rgba(255, 196, 0, 0.58) 72%,
rgba(255, 196, 0, 0.10) 100%
) !important;
}
/* Lowest-price legal line – understated. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
display: block !important;
margin-top: 4px !important;
color: #9da2a7 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
/* Price – closer to mockup weight. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-normal,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-new {
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 22px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
/* ---------------------------------------------------------
IMAGE TREATMENT
NOTE: CSS cannot create real transparency from a white JPG
background. This styling makes the existing images feel more
integrated until transparent source images are used.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
overflow: hidden !important;
background:
radial-gradient(
ellipse at 50% 52%,
rgba(255, 255, 255, 0.075) 0%,
rgba(255, 255, 255, 0.025) 34%,
rgba(255, 255, 255, 0) 70%
) !important;
}
/* Remove any theme frame/shadow around the image element itself. */
.grid-row.grid-row-top-12 .module-products .product-thumb .image,
.grid-row.grid-row-top-12 .module-products .product-thumb .product-img,
.grid-row.grid-row-top-12 .module-products .product-thumb .product-img > div {
border: 0 !important;
box-shadow: none !important;
}
/* Stronger product depth like the mockup. */
.grid-row.grid-row-top-12 .module-products .product-thumb .image img.img-first {
filter:
contrast(1.02)
saturate(0.96)
drop-shadow(0 17px 16px rgba(0, 0, 0, 0.46))
drop-shadow(0 5px 4px rgba(0, 0, 0, 0.24)) !important;
}
/* The second image is not wanted in the RATMAN homepage cards. */
.grid-row.grid-row-top-12 .module-products .product-thumb .image img.img-second {
display: none !important;
}
/* ---------------------------------------------------------
MEDIUM DESKTOP
--------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 16px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
font-size: 11.5px !important;
}
}
/* ---------------------------------------------------------
PHONE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .name a {
font-size: 16px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt,
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
font-size: 12px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.6 – RATMAN FEATURE TEXT FIX + BORDER TUNING
Changes from v7.5:
- restore the missing first character of every key feature
- keep the yellow check marks
- keep feature separator lines removed
- slightly strengthen the card border for visual definition only
- responsive behavior itself is unchanged
========================================================= */
/* ---------------------------------------------------------
KEY FEATURES – RESTORE FIRST LETTER / NUMBER
--------------------------------------------------------- */
/*
v7.5 used ::first-letter to hide the literal bullet printed by Twig.
In this DOM Firefox treats the first visible alphanumeric character
as ::first-letter, which removed M / 3 / D etc.
Override that behavior completely.
*/
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::first-letter {
color: inherit !important;
font-size: inherit !important;
}
/* Keep the current yellow check mark and clean text layout. */
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line {
position: relative !important;
margin: 0 0 8px !important;
padding: 0 0 0 22px !important;
color: #b5b9bd !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.48 !important;
text-indent: -0.72em !important;
border: 0 !important;
box-shadow: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .excerpt-line::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: 0.02em !important;
color: #ffc400 !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
}
/* ---------------------------------------------------------
CARD BORDER – SLIGHTLY STRONGER VISUAL EDGE
This does NOT improve responsiveness; it only improves contrast.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
border-width: 1.25px !important;
border-color: rgba(255, 196, 0, 0.38) !important;
}
/* Keep the lighter edge on smaller screens so cards do not feel heavy. */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
border-width: 1px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.7 – RATMAN LINE WEIGHT + PRODUCT ID SCALE
Changes from v7.6:
- card outer border matches the RATMAN hero separator line weight
- orange/yellow divider under product name uses the same line weight
- responsive line weights mirror the hero separator:
desktop 1.4px
<=1200px 1.3px
<=760px 1px
- RATMAN product ID badge enlarged to product-name size / slightly larger
========================================================= */
/* ---------------------------------------------------------
DESKTOP – MATCH HERO SEPARATOR LINE WEIGHT
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
border-width: 1.4px !important;
border-color: rgba(255, 196, 0, 0.48) !important;
}
/* Product-name separator: same visual thickness as hero line. */
.grid-row.grid-row-top-12 .module-products .product-thumb .name::after {
height: 1.4px !important;
background:
linear-gradient(
90deg,
rgba(255, 196, 0, 0.98) 0%,
rgba(255, 196, 0, 0.72) 72%,
rgba(255, 196, 0, 0.16) 100%
) !important;
}
/* ---------------------------------------------------------
PRODUCT ID BADGE – SAME SCALE AS PRODUCT NAME
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-layout .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
min-height: 31px !important;
padding: 5px 12px !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.015em !important;
border-width: 1.4px !important;
border-color: rgba(255, 196, 0, 0.70) !important;
}
/* Leave a little more room below the larger badge. */
@media (min-width: 1025px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .caption {
padding-top: 56px !important;
}
}
/* ---------------------------------------------------------
<= 1200px – MATCH HERO RESPONSIVE LINE WEIGHT
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
border-width: 1.3px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name::after {
height: 1.3px !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
min-height: 29px !important;
padding: 4px 11px !important;
font-size: 17px !important;
border-width: 1.3px !important;
}
}
/* ---------------------------------------------------------
<= 760px – MATCH HERO MOBILE LINE WEIGHT
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb {
border-width: 1px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .name::after {
height: 1px !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout .product-thumb::before,
.grid-row.grid-row-top-12 .module-products .module-item .product-thumb::before {
min-height: 27px !important;
padding: 4px 10px !important;
font-size: 16px !important;
border-width: 1px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.8 – RATMAN ROW 11 / ROW 12 GAP
Changes from v7.7:
- move the product cards visually closer to ROW 11
- reduce ROW 11 bottom padding
- reduce the product module top breathing space
- preserve all card styling, typography, badges and buttons
========================================================= */
/* Desktop: reduce the black gap below the RATMAN hero/video. */
.grid-row.grid-row-top-11 {
padding-bottom: 20px !important;
}
/* ROW 12 starts closer to ROW 11. */
.grid-row.grid-row-top-12 .module-products {
padding-top: 6px !important;
margin-top: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .module-body,
.grid-row.grid-row-top-12 .module-products .module-item,
.grid-row.grid-row-top-12 .module-products .product-grid {
margin-top: 0 !important;
}
/* Medium screens. */
@media (max-width: 1200px) {
.grid-row.grid-row-top-11 {
padding-bottom: 18px !important;
}
.grid-row.grid-row-top-12 .module-products {
padding-top: 5px !important;
}
}
/* Tablet / stacked RATMAN hero. */
@media (max-width: 1024px) {
.grid-row.grid-row-top-11 {
padding-bottom: 22px !important;
}
.grid-row.grid-row-top-12 .module-products {
padding-top: 4px !important;
}
}
/* Mobile: keep enough breathing room for the stacked video. */
@media (max-width: 760px) {
.grid-row.grid-row-top-11 {
padding-bottom: 18px !important;
}
.grid-row.grid-row-top-12 .module-products {
padding-top: 4px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 7.9 – RATMAN LOWEST-PRICE TEXT POSITION
Changes from v7.8:
- move "Najnižja cena zadnjih 30 dni" out of the feature area
- place it directly below the product price
- keep it left aligned with the price
- no other RATMAN card styling changed
========================================================= */
/* Lowest-price legal line belongs to the price block visually. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
position: absolute !important;
z-index: 8 !important;
left: 28px !important;
right: auto !important;
bottom: 9px !important;
display: block !important;
width: auto !important;
max-width: calc(100% - 250px) !important;
margin: 0 !important;
padding: 0 !important;
color: #9da2a7 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
text-align: left !important;
white-space: nowrap !important;
}
/* Lift the price slightly so the legal line sits directly underneath it. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
bottom: 28px !important;
}
/* Desktop proportions from v7.4/v7.8. */
@media (min-width: 1025px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
left: 24px !important;
bottom: 8px !important;
max-width: calc(100% - 238px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 24px !important;
bottom: 27px !important;
}
}
/* Mobile: legal line remains below price and above the full-width cart button. */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
left: 18px !important;
right: 18px !important;
bottom: 73px !important;
max-width: none !important;
font-size: 9.5px !important;
white-space: normal !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 18px !important;
right: 18px !important;
bottom: 94px !important;
max-width: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.0 – HOMEPAGE PRODUCT CARD CART BUTTONS
Scope:
- homepage product modules only
- excludes RATMAN ROW 12, which keeps its dedicated design
Changes:
- remove the hover action strip from normal product cards
- hide quantity stepper, wishlist, compare and extra actions
- keep the real Add to Cart button permanently visible
- position Add to Cart at the bottom-right of each product card
- preserve Journal's existing button colors/typography
- no swiper / slide / grid-item width overrides
========================================================= */
/* ---------------------------------------------------------
NON-RATMAN HOMEPAGE PRODUCT CARDS
--------------------------------------------------------- */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb {
position: relative !important;
}
/* Journal action wrappers become a small permanent footer action,
instead of an image-hover toolbar. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
position: absolute !important;
z-index: 20 !important;
right: 18px !important;
bottom: 18px !important;
left: auto !important;
top: auto !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .button-group {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Only keep the actual Add to Cart action. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .wish-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .extra-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .btn-wishlist,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .btn-compare,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .btn-extra {
display: none !important;
}
/* Keep quantity value available to cart.add(), but hide the visible control. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .stepper {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Real Journal Add to Cart button – always visible.
Colors are deliberately inherited from the active Product Grid style. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
width: auto !important;
min-width: 156px !important;
max-width: none !important;
min-height: 44px !important;
height: auto !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 9px 16px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
/* Journal grid styles can hide text when the button is configured as Icon.
On homepage cards we always want a readable Add to Cart CTA. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .btn-text {
display: inline !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Give the lower-right action a clean reserved area without altering
product/grid widths. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 74px !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 14px !important;
bottom: 14px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
min-width: 142px !important;
min-height: 42px !important;
padding: 8px 14px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 68px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 12px !important;
bottom: 12px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
min-width: 132px !important;
min-height: 40px !important;
padding: 8px 12px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 64px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.1 – SCALING HOMEPAGE CART BUTTON
Scope:
- all homepage product cards except RATMAN ROW 12
- keeps the button permanently visible bottom-right
- visual treatment follows the approved RATMAN footer CTA
- button scales with card / viewport size
========================================================= */
/* ---------------------------------------------------------
PERMANENT SCALING CART BUTTON
--------------------------------------------------------- */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: clamp(10px, 1.15vw, 18px) !important;
bottom: clamp(10px, 1.15vw, 18px) !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(132px, 40%, 190px) !important;
min-width: 0 !important;
max-width: 190px !important;
min-height: clamp(40px, 3.15vw, 50px) !important;
height: auto !important;
padding:
clamp(8px, 0.7vw, 11px)
clamp(12px, 1.15vw, 18px) !important;
color: #090a0b !important;
background:
linear-gradient(
180deg,
#ffd52b 0%,
#ffc400 100%
) !important;
border: 1px solid #e3aa00 !important;
border-radius: clamp(5px, 0.45vw, 7px) !important;
box-shadow:
0 7px 16px rgba(255, 196, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(12px, 0.92vw, 15px) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
}
/* Cart icon treatment to visually match the RATMAN footer CTA. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
content: "\f07a";
display: inline-block;
margin-right: clamp(7px, 0.65vw, 11px);
color: #090a0b;
font-family: "FontAwesome";
font-size: clamp(12px, 0.85vw, 14px);
font-style: normal;
font-weight: normal;
line-height: 1;
}
/* Make sure Journal's own icon does not duplicate our cart icon. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart > i,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .fa {
display: none !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .btn-text {
display: inline !important;
color: #090a0b !important;
font: inherit !important;
}
/* Reserve footer space according to the scaling button. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: clamp(62px, 5.2vw, 78px) !important;
}
/* ---------------------------------------------------------
HOVER – SUBTLE ONLY
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart:hover {
transform: translateY(-1px) !important;
background:
linear-gradient(
180deg,
#ffdd48 0%,
#ffc400 100%
) !important;
box-shadow:
0 9px 20px rgba(255, 196, 0, 0.17),
inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
}
/* ---------------------------------------------------------
SMALL MOBILE
Keep button usable without making it dominate the card.
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
width: clamp(122px, 46vw, 160px) !important;
max-width: 160px !important;
min-height: 40px !important;
font-size: 12px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 10px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.2 – NEUTRAL 3D HOMEPAGE CART BUTTON
Scope:
- homepage product cards except RATMAN ROW 12
- keeps button permanently visible bottom-right
- neutral raised/3D treatment for light product cards
- responsive scaling retained from v8.1
========================================================= */
/* ---------------------------------------------------------
NEUTRAL RAISED BUTTON
--------------------------------------------------------- */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
color: #243b56 !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f7f8fa 48%,
#e9edf1 100%
) !important;
border: 1px solid #cbd2d9 !important;
border-bottom-color: #aeb7c0 !important;
border-radius: clamp(6px, 0.5vw, 8px) !important;
box-shadow:
0 5px 0 rgba(150, 160, 170, 0.34),
0 9px 18px rgba(35, 59, 86, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(140, 150, 160, 0.10) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
/* Cart icon follows the neutral navy/graphite treatment. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
color: #243b56 !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .btn-text {
color: #243b56 !important;
}
/* ---------------------------------------------------------
DESKTOP HOVER / PRESS
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart:hover {
transform: translateY(-2px) !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#fbfcfd 48%,
#eef1f4 100%
) !important;
border-color: #b9c2cb !important;
border-bottom-color: #9ea9b3 !important;
box-shadow:
0 6px 0 rgba(145, 155, 165, 0.34),
0 12px 22px rgba(35, 59, 86, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart:active {
transform: translateY(3px) !important;
background:
linear-gradient(
180deg,
#e8ecf0 0%,
#f4f6f8 100%
) !important;
box-shadow:
0 1px 0 rgba(145, 155, 165, 0.32),
0 4px 8px rgba(35, 59, 86, 0.12),
inset 0 2px 4px rgba(35, 59, 86, 0.08) !important;
}
}
/* ---------------------------------------------------------
MOBILE / TOUCH
Slightly flatter shadow so the button stays compact.
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
box-shadow:
0 4px 0 rgba(150, 160, 170, 0.30),
0 7px 14px rgba(35, 59, 86, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.3 – CART BUTTON INSIDE EXISTING CARD HEIGHT
Scope:
- homepage product cards except RATMAN ROW 12
- neutral raised/3D button retained
- button scales to the available card width
- button no longer adds vertical space / card height
========================================================= */
/* Restore the original custom product-card caption bottom padding.
v8.0-v8.2 reserved extra vertical space for the button; this made
the cards taller. The button is now an overlay inside the existing
footer area instead. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 14px !important;
}
/* Reserve the left side of the existing footer for the price.
The cart button occupies the right side without changing card height. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: 54% !important;
}
/* The wrapper itself scales from the product-card width. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 14px !important;
bottom: 12px !important;
left: auto !important;
top: auto !important;
width: min(42%, 170px) !important;
min-width: 0 !important;
max-width: 170px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Button fills the scaling wrapper, never forces the card wider/taller. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
min-height: 42px !important;
height: 42px !important;
padding: 7px 9px !important;
font-size: clamp(10px, 0.72vw, 13px) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Scale the cart icon together with the CTA. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
margin-right: clamp(5px, 0.42vw, 8px) !important;
font-size: clamp(10px, 0.68vw, 13px) !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 12px !important;
bottom: 11px !important;
width: min(44%, 158px) !important;
max-width: 158px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
height: 40px !important;
min-height: 40px !important;
padding: 6px 8px !important;
font-size: 11px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: 52% !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 14px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 10px !important;
width: min(46%, 148px) !important;
max-width: 148px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
height: 38px !important;
min-height: 38px !important;
padding: 5px 7px !important;
font-size: 10px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
margin-right: 5px !important;
font-size: 10px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: 50% !important;
}
}
/* Very small cards/phones: keep the CTA inside the card at all costs. */
@media (max-width: 470px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
width: 44% !important;
max-width: none !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
height: 36px !important;
min-height: 36px !important;
padding: 4px 6px !important;
font-size: 9px !important;
letter-spacing: 0 !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
margin-right: 4px !important;
font-size: 9px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.4 – ICON-ONLY SQUARE CART BUTTON
Scope:
- homepage product cards except RATMAN ROW 12
- neutral raised/3D visual retained
- remove button text
- compact square icon-only Add to Cart button
- button remains permanently visible bottom-right
- card height remains unchanged
========================================================= */
/* Compact square wrapper. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 12px !important;
bottom: 11px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
}
/* Square Add to Cart button. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
padding: 0 !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
/* Hide button text completely. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .btn-text {
display: none !important;
}
/* Single centered cart icon. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
content: "\f07a" !important;
display: block !important;
margin: 0 !important;
color: #243b56 !important;
font-family: "FontAwesome" !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1 !important;
}
/* Keep Journal's own embedded icon hidden so only one icon is shown. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart > i,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart .fa {
display: none !important;
}
/* Price can use more footer width again because CTA is now compact. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: calc(100% - 76px) !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
font-size: 15px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: calc(100% - 70px) !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 10px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group,
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart {
border-radius: 7px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
font-size: 14px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .price {
max-width: calc(100% - 66px) !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.5 – CART BUTTON ALIGNED WITH PRICE
Scope:
- homepage product cards except RATMAN ROW 12
- keeps compact square icon-only neutral 3D button
- card height remains unchanged
- bottom edge of the cart button aligns with bottom edge of price
- "Najnižja cena..." remains below both
========================================================= */
/* The legal lowest-price line sits below the main price.
Move the absolute cart button upward so its BOTTOM edge
aligns with the main price instead of the card bottom. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 12px !important;
bottom: 36px !important;
}
/* Tablet */
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 11px !important;
bottom: 35px !important;
}
}
/* Mobile */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 34px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.6 – LARGER CART ICON
Scope:
- homepage product cards except RATMAN ROW 12
- button size and position unchanged
- increase cart icon to occupy roughly 70–75% of button height
========================================================= */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
font-size: 31px !important;
line-height: 1 !important;
}
/* Tablet */
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
font-size: 29px !important;
}
}
/* Mobile */
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .cart-group .btn-cart::before {
font-size: 27px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.7 – RATMAN TABLET CARD / FOOTER CORRECTION
Scope:
- RATMAN ROW 12 only
- tablet range 761px–1024px only
- no product / swiper / grid-item width overrides
Fixes:
- keep the first and last RATMAN card borders fully inside the row
- remove the tablet horizontal grid overflow / negative edge shift
- scale the RATMAN Add to Cart button to the available card width
- keep price left + button right without overlap
- keep "Najnižja cena..." directly below the price
========================================================= */
@media (min-width: 761px) and (max-width: 1024px) {
/* Keep the three-card rail fully inside the tablet viewport. */
.grid-row.grid-row-top-12 > .grid-cols {
width: calc(100% - 40px) !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Journal can apply negative horizontal grid margins for gutters.
On the narrow 3-column RATMAN tablet layout that clips the
outer card borders. Keep the grid inside its own rail instead. */
.grid-row.grid-row-top-12 .module-products .product-grid {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
.grid-row.grid-row-top-12 .module-products .product-layout {
min-width: 0 !important;
box-sizing: border-box !important;
}
/* -----------------------------------------------------
TABLET FOOTER
----------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb {
padding-bottom: 82px !important;
}
/* Price remains on the left and must not collapse to a
narrow column (which caused the € sign to wrap). */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 16px !important;
right: auto !important;
bottom: 34px !important;
width: auto !important;
max-width: 43% !important;
white-space: nowrap !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-normal,
.grid-row.grid-row-top-12 .module-products .product-thumb .price .price-new {
font-size: 19px !important;
line-height: 1 !important;
}
/* Lowest-price legal line directly below price. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > span {
left: 16px !important;
right: auto !important;
bottom: 11px !important;
width: 43% !important;
max-width: 43% !important;
font-size: 8px !important;
line-height: 1.18 !important;
white-space: normal !important;
text-align: left !important;
}
/* Compact responsive RATMAN CTA on the right. */
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
left: auto !important;
right: 12px !important;
bottom: 14px !important;
width: 48% !important;
min-width: 0 !important;
max-width: 138px !important;
height: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart {
height: 44px !important;
min-height: 44px !important;
padding: 0 10px !important;
font-size: 11px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .cart-group .btn-cart::before {
margin-right: 7px !important;
font-size: 12px !important;
}
/* Footer separator sits above price + legal line + CTA. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption::after {
bottom: 80px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 8.8 – RATMAN MOBILE IMAGE + TABLET OUTER PADDING
Fixes:
1) PHONE: remove the "picture inside picture" effect
- the old mobile rules capped the actual product image at ~195px
inside a much wider white image stage
- on phone the product image now fills the available white stage
- mobile drop-shadow on the source image is removed
2) TABLET: add real outer padding to ROW 12
- do not rely only on a narrower grid-cols width
- neutralize horizontal negative margins in the RATMAN module
- keep first and last card borders fully inside the black section
No product-card width / swiper-slide width hacks.
========================================================= */
/* ---------------------------------------------------------
TABLET – REAL ROW 12 SIDE PADDING
--------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {
.grid-row.grid-row-top-12 {
box-sizing: border-box !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.grid-row.grid-row-top-12 > .grid-cols {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.grid-row.grid-row-top-12 .module-products,
.grid-row.grid-row-top-12 .module-products .module-body,
.grid-row.grid-row-top-12 .module-products .module-item {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-grid {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
/* ---------------------------------------------------------
PHONE – REMOVE "IMAGE INSIDE IMAGE"
--------------------------------------------------------- */
@media (max-width: 760px) {
/* The source product image itself already has a white background.
Let it fill the complete image stage instead of floating as a
small square inside another white rectangle. */
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image > a,
.grid-row.grid-row-top-12 .module-products .product-thumb .image .product-img,
.grid-row.grid-row-top-12 .module-products .product-thumb .image .product-img > div {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img,
.grid-row.grid-row-top-12 .module-products .product-thumb .image img.img-first {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
object-fit: contain !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
}
}
/* Small phone: keep exactly the same full-stage image treatment.
This overrides the old 195px max-height rule. */
@media (max-width: 470px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .image {
min-height: 0 !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .image img,
.grid-row.grid-row-top-12 .module-products .product-thumb .image img.img-first {
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 9.1 CLEAN
BASE: stable v8.8
Includes only:
1) current approved manufacturers navigation behaviour
- pagination dots hidden on all devices
- phone carousel arrows hidden
- desktop logos explicitly reset to original appearance
2) new responsive INFO BLOK design
No manufacturer sizing, spacing, gutter or filter experiments.
========================================================= */
/* =========================================================
MANUFACTURERS – CURRENT APPROVED MINIMAL RULES
========================================================= */
.module-manufacturers .swiper-pagination,
.module-manufacturers .swiper-pagination-bullets,
.module-manufacturers .swiper-pagination-horizontal,
.module-manufacturers .swiper-pagination-bullet,
.module-manufacturers .swiper-pagination-bullet-active {
display: none !important;
}
@media (max-width: 760px) {
.module-manufacturers .swiper-button-prev,
.module-manufacturers .swiper-button-next,
.module-manufacturers .swiper-buttons,
.module-manufacturers .swiper-nav,
.module-manufacturers .carousel-arrows {
display: none !important;
}
}
@media (min-width: 1025px) {
.module-manufacturers img {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
}
/* =========================================================
INFO BLOK – DESKTOP
========================================================= */
.ea-info-strip {
width: min(1120px, calc(100% - 40px));
margin: 0 auto 34px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ea-info-card {
min-width: 0;
min-height: 168px;
padding: 25px 20px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background: #ffffff;
border: 1px solid rgba(24, 49, 77, 0.10);
border-radius: 12px;
box-shadow:
0 8px 22px rgba(24, 49, 77, 0.07),
0 1px 2px rgba(24, 49, 77, 0.04);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.ea-info-icon {
width: 48px;
height: 42px;
margin: 0 0 12px;
display: flex;
align-items: center;
justify-content: center;
color: #79be32;
font-size: 32px;
line-height: 1;
}
.ea-info-icon .fa {
color: inherit !important;
font-size: inherit !important;
line-height: 1 !important;
}
.ea-info-title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #18314d !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.ea-info-text {
margin: 0 !important;
padding: 0 !important;
color: #555f68 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
@media (hover: hover) and (pointer: fine) {
.ea-info-card:hover {
transform: translateY(-3px);
border-color: rgba(121, 190, 50, 0.32);
box-shadow:
0 12px 28px rgba(24, 49, 77, 0.10),
0 2px 4px rgba(24, 49, 77, 0.05);
}
}
/* =========================================================
INFO BLOK – TABLET
========================================================= */
@media (min-width: 761px) and (max-width: 1024px) {
.ea-info-strip {
width: min(760px, calc(100% - 32px));
margin-bottom: 28px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ea-info-card {
min-height: 132px;
padding: 20px 18px;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 4px;
align-items: center;
text-align: left;
}
.ea-info-icon {
grid-column: 1;
grid-row: 1 / span 2;
width: 48px;
height: 48px;
margin: 0;
font-size: 30px;
}
.ea-info-title {
grid-column: 2;
grid-row: 1;
align-self: end;
margin: 0 !important;
font-size: 17px !important;
}
.ea-info-text {
grid-column: 2;
grid-row: 2;
align-self: start;
font-size: 13px !important;
}
}
/* =========================================================
INFO BLOK – PHONE
Compact horizontal rows instead of four huge cards
========================================================= */
@media (max-width: 760px) {
.ea-info-strip {
width: calc(100% - 24px);
margin: 0 auto 24px;
display: block;
background: #ffffff;
border: 1px solid rgba(24, 49, 77, 0.10);
border-radius: 14px;
box-shadow:
0 8px 22px rgba(24, 49, 77, 0.07),
0 1px 2px rgba(24, 49, 77, 0.04);
overflow: hidden;
}
.ea-info-card {
position: relative;
min-height: 0;
padding: 17px 16px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 13px;
row-gap: 3px;
align-items: center;
text-align: left;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none !important;
}
.ea-info-card + .ea-info-card::before {
content: "";
position: absolute;
top: 0;
left: 16px;
right: 16px;
height: 1px;
background: rgba(24, 49, 77, 0.10);
}
.ea-info-icon {
grid-column: 1;
grid-row: 1 / span 2;
width: 44px;
height: 44px;
margin: 0;
font-size: 28px;
}
.ea-info-title {
grid-column: 2;
grid-row: 1;
align-self: end;
margin: 0 !important;
font-size: 16px !important;
line-height: 1.25 !important;
}
.ea-info-text {
grid-column: 2;
grid-row: 2;
align-self: start;
font-size: 13px !important;
line-height: 1.4 !important;
}
}
@media (max-width: 470px) {
.ea-info-strip {
width: calc(100% - 20px);
}
.ea-info-card {
padding: 15px 14px;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 12px;
}
.ea-info-card + .ea-info-card::before {
left: 14px;
right: 14px;
}
.ea-info-icon {
width: 40px;
height: 40px;
font-size: 25px;
}
.ea-info-title {
font-size: 15px !important;
}
.ea-info-text {
font-size: 12.5px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 9.2 CLEAN – FOOTER COLUMN ALIGNMENT
Desktop only:
- align the 4 footer navigation groups with the 4 INFO BLOK cards
- same overall content width as .ea-info-strip
- same 4-column rhythm and 16px gap
- no changes to manufacturers, info cards, mobile footer or navy bar
========================================================= */
@media (min-width: 1025px) {
/* Match the footer navigation row to the INFO BLOK geometry:
1120px max width, 4 equal columns, 16px gaps. */
footer .grid-row:first-child > .grid-cols,
.footer-main .grid-row:first-child > .grid-cols {
width: min(1120px, calc(100% - 40px)) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 0 !important;
}
/* Journal columns must follow the new four-column grid instead of
their previous percentage/flex widths. */
footer .grid-row:first-child > .grid-cols > .grid-col,
.footer-main .grid-row:first-child > .grid-cols > .grid-col {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
flex: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 9.3 CLEAN – FOOTER SPACING REFINEMENT
Desktop only:
- reduce vertical gap between INFO BLOK and footer groups
- add 8px left inset inside each footer group
- keep the same 4-column alignment
========================================================= */
@media (min-width: 1025px) {
/* Bring INFO BLOK visually closer to the footer navigation. */
.ea-info-strip {
margin-bottom: 18px !important;
}
/* Pull the footer navigation row slightly upward. */
footer .grid-row:first-child > .grid-cols,
.footer-main .grid-row:first-child > .grid-cols {
margin-top: -10px !important;
}
/* Small inner inset so each footer group sits comfortably
under its corresponding INFO BLOK card. */
footer .grid-row:first-child > .grid-cols > .grid-col,
.footer-main .grid-row:first-child > .grid-cols > .grid-col {
padding-left: 8px !important;
padding-right: 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 9.4 CLEAN – TIGHTER FOOTER SPACING
Desktop only:
- reduce the remaining vertical distance between INFO BLOK
and footer groups to roughly half of v9.3
- preserve the existing 8px left inset
- preserve the 4-column alignment
========================================================= */
@media (min-width: 1025px) {
.ea-info-strip {
margin-bottom: 8px !important;
}
footer .grid-row:first-child > .grid-cols,
.footer-main .grid-row:first-child > .grid-cols {
margin-top: -18px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.3 CLEAN – RADON SELF-CONTAINED HERO
IMPORTANT:
- Built from the stable v9.4-clean base.
- The new Radon artwork is an actual ![]()
, NOT a CSS background.
- This prevents Journal/CSS cascade from making the image disappear.
- Desktop HTML copy is anchored directly to the image container.
- Tablet/phone show the full image first and the CMS copy below.
- No negative margins / no spread shadows into the previous theme.
- Radon product/blog environment uses a warm yellow/ivory palette.
========================================================= */
/* =========================================================
RADON HERO ROW / OUTER ENVIRONMENT
========================================================= */
.grid-row:has(.ea-radon-hero) {
--ea-radon-yellow: #efb000;
--ea-radon-yellow-soft: #ffd54f;
--ea-radon-navy: #21364d;
--ea-radon-muted: #66717b;
--ea-radon-stage: #fff8e6;
--ea-radon-stage-2: #fff7e2;
position: relative !important;
margin: 0 !important;
padding: 14px 0 8px !important;
overflow: visible !important;
background:
linear-gradient(
180deg,
#fff9eb 0%,
#fff8e6 100%
) !important;
border: 0 !important;
box-shadow: none !important;
}
/* Neutralize Journal wrappers only; the hero itself stays intact. */
.grid-row:has(.ea-radon-hero) > .grid-cols,
.grid-row:has(.ea-radon-hero) > .grid-cols > .grid-col,
.grid-row:has(.ea-radon-hero) .grid-items,
.grid-row:has(.ea-radon-hero) .grid-item,
.grid-row:has(.ea-radon-hero) .module,
.grid-row:has(.ea-radon-hero) .module-body,
.grid-row:has(.ea-radon-hero) .module-item {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
SELF-CONTAINED HERO
========================================================= */
.ea-radon-hero {
position: relative !important;
isolation: isolate !important;
width: calc(100% - 56px) !important;
max-width: 1880px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff9e9 !important;
border: 1px solid rgba(177, 132, 0, 0.14) !important;
border-radius: 24px !important;
box-shadow:
0 4px 10px rgba(79, 58, 10, 0.05),
0 18px 42px rgba(83, 63, 20, 0.09) !important;
}
/* The actual image. This is the key reliability fix. */
.ea-radon-hero-bg {
position: relative !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
DESKTOP COPY – LOCKED TO THE IMAGE
========================================================= */
@media (min-width: 1025px) {
.ea-radon-hero-copy {
position: absolute !important;
z-index: 3 !important;
top: 32.7% !important;
left: 2.9% !important;
width: 29.2% !important;
max-width: 500px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
color: #21364d !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: left !important;
text-shadow: none !important;
}
.ea-radon-danger {
margin: 0 0 12px !important;
padding: 0 !important;
color: #20252a !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(30px, 2.45vw, 46px) !important;
font-weight: 900 !important;
line-height: 0.99 !important;
letter-spacing: -0.04em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.ea-radon-warning {
display: inline-block !important;
max-width: 100% !important;
margin: 0 0 15px !important;
padding: 7px 11px 6px !important;
color: #17212a !important;
background:
linear-gradient(
135deg,
#ffd326 0%,
#f1b800 100%
) !important;
border: 1px solid rgba(181, 128, 0, 0.24) !important;
border-radius: 1px !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(12px, 0.88vw, 16px) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.ea-radon-intro {
width: 94% !important;
max-width: 455px !important;
margin: 0 0 17px !important;
color: #273845 !important;
font-size: clamp(12.5px, 0.84vw, 15px) !important;
font-weight: 500 !important;
line-height: 1.50 !important;
}
.ea-radon-benefits {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
margin: 0 0 19px !important;
padding: 0 !important;
}
.ea-radon-benefit {
position: relative !important;
min-width: 0 !important;
padding: 2px 8px 0 !important;
text-align: center !important;
}
.ea-radon-benefit:not(:last-child)::after {
content: "" !important;
position: absolute !important;
top: 4px !important;
right: 0 !important;
bottom: 3px !important;
width: 1px !important;
background: rgba(70, 68, 60, 0.22) !important;
}
.ea-radon-benefit-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 39px !important;
height: 39px !important;
margin: 0 auto 5px !important;
color: #ebb100 !important;
font-size: 29px !important;
line-height: 1 !important;
}
.ea-radon-benefit-icon .fa {
color: inherit !important;
font-size: inherit !important;
}
.ea-radon-benefit strong {
display: block !important;
margin: 0 0 5px !important;
color: #1e2c38 !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(9px, 0.60vw, 11px) !important;
font-weight: 900 !important;
line-height: 1.13 !important;
text-transform: uppercase !important;
}
.ea-radon-benefit > span:last-child {
display: block !important;
color: #5f6b73 !important;
font-size: clamp(9px, 0.59vw, 10.5px) !important;
font-weight: 500 !important;
line-height: 1.26 !important;
}
.ea-radon-hero-button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
min-height: 48px !important;
margin: 0 !important;
padding: 11px 20px !important;
color: #15212b !important;
background:
linear-gradient(
135deg,
#ffd32d 0%,
#f2b900 60%,
#e6a900 100%
) !important;
border: 1px solid rgba(177, 125, 0, 0.32) !important;
border-radius: 5px !important;
box-shadow:
0 3px 0 rgba(146, 101, 0, 0.13),
0 9px 20px rgba(188, 135, 0, 0.17) !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(11px, 0.76vw, 13px) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
}
.ea-radon-hero-button::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: -72% !important;
top: -20px !important;
height: 1px !important;
background: rgba(67, 67, 61, 0.18) !important;
}
.ea-radon-hero-button-arrow {
font-size: 22px !important;
line-height: 1 !important;
}
.ea-radon-hero-button:hover {
color: #15212b !important;
transform: translateY(-2px) !important;
box-shadow:
0 4px 0 rgba(146, 101, 0, 0.12),
0 13px 25px rgba(188, 135, 0, 0.22) !important;
}
}
/* Mid desktop */
@media (min-width: 1025px) and (max-width: 1450px) {
.ea-radon-hero-copy {
top: 32.4% !important;
left: 3.0% !important;
width: 30.5% !important;
max-width: 450px !important;
}
.ea-radon-danger {
font-size: clamp(27px, 2.30vw, 35px) !important;
}
.ea-radon-warning {
padding: 6px 9px 5px !important;
font-size: 11.5px !important;
}
.ea-radon-intro {
margin-bottom: 13px !important;
font-size: 11.8px !important;
line-height: 1.42 !important;
}
.ea-radon-benefits {
margin-bottom: 15px !important;
}
.ea-radon-benefit {
padding-left: 5px !important;
padding-right: 5px !important;
}
.ea-radon-benefit-icon {
width: 31px !important;
height: 31px !important;
margin-bottom: 4px !important;
font-size: 23px !important;
}
.ea-radon-benefit strong,
.ea-radon-benefit > span:last-child {
font-size: 8.8px !important;
}
.ea-radon-hero-button {
min-height: 44px !important;
padding: 9px 16px !important;
font-size: 10.5px !important;
}
}
/* =========================================================
TABLET – IMAGE FIRST, CMS COPY BELOW
========================================================= */
@media (max-width: 1024px) {
.grid-row:has(.ea-radon-hero) {
padding: 12px 0 6px !important;
}
.ea-radon-hero {
width: calc(100% - 32px) !important;
border-radius: 20px !important;
}
.ea-radon-hero-bg {
width: 100% !important;
height: auto !important;
}
.ea-radon-hero-copy {
position: relative !important;
top: auto !important;
left: auto !important;
width: calc(100% - 32px) !important;
max-width: 900px !important;
margin: 16px auto 18px !important;
padding: 24px 24px 23px !important;
background:
linear-gradient(
180deg,
rgba(255,255,255,0.985) 0%,
rgba(255,252,242,0.985) 100%
) !important;
border: 1px solid rgba(157, 119, 25, 0.12) !important;
border-radius: 14px !important;
box-shadow:
0 9px 24px rgba(87, 66, 18, 0.08) !important;
}
.ea-radon-danger {
margin: 0 0 10px !important;
color: #20252a !important;
font-family: "Montserrat", sans-serif !important;
font-size: 30px !important;
font-weight: 900 !important;
line-height: 1.02 !important;
text-transform: uppercase !important;
}
.ea-radon-warning {
display: inline-block !important;
margin: 0 0 14px !important;
padding: 7px 10px 6px !important;
color: #17212a !important;
background: #f2b900 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 13px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
.ea-radon-intro {
max-width: 720px !important;
margin: 0 0 18px !important;
color: #374957 !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.ea-radon-benefits {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
margin: 0 0 18px !important;
}
.ea-radon-benefit {
position: relative !important;
padding: 10px 8px !important;
text-align: center !important;
}
.ea-radon-benefit:not(:last-child)::after {
content: "" !important;
position: absolute !important;
top: 10% !important;
right: 0 !important;
bottom: 10% !important;
width: 1px !important;
background: rgba(70,68,60,0.18) !important;
}
.ea-radon-benefit-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 35px !important;
height: 35px !important;
margin: 0 auto 5px !important;
color: #ebb100 !important;
font-size: 25px !important;
}
.ea-radon-benefit strong {
display: block !important;
margin-bottom: 4px !important;
color: #1e2c38 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 10.5px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
text-transform: uppercase !important;
}
.ea-radon-benefit > span:last-child {
display: block !important;
color: #65717a !important;
font-size: 10.5px !important;
line-height: 1.3 !important;
}
.ea-radon-hero-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
min-height: 48px !important;
padding: 11px 18px !important;
color: #15212b !important;
background: #f2b900 !important;
border: 1px solid rgba(177,125,0,0.30) !important;
border-radius: 5px !important;
font-family: "Montserrat", sans-serif !important;
font-size: 12px !important;
font-weight: 900 !important;
text-decoration: none !important;
}
}
/* =========================================================
PHONE – 2x2 BENEFITS
========================================================= */
@media (max-width: 760px) {
.grid-row:has(.ea-radon-hero) {
padding-top: 8px !important;
padding-bottom: 4px !important;
}
.ea-radon-hero {
width: calc(100% - 20px) !important;
border-radius: 16px !important;
}
.ea-radon-hero-copy {
width: calc(100% - 20px) !important;
margin: 10px auto 14px !important;
padding: 19px 16px 18px !important;
border-radius: 12px !important;
}
.ea-radon-danger {
font-size: clamp(24px, 7.5vw, 30px) !important;
}
.ea-radon-warning {
display: block !important;
width: 100% !important;
font-size: 12px !important;
text-align: center !important;
}
.ea-radon-intro {
font-size: 13px !important;
}
.ea-radon-benefits {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ea-radon-benefit {
border-bottom: 1px solid rgba(70,68,60,0.14) !important;
}
.ea-radon-benefit:nth-child(2)::after {
content: none !important;
display: none !important;
}
.ea-radon-benefit-icon {
font-size: 24px !important;
}
.ea-radon-hero-button {
width: 100% !important;
}
}
/* =========================================================
RADON PRODUCT + BLOG ENVIRONMENT
========================================================= */
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-top: 6px !important;
background:
radial-gradient(
ellipse at 88% 18%,
rgba(246, 184, 0, 0.10) 0%,
rgba(246, 184, 0, 0) 44%
),
linear-gradient(
180deg,
#fff8e6 0%,
#fff7e2 100%
) !important;
}
.grid-row:has(.module-blog_posts-341) {
background:
radial-gradient(
ellipse at 12% 30%,
rgba(246, 184, 0, 0.075) 0%,
rgba(246, 184, 0, 0) 44%
),
linear-gradient(
180deg,
#fff7e2 0%,
#fffaf0 68%,
#fbfcfd 100%
) !important;
box-shadow:
0 24px 58px rgba(90, 69, 20, 0.055) !important;
}
/* Product/blog headings */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title,
.module-blog_posts-341
.title.module-title {
color: #21364d !important;
text-shadow: none !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.title.module-title::after,
.module-blog_posts-341
.title.module-title::after {
background:
linear-gradient(
90deg,
#e7ac00 0%,
#ffd34a 72%,
rgba(255,211,74,0) 100%
) !important;
box-shadow:
0 2px 9px rgba(194,142,0,0.17) !important;
}
/* Blog CTA: yellow/gold, no orange */
.module-blog_posts-341 .post-thumb .button-group .btn {
color: #172635 !important;
background:
linear-gradient(
135deg,
#ffd84b 0%,
#f5bd12 52%,
#e7a900 100%
) !important;
border:
1px solid rgba(183,132,0,0.38) !important;
box-shadow:
0 3px 0 rgba(128,89,0,0.14),
0 10px 20px rgba(190,139,0,0.15) !important;
}
.module-blog_posts-341 .post-thumb .button-group .btn:hover,
.module-blog_posts-341 .post-thumb .button-group .btn:focus {
color: #172635 !important;
filter: brightness(1.035) !important;
box-shadow:
0 4px 0 rgba(128,89,0,0.12),
0 14px 26px rgba(190,139,0,0.22) !important;
}
.module-blog_posts-341 .post-thumb .name a:hover,
.module-blog_posts-341 .post-thumb .post-title a:hover,
.module-blog_posts-341 .post-thumb h4 a:hover {
color: #c89200 !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.4 CLEAN – RADON SPACING + WARM TONE MATCH
Changes:
- adds more breathing room between the embedded RADON artwork
and the HTML heading INVISIBLE DANGER / NEVIDNA NEVARNOST
- warms the hero artwork so its pale/grey background blends
better with the yellow/ivory Radon product section
- keeps the actual hero image as an ![]()
- no changes to carousel widths or other homepage themes
========================================================= */
/* =========================================================
RADON HERO – WARM IMAGE TONE
========================================================= */
.ea-radon-hero {
background:
linear-gradient(
180deg,
#fff8e6 0%,
#fff7e2 100%
) !important;
}
/* Subtle warm veil over the raster artwork.
This removes the cool/grey cast without destroying detail. */
.ea-radon-hero::after {
content: "" !important;
position: absolute !important;
z-index: 1 !important;
inset: 0 !important;
display: block !important;
pointer-events: none !important;
background:
linear-gradient(
180deg,
rgba(255, 226, 128, 0.085) 0%,
rgba(255, 234, 159, 0.070) 58%,
rgba(255, 242, 194, 0.090) 100%
) !important;
border-radius: inherit !important;
}
/* Keep HTML above the warm tone overlay. */
.ea-radon-hero-copy {
z-index: 3 !important;
}
/* =========================================================
DESKTOP – MORE SPACE BELOW EMBEDDED "RADON"
========================================================= */
@media (min-width: 1025px) {
.ea-radon-hero-copy {
/*
* v10.3 = 32.7%
* v10.4 = 35.0%
*
* Gives the heading a clear visual gap below RADON.
*/
top: 35.0% !important;
}
}
/* Mid desktop keeps the same added spacing proportion. */
@media (min-width: 1025px) and (max-width: 1450px) {
.ea-radon-hero-copy {
top: 34.8% !important;
}
}
/* =========================================================
RADON SECTION BACKGROUND – EXACT WARM CONTINUITY
========================================================= */
.grid-row:has(.ea-radon-hero) {
background:
linear-gradient(
180deg,
#fff8e6 0%,
#fff7e2 100%
) !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) {
background:
radial-gradient(
ellipse at 88% 18%,
rgba(246, 184, 0, 0.085) 0%,
rgba(246, 184, 0, 0) 44%
),
linear-gradient(
180deg,
#fff7e2 0%,
#fff7e2 100%
) !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.5 CLEAN – RADON TITLE VERTICAL STRETCH
Change:
- vertically stretches only the HTML heading
INVISIBLE DANGER / NEVIDNA NEVARNOST
- width remains unchanged
========================================================= */
.ea-radon-danger {
display: inline-block !important;
transform: scaleY(1.16) !important;
transform-origin: left center !important;
/* Extra room for the visually taller letters. */
margin-bottom: 16px !important;
}
/* Slightly gentler stretch on smaller screens. */
@media (max-width: 1024px) {
.ea-radon-danger {
transform: scaleY(1.10) !important;
transform-origin: left center !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.6 CLEAN - RADON BLOG 3D STAGE FIX
Changes from v10.5:
- keeps the Radon blog on the warm yellow / ivory stage
instead of fading to the cold white page background
- adds safe breathing room around the blog carousel so the
card depth is visible at the outer edges and below cards
- strengthens the premium 3D shadow without changing
Journal slide widths / items-per-row geometry
- preserves all Radon blog content, images and CTA styling
========================================================= */
/* ---------------------------------------------------------
RADON BLOG ROW - WARM CONTINUOUS BACKGROUND
--------------------------------------------------------- */
.grid-row:has(.module-blog_posts-341) {
padding-top: 10px !important;
padding-bottom: 68px !important;
overflow: visible !important;
background:
radial-gradient(
ellipse at 12% 24%,
rgba(238, 178, 0, 0.10) 0%,
rgba(238, 178, 0, 0.035) 31%,
rgba(238, 178, 0, 0) 56%
),
radial-gradient(
ellipse at 88% 72%,
rgba(255, 214, 88, 0.11) 0%,
rgba(255, 214, 88, 0.028) 34%,
rgba(255, 214, 88, 0) 58%
),
linear-gradient(
180deg,
#fff7e2 0%,
#fff8e8 48%,
#fff6df 100%
) !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
BLOG MODULE - SAFE SPACE FOR THE 3D CARD SHADOWS
No swiper / slide width rules are used.
--------------------------------------------------------- */
.module-blog_posts-341 {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 10px 26px 34px !important;
overflow: visible !important;
}
.module-blog_posts-341 .module-body,
.module-blog_posts-341 .module-item {
overflow: visible !important;
}
/* Keep the heading visually aligned after adding module padding. */
.module-blog_posts-341 .title.module-title {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ---------------------------------------------------------
BLOG CARDS - CLEARER DEPTH ON THE IVORY STAGE
--------------------------------------------------------- */
.module-blog_posts-341 .post-thumb {
border: 1px solid rgba(155, 118, 24, 0.14) !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 72%,
#fffdf8 100%
) !important;
box-shadow:
-2px 5px 0 rgba(104, 83, 30, 0.050),
4px 12px 22px rgba(75, 58, 19, 0.085),
-6px 24px 44px rgba(75, 58, 19, 0.055),
10px 32px 58px rgba(75, 58, 19, 0.060),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* Desktop hover keeps the same direction of depth, only stronger. */
@media (min-width: 1025px) {
.module-blog_posts-341 .post-thumb:hover {
transform: translateY(-7px) scale(1.004);
border-color: rgba(214, 164, 20, 0.28) !important;
box-shadow:
-3px 6px 0 rgba(104, 83, 30, 0.045),
5px 18px 30px rgba(75, 58, 19, 0.115),
-8px 31px 54px rgba(75, 58, 19, 0.070),
12px 42px 72px rgba(75, 58, 19, 0.072),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row:has(.module-blog_posts-341) {
padding-top: 8px !important;
padding-bottom: 54px !important;
}
.module-blog_posts-341 {
padding: 8px 18px 28px !important;
}
}
/* ---------------------------------------------------------
PHONE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:has(.module-blog_posts-341) {
padding-top: 6px !important;
padding-bottom: 38px !important;
}
.module-blog_posts-341 {
padding: 6px 10px 22px !important;
}
.module-blog_posts-341 .post-thumb {
box-shadow:
-1px 3px 0 rgba(104, 83, 30, 0.045),
3px 8px 17px rgba(75, 58, 19, 0.075),
-4px 16px 28px rgba(75, 58, 19, 0.045),
6px 21px 36px rgba(75, 58, 19, 0.050),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row:has(.module-blog_posts-341) {
padding-bottom: 32px !important;
}
.module-blog_posts-341 {
padding: 5px 7px 18px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.8 CLEAN - RADON INDIVIDUAL 3D CARD SPACING
IMPORTANT:
- based on v10.6-clean (v10.7 grey rear-plate experiment removed)
- preserves the previous clean white Radon card design
- no grey border / no pseudo-element plate around cards
- gives EACH product and blog card enough space for its own shadow
- shadows stay compact enough not to merge into one grey strip
- no swiper widths / slide widths / items-per-row changes
========================================================= */
/* ---------------------------------------------------------
RADON PRODUCT ROW - EXTRA SAFE SPACE FOR CARD DEPTH
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341) {
overflow: visible !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-items,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-item,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-body,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item {
overflow: visible !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
box-sizing: border-box !important;
padding: 10px 20px 42px !important;
}
/* Keep each Journal carousel item separate without changing its width. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
box-sizing: border-box !important;
padding: 12px 9px 28px !important;
overflow: visible !important;
background: transparent !important;
}
/* Allow the individual shadows to breathe. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-container,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-wrapper {
overflow: visible !important;
background: transparent !important;
}
/* ---------------------------------------------------------
RADON PRODUCT CARDS - ORIGINAL CLEAN SURFACE + OWN 3D SHADOW
No extra grey frame is created.
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
position: relative !important;
/* Keep the existing card surface / rounded design. */
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 75%,
#f8f9fa 100%
) !important;
border-color: rgba(255, 255, 255, 0.82) !important;
box-shadow:
0 3px 0 rgba(56, 65, 74, 0.040),
0 10px 18px rgba(53, 63, 73, 0.090),
0 23px 38px rgba(53, 63, 73, 0.075),
0 34px 54px rgba(53, 63, 73, 0.040),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease !important;
}
@media (min-width: 1025px) {
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb:hover {
transform: translateY(-7px) scale(1.003) !important;
box-shadow:
0 4px 0 rgba(56, 65, 74, 0.035),
0 14px 24px rgba(53, 63, 73, 0.115),
0 29px 48px rgba(53, 63, 73, 0.090),
0 43px 68px rgba(53, 63, 73, 0.050),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
RADON BLOG - SAME INDIVIDUAL 3D LANGUAGE
Keep v10.6 card design; only give shadows more room and separation.
--------------------------------------------------------- */
.module-blog_posts-341 {
padding: 12px 30px 50px !important;
overflow: visible !important;
}
.module-blog_posts-341 .module-body,
.module-blog_posts-341 .module-item,
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container,
.module-blog_posts-341 .swiper-wrapper {
overflow: visible !important;
background: transparent !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
box-sizing: border-box !important;
padding: 12px 10px 30px !important;
overflow: visible !important;
background: transparent !important;
}
.module-blog_posts-341 .post-thumb {
/* No grey outline: retain the warm, almost invisible edge. */
border-color: rgba(184, 145, 46, 0.11) !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#ffffff 74%,
#fffdf8 100%
) !important;
box-shadow:
0 3px 0 rgba(83, 68, 35, 0.035),
0 10px 18px rgba(75, 58, 19, 0.080),
0 23px 38px rgba(75, 58, 19, 0.065),
0 34px 54px rgba(75, 58, 19, 0.038),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
@media (min-width: 1025px) {
.module-blog_posts-341 .post-thumb:hover {
transform: translateY(-7px) scale(1.003) !important;
border-color: rgba(198, 153, 36, 0.17) !important;
box-shadow:
0 4px 0 rgba(83, 68, 35, 0.032),
0 14px 24px rgba(75, 58, 19, 0.105),
0 29px 48px rgba(75, 58, 19, 0.080),
0 43px 68px rgba(75, 58, 19, 0.045),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
padding: 8px 14px 34px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
padding: 10px 7px 23px !important;
}
.module-blog_posts-341 {
padding: 10px 20px 40px !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
padding: 10px 8px 24px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
padding: 6px 8px 28px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
padding: 8px 5px 19px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
transform: none !important;
box-shadow:
0 2px 0 rgba(56, 65, 74, 0.035),
0 7px 14px rgba(53, 63, 73, 0.075),
0 16px 27px rgba(53, 63, 73, 0.055),
0 25px 38px rgba(53, 63, 73, 0.030),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-341 {
padding: 8px 12px 32px !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
padding: 8px 5px 20px !important;
}
.module-blog_posts-341 .post-thumb {
transform: none !important;
box-shadow:
0 2px 0 rgba(83, 68, 35, 0.032),
0 7px 14px rgba(75, 58, 19, 0.070),
0 16px 27px rgba(75, 58, 19, 0.050),
0 25px 38px rgba(75, 58, 19, 0.028),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
padding-left: 5px !important;
padding-right: 5px !important;
padding-bottom: 24px !important;
}
.module-blog_posts-341 {
padding-left: 8px !important;
padding-right: 8px !important;
padding-bottom: 27px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.10 CLEAN - RADON CAROUSEL VIEWPORT + SPACING FIX
PURPOSE:
- restore the native Journal carousel viewport so only the
configured number of cards is visible
- keep 4 products / 3 blog cards controlled by Journal
- preserve the clean white Radon cards and individual 3D shadows
- remove the oversized vertical gap between Products and Blog
- provide ONE controlled bottom shadow zone, not stacked padding
- no swiper widths / slide widths / items-per-row changes
========================================================= */
/* ---------------------------------------------------------
RADON PRODUCT ROW - COMPACT SECTION RHYTHM
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-top: 6px !important;
padding-bottom: 8px !important;
overflow: visible !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
box-sizing: border-box !important;
margin: 0 !important;
padding: 6px 12px 0 !important;
background: transparent !important;
}
/* Keep the existing Journal slide width. Add only a small internal
side inset so each card remains visually separate. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
box-sizing: border-box !important;
padding: 8px 8px 0 !important;
background: transparent !important;
}
/* IMPORTANT: the carousel viewport must clip horizontally again.
This is what prevents the previous / next slides from appearing
outside the intended 4-card desktop view. The 30px bottom padding
gives the 3D shadow room to finish INSIDE the viewport. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-container {
box-sizing: border-box !important;
overflow: hidden !important;
padding-top: 0 !important;
padding-bottom: 30px !important;
background: transparent !important;
clip-path: none !important;
contain: none !important;
}
/* The track itself stays normal. Do not make it a visible overflow
surface because that exposes neighbouring slides. */
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-wrapper {
overflow: visible !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
}
/* Keep non-carousel Journal shells neutral without creating more
vertical clearance. */
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols,
.grid-row:has(+ .grid-row .module-blog_posts-341) > .grid-cols > .grid-col,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-items,
.grid-row:has(+ .grid-row .module-blog_posts-341) .grid-item,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-body,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item {
background: transparent !important;
}
/* ---------------------------------------------------------
RADON BLOG ROW - REMOVE THE LARGE EMPTY BAND
--------------------------------------------------------- */
.grid-row:has(.module-blog_posts-341) {
padding-top: 8px !important;
padding-bottom: 34px !important;
overflow: visible !important;
}
.module-blog_posts-341 {
box-sizing: border-box !important;
margin: 0 !important;
padding: 6px 12px 0 !important;
background: transparent !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
box-sizing: border-box !important;
padding: 8px 8px 0 !important;
background: transparent !important;
}
/* Restore the blog carousel mask so only Journal's configured
3 cards are visible. Keep one compact bottom shadow zone. */
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
box-sizing: border-box !important;
overflow: hidden !important;
padding-top: 0 !important;
padding-bottom: 32px !important;
background: transparent !important;
clip-path: none !important;
contain: none !important;
}
.module-blog_posts-341 .swiper-wrapper {
overflow: visible !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
}
.module-blog_posts-341 .module-body,
.module-blog_posts-341 .module-item,
.module-blog_posts-341 .grid-items,
.module-blog_posts-341 .grid-item {
background: transparent !important;
}
/* ---------------------------------------------------------
DESKTOP - KEEP INDIVIDUAL CARD DEPTH, NOT A GREY STRIP
--------------------------------------------------------- */
@media (min-width: 1025px) {
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products
.product-thumb {
box-shadow:
0 4px 0 rgba(83, 63, 20, 0.045),
0 13px 26px rgba(75, 58, 19, 0.090),
0 25px 42px rgba(75, 58, 19, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.module-blog_posts-341 .post-thumb {
box-shadow:
0 4px 0 rgba(83, 63, 20, 0.045),
0 13px 26px rgba(75, 58, 19, 0.090),
0 25px 42px rgba(75, 58, 19, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-bottom: 7px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
padding: 5px 8px 0 !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
padding: 7px 6px 0 !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-container {
padding-bottom: 26px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-top: 7px !important;
padding-bottom: 30px !important;
}
.module-blog_posts-341 {
padding: 5px 9px 0 !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
padding: 7px 6px 0 !important;
}
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
padding-bottom: 28px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-top: 4px !important;
padding-bottom: 6px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products {
padding: 4px 5px 0 !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-slide,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .product-layout,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .module-item.product-layout {
padding: 6px 4px 0 !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products .swiper-container {
padding-bottom: 22px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-top: 6px !important;
padding-bottom: 24px !important;
}
.module-blog_posts-341 {
padding: 4px 6px 0 !important;
}
.module-blog_posts-341 .swiper-slide,
.module-blog_posts-341 .post-layout,
.module-blog_posts-341 .module-item.post-layout {
padding: 6px 4px 0 !important;
}
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
padding-bottom: 22px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) .module-products,
.module-blog_posts-341 {
padding-left: 4px !important;
padding-right: 4px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.11 CLEAN - RADON GAP REFINEMENT
PURPOSE:
- narrow Products -> Blog vertical gap
- narrow Blog -> next homepage section vertical gap
- preserve the current clean Radon cards and 3D shadows
- keep Journal's native 4-product / 3-blog carousel geometry
- no swiper widths / slide widths / items-per-row changes
========================================================= */
/* ---------------------------------------------------------
DESKTOP - TIGHTER PRODUCT -> BLOG RHYTHM
--------------------------------------------------------- */
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-bottom: 2px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper-container {
padding-bottom: 22px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-top: 2px !important;
padding-bottom: 12px !important;
}
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
padding-bottom: 22px !important;
}
/* Pull only the section immediately AFTER the Radon blog closer.
This avoids changing spacing elsewhere on the homepage. */
.grid-row:has(.module-blog_posts-341) + .grid-row {
padding-top: 14px !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-bottom: 2px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper-container {
padding-bottom: 20px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-top: 2px !important;
padding-bottom: 10px !important;
}
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
padding-bottom: 20px !important;
}
.grid-row:has(.module-blog_posts-341) + .grid-row {
padding-top: 12px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
.grid-row:has(+ .grid-row .module-blog_posts-341) {
padding-bottom: 1px !important;
}
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper,
.grid-row:has(+ .grid-row .module-blog_posts-341)
.module-products .swiper-container {
padding-bottom: 17px !important;
}
.grid-row:has(.module-blog_posts-341) {
padding-top: 2px !important;
padding-bottom: 8px !important;
}
.module-blog_posts-341 .swiper,
.module-blog_posts-341 .swiper-container {
padding-bottom: 17px !important;
}
.grid-row:has(.module-blog_posts-341) + .grid-row {
padding-top: 8px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.12 CLEAN - CONTACT PAGE REDESIGN
Scope:
- Contact page only (#information-contact)
- preserves Journal Form module 20 action / validation / reCAPTCHA
- preserves Google Maps iframe
- no checkout / product / account form changes
========================================================= */
/* ---------------------------------------------------------
CONTACT PAGE - GLOBAL STAGE
--------------------------------------------------------- */
body:has(#information-contact) #information-contact {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 34px 32px 58px !important;
box-sizing: border-box !important;
background:
radial-gradient(
ellipse at 8% 10%,
rgba(142, 198, 57, 0.055) 0%,
rgba(142, 198, 57, 0) 34%
),
radial-gradient(
ellipse at 92% 18%,
rgba(34, 67, 98, 0.045) 0%,
rgba(34, 67, 98, 0) 36%
),
linear-gradient(
180deg,
#f8fafb 0%,
#f4f7f8 100%
) !important;
}
body:has(#information-contact) #information-contact > .row {
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
}
body:has(#information-contact) #information-contact > .row > #content {
width: 100% !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body:has(#information-contact) #information-contact .grid-row,
body:has(#information-contact) #information-contact .grid-cols,
body:has(#information-contact) #information-contact .grid-col,
body:has(#information-contact) #information-contact .grid-items,
body:has(#information-contact) #information-contact .grid-item {
box-sizing: border-box !important;
}
/* ---------------------------------------------------------
CONTACT HERO - BREADCRUMB + PAGE TITLE
--------------------------------------------------------- */
body:has(#information-contact) .breadcrumb {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 31px 20px 7px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background:
radial-gradient(
circle at 11% 54%,
rgba(255, 255, 255, 0.055) 0 2px,
transparent 3px
),
linear-gradient(
180deg,
#31475f 0%,
#2b4058 100%
) !important;
border: 0 !important;
border-radius: 0 !important;
}
body:has(#information-contact) .breadcrumb > li,
body:has(#information-contact) .breadcrumb > li > a,
body:has(#information-contact) .breadcrumb > li::before {
color: rgba(255, 255, 255, 0.88) !important;
}
body:has(#information-contact) .breadcrumb > li,
body:has(#information-contact) .breadcrumb > li > a {
font-size: 15px !important;
font-weight: 500 !important;
}
body:has(#information-contact) .title.page-title {
position: relative !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 7px 20px 38px !important;
color: #ffffff !important;
background:
radial-gradient(
ellipse at 8% 40%,
rgba(255, 255, 255, 0.045) 0%,
rgba(255, 255, 255, 0) 35%
),
radial-gradient(
ellipse at 92% 35%,
rgba(255, 255, 255, 0.035) 0%,
rgba(255, 255, 255, 0) 34%
),
linear-gradient(
180deg,
#2b4058 0%,
#293e55 100%
) !important;
border: 0 !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(32px, 2.4vw, 46px) !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -0.025em !important;
text-align: center !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
}
html[lang^="sl"] body:has(#information-contact) .title.page-title::after {
content: "Z veseljem vam pomagamo in odgovorimo na vaša vprašanja.";
}
html[lang^="en"] body:has(#information-contact) .title.page-title::after {
content: "We are happy to help and answer your questions.";
}
body:has(#information-contact) .title.page-title::after {
display: block !important;
margin-top: 10px !important;
color: rgba(255, 255, 255, 0.86) !important;
font-family: "Montserrat", sans-serif !important;
font-size: clamp(13px, 0.95vw, 16px) !important;
font-weight: 500 !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* ---------------------------------------------------------
TOP CONTACT INFO CARDS
Journal module: module-info_blocks-194
--------------------------------------------------------- */
#information-contact .grid-row-content-top-1 {
margin: 0 0 22px !important;
padding: 0 !important;
background: transparent !important;
}
#information-contact .grid-row-content-top-1 > .grid-cols,
#information-contact .grid-row-content-top-1 > .grid-cols > .grid-col,
#information-contact .grid-row-content-top-1 .grid-items,
#information-contact .grid-row-content-top-1 .grid-item,
#information-contact .module-info_blocks-194 {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#information-contact .module-info_blocks-194 .module-body {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#information-contact .module-info_blocks-194 .module-item {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
#information-contact .module-info_blocks-194 .info-block {
position: relative !important;
min-height: 154px !important;
height: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 25px 22px 22px 82px !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#fdfefe 100%
) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 13px 28px rgba(31, 55, 79, 0.075),
0 26px 48px rgba(31, 55, 79, 0.04) !important;
overflow: visible !important;
transition:
transform 0.20s ease,
box-shadow 0.20s ease,
border-color 0.20s ease !important;
}
#information-contact .module-info_blocks-194 .info-block::before {
position: absolute !important;
left: 22px !important;
top: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
color: #83c52f !important;
background:
linear-gradient(
180deg,
#f2f9e8 0%,
#edf7df 100%
) !important;
border: 1px solid rgba(131, 197, 47, 0.12) !important;
border-radius: 13px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 6px 16px rgba(104, 159, 35, 0.07) !important;
font-family: "FontAwesome" !important;
font-size: 25px !important;
font-weight: 400 !important;
line-height: 1 !important;
text-align: center !important;
}
#information-contact .module-info_blocks-194 .module-item:nth-child(1) .info-block::before {
content: "\f041" !important;
}
#information-contact .module-info_blocks-194 .module-item:nth-child(2) .info-block::before {
content: "\f017" !important;
}
#information-contact .module-info_blocks-194 .module-item:nth-child(3) .info-block::before {
content: "\f095" !important;
}
#information-contact .module-info_blocks-194 .module-item:nth-child(4) .info-block::before {
content: "\f0e0" !important;
}
#information-contact .module-info_blocks-194 .info-block-content {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
#information-contact .module-info_blocks-194 .info-block-title {
margin: 0 0 8px !important;
padding: 0 !important;
color: #20364f !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a {
color: #526578 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
text-decoration: none !important;
}
#information-contact .module-info_blocks-194 .info-block-text a:hover {
color: #6faa25 !important;
}
@media (min-width: 1025px) {
#information-contact .module-info_blocks-194 .info-block:hover {
transform: translateY(-5px) !important;
border-color: rgba(131, 197, 47, 0.20) !important;
box-shadow:
0 4px 0 rgba(25, 55, 80, 0.022),
0 18px 34px rgba(31, 55, 79, 0.095),
0 34px 58px rgba(31, 55, 79, 0.055) !important;
}
}
/* ---------------------------------------------------------
FORM + MAP ROW
--------------------------------------------------------- */
#information-contact .grid-row-content-top-2 {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols {
display: grid !important;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
gap: 22px !important;
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
float: none !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .grid-row-content-top-2 .grid-items,
#information-contact .grid-row-content-top-2 .grid-item {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* ---------------------------------------------------------
CONTACT FORM CARD
Journal module: module-form-20
--------------------------------------------------------- */
#information-contact .module-form-20 {
height: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 28px 30px 29px !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#fefefe 100%
) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 20px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 14px 30px rgba(31, 55, 79, 0.075),
0 30px 54px rgba(31, 55, 79, 0.04) !important;
}
#information-contact .module-form-20 .title.module-title {
position: relative !important;
margin: 0 0 28px !important;
padding: 0 0 13px !important;
color: #20364f !important;
font-family: "Montserrat", sans-serif !important;
font-size: 0 !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-transform: none !important;
}
html[lang^="sl"] #information-contact .module-form-20 .title.module-title::before {
content: "Pošljite nam sporočilo" !important;
}
html[lang^="en"] #information-contact .module-form-20 .title.module-title::before {
content: "Send us a message" !important;
}
#information-contact .module-form-20 .title.module-title::before {
display: block !important;
color: #20364f !important;
font-family: "Montserrat", sans-serif !important;
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
#information-contact .module-form-20 .title.module-title::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 42px !important;
height: 3px !important;
background: #83c52f !important;
border-radius: 99px !important;
box-shadow: 0 2px 8px rgba(131, 197, 47, 0.18) !important;
}
#information-contact .module-form-20 .module-body {
margin: 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 form,
#information-contact .module-form-20 fieldset {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
#information-contact .module-form-20 fieldset {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
#information-contact .module-form-20 .form-group {
margin: 0 !important;
}
#information-contact .module-form-20 .form-group.custom-field {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(3),
#information-contact .module-form-20 .form-group.captcha,
#information-contact .module-form-20 fieldset > .checkbox {
grid-column: 1 / -1 !important;
}
#information-contact .module-form-20 .control-label {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 0 7px !important;
color: #294159 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-align: left !important;
}
#information-contact .module-form-20 .required .control-label::before,
#information-contact .module-form-20 .required .control-label::after {
color: #83c52f !important;
}
#information-contact .module-form-20 .col-sm-10,
#information-contact .module-form-20 .col-sm-2 {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#information-contact .module-form-20 .form-control {
width: 100% !important;
box-sizing: border-box !important;
color: #23384e !important;
background: #fbfcfd !important;
border: 1px solid #dce4e9 !important;
border-radius: 11px !important;
box-shadow:
inset 0 1px 2px rgba(27, 48, 67, 0.025),
0 1px 0 rgba(255, 255, 255, 0.9) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease !important;
}
#information-contact .module-form-20 input.form-control {
height: 52px !important;
padding: 0 15px !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 148px !important;
resize: vertical !important;
padding: 14px 15px !important;
line-height: 1.55 !important;
}
#information-contact .module-form-20 .form-control::placeholder {
color: #9aa8b4 !important;
opacity: 1 !important;
}
#information-contact .module-form-20 .form-control:focus {
background: #ffffff !important;
border-color: rgba(131, 197, 47, 0.72) !important;
box-shadow:
0 0 0 3px rgba(131, 197, 47, 0.10),
0 7px 18px rgba(36, 65, 89, 0.055) !important;
outline: none !important;
}
#information-contact .module-form-20 .captcha {
min-height: 0 !important;
}
#information-contact .module-form-20 .grecaptcha-container,
#information-contact .module-form-20 .grecaptcha-container > .form-group {
margin: 0 !important;
min-height: 0 !important;
}
#information-contact .module-form-20 .grecaptcha-error,
#information-contact .module-form-20 .text-danger {
margin: 5px 0 0 !important;
padding: 9px 11px !important;
color: #9f3131 !important;
background: #fff4f4 !important;
border: 1px solid rgba(180, 49, 49, 0.14) !important;
border-radius: 8px !important;
font-size: 12px !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
margin: 1px 0 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 fieldset > .checkbox label {
display: flex !important;
align-items: flex-start !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
color: #526578 !important;
font-family: "Montserrat", sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
}
#information-contact .module-form-20 fieldset > .checkbox input[type="checkbox"] {
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
margin: 1px 0 0 !important;
accent-color: #83c52f !important;
}
#information-contact .module-form-20 fieldset > .checkbox a,
#information-contact .module-form-20 fieldset > .checkbox a b {
color: #67a91f !important;
font-weight: 700 !important;
text-decoration: none !important;
}
#information-contact .module-form-20 fieldset > .checkbox a:hover,
#information-contact .module-form-20 fieldset > .checkbox a:hover b {
color: #4f8d11 !important;
}
#information-contact .module-form-20 .buttons {
margin: 18px 0 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 .buttons .pull-right {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
#information-contact .module-form-20 .btn.btn-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 12px 20px !important;
color: #ffffff !important;
background:
linear-gradient(
135deg,
#98cf35 0%,
#83c52f 54%,
#70b624 100%
) !important;
border: 1px solid rgba(102, 166, 31, 0.55) !important;
border-radius: 10px !important;
box-shadow:
0 3px 0 rgba(77, 130, 20, 0.14),
0 12px 24px rgba(117, 182, 37, 0.20) !important;
font-family: "Montserrat", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.015em !important;
text-transform: uppercase !important;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease !important;
}
#information-contact .module-form-20 .btn.btn-primary::before {
content: "\f1d8" !important;
font-family: "FontAwesome" !important;
font-size: 15px !important;
font-weight: 400 !important;
}
@media (min-width: 1025px) {
#information-contact .module-form-20 .btn.btn-primary:hover,
#information-contact .module-form-20 .btn.btn-primary:focus {
color: #ffffff !important;
filter: brightness(1.035) !important;
transform: translateY(-2px) !important;
box-shadow:
0 4px 0 rgba(77, 130, 20, 0.12),
0 17px 30px rgba(117, 182, 37, 0.26) !important;
}
}
/* ---------------------------------------------------------
MAP CARD
Journal module: module-blocks-104
--------------------------------------------------------- */
#information-contact .module-blocks-104 {
position: relative !important;
height: 100% !important;
min-height: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 28px 28px 28px !important;
background:
linear-gradient(
180deg,
#ffffff 0%,
#fefefe 100%
) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 20px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 14px 30px rgba(31, 55, 79, 0.075),
0 30px 54px rgba(31, 55, 79, 0.04) !important;
}
html[lang^="sl"] #information-contact .module-blocks-104::before {
content: "Kje se nahajamo?" !important;
}
html[lang^="en"] #information-contact .module-blocks-104::before {
content: "Where are we?" !important;
}
#information-contact .module-blocks-104::before {
display: block !important;
margin: 0 0 27px !important;
padding: 0 0 13px !important;
color: #20364f !important;
font-family: "Montserrat", sans-serif !important;
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
#information-contact .module-blocks-104::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 66px !important;
width: 42px !important;
height: 3px !important;
background: #83c52f !important;
border-radius: 99px !important;
box-shadow: 0 2px 8px rgba(131, 197, 47, 0.18) !important;
}
#information-contact .module-blocks-104 .module-body,
#information-contact .module-blocks-104 .module-item,
#information-contact .module-blocks-104 .block-body,
#information-contact .module-blocks-104 .block-wrapper,
#information-contact .module-blocks-104 .block-content,
#information-contact .module-blocks-104 .block-map {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#information-contact .module-blocks-104 .block-map {
overflow: hidden !important;
border-radius: 14px !important;
border: 1px solid rgba(31, 55, 79, 0.09) !important;
box-shadow: 0 8px 22px rgba(31, 55, 79, 0.065) !important;
}
#information-contact .module-blocks-104 iframe {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 438px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 14px !important;
}
/* ---------------------------------------------------------
REMOVE DUPLICATED DEFAULT OPENCART LOCATION PANEL
Address / phone / hours already exist in the premium cards.
--------------------------------------------------------- */
#information-contact > .title.location-title,
#information-contact > .panel.our-location,
#information-contact .location-title,
#information-contact .our-location {
display: none !important;
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
body:has(#information-contact) #information-contact {
padding: 30px 24px 48px !important;
}
#information-contact .module-info_blocks-194 .module-body {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
#information-contact .module-info_blocks-194 .info-block {
min-height: 138px !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols {
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
}
#information-contact .module-blocks-104 iframe {
height: 390px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
body:has(#information-contact) .breadcrumb {
padding: 22px 14px 6px !important;
}
body:has(#information-contact) .breadcrumb > li,
body:has(#information-contact) .breadcrumb > li > a {
font-size: 13px !important;
}
body:has(#information-contact) .title.page-title {
padding: 5px 16px 27px !important;
font-size: clamp(28px, 8vw, 36px) !important;
}
body:has(#information-contact) .title.page-title::after {
max-width: 420px !important;
margin: 8px auto 0 !important;
font-size: 13px !important;
}
body:has(#information-contact) #information-contact {
padding: 22px 14px 38px !important;
}
#information-contact .grid-row-content-top-1 {
margin-bottom: 16px !important;
}
#information-contact .module-info_blocks-194 .module-body {
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px !important;
}
#information-contact .module-info_blocks-194 .info-block {
min-height: 0 !important;
padding: 20px 18px 19px 72px !important;
border-radius: 15px !important;
}
#information-contact .module-info_blocks-194 .info-block::before {
left: 17px !important;
top: 19px !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
font-size: 22px !important;
}
#information-contact .module-info_blocks-194 .info-block-title {
margin-bottom: 5px !important;
font-size: 13px !important;
}
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a {
font-size: 13px !important;
line-height: 1.48 !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols {
gap: 14px !important;
}
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
padding: 22px 18px 21px !important;
border-radius: 16px !important;
}
#information-contact .module-form-20 .title.module-title,
#information-contact .module-blocks-104::before {
margin-bottom: 22px !important;
}
#information-contact .module-form-20 .title.module-title::before,
#information-contact .module-blocks-104::before {
font-size: 18px !important;
}
#information-contact .module-blocks-104::after {
left: 18px !important;
top: 57px !important;
width: 36px !important;
}
#information-contact .module-form-20 fieldset {
grid-template-columns: minmax(0, 1fr) !important;
gap: 13px !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(3),
#information-contact .module-form-20 .form-group.captcha,
#information-contact .module-form-20 fieldset > .checkbox {
grid-column: 1 !important;
}
#information-contact .module-form-20 input.form-control {
height: 49px !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 132px !important;
}
#information-contact .module-form-20 .btn.btn-primary {
min-height: 50px !important;
font-size: 13px !important;
}
#information-contact .module-blocks-104 iframe {
height: 320px !important;
border-radius: 12px !important;
}
#information-contact .module-blocks-104 .block-map {
border-radius: 12px !important;
}
}
/* ---------------------------------------------------------
SMALL PHONE
--------------------------------------------------------- */
@media (max-width: 470px) {
body:has(#information-contact) #information-contact {
padding-left: 10px !important;
padding-right: 10px !important;
}
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
padding-left: 15px !important;
padding-right: 15px !important;
}
#information-contact .module-blocks-104::after {
left: 15px !important;
}
#information-contact .module-blocks-104 iframe {
height: 285px !important;
}
}
/* ---------------------------------------------------------
REDUCED MOTION
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
#information-contact .module-info_blocks-194 .info-block,
#information-contact .module-form-20 .form-control,
#information-contact .module-form-20 .btn.btn-primary {
transition: none !important;
}
#information-contact .module-info_blocks-194 .info-block:hover,
#information-contact .module-form-20 .btn.btn-primary:hover {
transform: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.13 CLEAN - CONTACT FORM COMPACTNESS + READABILITY
Fixes:
- removes the oversized vertical gap inside the form
- prevents the form/map cards from being artificially stretched
- keeps Name + Email side by side on desktop
- keeps Message directly below them
- preserves reCAPTCHA v3 while removing its empty layout row
- fixes checkbox/text clipping
- makes info-block descriptive text regular weight, not bold
- improves long-text wrapping/readability
========================================================= */
/* ---------------------------------------------------------
INFO CARDS - REGULAR BODY TEXT + BETTER WRAPPING
--------------------------------------------------------- */
#information-contact .module-info_blocks-194 .info-block {
min-height: 138px !important;
padding-top: 22px !important;
padding-bottom: 20px !important;
}
#information-contact .module-info_blocks-194 .info-block-title {
margin-bottom: 6px !important;
font-weight: 750 !important;
}
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a {
color: #5d6f80 !important;
font-size: 13.5px !important;
font-weight: 400 !important;
line-height: 1.52 !important;
letter-spacing: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* ---------------------------------------------------------
FORM + MAP ROW - DO NOT STRETCH CARDS VERTICALLY
--------------------------------------------------------- */
#information-contact .grid-row-content-top-2 > .grid-cols {
align-items: start !important;
}
#information-contact .grid-row-content-top-2 .grid-items,
#information-contact .grid-row-content-top-2 .grid-item {
height: auto !important;
min-height: 0 !important;
}
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
height: auto !important;
min-height: 0 !important;
}
/* ---------------------------------------------------------
CONTACT FORM - COMPACT GRID, NO EMPTY VERTICAL TRACKS
--------------------------------------------------------- */
#information-contact .module-form-20 {
padding: 26px 28px 26px !important;
}
#information-contact .module-form-20 .title.module-title {
margin-bottom: 22px !important;
}
#information-contact .module-form-20 .module-body,
#information-contact .module-form-20 form,
#information-contact .module-form-20 fieldset {
height: auto !important;
min-height: 0 !important;
}
#information-contact .module-form-20 fieldset {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto auto auto auto !important;
grid-auto-rows: max-content !important;
column-gap: 16px !important;
row-gap: 14px !important;
align-items: start !important;
align-content: start !important;
justify-content: stretch !important;
}
/* Lock the fields into predictable rows. */
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(1) {
grid-column: 1 !important;
grid-row: 1 !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(2) {
grid-column: 2 !important;
grid-row: 1 !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(3) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
#information-contact .module-form-20 .form-group.captcha {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
}
/* reCAPTCHA v3 uses a hidden token input. Its empty visual row must not
reserve space. If Journal exposes an actual reCAPTCHA error, show it. */
#information-contact .module-form-20 .form-group.captcha:not(:has(.grecaptcha-error.has-error)) {
display: none !important;
}
#information-contact .module-form-20 .form-group.captcha:has(.grecaptcha-error.has-error) {
display: block !important;
}
#information-contact .module-form-20 .grecaptcha-container > .form-group {
display: none !important;
}
#information-contact .module-form-20 .control-label {
padding-bottom: 6px !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
}
#information-contact .module-form-20 input.form-control {
height: 50px !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 136px !important;
height: 136px !important;
max-height: 260px !important;
}
/* ---------------------------------------------------------
GDPR CHECKBOX - RESET BOOTSTRAP/JOURNAL ABSOLUTE POSITIONING
--------------------------------------------------------- */
#information-contact .module-form-20 fieldset > .checkbox {
display: block !important;
width: 100% !important;
margin: 1px 0 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#information-contact .module-form-20 fieldset > .checkbox label {
display: flex !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
color: #526578 !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
white-space: normal !important;
}
#information-contact .module-form-20 fieldset > .checkbox input[type="checkbox"] {
position: static !important;
inset: auto !important;
display: inline-block !important;
flex: 0 0 16px !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
appearance: auto !important;
-webkit-appearance: checkbox !important;
accent-color: #83c52f !important;
}
#information-contact .module-form-20 fieldset > .checkbox a,
#information-contact .module-form-20 fieldset > .checkbox a b {
font-weight: 700 !important;
}
#information-contact .module-form-20 .buttons {
margin-top: 15px !important;
}
/* ---------------------------------------------------------
MAP CARD - NATURAL HEIGHT, NO LARGE EMPTY LOWER AREA
--------------------------------------------------------- */
#information-contact .module-blocks-104 {
padding: 26px 26px 26px !important;
}
#information-contact .module-blocks-104::before {
margin-bottom: 23px !important;
}
#information-contact .module-blocks-104::after {
left: 26px !important;
top: 62px !important;
}
#information-contact .module-blocks-104 iframe {
height: 360px !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1200px) {
#information-contact .module-info_blocks-194 .info-block {
min-height: 128px !important;
}
#information-contact .module-blocks-104 iframe {
height: 340px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 760px) {
#information-contact .module-info_blocks-194 .info-block {
min-height: 0 !important;
}
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a {
font-size: 13px !important;
font-weight: 400 !important;
}
#information-contact .module-form-20 fieldset {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto auto auto !important;
row-gap: 12px !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(1) {
grid-column: 1 !important;
grid-row: 1 !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(2) {
grid-column: 1 !important;
grid-row: 2 !important;
}
#information-contact .module-form-20 .form-group.custom-field:nth-of-type(3) {
grid-column: 1 !important;
grid-row: 3 !important;
}
#information-contact .module-form-20 .form-group.captcha {
grid-column: 1 !important;
grid-row: 4 !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
grid-column: 1 !important;
grid-row: 5 !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 126px !important;
height: 126px !important;
}
#information-contact .module-blocks-104 iframe {
height: 300px !important;
}
}
@media (max-width: 470px) {
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
#information-contact .module-blocks-104::after {
top: 54px !important;
}
#information-contact .module-blocks-104 iframe {
height: 270px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.14 CLEAN - CONTACT INFO WEIGHT + FORM FIELD RHYTHM
Fixes:
- info-card descriptive text is true regular weight
- removes the remaining Name/Email -> Message vertical gap
- forces compact max-content grid tracks inside Journal Form 20
- stretches the Message textarea vertically for better balance
- keeps Name + Email side by side on desktop
- preserves form validation, GDPR and reCAPTCHA v3
========================================================= */
/* ---------------------------------------------------------
CONTACT INFO CARDS - TITLE BOLD, ALL GREY BODY TEXT REGULAR
--------------------------------------------------------- */
#information-contact .module-info_blocks-194 .info-block-content,
#information-contact .module-info_blocks-194 .info-block-content * {
font-weight: 400 !important;
font-synthesis: none !important;
text-shadow: none !important;
}
#information-contact .module-info_blocks-194 .info-block-title {
color: #20364f !important;
font-family: "Montserrat", "Overpass", Arial, sans-serif !important;
font-weight: 800 !important;
}
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a,
#information-contact .module-info_blocks-194 .info-block-text strong,
#information-contact .module-info_blocks-194 .info-block-text b {
color: #667789 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.50 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
}
/* ---------------------------------------------------------
FORM 20 - REMOVE ANY JOURNAL FLEX / HEIGHT STRETCHING
--------------------------------------------------------- */
#information-contact .module-form-20 .module-body,
#information-contact .module-form-20 form,
#information-contact .module-form-20 fieldset,
#information-contact .module-form-20 fieldset > .form-group,
#information-contact .module-form-20 fieldset > .checkbox,
#information-contact .module-form-20 .form-group.custom-field,
#information-contact .module-form-20 .form-group.custom-field > .col-sm-2,
#information-contact .module-form-20 .form-group.custom-field > .col-sm-10 {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
flex: none !important;
}
#information-contact .module-form-20 fieldset {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-areas:
"name email"
"message message"
"captcha captcha"
"agree agree" !important;
grid-template-rows: max-content max-content max-content max-content !important;
grid-auto-rows: max-content !important;
column-gap: 16px !important;
row-gap: 12px !important;
align-items: start !important;
align-content: start !important;
justify-items: stretch !important;
justify-content: stretch !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-child(1) {
grid-area: name !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-child(2) {
grid-area: email !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-child(3) {
grid-area: message !important;
}
#information-contact .module-form-20 fieldset > .form-group.captcha {
grid-area: captcha !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
grid-area: agree !important;
}
/* Every custom field must size only to its own content. */
#information-contact .module-form-20 fieldset > .form-group.custom-field {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
align-self: start !important;
place-self: start stretch !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field .control-label,
#information-contact .module-form-20 fieldset > .form-group.custom-field .col-sm-10 {
display: block !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field .control-label {
padding: 0 0 6px !important;
}
/* Message begins immediately after the first row and fills more of the card. */
#information-contact .module-form-20 textarea.form-control {
display: block !important;
width: 100% !important;
min-height: 210px !important;
height: 210px !important;
max-height: 340px !important;
margin: 0 !important;
resize: vertical !important;
}
/* Hidden reCAPTCHA v3 token must never create a blank grid track. */
#information-contact .module-form-20 fieldset > .form-group.captcha:not(:has(.grecaptcha-error.has-error)) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 fieldset > .form-group.captcha:has(.grecaptcha-error.has-error) {
display: block !important;
height: auto !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
margin-top: 2px !important;
}
#information-contact .module-form-20 .buttons {
margin-top: 14px !important;
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1200px) {
#information-contact .module-form-20 fieldset {
row-gap: 11px !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 190px !important;
height: 190px !important;
}
}
/* ---------------------------------------------------------
MOBILE - STACK FIELDS, KEEP COMPACT RHYTHM
--------------------------------------------------------- */
@media (max-width: 760px) {
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text a,
#information-contact .module-info_blocks-194 .info-block-text strong,
#information-contact .module-info_blocks-194 .info-block-text b {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
}
#information-contact .module-form-20 fieldset {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"name"
"email"
"message"
"captcha"
"agree" !important;
grid-template-rows: max-content max-content max-content max-content max-content !important;
row-gap: 11px !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 160px !important;
height: 160px !important;
max-height: 280px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.15 CLEAN - CONTACT PAGE FINAL VISUAL FIXES
Fixes:
- narrows the gap between the blue page header and the contact blocks
- removes the subtitle text below "Kontaktirajte nas"
- makes the form card and map card visually match the top info boxes
- removes grey/blue corner artifacts on the large cards
- forces all grey descriptive text in info cards to regular weight
- removes the oversized Email -> Message gap
- stretches the Message field for better balance
========================================================= */
/* ---------------------------------------------------------
HERO / HEADER SPACING
--------------------------------------------------------- */
body:has(#information-contact) .title.page-title {
padding: 7px 20px 24px !important;
}
body:has(#information-contact) .title.page-title::after {
content: none !important;
display: none !important;
}
body:has(#information-contact) #information-contact {
padding-top: 16px !important;
}
#information-contact .grid-row-content-top-1 {
margin: 0 0 16px !important;
}
/* ---------------------------------------------------------
ALL CONTACT CARDS - SAME VISUAL LANGUAGE
--------------------------------------------------------- */
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 13px 28px rgba(31, 55, 79, 0.075),
0 26px 48px rgba(31, 55, 79, 0.04) !important;
background-clip: padding-box !important;
overflow: hidden !important;
}
#information-contact .module-form-20 {
padding: 24px 28px 24px !important;
}
#information-contact .module-blocks-104 {
padding: 24px 24px 24px !important;
}
#information-contact .module-form-20 .title.module-title,
#information-contact .module-blocks-104::before {
margin-bottom: 20px !important;
}
#information-contact .module-blocks-104::after {
left: 24px !important;
top: 60px !important;
}
/* ---------------------------------------------------------
INFO BLOCKS - GREY TEXT MUST STAY REGULAR
--------------------------------------------------------- */
#information-contact .module-info_blocks-194 .info-block-text,
#information-contact .module-info_blocks-194 .info-block-text *,
#information-contact .module-info_blocks-194 .info-block-text a,
#information-contact .module-info_blocks-194 .info-block-text strong,
#information-contact .module-info_blocks-194 .info-block-text b {
font-family: "Overpass", Arial, sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
color: #667789 !important;
}
/* ---------------------------------------------------------
FORM LAYOUT - REMOVE BIG GAP, KEEP MESSAGE DIRECTLY BELOW
--------------------------------------------------------- */
#information-contact .grid-row-content-top-2 > .grid-cols {
gap: 18px !important;
align-items: start !important;
}
#information-contact .module-form-20 .module-body,
#information-contact .module-form-20 form {
height: auto !important;
min-height: 0 !important;
}
#information-contact .module-form-20 fieldset {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
align-content: flex-start !important;
justify-content: space-between !important;
column-gap: 16px !important;
row-gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
#information-contact .module-form-20 fieldset > .form-group,
#information-contact .module-form-20 fieldset > .checkbox {
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(1),
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(2) {
flex: 0 0 calc(50% - 8px) !important;
max-width: calc(50% - 8px) !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(3),
#information-contact .module-form-20 fieldset > .form-group.captcha,
#information-contact .module-form-20 fieldset > .checkbox {
flex: 0 0 100% !important;
max-width: 100% !important;
}
#information-contact .module-form-20 .form-group.custom-field,
#information-contact .module-form-20 .form-group.custom-field > .col-sm-2,
#information-contact .module-form-20 .form-group.custom-field > .col-sm-10 {
display: block !important;
min-height: 0 !important;
height: auto !important;
}
#information-contact .module-form-20 .control-label {
padding: 0 0 6px !important;
margin: 0 !important;
}
#information-contact .module-form-20 input.form-control {
height: 52px !important;
}
#information-contact .module-form-20 textarea.form-control {
display: block !important;
width: 100% !important;
min-height: 230px !important;
height: 230px !important;
max-height: 360px !important;
margin: 0 !important;
padding: 14px 15px !important;
resize: vertical !important;
}
#information-contact .module-form-20 fieldset > .form-group.captcha:not(:has(.grecaptcha-error.has-error)) {
display: none !important;
}
#information-contact .module-form-20 fieldset > .checkbox {
margin-top: 2px !important;
}
#information-contact .module-form-20 .buttons {
margin-top: 14px !important;
}
/* ---------------------------------------------------------
MAP CARD
--------------------------------------------------------- */
#information-contact .module-blocks-104 .block-map {
border-radius: 14px !important;
overflow: hidden !important;
}
#information-contact .module-blocks-104 iframe {
height: 390px !important;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1200px) {
body:has(#information-contact) #information-contact {
padding-top: 14px !important;
}
#information-contact .module-blocks-104 iframe {
height: 350px !important;
}
}
@media (max-width: 760px) {
body:has(#information-contact) .title.page-title {
padding: 5px 16px 20px !important;
}
body:has(#information-contact) #information-contact {
padding-top: 12px !important;
}
#information-contact .grid-row-content-top-1 {
margin-bottom: 12px !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols {
gap: 14px !important;
}
#information-contact .module-form-20,
#information-contact .module-blocks-104 {
padding: 20px 18px !important;
border-radius: 16px !important;
}
#information-contact .module-blocks-104::after {
left: 18px !important;
top: 56px !important;
}
#information-contact .module-form-20 fieldset {
row-gap: 10px !important;
}
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(1),
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(2),
#information-contact .module-form-20 fieldset > .form-group.custom-field:nth-of-type(3) {
flex: 0 0 100% !important;
max-width: 100% !important;
}
#information-contact .module-form-20 textarea.form-control {
min-height: 180px !important;
height: 180px !important;
}
#information-contact .module-blocks-104 iframe {
height: 310px !important;
}
}
@media (max-width: 470px) {
#information-contact .module-blocks-104 iframe {
height: 275px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.16 CLEAN - CONTACT LABEL + MAP CORNER FIX
Fixes:
- keeps "Sporočilo / Message *" on one line
- removes the blue Journal background/corner bleed around the map card
- keeps the form/map card geometry unchanged
========================================================= */
/* ---------------------------------------------------------
MESSAGE LABEL - ONE LINE
--------------------------------------------------------- */
#information-contact .module-form-20
.form-group.custom-field:nth-of-type(3) .control-label {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
white-space: nowrap !important;
flex-wrap: nowrap !important;
line-height: 1.25 !important;
}
#information-contact .module-form-20
.form-group.custom-field:nth-of-type(3) .control-label::before,
#information-contact .module-form-20
.form-group.custom-field:nth-of-type(3) .control-label::after {
display: inline !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
MAP COLUMN - REMOVE JOURNAL BLUE BACKGROUND / CORNER BLEED
--------------------------------------------------------- */
#information-contact .grid-col-content-top-2-2,
#information-contact .grid-col-content-top-2-2 > .grid-items,
#information-contact .grid-col-content-top-2-2 > .grid-items > .grid-item,
#information-contact .grid-col-content-top-2-2 .module-blocks-104,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .module-body,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .module-item {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
#information-contact .grid-col-content-top-2-2::before,
#information-contact .grid-col-content-top-2-2::after,
#information-contact .grid-col-content-top-2-2 > .grid-items::before,
#information-contact .grid-col-content-top-2-2 > .grid-items::after,
#information-contact .grid-col-content-top-2-2 > .grid-items > .grid-item::before,
#information-contact .grid-col-content-top-2-2 > .grid-items > .grid-item::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Re-apply the actual map card styling after neutralising parent wrappers. */
#information-contact .grid-col-content-top-2-2 .module-blocks-104 {
position: relative !important;
background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 13px 28px rgba(31, 55, 79, 0.075),
0 26px 48px rgba(31, 55, 79, 0.04) !important;
background-clip: padding-box !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
SMALL SCREEN SAFETY
--------------------------------------------------------- */
@media (max-width: 470px) {
#information-contact .module-form-20
.form-group.custom-field:nth-of-type(3) .control-label {
font-size: 12px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.17 CLEAN - MATCH FORM + MAP CARD HEIGHTS
Fix:
- "Pošljite nam sporočilo" and "Kje se nahajamo?" cards
have identical height on desktop
- form content remains the natural height reference
- map expands inside its card instead of leaving empty space
- tablet/mobile remain naturally stacked
========================================================= */
@media (min-width: 1201px) {
/* The two Journal columns share one equal-height row. */
#information-contact .grid-row-content-top-2 > .grid-cols {
align-items: stretch !important;
}
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col,
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col > .grid-items,
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col > .grid-items > .grid-item {
height: 100% !important;
min-height: 100% !important;
}
/* Both visible white cards stretch to the exact same row height. */
#information-contact .module-form-20,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 {
height: 100% !important;
min-height: 100% !important;
box-sizing: border-box !important;
}
/* Let the map card use all remaining height below its heading. */
#information-contact .grid-col-content-top-2-2 .module-blocks-104 {
display: flex !important;
flex-direction: column !important;
}
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .module-body,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .module-item,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .block-body,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .block-wrapper,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .block-content,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 .block-map {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-height: 0 !important;
height: auto !important;
}
#information-contact .grid-col-content-top-2-2 .module-blocks-104 iframe {
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
min-height: 390px !important;
}
}
/* Once the two cards stack, return to natural heights. */
@media (max-width: 1200px) {
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col,
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col > .grid-items,
#information-contact .grid-row-content-top-2 > .grid-cols > .grid-col > .grid-items > .grid-item,
#information-contact .module-form-20,
#information-contact .grid-col-content-top-2-2 .module-blocks-104 {
height: auto !important;
min-height: 0 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.18 CLEAN - CONTACT TRUST STRIP
Adds:
- 4-item trust strip below contact form/map
- same white-card language as contact info cards
- responsive 4 / 2 / 1 column layout
- automatic Slovenian / English text switching
========================================================= */
/* Language switching inside the trust-strip HTML block. */
html[lang^="sl"] .ea-contact-trust .ea-lang-en,
html[lang^="en"] .ea-contact-trust .ea-lang-sl {
display: none !important;
}
.ea-contact-trust {
width: 100% !important;
max-width: 1440px !important;
margin: 18px auto 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.ea-contact-trust__inner {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important;
background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%) !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 13px 28px rgba(31, 55, 79, 0.075),
0 26px 48px rgba(31, 55, 79, 0.04) !important;
overflow: hidden !important;
}
.ea-contact-trust__item {
position: relative !important;
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
column-gap: 16px !important;
align-items: center !important;
min-height: 122px !important;
padding: 22px 25px !important;
box-sizing: border-box !important;
}
.ea-contact-trust__item + .ea-contact-trust__item::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 24px !important;
bottom: 24px !important;
width: 1px !important;
background: rgba(31, 55, 79, 0.12) !important;
}
.ea-contact-trust__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
height: 58px !important;
color: #76bd24 !important;
background: linear-gradient(180deg, #f3fae9 0%, #edf7df 100%) !important;
border: 1px solid rgba(131, 197, 47, 0.12) !important;
border-radius: 50% !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.92),
0 7px 18px rgba(104,159,35,0.07) !important;
font-size: 27px !important;
line-height: 1 !important;
}
.ea-contact-trust__content {
min-width: 0 !important;
}
.ea-contact-trust__title {
margin: 0 0 5px !important;
padding: 0 !important;
color: #20364f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
.ea-contact-trust__text {
margin: 0 !important;
padding: 0 !important;
color: #667789 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
@media (max-width: 1200px) {
.ea-contact-trust {
margin-top: 16px !important;
}
.ea-contact-trust__inner {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ea-contact-trust__item:nth-child(3)::before {
display: none !important;
}
.ea-contact-trust__item:nth-child(n+3) {
border-top: 1px solid rgba(31, 55, 79, 0.10) !important;
}
}
@media (max-width: 760px) {
.ea-contact-trust {
margin-top: 14px !important;
}
.ea-contact-trust__inner {
grid-template-columns: minmax(0, 1fr) !important;
border-radius: 16px !important;
}
.ea-contact-trust__item {
min-height: 0 !important;
padding: 18px 18px !important;
grid-template-columns: 50px minmax(0, 1fr) !important;
column-gap: 14px !important;
}
.ea-contact-trust__item + .ea-contact-trust__item::before {
display: none !important;
}
.ea-contact-trust__item:nth-child(n+2) {
border-top: 1px solid rgba(31, 55, 79, 0.10) !important;
}
.ea-contact-trust__icon {
width: 50px !important;
height: 50px !important;
font-size: 23px !important;
}
.ea-contact-trust__title {
font-size: 13.5px !important;
}
.ea-contact-trust__text {
font-size: 13px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.19 TEST - PRODUCT PAGE PHASE 1 (ALL PRODUCT PAGES)
Scope:
- GLOBAL PRODUCT PAGE MASTER - ENABLED FOR ALL PRODUCT PAGES (.route-product-product)
- top product area only: gallery + product data + purchase actions
- preserves Journal Swiper / LightGallery functionality
- preserves cart / quick buy / inquiry / wishlist / compare actions
- leaves Visual Designer description and tabs untouched
- leaves homepage, categories, checkout and contact untouched
========================================================= */
/* ---------------------------------------------------------
PRODUCT PAGE STAGE
--------------------------------------------------------- */
.route-product-product .site-wrapper > h1.title.page-title {
display: none !important;
}
.route-product-product #product-product.container {
width: 100% !important;
max-width: 1480px !important;
margin: 0 auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
.route-product-product #product-product > .row,
.route-product-product #product-product #content {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.route-product-product .breadcrumb {
max-width: 1480px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---------------------------------------------------------
MAIN PRODUCT GRID
--------------------------------------------------------- */
.route-product-product #content > .product-info {
display: grid !important;
grid-template-columns: minmax(0, 1.14fr) minmax(430px, 0.86fr) !important;
gap: 28px !important;
align-items: start !important;
width: 100% !important;
margin: 10px 0 30px !important;
}
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
}
/* ---------------------------------------------------------
IMAGE GALLERY CARD
--------------------------------------------------------- */
.route-product-product .product-info .product-left .product-image {
box-sizing: border-box !important;
width: 100% !important;
min-height: 520px !important;
padding: 16px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.085) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 14px 30px rgba(31, 55, 79, 0.065),
0 28px 52px rgba(31, 55, 79, 0.035) !important;
overflow: hidden !important;
}
.route-product-product .product-info .product-image .main-image {
min-height: 488px !important;
background: #ffffff !important;
border-radius: 14px !important;
overflow: hidden !important;
}
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 488px !important;
}
.route-product-product .product-info .product-image .main-image .swiper-slide {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important;
}
.route-product-product .product-info .product-image .main-image img {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 488px !important;
margin: auto !important;
object-fit: contain !important;
}
.route-product-product .product-info .additional-images {
padding-right: 8px !important;
box-sizing: border-box !important;
}
.route-product-product .product-info .additional-images .additional-image {
box-sizing: border-box !important;
margin-bottom: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.10) !important;
border-radius: 10px !important;
overflow: hidden !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active {
border-color: #83c52f !important;
box-shadow: 0 0 0 2px rgba(131, 197, 47, 0.10) !important;
}
.route-product-product .product-info .additional-images img {
border-radius: 9px !important;
}
/* ---------------------------------------------------------
PRODUCT DETAILS CARD
--------------------------------------------------------- */
.route-product-product .product-info .product-right > #product.product-details {
box-sizing: border-box !important;
width: 100% !important;
padding: 28px 30px 28px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.085) !important;
border-radius: 18px !important;
box-shadow:
0 3px 0 rgba(25, 55, 80, 0.025),
0 14px 30px rgba(31, 55, 79, 0.065),
0 28px 52px rgba(31, 55, 79, 0.035) !important;
overflow: hidden !important;
}
.route-product-product #product.product-details > .title.page-title {
margin: 0 0 18px !important;
padding: 0 !important;
color: #20364f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(25px, 2vw, 32px) !important;
font-weight: 800 !important;
line-height: 1.18 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
}
/* ---------------------------------------------------------
TOP INFO BLOCK (CURRENT JOURNAL MODULE 249)
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top {
margin: 0 0 18px !important;
}
.route-product-product #product .product-blocks.blocks-top .grid-row,
.route-product-product #product .product-blocks.blocks-top .grid-cols,
.route-product-product #product .product-blocks.blocks-top .grid-col,
.route-product-product #product .product-blocks.blocks-top .grid-items,
.route-product-product #product .product-blocks.blocks-top .grid-item,
.route-product-product #product .product-blocks.blocks-top .module,
.route-product-product #product .product-blocks.blocks-top .module-body,
.route-product-product #product .product-blocks.blocks-top .module-item {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block {
padding: 12px 14px !important;
background: linear-gradient(180deg, #f6fbef 0%, #f1f8e8 100%) !important;
border: 1px solid rgba(131, 197, 47, 0.18) !important;
border-radius: 11px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
margin: 0 0 3px !important;
color: #385d1c !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text {
color: #667789 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
/* ---------------------------------------------------------
PRICE / STOCK / MODEL
--------------------------------------------------------- */
.route-product-product #product .product-price-group {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(190px, 0.9fr) !important;
gap: 18px !important;
align-items: stretch !important;
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
}
.route-product-product #product .price-wrapper {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
padding: 18px 18px !important;
background: #f9fbfc !important;
border: 1px solid rgba(31, 55, 79, 0.08) !important;
border-radius: 12px !important;
}
.route-product-product #product .product-price {
margin: 0 !important;
color: #20364f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(30px, 2.4vw, 38px) !important;
font-weight: 800 !important;
line-height: 1.05 !important;
letter-spacing: -0.025em !important;
}
.route-product-product #product .price-wrapper .product-tax {
margin-top: 8px !important;
color: #7a8997 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
}
.route-product-product #product > .product-tax {
display: none !important;
}
.route-product-product #product .product-stats {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
padding: 15px 16px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.08) !important;
border-radius: 12px !important;
}
.route-product-product #product .product-stats ul {
margin: 0 !important;
}
.route-product-product #product .product-stats li {
margin: 0 0 7px !important;
color: #667789 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
.route-product-product #product .product-stats li:last-child {
margin-bottom: 0 !important;
}
.route-product-product #product .product-stats li b {
color: #294159 !important;
font-weight: 600 !important;
}
.route-product-product #product .product-stock:not(.out-of-stock) span {
color: #64a719 !important;
font-weight: 700 !important;
}
.route-product-product #product .product-stock.out-of-stock span {
color: #b34a42 !important;
font-weight: 700 !important;
}
.route-product-product #product .brand-image.product-manufacturer {
margin-top: 10px !important;
}
.route-product-product #product .brand-image.product-manufacturer a {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
color: #67a91f !important;
font-size: 12.5px !important;
font-weight: 600 !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 46px !important;
height: 46px !important;
object-fit: contain !important;
border: 1px solid rgba(31, 55, 79, 0.07) !important;
border-radius: 8px !important;
}
/* ---------------------------------------------------------
PURCHASE ACTIONS
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
margin: 0 !important;
padding: 0 !important;
}
.route-product-product #product .buttons-wrapper {
display: block !important;
margin: 0 !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 82px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: stretch !important;
margin: 0 !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 82px !important;
min-width: 82px !important;
height: 52px !important;
margin: 0 !important;
border: 1px solid #d9e1e7 !important;
border-radius: 10px !important;
background: #ffffff !important;
overflow: hidden !important;
}
.route-product-product #product .stepper label.control-label {
display: none !important;
}
.route-product-product #product .stepper input.form-control {
height: 50px !important;
border: 0 !important;
box-shadow: none !important;
background: #ffffff !important;
}
.route-product-product #product #button-cart.btn-cart {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
min-height: 52px !important;
margin: 0 !important;
padding: 12px 20px !important;
color: #ffffff !important;
background: linear-gradient(135deg, #98cf35 0%, #83c52f 54%, #70b624 100%) !important;
border: 1px solid rgba(102, 166, 31, 0.55) !important;
border-radius: 10px !important;
box-shadow:
0 3px 0 rgba(77, 130, 20, 0.12),
0 10px 20px rgba(117, 182, 37, 0.17) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
}
.route-product-product #product #button-cart.btn-cart::before {
content: "\f07a" !important;
margin-right: 9px !important;
font-family: "FontAwesome" !important;
font-size: 15px !important;
font-weight: 400 !important;
}
.route-product-product #product .extra-group {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 2px !important;
}
.route-product-product #product .extra-group .btn-extra {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
margin: 0 !important;
padding: 11px 14px !important;
color: #294159 !important;
background: #ffffff !important;
border: 1px solid #cfd9e0 !important;
border-radius: 10px !important;
box-shadow: none !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
color: #ffffff !important;
background: #2e3d4b !important;
border-color: #2e3d4b !important;
}
.route-product-product #product .wishlist-compare {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 12px !important;
}
.route-product-product #product .wishlist-compare .btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
margin: 0 !important;
padding: 9px 10px !important;
color: #526578 !important;
background: #ffffff !important;
border: 1px solid #d7e0e6 !important;
border-radius: 9px !important;
box-shadow: none !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: none !important;
}
@media (min-width: 1025px) {
.route-product-product #product #button-cart.btn-cart:hover,
.route-product-product #product #button-cart.btn-cart:focus {
filter: brightness(1.035) !important;
transform: translateY(-1px) !important;
}
.route-product-product #product .extra-group .btn-extra:hover,
.route-product-product #product .wishlist-compare .btn:hover {
border-color: rgba(131, 197, 47, 0.45) !important;
}
}
/* ---------------------------------------------------------
TABLET / SMALL DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product #product-product.container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr) !important;
gap: 20px !important;
}
.route-product-product .product-info .product-left .product-image,
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 430px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 430px !important;
}
.route-product-product .product-info .product-right > #product.product-details {
padding: 24px !important;
}
.route-product-product #product .product-price-group {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* ---------------------------------------------------------
MOBILE / STACKED PRODUCT PAGE
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product-product.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
margin-top: 4px !important;
}
.route-product-product .product-info .product-left .product-image {
min-height: 0 !important;
padding: 10px !important;
border-radius: 15px !important;
}
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 320px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 320px !important;
}
.route-product-product .product-info .product-right > #product.product-details {
padding: 20px 18px !important;
border-radius: 15px !important;
}
.route-product-product #product.product-details > .title.page-title {
font-size: 24px !important;
margin-bottom: 14px !important;
}
.route-product-product #product .product-price-group {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.route-product-product #product-product.container {
padding-left: 8px !important;
padding-right: 8px !important;
}
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 275px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 275px !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 76px minmax(0, 1fr) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 76px !important;
min-width: 76px !important;
}
.route-product-product #product .extra-group,
.route-product-product #product .wishlist-compare {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.20 TEST - PRODUCT 729 / PREVIOUS APPROVED MOCKUP
LIVE-SITE SAFE TEST SCOPE:
- ONLY product page 729 (Raspberry Pi 5 8GB)
- no changes to other products
- no changes to Visual Designer content
- no changes to cart / quick-buy / inquiry functionality
- no changes to homepage, categories, checkout or contact
========================================================= */
/* ---------------------------------------------------------
PAGE HEADER - REMOVE OLD GREY TITLE BAND
Use the existing outer H1 as the clean mockup title.
--------------------------------------------------------- */
.route-product-product .site-wrapper > h1.title.page-title {
display: block !important;
width: 100% !important;
max-width: 1480px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 12px 24px 20px !important;
color: #20364f !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(30px, 2.35vw, 40px) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
text-align: left !important;
text-shadow: none !important;
text-transform: none !important;
}
.route-product-product .breadcrumb {
max-width: 1480px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 18px 24px 8px !important;
background: transparent !important;
border: 0 !important;
}
.route-product-product .breadcrumb > li,
.route-product-product .breadcrumb > li > a,
.route-product-product .breadcrumb > li::before {
color: #667789 !important;
font-size: 12.5px !important;
font-weight: 400 !important;
}
/* The internal Journal product title is duplicated by the outer H1. */
.route-product-product #product.product-details > .title.page-title {
display: none !important;
}
/* ---------------------------------------------------------
PRODUCT STAGE
--------------------------------------------------------- */
.route-product-product #product-product.container {
max-width: 1480px !important;
padding: 0 24px 28px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr) !important;
gap: 24px !important;
align-items: start !important;
margin: 0 0 18px !important;
}
/* ---------------------------------------------------------
GALLERY - CLEAN LARGE WHITE CARD
--------------------------------------------------------- */
.route-product-product .product-info .product-left .product-image {
min-height: 535px !important;
padding: 14px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 16px !important;
box-shadow:
0 2px 0 rgba(25, 55, 80, 0.018),
0 12px 28px rgba(31, 55, 79, 0.065),
0 25px 46px rgba(31, 55, 79, 0.035) !important;
}
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 505px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 505px !important;
}
.route-product-product .product-info .additional-images .additional-image {
border: 1px solid #e0e6ea !important;
border-radius: 9px !important;
box-shadow: 0 3px 10px rgba(31, 55, 79, 0.035) !important;
}
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active {
border-color: #83c52f !important;
box-shadow: 0 0 0 2px rgba(131, 197, 47, 0.09) !important;
}
/* ---------------------------------------------------------
RIGHT SIDE - NO GIANT OUTER CARD
The delivery and purchasing areas become separate cards.
--------------------------------------------------------- */
.route-product-product .product-info .product-right > #product.product-details {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* ---------------------------------------------------------
COMPACT FREE DELIVERY CARD
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top {
margin: 0 0 14px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: 88px !important;
box-sizing: border-box !important;
padding: 17px 20px 17px 92px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 16px !important;
box-shadow:
0 2px 0 rgba(25, 55, 80, 0.018),
0 10px 24px rgba(31, 55, 79, 0.065),
0 20px 38px rgba(31, 55, 79, 0.03) !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
content: "\f0d1" !important;
position: absolute !important;
left: 24px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
box-sizing: border-box !important;
color: #78bd29 !important;
background: #ffffff !important;
border: 1.5px solid #78bd29 !important;
border-radius: 50% !important;
font-family: "FontAwesome" !important;
font-size: 21px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
margin: 0 0 4px !important;
color: #20364f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 750 !important;
line-height: 1.3 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
color: #71808d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* ---------------------------------------------------------
PURCHASE CARD - PRICE / STOCK / BRAND
--------------------------------------------------------- */
.route-product-product #product .product-price-group {
display: grid !important;
grid-template-columns: minmax(175px, 0.88fr) minmax(0, 1.35fr) !important;
gap: 0 !important;
align-items: stretch !important;
margin: 0 !important;
padding: 22px 22px 18px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-bottom: 0 !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 10px 25px rgba(31, 55, 79, 0.055) !important;
}
.route-product-product #product .price-wrapper {
justify-content: flex-start !important;
padding: 7px 22px 7px 0 !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid #e5eaee !important;
border-radius: 0 !important;
}
.route-product-product #product .product-price {
color: #20364f !important;
font-size: clamp(31px, 2.25vw, 39px) !important;
font-weight: 800 !important;
}
.route-product-product #product .price-wrapper .product-tax {
margin-top: 10px !important;
color: #7d8995 !important;
font-size: 12.5px !important;
font-weight: 400 !important;
}
.route-product-product #product .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 108px !important;
gap: 12px !important;
align-items: center !important;
padding: 0 0 0 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
.route-product-product #product .product-stats ul {
align-self: center !important;
}
.route-product-product #product .product-stats li {
margin: 0 0 8px !important;
color: #667789 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.route-product-product #product .product-stats li b {
color: #294159 !important;
font-weight: 600 !important;
}
.route-product-product #product .product-stock.out-of-stock span {
color: #e12727 !important;
font-weight: 700 !important;
}
.route-product-product #product .product-stock.out-of-stock span::before {
content: "● " !important;
font-size: 10px !important;
}
.route-product-product #product .product-model span {
color: #78bd29 !important;
font-weight: 600 !important;
}
.route-product-product #product .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding-left: 14px !important;
border-left: 1px solid #e5eaee !important;
}
.route-product-product #product .brand-image.product-manufacturer a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 5px !important;
width: 92px !important;
color: #78bd29 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-align: center !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 70px !important;
height: 70px !important;
object-fit: contain !important;
border: 0 !important;
border-radius: 0 !important;
}
/* ---------------------------------------------------------
PURCHASE CARD - ACTIONS
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
margin: 0 !important;
padding: 18px 22px 20px !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-top: 1px solid #edf0f2 !important;
border-radius: 0 0 16px 16px !important;
box-shadow:
0 12px 28px rgba(31, 55, 79, 0.065),
0 24px 44px rgba(31, 55, 79, 0.03) !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
gap: 10px !important;
align-items: stretch !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
grid-column: 1 !important;
grid-row: 1 !important;
width: 76px !important;
min-width: 76px !important;
height: 50px !important;
border-radius: 8px !important;
}
.route-product-product #product #button-cart.btn-cart {
grid-column: 2 !important;
grid-row: 1 !important;
min-height: 50px !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #8ecb2f 0%, #72b922 100%) !important;
}
.route-product-product #product .extra-group {
display: contents !important;
margin: 0 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
grid-column: 3 !important;
grid-row: 1 !important;
min-height: 50px !important;
color: #ffffff !important;
background: #142b46 !important;
border-color: #142b46 !important;
border-radius: 8px !important;
}
.route-product-product #product .extra-group .btn-extra:first-child::before {
content: "\f0e7" !important;
margin-right: 8px !important;
font-family: "FontAwesome" !important;
font-weight: 400 !important;
}
.route-product-product #product .extra-group .btn-extra:nth-child(2) {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
min-height: 44px !important;
color: #294159 !important;
background: #ffffff !important;
border: 1px solid #ccd6dd !important;
border-radius: 8px !important;
}
.route-product-product #product .extra-group .btn-extra:nth-child(2)::before {
content: "\f0e0" !important;
margin-right: 8px !important;
font-family: "FontAwesome" !important;
font-weight: 400 !important;
}
.route-product-product #product .wishlist-compare {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 10px !important;
}
.route-product-product #product .wishlist-compare .btn {
min-height: 42px !important;
color: #294159 !important;
background: #ffffff !important;
border: 1px solid #d7e0e6 !important;
border-radius: 8px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
}
/* ---------------------------------------------------------
DESCRIPTION / TAB SHELL
Visual Designer content itself is deliberately untouched.
--------------------------------------------------------- */
.route-product-product #content > .product-blocks.blocks-default {
margin: 0 0 18px !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid rgba(31, 55, 79, 0.075) !important;
border-radius: 16px !important;
box-shadow:
0 9px 24px rgba(31, 55, 79, 0.05),
0 20px 40px rgba(31, 55, 79, 0.025) !important;
overflow: hidden !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs {
display: flex !important;
align-items: center !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 18px !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #e9edf0 !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
margin: 0 26px 0 0 !important;
border: 0 !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a {
position: relative !important;
margin: 0 !important;
padding: 18px 0 15px !important;
color: #294159 !important;
background: transparent !important;
border: 0 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a {
color: #63a91d !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 3px !important;
background: #83c52f !important;
border-radius: 99px 99px 0 0 !important;
}
.route-product-product #content > .product-blocks.blocks-default .tab-content {
padding: 18px 20px 20px !important;
background: #ffffff !important;
}
/* ---------------------------------------------------------
DESKTOP HOVER POLISH
--------------------------------------------------------- */
@media (min-width: 1025px) {
.route-product-product #product #button-cart.btn-cart:hover,
.route-product-product #product .extra-group .btn-extra:first-child:hover {
transform: translateY(-1px) !important;
filter: brightness(1.035) !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product .site-wrapper > h1.title.page-title,
.route-product-product .breadcrumb,
.route-product-product #product-product.container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr) !important;
gap: 18px !important;
}
.route-product-product #product .product-price-group {
grid-template-columns: 1fr !important;
}
.route-product-product #product .price-wrapper {
padding: 0 0 16px !important;
border-right: 0 !important;
border-bottom: 1px solid #e5eaee !important;
}
.route-product-product #product .product-stats {
padding: 16px 0 0 !important;
}
}
/* ---------------------------------------------------------
MOBILE / STACKED
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product .breadcrumb {
padding: 12px 12px 5px !important;
}
.route-product-product .site-wrapper > h1.title.page-title {
padding: 7px 12px 14px !important;
font-size: clamp(24px, 7vw, 31px) !important;
}
.route-product-product #product-product.container {
padding: 0 12px 22px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.route-product-product .product-info .product-left .product-image {
min-height: 0 !important;
padding: 10px !important;
}
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
min-height: 330px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 330px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 76px !important;
padding: 14px 15px 14px 75px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 17px !important;
width: 42px !important;
height: 42px !important;
font-size: 18px !important;
}
.route-product-product #product .product-price-group {
padding: 18px !important;
}
.route-product-product #product .button-group-page {
padding: 16px 18px 18px !important;
}
}
@media (max-width: 560px) {
.route-product-product #product .product-stats {
grid-template-columns: 1fr 82px !important;
}
.route-product-product #product .brand-image.product-manufacturer a {
width: 72px !important;
font-size: 10px !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 56px !important;
height: 56px !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 72px minmax(0, 1fr) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
grid-column: 1 !important;
grid-row: 1 !important;
width: 72px !important;
min-width: 72px !important;
}
.route-product-product #product #button-cart.btn-cart {
grid-column: 2 !important;
grid-row: 1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
.route-product-product #product .extra-group .btn-extra:nth-child(2) {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
}
.route-product-product #product .wishlist-compare {
grid-template-columns: 1fr !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs {
overflow-x: auto !important;
padding: 0 14px !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
flex: 0 0 auto !important;
margin-right: 20px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.21 CLEAN - PRODUCT 729 TYPOGRAPHY + POLISH
LIVE TEST SCOPE:
- ONLY product page 729
- typography aligned with the new EA design system
- removes old Journal visual leftovers
- improves purchase card, manufacturer block and tabs
- restyles existing Visual Designer description without changing its content
========================================================= */
/* ---------------------------------------------------------
PRODUCT PAGE TYPOGRAPHY SYSTEM
--------------------------------------------------------- */
.route-product-product #product-product,
.route-product-product #product-product button,
.route-product-product #product-product input,
.route-product-product #product-product select,
.route-product-product #product-product textarea {
font-family: "Overpass", Arial, sans-serif !important;
}
.route-product-product .site-wrapper > h1.title.page-title,
.route-product-product #product .product-price,
.route-product-product #product .info-block-title,
.route-product-product #product .btn,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a,
.route-product-product .product-seo h2,
.route-product-product .product-seo h3 {
font-family: "Montserrat", Arial, sans-serif !important;
}
/* Main product title: calmer, less oversized. */
.route-product-product .site-wrapper > h1.title.page-title {
max-width: 1480px !important;
padding-top: 10px !important;
padding-bottom: 18px !important;
font-size: clamp(29px, 2.05vw, 36px) !important;
font-weight: 750 !important;
line-height: 1.16 !important;
letter-spacing: -0.02em !important;
}
.route-product-product .breadcrumb,
.route-product-product .breadcrumb > li,
.route-product-product .breadcrumb > li > a {
font-family: "Overpass", Arial, sans-serif !important;
}
/* ---------------------------------------------------------
DELIVERY CARD - CLEANER TYPE / SMALLER VISUAL WEIGHT
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 80px !important;
padding: 14px 18px 14px 82px !important;
border-radius: 15px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 20px !important;
width: 44px !important;
height: 44px !important;
font-size: 19px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
margin-bottom: 3px !important;
color: #20364f !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.28 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
color: #71808d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12.7px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* ---------------------------------------------------------
PURCHASE CARD TYPOGRAPHY / STATUS / BRAND
--------------------------------------------------------- */
.route-product-product #product .product-price {
font-size: clamp(31px, 2.05vw, 37px) !important;
font-weight: 750 !important;
letter-spacing: -0.025em !important;
}
.route-product-product #product .price-wrapper .product-tax,
.route-product-product #product > .product-tax {
color: #7b8996 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.route-product-product #product .product-stats li,
.route-product-product #product .product-stats li b,
.route-product-product #product .product-stats li span {
font-family: "Overpass", Arial, sans-serif !important;
}
.route-product-product #product .product-stats li {
color: #667789 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.38 !important;
}
.route-product-product #product .product-stats li b {
color: #294159 !important;
font-weight: 600 !important;
}
/* Remove Journal/custom icon leftovers around the stock text. */
.route-product-product #product .product-stock::before,
.route-product-product #product .product-stock::after,
.route-product-product #product .product-stock span::before,
.route-product-product #product .product-stock span::after {
content: none !important;
display: none !important;
}
.route-product-product #product .product-stock.out-of-stock span {
color: #e12b2b !important;
font-weight: 600 !important;
}
.route-product-product #product .product-model span {
color: #78bd29 !important;
font-weight: 600 !important;
}
/* Raspberry logo already contains the brand name; hide duplicated green text. */
.route-product-product #product .brand-image.product-manufacturer > a > span {
display: none !important;
}
.route-product-product #product .brand-image.product-manufacturer {
padding-left: 16px !important;
}
.route-product-product #product .brand-image.product-manufacturer a {
width: 88px !important;
min-height: 84px !important;
justify-content: center !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 76px !important;
height: 76px !important;
}
/* ---------------------------------------------------------
ACTION BUTTON TYPE / ALIGNMENT
--------------------------------------------------------- */
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra,
.route-product-product #product .wishlist-compare .btn {
font-family: "Montserrat", Arial, sans-serif !important;
letter-spacing: 0 !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
font-size: 12.5px !important;
font-weight: 700 !important;
}
.route-product-product #product .extra-group .btn-extra:nth-child(2) {
font-size: 11.8px !important;
font-weight: 650 !important;
}
.route-product-product #product .wishlist-compare .btn {
font-size: 10.8px !important;
font-weight: 600 !important;
}
/* ---------------------------------------------------------
TABS - REMOVE OLD JOURNAL GREEN POINTER / USE CLEAN LINE
--------------------------------------------------------- */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li::before,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li::after,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active::before,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active::after {
content: none !important;
display: none !important;
border: 0 !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
/* ---------------------------------------------------------
VISUAL DESIGNER DESCRIPTION - TYPOGRAPHY + EA GREEN SYSTEM
Content and Visual Designer structure remain untouched.
--------------------------------------------------------- */
.route-product-product .product-seo {
max-width: 1120px !important;
margin: 0 auto !important;
padding: 0 !important;
color: #526578 !important;
font-family: "Overpass", Arial, sans-serif !important;
}
.route-product-product .product-seo section {
margin-bottom: 14px !important;
padding: 18px 20px 17px !important;
color: #526578 !important;
background: #ffffff !important;
border: 1px solid #e3e9ed !important;
border-radius: 12px !important;
box-shadow: 0 6px 16px rgba(31, 55, 79, 0.04) !important;
}
.route-product-product .product-seo .rp-hero {
background: linear-gradient(135deg, #f7fbf1 0%, #ffffff 78%) !important;
border-color: rgba(131, 197, 47, 0.48) !important;
}
.route-product-product .product-seo .rp-cta {
background: linear-gradient(135deg, #f5faed 0%, #ffffff 100%) !important;
border: 1px solid rgba(131, 197, 47, 0.38) !important;
border-left: 4px solid #83c52f !important;
box-shadow: 0 7px 18px rgba(31, 55, 79, 0.045) !important;
}
.route-product-product .product-seo h2 {
margin: 0 0 10px !important;
color: #20364f !important;
font-size: clamp(23px, 1.7vw, 28px) !important;
font-weight: 750 !important;
line-height: 1.24 !important;
letter-spacing: -0.015em !important;
}
.route-product-product .product-seo h3 {
margin: 0 0 9px !important;
color: #294159 !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.route-product-product .product-seo p,
.route-product-product .product-seo li {
color: #536678 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.62 !important;
}
.route-product-product .product-seo p {
margin: 0 0 10px !important;
}
.route-product-product .product-seo ul {
margin: 6px 0 4px !important;
padding-left: 21px !important;
}
.route-product-product .product-seo li {
margin-bottom: 5px !important;
}
.route-product-product .product-seo strong,
.route-product-product .product-seo b {
color: #34495d !important;
font-weight: 650 !important;
}
.route-product-product .product-seo .rp-warning {
color: #6b5a27 !important;
background: #fffaf0 !important;
border: 1px solid #f2dfad !important;
border-left: 4px solid #e5b33d !important;
border-radius: 10px !important;
}
/* Visual Designer product image below the text gets the same card language. */
.route-product-product .vd-frontend .vd-image img {
max-width: 100% !important;
height: auto !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(31, 55, 79, 0.07) !important;
}
/* Hide admin-only frontend edit control from visual presentation when logged in. */
.route-product-product .vd-frontend > .vd-btn-frontend-edit {
opacity: 0.3 !important;
}
/* ---------------------------------------------------------
RESPONSIVE TYPOGRAPHY
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product .site-wrapper > h1.title.page-title {
font-size: clamp(24px, 6.4vw, 30px) !important;
font-weight: 750 !important;
}
.route-product-product .product-seo h2 {
font-size: 22px !important;
}
.route-product-product .product-seo h3 {
font-size: 17px !important;
}
.route-product-product .product-seo p,
.route-product-product .product-seo li {
font-size: 14px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.22 CLEAN - PRODUCT 729 MOCKUP ALIGNMENT FIX
LIVE TEST SCOPE:
- ONLY product page 729
- restores visible breadcrumb above product name
- aligns left gallery and right delivery/purchase stack
- removes visible borders from gallery and thumbnails
- restores manufacturer name below logo
- cleans spacing and purchase-card columns
- leaves Visual Designer content/functionality intact
========================================================= */
/* ---------------------------------------------------------
PAGE STAGE + BREADCRUMB
--------------------------------------------------------- */
.route-product-product .site-wrapper {
background: #f7f9fa !important;
}
.route-product-product .site-wrapper > .breadcrumb {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
min-height: 42px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding-top: 14px !important;
padding-bottom: 6px !important;
padding-left: max(24px, calc((100vw - 1480px) / 2 + 24px)) !important;
padding-right: max(24px, calc((100vw - 1480px) / 2 + 24px)) !important;
background: #f7f9fa !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
}
.route-product-product .site-wrapper > .breadcrumb > li,
.route-product-product .site-wrapper > .breadcrumb > li > a,
.route-product-product .site-wrapper > .breadcrumb > li::before {
color: #71808d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
.route-product-product .site-wrapper > .breadcrumb > li:last-child,
.route-product-product .site-wrapper > .breadcrumb > li:last-child > a {
color: #3e5367 !important;
font-weight: 550 !important;
}
.route-product-product .site-wrapper > h1.title.page-title {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
margin: 0 !important;
padding-top: 7px !important;
padding-bottom: 24px !important;
padding-left: max(24px, calc((100vw - 1480px) / 2 + 24px)) !important;
padding-right: max(24px, calc((100vw - 1480px) / 2 + 24px)) !important;
background: #f7f9fa !important;
color: #20364f !important;
font-size: clamp(30px, 2.15vw, 38px) !important;
line-height: 1.16 !important;
}
/* ---------------------------------------------------------
PRODUCT GRID - BOTH COLUMNS START AT EXACT SAME HEIGHT
--------------------------------------------------------- */
.route-product-product #product-product.container {
background: #f7f9fa !important;
}
.route-product-product #content > .product-info {
display: grid !important;
grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr) !important;
gap: 28px !important;
align-items: start !important;
align-content: start !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right,
.route-product-product #content > .product-info > .product-left > .product-image,
.route-product-product #content > .product-info > .product-right > #product {
align-self: start !important;
margin-top: 0 !important;
padding-top: 0 !important;
top: auto !important;
transform: none !important;
}
/* ---------------------------------------------------------
GALLERY - NO VISIBLE BORDERS
--------------------------------------------------------- */
.route-product-product .product-info .product-left .product-image {
margin: 0 !important;
padding: 12px !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 17px !important;
box-shadow:
0 10px 28px rgba(31, 55, 79, 0.065),
0 24px 44px rgba(31, 55, 79, 0.035) !important;
overflow: hidden !important;
}
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
.route-product-product .product-info .product-image .main-image {
border-radius: 0 !important;
overflow: hidden !important;
}
.route-product-product .product-info .product-image .main-image .swiper-slide {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.route-product-product .product-info .product-image .main-image img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 505px !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.route-product-product .product-info .additional-images {
padding-right: 10px !important;
}
.route-product-product .product-info .additional-images .additional-image,
.route-product-product .product-info .additional-images .additional-image img {
background: #ffffff !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.route-product-product .product-info .additional-images .additional-image {
margin-bottom: 10px !important;
padding: 3px !important;
opacity: 0.82 !important;
transition: opacity 0.18s ease, box-shadow 0.18s ease !important;
}
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active {
opacity: 1 !important;
border: 0 !important;
box-shadow: 0 0 0 2px rgba(131, 197, 47, 0.55) !important;
}
/* ---------------------------------------------------------
RIGHT COLUMN - EXACT MOCKUP RHYTHM
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top {
margin: 0 0 16px !important;
padding: 0 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 82px !important;
margin: 0 !important;
padding: 14px 20px 14px 84px !important;
border: 0 !important;
border-radius: 15px !important;
background: #ffffff !important;
box-shadow:
0 8px 22px rgba(31, 55, 79, 0.06),
0 18px 34px rgba(31, 55, 79, 0.025) !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 20px !important;
width: 44px !important;
height: 44px !important;
background: #ffffff !important;
border: 1.5px solid #83c52f !important;
}
/* ---------------------------------------------------------
PURCHASE CARD - PRICE / STOCK / MANUFACTURER
--------------------------------------------------------- */
.route-product-product #product .product-price-group {
display: grid !important;
grid-template-columns: minmax(170px, 0.92fr) minmax(0, 1.28fr) !important;
align-items: stretch !important;
gap: 0 !important;
margin: 0 !important;
padding: 22px 22px 18px !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 8px 24px rgba(31, 55, 79, 0.055) !important;
overflow: visible !important;
}
.route-product-product #product .price-wrapper {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 8px 22px 8px 0 !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid #e7ecef !important;
border-radius: 0 !important;
}
.route-product-product #product .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 112px !important;
gap: 14px !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.route-product-product #product .product-stats ul {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.route-product-product #product .product-stats li {
margin: 0 0 7px !important;
white-space: normal !important;
}
.route-product-product #product .brand-image.product-manufacturer {
display: block !important;
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
align-self: center !important;
width: 112px !important;
min-width: 112px !important;
margin: 0 !important;
padding: 0 0 0 14px !important;
border-left: 1px solid #e7ecef !important;
overflow: visible !important;
}
.route-product-product #product .brand-image.product-manufacturer > a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 98px !important;
min-height: 105px !important;
gap: 7px !important;
margin: 0 auto !important;
padding: 0 !important;
color: #78bd29 !important;
text-align: center !important;
text-decoration: none !important;
overflow: visible !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
display: block !important;
width: 76px !important;
height: 76px !important;
margin: 0 auto !important;
object-fit: contain !important;
border: 0 !important;
box-shadow: none !important;
}
/* Restore manufacturer name below logo. */
.route-product-product #product .brand-image.product-manufacturer > a > span {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #78bd29 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 650 !important;
line-height: 1.22 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
}
.route-product-product #product .button-group-page {
border: 0 !important;
border-top: 1px solid #edf0f2 !important;
box-shadow:
0 10px 26px rgba(31, 55, 79, 0.06),
0 22px 40px rgba(31, 55, 79, 0.025) !important;
}
/* ---------------------------------------------------------
DESCRIPTION CARD - KEEP ALIGNED WITH MAIN CONTENT
--------------------------------------------------------- */
.route-product-product #content > .product-blocks.blocks-default {
margin-top: 18px !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow:
0 8px 24px rgba(31, 55, 79, 0.05),
0 18px 34px rgba(31, 55, 79, 0.02) !important;
overflow: hidden !important;
}
/* ---------------------------------------------------------
TABLET / MOBILE
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product #content > .product-info {
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.84fr) !important;
gap: 22px !important;
}
.route-product-product #product .product-price-group {
grid-template-columns: 1fr !important;
}
.route-product-product #product .price-wrapper {
padding: 0 0 16px !important;
border-right: 0 !important;
border-bottom: 1px solid #e7ecef !important;
}
.route-product-product #product .product-stats {
padding: 16px 0 0 !important;
}
}
@media (max-width: 860px) {
.route-product-product .site-wrapper > .breadcrumb {
padding: 11px 14px 5px !important;
}
.route-product-product .site-wrapper > h1.title.page-title {
padding: 6px 14px 18px !important;
}
.route-product-product #content > .product-info {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.route-product-product .product-info .product-left .product-image {
padding: 8px !important;
border-radius: 14px !important;
}
.route-product-product .product-info .product-image .main-image img {
max-height: 330px !important;
}
.route-product-product #product .product-price-group {
border-radius: 14px 14px 0 0 !important;
}
.route-product-product #product .product-stats {
grid-template-columns: minmax(0, 1fr) 96px !important;
}
.route-product-product #product .brand-image.product-manufacturer {
width: 96px !important;
min-width: 96px !important;
}
.route-product-product #product .brand-image.product-manufacturer > a {
width: 82px !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 62px !important;
height: 62px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.23 CLEAN - PRODUCT 729 BUTTON CLEANUP
Live-test scope:
- Raspberry Pi product ID 729 only
- removes Inquiry, Wishlist and Compare buttons
- keeps Add to Cart and Quick Buy
========================================================= */
/* Remove Inquiry button only; keep Quick Buy in the same extra-group. */
.route-product-product #product .extra-group .btn-extra-93,
.route-product-product #product .btn-extra[data-product_id="729"] {
display: none !important;
}
/* Remove Wishlist + Compare row completely. */
.route-product-product #product .wishlist-compare {
display: none !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: 0 !important;
border: 0 !important;
}
/* Compact the remaining purchase area after removing the lower buttons. */
.route-product-product #product .button-group-page,
.route-product-product #product .buttons-wrapper {
padding-bottom: 18px !important;
}
.route-product-product #product .stepper-group.cart-group {
margin-bottom: 0 !important;
}
.route-product-product #product .extra-group {
margin-bottom: 0 !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.24 CLEAN - PRODUCT 729 MICRO TYPOGRAPHY + TAB POINTER
Live-test scope:
- Raspberry Pi product ID 729 only
- restores the preferred green active-tab arrow
- reduces product-code typography
- enlarges both lines in the free-delivery card
========================================================= */
/* ---------------------------------------------------------
DELIVERY CARD - MORE READABLE, STRONGER HIERARCHY
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 88px !important;
padding: 15px 20px 15px 84px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
margin-bottom: 4px !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.26 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.38 !important;
}
/* ---------------------------------------------------------
PRODUCT CODE - SECONDARY INFORMATION, NOT A HEADLINE
Keep it visually comparable to the previous delivery subtitle.
--------------------------------------------------------- */
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12.7px !important;
line-height: 1.4 !important;
}
.route-product-product #product .product-model b {
color: #526578 !important;
font-weight: 500 !important;
}
.route-product-product #product .product-model span {
color: #78bd29 !important;
font-weight: 600 !important;
}
/* ---------------------------------------------------------
DESCRIPTION TAB - RESTORE PREFERRED GREEN POINTER
--------------------------------------------------------- */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
position: relative !important;
}
/* Keep the clean green underline. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 3px !important;
background: #83c52f !important;
border: 0 !important;
border-radius: 99px 99px 0 0 !important;
}
/* Small downward arrow like the earlier version. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: -8px !important;
width: 0 !important;
height: 0 !important;
margin-left: -8px !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid #83c52f !important;
border-bottom: 0 !important;
z-index: 3 !important;
}
@media (max-width: 860px) {
.route-product-product #product .product-blocks.blocks-top .info-block-title {
font-size: 15px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 13.5px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.25 CLEAN - PRODUCT 729 GALLERY / CTA / COUNTDOWN POLISH
Live-test scope:
- Raspberry Pi product ID 729 only
- restores always-visible main-image carousel arrows
- enlarges product code slightly and keeps it on one line
- enlarges delivery subtitle + delivery icon
- upgrades Add to Cart / Quick Buy / quantity controls
- lengthens and animates the countdown accent line
========================================================= */
/* ---------------------------------------------------------
MAIN IMAGE - ALWAYS-VISIBLE CAROUSEL ARROWS
--------------------------------------------------------- */
.route-product-product .product-info .product-image .main-image {
position: relative !important;
}
.route-product-product .product-info .product-image .main-image .swiper-controls {
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 8 !important;
pointer-events: none !important;
opacity: 1 !important;
visibility: visible !important;
}
.route-product-product .product-info .product-image .main-image .swiper-buttons {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-prev,
.route-product-product .product-info .product-image .main-image .swiper-button-next {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 50% !important;
width: 46px !important;
height: 46px !important;
margin-top: -23px !important;
border: 1px solid rgba(31, 55, 79, 0.10) !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.96) !important;
color: #20364f !important;
box-shadow: 0 8px 22px rgba(31, 55, 79, 0.12) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-prev {
left: 14px !important;
right: auto !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-next {
right: 14px !important;
left: auto !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-prev::before,
.route-product-product .product-info .product-image .main-image .swiper-button-next::before {
color: #20364f !important;
font-size: 20px !important;
line-height: 1 !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-prev.swiper-button-disabled,
.route-product-product .product-info .product-image .main-image .swiper-button-next.swiper-button-disabled {
display: flex !important;
opacity: 0.34 !important;
cursor: default !important;
}
@media (hover:hover) {
.route-product-product .product-info .product-image .main-image .swiper-button-prev:not(.swiper-button-disabled):hover,
.route-product-product .product-info .product-image .main-image .swiper-button-next:not(.swiper-button-disabled):hover {
transform: translateY(-2px) !important;
border-color: rgba(131, 197, 47, 0.55) !important;
box-shadow: 0 10px 26px rgba(31, 55, 79, 0.16) !important;
}
}
/* ---------------------------------------------------------
DELIVERY CARD - LARGER ICON + SUBTITLE
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 96px !important;
padding: 16px 22px 16px 98px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 22px !important;
width: 54px !important;
height: 54px !important;
border-width: 1.7px !important;
font-size: 22px !important;
box-shadow: 0 5px 14px rgba(131, 197, 47, 0.10) !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
margin-bottom: 5px !important;
font-size: 17px !important;
font-weight: 750 !important;
line-height: 1.24 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.40 !important;
}
/* ---------------------------------------------------------
PRODUCT CODE - SLIGHTLY LARGER, SINGLE LINE
--------------------------------------------------------- */
.route-product-product #product .product-model {
display: flex !important;
align-items: baseline !important;
gap: 4px !important;
width: 100% !important;
white-space: nowrap !important;
}
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
font-size: 14.2px !important;
line-height: 1.35 !important;
}
.route-product-product #product .product-model b {
font-weight: 550 !important;
}
.route-product-product #product .product-model span {
font-weight: 650 !important;
}
/* ---------------------------------------------------------
PURCHASE CONTROLS - MORE PREMIUM / RESPONSIVE
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
padding: 20px 22px 20px !important;
background: #ffffff !important;
border-radius: 0 0 16px 16px !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 12px !important;
align-items: stretch !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
position: relative !important;
width: 92px !important;
min-width: 92px !important;
height: 58px !important;
border: 1px solid #dce5eb !important;
border-radius: 12px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 12px rgba(31,55,79,0.04) !important;
overflow: hidden !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input {
height: 58px !important;
padding-right: 34px !important;
border: 0 !important;
background: transparent !important;
color: #20364f !important;
font-size: 16px !important;
font-weight: 600 !important;
text-align: center !important;
box-shadow: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 34px !important;
border-left: 1px solid #e1e8ed !important;
background: #f5f8fa !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
color: #294765 !important;
transition: color 0.15s ease, background 0.15s ease !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
position: relative !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
padding: 0 22px !important;
border-radius: 12px !important;
overflow: hidden !important;
isolation: isolate !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 8px 18px rgba(31,55,79,0.10) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}
.route-product-product #product #button-cart.btn-cart {
border: 1px solid #6eb51c !important;
background: linear-gradient(135deg, #a2dc31 0%, #86cc25 48%, #73bd1d 100%) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 9px 20px rgba(112, 183, 30, 0.22) !important;
}
.route-product-product #product .extra-group {
display: contents !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
border: 1px solid #17314d !important;
background: linear-gradient(135deg, #274969 0%, #1d3b59 48%, #142f4b 100%) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 9px 20px rgba(20, 47, 75, 0.16) !important;
}
.route-product-product #product #button-cart.btn-cart::after,
.route-product-product #product .extra-group .btn-extra:first-child::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.20) 42%, transparent 62%) !important;
transform: translateX(-130%) !important;
transition: transform 0.55s ease !important;
pointer-events: none !important;
}
@media (hover:hover) {
.route-product-product #product #button-cart.btn-cart:hover,
.route-product-product #product .extra-group .btn-extra:first-child:hover {
transform: translateY(-2px) !important;
filter: saturate(1.05) brightness(1.02) !important;
}
.route-product-product #product #button-cart.btn-cart:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 12px 26px rgba(112, 183, 30, 0.29) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 26px rgba(20, 47, 75, 0.23) !important;
}
.route-product-product #product #button-cart.btn-cart:hover::after,
.route-product-product #product .extra-group .btn-extra:first-child:hover::after {
transform: translateX(130%) !important;
}
}
/* ---------------------------------------------------------
COUNTDOWN - LONGER GREEN SPEED LINE
Journal product countdown uses .product-countdown / .countdown.
Multiple selectors are included so this remains robust across J3 styles.
--------------------------------------------------------- */
.route-product-product #product .product-countdown,
.route-product-product #product > .product-countdown,
.route-product-product #product .countdown-wrapper {
position: relative !important;
}
.route-product-product #product .product-countdown .countdown-title,
.route-product-product #product .product-countdown > .title,
.route-product-product #product .countdown-wrapper .countdown-title,
.route-product-product #product .countdown-wrapper > .title {
position: relative !important;
padding-bottom: 15px !important;
margin-bottom: 14px !important;
}
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 112px !important;
height: 4px !important;
border-radius: 99px !important;
background: linear-gradient(90deg,
#75bd22 0%,
#75bd22 28%,
#b8ea6b 42%,
#ffffff 50%,
#b8ea6b 58%,
#75bd22 72%,
#75bd22 100%) !important;
background-size: 220% 100% !important;
animation: ea-product-speed-line 1.15s linear infinite !important;
box-shadow: 0 2px 7px rgba(117, 189, 34, 0.22) !important;
}
@keyframes ea-product-speed-line {
0% { background-position: 210% 0; }
100% { background-position: -110% 0; }
}
/* Fallback for Journal styles where the title has no dedicated class:
extend an existing green underline on the countdown container itself. */
.route-product-product #product .product-countdown::after,
.route-product-product #product .countdown-wrapper::after {
width: 112px !important;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product .product-info .product-image .main-image .swiper-button-prev,
.route-product-product .product-info .product-image .main-image .swiper-button-next {
width: 40px !important;
height: 40px !important;
margin-top: -20px !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-prev {
left: 8px !important;
}
.route-product-product .product-info .product-image .main-image .swiper-button-next {
right: 8px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 88px !important;
padding: 14px 16px 14px 84px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 16px !important;
width: 50px !important;
height: 50px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
font-size: 16px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 14.3px !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 82px minmax(0, 1fr) !important;
}
.route-product-product #product .extra-group {
display: block !important;
grid-column: 1 / -1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
width: 100% !important;
margin-top: 10px !important;
}
}
@media (max-width: 470px) {
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 76px minmax(0, 1fr) !important;
gap: 9px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 76px !important;
min-width: 76px !important;
}
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
font-size: 13.4px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
animation: none !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child,
.route-product-product .product-info .product-image .main-image .swiper-button-prev,
.route-product-product .product-info .product-image .main-image .swiper-button-next {
transition: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.26 CLEAN - PRODUCT 729 VISUAL REFINEMENT
Live-test scope: product ID 729 only.
- true left/right main-image arrows
- no image pagination dots
- thumbnail borders changed to light grey (no green)
- remove grey divider above countdown
- tapered / animated countdown accent
- stronger premium 3D purchase buttons
========================================================= */
/* ---------------------------------------------------------
GALLERY - CLEAN THUMBNAILS, TRUE SIDE ARROWS, NO DOTS
--------------------------------------------------------- */
.route-product-product .product-info .product-image .main-image {
position: relative !important;
overflow: hidden !important;
}
/* Hide the vertical thumbnail carousel arrows that were appearing above
the large image. */
.route-product-product .product-info .product-image .additional-images > .swiper-buttons,
.route-product-product .product-info .product-image .additional-images > .swiper-pagination,
.route-product-product .product-info .product-image .additional-images .swiper-button-prev,
.route-product-product .product-info .product-image .additional-images .swiper-button-next,
.route-product-product .product-info .product-image .additional-images .swiper-pagination {
display: none !important;
}
/* No pagination dots below the large image. */
.route-product-product .product-info .product-image .main-image .swiper-pagination,
.route-product-product .product-info .product-image .main-image .swiper-pagination-bullets,
.route-product-product .product-info .product-image .main-image .swiper-pagination-bullet {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Keep the Journal navigation layer over the image, not above it. */
.route-product-product .product-info .product-image .main-image > .swiper-controls {
display: block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 30 !important;
transform: none !important;
pointer-events: none !important;
overflow: visible !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
transform: none !important;
pointer-events: none !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev,
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next {
display: flex !important;
position: absolute !important;
top: 50% !important;
bottom: auto !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(31,55,79,0.10) !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.97) !important;
color: #20364f !important;
box-shadow:
0 2px 4px rgba(31,55,79,0.08),
0 10px 24px rgba(31,55,79,0.14) !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(-50%) !important;
pointer-events: auto !important;
z-index: 40 !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev {
left: 18px !important;
right: auto !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next {
right: 18px !important;
left: auto !important;
}
/* Force clean FontAwesome chevrons, independent of Journal's inherited icon. */
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev::before {
content: "\f104" !important;
font-family: FontAwesome !important;
font-size: 23px !important;
font-weight: normal !important;
line-height: 1 !important;
color: #20364f !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next::before {
content: "\f105" !important;
font-family: FontAwesome !important;
font-size: 23px !important;
font-weight: normal !important;
line-height: 1 !important;
color: #20364f !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev.swiper-button-disabled,
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next.swiper-button-disabled {
display: flex !important;
opacity: 0.50 !important;
}
/* Thumbnails: always neutral light grey; active thumbnail gets only a
slightly stronger neutral outline/shadow, never green. */
.route-product-product .product-info .additional-images .additional-image,
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active {
border: 1px solid #dfe6eb !important;
border-top-color: #dfe6eb !important;
border-right-color: #dfe6eb !important;
border-bottom-color: #dfe6eb !important;
border-left-color: #dfe6eb !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: none !important;
outline: 0 !important;
}
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active {
border-color: #bdc9d2 !important;
box-shadow: 0 3px 10px rgba(31,55,79,0.07) !important;
}
.route-product-product .product-info .additional-images .additional-image::before,
.route-product-product .product-info .additional-images .additional-image::after,
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active::before,
.route-product-product .product-info .additional-images .additional-image.swiper-slide-active::after {
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
.route-product-product .product-info .additional-images .additional-image img {
border: 0 !important;
border-radius: 9px !important;
box-shadow: none !important;
}
/* ---------------------------------------------------------
COUNTDOWN - REMOVE GREY DIVIDER + TAPERED SPEED ACCENT
--------------------------------------------------------- */
.route-product-product #product > [class*="countdown"],
.route-product-product #product .product-countdown,
.route-product-product #product .countdown-wrapper,
.route-product-product #product .product-countdown .countdown-title,
.route-product-product #product .product-countdown > .title,
.route-product-product #product .countdown-wrapper .countdown-title,
.route-product-product #product .countdown-wrapper > .title {
border-top: 0 !important;
box-shadow: none !important;
}
.route-product-product #product .product-blocks.blocks-top + [class*="countdown"] {
border-top: 0 !important;
}
.route-product-product #product .product-countdown::before,
.route-product-product #product .countdown-wrapper::before {
display: none !important;
content: none !important;
}
.route-product-product #product .product-countdown .countdown-title,
.route-product-product #product .product-countdown > .title,
.route-product-product #product .countdown-wrapper .countdown-title,
.route-product-product #product .countdown-wrapper > .title {
padding-bottom: 16px !important;
margin-bottom: 14px !important;
}
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 142px !important;
height: 7px !important;
border-radius: 0 !important;
clip-path: polygon(0 0, 100% 38%, 100% 62%, 0 100%) !important;
background: linear-gradient(90deg,
#63ad18 0%,
#78c526 30%,
#a4dc59 58%,
#d8f3ad 78%,
#edf9dc 100%) !important;
background-size: 180% 100% !important;
box-shadow: none !important;
animation: ea-product-taper-speed 1.25s linear infinite !important;
}
@keyframes ea-product-taper-speed {
0% { background-position: 160% 0; }
100% { background-position: -40% 0; }
}
/* Remove the older fallback underline so only the tapered accent remains. */
.route-product-product #product .product-countdown::after,
.route-product-product #product .countdown-wrapper::after {
display: none !important;
content: none !important;
}
/* ---------------------------------------------------------
PURCHASE BUTTONS - MORE PREMIUM DEPTH / 3D PRESS FEEL
--------------------------------------------------------- */
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
top: 0 !important;
border-radius: 13px !important;
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.035em !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.12) !important;
transition:
top 0.14s ease,
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease !important;
}
.route-product-product #product #button-cart.btn-cart {
border: 1px solid #70b91d !important;
background: linear-gradient(180deg, #a2dc32 0%, #88ce26 52%, #76bd1f 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.42),
inset 0 -1px 0 rgba(71,125,15,0.18),
0 4px 0 #5d9d18,
0 9px 18px rgba(94,157,24,0.23) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
border: 1px solid #17344f !important;
background: linear-gradient(180deg, #294c6d 0%, #1d3c5a 54%, #17334f 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 -1px 0 rgba(0,0,0,0.14),
0 4px 0 #102a42,
0 9px 18px rgba(16,42,66,0.24) !important;
}
/* A soft highlight across the upper face makes the buttons look like
physical controls without becoming glossy/dated. */
.route-product-product #product #button-cart.btn-cart::before,
.route-product-product #product .extra-group .btn-extra:first-child::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 10px !important;
right: 10px !important;
height: 42% !important;
border-radius: 11px 11px 50% 50% !important;
background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0)) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.route-product-product #product #button-cart.btn-cart .btn-text,
.route-product-product #product .extra-group .btn-extra:first-child .btn-text {
position: relative !important;
z-index: 2 !important;
}
@media (hover:hover) {
.route-product-product #product #button-cart.btn-cart:hover {
transform: translateY(-1px) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.46),
inset 0 -1px 0 rgba(71,125,15,0.18),
0 5px 0 #5d9d18,
0 12px 24px rgba(94,157,24,0.29) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:hover {
transform: translateY(-1px) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
inset 0 -1px 0 rgba(0,0,0,0.14),
0 5px 0 #102a42,
0 12px 24px rgba(16,42,66,0.30) !important;
}
}
.route-product-product #product #button-cart.btn-cart:active,
.route-product-product #product .extra-group .btn-extra:first-child:active {
top: 3px !important;
transform: translateY(0) !important;
}
.route-product-product #product #button-cart.btn-cart:active {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.32),
0 1px 0 #5d9d18,
0 4px 9px rgba(94,157,24,0.20) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:active {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 1px 0 #102a42,
0 4px 9px rgba(16,42,66,0.22) !important;
}
/* Quantity control gets a subtle matching depth. */
.route-product-product #product .stepper-group.cart-group > .stepper {
border-color: #d6e0e7 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 3px 0 #d3dce3,
0 8px 16px rgba(31,55,79,0.07) !important;
}
/* ---------------------------------------------------------
RESPONSIVE OVERRIDES FOR THE TRUE IMAGE ARROWS
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev,
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next {
width: 40px !important;
height: 40px !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-prev {
left: 10px !important;
}
.route-product-product .product-info .product-image .main-image > .swiper-controls > .swiper-buttons > .swiper-button-next {
right: 10px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
animation: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.27 CLEAN - PRODUCT 729 LAYOUT + SALE REFINEMENT
Live-test scope: product ID 729 only.
- image and right purchase stack share the same desktop height
- delivery card pinned to top
- price + purchase controls pinned to bottom
- countdown no longer pushes purchase card down
- countdown values and labels shown in one horizontal line
- curved / tapered green sale underline
- cleaner pill-style purchase controls
- special price presented as a compact sale badge
========================================================= */
/* ---------------------------------------------------------
DESKTOP STAGE - SAME TOP AND BOTTOM ALIGNMENT
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #content > .product-info {
--ea-product-stage-height: clamp(500px, 31vw, 560px);
align-items: stretch !important;
}
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right {
align-self: stretch !important;
height: var(--ea-product-stage-height) !important;
min-height: var(--ea-product-stage-height) !important;
max-height: var(--ea-product-stage-height) !important;
}
.route-product-product #content > .product-info > .product-left > .product-image {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}
.route-product-product #content > .product-info > .product-right > #product {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: visible !important;
}
/* Delivery stays locked to the same top line as the image card. */
.route-product-product #product .product-blocks.blocks-top {
flex: 0 0 auto !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
/* Countdown occupies only its natural compact height. */
.route-product-product #product .product-countdown,
.route-product-product #product > .product-countdown,
.route-product-product #product .countdown-wrapper,
.route-product-product #product > [class*="countdown"] {
flex: 0 0 auto !important;
}
/* This is the important bit: regardless of countdown presence,
the price card is pushed to the bottom of the image height. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
flex: 0 0 auto !important;
}
}
/* Main image fills the fixed card but always shows the whole product. */
.route-product-product .product-info .product-image .main-image,
.route-product-product .product-info .product-image .main-image .swiper-container,
.route-product-product .product-info .product-image .main-image .swiper-wrapper,
.route-product-product .product-info .product-image .main-image .swiper-slide {
height: 100% !important;
}
.route-product-product .product-info .product-image .main-image img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: contain !important;
}
/* ---------------------------------------------------------
DELIVERY CARD - KEEP LARGE BUT COMPACT
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top .info-block {
min-height: 92px !important;
padding: 17px 22px 17px 94px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block::before {
left: 22px !important;
width: 52px !important;
height: 52px !important;
font-size: 23px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-title {
font-size: 16.5px !important;
line-height: 1.25 !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 14.8px !important;
line-height: 1.35 !important;
}
/* ---------------------------------------------------------
COUNTDOWN - COMPACT, ONE LINE PER TIME UNIT
--------------------------------------------------------- */
.route-product-product #product .product-countdown,
.route-product-product #product .countdown-wrapper,
.route-product-product #product > [class*="countdown"] {
margin: 0 0 12px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.route-product-product #product .product-countdown .countdown-title,
.route-product-product #product .product-countdown > .title,
.route-product-product #product .countdown-wrapper .countdown-title,
.route-product-product #product .countdown-wrapper > .title {
position: relative !important;
margin: 0 0 11px !important;
padding: 0 0 12px !important;
font-size: 17px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
}
/* Curved, tapered line: thick at left, thin at right. */
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 164px !important;
height: 12px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 164 12'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2355a914'/%3E%3Cstop offset='.55' stop-color='%237ec92d'/%3E%3Cstop offset='1' stop-color='%23c8ef8e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 2 C48 0 111 3 163 8 L163 10 C111 6 48 5 1 11 Z' fill='url(%23g)'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
clip-path: none !important;
animation: none !important;
}
/* Journal's jquery.countdown renderer uses these standard classes. */
.route-product-product #product .countdown .countdown-row,
.route-product-product #product .product-countdown .countdown-row,
.route-product-product #product .countdown-wrapper .countdown-row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 4px !important;
background: #ff1717 !important;
}
.route-product-product #product .countdown .countdown-section,
.route-product-product #product .product-countdown .countdown-section,
.route-product-product #product .countdown-wrapper .countdown-section {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: center !important;
gap: 7px !important;
width: auto !important;
min-width: 0 !important;
padding: 10px 7px !important;
border-right: 1px solid rgba(255,255,255,0.78) !important;
background: transparent !important;
color: #ffffff !important;
text-align: center !important;
}
.route-product-product #product .countdown .countdown-section:last-child,
.route-product-product #product .product-countdown .countdown-section:last-child,
.route-product-product #product .countdown-wrapper .countdown-section:last-child {
border-right: 0 !important;
}
.route-product-product #product .countdown .countdown-amount,
.route-product-product #product .product-countdown .countdown-amount,
.route-product-product #product .countdown-wrapper .countdown-amount {
display: inline !important;
margin: 0 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #ffffff !important;
font-variant-numeric: tabular-nums !important;
}
.route-product-product #product .countdown .countdown-period,
.route-product-product #product .product-countdown .countdown-period,
.route-product-product #product .countdown-wrapper .countdown-period {
display: inline !important;
margin: 0 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: #ffffff !important;
text-transform: none !important;
}
/* ---------------------------------------------------------
SPECIAL PRICE - SALE BADGE STYLE
--------------------------------------------------------- */
.route-product-product #product .price-wrapper .price-group {
position: relative !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
width: fit-content !important;
max-width: 100% !important;
min-height: 94px !important;
padding-top: 12px !important;
}
.route-product-product #product .product-price-group .product-price-new {
position: relative !important;
z-index: 1 !important;
display: inline-block !important;
margin: 0 !important;
padding: 10px 20px 12px !important;
border-radius: 38px 28px 38px 24px !important;
background: linear-gradient(180deg, #f24b36 0%, #e83227 100%) !important;
color: #ffffff !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(31px, 2.15vw, 40px) !important;
font-weight: 850 !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
text-decoration: none !important;
transform: rotate(-0.7deg) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 7px 16px rgba(232,50,39,0.19) !important;
}
.route-product-product #product .product-price-group .product-price-old {
position: absolute !important;
z-index: 3 !important;
top: 0 !important;
right: -8px !important;
display: inline-block !important;
margin: 0 !important;
padding: 5px 11px 5px !important;
border-radius: 999px !important;
background: #ffd43a !important;
color: #29343c !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-decoration: line-through !important;
transform: rotate(-2deg) !important;
box-shadow: 0 3px 8px rgba(35,54,79,0.13) !important;
}
/* Normal non-sale price stays clean if the special price is absent later. */
.route-product-product #product .product-price-group .product-price:not(.product-price-new) {
color: #20364f !important;
}
/* ---------------------------------------------------------
PURCHASE CONTROLS - PILL STYLE LIKE REFERENCE
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
padding: 20px 22px 22px !important;
background: #ffffff !important;
border-top: 1px solid #edf1f3 !important;
border-radius: 0 0 16px 16px !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) minmax(180px, 0.46fr) !important;
gap: 14px !important;
align-items: center !important;
}
/* Quantity pill */
.route-product-product #product .stepper-group.cart-group > .stepper {
position: relative !important;
display: block !important;
width: 132px !important;
min-width: 132px !important;
height: 58px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 2px solid #6b7379 !important;
border-radius: 999px !important;
box-shadow: 0 4px 10px rgba(31,55,79,0.07) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > .control-label {
display: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
position: absolute !important;
left: 42px !important;
top: 0 !important;
width: 48px !important;
height: 54px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #252b2f !important;
font-size: 18px !important;
font-weight: 500 !important;
text-align: center !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
position: absolute !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 54px !important;
color: #30373c !important;
font-family: Arial, sans-serif !important;
font-size: 25px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down {
left: 5px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up {
right: 5px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down::before {
content: "−" !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up::before {
content: "+" !important;
}
/* Cart: dark filled pill, simple and premium. */
.route-product-product #product #button-cart.btn-cart {
position: relative !important;
top: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 26px !important;
border: 1px solid #1c2327 !important;
border-radius: 999px !important;
background: #1c2226 !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(20,28,34,0.17) !important;
text-shadow: none !important;
transform: none !important;
}
/* Remove the old glossy/3D overlays from v10.26. */
.route-product-product #product #button-cart.btn-cart::before,
.route-product-product #product #button-cart.btn-cart::after,
.route-product-product #product .extra-group .btn-extra:first-child::before,
.route-product-product #product .extra-group .btn-extra:first-child::after {
display: none !important;
content: none !important;
}
/* Buy now: outlined pill like the supplied reference. */
.route-product-product #product .extra-group {
display: contents !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
position: relative !important;
top: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 22px !important;
border: 2px solid #697177 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #555d62 !important;
box-shadow: 0 5px 13px rgba(31,55,79,0.055) !important;
text-shadow: none !important;
transform: none !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 650 !important;
letter-spacing: 0.01em !important;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}
@media (hover:hover) {
.route-product-product #product #button-cart.btn-cart:hover {
background: #11171b !important;
transform: translateY(-1px) !important;
box-shadow: 0 11px 22px rgba(20,28,34,0.22) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:hover {
background: #f7f8f8 !important;
border-color: #353d42 !important;
color: #30373c !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 18px rgba(31,55,79,0.09) !important;
}
}
.route-product-product #product #button-cart.btn-cart:active,
.route-product-product #product .extra-group .btn-extra:first-child:active {
top: auto !important;
transform: translateY(1px) !important;
}
/* ---------------------------------------------------------
RESPONSIVE: NATURAL HEIGHT BELOW DESKTOP
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right,
.route-product-product #content > .product-info > .product-left > .product-image,
.route-product-product #content > .product-info > .product-right > #product {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.route-product-product #product .product-price-group {
margin-top: 0 !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 116px minmax(0, 1fr) minmax(160px, 0.52fr) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 116px !important;
min-width: 116px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 34px !important;
width: 48px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
width: 36px !important;
}
}
@media (max-width: 760px) {
.route-product-product #product .countdown .countdown-section,
.route-product-product #product .product-countdown .countdown-section,
.route-product-product #product .countdown-wrapper .countdown-section {
gap: 4px !important;
padding: 9px 3px !important;
}
.route-product-product #product .countdown .countdown-amount,
.route-product-product #product .product-countdown .countdown-amount,
.route-product-product #product .countdown-wrapper .countdown-amount {
font-size: 16px !important;
}
.route-product-product #product .countdown .countdown-period,
.route-product-product #product .product-countdown .countdown-period,
.route-product-product #product .countdown-wrapper .countdown-period {
font-size: 12px !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 108px minmax(0, 1fr) !important;
gap: 12px !important;
}
.route-product-product #product .extra-group {
display: block !important;
grid-column: 1 / -1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
margin-top: 12px !important;
}
}
@media (max-width: 470px) {
.route-product-product #product .product-blocks.blocks-top .info-block-title {
font-size: 15px !important;
}
.route-product-product #product .product-blocks.blocks-top .info-block-text,
.route-product-product #product .product-blocks.blocks-top .info-block-text * {
font-size: 13.5px !important;
}
.route-product-product #product .product-price-group .product-price-new {
font-size: 30px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.28 CLEAN - PRODUCT 729 SALE + PURCHASE REFINEMENT
Live-test scope: product ID 729 only.
- delivery card remains pinned to image-card top
- price/purchase card remains pinned to image-card bottom
- countdown forced into a true single horizontal line
- no green underline below countdown title
- sale price uses same red as countdown
- regular/sale price labels added
- quantity + cart + quick-buy rebuilt to supplied reference
========================================================= */
/* ---------------------------------------------------------
DESKTOP ALIGNMENT - TOP + BOTTOM MUST NOT MOVE WITH SALE
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #content > .product-info {
align-items: stretch !important;
}
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right {
align-self: stretch !important;
height: var(--ea-product-stage-height) !important;
min-height: var(--ea-product-stage-height) !important;
max-height: var(--ea-product-stage-height) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.route-product-product #content > .product-info > .product-right > #product {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: visible !important;
}
/* Delivery = top anchor. */
.route-product-product #product .product-blocks.blocks-top {
flex: 0 0 auto !important;
margin: 0 0 10px !important;
}
/* Countdown stays in the middle and may NEVER push the purchase card. */
.route-product-product #product .product-countdown,
.route-product-product #product > .product-countdown,
.route-product-product #product .countdown-wrapper,
.route-product-product #product > [class*="countdown"] {
flex: 0 0 auto !important;
margin-bottom: 8px !important;
}
/* Price + purchase controls = bottom anchor. */
.route-product-product #product .product-price-group {
flex: 0 0 auto !important;
margin-top: auto !important;
margin-bottom: 0 !important;
}
.route-product-product #product .button-group-page {
flex: 0 0 auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* ---------------------------------------------------------
COUNTDOWN - TRUE ONE-ROW DISPLAY
--------------------------------------------------------- */
/* No separator / no arc / no underline below title. */
.route-product-product #product .product-countdown .countdown-title::after,
.route-product-product #product .product-countdown > .title::after,
.route-product-product #product .countdown-wrapper .countdown-title::after,
.route-product-product #product .countdown-wrapper > .title::after {
content: none !important;
display: none !important;
background: none !important;
animation: none !important;
}
.route-product-product #product .product-countdown .countdown-title,
.route-product-product #product .product-countdown > .title,
.route-product-product #product .countdown-wrapper .countdown-title,
.route-product-product #product .countdown-wrapper > .title {
margin: 0 0 8px !important;
padding: 0 !important;
}
.route-product-product #product .countdown .countdown-row,
.route-product-product #product .product-countdown .countdown-row,
.route-product-product #product .countdown-wrapper .countdown-row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 4px !important;
background: #ff1717 !important;
}
.route-product-product #product .countdown .countdown-section,
.route-product-product #product .product-countdown .countdown-section,
.route-product-product #product .countdown-wrapper .countdown-section {
display: inline-flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
width: auto !important;
min-width: 0 !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 8px !important;
float: none !important;
border-right: 1px solid rgba(255,255,255,0.82) !important;
background: #ff1717 !important;
color: #ffffff !important;
white-space: nowrap !important;
text-align: center !important;
}
.route-product-product #product .countdown .countdown-section:last-child,
.route-product-product #product .product-countdown .countdown-section:last-child,
.route-product-product #product .countdown-wrapper .countdown-section:last-child {
border-right: 0 !important;
}
.route-product-product #product .countdown .countdown-amount,
.route-product-product #product .product-countdown .countdown-amount,
.route-product-product #product .countdown-wrapper .countdown-amount,
.route-product-product #product .countdown .countdown-section > .countdown-amount,
.route-product-product #product .product-countdown .countdown-section > .countdown-amount,
.route-product-product #product .countdown-wrapper .countdown-section > .countdown-amount {
display: inline-block !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
position: static !important;
color: #ffffff !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums !important;
vertical-align: middle !important;
}
.route-product-product #product .countdown .countdown-period,
.route-product-product #product .product-countdown .countdown-period,
.route-product-product #product .countdown-wrapper .countdown-period,
.route-product-product #product .countdown .countdown-section > .countdown-period,
.route-product-product #product .product-countdown .countdown-section > .countdown-period,
.route-product-product #product .countdown-wrapper .countdown-section > .countdown-period {
display: inline-block !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
position: static !important;
color: #ffffff !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1 !important;
text-transform: none !important;
vertical-align: middle !important;
}
/* Catch Journal rules that target generic spans inside a countdown cell. */
.route-product-product #product .countdown-section > span {
width: auto !important;
max-width: none !important;
display: inline-block !important;
margin: 0 !important;
float: none !important;
}
/* ---------------------------------------------------------
SPECIAL PRICE - SAME RED AS COUNTDOWN
--------------------------------------------------------- */
.route-product-product #product .price-wrapper .price-group {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
padding: 0 !important;
}
/* Old / regular price. */
.route-product-product #product .product-price-group .product-price-old {
position: relative !important;
z-index: 3 !important;
top: auto !important;
right: auto !important;
display: inline-block !important;
margin: 0 0 8px !important;
padding: 17px 8px 2px !important;
border-radius: 0 !important;
background: transparent !important;
color: #6d777e !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 650 !important;
line-height: 1.15 !important;
text-decoration: none !important;
transform: none !important;
box-shadow: none !important;
}
.route-product-product #product .product-price-group .product-price-old::before {
content: "REDNA CENA" !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
color: #8a959d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 9.5px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.075em !important;
}
.route-product-product #product .product-price-group .product-price-old::after {
content: "" !important;
position: absolute !important;
left: 6px !important;
right: 6px !important;
top: calc(50% + 7px) !important;
height: 1.5px !important;
background: #6d777e !important;
transform: rotate(-2deg) !important;
}
/* Sale price badge. */
.route-product-product #product .product-price-group .product-price-new {
position: relative !important;
z-index: 1 !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 230px !important;
margin: 0 !important;
padding: 13px 25px 10px !important;
border: 0 !important;
border-radius: 36px 28px 36px 24px !important;
background: #ff1717 !important;
color: #ffffff !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(31px, 2.15vw, 40px) !important;
font-weight: 850 !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
text-decoration: none !important;
transform: rotate(-0.7deg) !important;
box-shadow: 0 8px 18px rgba(255,23,23,0.18) !important;
}
.route-product-product #product .product-price-group .product-price-new::after {
content: "AKCIJSKA CENA" !important;
display: block !important;
margin-top: 6px !important;
color: #ffffff !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.09em !important;
text-align: center !important;
}
/* ---------------------------------------------------------
PURCHASE CONTROLS - MATCH SUPPLIED REFERENCE
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
padding: 18px 20px 20px !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 150px minmax(230px, 1fr) minmax(185px, 0.42fr) !important;
gap: 14px !important;
align-items: center !important;
}
/* Clean white quantity pill: minus | value | plus, no shaded halves. */
.route-product-product #product .stepper-group.cart-group > .stepper {
position: relative !important;
display: block !important;
width: 150px !important;
min-width: 150px !important;
height: 62px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 2px solid #666d72 !important;
border-radius: 999px !important;
box-shadow: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
position: absolute !important;
left: 50px !important;
top: 0 !important;
width: 50px !important;
height: 58px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #24292d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 58px !important;
text-align: center !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
position: absolute !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 58px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #30363a !important;
font-family: Arial, sans-serif !important;
font-size: 27px !important;
font-style: normal !important;
font-weight: 300 !important;
line-height: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down {
left: 3px !important;
right: auto !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up {
right: 3px !important;
left: auto !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down::before {
content: "−" !important;
display: block !important;
font-family: Arial, sans-serif !important;
font-size: 28px !important;
font-weight: 300 !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up::before {
content: "+" !important;
display: block !important;
font-family: Arial, sans-serif !important;
font-size: 28px !important;
font-weight: 300 !important;
}
/* Main cart button. */
.route-product-product #product #button-cart.btn-cart {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 11px !important;
width: 100% !important;
min-height: 62px !important;
margin: 0 !important;
padding: 0 28px !important;
border: 2px solid #1b2023 !important;
border-radius: 999px !important;
background: #1d2225 !important;
color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
transform: none !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.route-product-product #product #button-cart.btn-cart::before {
content: "\f217" !important;
display: inline-block !important;
position: static !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #ffffff !important;
font-family: FontAwesome !important;
font-size: 20px !important;
font-weight: normal !important;
line-height: 1 !important;
}
.route-product-product #product #button-cart.btn-cart::after {
content: none !important;
display: none !important;
}
/* Buy now: white outlined pill with pointer icon. */
.route-product-product #product .extra-group {
display: contents !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
width: 100% !important;
min-height: 62px !important;
margin: 0 !important;
padding: 0 22px !important;
border: 2px solid #666d72 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #555d62 !important;
box-shadow: none !important;
text-shadow: none !important;
transform: none !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child::before {
content: "\f25a" !important;
display: inline-block !important;
position: static !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #555d62 !important;
font-family: FontAwesome !important;
font-size: 20px !important;
font-weight: normal !important;
line-height: 1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child::after {
content: none !important;
display: none !important;
}
@media (hover:hover) {
.route-product-product #product #button-cart.btn-cart:hover {
background: #111518 !important;
border-color: #111518 !important;
transform: translateY(-1px) !important;
box-shadow: 0 8px 18px rgba(20,28,34,0.15) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:hover {
background: #f8f9f9 !important;
border-color: #383f44 !important;
color: #30363a !important;
transform: translateY(-1px) !important;
}
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 132px minmax(0, 1fr) minmax(170px, 0.48fr) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 132px !important;
min-width: 132px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 42px !important;
width: 48px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
width: 42px !important;
}
}
@media (max-width: 760px) {
.route-product-product #product .countdown .countdown-section,
.route-product-product #product .product-countdown .countdown-section,
.route-product-product #product .countdown-wrapper .countdown-section {
gap: 4px !important;
padding: 0 3px !important;
min-height: 48px !important;
}
.route-product-product #product .countdown .countdown-amount,
.route-product-product #product .product-countdown .countdown-amount,
.route-product-product #product .countdown-wrapper .countdown-amount {
font-size: 16px !important;
}
.route-product-product #product .countdown .countdown-period,
.route-product-product #product .product-countdown .countdown-period,
.route-product-product #product .countdown-wrapper .countdown-period {
font-size: 11.5px !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 10px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 116px !important;
min-width: 116px !important;
height: 56px !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
min-height: 56px !important;
font-size: 15px !important;
}
.route-product-product #product .extra-group {
display: block !important;
grid-column: 1 / -1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
margin-top: 10px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.29 CLEAN - EXACT DOM FIXES FOR PRODUCT 729
Based on inspected live HTML:
- countdown-wrapper > .countdown > div > span
- Journal quantity stepper with angle-up / angle-down controls
- price-group with product-price-new + product-price-old
========================================================= */
/* ---------------------------------------------------------
COUNTDOWN - EXACT LIVE DOM: TRUE SINGLE LINE
--------------------------------------------------------- */
.route-product-product #product .countdown-wrapper {
width: 100% !important;
}
.route-product-product #product .countdown-wrapper .countdown-title {
margin: 0 0 10px !important;
padding: 0 !important;
}
.route-product-product #product .countdown-wrapper .countdown-title::before,
.route-product-product #product .countdown-wrapper .countdown-title::after {
content: none !important;
display: none !important;
}
/* Actual markup is: .countdown > div > span */
.route-product-product #product .countdown-wrapper > .countdown,
.route-product-product #product .countdown-wrapper .countdown {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 4px !important;
background: #ff1717 !important;
color: #ffffff !important;
}
.route-product-product #product .countdown-wrapper .countdown > div {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
width: auto !important;
min-width: 0 !important;
min-height: 52px !important;
height: 52px !important;
margin: 0 !important;
padding: 0 8px !important;
float: none !important;
border: 0 !important;
border-right: 1px solid rgba(255,255,255,0.82) !important;
background: #ff1717 !important;
color: #ffffff !important;
white-space: nowrap !important;
text-align: center !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 21px !important;
font-weight: 800 !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums !important;
}
.route-product-product #product .countdown-wrapper .countdown > div:last-child {
border-right: 0 !important;
}
.route-product-product #product .countdown-wrapper .countdown > div > span {
display: inline !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
float: none !important;
background: none !important;
color: #ffffff !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1 !important;
text-transform: none !important;
white-space: nowrap !important;
vertical-align: baseline !important;
}
/* ---------------------------------------------------------
SPECIAL PRICE - RED BADGE + YELLOW REGULAR-PRICE CHIP
--------------------------------------------------------- */
.route-product-product #product .price-wrapper .price-group,
.route-product-product #product .product-price-group .price-group {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
min-height: 146px !important;
padding: 34px 0 0 !important;
overflow: visible !important;
}
/* Sale price: same red as countdown. */
.route-product-product #product .product-price-group .product-price-new {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: min(100%, 330px) !important;
min-height: 108px !important;
margin: 0 auto !important;
padding: 14px 24px 31px !important;
border: 0 !important;
border-radius: 999px !important;
background: #ff1717 !important;
color: #ffffff !important;
box-shadow: 0 10px 22px rgba(255, 23, 23, 0.17) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: clamp(34px, 2.6vw, 46px) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
text-align: center !important;
white-space: nowrap !important;
transform: none !important;
}
.route-product-product #product .product-price-group .product-price-new::before {
content: none !important;
display: none !important;
}
.route-product-product #product .product-price-group .product-price-new::after {
content: "AKCIJSKA CENA" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 14px !important;
display: block !important;
color: #ffffff !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: 0.13em !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Regular price: yellow chip on upper-right of the red sale badge. */
.route-product-product #product .product-price-group .product-price-old {
position: absolute !important;
z-index: 4 !important;
top: 15px !important;
right: 7% !important;
left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 104px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 15px !important;
border: 0 !important;
border-radius: 999px !important;
background: #ffd33d !important;
color: #25384f !important;
box-shadow: 0 6px 14px rgba(44, 55, 70, 0.13) !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: line-through !important;
text-decoration-thickness: 1.5px !important;
transform: none !important;
white-space: nowrap !important;
}
.route-product-product #product .product-price-group .product-price-old::before {
content: "REDNA CENA" !important;
position: absolute !important;
top: -18px !important;
right: 4px !important;
left: auto !important;
transform: none !important;
color: #89949d !important;
background: none !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.09em !important;
white-space: nowrap !important;
text-decoration: none !important;
}
.route-product-product #product .product-price-group .product-price-old::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------
QUANTITY - EXACT JOURNAL STEPPER DOM
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
padding: 17px 18px 18px !important;
}
.route-product-product #product .stepper-group.cart-group {
display: grid !important;
grid-template-columns: 140px minmax(230px, 1fr) minmax(180px, 0.43fr) !important;
gap: 14px !important;
align-items: center !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
position: relative !important;
display: block !important;
width: 140px !important;
min-width: 140px !important;
height: 56px !important;
min-height: 56px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1.5px solid #747b80 !important;
border-radius: 999px !important;
background: #ffffff !important;
box-shadow: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > label.control-label {
display: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
position: absolute !important;
z-index: 2 !important;
top: 0 !important;
left: 44px !important;
display: block !important;
width: 52px !important;
min-width: 52px !important;
height: 53px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #252b2f !important;
box-shadow: none !important;
opacity: 1 !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 53px !important;
text-align: center !important;
-webkit-text-fill-color: #252b2f !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
position: absolute !important;
z-index: 3 !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
position: absolute !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 43px !important;
height: 53px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
color: #2f3539 !important;
font-size: 0 !important;
line-height: 1 !important;
transform: none !important;
pointer-events: auto !important;
cursor: pointer !important;
}
/* Journal: angle-down = decrement; angle-up = increment. */
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down {
left: 0 !important;
right: auto !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up {
right: 0 !important;
left: auto !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-down::before {
content: "−" !important;
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: -2px 0 0 !important;
padding: 0 !important;
color: #2f3539 !important;
font-family: Arial, sans-serif !important;
font-size: 24px !important;
font-weight: 300 !important;
line-height: 1 !important;
transform: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i.fa-angle-up::before {
content: "+" !important;
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: -1px 0 0 !important;
padding: 0 !important;
color: #2f3539 !important;
font-family: Arial, sans-serif !important;
font-size: 26px !important;
font-weight: 300 !important;
line-height: 1 !important;
transform: none !important;
}
/* ---------------------------------------------------------
BUTTONS - MATCH REFERENCE MORE CLOSELY
--------------------------------------------------------- */
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
min-height: 56px !important;
height: 56px !important;
margin: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
text-shadow: none !important;
transform: none !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.route-product-product #product #button-cart.btn-cart {
gap: 12px !important;
padding: 0 28px !important;
border: 1.5px solid #1c2124 !important;
background: #1d2225 !important;
color: #ffffff !important;
}
.route-product-product #product #button-cart.btn-cart::before {
content: "\f07a" !important;
position: static !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
background: none !important;
color: #ffffff !important;
font-family: FontAwesome !important;
font-size: 19px !important;
font-weight: normal !important;
line-height: 1 !important;
transform: none !important;
}
.route-product-product #product .extra-group {
display: contents !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
gap: 10px !important;
padding: 0 22px !important;
border: 1.5px solid #6a7176 !important;
background: #ffffff !important;
color: #565e63 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child::before {
content: "\f25a" !important;
position: static !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
background: none !important;
color: #565e63 !important;
font-family: FontAwesome !important;
font-size: 19px !important;
font-weight: normal !important;
line-height: 1 !important;
transform: none !important;
}
.route-product-product #product #button-cart.btn-cart::after,
.route-product-product #product .extra-group .btn-extra:first-child::after {
content: none !important;
display: none !important;
}
@media (hover:hover) {
.route-product-product #product #button-cart.btn-cart:hover {
background: #111518 !important;
border-color: #111518 !important;
box-shadow: 0 7px 16px rgba(20,28,34,0.12) !important;
transform: translateY(-1px) !important;
}
.route-product-product #product .extra-group .btn-extra:first-child:hover {
background: #f8f9f9 !important;
border-color: #3f464b !important;
color: #2f3539 !important;
box-shadow: 0 5px 12px rgba(20,28,34,0.07) !important;
transform: translateY(-1px) !important;
}
}
/* ---------------------------------------------------------
RESPONSIVE EXACT-DOM ADJUSTMENTS
--------------------------------------------------------- */
@media (max-width: 1200px) {
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 128px minmax(0, 1fr) minmax(160px, 0.45fr) !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 128px !important;
min-width: 128px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 39px !important;
width: 50px !important;
}
}
@media (max-width: 760px) {
.route-product-product #product .countdown-wrapper .countdown > div {
gap: 4px !important;
height: 46px !important;
min-height: 46px !important;
padding: 0 4px !important;
font-size: 16px !important;
}
.route-product-product #product .countdown-wrapper .countdown > div > span {
font-size: 11.5px !important;
}
.route-product-product #product .product-price-group .product-price-old {
right: 5% !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-columns: 118px minmax(0, 1fr) !important;
gap: 10px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper {
width: 118px !important;
min-width: 118px !important;
height: 52px !important;
min-height: 52px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 36px !important;
width: 46px !important;
height: 49px !important;
line-height: 49px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
width: 36px !important;
height: 49px !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .extra-group .btn-extra:first-child {
min-height: 52px !important;
height: 52px !important;
font-size: 15px !important;
}
.route-product-product #product .extra-group {
display: block !important;
grid-column: 1 / -1 !important;
}
.route-product-product #product .extra-group .btn-extra:first-child {
width: 100% !important;
margin-top: 10px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.30 CLEAN - PRODUCT 729 MICRO FIX
- REDNA CENA inside yellow badge, centered above old price
- quantity value clearly visible and centered
========================================================= */
/* ---------------------------------------------------------
REGULAR PRICE BADGE
--------------------------------------------------------- */
.route-product-product #product .product-price-group .product-price-old {
top: 10px !important;
right: 7% !important;
min-width: 124px !important;
height: 54px !important;
padding: 20px 17px 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #ffd33d !important;
border-radius: 999px !important;
color: #25384f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: line-through !important;
text-decoration-thickness: 1.5px !important;
box-shadow: 0 6px 14px rgba(44, 55, 70, 0.13) !important;
}
.route-product-product #product .product-price-group .product-price-old::before {
content: "REDNA CENA" !important;
position: absolute !important;
top: 7px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
display: block !important;
width: max-content !important;
margin: 0 !important;
padding: 0 !important;
color: #59626a !important;
background: transparent !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 8.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.12em !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* ---------------------------------------------------------
QUANTITY VALUE - MAKE THE 1 UNMISTAKABLY VISIBLE
--------------------------------------------------------- */
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
z-index: 5 !important;
left: 44px !important;
width: 52px !important;
min-width: 52px !important;
height: 53px !important;
padding: 0 !important;
background: #ffffff !important;
color: #20262a !important;
-webkit-text-fill-color: #20262a !important;
opacity: 1 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 53px !important;
text-align: center !important;
text-indent: 0 !important;
letter-spacing: 0 !important;
caret-color: #20262a !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
z-index: 6 !important;
}
@media (max-width: 1200px) {
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 39px !important;
width: 50px !important;
min-width: 50px !important;
font-size: 19px !important;
}
}
@media (max-width: 760px) {
.route-product-product #product .product-price-group .product-price-old {
right: 5% !important;
min-width: 116px !important;
height: 50px !important;
padding: 19px 14px 6px !important;
font-size: 14px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
left: 36px !important;
width: 46px !important;
min-width: 46px !important;
height: 49px !important;
line-height: 49px !important;
font-size: 18px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.31 CLEAN - PRODUCT 729 MICRO ALIGNMENT FIX
- quantity value visible above Journal stepper overlay
- tighter REDNA CENA / old price spacing
- tighter sale price / AKCIJSKA CENA spacing
- product title aligned with product image container
========================================================= */
/* Product title: same centered 1480px stage and 24px inner edge as product area. */
.route-product-product .site-wrapper > h1.title.page-title {
width: 100% !important;
max-width: 1480px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Regular-price yellow chip: bring label and crossed-out price closer together. */
.route-product-product #product .product-price-group .product-price-old {
height: 48px !important;
min-height: 48px !important;
padding: 16px 15px 5px !important;
}
.route-product-product #product .product-price-group .product-price-old::before {
top: 5px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
font-size: 8.5px !important;
line-height: 1 !important;
}
/* Sale badge: reduce vertical gap between price and AKCIJSKA CENA. */
.route-product-product #product .product-price-group .product-price-new {
min-height: 101px !important;
padding: 11px 24px 25px !important;
}
.route-product-product #product .product-price-group .product-price-new::after {
bottom: 8px !important;
}
/* Quantity: Journal's span overlays the input. Keep the input above that layer,
but keep +/- icons above the input so controls stay clickable. */
.route-product-product #product .stepper-group.cart-group > .stepper {
isolation: isolate !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span {
z-index: 10 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity {
z-index: 20 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #20262a !important;
-webkit-text-fill-color: #20262a !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
text-align: center !important;
text-indent: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 53px !important;
caret-color: #20262a !important;
pointer-events: auto !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
z-index: 30 !important;
}
@media (max-width: 860px) {
.route-product-product .site-wrapper > h1.title.page-title {
max-width: none !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.32 CLEAN - PRODUCT 729 ALIGNMENT REFINEMENT
- title aligned to image-card left edge
- delivery/countdown separator removed
- price/purchase card restored to image-card bottom alignment
- tighter regular/action price label spacing
- quantity control intentionally unchanged
========================================================= */
/* ---------------------------------------------------------
PRODUCT TITLE - ALIGN WITH LEFT EDGE OF IMAGE CARD
--------------------------------------------------------- */
@media (min-width: 861px) {
.route-product-product .site-wrapper > h1.title.page-title {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
}
/* ---------------------------------------------------------
DELIVERY -> COUNTDOWN: REMOVE GREY SEPARATOR COMPLETELY
Also recover the vertical space that was making the right
stack exceed the image-card height.
--------------------------------------------------------- */
.route-product-product #product .product-blocks.blocks-top,
.route-product-product #product .product-blocks.blocks-top::before,
.route-product-product #product .product-blocks.blocks-top::after,
.route-product-product #product .countdown-wrapper,
.route-product-product #product .countdown-wrapper::before,
.route-product-product #product .countdown-wrapper::after {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.route-product-product #product .product-blocks.blocks-top::before,
.route-product-product #product .product-blocks.blocks-top::after,
.route-product-product #product .countdown-wrapper::before,
.route-product-product #product .countdown-wrapper::after {
content: none !important;
display: none !important;
}
@media (min-width: 1201px) {
.route-product-product #product .product-blocks.blocks-top {
margin: 0 0 2px !important;
}
.route-product-product #product .countdown-wrapper {
margin: 0 0 2px !important;
padding-top: 0 !important;
}
/* Keep the bottom purchase stack inside the same fixed stage
as the image. With the excess vertical margins removed,
margin-top:auto can pin the card to the true bottom edge. */
.route-product-product #content > .product-info > .product-right > #product {
box-sizing: border-box !important;
overflow: hidden !important;
}
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* ---------------------------------------------------------
PRICE BADGES - TIGHTER LABEL / PRICE RELATIONSHIP
--------------------------------------------------------- */
.route-product-product #product .product-price-group .product-price-old {
height: 44px !important;
min-height: 44px !important;
padding: 13px 14px 4px !important;
}
.route-product-product #product .product-price-group .product-price-old::before {
top: 4px !important;
line-height: 1 !important;
}
.route-product-product #product .product-price-group .product-price-new {
min-height: 96px !important;
padding: 9px 24px 24px !important;
}
.route-product-product #product .product-price-group .product-price-new::after {
bottom: 13px !important;
}
@media (max-width: 860px) {
.route-product-product .site-wrapper > h1.title.page-title {
max-width: none !important;
margin: 0 !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.33 CLEAN - PRODUCT 729 REGULAR PRICE CHIP
- yellow regular-price badge aligned with right edge of sale badge
- subtle angled treatment
========================================================= */
/* Desktop/tablet: align the yellow badge's RIGHT edge with the
red sale badge's RIGHT edge. The red badge is max 330px wide
and centered, so its right edge sits 165px right of center. */
@media (min-width: 861px) {
.route-product-product #product .product-price-group .product-price-old {
left: auto !important;
right: max(0px, calc(50% - 165px)) !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
}
}
/* Keep the label centered INSIDE the angled yellow badge. */
.route-product-product #product .product-price-group .product-price-old::before {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
/* Mobile: keep it safely inside the red badge while retaining
only a very small angle. */
@media (max-width: 860px) {
.route-product-product #product .product-price-group .product-price-old {
left: auto !important;
right: 4px !important;
transform: rotate(-2deg) !important;
transform-origin: 100% 100% !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.34 CLEAN - HOMEPAGE LOWEST 30-DAY PRICE VISIBILITY
Scope:
- regular homepage/module product cards
- excludes RATMAN row 12 (already has dedicated styling)
- product page redesign remains untouched
========================================================= */
/* The legal 30-day-low line already exists in the markup as a direct
span child of .caption. Force it into the footer and above any
Journal clipping/overlay layers. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
position: relative !important;
overflow: visible !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption > span {
position: absolute !important;
z-index: 12 !important;
left: 14px !important;
right: 64px !important;
bottom: 8px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: #7f8994 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
pointer-events: none !important;
}
/* Keep the cart icon aligned with the main price while leaving a clean
legal line underneath. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
bottom: 34px !important;
}
/* Reserve only a small footer strip for the legal line; this avoids the
old issue where the card became visibly taller. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 26px !important;
}
@media (max-width: 1024px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption > span {
left: 12px !important;
right: 60px !important;
bottom: 7px !important;
font-size: 9px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
bottom: 32px !important;
}
}
@media (max-width: 760px) {
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption > span {
left: 10px !important;
right: 56px !important;
bottom: 6px !important;
font-size: 8.5px !important;
white-space: normal !important;
line-height: 1.15 !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption {
padding-bottom: 28px !important;
}
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
bottom: 31px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.35 CLEAN - GLOBAL LOWEST 30-DAY PRICE VISIBILITY
Scope:
- ALL product cards / grids / sliders site-wide
- homepage, category pages, related products, modules, RATMAN
- no product-card exclusions
========================================================= */
/* Precise selector: the legal line is the span immediately following
the .price block inside the Journal product caption. */
.product-thumb .caption {
position: relative !important;
overflow: visible !important;
}
.product-thumb .caption > .price + span {
position: relative !important;
z-index: 12 !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 3px 0 0 !important;
padding: 0 !important;
color: #7f8994 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
pointer-events: none !important;
}
/* Where earlier card CSS absolutely positioned the same legal line,
reset it so every card uses the same natural flow below the price. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption > .price + span,
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span,
.module-products .product-thumb .caption > .price + span,
.product-grid .product-thumb .caption > .price + span,
.product-list .product-thumb .caption > .price + span {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 3px 0 0 !important;
}
/* Restore normal card footer spacing now that the legal line is in flow. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .caption,
.module-products .product-thumb .caption,
.product-grid .product-thumb .caption,
.product-list .product-thumb .caption {
padding-bottom: 14px !important;
}
/* Do not let previous footer offsets cover the legal line. */
.grid-row:not(.grid-row-top-12) .module-products .product-thumb .buttons-wrapper {
bottom: auto !important;
}
@media (max-width: 1024px) {
.product-thumb .caption > .price + span {
font-size: 9px !important;
margin-top: 3px !important;
}
}
@media (max-width: 760px) {
.product-thumb .caption > .price + span {
font-size: 8.5px !important;
line-height: 1.2 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
/* =========================================================
EA ELEKTRONIKA
VERSION 10.38 CLEAN - LOWEST 30-DAY PRICE FINAL LAYOUT
Backend now supplies the value reliably.
- remove fixed footer positioning from v10.36 / v10.37
- keep the legal line directly below the product price
- style the dedicated product-page .product-lowest-price element
========================================================= */
/* ---------------------------------------------------------
PRODUCT CARDS - natural compact flow below price
--------------------------------------------------------- */
.product-thumb .caption {
position: relative !important;
overflow: visible !important;
}
.product-thumb .caption > .price + span {
position: relative !important;
z-index: 12 !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 4px 0 0 !important;
padding: 0 !important;
color: #7f8994 !important;
background: transparent !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-align: left !important;
text-indent: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
transform: none !important;
clip: auto !important;
clip-path: none !important;
pointer-events: none !important;
}
/* No artificial legal-price footer lane anymore. */
.module-products .product-thumb .caption,
.product-grid .product-thumb .caption,
.product-list .product-thumb .caption,
.swiper-slide .product-thumb .caption {
padding-bottom: 14px !important;
}
/* Undo old extra separation below the main price. */
.product-thumb .caption > .price {
margin-bottom: 0 !important;
}
/* RATMAN: keep the text in flow as well; dark-card colors stay dedicated. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
margin: 4px 0 0 !important;
width: 100% !important;
max-width: 100% !important;
color: #9da2a7 !important;
white-space: normal !important;
}
/* ---------------------------------------------------------
PRODUCT PAGE - dedicated Price History line
Journal must NOT treat this as .product-tax.
--------------------------------------------------------- */
.route-product-product #product .product-lowest-price {
position: relative !important;
z-index: 5 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 10px !important;
padding: 0 !important;
color: #7f8994 !important;
background: transparent !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
transform: none !important;
}
/* Product 729 custom card: keep the legal line compact and neutral. */
.route-product-product #product .product-lowest-price {
margin: 4px 0 8px !important;
color: #7f8994 !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
}
@media (max-width: 1024px) {
.product-thumb .caption > .price + span {
margin-top: 3px !important;
font-size: 9px !important;
}
.route-product-product #product .product-lowest-price {
margin: 4px 0 9px !important;
font-size: 11px !important;
}
}
@media (max-width: 760px) {
.product-thumb .caption > .price + span {
margin-top: 3px !important;
font-size: 8.5px !important;
line-height: 1.2 !important;
}
.route-product-product #product .product-lowest-price {
margin: 3px 0 8px !important;
font-size: 10px !important;
line-height: 1.3 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.39 CLEAN - RATMAN LOWEST PRICE FOOTER RESTORE
- keep the legal 30-day price OUT of the feature/excerpt area
- place it directly below the main price in the RATMAN footer
- preserve the existing RATMAN CTA and responsive footer layout
========================================================= */
/* RATMAN footer is absolute-positioned. The main price is removed from
normal flow, so the legal line must be positioned in the footer too. */
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span {
position: absolute !important;
z-index: 9 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
left: 24px !important;
right: auto !important;
top: auto !important;
bottom: 7px !important;
width: auto !important;
max-width: calc(100% - 238px) !important;
margin: 0 !important;
padding: 0 !important;
color: #9da2a7 !important;
background: transparent !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transform: none !important;
pointer-events: none !important;
}
/* Lift the RATMAN price just enough to leave one compact legal line below. */
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 24px !important;
right: auto !important;
bottom: 27px !important;
}
/* Tablet: preserve the dedicated two-column footer geometry. */
@media (min-width: 761px) and (max-width: 1024px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span {
left: 16px !important;
right: auto !important;
bottom: 11px !important;
width: 43% !important;
max-width: 43% !important;
font-size: 8px !important;
line-height: 1.18 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 16px !important;
right: auto !important;
bottom: 34px !important;
}
}
/* Mobile: legal line stays between the price and the full-width cart CTA. */
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span {
left: 18px !important;
right: 18px !important;
bottom: 73px !important;
width: auto !important;
max-width: none !important;
font-size: 9px !important;
line-height: 1.2 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .price {
left: 18px !important;
right: 18px !important;
bottom: 94px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.40 CLEAN - PRODUCT 729 TABLET REGULAR PRICE BADGE
- tablet no longer uses mobile far-right placement
- anchor yellow REDNA CENA chip to upper-right of red sale badge
- desktop and mobile behaviour remain unchanged
========================================================= */
@media (min-width: 761px) and (max-width: 1024px) {
.route-product-product #product .product-price-group .product-price-old {
top: 24px !important;
left: calc(50% + 165px) !important;
right: auto !important;
transform: translateX(-100%) rotate(-3deg) !important;
transform-origin: 100% 100% !important;
z-index: 5 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.42 CLEAN - STANDARD PRODUCT CARD CART POSITION
- restore agreed permanent cart position on ALL standard product cards
- fixed at lower-right of the card footer, aligned with main price
- 30-day lowest price stays below the main price on the left
- RATMAN keeps its higher-specificity dedicated footer rules
- no visual/button-style changes
========================================================= */
/* Establish a reliable positioning context on standard Journal cards. */
.product-grid .product-thumb,
.product-list .product-thumb,
.module-products .product-thumb,
.swiper-slide .product-thumb {
position: relative !important;
}
.product-grid .product-thumb .caption,
.product-list .product-thumb .caption,
.module-products .product-thumb .caption,
.swiper-slide .product-thumb .caption {
position: relative !important;
}
/* Restore the permanent cart action to the lower-right footer.
bottom:36px keeps the cart aligned with the main price while the
legal 30-day line remains directly underneath on the left. */
.product-grid .product-thumb .buttons-wrapper,
.product-list .product-thumb .buttons-wrapper,
.module-products .product-thumb .buttons-wrapper,
.swiper-slide .product-thumb .buttons-wrapper {
position: absolute !important;
z-index: 20 !important;
top: auto !important;
left: auto !important;
right: 12px !important;
bottom: 36px !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
.product-grid .product-thumb .buttons-wrapper,
.product-list .product-thumb .buttons-wrapper,
.module-products .product-thumb .buttons-wrapper,
.swiper-slide .product-thumb .buttons-wrapper {
right: 11px !important;
bottom: 35px !important;
}
}
/* Mobile */
@media (max-width: 760px) {
.product-grid .product-thumb .buttons-wrapper,
.product-list .product-thumb .buttons-wrapper,
.module-products .product-thumb .buttons-wrapper,
.swiper-slide .product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 34px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.43 CLEAN - PRODUCT CARD CART TRUE FOOTER FIX
- fixes Journal inner .button-group absolute positioning
- standard cards: permanent compact cart at lower-right
- cart aligns with main price; 30-day legal line stays below price
- RATMAN dedicated footer is restored afterwards
========================================================= */
/* Every standard Journal product card must provide the positioning context. */
.product-thumb {
position: relative !important;
}
.product-thumb .caption {
position: relative !important;
}
/* Move the REAL action wrapper into the agreed lower-right footer. */
.product-thumb .buttons-wrapper {
position: absolute !important;
z-index: 30 !important;
top: auto !important;
left: auto !important;
right: 12px !important;
bottom: 36px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* THIS was the missing part in v10.42:
Journal can position .button-group independently at the top-right. */
.product-thumb .buttons-wrapper > .button-group,
.product-thumb .buttons-wrapper .button-group {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.product-thumb .buttons-wrapper .cart-group {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
transform: none !important;
}
/* Quantity stays functional for cart.add(), but is not shown on cards. */
.product-thumb .buttons-wrapper .cart-group .stepper {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Compact icon-only card CTA, preserving the already approved visual. */
.product-thumb .buttons-wrapper .cart-group .btn-cart {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.product-thumb .buttons-wrapper .cart-group .btn-cart .btn-text {
display: none !important;
}
/* Keep only the agreed permanent cart control on standard product cards. */
.product-thumb .buttons-wrapper .wish-group,
.product-thumb .buttons-wrapper .btn-wishlist,
.product-thumb .buttons-wrapper .btn-compare {
display: none !important;
}
/* Leave room for the fixed cart beside the main price; legal line remains below. */
.product-thumb .caption > .price {
max-width: calc(100% - 62px) !important;
}
.product-thumb .caption > .price + span {
max-width: calc(100% - 62px) !important;
}
/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
.product-thumb .buttons-wrapper {
right: 11px !important;
bottom: 35px !important;
}
}
/* Phone */
@media (max-width: 760px) {
.product-thumb .buttons-wrapper {
right: 10px !important;
bottom: 34px !important;
}
}
/* ---------------------------------------------------------
RATMAN RESTORE
RATMAN has a dedicated wide yellow footer CTA and must not inherit
the generic 44x44 standard-card action above.
--------------------------------------------------------- */
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
left: auto !important;
right: 18px !important;
top: auto !important;
bottom: 18px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group {
position: static !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group .btn-cart {
width: auto !important;
min-width: 184px !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 20px !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group .btn-cart .btn-text {
display: inline !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price {
max-width: calc(100% - 250px) !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .caption > .price + span {
max-width: calc(100% - 238px) !important;
}
@media (min-width: 761px) and (max-width: 1024px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
left: auto !important;
right: 12px !important;
bottom: 14px !important;
width: 48% !important;
max-width: 138px !important;
height: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group .btn-cart {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 10px !important;
}
}
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .button-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group,
.grid-row.grid-row-top-12 .module-products .product-thumb .buttons-wrapper .cart-group .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.44 CLEAN - PRODUCT CARD CART ANCHOR FIX
- root cause: .caption was positioned, so the absolute cart wrapper
was anchored to the short caption area instead of the full card
- standard cards: cart now anchors to .product-thumb bottom-right
- legal 30-day price remains below the main price
- RATMAN keeps its dedicated footer layout
========================================================= */
/* The full card is the positioning context. */
.product-thumb {
position: relative !important;
}
/* IMPORTANT:
Do not let the short caption become the containing block for the
absolutely positioned cart wrapper. */
.product-thumb > .caption {
position: static !important;
}
/* Standard product-card cart: agreed fixed lower-right position. */
.product-thumb > .caption > .buttons-wrapper {
position: absolute !important;
z-index: 30 !important;
top: auto !important;
left: auto !important;
right: 12px !important;
bottom: 36px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Journal inner wrappers must not create a second positioning context. */
.product-thumb > .caption > .buttons-wrapper > .button-group,
.product-thumb > .caption > .buttons-wrapper .cart-group,
.product-thumb > .caption > .buttons-wrapper .cart-group .btn-cart {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}
/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
.product-thumb > .caption > .buttons-wrapper {
right: 11px !important;
bottom: 35px !important;
}
}
/* Phone */
@media (max-width: 760px) {
.product-thumb > .caption > .buttons-wrapper {
right: 10px !important;
bottom: 34px !important;
}
}
/* RATMAN restore: its footer CTA intentionally uses its own layout. */
.grid-row.grid-row-top-12 .module-products .product-thumb > .caption {
position: static !important;
}
.grid-row.grid-row-top-12 .module-products .product-thumb > .caption > .buttons-wrapper {
left: auto !important;
right: 18px !important;
top: auto !important;
bottom: 18px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
@media (min-width: 761px) and (max-width: 1024px) {
.grid-row.grid-row-top-12 .module-products .product-thumb > .caption > .buttons-wrapper {
left: auto !important;
right: 12px !important;
bottom: 14px !important;
width: 48% !important;
max-width: 138px !important;
height: auto !important;
}
}
@media (max-width: 760px) {
.grid-row.grid-row-top-12 .module-products .product-thumb > .caption > .buttons-wrapper {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.45 CLEAN - HIGH-SPECIFICITY PRODUCT CARD CART FIX
- beats Journal's module-specific product-grid rules
- cart stays in the agreed lower-right footer position
- covers Journal modules, category/search grids and lists
- RATMAN remains on its dedicated yellow footer CTA
========================================================= */
/* --- POSITIONING CONTEXT: FULL PRODUCT CARD, NOT CAPTION --- */
html body .module-products[class*="module-products-"] .product-thumb,
html body .product-grid .product-layout .product-thumb,
html body .product-list .product-layout .product-thumb {
position: relative !important;
}
html body .module-products[class*="module-products-"] .product-thumb > .caption,
html body .product-grid .product-layout .product-thumb > .caption,
html body .product-list .product-layout .product-thumb > .caption {
position: static !important;
}
/* --- REAL JOURNAL BUTTON WRAPPER: LOWER-RIGHT FOOTER --- */
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper {
position: absolute !important;
z-index: 50 !important;
top: auto !important;
left: auto !important;
right: 12px !important;
bottom: 36px !important;
inset: auto 12px 36px auto !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
transform: none !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* --- INNER JOURNAL GROUPS MUST NOT RE-POSITION THEMSELVES --- */
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
inset: auto !important;
float: none !important;
transform: none !important;
}
/* Keep the compact approved icon button. */
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tablet */
@media (min-width: 761px) and (max-width: 1024px) {
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper {
right: 11px !important;
bottom: 35px !important;
inset: auto 11px 35px auto !important;
}
}
/* Phone */
@media (max-width: 760px) {
html body .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper,
html body .product-grid .product-layout .product-thumb > .caption > .buttons-wrapper,
html body .product-list .product-layout .product-thumb > .caption > .buttons-wrapper {
right: 10px !important;
bottom: 34px !important;
inset: auto 10px 34px auto !important;
}
}
/* ---------------------------------------------------------
RATMAN FINAL RESTORE
Must override the generic module-products selectors above.
--------------------------------------------------------- */
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper {
left: auto !important;
right: 18px !important;
top: auto !important;
bottom: 18px !important;
inset: auto 18px 18px auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
width: auto !important;
min-width: 184px !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 20px !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart .btn-text {
display: inline !important;
}
@media (min-width: 761px) and (max-width: 1024px) {
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper {
left: auto !important;
right: 12px !important;
bottom: 14px !important;
inset: auto 12px 14px auto !important;
width: 48% !important;
max-width: 138px !important;
height: auto !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 10px !important;
}
}
@media (max-width: 760px) {
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper {
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
inset: auto 18px 16px 18px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
}
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper > .button-group,
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group,
html body .grid-row.grid-row-top-12 .module-products[class*="module-products-"] .product-thumb > .caption > .buttons-wrapper .cart-group > .btn-cart {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.46 CLEAN - PRODUCT TABS REDESIGN
- transparent/open tab treatment, no white tab boxes
- larger typography and more breathing room
- thin separators between tabs
- keeps the approved green active underline + pointer
========================================================= */
/* Remove the previous white card/shell treatment around the description tabs. */
.route-product-product #content > .product-blocks.blocks-default {
margin: 0 0 22px !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Main tab rail. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs {
display: flex !important;
align-items: stretch !important;
min-height: 64px !important;
margin: 0 !important;
padding: 0 4px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid rgba(41, 65, 89, 0.18) !important;
box-shadow: none !important;
}
/* No gaps/boxes between the tab items themselves. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
position: relative !important;
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Larger, cleaner tab labels. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a {
position: relative !important;
display: flex !important;
align-items: center !important;
min-height: 64px !important;
margin: 0 !important;
padding: 20px 26px 18px !important;
color: #294159 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
transition: color 0.18s ease !important;
}
/* Thin vertical separation line between tabs. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li:not(:last-child) > a::before {
content: "" !important;
position: absolute !important;
top: 17px !important;
right: 0 !important;
bottom: 17px !important;
width: 1px !important;
background: rgba(41, 65, 89, 0.18) !important;
border: 0 !important;
pointer-events: none !important;
}
/* Active / hover states stay clean - no filled tab background. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a:hover,
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a:focus {
color: #63a91d !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Approved green active underline. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 26px !important;
right: 26px !important;
bottom: -1px !important;
height: 4px !important;
background: #83c52f !important;
border: 0 !important;
border-radius: 99px 99px 0 0 !important;
}
/* Approved small green pointer. */
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active::after {
content: "" !important;
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: -8px !important;
width: 0 !important;
height: 0 !important;
margin-left: -8px !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid #83c52f !important;
border-bottom: 0 !important;
z-index: 3 !important;
}
/* Content itself should visually continue from the page, not sit in a white card. */
.route-product-product #content > .product-blocks.blocks-default .tab-content {
margin: 0 !important;
padding: 28px 4px 24px !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Tablet: retain generous spacing but avoid crowding. */
@media (min-width: 761px) and (max-width: 1024px) {
.route-product-product #content > .product-blocks.blocks-default .nav-tabs {
min-height: 60px !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
flex: 0 0 auto !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a {
min-height: 60px !important;
padding: 18px 21px 17px !important;
font-size: 14.5px !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a::after {
left: 21px !important;
right: 21px !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li:not(:last-child) > a::before {
top: 16px !important;
bottom: 16px !important;
}
.route-product-product #content > .product-blocks.blocks-default .tab-content {
padding: 24px 2px 22px !important;
}
}
/* Phone: horizontal swipe remains usable, still no white boxes. */
@media (max-width: 760px) {
.route-product-product #content > .product-blocks.blocks-default .nav-tabs {
min-height: 56px !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li {
flex: 0 0 auto !important;
margin: 0 !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li > a {
min-height: 56px !important;
padding: 16px 18px 15px !important;
font-size: 14px !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li.active > a::after {
left: 18px !important;
right: 18px !important;
}
.route-product-product #content > .product-blocks.blocks-default .nav-tabs > li:not(:last-child) > a::before {
top: 14px !important;
bottom: 14px !important;
}
.route-product-product #content > .product-blocks.blocks-default .tab-content {
padding: 22px 0 20px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.47 CLEAN - PRODUCT PURCHASE INFO REBALANCE
- price remains on the left
- middle area reserved for product features
- manufacturer stays on the right
- stock + model move directly below manufacturer
- phone-order line added below purchase buttons
- IMPORTANT: existing bottom anchor/alignment is NOT changed
========================================================= */
/* ---------------------------------------------------------
PRICE / FEATURES / MANUFACTURER AREA
Do not change the existing margin-top:auto bottom anchoring.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product .product-price-group {
/* Keep this card at its existing bottom-anchored position.
Only rebalance the internal columns. */
grid-template-columns:
minmax(170px, 0.82fr)
minmax(0, 1.55fr) !important;
gap: 0 !important;
}
.route-product-product #product .price-wrapper {
padding-right: 22px !important;
border-right: 1px solid #e7ecef !important;
}
/* Product-stats becomes a two-column internal stage:
LEFT = reserved feature zone
RIGHT = manufacturer + stock + model. */
.route-product-product #product .product-stats {
display: grid !important;
grid-template-columns: minmax(190px, 1fr) 138px !important;
grid-template-rows: auto auto !important;
column-gap: 20px !important;
row-gap: 8px !important;
align-items: center !important;
min-width: 0 !important;
padding: 0 0 0 22px !important;
}
/* Manufacturer at upper-right. */
.route-product-product #product .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
width: 138px !important;
min-width: 138px !important;
margin: 0 !important;
padding: 0 0 10px 16px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .brand-image.product-manufacturer > a {
width: 118px !important;
min-height: 82px !important;
margin: 0 auto !important;
}
.route-product-product #product .brand-image.product-manufacturer img {
width: 72px !important;
height: 72px !important;
}
/* Stock and product code directly below the manufacturer logo. */
.route-product-product #product .product-stats > ul {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
width: 138px !important;
min-width: 138px !important;
margin: 0 !important;
padding: 10px 0 0 16px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-stats > ul > li {
margin: 0 0 6px !important;
color: #294159 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 550 !important;
line-height: 1.32 !important;
}
.route-product-product #product .product-stats > ul > li:last-child {
margin-bottom: 0 !important;
}
.route-product-product #product .product-stock:not(.out-of-stock) span {
color: #63a91d !important;
font-weight: 700 !important;
}
.route-product-product #product .product-model span {
color: #4f8f1f !important;
font-weight: 700 !important;
}
/* LEFT/MIDDLE feature zone.
This is intentionally left structurally free: product-specific
features must come from product data/HTML, not be hard-coded
globally in CSS. */
.route-product-product #product .product-stats::before {
content: "" !important;
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: block !important;
min-width: 0 !important;
min-height: 118px !important;
margin: 0 !important;
padding: 0 20px 0 0 !important;
}
}
/* ---------------------------------------------------------
PHONE ORDER LINE BELOW THE PURCHASE BUTTONS
Visual CSS implementation.
Number deliberately uses a darker EA green.
--------------------------------------------------------- */
.route-product-product #product .button-group-page {
position: relative !important;
/* Keep the existing card position/alignment.
Only reserve vertical space inside it for the phone line. */
padding-bottom: 58px !important;
}
/* Label */
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
position: absolute !important;
left: 22px !important;
bottom: 20px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* Phone number - darker green than the normal accent. */
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 246px !important;
bottom: 19px !important;
display: block !important;
margin: 0 !important;
padding: 0 0 2px !important;
color: #4f8f1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(79, 143, 31, 0.55) !important;
}
/* ---------------------------------------------------------
TABLET
Keep the same hierarchy without disturbing purchase-stage
bottom alignment.
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .product-stats {
grid-template-columns: minmax(0, 1fr) 120px !important;
grid-template-rows: auto auto !important;
column-gap: 14px !important;
row-gap: 6px !important;
}
.route-product-product #product .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
width: 120px !important;
min-width: 120px !important;
padding: 0 0 8px 12px !important;
}
.route-product-product #product .product-stats > ul {
grid-column: 2 !important;
grid-row: 2 !important;
width: 120px !important;
min-width: 120px !important;
padding: 8px 0 0 12px !important;
}
.route-product-product #product .product-stats::before {
content: "" !important;
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-height: 96px !important;
}
.route-product-product #product .button-group-page {
padding-bottom: 56px !important;
}
.route-product-product #product .button-group-page::before {
left: 18px !important;
bottom: 19px !important;
font-size: 14px !important;
}
.route-product-product #product .button-group-page::after {
left: 222px !important;
bottom: 18px !important;
font-size: 15px !important;
}
}
/* ---------------------------------------------------------
MOBILE
Manufacturer first, stock/model immediately underneath.
No changes to existing CTA layout logic.
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 96px !important;
grid-template-rows: auto auto !important;
gap: 8px 12px !important;
}
.route-product-product #product .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: end !important;
margin: 0 !important;
padding: 0 0 6px 10px !important;
}
.route-product-product #product .product-stats > ul {
grid-column: 2 !important;
grid-row: 2 !important;
width: 96px !important;
margin: 0 !important;
padding: 6px 0 0 10px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-stats > ul > li {
font-size: 10.5px !important;
line-height: 1.28 !important;
}
.route-product-product #product .product-stats::before {
content: "" !important;
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
min-height: 84px !important;
}
.route-product-product #product .button-group-page {
padding-bottom: 72px !important;
}
.route-product-product #product .button-group-page::before {
left: 16px !important;
right: 16px !important;
bottom: 42px !important;
font-size: 13.5px !important;
white-space: normal !important;
}
.route-product-product #product .button-group-page::after {
left: 16px !important;
bottom: 18px !important;
font-size: 15px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.48 CLEAN - CONDITIONAL KEY-FEATURES LAYOUT
- default/no features: restore the proven pre-v10.47 layout
- only when a real key-features block exists:
PRICE | KEY FEATURES | MANUFACTURER
stock/model below manufacturer
- phone-order line remains
- purchase stack bottom anchoring remains untouched
========================================================= */
/* ---------------------------------------------------------
1) DEFAULT: NO KEY FEATURES
Restore pre-v10.47 purchase-card structure.
This is the fallback for the vast majority of products unless
a dedicated key-feature element is actually rendered.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) {
grid-template-columns: minmax(170px, 0.92fr) minmax(0, 1.28fr) !important;
gap: 0 !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .price-wrapper {
padding: 8px 22px 8px 0 !important;
border-right: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 112px !important;
grid-template-rows: auto !important;
gap: 14px !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats > ul {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: center !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .brand-image.product-manufacturer {
display: block !important;
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
align-self: center !important;
width: 112px !important;
min-width: 112px !important;
margin: 0 !important;
padding: 0 0 0 14px !important;
border-left: 1px solid #e7ecef !important;
overflow: visible !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .brand-image.product-manufacturer > a {
width: 98px !important;
min-height: 105px !important;
margin: 0 auto !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .brand-image.product-manufacturer img {
width: 76px !important;
height: 76px !important;
}
/* Remove the artificial empty feature placeholder introduced in v10.47. */
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats::before {
content: none !important;
display: none !important;
}
}
/* ---------------------------------------------------------
2) KEY FEATURES PRESENT
Triggered only by one of these dedicated hooks:
.ea-key-features
.product-key-features
[data-ea-key-features]
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product .product-price-group:has(.ea-key-features),
.route-product-product #product .product-price-group:has(.product-key-features),
.route-product-product #product .product-price-group:has([data-ea-key-features]) {
grid-template-columns: minmax(170px, 0.80fr) minmax(0, 1.60fr) !important;
gap: 0 !important;
}
.route-product-product #product .product-price-group:has(.ea-key-features) .product-stats,
.route-product-product #product .product-price-group:has(.product-key-features) .product-stats,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .product-stats {
display: grid !important;
grid-template-columns: minmax(190px, 1fr) 138px !important;
grid-template-rows: auto auto !important;
column-gap: 20px !important;
row-gap: 8px !important;
align-items: center !important;
min-width: 0 !important;
padding: 0 0 0 22px !important;
}
/* Actual feature block in the center/left of product-stats. */
.route-product-product #product .product-stats > .ea-key-features,
.route-product-product #product .product-stats > .product-key-features,
.route-product-product #product .product-stats > [data-ea-key-features] {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 10px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 4px 20px 4px 0 !important;
color: #294159 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 550 !important;
line-height: 1.38 !important;
}
.route-product-product #product .product-stats > .ea-key-features > *,
.route-product-product #product .product-stats > .product-key-features > *,
.route-product-product #product .product-stats > [data-ea-key-features] > * {
position: relative !important;
margin: 0 !important;
padding-left: 28px !important;
}
.route-product-product #product .product-stats > .ea-key-features > *::before,
.route-product-product #product .product-stats > .product-key-features > *::before,
.route-product-product #product .product-stats > [data-ea-key-features] > *::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: -1px !important;
color: #63a91d !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* Manufacturer stays at upper-right. */
.route-product-product #product .product-price-group:has(.ea-key-features) .brand-image.product-manufacturer,
.route-product-product #product .product-price-group:has(.product-key-features) .brand-image.product-manufacturer,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
width: 138px !important;
min-width: 138px !important;
margin: 0 !important;
padding: 0 0 10px 16px !important;
border-left: 1px solid #e7ecef !important;
}
/* Stock + model only move below logo when features actually exist. */
.route-product-product #product .product-price-group:has(.ea-key-features) .product-stats > ul,
.route-product-product #product .product-price-group:has(.product-key-features) .product-stats > ul,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .product-stats > ul {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
width: 138px !important;
min-width: 138px !important;
margin: 0 !important;
padding: 10px 0 0 16px !important;
border-left: 1px solid #e7ecef !important;
}
/* No generated fake placeholder when a real feature block exists. */
.route-product-product #product .product-price-group:has(.ea-key-features) .product-stats::before,
.route-product-product #product .product-price-group:has(.product-key-features) .product-stats::before,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .product-stats::before {
content: none !important;
display: none !important;
}
}
/* ---------------------------------------------------------
TABLET / MOBILE FALLBACK
If key features are absent, retain the previous compact layout.
If present, features use the first column and manufacturer/meta
remain in the second column.
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats {
grid-template-columns: minmax(0, 1fr) 96px !important;
grid-template-rows: auto !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats > ul {
grid-column: 1 !important;
grid-row: 1 !important;
width: auto !important;
min-width: 0 !important;
padding: 16px 0 0 !important;
border-left: 0 !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats::before {
content: none !important;
display: none !important;
}
.route-product-product #product .product-price-group:has(.ea-key-features) .product-stats,
.route-product-product #product .product-price-group:has(.product-key-features) .product-stats,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .product-stats {
grid-template-columns: minmax(0, 1fr) 112px !important;
grid-template-rows: auto auto !important;
column-gap: 14px !important;
row-gap: 6px !important;
}
.route-product-product #product .product-stats > .ea-key-features,
.route-product-product #product .product-stats > .product-key-features,
.route-product-product #product .product-stats > [data-ea-key-features] {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
gap: 8px !important;
padding-right: 14px !important;
font-size: 12.5px !important;
}
}
@media (max-width: 860px) {
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats {
grid-template-columns: minmax(0, 1fr) 96px !important;
grid-template-rows: auto !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats > ul {
grid-column: 1 !important;
grid-row: 1 !important;
width: auto !important;
margin: 0 !important;
padding: 8px 0 0 !important;
border-left: 0 !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
}
.route-product-product #product .product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features])) .product-stats::before {
content: none !important;
display: none !important;
}
.route-product-product #product .product-price-group:has(.ea-key-features) .product-stats,
.route-product-product #product .product-price-group:has(.product-key-features) .product-stats,
.route-product-product #product .product-price-group:has([data-ea-key-features]) .product-stats {
grid-template-columns: minmax(0, 1fr) 96px !important;
grid-template-rows: auto auto !important;
gap: 8px 12px !important;
}
.route-product-product #product .product-stats > .ea-key-features,
.route-product-product #product .product-stats > .product-key-features,
.route-product-product #product .product-stats > [data-ea-key-features] {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
gap: 7px !important;
padding-right: 8px !important;
font-size: 11.5px !important;
line-height: 1.32 !important;
}
.route-product-product #product .product-stats > .ea-key-features > *,
.route-product-product #product .product-stats > .product-key-features > *,
.route-product-product #product .product-stats > [data-ea-key-features] > * {
padding-left: 22px !important;
}
.route-product-product #product .product-stats > .ea-key-features > *::before,
.route-product-product #product .product-stats > .product-key-features > *::before,
.route-product-product #product .product-stats > [data-ea-key-features] > *::before {
font-size: 16px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.49 CLEAN - EXACT KEY-FEATURES DOM PLACEMENT
Actual DOM:
.product-stats
> ul = stock + model
> .ea-key-features = key features
> .product-manufacturer = manufacturer
With features present:
PRICE | FEATURES | MANUFACTURER
STOCK/MODEL
Without features:
restores the established pre-feature layout.
IMPORTANT:
- does NOT change product-price-group margin-top:auto
- does NOT change purchase-button bottom anchoring
- does NOT change the 30-day price/footer positioning
========================================================= */
/* ---------------------------------------------------------
DESKTOP - PRODUCTS WITH KEY FEATURES
--------------------------------------------------------- */
@media (min-width: 1201px) {
/* Price on left, all meta content in second main column. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: minmax(170px, 0.82fr) minmax(0, 1.55fr) !important;
gap: 0 !important;
}
/* Exact internal two-column layout:
col 1 = features
col 2 = manufacturer + stock/model */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats {
display: grid !important;
grid-template-columns: minmax(220px, 1fr) 152px !important;
grid-template-rows: auto auto !important;
column-gap: 20px !important;
row-gap: 0 !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 24px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* FEATURES = middle column, vertically centred. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: stretch !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 12px !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 6px 24px 6px 0 !important;
color: #294159 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 550 !important;
line-height: 1.38 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div {
position: relative !important;
margin: 0 !important;
padding: 0 0 0 28px !important;
color: #294159 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: -2px !important;
color: #63a91d !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* MANUFACTURER = upper-right. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .brand-image.product-manufacturer {
display: block !important;
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
width: 152px !important;
min-width: 152px !important;
margin: 0 !important;
padding: 0 0 10px 16px !important;
border-left: 1px solid #e7ecef !important;
overflow: visible !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .brand-image.product-manufacturer > a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 126px !important;
min-height: 82px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .brand-image.product-manufacturer img {
width: 76px !important;
height: 76px !important;
object-fit: contain !important;
}
/* STOCK + MODEL = directly under manufacturer. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: stretch !important;
width: 152px !important;
min-width: 152px !important;
margin: 0 !important;
padding: 10px 0 0 16px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled > li {
display: block !important;
margin: 0 0 7px !important;
padding: 0 !important;
color: #294159 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 550 !important;
line-height: 1.28 !important;
text-align: left !important;
white-space: normal !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled > li:last-child {
margin-bottom: 0 !important;
}
/* Show stock in the compact form from the approved mockup. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > b {
display: none !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > span {
display: block !important;
color: #63a91d !important;
font-size: 15px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock.out-of-stock > span {
color: #d8423b !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-model > b {
display: inline !important;
color: #294159 !important;
font-weight: 650 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-model > span {
display: inline !important;
margin-left: 4px !important;
color: #4f8f1f !important;
font-weight: 700 !important;
}
/* Kill all old placeholder pseudo-elements. */
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats::before,
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats::after {
content: none !important;
display: none !important;
}
}
/* ---------------------------------------------------------
DESKTOP - NO KEY FEATURES
Exact fallback to the established layout.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) {
grid-template-columns: minmax(170px, 0.92fr) minmax(0, 1.28fr) !important;
}
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 112px !important;
grid-template-rows: auto !important;
gap: 14px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 0 0 22px !important;
}
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats > ul.list-unstyled {
grid-column: 1 !important;
grid-row: 1 !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-left: 0 !important;
}
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
align-self: center !important;
width: 112px !important;
min-width: 112px !important;
margin: 0 !important;
padding: 0 0 0 14px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats::before,
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats::after {
content: none !important;
display: none !important;
}
}
/* ---------------------------------------------------------
TABLET - FEATURES PRESENT
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 122px !important;
grid-template-rows: auto auto !important;
column-gap: 14px !important;
row-gap: 0 !important;
padding: 16px 0 0 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
margin: 0 !important;
padding: 4px 14px 4px 0 !important;
font-size: 12.5px !important;
line-height: 1.34 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div {
position: relative !important;
margin: 0 !important;
padding-left: 24px !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: -1px !important;
color: #63a91d !important;
font-size: 17px !important;
font-weight: 800 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
width: 122px !important;
min-width: 122px !important;
margin: 0 !important;
padding: 0 0 8px 12px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
width: 122px !important;
min-width: 122px !important;
margin: 0 !important;
padding: 8px 0 0 12px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled > li {
margin: 0 0 5px !important;
font-size: 11px !important;
line-height: 1.28 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > b {
display: none !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > span {
display: block !important;
color: #63a91d !important;
font-size: 13px !important;
font-weight: 750 !important;
}
}
/* ---------------------------------------------------------
MOBILE
Keep it compact and readable.
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 96px !important;
grid-template-rows: auto auto !important;
gap: 8px 10px !important;
padding: 12px 0 0 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
margin: 0 !important;
padding: 2px 8px 2px 0 !important;
font-size: 11.5px !important;
line-height: 1.3 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div {
position: relative !important;
margin: 0 !important;
padding-left: 21px !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .ea-key-features > div::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: -1px !important;
color: #63a91d !important;
font-size: 15px !important;
font-weight: 800 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
width: 96px !important;
min-width: 96px !important;
margin: 0 !important;
padding: 0 0 6px 9px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
width: 96px !important;
min-width: 96px !important;
margin: 0 !important;
padding: 6px 0 0 9px !important;
border-left: 1px solid #e7ecef !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stats > ul.list-unstyled > li {
margin: 0 0 4px !important;
font-size: 9.5px !important;
line-height: 1.22 !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > b {
display: none !important;
}
.route-product-product #product .product-price-group:has(.product-stats > .ea-key-features) .product-stock > span {
display: block !important;
color: #63a91d !important;
font-size: 11px !important;
font-weight: 750 !important;
}
/* no-feature fallback stays as the pre-feature compact structure */
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats::before,
.route-product-product #product .product-price-group:not(:has(.product-stats > .ea-key-features)) .product-stats::after {
content: none !important;
display: none !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.50 CLEAN - STOCK / MODEL TYPOGRAPHY
- in-stock sentence:
SL: Izdelek je na zalogi
EN: The product is in stock
- product code line fully normal-weight black
- no changes to features layout or purchase bottom anchoring
========================================================= */
/* ---------------------------------------------------------
PRODUCT CODE - PLAIN BLACK, NORMAL WEIGHT
Applies especially to the manufacturer/meta column used
when key features are present.
--------------------------------------------------------- */
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
color: #1f252b !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product #product .product-model b {
display: inline !important;
font-weight: 400 !important;
}
.route-product-product #product .product-model span {
display: inline !important;
margin-left: 4px !important;
font-weight: 400 !important;
}
/* ---------------------------------------------------------
IN-STOCK SENTENCE
Keep the actual stock value generated by OpenCart and add
only the language-specific introductory wording.
--------------------------------------------------------- */
.route-product-product #product .product-stock:not(.out-of-stock) > b {
display: none !important;
}
.route-product-product #product .product-stock:not(.out-of-stock) > span {
display: block !important;
color: #4f8f1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
/* Slovenian */
html[lang^="sl"] .route-product-product #product .product-stock:not(.out-of-stock) > span::before {
content: "Izdelek je " !important;
}
/* English */
html[lang^="en"] .route-product-product #product .product-stock:not(.out-of-stock) > span::before {
content: "The product is " !important;
}
/* Safe fallback if the document has no/unknown lang attribute:
keep OpenCart's own stock wording without an added prefix. */
.route-product-product #product .product-stock:not(.out-of-stock) > span::before {
font-weight: 500 !important;
}
/* Tablet */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .product-stock:not(.out-of-stock) > span {
font-size: 13px !important;
}
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
font-size: 11px !important;
}
}
/* Mobile */
@media (max-width: 860px) {
.route-product-product #product .product-stock:not(.out-of-stock) > span {
font-size: 11px !important;
line-height: 1.25 !important;
}
.route-product-product #product .product-model,
.route-product-product #product .product-model b,
.route-product-product #product .product-model span {
font-size: 9.5px !important;
line-height: 1.25 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.51 CLEAN - SALE PRICE / FEATURES OVERLAP FIX
- keeps sale badges fully inside the price column
- prevents overlap with .ea-key-features
- keeps manufacturer/meta placement unchanged
- keeps countdown unchanged
- keeps purchase stack bottom anchoring unchanged
========================================================= */
/* The sale pill previously used width + horizontal padding in
content-box sizing, making the real pill wider than its column. */
.route-product-product #product .product-price-group .product-price-new {
box-sizing: border-box !important;
}
/* Products WITH key features need a strictly bounded sale-price area. */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
min-width: 0 !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 330px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 18px !important;
padding-right: 18px !important;
font-size: clamp(34px, 2.35vw, 46px) !important;
}
/* Keep the yellow regular-price chip inside the same price column. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
left: auto !important;
right: 12px !important;
max-width: calc(100% - 24px) !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
}
/* Give the feature column a clean visual start and prevent any
price decoration from visually crossing the divider. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats {
position: relative !important;
z-index: 2 !important;
background: #ffffff !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
position: relative !important;
z-index: 1 !important;
}
}
/* Medium desktop / tablet-landscape: slightly narrower sale pill,
so longer prices can never collide with the feature column. */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: min(100%, 300px) !important;
max-width: 300px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
right: 10px !important;
max-width: calc(100% - 20px) !important;
}
}
/* Phone: keep sale treatment safely within its own width. */
@media (max-width: 860px) {
.route-product-product #product .product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.52 CLEAN - PRODUCT PURCHASE FINAL POLISH
- sale price cannot overlap / clip into features
- key-feature group centered in middle column
- model line completely plain black
- exact in-stock sentence for SL / EN
- phone line restored BELOW buttons
- button row itself remains pinned to image-bottom alignment
========================================================= */
/* ---------------------------------------------------------
1) DESKTOP FEATURE LAYOUT: GIVE SALE PRICE REAL SPACE
--------------------------------------------------------- */
@media (min-width: 1400px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: 390px minmax(0, 1fr) !important;
}
}
@media (min-width: 1201px) and (max-width: 1399px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: 350px minmax(0, 1fr) !important;
}
}
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
box-sizing: border-box !important;
min-width: 0 !important;
padding-left: 18px !important;
padding-right: 22px !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 320px !important;
min-width: 0 !important;
min-height: 106px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 14px 16px 30px !important;
font-size: clamp(35px, 2.2vw, 44px) !important;
line-height: 1 !important;
letter-spacing: -0.025em !important;
white-space: nowrap !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
left: 50% !important;
right: auto !important;
top: 0 !important;
max-width: 230px !important;
transform: translateX(-50%) rotate(-3deg) !important;
transform-origin: 50% 100% !important;
}
}
/* ---------------------------------------------------------
2) KEY FEATURES: CENTER THE LIST AS A GROUP
Individual rows remain readable/left-aligned with checks.
--------------------------------------------------------- */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features {
box-sizing: border-box !important;
width: fit-content !important;
max-width: 100% !important;
justify-self: center !important;
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 8px !important;
padding-right: 8px !important;
text-align: left !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features > div {
width: 100% !important;
text-align: left !important;
}
/* ---------------------------------------------------------
3) MODEL / PRODUCT CODE: ENTIRE LINE PLAIN BLACK
Higher specificity than the earlier green model-value rules.
--------------------------------------------------------- */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > b,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > span {
color: #1f252b !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > b,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > span {
display: inline !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > span {
margin-left: 4px !important;
}
/* ---------------------------------------------------------
4) STOCK: EXACT LANGUAGE-SPECIFIC SENTENCE
Hide the original short stock text visually and generate the
complete sentence, so it works even if OpenCart says only
"Na zalogi" / "In stock".
Slovenian is the safe default; English overrides via :lang().
--------------------------------------------------------- */
.route-product-product #product
.product-stock:not(.out-of-stock) > b {
display: none !important;
}
.route-product-product #product
.product-stock:not(.out-of-stock) > span {
display: block !important;
color: #4f8f1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 0 !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.route-product-product #product
.product-stock:not(.out-of-stock) > span::before {
content: "Izdelek je na zalogi" !important;
display: block !important;
color: #4f8f1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: normal !important;
}
html:lang(en) .route-product-product #product
.product-stock:not(.out-of-stock) > span::before,
body:lang(en) .route-product-product #product
.product-stock:not(.out-of-stock) > span::before {
content: "The product is in stock" !important;
}
/* ---------------------------------------------------------
5) PHONE ORDER LINE BELOW BUTTONS
Keep the actual button card height/padding at the established
value so its bottom stays aligned with the image stage.
Render the phone line outside/below it and reserve page flow
beneath .product-info so the tabs cannot overlap it.
--------------------------------------------------------- */
@media (min-width: 861px) {
.route-product-product #content > .product-info {
margin-bottom: 58px !important;
overflow: visible !important;
}
.route-product-product #content > .product-info > .product-right,
.route-product-product #content > .product-info > .product-right > #product {
overflow: visible !important;
}
.route-product-product #product .button-group-page {
position: relative !important;
padding: 17px 18px 18px !important;
overflow: visible !important;
}
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
position: absolute !important;
left: 18px !important;
right: auto !important;
bottom: -42px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
z-index: 20 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 238px !important;
right: auto !important;
bottom: -43px !important;
display: block !important;
margin: 0 !important;
padding: 0 0 2px !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.55) !important;
z-index: 20 !important;
}
}
/* Mobile: keep the phone line below controls in normal reserved space. */
@media (max-width: 860px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding-bottom: 72px !important;
overflow: visible !important;
}
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
left: 16px !important;
right: 16px !important;
bottom: 42px !important;
color: #27323d !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
left: 16px !important;
right: auto !important;
bottom: 18px !important;
color: #356f18 !important;
font-size: 15px !important;
font-weight: 700 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > b,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > .product-model > span {
font-size: 9.5px !important;
}
.route-product-product #product
.product-stock:not(.out-of-stock) > span::before {
font-size: 11px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.53 CLEAN - LARGE SALE PRICE SAFETY
- supports long prices such as 9.999,99 €
- keeps price fully inside its own column
- regular-price chip can also hold long amounts
- features / manufacturer / stock layout unchanged
- purchase bottom anchoring unchanged
========================================================= */
/* Use the price area itself as a responsive sizing container. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
container-type: inline-size !important;
}
/* Give the price a genuinely usable desktop column. */
@media (min-width: 1600px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: 430px minmax(0, 1fr) !important;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: 405px minmax(0, 1fr) !important;
}
}
@media (min-width: 1201px) and (max-width: 1399px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: 375px minmax(0, 1fr) !important;
}
}
/* Long sale amounts stay inside the red pill.
Fallback font-size is intentionally conservative; browsers
supporting container units scale it to the actual price column. */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: calc(100% - 12px) !important;
max-width: 390px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 18px !important;
padding-right: 18px !important;
font-size: 40px !important;
font-size: clamp(30px, 10cqw, 44px) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
/* The old/regular price may also be a four-digit amount. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
min-width: 176px !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
padding-left: 20px !important;
padding-right: 20px !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums !important;
}
}
/* Slightly tighter range before the layout stacks on tablet. */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
container-type: inline-size !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: min(100%, 390px) !important;
max-width: 390px !important;
padding-left: 16px !important;
padding-right: 16px !important;
font-size: 38px !important;
font-size: clamp(28px, 10cqw, 42px) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
min-width: 170px !important;
max-width: calc(100% - 20px) !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* Mobile: full available width, with scalable typography. */
@media (max-width: 860px) {
.route-product-product #product .price-wrapper {
container-type: inline-size !important;
}
.route-product-product #product .product-price-new {
box-sizing: border-box !important;
width: calc(100% - 8px) !important;
max-width: 390px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 34px !important;
font-size: clamp(26px, 10cqw, 38px) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
}
.route-product-product #product .product-price-old {
max-width: calc(100% - 16px) !important;
white-space: nowrap !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.54 CLEAN - PRODUCT PURCHASE PANEL GEOMETRY FIX
Fixes:
1) sale price never overlaps key features, including 9.999,99 €
2) key-feature group centered in its middle column
3) product code entire line black + normal weight
4) stock sentence rendered exactly once
5) phone-order line gets clear space above tabs
IMPORTANT:
- button/purchase row bottom anchoring remains unchanged
========================================================= */
/* ---------------------------------------------------------
1) DESKTOP PRICE / FEATURES / MANUFACTURER GEOMETRY
Do NOT size the price column from the full viewport.
The right product panel itself is the limiting container.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: minmax(285px, 320px) minmax(0, 1fr) !important;
gap: 0 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
box-sizing: border-box !important;
min-width: 0 !important;
width: 100% !important;
padding-right: 18px !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Large-price safe:
9.999,99 € fits without allowing the red pill to enter
the key-feature column. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 300px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 14px !important;
padding-right: 14px !important;
font-size: clamp(32px, 2.15vw, 40px) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
/* Regular-price badge also stays completely inside price column. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
left: 50% !important;
right: auto !important;
top: 0 !important;
width: auto !important;
min-width: 172px !important;
max-width: 220px !important;
padding-left: 16px !important;
padding-right: 16px !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums !important;
transform: translateX(-50%) rotate(-3deg) !important;
transform-origin: 50% 100% !important;
}
/* The right side is allowed to use all remaining space. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats {
box-sizing: border-box !important;
grid-template-columns: minmax(0, 1fr) 150px !important;
min-width: 0 !important;
padding-left: 18px !important;
background: #ffffff !important;
}
}
/* ---------------------------------------------------------
2) KEY FEATURES - CENTER THE GROUP IN THE MIDDLE COLUMN
Keep individual lines left-aligned for readability.
--------------------------------------------------------- */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features {
box-sizing: border-box !important;
width: max-content !important;
max-width: calc(100% - 20px) !important;
justify-self: center !important;
align-self: center !important;
align-items: flex-start !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 8px !important;
padding-right: 8px !important;
text-align: left !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features > div {
width: auto !important;
max-width: 100% !important;
text-align: left !important;
}
/* ---------------------------------------------------------
3) PRODUCT CODE - ENTIRE LINE PLAIN BLACK
No green product-code value, no bold label.
--------------------------------------------------------- */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
display: inline !important;
font-weight: 400 !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
margin-left: 4px !important;
}
/* ---------------------------------------------------------
4) STOCK - EXACTLY ONE SENTENCE
Hide BOTH original OpenCart stock children and use the LI
itself to render one language-specific sentence.
--------------------------------------------------------- */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: none !important;
display: none !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "Izdelek je na zalogi" !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #4f8f1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: normal !important;
}
html:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
html[lang^="en"] .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
body:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "The product is in stock" !important;
}
/* ---------------------------------------------------------
5) PHONE LINE - KEEP BUTTONS WHERE THEY ARE,
ONLY PUSH THE TABS FURTHER DOWN.
--------------------------------------------------------- */
@media (min-width: 861px) {
/* More reserved flow after product stage.
This does NOT move the button row itself. */
.route-product-product #content > .product-info {
margin-bottom: 86px !important;
overflow: visible !important;
}
.route-product-product #content > .product-info > .product-right,
.route-product-product #content > .product-info > .product-right > #product,
.route-product-product #product .button-group-page {
overflow: visible !important;
}
.route-product-product #product .button-group-page::before {
bottom: -40px !important;
z-index: 30 !important;
}
.route-product-product #product .button-group-page::after {
bottom: -41px !important;
z-index: 30 !important;
}
/* Ensure tabs start below the reserved phone-order area. */
.route-product-product #content > .product-blocks.blocks-default {
margin-top: 0 !important;
clear: both !important;
}
}
/* ---------------------------------------------------------
TABLET
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
width: min(100%, 300px) !important;
max-width: 300px !important;
font-size: clamp(30px, 4vw, 38px) !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
min-width: 164px !important;
max-width: 210px !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
font-size: 11px !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-size: 13px !important;
}
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product .product-price-new {
box-sizing: border-box !important;
width: min(100%, 300px) !important;
max-width: 300px !important;
font-size: clamp(27px, 9vw, 36px) !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
font-size: 9.5px !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-size: 11px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.55 CLEAN - STOCK / MODEL UNIFIED TYPOGRAPHY
- stock sentence and product code use the same font size
- both are centered
- all text is normal black except the actual availability words
- SL: "Izdelek je" + bold green "na zalogi"
- EN: "The product is" + bold green "in stock"
- no layout / price / button anchoring changes
========================================================= */
/* Shared typography for stock + product code */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* PRODUCT CODE: completely plain black / normal weight */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: #171b1f !important;
font-weight: 400 !important;
}
/* Keep one normal space between label and value */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
margin-left: 4px !important;
}
/* STOCK: hide original OpenCart label/value */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
/* Reset previous full-sentence pseudo output */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* Slovenian default */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Izdelek je " !important;
color: #171b1f !important;
font-weight: 400 !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "na zalogi" !important;
color: #4f8f1f !important;
font-weight: 700 !important;
}
/* English */
html:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
html[lang^="en"] .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
body:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "The product is " !important;
}
html:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
html[lang^="en"] .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
body:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
}
/* Ensure both rows are centered within manufacturer/meta column */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled {
text-align: center !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled > li {
text-align: center !important;
}
/* Tablet: same size for BOTH lines */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-size: 11px !important;
}
}
/* Mobile: same size for BOTH lines */
@media (max-width: 860px) {
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-size: 9.5px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.56 CLEAN - COMPACT SALE PRICE + PHONE INSIDE CARD
- reverses oversized price-column approach
- compact price badge leaves proper width for key features
- supports long prices such as 9.999,99 EUR without overlap
- phone line sits inside purchase card below buttons
- purchase card bottom stays aligned with image bottom
========================================================= */
/* ---------------------------------------------------------
DESKTOP WITH KEY FEATURES
Compact PRICE | FEATURES | MANUFACTURER geometry.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: minmax(225px, 255px) minmax(0, 1fr) !important;
gap: 0 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
padding: 4px 14px 4px 0 !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 28px 4px 0 !important;
overflow: visible !important;
}
/* Compact sale badge. A long amount such as 9.999,99 EUR
still fits because the number scales before the badge grows. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 238px !important;
min-width: 0 !important;
min-height: 86px !important;
margin: 0 auto !important;
padding: 10px 12px 25px !important;
font-size: 31px !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
font-variant-numeric: tabular-nums !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new::after {
bottom: 10px !important;
font-size: 9.5px !important;
}
/* Keep the regular-price chip compact and inside the price zone. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
left: 50% !important;
right: auto !important;
top: 0 !important;
width: auto !important;
min-width: 145px !important;
max-width: 188px !important;
height: 42px !important;
min-height: 42px !important;
padding: 13px 14px 4px !important;
font-size: 14px !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums !important;
transform: translateX(-50%) rotate(-3deg) !important;
transform-origin: 50% 100% !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old::before {
top: 4px !important;
font-size: 8px !important;
}
/* Remaining width belongs to features + manufacturer. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats {
grid-template-columns: minmax(0, 1fr) 138px !important;
column-gap: 14px !important;
min-width: 0 !important;
padding-left: 14px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features {
width: 100% !important;
max-width: 330px !important;
justify-self: center !important;
align-self: center !important;
margin: 0 auto !important;
padding: 4px 8px !important;
gap: 9px !important;
font-size: 13px !important;
line-height: 1.30 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features > div {
padding-left: 25px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features > div::before {
font-size: 18px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .brand-image.product-manufacturer,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled {
width: 138px !important;
min-width: 138px !important;
}
}
/* Extra protection for genuinely long promotional amounts.
At narrower desktop widths use a smaller but still premium number. */
@media (min-width: 1201px) and (max-width: 1450px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
font-size: 29px !important;
padding-left: 9px !important;
padding-right: 9px !important;
}
}
/* ---------------------------------------------------------
PHONE ORDER LINE - INSIDE PURCHASE CARD
The card remains the final flex child, so its BOTTOM edge stays
pinned to the same bottom line as the image. Extra phone space
grows upward, not below the image stage.
--------------------------------------------------------- */
@media (min-width: 861px) {
/* Undo the floating-outside approach from v10.52-v10.54. */
.route-product-product #content > .product-info {
margin-bottom: 18px !important;
}
.route-product-product #product .button-group-page {
position: relative !important;
box-sizing: border-box !important;
padding: 17px 18px 56px !important;
overflow: hidden !important;
}
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
position: absolute !important;
left: 22px !important;
right: auto !important;
bottom: 18px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
z-index: 30 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 221px !important;
right: auto !important;
bottom: 17px !important;
display: block !important;
margin: 0 !important;
padding: 0 0 1px !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
z-index: 30 !important;
}
html:lang(en) .route-product-product #product .button-group-page::before,
html[lang^="en"] .route-product-product #product .button-group-page::before,
body:lang(en) .route-product-product #product .button-group-page::before {
content: "Or call and order at" !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 174px !important;
}
/* Tabs follow normal flow below the product stage. */
.route-product-product #content > .product-blocks.blocks-default {
margin-top: 18px !important;
}
}
/* Tablet keeps the phone line inside the card too. */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
padding-bottom: 54px !important;
}
.route-product-product #product .button-group-page::before {
left: 18px !important;
bottom: 17px !important;
font-size: 12.5px !important;
}
.route-product-product #product .button-group-page::after {
left: 202px !important;
bottom: 16px !important;
font-size: 13.5px !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 160px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.57 CLEAN - RESTORE V10.51 PRICE + TRUE BOTTOM ANCHOR
- price/features geometry restored to v10.51 proportions
- only the red sale pill stretches horizontally inside price column
- long sale values (e.g. 9.999,99 EUR) remain contained
- phone stays INSIDE the purchase card under buttons
- purchase card bottom is locked to image-card bottom
- latest stock/model formatting from v10.56 is preserved
========================================================= */
/* ---------------------------------------------------------
DESKTOP: RESTORE V10.51 PRICE / FEATURES PROPORTIONS
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
grid-template-columns: minmax(170px, 0.82fr) minmax(0, 1.55fr) !important;
gap: 0 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
box-sizing: border-box !important;
min-width: 0 !important;
width: 100% !important;
padding: 8px 22px 8px 0 !important;
border-right: 1px solid #e7ecef !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 34px 10px 0 !important;
overflow: visible !important;
}
/* V10.51 visual size, but the red bubble itself may stretch to the
full available price-column width. Border-box prevents overlap. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 96px !important;
margin: 0 auto !important;
padding: 9px 16px 24px !important;
font-size: 40px !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
font-variant-numeric: tabular-nums !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new::after {
bottom: 13px !important;
font-size: 10px !important;
}
/* Yellow regular-price badge stays compact and centered above red. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
box-sizing: border-box !important;
left: 50% !important;
right: auto !important;
top: 0 !important;
width: auto !important;
min-width: 155px !important;
max-width: calc(100% - 20px) !important;
height: 44px !important;
min-height: 44px !important;
padding: 13px 16px 4px !important;
white-space: nowrap !important;
font-variant-numeric: tabular-nums !important;
transform: translateX(-50%) rotate(-3deg) !important;
transform-origin: 50% 100% !important;
}
/* Restore the wider feature/manufacturer section from v10.51. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats {
display: grid !important;
grid-template-columns: minmax(220px, 1fr) 152px !important;
grid-template-rows: auto auto !important;
column-gap: 20px !important;
row-gap: 0 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 0 0 24px !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .ea-key-features {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: max-content !important;
max-width: calc(100% - 20px) !important;
justify-self: center !important;
align-self: center !important;
margin: 0 auto !important;
padding: 6px 12px !important;
gap: 12px !important;
font-size: 13.5px !important;
line-height: 1.38 !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .brand-image.product-manufacturer,
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled {
width: 152px !important;
min-width: 152px !important;
}
}
/* Slightly smaller number only when the right product panel itself is
relatively narrow. The bubble remains full-width; the columns do not move. */
@media (min-width: 1201px) and (max-width: 1450px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
font-size: 36px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ---------------------------------------------------------
TRUE DESKTOP BOTTOM ANCHOR
The white purchase card bottom MUST equal the image-card bottom.
Phone fits inside the card without increasing its old overall height.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #content > .product-info {
align-items: stretch !important;
margin-bottom: 18px !important;
}
.route-product-product #content > .product-info > .product-left,
.route-product-product #content > .product-info > .product-right {
align-self: stretch !important;
height: var(--ea-product-stage-height) !important;
min-height: var(--ea-product-stage-height) !important;
max-height: var(--ea-product-stage-height) !important;
}
.route-product-product #content > .product-info > .product-left > .product-image {
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
}
.route-product-product #content > .product-info > .product-right > #product {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* Price stack remains the flexible spacer anchor. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
/* Keep the complete purchase card compact enough to remain inside
the fixed stage. Buttons + phone line share the original footprint. */
.route-product-product #product .button-group-page {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 9px 18px 31px !important;
background: #ffffff !important;
border-radius: 0 0 16px 16px !important;
overflow: hidden !important;
}
/* Compact only the controls vertically; widths/design stay untouched. */
.route-product-product #product .stepper-group.cart-group > .stepper {
height: 48px !important;
min-height: 48px !important;
}
.route-product-product #product .stepper-group.cart-group > .stepper input#product-quantity,
.route-product-product #product .stepper-group.cart-group > .stepper > span > i {
height: 45px !important;
line-height: 45px !important;
}
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .btn-extra-46 {
min-height: 48px !important;
height: 48px !important;
}
/* Phone is INSIDE the same card, immediately below buttons. */
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
position: absolute !important;
left: 22px !important;
right: auto !important;
bottom: 8px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
z-index: 30 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 205px !important;
right: auto !important;
bottom: 7px !important;
display: block !important;
margin: 0 !important;
padding: 0 0 1px !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
z-index: 30 !important;
}
html:lang(en) .route-product-product #product .button-group-page::before,
html[lang^="en"] .route-product-product #product .button-group-page::before,
body:lang(en) .route-product-product #product .button-group-page::before {
content: "Or call and order at" !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 163px !important;
}
/* Tabs follow the fixed stage, never the phone pseudo-elements. */
.route-product-product #content > .product-blocks.blocks-default {
margin-top: 18px !important;
clear: both !important;
}
}
/* Tablet: keep phone inside purchase card; do not float it into tabs. */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding: 9px 16px 31px !important;
overflow: hidden !important;
}
.route-product-product #product .button-group-page::before {
left: 18px !important;
bottom: 8px !important;
font-size: 11.5px !important;
}
.route-product-product #product .button-group-page::after {
left: 186px !important;
bottom: 7px !important;
font-size: 12.5px !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 149px !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.58 CLEAN - FULL-WIDTH SALE PILL + REAL PHONE ROW
- red sale pill uses the complete price section width
from left edge to 1px before the grey feature divider
- no artificial max-width on the red pill
- long amounts such as 9.999,99 € scale inside the pill
- phone text is a normal second row INSIDE the purchase card
- purchase card remains bottom-anchored to the image stage
========================================================= */
/* ---------------------------------------------------------
1) FULL-WIDTH SALE PRICE AREA
The PRICE WRAPPER itself owns the grey divider.
Red pill receives only 1px horizontal breathing room.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-wrapper {
box-sizing: border-box !important;
min-width: 0 !important;
width: 100% !important;
/* Only 1px between the red pill and the outer edges/divider. */
padding: 8px 1px 8px 1px !important;
border-right: 1px solid #e7ecef !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
/* top space is needed for the yellow regular-price chip;
horizontal padding is only 1px. */
padding: 34px 1px 0 1px !important;
overflow: visible !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
box-sizing: border-box !important;
/* EXACTLY fill the available price part. */
width: calc(100% - 2px) !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 1px !important;
padding: 9px 10px 24px !important;
min-height: 96px !important;
/* Conservative scalable size: enough for 9.999,99 €. */
font-size: 38px !important;
font-size: clamp(28px, 11cqw, 40px) !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.045em !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new::after {
bottom: 13px !important;
font-size: 10px !important;
}
/* Keep yellow chip centred over the full-width red pill. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
left: 50% !important;
right: auto !important;
top: 0 !important;
width: auto !important;
min-width: 155px !important;
max-width: calc(100% - 8px) !important;
transform: translateX(-50%) rotate(-3deg) !important;
transform-origin: 50% 100% !important;
}
}
/* Narrow desktop: bubble STILL fills the entire price section.
Only the number becomes smaller; columns do not move. */
@media (min-width: 1201px) and (max-width: 1450px) {
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
font-size: 32px !important;
font-size: clamp(27px, 11cqw, 34px) !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* ---------------------------------------------------------
2) PHONE ORDER = NORMAL FLOW ROW INSIDE PURCHASE CARD
Stop using button-group-page absolute pseudo-elements.
--------------------------------------------------------- */
/* Disable every older floating phone implementation. */
.route-product-product #product .button-group-page::before,
.route-product-product #product .button-group-page::after {
content: none !important;
display: none !important;
}
/* The purchase card stays the final block in the fixed-height
right product stage. Its bottom therefore remains aligned
with the bottom edge of the image. */
@media (min-width: 1201px) {
.route-product-product #content > .product-info > .product-right > #product {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 12px 18px 13px !important;
background: #ffffff !important;
border-radius: 0 0 16px 16px !important;
/* no clipping of the new internal row */
overflow: visible !important;
}
/* Direct wrapper becomes a two-row grid:
row 1 = quantity + cart + quick buy
row 2 = phone label + phone number */
.route-product-product #product
.button-group-page > .buttons-wrapper {
display: grid !important;
grid-template-columns: max-content max-content minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 10px !important;
row-gap: 11px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper > .stepper-group.cart-group {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
margin: 0 !important;
}
/* Phone label in normal document flow. */
.route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 !important;
grid-row: 2 !important;
align-self: center !important;
justify-self: start !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* Phone number in normal document flow. */
.route-product-product #product
.button-group-page > .buttons-wrapper::after {
content: "040 708 388" !important;
grid-column: 2 !important;
grid-row: 2 !important;
align-self: center !important;
justify-self: start !important;
display: block !important;
margin: 0 !important;
padding: 0 0 1px !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
}
/* English */
html:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before,
html[lang^="en"] .route-product-product #product
.button-group-page > .buttons-wrapper::before,
body:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Or call and order at" !important;
}
/* Keep controls at the agreed compact height.
The added phone row makes the card grow UPWARD because the
card bottom remains pinned to the image bottom. */
.route-product-product #product .stepper-group.cart-group > .stepper,
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .btn-extra-46 {
height: 48px !important;
min-height: 48px !important;
}
.route-product-product #product
.stepper-group.cart-group > .stepper input#product-quantity,
.route-product-product #product
.stepper-group.cart-group > .stepper > span > i {
height: 45px !important;
line-height: 45px !important;
}
}
/* ---------------------------------------------------------
3) TABLET
Same concept: real phone row, never floating into tabs.
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding: 11px 16px 12px !important;
overflow: visible !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper {
display: grid !important;
grid-template-columns: max-content max-content minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 9px !important;
row-gap: 9px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper > .stepper-group.cart-group {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 !important;
grid-row: 2 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper::after {
content: "040 708 388" !important;
grid-column: 2 !important;
grid-row: 2 !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
}
html:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before,
html[lang^="en"] .route-product-product #product
.button-group-page > .buttons-wrapper::before,
body:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Or call and order at" !important;
}
}
/* ---------------------------------------------------------
4) MOBILE
Stack phone label and number cleanly under controls.
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding-bottom: 16px !important;
overflow: visible !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto !important;
row-gap: 7px !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper > .stepper-group.cart-group {
grid-column: 1 !important;
grid-row: 1 !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 !important;
grid-row: 2 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.route-product-product #product
.button-group-page > .buttons-wrapper::after {
content: "040 708 388" !important;
grid-column: 1 !important;
grid-row: 3 !important;
justify-self: start !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
}
html:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before,
html[lang^="en"] .route-product-product #product
.button-group-page > .buttons-wrapper::before,
body:lang(en) .route-product-product #product
.button-group-page > .buttons-wrapper::before {
content: "Or call and order at" !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.59 CLEAN - PHONE VISIBILITY + COUNTDOWN DIVIDER
+ STOCK/MODEL TYPOGRAPHY
- phone is guaranteed visible INSIDE purchase card
- purchase-card bottom remains aligned to image bottom
- divider above "Akcija se konča" removed
- stock/model typography matches "Brez DDV"
========================================================= */
/* ---------------------------------------------------------
1) REMOVE GREY SEPARATION LINE ABOVE COUNTDOWN
--------------------------------------------------------- */
html body.route-product-product #product > .product-blocks.blocks-top,
html body.route-product-product #product > .countdown-wrapper,
html body.route-product-product #product > .product-countdown,
html body.route-product-product #product .product-blocks.blocks-top,
html body.route-product-product #product .countdown-wrapper {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
html body.route-product-product #product > .product-blocks.blocks-top::before,
html body.route-product-product #product > .product-blocks.blocks-top::after,
html body.route-product-product #product > .countdown-wrapper::before,
html body.route-product-product #product > .countdown-wrapper::after,
html body.route-product-product #product > .product-countdown::before,
html body.route-product-product #product > .product-countdown::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
@media (min-width: 1201px) {
html body.route-product-product #product > .product-blocks.blocks-top {
margin-bottom: 0 !important;
}
html body.route-product-product #product > .countdown-wrapper,
html body.route-product-product #product > .product-countdown {
margin-top: 0 !important;
padding-top: 0 !important;
}
html body.route-product-product #product .countdown-wrapper .countdown-title,
html body.route-product-product #product .product-countdown .countdown-title {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* ---------------------------------------------------------
2) STOCK + PRODUCT CODE
Same visual typography as "Brez DDV":
Overpass / 12px / 400 / black / centered.
Only availability words are bold green.
--------------------------------------------------------- */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled {
text-align: center !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* Hide original stock label/value. */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
/* Slovenian stock sentence. */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Izdelek je " !important;
display: inline !important;
color: #171b1f !important;
font-weight: 400 !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "na zalogi" !important;
display: inline !important;
color: #4f8f1f !important;
font-weight: 700 !important;
}
/* English stock sentence. */
html:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
html[lang^="en"] .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
body:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "The product is " !important;
}
html:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
html[lang^="en"] .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after,
body:lang(en) .route-product-product #product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
}
/* Product code = completely plain black text. */
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-weight: 400 !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model {
display: block !important;
width: 100% !important;
margin-top: 7px !important;
text-align: center !important;
}
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
display: inline !important;
}
/* ---------------------------------------------------------
3) PHONE - GUARANTEED INSIDE WHITE PURCHASE CARD
Stop the v10.58 pseudo row on .buttons-wrapper and place the
phone line inside .button-group-page itself.
--------------------------------------------------------- */
.route-product-product #product
.button-group-page > .buttons-wrapper::before,
.route-product-product #product
.button-group-page > .buttons-wrapper::after {
content: none !important;
display: none !important;
}
@media (min-width: 1201px) {
/* Reclaim vertical room above the purchase controls.
This lets the phone fit while the card bottom stays fixed
to the image-card bottom. */
.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features) {
padding-top: 14px !important;
padding-bottom: 10px !important;
}
.route-product-product #product .button-group-page {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
margin: 0 !important;
/* Row 1 controls + reserved Row 2 phone space. */
padding: 9px 18px 35px !important;
background: #ffffff !important;
border-radius: 0 0 16px 16px !important;
overflow: visible !important;
}
/* Keep the control row compact. */
.route-product-product #product .stepper-group.cart-group > .stepper,
.route-product-product #product #button-cart.btn-cart,
.route-product-product #product .btn-extra-46 {
height: 44px !important;
min-height: 44px !important;
}
.route-product-product #product
.stepper-group.cart-group > .stepper input#product-quantity,
.route-product-product #product
.stepper-group.cart-group > .stepper > span > i {
height: 41px !important;
line-height: 41px !important;
}
/* Phone label. */
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
position: absolute !important;
left: 22px !important;
right: auto !important;
bottom: 11px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
z-index: 100 !important;
pointer-events: none !important;
}
/* Phone number. */
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 205px !important;
right: auto !important;
bottom: 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 0 1px !important;
color: #356f18 !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(53, 111, 24, 0.5) !important;
z-index: 100 !important;
pointer-events: none !important;
}
html:lang(en) .route-product-product #product .button-group-page::before,
html[lang^="en"] .route-product-product #product .button-group-page::before,
body:lang(en) .route-product-product #product .button-group-page::before {
content: "Or call and order at" !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 164px !important;
}
/* Preserve the proven bottom anchor. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* Tablet */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding: 9px 16px 34px !important;
overflow: visible !important;
}
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
left: 18px !important;
bottom: 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #27323d !important;
font-size: 11.5px !important;
font-weight: 500 !important;
z-index: 100 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
left: 186px !important;
bottom: 9px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #356f18 !important;
font-size: 12.5px !important;
font-weight: 700 !important;
z-index: 100 !important;
}
html:lang(en) .route-product-product #product .button-group-page::before,
html[lang^="en"] .route-product-product #product .button-group-page::before,
body:lang(en) .route-product-product #product .button-group-page::before {
content: "Or call and order at" !important;
}
html:lang(en) .route-product-product #product .button-group-page::after,
html[lang^="en"] .route-product-product #product .button-group-page::after,
body:lang(en) .route-product-product #product .button-group-page::after {
left: 149px !important;
}
}
/* Mobile */
@media (max-width: 860px) {
.route-product-product #product .button-group-page {
position: relative !important;
padding-bottom: 62px !important;
overflow: visible !important;
}
.route-product-product #product .button-group-page::before {
content: "Ali pokličite in naročite na" !important;
left: 16px !important;
right: 16px !important;
bottom: 37px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #27323d !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.route-product-product #product .button-group-page::after {
content: "040 708 388" !important;
left: 16px !important;
right: auto !important;
bottom: 15px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #356f18 !important;
font-size: 13.5px !important;
font-weight: 700 !important;
}
html:lang(en) .route-product-product #product .button-group-page::before,
html[lang^="en"] .route-product-product #product .button-group-page::before,
body:lang(en) .route-product-product #product .button-group-page::before {
content: "Or call and order at" !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.60 CLEAN - MODEL TYPOGRAPHY + OLD PRICE BADGE
+ PHONE GREEN
- model line = same typography as "Brez DDV", dark black
- yellow REDNA CENA overlaps red bubble at top-right
- yellow right edge aligns with red bubble right edge
- phone number uses exact active OPIS green #63a91d
- no changes to purchase bottom anchoring
========================================================= */
/* ---------------------------------------------------------
1) PRODUCT MODEL
EXACT typography family / size / weight as "Brez DDV"
Only the color is dark black.
--------------------------------------------------------- */
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model,
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.35 !important;
color: #171b1f !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model {
display: block !important;
width: 100% !important;
margin: 7px 0 0 !important;
padding: 0 !important;
}
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > b,
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
html body.route-product-product #product
.product-stats > ul.list-unstyled > li.product-model > span {
margin-left: 4px !important;
}
/* ---------------------------------------------------------
2) YELLOW REGULAR-PRICE BADGE
Move DOWN into the top part of the red sale bubble.
Right edge = red bubble right edge.
--------------------------------------------------------- */
@media (min-width: 1201px) {
html body.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
position: relative !important;
}
html body.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
position: absolute !important;
left: auto !important;
right: 1px !important;
top: 20px !important;
width: auto !important;
min-width: 155px !important;
max-width: calc(100% - 2px) !important;
margin: 0 !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
z-index: 8 !important;
}
/* Red bubble remains full width up to 1px from divider. */
html body.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-new {
width: calc(100% - 2px) !important;
max-width: none !important;
margin-left: 1px !important;
margin-right: 1px !important;
}
}
/* Tablet: same right-edge alignment, slightly less overlap. */
@media (min-width: 861px) and (max-width: 1200px) {
html body.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.price-group {
position: relative !important;
}
html body.route-product-product #product
.product-price-group:has(.product-stats > .ea-key-features)
.product-price-old {
left: auto !important;
right: 1px !important;
top: 17px !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
}
}
/* ---------------------------------------------------------
3) PHONE NUMBER
Exact same green as active OPIS tab.
--------------------------------------------------------- */
html body.route-product-product #product .button-group-page::after {
color: #63a91d !important;
border-bottom-color: rgba(99, 169, 29, 0.55) !important;
}
/* Mobile/tablet inherit the same exact green. */
@media (max-width: 1200px) {
html body.route-product-product #product .button-group-page::after {
color: #63a91d !important;
border-bottom-color: rgba(99, 169, 29, 0.55) !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.61 CLEAN - LIVE SELECTOR CORRECTION
- fixes v10.60 selectors that did not match the live page
- model line matches Brez DDV typography, dark black
- yellow REDNA CENA overlaps red pill and right-aligns with it
- phone number uses exact OPIS green #63a91d
- no change to bottom purchase-card anchoring
========================================================= */
/* ---------------------------------------------------------
1) PRODUCT MODEL - SAME TYPOGRAPHY AS BREZ DDV
--------------------------------------------------------- */
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model,
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > span {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.35 !important;
color: #171b1f !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: 0 !important;
text-shadow: none !important;
}
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model {
display: block !important;
width: 100% !important;
margin: 7px 0 0 !important;
padding: 0 !important;
}
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > span {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
.route-product-product #product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > span {
margin-left: 4px !important;
}
/* ---------------------------------------------------------
2) REDNA CENA - LOWER + RIGHT EDGE ALIGNED TO RED PILL
Works on the actual live sale-price DOM, without :has().
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product#product
.product-price-group .price-wrapper .price-group {
position: relative !important;
}
.route-product-product #product#product
.product-price-group .price-wrapper .price-group .product-price-old {
position: absolute !important;
left: auto !important;
right: 1px !important;
top: 20px !important;
width: auto !important;
min-width: 155px !important;
max-width: calc(100% - 2px) !important;
margin: 0 !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
z-index: 12 !important;
}
.route-product-product #product#product
.product-price-group .price-wrapper .price-group .product-price-new {
width: calc(100% - 2px) !important;
max-width: none !important;
margin-left: 1px !important;
margin-right: 1px !important;
}
}
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product#product
.product-price-group .price-wrapper .price-group {
position: relative !important;
}
.route-product-product #product#product
.product-price-group .price-wrapper .price-group .product-price-old {
position: absolute !important;
left: auto !important;
right: 1px !important;
top: 17px !important;
transform: rotate(-3deg) !important;
transform-origin: 100% 100% !important;
z-index: 12 !important;
}
}
/* ---------------------------------------------------------
3) PHONE NUMBER - EXACT ACTIVE OPIS GREEN
--------------------------------------------------------- */
.route-product-product #product#product .button-group-page::after {
color: #63a91d !important;
border-bottom-color: rgba(99, 169, 29, 0.55) !important;
}
@media (max-width: 1200px) {
.route-product-product #product#product .button-group-page::after {
color: #63a91d !important;
border-bottom-color: rgba(99, 169, 29, 0.55) !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.62 CLEAN - ENGLISH PRODUCT META + PHONE FIX
English is detected by the translated Add to Cart button,
not by html[lang], because the live EN page does not reliably
expose the expected language attribute.
- manufacturer stays on the right
- Product is + in stock directly below manufacturer
- Model directly below stock
- English phone line restored inside purchase card
- no change to Slovenian layout / price / countdown / bottom anchor
========================================================= */
/* ---------------------------------------------------------
1) ENGLISH: MANUFACTURER + STOCK + MODEL
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 150px !important;
grid-template-rows: auto auto !important;
column-gap: 18px !important;
row-gap: 0 !important;
align-items: center !important;
min-width: 0 !important;
}
/* Features stay in the middle when present. */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > .ea-key-features {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: center !important;
justify-self: center !important;
}
/* Manufacturer logo = upper-right. */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
width: 150px !important;
min-width: 150px !important;
margin: 0 !important;
padding: 0 0 9px 14px !important;
border-left: 1px solid #e7ecef !important;
text-align: center !important;
}
/* Stock + model = directly under manufacturer. */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
justify-self: stretch !important;
width: 150px !important;
min-width: 150px !important;
margin: 0 !important;
padding: 8px 0 0 14px !important;
border-left: 1px solid #e7ecef !important;
text-align: center !important;
}
}
/* ---------------------------------------------------------
2) ENGLISH STOCK SENTENCE
Product is + bold green in stock
--------------------------------------------------------- */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Product is " !important;
display: inline !important;
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: center !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
display: inline !important;
color: #63a91d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
3) ENGLISH MODEL LINE
Same typography as Ex Tax, dark black.
--------------------------------------------------------- */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.35 !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* ---------------------------------------------------------
4) ENGLISH PHONE LINE
Guaranteed by Add to Cart detector.
--------------------------------------------------------- */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before {
content: "You can call or order at" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
content: "040 708 388" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #63a91d !important;
border-bottom-color: rgba(99, 169, 29, 0.55) !important;
}
/* Desktop English number placement following the shorter EN label. */
@media (min-width: 1201px) {
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
left: 176px !important;
}
}
/* Tablet */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 122px !important;
grid-template-rows: auto auto !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
width: 122px !important;
min-width: 122px !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
width: 122px !important;
min-width: 122px !important;
text-align: center !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
left: 158px !important;
}
}
/* Mobile */
@media (max-width: 860px) {
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before {
content: "You can call or order at" !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
left: 16px !important;
color: #63a91d !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.63 CLEAN - ENGLISH SALE PRICE LABELS
- REDNA CENA -> REGULAR PRICE
- AKCIJSKA CENA -> SPECIAL PRICE
- English detected by translated Add to Cart button
- Slovenian labels remain unchanged
========================================================= */
/* Yellow regular-price badge */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-price-old::before {
content: "REGULAR PRICE" !important;
}
/* Red special-price badge */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-price-new::after {
content: "SPECIAL PRICE" !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.64 CLEAN - ENGLISH META / PHONE PRIORITY FIX
- beats the older high-specificity no-feature fallback rules
- manufacturer remains upper-right
- Product is [space] in stock directly under manufacturer
- Model directly under stock
- stock/model centered under manufacturer
- copies the proven Slovenian phone layout and translates only text
- no changes to price / countdown / Slovenian page / bottom anchor
========================================================= */
/* ---------------------------------------------------------
1) ENGLISH PRODUCT META - HIGH SPECIFICITY
Important because older :not(:has(...)) fallback selectors
otherwise win the cascade.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features]))
.product-stats {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 150px !important;
grid-template-rows: auto auto !important;
column-gap: 18px !important;
row-gap: 0 !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Manufacturer: upper-right. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features]))
.product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
width: 150px !important;
min-width: 150px !important;
margin: 0 !important;
padding: 0 0 9px 0 !important;
border-left: 1px solid #e7ecef !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group
.product-stats > .brand-image.product-manufacturer > a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
/* Stock + model: SAME column, directly below manufacturer. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:not(:has(.ea-key-features)):not(:has(.product-key-features)):not(:has([data-ea-key-features]))
.product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
justify-self: stretch !important;
align-self: start !important;
width: 150px !important;
min-width: 150px !important;
margin: 0 !important;
padding: 8px 0 0 0 !important;
border-left: 1px solid #e7ecef !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group
.product-stats > ul.list-unstyled > li {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center !important;
}
}
/* If English key features DO exist, keep them in middle and still
stack manufacturer + meta in the same right column. */
@media (min-width: 1201px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats {
grid-template-columns: minmax(0, 1fr) 150px !important;
grid-template-rows: auto auto !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > .brand-image.product-manufacturer {
grid-column: 2 !important;
grid-row: 1 !important;
width: 150px !important;
min-width: 150px !important;
padding-left: 0 !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group:has(.product-stats > .ea-key-features)
.product-stats > ul.list-unstyled {
grid-column: 2 !important;
grid-row: 2 !important;
width: 150px !important;
min-width: 150px !important;
padding-left: 0 !important;
text-align: center !important;
}
}
/* ---------------------------------------------------------
2) ENGLISH STOCK TEXT
Force a REAL space using NBSP.
--------------------------------------------------------- */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) {
width: 100% !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: center !important;
white-space: nowrap !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Product is\00a0" !important;
display: inline !important;
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
display: inline !important;
color: #63a91d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* Model centered directly below stock. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.35 !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model {
display: block !important;
width: 100% !important;
margin: 7px 0 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* ---------------------------------------------------------
3) ENGLISH PHONE
COPY OF THE WORKING SLOVENIAN BLOCK.
ONLY TEXT IS TRANSLATED.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
margin: 0 !important;
/* EXACT same reserved phone space as working Slovenian block. */
padding: 9px 18px 35px !important;
background: #ffffff !important;
border-radius: 0 0 16px 16px !important;
overflow: visible !important;
}
/* Remove any older buttons-wrapper phone implementation. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::before,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::after {
content: none !important;
display: none !important;
}
/* English phone label - same positioning as Slovenian. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before {
content: "You can call or order at" !important;
position: absolute !important;
left: 22px !important;
right: auto !important;
bottom: 11px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
z-index: 100 !important;
pointer-events: none !important;
}
/* English phone number - same styling/position logic as Slovenian. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 177px !important;
right: auto !important;
bottom: 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 0 1px !important;
color: #63a91d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(99, 169, 29, 0.55) !important;
z-index: 100 !important;
pointer-events: none !important;
}
/* Preserve exact bottom anchoring. */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* Tablet English phone = same Slovenian geometry, translated label. */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page {
position: relative !important;
padding: 9px 16px 34px !important;
overflow: visible !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before {
content: "You can call or order at" !important;
position: absolute !important;
left: 18px !important;
bottom: 10px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #27323d !important;
font-size: 11.5px !important;
font-weight: 500 !important;
z-index: 100 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 158px !important;
bottom: 9px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #63a91d !important;
font-size: 12.5px !important;
font-weight: 700 !important;
z-index: 100 !important;
}
}
/* Mobile English phone */
@media (max-width: 860px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page {
position: relative !important;
padding-bottom: 62px !important;
overflow: visible !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before {
content: "You can call or order at" !important;
position: absolute !important;
left: 16px !important;
right: 16px !important;
bottom: 37px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #27323d !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
content: "040 708 388" !important;
position: absolute !important;
left: 16px !important;
bottom: 15px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #63a91d !important;
font-size: 13.5px !important;
font-weight: 700 !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.65 CLEAN - RELIABLE PHONE ROW
- phone is generated on the REAL .stepper-group.cart-group
- row 1 remains quantity + cart + quick-buy
- row 2 becomes phone order line
- English: You can call or order at 040 708 388
- Slovenian remains supported too
- card grows upward; bottom anchor remains unchanged
- disables all older floating phone pseudo-elements
========================================================= */
/* ---------------------------------------------------------
1) DISABLE ALL OLD PHONE PSEUDO IMPLEMENTATIONS
--------------------------------------------------------- */
.route-product-product #product .button-group-page::before,
.route-product-product #product .button-group-page::after,
.route-product-product #product .button-group-page > .buttons-wrapper::before,
.route-product-product #product .button-group-page > .buttons-wrapper::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------
2) DESKTOP - PHONE AS REAL SECOND GRID ROW
--------------------------------------------------------- */
@media (min-width: 1201px) {
/* Remove artificial phone padding from the outer wrapper.
The phone now belongs to the real cart grid itself. */
.route-product-product #product .button-group-page {
position: relative !important;
box-sizing: border-box !important;
padding: 9px 18px 12px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
position: relative !important;
display: grid !important;
/* KEEP the existing three-column geometry.
Only add an explicit second row. */
grid-template-rows: auto 18px !important;
row-gap: 8px !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* Lock the three real controls into row 1. */
.route-product-product #product
.stepper-group.cart-group > .stepper {
grid-column: 1 !important;
grid-row: 1 !important;
}
.route-product-product #product
.stepper-group.cart-group > #button-cart,
.route-product-product #product
.stepper-group.cart-group > .btn-cart {
grid-column: 2 !important;
grid-row: 1 !important;
}
.route-product-product #product
.stepper-group.cart-group > .extra-group {
grid-column: 3 !important;
grid-row: 1 !important;
margin: 0 !important;
}
/* Slovenian label - second row across the full card. */
.route-product-product #product
.stepper-group.cart-group::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-self: start !important;
align-self: center !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 18px !important;
white-space: nowrap !important;
z-index: 100 !important;
pointer-events: none !important;
}
/* Phone number - same second grid row. */
.route-product-product #product
.stepper-group.cart-group::after {
content: "040 708 388" !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-self: start !important;
align-self: center !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 0 0 205px !important;
padding: 0 0 1px !important;
color: #63a91d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 18px !important;
white-space: nowrap !important;
border-bottom: 1px solid rgba(99, 169, 29, 0.55) !important;
z-index: 100 !important;
pointer-events: none !important;
}
/* ENGLISH: translate ONLY the label and use the shorter offset. */
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::before {
content: "You can call or order at" !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::after {
content: "040 708 388" !important;
margin-left: 177px !important;
color: #63a91d !important;
}
/* Preserve the established stage anchoring:
the added second row consumes space ABOVE the bottom edge. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* ---------------------------------------------------------
3) TABLET
--------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
padding: 9px 16px 11px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
position: relative !important;
display: grid !important;
grid-template-rows: auto 17px !important;
row-gap: 7px !important;
overflow: visible !important;
}
.route-product-product #product
.stepper-group.cart-group::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-self: start !important;
display: block !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 11.5px !important;
font-weight: 500 !important;
line-height: 17px !important;
white-space: nowrap !important;
}
.route-product-product #product
.stepper-group.cart-group::after {
content: "040 708 388" !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
justify-self: start !important;
display: block !important;
margin-left: 186px !important;
color: #63a91d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
line-height: 17px !important;
border-bottom: 1px solid rgba(99, 169, 29, 0.55) !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::before {
content: "You can call or order at" !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::after {
margin-left: 158px !important;
}
}
/* ---------------------------------------------------------
4) MOBILE
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product #product .button-group-page {
padding-bottom: 14px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
position: relative !important;
display: grid !important;
grid-template-rows: auto auto auto !important;
row-gap: 6px !important;
overflow: visible !important;
}
.route-product-product #product
.stepper-group.cart-group::before {
content: "Ali pokličite in naročite na" !important;
grid-column: 1 / -1 !important;
grid-row: 3 !important;
justify-self: start !important;
display: block !important;
color: #27323d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.route-product-product #product
.stepper-group.cart-group::after {
content: "040 708 388" !important;
grid-column: 1 / -1 !important;
grid-row: 3 !important;
justify-self: start !important;
display: block !important;
margin-left: 0 !important;
margin-top: 20px !important;
color: #63a91d !important;
font-family: "Montserrat", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
.route-product-product
#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::before {
content: "You can call or order at" !important;
}
}
/* ---------------------------------------------------------
5) REMOVE THE REMAINING SEPARATOR ABOVE COUNTDOWN
Covers a literal HR between delivery and countdown if Journal
renders one on this template.
--------------------------------------------------------- */
.route-product-product #product > .product-blocks.blocks-top + hr,
.route-product-product #product > hr + .countdown-wrapper,
.route-product-product #product > hr + .product-countdown {
display: none !important;
border: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.66 CLEAN - EN META CENTER + PHONE CLIP FIX
- English manufacturer / stock / model share one center axis
- phone row gets sufficient internal bottom space
- purchase-card bottom anchoring remains unchanged
========================================================= */
/* ---------------------------------------------------------
1) ENGLISH MANUFACTURER / STOCK / MODEL - TRUE CENTER
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats {
grid-template-columns: minmax(0, 1fr) 180px !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > .brand-image.product-manufacturer,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled {
box-sizing: border-box !important;
grid-column: 2 !important;
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
justify-self: center !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > .brand-image.product-manufacturer > a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-model {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) {
white-space: nowrap !important;
text-align: center !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
text-align: center !important;
}
}
/* ---------------------------------------------------------
2) PHONE ROW - FULLY VISIBLE INSIDE PURCHASE CARD
Add bottom breathing room to the actual card while keeping
its bottom edge fixed; the card grows upward.
--------------------------------------------------------- */
@media (min-width: 1201px) {
.route-product-product #product .button-group-page {
box-sizing: border-box !important;
/* enough room below the second grid row */
padding: 9px 18px 22px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-rows: auto 20px !important;
row-gap: 9px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group::before,
.route-product-product #product .stepper-group.cart-group::after {
align-self: center !important;
line-height: 20px !important;
overflow: visible !important;
}
/* Preserve the agreed bottom anchor. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* Tablet */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
padding-bottom: 20px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-rows: auto 19px !important;
row-gap: 8px !important;
overflow: visible !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.67 CLEAN - PHONE ROW FINAL VERTICAL FIX
- fixes clipping caused by excessive purchase-card height
- phone row stays INSIDE the card and is moved upward
- purchase-card bottom remains aligned with image bottom
- no price/meta/tab changes
========================================================= */
@media (min-width: 1201px) {
/* Keep the card compact enough to fit inside the fixed product stage. */
.route-product-product #product .button-group-page {
box-sizing: border-box !important;
padding: 7px 18px 8px !important;
margin: 0 !important;
overflow: visible !important;
}
/* Controls + compact phone row. */
.route-product-product #product .stepper-group.cart-group {
grid-template-rows: auto 18px !important;
row-gap: 3px !important;
overflow: visible !important;
}
/* Move BOTH parts of the phone line safely upward.
Transform does not alter the purchase-card bottom anchor. */
.route-product-product #product .stepper-group.cart-group::before,
.route-product-product #product .stepper-group.cart-group::after {
position: relative !important;
top: -4px !important;
align-self: center !important;
height: 18px !important;
min-height: 18px !important;
line-height: 18px !important;
overflow: visible !important;
clip: auto !important;
}
/* Preserve the established bottom alignment. */
.route-product-product #product .product-price-group {
margin-top: auto !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
.route-product-product #product .button-group-page {
margin-top: 0 !important;
margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
}
/* Tablet */
@media (min-width: 861px) and (max-width: 1200px) {
.route-product-product #product .button-group-page {
padding: 7px 16px 8px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group {
grid-template-rows: auto 17px !important;
row-gap: 3px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group::before,
.route-product-product #product .stepper-group.cart-group::after {
position: relative !important;
top: -3px !important;
height: 17px !important;
min-height: 17px !important;
line-height: 17px !important;
overflow: visible !important;
}
}
/* Mobile */
@media (max-width: 860px) {
.route-product-product #product .button-group-page {
padding-bottom: 10px !important;
overflow: visible !important;
}
.route-product-product #product .stepper-group.cart-group::before,
.route-product-product #product .stepper-group.cart-group::after {
position: relative !important;
top: -2px !important;
overflow: visible !important;
}
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.68 CLEAN - REMOVE DUPLICATE ENGLISH PHONE ROW
- keeps the working phone row on .stepper-group.cart-group
- force-disables older high-specificity English phone pseudos
on .button-group-page and .buttons-wrapper
- no other layout changes
========================================================= */
/* Old English phone implementation on purchase wrapper */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::before,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page::after {
content: none !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Also kill the older buttons-wrapper implementation,
including selectors that previously had higher language specificity. */
html:lang(en) .route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::before,
html:lang(en) .route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::after,
html[lang^="en"] .route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::before,
html[lang^="en"] .route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::after,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::before,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.button-group-page > .buttons-wrapper::after {
content: none !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Keep ONLY the current working English phone row */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::before {
content: "You can call or order at" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.stepper-group.cart-group::after {
content: "040 708 388" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #63a91d !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.69 CLEAN - STOCK / MODEL EXACT FONT MATCH
- both stock and model use the current model typography
- Overpass 12px / 400 / 1.35
- only "na zalogi" / "in stock" remains bold green
- applies to Slovenian and English
- no layout / price / phone changes
========================================================= */
/* Base typography: stock line + product-code line */
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model > span,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Normal black parts */
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model > span,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
color: #171b1f !important;
font-weight: 400 !important;
}
/* Only availability value stays bold green */
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
color: #63a91d !important;
font-weight: 700 !important;
}
/* Keep both rows on the same center axis */
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-stock,
.route-product-product
#product#product
.product-stats > ul.list-unstyled > li.product-model {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
}
/* ENGLISH - same exact typography, only wording differs */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Product is\00a0" !important;
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
color: #63a91d !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-stats > ul.list-unstyled > li.product-model > span {
color: #171b1f !important;
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* =========================================================
EA ELEKTRONIKA
VERSION 10.70 CLEAN - HARD STOCK FONT LOCK
- stock row is forced to the exact model-row typography
- pseudo-elements inherit the row size instead of carrying
competing font sizes
- Slovenian + English
- no layout / phone / price changes
========================================================= */
/* PRODUCT CODE REFERENCE SIZE */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model,
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > b,
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model > span {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
color: #171b1f !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* HARD LOCK THE STOCK ROW ITSELF */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
color: #171b1f !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: center !important;
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
/* Hide Journal/OpenCart original stock contents */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > b,
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) > span {
display: none !important;
}
/* Both generated stock parts MUST inherit the 12px row size */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before,
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
vertical-align: baseline !important;
}
/* Slovenian */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Izdelek je\00a0" !important;
color: #171b1f !important;
font-weight: 400 !important;
}
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "na zalogi" !important;
color: #63a91d !important;
font-weight: 700 !important;
}
/* English: same exact size */
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock) {
font-family: "Overpass", Arial, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::before {
content: "Product is\00a0" !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: #171b1f !important;
font-weight: 400 !important;
}
.route-product-product
#product#product:has(#button-cart[data-loading-text*="Add to Cart"])
.product-price-group .product-stats > ul.list-unstyled > li.product-stock:not(.out-of-stock)::after {
content: "in stock" !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: #63a91d !important;
font-weight: 700 !important;
}
/* Keep stock + model centered on every breakpoint */
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-stock,
.route-product-product
#product#product
.product-price-group .product-stats > ul.list-unstyled > li.product-model {
width: 100% !important;
text-align: center !important;
}