/* ============================================================================
   HawaiiCards · Header-v2 — Full-Width-Mega + Set-Kacheln + Trust-Fix
   Site-weit über header.tpl geladen. Greift auf die von custom.js gebaute
   Catbar (.cat.has-mega > .mega2) zu; ergänzt per header-megav2.js.
   ============================================================================ */

/* --- 1) Full-Width-Dropdown: Mega spannt von Catbar-Außenkante bis rechts --- */
/* WICHTIG: custom.js (initCatNav) setzt inline `left:0; right:auto` auf JEDES
   Mega → das killt die Voll-Breite. Stylesheet-!important schlägt Inline-non-
   important → erst dadurch spannen ALLE Megas von wrap-links bis wrap-rechts. */
.catbar .wrap{ position:relative; }
.catbar .cat.has-mega{ position:static; }
.catbar .mega2{
  position:absolute; left:0 !important; right:0 !important; top:100%;
  width:auto !important; max-width:none !important;
}

/* --- 2) Mega-Innenlayout: Set-Kacheln LINKS, Kopf + Unterkategorien rechts --- */
.mega2.has-cn-sets{
  display:grid; grid-template-columns:auto 1fr; column-gap:28px; align-items:start;
}
.mega2.has-cn-sets .cn-sets{
  grid-row:1 / span 2; grid-column:1; align-self:stretch;
  margin:0; padding:0 26px 0 0; border:0;
  border-right:1px solid var(--border-soft, rgba(0,0,0,.10));
}
.mega2.has-cn-sets .mega2-head{ grid-column:2; }
.mega2.has-cn-sets .mega2-links{ grid-column:2; }

/* --- 3) Set-Kacheln (aktuelles + nächstes Set → Landingpage) --- */
.mega2 .cn-sets{ display:grid; grid-template-columns:repeat(2,128px); gap:12px; }
.mega2 .cn-set{
  position:relative; aspect-ratio:1/1; display:block; overflow:hidden;
  border-radius:14px; background:var(--card-hi,#fbf8ef);
  box-shadow:inset 0 0 0 1px var(--border-soft, rgba(0,0,0,.08));
  transition:transform .2s ease, box-shadow .2s ease;
}
.mega2 .cn-set:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.6px var(--primary,#ef820e); }
.mega2 .cn-set img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px; }
.mega2 .cn-set::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); }
.mega2 .cn-set .cn-set-cap{ position:absolute; left:8px; right:8px; bottom:7px; z-index:2; color:#fff; font-size:11px; font-weight:700; line-height:1.12; }
.mega2 .cn-set .cn-set-tag{
  position:absolute; left:7px; top:7px; z-index:2; font-size:8.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:999px; color:#fff;
}
.mega2 .cn-set .cn-set-tag.pre{ background:var(--hot-2,#ff5d7a); }
.mega2 .cn-set .cn-set-tag.now{ background:var(--primary,#ef820e); color:var(--primary-ink,#2a1100); }
@media (max-width:1023px){ .mega2 .cn-sets{ display:none; } .mega2.has-cn-sets{ display:block; } }

/* --- 4) Catbar: Trennstrich vor den Service-Links + Sale-Akzent --- */
.catbar .cat-div{ width:1px; align-self:center; height:22px; background:var(--border-soft, rgba(0,0,0,.18)); margin:0 12px; flex:0 0 auto; }
.catbar .cat.simple.sale{ color:var(--hot-2,#ff5d7a); font-weight:800; }

/* --- 5) Suchleiste/Kopfzeile luftiger (Marcel 25.06.) --- */
.site-header .brandrow{ padding-top:20px; padding-bottom:20px; }
.site-header .searchbig{ padding-top:11px; padding-bottom:11px; }

/* --- 6) Trust-Strip #hc-usp: Live-Section-Padding (64px) killen → schmal --- */
#hc-usp{ padding-top:8px !important; padding-bottom:8px !important; }
#hc-usp .row{ padding:6px 0 !important; }
.hc-usp-item{ padding:3px 8px !important; }
.hc-usp-item .ic{ width:28px !important; height:28px !important; }

/* --- 7) Breites Mega füllen: Unterkategorien über die ganze Breite (Marcel 25.06.) --- */
.mega2 .mega2-links{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.mega2.has-cn-sets .mega2-links{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.catbar .mega2{ min-height:230px; }  /* annähernd gleiche Höhe für alle Megas */

/* --- 8) Hero-Max-Höhe gem. Brandbook (664px) — Trust-Bereich NICHT betroffen --- */
@media (min-width:1024px){ #hc-hero{ max-height:664px !important; } }