belsejében, és a
.MainMenu_MenuItem class saját color-ja van rajta (#cccccc).
Ezért minden belső elemnek inherit color-t kell adni. */
#dnnMenu .topLevel li a *,
#dnnMenu .topLevel li a span,
#dnnMenu .dropdown-menu li a *,
#dnnMenu .dropdown-menu li a span,
#dnnMenu .dropdown-menu.subLevel li a *,
#dnnMenu .dropdown-menu.subLevel li a span,
#dnnMenu li.MainMenu_MenuItem,
#dnnMenu a.MainMenu_MenuItem,
#dnnMenu .MainMenu_MenuItem,
#dnnMenu .MainMenu_MenuItem span,
#dnnMenu .MainMenu_MenuItemSel,
#dnnMenu .MainMenu_MenuItemSel span {
color: inherit !important;
background: transparent !important;
background-color: transparent !important;
}
/* Hover/active állapot zöld háttér + fehér szöveg */
#dnnMenu .topLevel li a:hover,
#dnnMenu .topLevel li a:focus,
#dnnMenu .dropdown-menu li a:hover,
#dnnMenu .dropdown-menu li a:focus,
#dnnMenu .dropdown-menu.subLevel li a:hover,
#dnnMenu .dropdown-menu.subLevel li a:focus,
#dnnMenu .topLevel li.active > a,
#dnnMenu .topLevel li.current > a {
background: var(--green-soft) !important;
background-color: var(--green-soft) !important;
color: var(--green) !important;
}
/* Hover állapotban a span-ek is zöldek (öröklés) */
#dnnMenu .topLevel li a:hover *,
#dnnMenu .topLevel li a:focus *,
#dnnMenu .dropdown-menu li a:hover *,
#dnnMenu .dropdown-menu li a:focus *,
#dnnMenu .dropdown-menu.subLevel li a:hover *,
#dnnMenu .dropdown-menu.subLevel li a:focus *,
#dnnMenu .topLevel li.active > a *,
#dnnMenu .topLevel li.current > a * {
color: inherit !important;
}
/* DNN border-bottom színe (#4a4b4c) felülírva világosra */
#dnnMenu .topLevel li,
#dnnMenu .dropdown-menu.subLevel li {
border-color: var(--border) !important;
}
/* Nyitott dropdown alatti zöld aláhúzás elrejtése
(a panel jobbra/lefelé van, az aláhúzás csak csúnya marad) */
.navbar-nav > li.open > a::after,
.navbar-nav > li.dropdown.open > a::after,
.navbar-nav > li.dropdown.show > a::after {
width: 0 !important;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-item {
border-radius: 6px !important;
padding: 10px 16px !important;
font-size: 0.88rem !important;
font-weight: 500 !important;
color: var(--mid) !important;
transition: all 0.2s ease !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
margin: 2px 0 !important;
display: block !important;
background: transparent !important;
-webkit-appearance: none !important;
white-space: normal !important;
min-height: 40px !important;
}
.navbar-nav .dropdown-menu > li > a::after,
.navbar-nav .dropdown-menu .dropdown-item::after {
display: none !important;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > li > a:active,
.navbar-nav .dropdown-menu > li > a:focus-visible,
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown-menu .dropdown-item:active,
.navbar-nav .dropdown-menu .dropdown-item:focus-visible,
.navbar-nav .dropdown-menu .dropdown-item.active {
background: var(--green) !important;
color: var(--white) !important;
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.navbar-nav .dropdown-menu > .active > a,
.navbar-nav .dropdown-menu > .active > a:hover,
.navbar-nav .dropdown-menu > .active > a:focus {
background: var(--green) !important;
color: var(--white) !important;
outline: none !important;
box-shadow: none !important;
}
.navbar-nav .dropdown-menu > li,
.navbar-nav .dropdown-menu > li:focus-within {
outline: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
/* =============================================================
HERO HÁTTÉRKÉP
FIX: 100vw helyett full-width trükk scrollbar-safe módon
============================================================= */
.hero {
text-align: center;
background-image: url('/Portals/0/herobg.png') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
position: relative !important;
padding: clamp(60px, 10vw, 120px) clamp(16px, 4vw, 24px) !important;
min-height: clamp(320px, 50vw, 500px) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* IGAZI FULL-BLEED: kibújik MINDEN parent padding/margin-ból.
A trükk: left: 50% középre tolja, majd transform: translateX(-50%)
visszahúzza pontosan a viewport bal széléig. A width: 100vw
a teljes viewport szélesség. */
width: 100vw !important;
max-width: 100vw !important;
margin-left: 50% !important;
margin-right: 0 !important;
transform: translateX(-50%) !important;
margin-bottom: clamp(24px, 4vw, 50px) !important;
margin-top: clamp(-40px, -5vw, -80px) !important;
box-sizing: border-box !important;
left: 0 !important;
right: 0 !important;
}
/* Ha a böngészőben van scrollbar, a 100vw átfedheti azt.
Felülírjuk calc-cal, ami kivonja a scrollbar szélességét */
@supports (width: 100dvw) {
.hero {
width: 100dvw !important;
max-width: 100dvw !important;
}
}
.hero-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 1 !important;
}
.hero h1 {
position: relative !important;
z-index: 2 !important;
color: var(--white) !important;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
word-wrap: break-word !important;
hyphens: auto !important;
}
.hero p {
position: relative !important;
z-index: 2 !important;
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: clamp(0.85rem, 1.5vw, 1.05rem) !important;
}
.hero a.bp-btn {
position: relative !important;
z-index: 2 !important;
background: var(--green-deep) !important;
color: var(--white) !important;
border-color: var(--green-deep) !important;
margin-top: 20px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero a.bp-btn:hover {
background: var(--green) !important;
color: var(--white) !important;
border-color: var(--green) !important;
}
/* =============================================================
ECO MODUL
============================================================= */
.eco-description-module {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 4vw, 50px);
width: 100%;
max-width: 100%;
margin: clamp(20px, 4vw, 40px) 0;
padding: clamp(20px, 4vw, 40px);
background-color: var(--white);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
box-sizing: border-box;
}
.eco-text-content {
flex: 1 1 300px;
min-width: 0;
}
.eco-badge {
color: var(--green);
font-weight: bold;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
display: block;
margin-bottom: 10px;
}
.eco-text-content h2 {
font-size: clamp(1.4rem, 3vw, 2.5rem);
color: #2c3e50;
margin-bottom: 20px;
line-height: 1.2;
}
.eco-text-content p {
font-size: clamp(0.92rem, 1.2vw, 1.1rem);
color: #555;
line-height: 1.7;
margin-bottom: 25px;
}
.eco-link-btn {
color: #27ae60;
text-decoration: none;
font-weight: bold;
font-size: 1.05rem;
transition: color 0.3s;
display: inline-block;
min-height: 32px;
}
.eco-link-btn:hover {
color: #219150;
text-decoration: underline;
}
.eco-image-container {
flex: 1 1 300px;
min-width: 0;
border-radius: 15px;
overflow: hidden;
height: clamp(200px, 35vw, 350px);
}
.eco-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.eco-description-module:hover .eco-image-container img {
transform: scale(1.05);
}
/* =============================================================
"SZERETNÉK TÖBBET TUDNI" GOMB
============================================================= */
.bp-btn {
display: inline-block;
background: var(--white);
color: var(--black) !important;
border: 2px solid var(--black);
border-radius: 8px;
padding: 12px 28px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none !important;
transition: all 0.25s ease;
cursor: pointer;
min-height: 44px;
text-align: center;
line-height: 1.4;
}
.bp-btn:hover {
background: var(--green);
color: var(--white) !important;
border-color: var(--green);
}
/* =============================================================
HOTCAKES CATEGORY MENU (felső kategória sáv)
============================================================= */
.hc-categorymenu {
padding: 0 !important;
}
.hc-categorymenu ul {
list-style: none !important;
padding: 12px !important;
margin: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
}
.hc-categorymenu ul li {
flex: 0 0 auto !important;
}
.hc-categorymenu ul li a {
display: inline-block !important;
padding: 12px 22px !important;
background: var(--white) !important;
border: 2px solid var(--black) !important;
border-radius: 100px !important;
color: var(--black) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
min-height: 44px !important;
line-height: 1.4 !important;
}
.hc-categorymenu ul li a:hover {
background: var(--green) !important;
color: var(--white) !important;
border-color: var(--green) !important;
}
/* =============================================================
TERMÉKOLDAL
============================================================= */
.hcMvcView .breadcrumb,
#dnn_HeaderPane .breadcrumb {
background: #f8f9fa !important;
border-radius: 10px !important;
padding: 12px 20px !important;
font-size: 0.85rem !important;
border: 1px solid #eee !important;
flex-wrap: wrap !important;
}
.hcMvcView .breadcrumb a {
color: var(--green) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
.hcMvcView .breadcrumb a:hover {
color: var(--green-dark) !important;
}
.hc-product h1,
.hcMvcView h1 {
font-size: clamp(1.4rem, 3vw, 2rem) !important;
font-weight: 700 !important;
color: var(--dark) !important;
margin-bottom: 24px !important;
word-wrap: break-word !important;
}
.hc-product .row-fluid img,
.hc-product img[src*="product"],
.hcMvcView .row-fluid img {
border-radius: 12px !important;
border: 1px solid #eee !important;
max-width: 100% !important;
height: auto !important;
}
.hc-product img[width="80"],
.hc-product img[class*="thumb"],
.hc-product .clearfix img {
border-radius: 8px !important;
border: 2px solid #eee !important;
padding: 4px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.hc-product img[width="80"]:hover,
.hc-product img[class*="thumb"]:hover,
.hc-product .clearfix img:hover {
border-color: var(--green) !important;
}
.hc-product .row-fluid span:not(.label),
.hcMvcView .row-fluid span:not(.label) {
font-size: inherit !important;
}
.hc-product input[type="text"],
.hc-product input[type="number"] {
border: 2px solid #e0e0e0 !important;
border-radius: 8px !important;
padding: 10px 12px !important;
width: 70px !important;
text-align: center !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
transition: border-color 0.2s ease !important;
background: var(--white) !important;
min-height: 44px !important;
max-width: 100% !important;
}
.hc-product input[type="text"]:focus,
.hc-product input[type="number"]:focus {
border-color: var(--green) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(76,175,80,0.15) !important;
}
.hc-product .dnnPrimaryAction,
.hc-product input[type="submit"][value*="Kosár"],
.hc-product a[class*="cart"],
.hc-product button[class*="cart"] {
background: var(--green) !important;
color: var(--white) !important;
border: none !important;
border-radius: 10px !important;
padding: 12px 28px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 12px rgba(76,175,80,0.25) !important;
text-decoration: none !important;
display: inline-block !important;
vertical-align: middle !important;
min-height: 48px !important;
line-height: 1.4 !important;
}
.hc-product .dnnPrimaryAction:hover,
.hc-product input[type="submit"][value*="Kosár"]:hover {
background: var(--green-dark) !important;
box-shadow: 0 6px 20px rgba(76,175,80,0.35) !important;
transform: translateY(-1px) !important;
}
.hc-product .dnnSecondaryAction,
.hc-product a[href*="wish"],
.hc-product a[href*="Wish"],
.hc-product input#savelaterbutton,
input#savelaterbutton.btn,
input#savelaterbutton.btn.btn-default {
background: var(--white) !important;
background-color: var(--white) !important;
color: var(--green) !important;
border: 2px solid var(--green) !important;
border-radius: 10px !important;
padding: 10px 22px !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
display: inline-block !important;
vertical-align: middle !important;
box-shadow: none !important;
margin-top: 12px !important;
min-height: 44px !important;
line-height: 1.4 !important;
cursor: pointer !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
/* A kívánságlista form-group: külön sorban, kis levegővel a Kosárba alatt */
#hcProductActions.form-group input#savelaterbutton,
.form-group input#savelaterbutton {
display: inline-block !important;
margin-top: 12px !important;
margin-left: 0 !important;
}
/* Ha a két gomb külön block elemekben jelenik meg, biztosítjuk a hézagot */
.hc-product .form-group + .form-group,
.hc-product input[type="submit"] + input[type="submit"],
.hc-product .btn + .btn {
margin-top: 12px !important;
}
.hc-product a[href*="review"],
.hc-product a[href*="Review"] {
color: var(--green) !important;
border: 1.5px solid var(--green) !important;
border-radius: 20px !important;
padding: 5px 14px !important;
text-decoration: none !important;
font-weight: 500 !important;
font-size: 0.82rem !important;
transition: all 0.2s ease !important;
display: inline-block !important;
}
.hc-product a[href*="review"]:hover,
.hc-product a[href*="Review"]:hover {
background: var(--green) !important;
color: var(--white) !important;
}
.hc-product .label,
.hc-product span[class*="stock"],
.hc-product span[style*="background"] {
background: var(--green) !important;
color: var(--white) !important;
border-radius: 6px !important;
padding: 4px 12px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
}
.hcMvcView h2,
.hc-product h2 {
font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
font-weight: 700 !important;
color: var(--dark) !important;
margin: 30px 0 12px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid #f0f0f0 !important;
}
/* "Leírás" cím inline rendezése a szöveg elé.
A Hotcakes a Leírás
+ szöveg
struktúrát rajzolja.
A h2-t inline-block-ra állítjuk, és a következő p-t is inline szöveggel kezdjük. */
.hc-product h2:has(+ p),
.hcMvcView h2:has(+ p) {
display: inline-block !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
vertical-align: top !important;
border-bottom: none !important;
white-space: nowrap !important;
font-size: 1.05rem !important;
}
.hc-product h2:has(+ p)::after,
.hcMvcView h2:has(+ p)::after {
content: ':' !important;
margin-left: 0 !important;
}
/* Az utána jövő szöveg balra zárkózva indul a cím mellé */
.hc-product h2 + p,
.hcMvcView h2 + p {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
color: var(--mid) !important;
text-align: justify !important;
}
.hcMvcView .alert,
.hcMvcView div[class*="alert"] {
background: var(--green-soft) !important;
border: 1px solid #c8e6c9 !important;
border-radius: 10px !important;
color: #555 !important;
padding: 14px 20px !important;
font-size: 0.88rem !important;
}
/* "Vélemény írása" gomb */
a#hcWriteReviewbtn,
a#hcWriteReviewbtn.btn,
a#hcWriteReviewbtn.btn-success,
a#hcWriteReviewbtn.btn.btn-success.btn-sm.hc-popup {
background-color: var(--white) !important;
color: var(--green) !important;
border: 2px solid var(--green) !important;
border-radius: 10px !important;
padding: 10px 22px !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
box-shadow: none !important;
display: inline-block !important;
min-height: 44px !important;
line-height: 1.4 !important;
}
a#hcWriteReviewbtn.btn.btn-success.btn-sm.hc-popup:hover,
a#hcWriteReviewbtn.btn.btn-success:hover,
a#hcWriteReviewbtn.btn:hover,
a#hcWriteReviewbtn:hover {
background-color: var(--green) !important;
color: var(--white) !important;
border-color: var(--green) !important;
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35) !important;
transform: translateY(-2px) !important;
}
/* Csillag rating */
.hc-rating { margin-top: 0; }
/* Csillag sprite NEM lehet flex-ben, mert torzul - blokk elem
marad, fix méretekkel ahogy a Hotcakes szerette volna */
.hc-product .hc-rating,
.hcMvcView .hc-rating,
.hc-rating.hc-stars0,
.hc-rating.hc-stars1,
.hc-rating.hc-stars2,
.hc-rating.hc-stars3,
.hc-rating.hc-stars4,
.hc-rating.hc-stars5 {
display: inline-block !important;
width: 125px !important;
height: 25px !important;
flex: none !important;
overflow: hidden !important;
vertical-align: middle !important;
margin: 0 !important;
}
/* HTML struktúra (a Hotcakes erre épít):
Megoldás: a parent col text-align: left + a két testvér inline-block.
Így mint normál szöveg-folyam balra igazodnak. */
.hc-product .hc-product-details .col-xs-12.margin-bottom-md,
.hc-product .col-xs-12.margin-bottom-md:has(.hc-rating-wrapper),
.hc-product-details .col-xs-12.margin-bottom-md {
display: block !important;
text-align: left !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
font-size: 0 !important; /* "-" textnode és inline-block hézagok */
}
/* Wrapper és content-inline egymás mellett mint inline-block */
.hc-product .hc-rating-wrapper,
.hcMvcView .hc-rating-wrapper,
.hc-rating-wrapper {
display: inline-block !important;
width: auto !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
.hc-product .content-inline,
.hcMvcView .content-inline,
.col-xs-12.margin-bottom-md > .content-inline {
display: inline-block !important;
width: auto !important;
margin: 0 0 0 6px !important; /* kisebb hézag a csillagok és "-" között */
padding: 0 !important;
font-size: 0.95rem !important;
vertical-align: middle !important;
text-align: left !important;
color: var(--gray) !important;
}
/* A "-" textnode és a Vélemények link közé minimális hézag */
.hc-product .content-inline a,
.hc-product .content-inline > *,
.content-inline a,
.content-inline > * {
font-size: 0.95rem !important;
vertical-align: middle !important;
margin-left: 4px !important; /* "-" és link közötti kis hézag */
}
/* A Vélemények link visszakapja a font-size-t */
.hc-product .content-inline a,
.hc-product .content-inline > *,
.content-inline a,
.content-inline > * {
font-size: 0.95rem !important;
vertical-align: middle !important;
}
/* A Termékadatok cím alatti row-fluid és container-ek balra hozása,
hogy a csillag és Vélemények NE húzódjon jobbra a Bootstrap miatt */
.hc-product .hc-product-details .row-fluid,
.hcProductDetails .row-fluid,
#hcProductDetails .row-fluid,
.hc-product .row-fluid {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
/* A rating wrapper parent containere (col-md-6, col-xs-12 stb) gyakran
text-center-rel van - felülírjuk balra */
.hc-product .hcProductDetails,
.hc-product .hc-product-details,
#hcProductDetails,
.hc-product-details,
.hc-product .col-xs-12.margin-bottom-md,
.hc-product .col-md-6 {
text-align: left !important;
}
/* =============================================================
KAPCSOLÓDÓ TERMÉKEK
============================================================= */
.hc-related-items h3 {
font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
font-weight: 700 !important;
color: var(--dark) !important;
margin-bottom: 24px !important;
}
/* A parent row-t flex container-ré tesszük, hogy a kártyák
egyforma magasak legyenek (align-items: stretch) */
.hc-related-items .row,
.hc-related-items .row-fluid,
.hc-related-items > .row,
.hc-related-items > .row-fluid {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
margin-left: -10px !important;
margin-right: -10px !important;
}
.hc-related-items .row > [class*="col-"],
.hc-related-items .row-fluid > [class*="col-"] {
display: flex !important;
flex-direction: column !important;
padding: 0 10px !important;
margin-bottom: 20px !important;
float: none !important;
}
.hc-related-items .panel,
.hc-related-items .panel-default {
background: var(--white) !important;
border: 1px solid #eee !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
box-shadow: var(--shadow-card) !important;
-webkit-box-shadow: none !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
margin-bottom: 0 !important;
}
.hc-related-items .panel:hover,
.hc-related-items .panel-default:hover {
border-color: var(--green) !important;
box-shadow: var(--shadow-hover) !important;
transform: translateY(-6px) !important;
}
/* Cím FIX magasság: minden kártyán azonos, hogy a kép azonos vonalban legyen.
100px = ~4 sor cím + padding ami biztos elférjen */
.hc-related-items .panel-heading {
background: var(--white) !important;
border-bottom: none !important;
padding: 18px 18px 12px !important;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
/* Line-clamp az