/* === Custom Mega-menu pod pozycja "Skup" === */

.mm-has-megamenu{position:static !important}
.mm-has-megamenu > a{position:relative}
.mm-has-megamenu > a::after{content:"";display:inline-block;width:0;height:0;margin-left:8px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid currentColor;vertical-align:2px;transition:transform .25s}
.mm-has-megamenu.is-open > a::after{transform:rotate(180deg)}

/* === Desktop === */
@media (min-width: 1025px){
	.whb-header .mm-has-megamenu{position:static}
	.whb-header .mm-mega{position:absolute;left:0;right:0;top:calc(100% - 2px);width:100%;max-width:1240px;margin:0 auto;background:#fff;border:1px solid var(--mm-line,#ece6d6);border-radius:0 0 18px 18px;box-shadow:0 30px 60px -20px rgba(20,18,10,.28);padding:32px 36px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;pointer-events:none}
	/* niewidzialny most lacznik (eliminuje hover-gap) */
	.whb-header .mm-has-megamenu > .mm-mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px}
	.whb-header .mm-has-megamenu:hover > .mm-mega,
	.whb-header .mm-has-megamenu:focus-within > .mm-mega,
	.whb-header .mm-has-megamenu.is-open > .mm-mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .28s ease,transform .28s ease,visibility 0s;pointer-events:auto}
	.whb-header .mm-mega[aria-hidden="false"]{opacity:1;visibility:visible;transform:none;pointer-events:auto}

	/* lewa strona, brak centrowania */
	.mm-mega__inner{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:36px;align-items:start;justify-items:start;text-align:left}
}

@media (max-width: 1024px){
	.mm-mega{display:none;background:#fafafa;padding:14px 0 4px;border-top:1px solid var(--mm-line,#ece6d6)}
	.mm-has-megamenu.is-open > .mm-mega{display:block}
	.mm-mega__inner{display:flex;flex-direction:column;gap:18px;padding:0 4px;text-align:left}
}

.mm-mega__col{width:100%;text-align:left}

/* Header kolumny – lewa strona, ikona + tytuł obok siebie */
.mm-mega__col-head{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px dashed var(--mm-line,#ece6d6);text-align:left}
.mm-mega__col-title{margin:0;font:700 14px/1 'Inter','Saira',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--mm-ink,#1c1c1c);text-align:left}

/* Ikona: 40 x 40, gradient tla, w srodku SVG z gold gradientem.
   Jezeli userze wgrasz PNG do /assets/img/megamenu/<icon>.png,
   uzyj klas mm-mega__icon--coin/steps/pin – w tym CSS pierwszenstwo ma background-image. */
.mm-mega__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#fff7e0 0%,#f3d883 100%);box-shadow:inset 0 0 0 1px rgba(168,127,35,.18), 0 6px 14px -8px rgba(168,127,35,.45);overflow:hidden}
.mm-mega__icon svg{width:26px;height:26px;display:block}
.mm-mega__icon-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:11px}
/* Slot na PNG/SVG z DALL-E: jezeli plik istnieje, ten kolor nadpisuje SVG fallback */
.mm-mega__icon--coin.has-img,
.mm-mega__icon--steps.has-img,
.mm-mega__icon--pin.has-img{background:#fff;background-size:cover;background-position:center}
.mm-mega__icon--coin.has-img svg,
.mm-mega__icon--steps.has-img svg,
.mm-mega__icon--pin.has-img svg{display:none}

/* Lista linkow – left-align */
.mm-mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%;text-align:left}
.mm-mega__list a{display:block;padding:10px 12px 10px 0;border-radius:9px;font:500 14.5px/1.4 'Inter','Saira',sans-serif;color:#3a3a3a;text-decoration:none;transition:color .22s,padding .22s,background .22s;text-align:left}
.mm-mega__list a:hover{color:var(--mm-gold-dark,#a87f23);background:rgba(201,161,59,.07);padding-left:14px}

/* Promo box – tez left-align */
.mm-mega__promo{background:linear-gradient(135deg,#1c1c1c 0%,#2b2419 100%);color:#fff;padding:26px;border-radius:14px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;text-align:left;width:100%}
.mm-mega__promo::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,161,59,.4),transparent);right:-60px;top:-60px}
.mm-mega__promo-kicker{font:700 11px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-gold,#c9a13b)}
.mm-mega__promo-title{margin:4px 0;font:700 22px/1.2 'Playfair Display','Saira',serif;color:#fff}
.mm-mega__promo-text{margin:0 0 14px;font:400 13.5px/1.5 'Inter',sans-serif;color:rgba(255,255,255,.78)}
.mm-mega__promo-btn{display:inline-block;align-self:flex-start;background:linear-gradient(135deg,var(--mm-gold,#c9a13b) 0%,var(--mm-gold-dark,#a87f23) 100%);color:#fff;font:700 13px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:13px 22px;border-radius:999px;text-decoration:none;transition:transform .25s;position:relative;z-index:1}
.mm-mega__promo-btn:hover{transform:translateY(-2px);color:#fff}