/*
* EcoSmart megamenü - Kalkulátorok panel, contextual promo card, drawer rows.
* Owned by includes/wp/class-eco-calc-menu.php (PLAN_2026-08-19 WP-M3).
*
* EVERY VALUE BELOW WAS READ OFF THE LIVE SITE, NOT OFF THE MOCK
* -------------------------------------------------------------
* Measured 2026-08-19 with headless Chrome on https://ecosmart.hu/, hovering the Napelemek
* panel and opening the 390px drawer. Where the handoff's token table and the live computed
* style disagreed, the live site won. The disagreements, all deliberate:
*
* font-family mock "Inter 400/600/800" -> not declared here at all. The panel inherits
* Inter from the page. Only 400/600/700 are actually loaded on a live page
* (document.fonts: everything else reports "unloaded"), so an 800 weight would
* fetch a font file on menu hover: a visible loading seam, which is exactly
* the "embedded from outside" feeling this work exists to remove. 600/700 do
* all the bold work here, like everywhere else on the site.
* radii mock 12px cards / 14px promo -> 4px. The theme's whole radius scale is 3-4px
* (KEDVELT badge 3, buttons 4, menu images 4). 12px reads as another site.
* padding mock "30px 36px 34px" on the panel -> not set. The theme already pads its
* panels (ul.sub-menu 40px 0, each column li 0 25px) and the panel body sits
* inside that. The 50px grid gap below IS the theme's own gutter: 25px + 25px.
* card border mock 2px #E4E4E4 -> 1px. The theme's hairline everywhere in this panel is
* 1px (#eee column separators, #eee panel border-top). #E4E4E4 is kept as the
* hue: slightly firmer than the separators so a card reads as a card, and it
* is already a shipped token of this plugin (calc-pv.css --ecs-border).
* headline mock 24px/800 #104B19 -> 20px/700. Nothing else in a panel exceeds 15px;
* 24px would tower over the neighbouring panels.
* link colour mock #444 -> rgb(50,50,50) desktop / rgb(34,34,34) drawer, the theme's own.
* mobile promo the handoff's optional green drawer card is CUT for v1 (PLAN WP-M3): the
* drawer is long already and a second competing CTA block reads as bolted on.
* It is hidden here rather than left to a menu-item class, so the decision
* lives in one place.
*
* Native by inheritance, not by imitation:
* #E78E47 is the site's own customizer accent (KEDVELT badge, cart count, tab underline,
* CF7 submit). #3BB54A is the live add-to-cart button fill, and the promo CTA below copies
* that button's exact geometry (40px line box, 4px radius, 14px/600, full width).
* #104B19 is the calculators' own brand green, already live on /napelem-kalkulator/ and
* /klima-kalkulator/ via calc-pv.css. It appears here only on calculator objects (card icons,
* the promo card) so the menu points at the calculators in their own colour.
*
* 993px is the theme's own navigation breakpoint (main.css @media (min-width: 993px)), not a
* number chosen here.
*/
.eco-menu-panel,
.eco-menu-promo,
.eco-menu-brands {
--eco-menu-green: #104B19;
--eco-menu-cta: #3BB54A;
--eco-menu-cta-hover: #339A3F;
--eco-menu-accent: #E78E47;
--eco-menu-success: #4CAF50;
--eco-menu-title: rgb(44, 45, 51);
--eco-menu-body: rgb(68, 68, 68);
--eco-menu-muted: #888888;
--eco-menu-border: #E4E4E4;
--eco-menu-hairline: #EDEDED;
--eco-menu-hairline-theme: #eee;
--eco-menu-on-green-label: #9DC2A2;
--eco-menu-on-green-body: #C7DCC9;
--eco-menu-radius: 4px;
}
/* The theme pads every span inside a `nolink` column (main.css: li.nolink span:not(.caret)).
The panel body is meant to sit in a `menu-item-product` item, where that rule does not apply,
but this keeps it harmless if the menu is ever wired the other way. */
.main-navigation ul.menu li.full-width li.nolink .eco-menu-panel span:not(.caret),
.main-navigation ul.menu li.full-width li.nolink .eco-menu-promo span:not(.caret) {
padding: 0;
}
/* WIRING GUARD - do not delete.
*
* A menu item only escapes Shoptimizer's anchor wrapper if its CSS classes include
* `menu-item-product` or `nolink` (walker in inc/shoptimizer-functions.php). Miss that class and
* the walker emits `OUR MARKUP`. The HTML parser then hits our first card
* anchor, applies the adoption agency algorithm, and SPLITS the panel: the intro column stays
* inside the menu item's own link while the cards get reparented next to it. Every card still
* works, so nothing looks broken in the console; it just quietly becomes a link to the wrong
* place with the layout subtly off, and that is an hour of someone's life.
*
* This makes it loud instead. If you are reading this because a dashed red box and a warning
* appeared in the panel: add `menu-item-product` to that menu item's CSS classes.
*
* The selectors are not the obvious `a .eco-menu-panel`. Verified in Chrome: the parser hoists
* our block-level wrappers OUT of the anchor and reconstructs the anchor inside them, so
* `.eco-menu-panel` and `.eco-menu-promo` end up NOT inside any ``. The elements that do stay
* inside the reconstructed anchor are the first inline children, so those are what we key on.
* Both selectors match 0 elements when the menu item is classed correctly. */
a .eco-menu-eyebrow,
a .eco-menu-promo__label {
outline: 2px dashed #C0392B;
outline-offset: 3px;
}
a .eco-menu-eyebrow::after,
a .eco-menu-promo__label::after {
content: " \26A0 menu-item-product";
color: #C0392B;
}
.eco-menu-arrow {
display: inline-block;
}
/* =========================================================================================
Desktop: the Kalkulátorok panel body
========================================================================================= */
@media (min-width: 993px) {
/* The panel body is one column of the theme's flex row, and it needs the whole row. The
theme's own `col-5` class does exactly this, so wiring the menu item as `col-5` is the
native route; this rule makes the body correct either way. The column separators are
dropped because a single full-width column has nothing to be separated from. */
.main-navigation ul li.full-width > .sub-menu-wrapper > .container > ul.sub-menu > li:has(> .eco-menu-panel) {
width: 100%;
border-left: 0;
border-right: 0;
}
.eco-menu-panel {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
/* 50px = the theme's own 25px + 25px column gutter. */
gap: 0 50px;
align-items: start;
}
.eco-menu-intro {
min-width: 0;
}
/* Same type metrics as the theme's own panel column headers
(12px / 600 / 0.5px tracking / uppercase), in the site's accent colour. */
.eco-menu-eyebrow {
display: block;
font-size: 12px;
font-weight: 600;
line-height: 18px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--eco-menu-accent);
margin-bottom: 8px;
}
.eco-menu-headline {
display: block;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--eco-menu-green);
margin-bottom: 8px;
}
.eco-menu-lead {
display: block;
font-size: 14px;
line-height: 1.55;
color: var(--eco-menu-body);
margin-bottom: 14px;
}
.eco-menu-trust {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
line-height: 1.5;
color: var(--eco-menu-body);
}
.eco-menu-check {
flex: 0 0 auto;
color: var(--eco-menu-success);
}
.eco-menu-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
.eco-menu-card {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 16px;
background: #fff;
border: 1px solid var(--eco-menu-border);
border-radius: var(--eco-menu-radius);
text-decoration: none;
transition: border-color 0.15s ease;
}
a.eco-menu-card--live:hover,
a.eco-menu-card--live:focus-visible {
border-color: var(--eco-menu-accent);
text-decoration: none;
}
.eco-menu-card__icon {
display: block;
line-height: 0;
color: var(--eco-menu-green);
margin-bottom: 2px;
}
.eco-menu-card__title {
display: block;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--eco-menu-title);
overflow-wrap: break-word;
}
.eco-menu-card__desc {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--eco-menu-muted);
}
.eco-menu-card__cta {
display: block;
margin-top: auto;
padding-top: 4px;
font-size: 13px;
font-weight: 600;
color: var(--eco-menu-accent);
}
/* Coming soon: softer border, softer icon, no hover change, no pointer. Nothing about it
may suggest a click, because there is nowhere for that click to go. */
.eco-menu-card--soon {
border-color: var(--eco-menu-hairline);
cursor: default;
}
.eco-menu-card--soon .eco-menu-card__icon {
opacity: 0.35;
}
.eco-menu-card__pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding: 2px 7px;
/* The KEDVELT badge's geometry (radius 3, 6px side padding, 600), muted. */
border-radius: 3px;
background: #F0F0F0;
color: var(--eco-menu-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 16px;
text-transform: uppercase;
}
/* =====================================================================================
Desktop: the contextual promo card
COLUMN BUDGET, measured live 2026-08-19. Every one of the six full-width panels is
exactly four columns of 269px (the theme's 23% of a 1170px container, centred, 94px of
slack). Five columns cannot be 269px wide inside 1170px, so appending the promo as a
fifth column narrows all four existing columns to 234px, a visible 13% reflow of a panel
nobody asked us to touch. Pinning the promo narrow barely helps: at a 200px promo the
others still only reach 242px.
So the promo TAKES a slot rather than ADDING one: the wiring script replaces the last
`[ecosmart_menu_product]` pin in a promo-bearing panel instead of appending after it. The
panel stays 4 x 269px and nothing reflows, which is also exactly what the designer drew
(the Hőszivattyúk mock is category column + two products + promo = four columns).
The rule below is the safety net for the day someone appends a fifth column anyway. The
browser's own flex-shrink happens to land on an even 234px today, but shrink is clamped
by each item's min-content width, so one long unbreakable product title is enough to make
the row ragged. `flex: 1 1 0` with `min-width: 0` makes five even columns a decision
instead of a coincidence.
===================================================================================== */
/* Note the `:nth-child(5)`: this must fire ONLY when a promo actually pushed the row past
four columns. Without it, a panel where the promo correctly REPLACED a product pin still
has four columns, and `flex: 1 1 0` would stretch them from 269px to 292px - reflowing the
panel in the very case that was supposed to leave it alone. Measured both ways. */
.main-navigation ul li.full-width > .sub-menu-wrapper > .container > ul.sub-menu:has(> li.menu-item-promo):has(> li:nth-child(5)) > li {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.eco-menu-promo {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 16px;
background: var(--eco-menu-green);
border-radius: var(--eco-menu-radius);
}
.eco-menu-promo__label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 16px;
text-transform: uppercase;
color: var(--eco-menu-on-green-label);
}
.eco-menu-promo__title {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: #fff;
}
.eco-menu-promo__body {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--eco-menu-on-green-body);
}
/* Geometry copied from the live add-to-cart button in this very panel: 40px box, 4px
radius, 14px/600, white on #3BB54A, full width. The live button uses a fixed
`line-height: 40px`, which it can afford because "Kosárba teszem" never wraps; ours can
carry "Napelem konfigurátor", so the 40px is a min-height and the box grows to two lines
instead of spilling. Single-line renders pixel-identical to the theme's button. */
.eco-menu-promo__cta {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 40px;
margin-top: 4px;
padding: 6px 12px;
background: var(--eco-menu-cta);
border-radius: var(--eco-menu-radius);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-align: center;
text-decoration: none;
}
.eco-menu-promo__cta:hover,
.eco-menu-promo__cta:focus-visible {
background: var(--eco-menu-cta-hover);
color: #fff;
text-decoration: none;
}
/* SPECIFICITY, measured with CDP getMatchedStylesForNode: the theme's
`.main-navigation ul.menu ul li a` (0,2,4) sets #323232 on every anchor inside a panel and
beats a plain class selector, so our promo CTA rendered dark grey on green. These three
rules carry the same context prefix to win it back. They are the only place in this sheet
that needs it, because they are the only anchors whose own colour matters. */
.main-navigation ul.menu ul li a.eco-menu-promo__cta,
.main-navigation ul.menu ul li a.eco-menu-promo__cta:hover,
.main-navigation ul.menu ul li a.eco-menu-promo__cta:focus-visible {
color: #fff;
}
.main-navigation ul.menu ul li a.eco-menu-promo__crosslink {
color: var(--eco-menu-accent);
}
.main-navigation ul.menu ul li a.eco-menu-card--live {
color: inherit;
}
.eco-menu-promo__cross {
display: block;
font-size: 12px;
line-height: 1.5;
color: var(--eco-menu-on-green-body);
}
.eco-menu-promo__crosslink {
color: var(--eco-menu-accent);
font-weight: 600;
text-decoration: none;
}
.eco-menu-promo__crosslink:hover,
.eco-menu-promo__crosslink:focus-visible {
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 0.18em;
}
}
/* =========================================================================================
Mobile drawer (below the theme's 993px navigation breakpoint)
The same menu items render inside .col-full-nav, where the usable width is about 193px. The
card grid collapses to the handoff's drawer rows: 24px icon, label, chevron, >= 44px tall.
Descriptions and the intro column are dropped, matching the handoff's own drawer design.
========================================================================================= */
@media (max-width: 992px) {
.eco-menu-panel {
display: block;
min-width: 0;
}
.eco-menu-intro {
display: none;
}
/* PLAN WP-M3: the drawer promo card is cut for v1. */
.eco-menu-promo {
display: none;
}
.eco-menu-cards {
display: block;
min-width: 0;
}
.eco-menu-card {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
box-sizing: border-box;
min-height: 44px;
padding: 8px 0;
border: 0;
border-bottom: 1px solid var(--eco-menu-hairline-theme);
border-radius: 0;
background: none;
text-decoration: none;
}
.eco-menu-cards > .eco-menu-card:last-child {
border-bottom: 0;
}
.eco-menu-card__icon {
grid-column: 1;
display: block;
line-height: 0;
color: var(--eco-menu-green);
}
.eco-menu-card__icon svg {
width: 24px;
height: 24px;
}
.eco-menu-card--soon .eco-menu-card__icon {
opacity: 0.35;
}
.eco-menu-card__title {
grid-column: 2;
min-width: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: rgb(34, 34, 34);
overflow-wrap: break-word;
}
/* The description and the "Indítás" line are desktop affordances; in a drawer row the
chevron says the same thing in 8 pixels. */
.eco-menu-card__desc,
.eco-menu-card__cta {
display: none;
}
.eco-menu-card--live::after {
grid-column: 3;
content: "\203A";
color: var(--eco-menu-muted);
font-size: 16px;
line-height: 1;
}
.eco-menu-card__pill {
grid-column: 3;
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 3px;
background: #F0F0F0;
color: var(--eco-menu-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 16px;
text-transform: uppercase;
white-space: nowrap;
}
}
/* =========================================================================================
[ecosmart_menu_brands] - a row of brand-archive links (WP-M4, resolver layer only, PLAN
2026-08-19: not wired into the live menu yet, styled ahead of that wiring so the panel needs
no further design pass once it is).
No media query: unlike the card grid and the promo card, this is a plain wrapping flex row at
every width, so it does not need a separate mobile-drawer rewrite the way `.eco-menu-cards`
and `.eco-menu-card` do above.
========================================================================================= */
.eco-menu-brands {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.eco-menu-brand {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border: 1px solid var(--eco-menu-border);
border-radius: var(--eco-menu-radius);
color: var(--eco-menu-body);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
}
.eco-menu-brand:hover,
.eco-menu-brand:focus-visible {
border-color: var(--eco-menu-accent);
color: var(--eco-menu-title);
}
.eco-menu-brand--more {
border-style: dashed;
color: var(--eco-menu-muted);
}
/* PLAN_2026-08-21: logo-only brand links. Fixed 110x28 box, object-fit: contain, left-aligned
inside it (source PNGs are normalised to 56px tall / capped 240px wide, i.e. 2x this box, for
a crisp render on retina). The surrounding `.eco-menu-brand` chip (border, padding, hover)
is unchanged on purpose - it is the existing affordance the plan says to keep, and its
`align-items: center` already centres the image without extra rules here. Brands without a
supplied logo keep rendering as plain text through the same `.eco-menu-brand` class. */
.eco-menu-brand__logo {
display: block;
width: 110px;
height: 28px;
object-fit: contain;
object-position: left center;
}
/* =========================================================================================
Utility bar "Információk" dropdown (2026-08-19: menu id 51, moved out of the primary mega
menu into the secondary utility bar alongside Fiókom / Ügyfélszolgálat / Pénztár).
THE GAP THIS CLOSES
--------------------
Shoptimizer's own main.css ships `.secondary-navigation .sub-menu { display: none; }` with
NO reveal rule anywhere: the mega-menu reveal (`:hover > .sub-menu-wrapper`) only exists for
`.main-navigation`, whose custom walker wraps every dropdown in a `.sub-menu-wrapper` div
that the secondary nav's plain core Walker_Nav_Menu output never gets. Before this block,
"Információk" had `menu-item-has-children` but no CSS path that ever set `display: block`,
so the four links under it (Szállítás és fizetés, Garancia, Rólunk, Blog) were genuinely
unreachable on desktop, not just unstyled.
Modelled on the theme's OWN closest equivalent - a small vanilla WP `.sub-menu` dropdown,
not the mega-menu machinery: `.top-bar .widget_nav_menu ul li .sub-menu` in this same
main.css (absolute position, white background, box-shadow, hover to reveal). Right-aligned
here specifically because "Információk" is the last (rightmost) item in a right-floated bar,
so a left-aligned panel would run off the viewport edge.
========================================================================================= */
@media (min-width: 993px) {
.secondary-navigation .menu-item-has-children {
position: relative;
}
.secondary-navigation .menu-item-has-children > .sub-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
left: auto;
z-index: 20;
min-width: 200px;
margin: 6px 0 0;
padding: 10px 0;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.15);
list-style: none;
}
.secondary-navigation .menu-item-has-children:hover > .sub-menu,
.secondary-navigation .menu-item-has-children:focus-within > .sub-menu {
display: block;
}
.secondary-navigation .sub-menu li {
display: block;
padding: 0 18px;
}
.secondary-navigation .sub-menu a {
display: block;
/* !important: main.css's own .secondary-navigation .menu li:not(.ri) a sets
padding-top: 35px (room for the icon row above a TOP-LEVEL link) and has no child
combinator, so it reaches into every nested .sub-menu li too and outranks this rule
on class-count specificity alone. A dropdown row carries no icon and must not inherit
that reserved top space. */
padding: 8px 0 !important;
font-size: 13px;
line-height: 1.3;
color: rgb(50, 50, 50);
white-space: nowrap;
text-decoration: none;
}
.secondary-navigation .sub-menu a:hover,
.secondary-navigation .sub-menu a:focus-visible {
color: #104B19;
}
}
/* 2026-08-23: the mobile "reachable on mobile" strip that used to live here (fixed to the
viewport bottom under body.mobile-toggled) is REMOVED - it overlaid and obscured the real
drawer content (incl. the "KÉRDÉSE VAN?" section) instead of extending it. Blog, the one link
this strip carried that had no other mobile path, was moved to the footer link list instead
(footer sidebar "Menüpontok" text widget) to preserve reachability. Do not re-add this block. */