/* ==========================================================
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 (PRODUCT 729 ONLY)
Scope:
- TEST ONLY: Raspberry Pi product 729 (.route-product-product.product-729.product-729)
- 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.product-729 .site-wrapper > h1.title.page-title {
display: none !important;
}
.route-product-product.product-729 #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-729 #product-product > .row,
.route-product-product.product-729 #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.product-729 .breadcrumb {
max-width: 1480px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---------------------------------------------------------
MAIN PRODUCT GRID
--------------------------------------------------------- */
.route-product-product.product-729 #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.product-729 #content > .product-info > .product-left,
.route-product-product.product-729 #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-729 .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-729 .product-info .product-image .main-image {
min-height: 488px !important;
background: #ffffff !important;
border-radius: 14px !important;
overflow: hidden !important;
}
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 488px !important;
}
.route-product-product.product-729 .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-729 .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-729 .product-info .additional-images {
padding-right: 8px !important;
box-sizing: border-box !important;
}
.route-product-product.product-729 .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-729 .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-729 .product-info .additional-images img {
border-radius: 9px !important;
}
/* ---------------------------------------------------------
PRODUCT DETAILS CARD
--------------------------------------------------------- */
.route-product-product.product-729 .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-729 #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-729 #product .product-blocks.blocks-top {
margin: 0 0 18px !important;
}
.route-product-product.product-729 #product .product-blocks.blocks-top .grid-row,
.route-product-product.product-729 #product .product-blocks.blocks-top .grid-cols,
.route-product-product.product-729 #product .product-blocks.blocks-top .grid-col,
.route-product-product.product-729 #product .product-blocks.blocks-top .grid-items,
.route-product-product.product-729 #product .product-blocks.blocks-top .grid-item,
.route-product-product.product-729 #product .product-blocks.blocks-top .module,
.route-product-product.product-729 #product .product-blocks.blocks-top .module-body,
.route-product-product.product-729 #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-729 #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-729 #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-729 #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-729 #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-729 #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-729 #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-729 #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-729 #product > .product-tax {
display: none !important;
}
.route-product-product.product-729 #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-729 #product .product-stats ul {
margin: 0 !important;
}
.route-product-product.product-729 #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-729 #product .product-stats li:last-child {
margin-bottom: 0 !important;
}
.route-product-product.product-729 #product .product-stats li b {
color: #294159 !important;
font-weight: 600 !important;
}
.route-product-product.product-729 #product .product-stock:not(.out-of-stock) span {
color: #64a719 !important;
font-weight: 700 !important;
}
.route-product-product.product-729 #product .product-stock.out-of-stock span {
color: #b34a42 !important;
font-weight: 700 !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer {
margin-top: 10px !important;
}
.route-product-product.product-729 #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-729 #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-729 #product .button-group-page {
margin: 0 !important;
padding: 0 !important;
}
.route-product-product.product-729 #product .buttons-wrapper {
display: block !important;
margin: 0 !important;
}
.route-product-product.product-729 #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-729 #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-729 #product .stepper label.control-label {
display: none !important;
}
.route-product-product.product-729 #product .stepper input.form-control {
height: 50px !important;
border: 0 !important;
box-shadow: none !important;
background: #ffffff !important;
}
.route-product-product.product-729 #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-729 #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-729 #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-729 #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-729 #product .extra-group .btn-extra:first-child {
color: #ffffff !important;
background: #2e3d4b !important;
border-color: #2e3d4b !important;
}
.route-product-product.product-729 #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-729 #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-729 #product #button-cart.btn-cart:hover,
.route-product-product.product-729 #product #button-cart.btn-cart:focus {
filter: brightness(1.035) !important;
transform: translateY(-1px) !important;
}
.route-product-product.product-729 #product .extra-group .btn-extra:hover,
.route-product-product.product-729 #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-729 #product-product.container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.route-product-product.product-729 #content > .product-info {
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr) !important;
gap: 20px !important;
}
.route-product-product.product-729 .product-info .product-left .product-image,
.route-product-product.product-729 .product-info .product-image .main-image,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 430px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image img {
max-height: 430px !important;
}
.route-product-product.product-729 .product-info .product-right > #product.product-details {
padding: 24px !important;
}
.route-product-product.product-729 #product .product-price-group {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* ---------------------------------------------------------
MOBILE / STACKED PRODUCT PAGE
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product.product-729 #product-product.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.route-product-product.product-729 #content > .product-info {
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
margin-top: 4px !important;
}
.route-product-product.product-729 .product-info .product-left .product-image {
min-height: 0 !important;
padding: 10px !important;
border-radius: 15px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 320px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image img {
max-height: 320px !important;
}
.route-product-product.product-729 .product-info .product-right > #product.product-details {
padding: 20px 18px !important;
border-radius: 15px !important;
}
.route-product-product.product-729 #product.product-details > .title.page-title {
font-size: 24px !important;
margin-bottom: 14px !important;
}
.route-product-product.product-729 #product .product-price-group {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.route-product-product.product-729 #product-product.container {
padding-left: 8px !important;
padding-right: 8px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 275px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image img {
max-height: 275px !important;
}
.route-product-product.product-729 #product .stepper-group.cart-group {
grid-template-columns: 76px minmax(0, 1fr) !important;
}
.route-product-product.product-729 #product .stepper-group.cart-group > .stepper {
width: 76px !important;
min-width: 76px !important;
}
.route-product-product.product-729 #product .extra-group,
.route-product-product.product-729 #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.product-729 .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.product-729 .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.product-729 .breadcrumb > li,
.route-product-product.product-729 .breadcrumb > li > a,
.route-product-product.product-729 .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-729 #product.product-details > .title.page-title {
display: none !important;
}
/* ---------------------------------------------------------
PRODUCT STAGE
--------------------------------------------------------- */
.route-product-product.product-729 #product-product.container {
max-width: 1480px !important;
padding: 0 24px 28px !important;
}
.route-product-product.product-729 #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-729 .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-729 .product-info .product-image .main-image,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 505px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image img {
max-height: 505px !important;
}
.route-product-product.product-729 .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-729 .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-729 .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-729 #product .product-blocks.blocks-top {
margin: 0 0 14px !important;
}
.route-product-product.product-729 #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-729 #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-729 #product .product-blocks.blocks-top .info-block-content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.route-product-product.product-729 #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-729 #product .product-blocks.blocks-top .info-block-text,
.route-product-product.product-729 #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-729 #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-729 #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-729 #product .product-price {
color: #20364f !important;
font-size: clamp(31px, 2.25vw, 39px) !important;
font-weight: 800 !important;
}
.route-product-product.product-729 #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-729 #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-729 #product .product-stats ul {
align-self: center !important;
}
.route-product-product.product-729 #product .product-stats li {
margin: 0 0 8px !important;
color: #667789 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.route-product-product.product-729 #product .product-stats li b {
color: #294159 !important;
font-weight: 600 !important;
}
.route-product-product.product-729 #product .product-stock.out-of-stock span {
color: #e12727 !important;
font-weight: 700 !important;
}
.route-product-product.product-729 #product .product-stock.out-of-stock span::before {
content: "● " !important;
font-size: 10px !important;
}
.route-product-product.product-729 #product .product-model span {
color: #78bd29 !important;
font-weight: 600 !important;
}
.route-product-product.product-729 #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-729 #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-729 #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-729 #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-729 #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-729 #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-729 #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-729 #product .extra-group {
display: contents !important;
margin: 0 !important;
}
.route-product-product.product-729 #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-729 #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-729 #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-729 #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-729 #product .wishlist-compare {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 10px !important;
}
.route-product-product.product-729 #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.product-729 #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.product-729 #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.product-729 #content > .product-blocks.blocks-default .nav-tabs > li {
margin: 0 26px 0 0 !important;
border: 0 !important;
}
.route-product-product.product-729 #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.product-729 #content > .product-blocks.blocks-default .nav-tabs > li.active > a {
color: #63a91d !important;
}
.route-product-product.product-729 #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.product-729 #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-729 #product #button-cart.btn-cart:hover,
.route-product-product.product-729 #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.product-729 .site-wrapper > h1.title.page-title,
.route-product-product.product-729 .breadcrumb,
.route-product-product.product-729 #product-product.container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.route-product-product.product-729 #content > .product-info {
grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr) !important;
gap: 18px !important;
}
.route-product-product.product-729 #product .product-price-group {
grid-template-columns: 1fr !important;
}
.route-product-product.product-729 #product .price-wrapper {
padding: 0 0 16px !important;
border-right: 0 !important;
border-bottom: 1px solid #e5eaee !important;
}
.route-product-product.product-729 #product .product-stats {
padding: 16px 0 0 !important;
}
}
/* ---------------------------------------------------------
MOBILE / STACKED
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product.product-729 .breadcrumb {
padding: 12px 12px 5px !important;
}
.route-product-product.product-729 .site-wrapper > h1.title.page-title {
padding: 7px 12px 14px !important;
font-size: clamp(24px, 7vw, 31px) !important;
}
.route-product-product.product-729 #product-product.container {
padding: 0 12px 22px !important;
}
.route-product-product.product-729 #content > .product-info {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.route-product-product.product-729 .product-info .product-left .product-image {
min-height: 0 !important;
padding: 10px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-container,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-wrapper,
.route-product-product.product-729 .product-info .product-image .main-image .swiper-slide {
min-height: 330px !important;
}
.route-product-product.product-729 .product-info .product-image .main-image img {
max-height: 330px !important;
}
.route-product-product.product-729 #product .product-blocks.blocks-top .info-block {
min-height: 76px !important;
padding: 14px 15px 14px 75px !important;
}
.route-product-product.product-729 #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-729 #product .product-price-group {
padding: 18px !important;
}
.route-product-product.product-729 #product .button-group-page {
padding: 16px 18px 18px !important;
}
}
@media (max-width: 560px) {
.route-product-product.product-729 #product .product-stats {
grid-template-columns: 1fr 82px !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer a {
width: 72px !important;
font-size: 10px !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer img {
width: 56px !important;
height: 56px !important;
}
.route-product-product.product-729 #product .stepper-group.cart-group {
grid-template-columns: 72px minmax(0, 1fr) !important;
}
.route-product-product.product-729 #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-729 #product #button-cart.btn-cart {
grid-column: 2 !important;
grid-row: 1 !important;
}
.route-product-product.product-729 #product .extra-group .btn-extra:first-child {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
.route-product-product.product-729 #product .extra-group .btn-extra:nth-child(2) {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
}
.route-product-product.product-729 #product .wishlist-compare {
grid-template-columns: 1fr !important;
}
.route-product-product.product-729 #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.product-729 #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-729 #product-product,
.route-product-product.product-729 #product-product button,
.route-product-product.product-729 #product-product input,
.route-product-product.product-729 #product-product select,
.route-product-product.product-729 #product-product textarea {
font-family: "Overpass", Arial, sans-serif !important;
}
.route-product-product.product-729 .site-wrapper > h1.title.page-title,
.route-product-product.product-729 #product .product-price,
.route-product-product.product-729 #product .info-block-title,
.route-product-product.product-729 #product .btn,
.route-product-product.product-729 #content > .product-blocks.blocks-default .nav-tabs > li > a,
.route-product-product.product-729 .product-seo h2,
.route-product-product.product-729 .product-seo h3 {
font-family: "Montserrat", Arial, sans-serif !important;
}
/* Main product title: calmer, less oversized. */
.route-product-product.product-729 .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.product-729 .breadcrumb,
.route-product-product.product-729 .breadcrumb > li,
.route-product-product.product-729 .breadcrumb > li > a {
font-family: "Overpass", Arial, sans-serif !important;
}
/* ---------------------------------------------------------
DELIVERY CARD - CLEANER TYPE / SMALLER VISUAL WEIGHT
--------------------------------------------------------- */
.route-product-product.product-729 #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-729 #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-729 #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-729 #product .product-blocks.blocks-top .info-block-text,
.route-product-product.product-729 #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-729 #product .product-price {
font-size: clamp(31px, 2.05vw, 37px) !important;
font-weight: 750 !important;
letter-spacing: -0.025em !important;
}
.route-product-product.product-729 #product .price-wrapper .product-tax,
.route-product-product.product-729 #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-729 #product .product-stats li,
.route-product-product.product-729 #product .product-stats li b,
.route-product-product.product-729 #product .product-stats li span {
font-family: "Overpass", Arial, sans-serif !important;
}
.route-product-product.product-729 #product .product-stats li {
color: #667789 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.38 !important;
}
.route-product-product.product-729 #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-729 #product .product-stock::before,
.route-product-product.product-729 #product .product-stock::after,
.route-product-product.product-729 #product .product-stock span::before,
.route-product-product.product-729 #product .product-stock span::after {
content: none !important;
display: none !important;
}
.route-product-product.product-729 #product .product-stock.out-of-stock span {
color: #e12b2b !important;
font-weight: 600 !important;
}
.route-product-product.product-729 #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-729 #product .brand-image.product-manufacturer > a > span {
display: none !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer {
padding-left: 16px !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer a {
width: 88px !important;
min-height: 84px !important;
justify-content: center !important;
}
.route-product-product.product-729 #product .brand-image.product-manufacturer img {
width: 76px !important;
height: 76px !important;
}
/* ---------------------------------------------------------
ACTION BUTTON TYPE / ALIGNMENT
--------------------------------------------------------- */
.route-product-product.product-729 #product #button-cart.btn-cart,
.route-product-product.product-729 #product .extra-group .btn-extra,
.route-product-product.product-729 #product .wishlist-compare .btn {
font-family: "Montserrat", Arial, sans-serif !important;
letter-spacing: 0 !important;
}
.route-product-product.product-729 #product #button-cart.btn-cart,
.route-product-product.product-729 #product .extra-group .btn-extra:first-child {
font-size: 12.5px !important;
font-weight: 700 !important;
}
.route-product-product.product-729 #product .extra-group .btn-extra:nth-child(2) {
font-size: 11.8px !important;
font-weight: 650 !important;
}
.route-product-product.product-729 #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.product-729 #content > .product-blocks.blocks-default .nav-tabs > li::before,
.route-product-product.product-729 #content > .product-blocks.blocks-default .nav-tabs > li::after,
.route-product-product.product-729 #content > .product-blocks.blocks-default .nav-tabs > li.active::before,
.route-product-product.product-729 #content > .product-blocks.blocks-default .nav-tabs > li.active::after {
content: none !important;
display: none !important;
border: 0 !important;
}
.route-product-product.product-729 #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-729 .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-729 .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-729 .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-729 .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-729 .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-729 .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-729 .product-seo p,
.route-product-product.product-729 .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-729 .product-seo p {
margin: 0 0 10px !important;
}
.route-product-product.product-729 .product-seo ul {
margin: 6px 0 4px !important;
padding-left: 21px !important;
}
.route-product-product.product-729 .product-seo li {
margin-bottom: 5px !important;
}
.route-product-product.product-729 .product-seo strong,
.route-product-product.product-729 .product-seo b {
color: #34495d !important;
font-weight: 650 !important;
}
.route-product-product.product-729 .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.product-729 .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.product-729 .vd-frontend > .vd-btn-frontend-edit {
opacity: 0.3 !important;
}
/* ---------------------------------------------------------
RESPONSIVE TYPOGRAPHY
--------------------------------------------------------- */
@media (max-width: 860px) {
.route-product-product.product-729 .site-wrapper > h1.title.page-title {
font-size: clamp(24px, 6.4vw, 30px) !important;
font-weight: 750 !important;
}
.route-product-product.product-729 .product-seo h2 {
font-size: 22px !important;
}
.route-product-product.product-729 .product-seo h3 {
font-size: 17px !important;
}
.route-product-product.product-729 .product-seo p,
.route-product-product.product-729 .product-seo li {
font-size: 14px !important;
}
}