/* ====================================================================
   HÄUSPRINT MEGA MENU — Complete Stylesheet
   Matches design mockups: Apparel, Gifts, Signage, All Products
   ==================================================================== */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --haus-teal:         #2CBDB9;
  --haus-teal-dark:    #1FA8A4;
  --haus-teal-bg:      #E6F8F8;
  --haus-logo-max-h:   52px;    /* max logo image height             */
  --haus-logo-pad:     40px;    /* horizontal space around logo      */
  --haus-header-h:     var(--haus-nav-h); /* alias for clarity       */
  --haus-teal-text:    #1A8A87;
  --haus-navy:         #1A2332;
  --haus-text:         #374151;
  --haus-muted:        #6B7280;
  --haus-light:        #9CA3AF;
  --haus-border:       #E5E7EB;
  --haus-bg:           #FFFFFF;
  --haus-sidebar-bg:   #F9FAFB;
  --haus-radius:       0;       /* panel / dropdown shells are SQUARE (product
                                   owner, 2026-09-10); --haus-radius-sm keeps the
                                   small radius on chips, tiles and thumbnails */
  --haus-radius-sm:    8px;
  --haus-shadow:       0 16px 48px rgba(0,0,0,0.13);
  --haus-transition:   0.18s ease;
  --haus-nav-h:        72px;
  --haus-z:            1000;
  --haus-mega-inset:   24px;   /* panel side margin from the true edge — a
                                   floating card, not edge-to-edge; matches
                                   the reference mockups' side gap        */
}


/* ── Reset within scope ─────────────────────────────────────────── */
.haus-nav *,
.haus-nav *::before,
.haus-nav *::after {
  box-sizing: border-box;
}
.haus-nav ul { list-style: none; margin: 0; padding: 0; }
.haus-nav a  { text-decoration: none; color: inherit; }


/* ==================================================================
   NAV BAR
   ================================================================== */

.haus-nav {
  position: relative;
  background: var(--haus-bg);
  border-bottom: 1px solid var(--haus-border);
  z-index: var(--haus-z);
}

.haus-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--haus-nav-h);
  padding: 0 24px;
  margin: 0;
  list-style: none;
}

/* Logo slot (if placed inside the nav) */
.haus-nav__logo {
  margin: 0 40px;
}

/* Top-level item */
.haus-nav__item {
  /* Positioned so plain .haus-dropdown children anchor correctly under
     their own trigger. Mega panels need the opposite (full-width, escaping
     to .haus-nav) so mega-menu.js moves .haus-mega out to be a direct
     child of .haus-nav on init — see the .haus-mega rules below. */
  position: relative;
}

/* Top-level link */
.haus-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haus-navy);
  border-radius: var(--haus-radius-sm);
  transition: color var(--haus-transition), background var(--haus-transition);
  white-space: nowrap;
  cursor: pointer;
}

.haus-nav__link:hover,
.haus-nav__link:focus-visible,
.haus-nav__item.is-open > .haus-nav__link {
  color: var(--haus-teal);
  background: var(--haus-teal-bg);
  outline: none;
}

.haus-nav__link:focus-visible {
  outline: 2px solid var(--haus-teal);
  outline-offset: 2px;
}

/* Chevron */
.haus-nav__chevron {
  flex-shrink: 0;
  transition: transform var(--haus-transition);
}
.haus-nav__item.is-open > .haus-nav__link .haus-nav__chevron {
  transform: rotate(180deg);
}

/* Active underline indicator */
.haus-nav__item.current-menu-item > .haus-nav__link,
.haus-nav__item.current-menu-parent > .haus-nav__link,
.haus-nav__item.current-menu-ancestor > .haus-nav__link {
  color: var(--haus-teal);
  border-bottom: 2px solid var(--haus-teal);
  border-radius: 0;
  padding-bottom: 6px;
}


/* ==================================================================
   MEGA PANEL – BASE
   ================================================================== */

.haus-mega {
  display: none;
  position: absolute;
  left: var(--haus-mega-inset);
  right: var(--haus-mega-inset);
  top: calc(100% + 1px);
  background: var(--haus-bg);
  border-top: 2px solid var(--haus-teal);
  border-bottom: 1px solid var(--haus-border);
  box-shadow: var(--haus-shadow);
  border-radius: var(--haus-radius);
  overflow: hidden; /* clip children (sidebar, footer bar) to this box */
  z-index: var(--haus-z);
  animation: hausSlideDown 0.18s ease both;
}

/* .haus-mega is moved to be a direct child of .haus-nav by mega-menu.js
   (not a descendant of .haus-nav__item anymore), so visibility is driven
   by a class on the panel itself rather than a descendant selector. */
.haus-mega.is-open {
  display: block;
}

@keyframes hausSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .haus-mega { animation: none; }
}


/* ==================================================================
   STANDARD DROPDOWN (non-mega items)
   ================================================================== */

.haus-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--haus-bg);
  border: 1px solid var(--haus-border);
  border-top: 2px solid var(--haus-teal);
  border-radius: var(--haus-radius); /* square, like the mega panels */
  box-shadow: var(--haus-shadow);
  z-index: var(--haus-z);
  padding: 8px 0;
  list-style: none;
}

.haus-nav__item.is-open > .haus-dropdown {
  display: block;
}

.haus-dropdown__item {
  list-style: none;
}

.haus-dropdown__link {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--haus-text);
  transition: background var(--haus-transition), color var(--haus-transition);
}

.haus-dropdown__link:hover,
.haus-dropdown__link:focus-visible {
  background: var(--haus-teal-bg);
  color: var(--haus-teal);
  outline: none;
}


/* ==================================================================
   ICON
   ================================================================== */

.haus-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}


/* ==================================================================
   ALL PRODUCTS PANEL
   ================================================================== */

.haus-mega--all-products {
  padding: 28px 48px 32px;
}

/* Toggle buttons */
.haus-mega__ap-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.haus-mega__ap-toggle {
  display: flex;
  gap: 4px;
  background: var(--haus-sidebar-bg);
  padding: 4px;
  border-radius: 8px;
}

.haus-mega__ap-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--haus-muted);
  cursor: pointer;
  transition: background var(--haus-transition), color var(--haus-transition);
}

.haus-mega__ap-toggle-btn.is-active,
.haus-mega__ap-toggle-btn:hover {
  background: var(--haus-bg);
  color: var(--haus-navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* 5-column grid */
.haus-mega__ap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-left: 1px solid var(--haus-border);
}

.haus-mega__ap-col {
  padding: 0 24px;
  border-right: 1px solid var(--haus-border);
}

/* Promotions reuses the All Products panel, laid out on 4 columns. */
.haus-mega--promotions .haus-mega__ap-grid {
  grid-template-columns: repeat(4, 1fr);
}

.haus-mega__ap-heading {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--haus-navy);
  text-transform: uppercase;
  margin-bottom: 14px;
  transition: color var(--haus-transition);
}

.haus-mega__ap-heading:hover {
  color: var(--haus-teal);
}

.haus-mega__ap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.haus-mega__ap-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--haus-radius-sm);
  font-size: 13.5px;
  color: var(--haus-text);
  transition: background var(--haus-transition), color var(--haus-transition);
}

.haus-mega__ap-link:hover,
.haus-mega__ap-link:focus-visible {
  background: var(--haus-teal-bg);
  color: var(--haus-teal-dark);
  outline: none;
}

/* Thumbnail image (shown in "thumbnails" view). Items carry either the
   product-owner's 3D icon (white-background render, shown whole) or, where no
   icon exists yet, the product photo — both render as a 44px contain box so the
   list lines up; the icons' white background disappears into the panel via
   multiply, so no cut-outs are needed. */
.haus-mega__ap-thumb img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
  border: none;
  mix-blend-mode: multiply;
}

/* Icon (shown in "icons" view) */
.haus-mega__ap-icon .haus-icon {
  width: 22px;
  height: 22px;
  color: var(--haus-teal);
}

/* Toggle visibility */
.haus-mega--all-products[data-view="thumbnails"] .haus-mega__ap-icon  { display: none; }
.haus-mega--all-products[data-view="thumbnails"] .haus-mega__ap-thumb { display: block; }
.haus-mega--all-products[data-view="icons"]      .haus-mega__ap-thumb { display: none; }
.haus-mega--all-products[data-view="icons"]      .haus-mega__ap-icon  { display: block; }

/* Default: thumbnails */
.haus-mega--all-products .haus-mega__ap-icon  { display: none; }
.haus-mega--all-products .haus-mega__ap-thumb { display: block; }


/* ==================================================================
   SIDEBAR PANEL (Apparel / Gifts)
   ================================================================== */

.haus-mega--sidebar {
  display: none; /* overridden to grid when open */
}

/* .haus-mega is moved to be a direct child of .haus-nav by mega-menu.js
   (see .haus-mega.is-open above), so this must key off a class on the
   panel itself too, not the old .haus-nav__item.is-open > ... ancestor
   relationship. */
.haus-mega--sidebar.is-open {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "sidebar panels"
    "footer  footer";
  border-radius: 0 0 var(--haus-radius) var(--haus-radius);
}

/* ── Sidebar ──────────────────────────────── */
.haus-mega__sidebar {
  grid-area: sidebar;
  background: var(--haus-sidebar-bg);
  border-right: 1px solid var(--haus-border);
  padding: 24px 20px;
  border-radius: 0 0 0 var(--haus-radius);
  display: flex;
  flex-direction: column;
}

.haus-mega__sidebar-header {
  margin-bottom: 16px;
}

.haus-mega__sidebar-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haus-teal);
  margin-bottom: 4px;
}

.haus-mega__sidebar-sub {
  font-size: 12.5px;
  color: var(--haus-muted);
  margin: 0;
  line-height: 1.4;
}

.haus-mega__sidebar-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.haus-mega__sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--haus-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--haus-text);
  transition: background var(--haus-transition), color var(--haus-transition);
  border: 1px solid transparent;
}

.haus-mega__sidebar-link:hover,
.haus-mega__sidebar-link:focus-visible {
  background: var(--haus-bg);
  color: var(--haus-navy);
  border-color: var(--haus-border);
  outline: none;
}

.haus-mega__sidebar-item.is-active .haus-mega__sidebar-link,
.haus-mega__sidebar-link[aria-expanded="true"] {
  background: var(--haus-teal);
  color: #fff;
  border-color: var(--haus-teal);
}

.haus-mega__sidebar-item.is-active .haus-mega__sidebar-icon,
.haus-mega__sidebar-link[aria-expanded="true"] .haus-mega__sidebar-icon {
  color: #fff;
}

.haus-mega__sidebar-icon {
  flex-shrink: 0;
  color: var(--haus-muted);
  transition: color var(--haus-transition);
}

/* Uploaded icon image: drawn as a mask filled with the link's text colour,
   so it greys out and turns white on the active item like the built-in SVGs. */
.haus-mega__sidebar-icon--img {
  background-color: currentColor;
  -webkit-mask: var(--haus-icon-img) center / contain no-repeat;
          mask: var(--haus-icon-img) center / contain no-repeat;
}

.haus-mega__sidebar-name {
  flex: 1;
}

.haus-mega__sidebar-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  padding: 2px 7px;
  border-radius: 20px;
  color: inherit;
}

.haus-mega__sidebar-item:not(.is-active) .haus-mega__sidebar-count {
  background: var(--haus-teal-bg);
  color: var(--haus-teal-text);
}

/* "View all" link at bottom of sidebar */
.haus-mega__sidebar-viewall {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--haus-teal);
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
  background: var(--haus-bg);
  letter-spacing: 0.04em;
  transition: background var(--haus-transition), color var(--haus-transition);
}

.haus-mega__sidebar-viewall:hover {
  background: var(--haus-teal);
  color: #fff;
  border-color: var(--haus-teal);
}


/* ── Panels wrap ──────────────────────────── */
/* Content column can be genuinely tall (configurator option-groups,
   long descriptions, etc.) with no natural ceiling, so this is the one
   place that caps and scrolls the whole hero+content/details block as a
   single unit — that keeps the hero image's stretched height and the
   text column's height tied to the exact same number instead of two
   independent caps drifting apart, and stops the panel from running
   past the bottom of the viewport on shorter screens. */
.haus-mega__panels-wrap {
  grid-area: panels;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - var(--haus-nav-h) - 84px);
}

/* Individual panel */
.haus-mega__panel {
  display: none;
  /* minmax(0,1fr) — not calc(100% - <vw hack>) — so the hero column
     always eats exactly the space the fixed-width columns don't, at
     any viewport width, instead of a formula tuned for one screen size
     that leaves a dead gap on every other one. The minmax(0, …) floor
     stops the hero's own image/flex content from blowing the track out
     past 1fr. */
  grid-template-columns: minmax(0, 1fr) 200px 320px;
  gap: 0;
  height: 100%;
}

.haus-mega__panel.is-active,
.haus-mega__panel:not([hidden]) {
  display: grid;
  animation: hausFadeIn 0.2s ease both;
}

@keyframes hausFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .haus-mega__panel { animation: none; }
}


/* ── Hero image ───────────────────────────── */
.haus-mega__hero {
  position: relative;
  overflow: hidden;
}

.haus-mega__hero-link {
  display: block;
  height: 100%;
}

.haus-mega__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.haus-mega__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,30,50,0.82) 0%, rgba(20,30,50,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
}

.haus-mega__hero-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haus-teal);
  margin-bottom: 6px;
}

.haus-mega__hero-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.2;
}

.haus-mega__hero-sub {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 16px;
  line-height: 1.4;
}

.haus-mega__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: var(--haus-radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  transition: background var(--haus-transition), border-color var(--haus-transition);
  align-self: flex-start;
}

.haus-mega__hero-link:hover .haus-mega__hero-cta {
  background: var(--haus-teal);
  border-color: var(--haus-teal);
}


/* ── Thumbnails column ────────────────────── */
.haus-mega__thumbs {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--haus-border);
}

.haus-mega__thumb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--haus-border);
}

.haus-mega__thumb-item:last-child {
  border-bottom: none;
}

.haus-mega__thumb-item img {
  width: 100%;
  height: 55%;
  object-fit: cover;
  display: block;
}

.haus-mega__thumb-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  flex: 1;
}

.haus-mega__thumb-feat .haus-icon {
  color: var(--haus-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.haus-mega__thumb-feat strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--haus-navy);
}

.haus-mega__thumb-feat p {
  font-size: 11.5px;
  color: var(--haus-muted);
  margin: 2px 0 0;
  line-height: 1.3;
}


/* ── Details column ───────────────────────── */
.haus-mega__details {
  padding: 24px 20px;
  border-left: 1px solid var(--haus-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.haus-mega__badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--haus-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  align-self: flex-start;
}

.haus-mega__category-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--haus-teal);
}

.haus-mega__details-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--haus-navy);
  margin: 0;
  line-height: 1.15;
}

.haus-mega__details-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--haus-teal);
  margin-top: 8px;
  border-radius: 2px;
}

.haus-mega__details-desc {
  font-size: 13px;
  color: var(--haus-text);
  line-height: 1.6;
  margin: 0;
}

.haus-mega__details-desc a {
  color: var(--haus-teal);
  font-weight: 600;
}

/* Color swatches */
.haus-mega__colors-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haus-muted);
  margin-bottom: 8px;
}

.haus-mega__colors-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.haus-mega__color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--haus-bg);
  box-shadow: 0 0 0 1.5px var(--haus-border);
  cursor: default;
  transition: box-shadow var(--haus-transition);
}

.haus-mega__color-swatch:hover {
  box-shadow: 0 0 0 2px var(--haus-teal);
}

/* A swatch becomes an <a> once it has a link (the plain <span> is kept when
   there is nothing to link to), so give the linked variant link affordances. */
a.haus-mega__color-swatch {
  display: block;
  cursor: pointer;
  text-decoration: none;
}

/* Fit info block */
.haus-mega__fit-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--haus-sidebar-bg);
  border-radius: var(--haus-radius-sm);
  border: 1px solid var(--haus-border);
}

.haus-mega__fit-info .haus-icon {
  color: var(--haus-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.haus-mega__fit-info strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--haus-navy);
}

.haus-mega__fit-info p {
  font-size: 12px;
  color: var(--haus-muted);
  margin: 3px 0 0;
  line-height: 1.4;
}

/* Feature badges grid */
.haus-mega__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.haus-mega__badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  background: var(--haus-sidebar-bg);
  border-radius: var(--haus-radius-sm);
  border: 1px solid var(--haus-border);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--haus-text);
}

.haus-mega__badge-item .haus-icon {
  color: var(--haus-teal);
  width: 18px;
  height: 18px;
}

/* Primary CTA button */
.haus-mega__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: var(--haus-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--haus-radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--haus-transition);
  margin-top: auto;
  text-decoration: none;
}

.haus-mega__cta-btn:hover,
.haus-mega__cta-btn:focus-visible {
  background: var(--haus-teal-dark);
  outline: none;
}

.haus-mega__cta-btn:focus-visible {
  outline: 2px solid var(--haus-teal);
  outline-offset: 3px;
}


/* ── Footer bar ───────────────────────────── */
.haus-mega__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--haus-sidebar-bg);
  border-top: 1px solid var(--haus-border);
  border-radius: 0 0 var(--haus-radius) var(--haus-radius);
}

.haus-mega__footer-prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--haus-text);
}

.haus-mega__footer-prompt .haus-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--haus-teal);
  width: 28px;
  height: 28px;
  background: var(--haus-teal-bg);
  border-radius: 50%;
  padding: 5px;
}

.haus-mega__footer-prompt strong {
  display: block;
  font-weight: 700;
  color: var(--haus-navy);
}

.haus-mega__footer-prompt p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--haus-muted);
}

.haus-mega__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haus-teal);
  white-space: nowrap;
  transition: color var(--haus-transition);
}

.haus-mega__footer-link:hover {
  color: var(--haus-teal-dark);
}


/* ==================================================================
   GIFTS PANEL (hero + sizes grid)
   ================================================================== */

.haus-mega--gifts .haus-mega__panel {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.haus-mega__hero--gifts .haus-mega__hero-overlay {
  justify-content: flex-end;
}

.haus-mega__hero-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--haus-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Hero feature chips */
.haus-mega__hero-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.haus-mega__hero-feat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Popular sizes */
.haus-mega__sizes {
  padding: 24px;
  border-left: 1px solid var(--haus-border);
}

.haus-mega__sizes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.haus-mega__sizes-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haus-teal);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--haus-teal);
}

.haus-mega__sizes-viewall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--haus-muted);
  transition: color var(--haus-transition);
}

.haus-mega__sizes-viewall:hover {
  color: var(--haus-teal);
}

.haus-mega__sizes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.haus-mega__size-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
  overflow: hidden;
  transition: border-color var(--haus-transition), box-shadow var(--haus-transition);
}

/* Last size item spans full width (24"×36") */
.haus-mega__sizes-grid .haus-mega__size-item:last-child {
  grid-column: 1 / -1;
}

.haus-mega__size-item:hover {
  border-color: var(--haus-teal);
  box-shadow: 0 2px 8px rgba(44,189,185,0.15);
}

.haus-mega__size-item img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

.haus-mega__size-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--haus-text);
  padding: 4px 0 8px;
}

/* Gift footer features */
.haus-mega__gift-features {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: var(--haus-sidebar-bg);
  border-top: 1px solid var(--haus-border);
  flex-wrap: wrap;
}

.haus-mega__gift-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}

.haus-mega__gift-feat .haus-icon {
  color: var(--haus-teal);
  flex-shrink: 0;
  margin-top: 2px;
}

.haus-mega__gift-feat-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--haus-navy);
}

.haus-mega__gift-feat-desc {
  display: block;
  font-size: 11px;
  color: var(--haus-muted);
}


/* ==================================================================
   SIGNAGE PANEL (3-column grouped)
   ================================================================== */

.haus-mega--signage {
  padding: 0;
}

.haus-mega__sign-columns {
  display: grid;
  /* Ratios measured off the approved design (SIGNAGE MEGA MENU.png, which
     is a 1.5x export): column widths 590 / 495 / 520 / 371 device px. */
  grid-template-columns: 1.59fr 1.33fr 1.4fr 1fr;
  gap: 0;
}

.haus-mega__sign-col {
  padding: 28px 24px;
  border-right: 1px solid var(--haus-border);
}

.haus-mega__sign-col:last-child {
  border-right: none;
}

/* Group header */
.haus-mega__sign-group-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.haus-mega__sign-group-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--haus-teal-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--haus-teal);
}

.haus-mega__sign-group-icon .haus-icon {
  width: 20px;
  height: 20px;
}

.haus-mega__sign-group-header strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--haus-navy);
  margin-bottom: 3px;
}

.haus-mega__sign-group-header p {
  font-size: 12px;
  color: var(--haus-muted);
  margin: 0;
  line-height: 1.4;
}

/* Featured image cards (col 1) */
.haus-mega__sign-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--haus-border);
}

.haus-mega__sign-card:last-of-type {
  border-bottom: none;
}

.haus-mega__sign-card img {
  width: 130px;
  height: 100px;
  object-fit: contain;
  padding: 8px;
  background: var(--haus-teal-bg);   /* tinted tile behind the 3D icon (mockup) */
  border-radius: var(--haus-radius-sm);
  mix-blend-mode: multiply;          /* the icon's white background takes the tile colour */
  flex-shrink: 0;
}

.haus-mega__sign-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--haus-navy);
  margin-bottom: 3px;
}

.haus-mega__sign-card-body p {
  font-size: 12.5px;
  color: var(--haus-muted);
  margin: 0 0 8px;
}

.haus-mega__sign-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haus-teal);
  transition: color var(--haus-transition);
}

.haus-mega__sign-card-cta:hover {
  color: var(--haus-teal-dark);
}

/* List items (col 2 & 3) */
.haus-mega__sign-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.haus-mega__sign-list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--haus-radius-sm);
  transition: background var(--haus-transition);
}

.haus-mega__sign-list-link:hover,
.haus-mega__sign-list-link:focus-visible {
  background: var(--haus-teal-bg);
  outline: none;
}

.haus-mega__sign-list-link img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  border: none;
  mix-blend-mode: multiply;          /* 3D icon on white: blends into the list row */
  flex-shrink: 0;
}

.haus-mega__sign-list-link div {
  flex: 1;
}

.haus-mega__sign-list-link strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--haus-navy);
}

.haus-mega__sign-list-link p {
  font-size: 12px;
  color: var(--haus-muted);
  margin: 2px 0 0;
}

.haus-mega__sign-list-link .haus-icon {
  color: var(--haus-light);
  flex-shrink: 0;
  /* haus_icon('chevron') is a down-pointing V (used elsewhere for the
     nav trigger's open/close indicator); here it points to a link the
     user can follow, so rotate it to point right instead. */
  transform: rotate(-90deg);
}

/* View all link (under list) */
.haus-mega__sign-viewall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haus-teal);
  padding: 6px 8px;
  transition: color var(--haus-transition);
}

.haus-mega__sign-viewall:hover {
  color: var(--haus-teal-dark);
}

/* NEW badge card */
/* Column 4 carries only the highlighted product, so it has no group header;
   the card is nudged down to line up with the other columns' first item and
   keeps its natural height rather than stretching to the column. */
.haus-mega__sign-col--new {
  display: flex;
  align-items: flex-start;
  padding: 28px;
}

.haus-mega__sign-new-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 28px;
  padding: 20px 22px 22px;
  background: var(--haus-sidebar-bg);
  border-radius: var(--haus-radius);
  border: 1px solid var(--haus-border);
  transition: border-color var(--haus-transition), box-shadow var(--haus-transition);
}

.haus-mega__sign-new-card:hover {
  border-color: var(--haus-teal);
  box-shadow: 0 2px 8px rgba(44,189,185,0.12);
}

.haus-mega__sign-new-card img {
  width: 100%;
  height: auto;
  max-height: 210px;
  margin: 4px auto 2px;
  object-fit: contain;
  border-radius: 6px;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}

/* Title/description/CTA sit below the image in the 4-column layout */
.haus-mega__sign-new-body {
  width: 100%;
}

.haus-mega__sign-new-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--haus-teal);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 3px;
  margin-bottom: 5px;
}

.haus-mega__sign-new-card strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--haus-navy);
  margin-bottom: 6px;
}

.haus-mega__sign-new-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--haus-muted);
  margin: 0 0 12px;
}

/* Signage bottom features bar */
.haus-mega__sign-features {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: var(--haus-sidebar-bg);
  border-top: 1px solid var(--haus-border);
  border-radius: 0 0 var(--haus-radius) var(--haus-radius);
}

.haus-mega__sign-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--haus-border);
}

.haus-mega__sign-feat:last-child {
  border-right: none;
}

.haus-mega__sign-feat .haus-icon {
  color: var(--haus-teal);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--haus-teal-bg);
  border-radius: 50%;
  padding: 5px;
}

.haus-mega__sign-feat strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--haus-navy);
  margin-bottom: 2px;
}

.haus-mega__sign-feat p {
  font-size: 11.5px;
  color: var(--haus-muted);
  margin: 0;
  line-height: 1.4;
}


/* ==================================================================
   PANEL: CONFIGURATOR INNER (Invitations / Print / Labels)
   Rendered by haus_panel_configurator_inner() inside a .haus-mega__panel,
   same as haus_panel_apparel_inner()/haus_panel_gifts_inner() — the
   sidebar, hover-swap between sub-items, and outer grid are all already
   handled by the shared .haus-mega--sidebar / .haus-mega__panel rules
   above. .haus-mega__panel's own grid-template-columns is for the
   apparel-style 3-column layout, so this spans it as one wide cell and
   lays out hero | content itself.
   ================================================================== */

.haus-mega__cfg {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.haus-mega__cfg-hero {
  flex: 0 0 42%;
  padding: 24px;
  border-right: 1px solid var(--haus-border);
  display: flex;
  align-items: stretch;
}
.haus-mega__cfg-hero img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--haus-radius-sm);
}

.haus-mega__cfg-content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  /* No fixed max-height here on purpose: .haus-mega__cfg's
     align-items: stretch already makes this column match the hero
     image's height exactly (both stretch to .haus-mega__cfg's own
     height). overflow-y is just the safety valve if that shared height
     still isn't enough for the content — it scrolls in step with the
     hero rather than against an unrelated fixed number. */
  overflow-y: auto;
}

.haus-mega__cfg-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--haus-navy);
  margin: 0 0 10px;
}

.haus-mega__cfg-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--haus-text);
  margin: 0 0 6px;
}

.haus-mega__cfg-tagline {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--haus-teal);
  margin: 0 0 20px;
}

.haus-mega__cfg-group {
  margin-bottom: 22px;
}

.haus-mega__cfg-group-heading {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--haus-muted);
  margin-bottom: 10px;
}

.haus-mega__cfg-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.haus-mega__cfg-option {
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
  padding: 10px;
  background: var(--haus-bg);
}

/* Option cards render as <a> when a link is set and <div> when not; the
   anchor form needs the link chrome stripped and a hover cue added. */
a.haus-mega__cfg-option {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--haus-transition), box-shadow var(--haus-transition);
}

a.haus-mega__cfg-option:hover,
a.haus-mega__cfg-option:focus-visible {
  border-color: var(--haus-teal);
  box-shadow: 0 2px 8px rgba(44,189,185,0.12);
}
.haus-mega__cfg-option img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}
.haus-mega__cfg-option strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--haus-navy);
  margin-bottom: 2px;
}
.haus-mega__cfg-option p {
  font-size: 11.5px;
  color: var(--haus-muted);
  margin: 0;
  line-height: 1.4;
}

.haus-mega__cfg-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--haus-border);
}
.haus-mega__cfg-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.haus-mega__cfg-feature .haus-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--haus-teal);
}
.haus-mega__cfg-feature strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--haus-navy);
}
.haus-mega__cfg-feature p {
  font-size: 10.5px;
  color: var(--haus-muted);
  margin: 2px 0 0;
  line-height: 1.3;
}

.haus-mega__cfg .haus-mega__cta-btn {
  margin-top: 20px;
}


/* ==================================================================
   PANEL: LIST COLUMNS (Services / Labels)
   plain headed columns of links, no images
   ================================================================== */

.haus-mega--list-columns {
  display: none;
}
.haus-mega--list-columns.is-open {
  display: block;
}

.haus-mega__list-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 32px;
}

.haus-mega__list-col {
  padding: 0 24px;
  border-right: 1px solid var(--haus-border);
}
.haus-mega__list-col:first-child {
  padding-left: 0;
}
.haus-mega__list-col:last-child {
  border-right: none;
}

.haus-mega__list-col-heading {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--haus-navy);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--haus-border);
}

.haus-mega__list-col-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.haus-mega__list-col-items li {
  margin-bottom: 10px;
}

.haus-mega__list-col-link {
  font-size: 13px;
  color: var(--haus-text);
  transition: color var(--haus-transition);
}
.haus-mega__list-col-link:hover,
.haus-mega__list-col-link:focus-visible {
  color: var(--haus-teal);
}
.haus-mega__list-col-link.is-highlight {
  color: var(--haus-teal);
  font-weight: 700;
}


/* ==================================================================
   ACCESSIBILITY – FOCUS STYLES
   ================================================================== */

/* Ensure all interactive elements have visible focus rings */
.haus-mega a:focus-visible,
.haus-mega button:focus-visible {
  outline: 2px solid var(--haus-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link (add to your theme's header.php) */
.haus-skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--haus-teal);
  color: #fff;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 var(--haus-radius-sm) var(--haus-radius-sm);
  z-index: calc(var(--haus-z) + 10);
  transition: top 0.2s;
  text-decoration: none;
}

.haus-skip-link:focus {
  top: 0;
}


/* ==================================================================
   RESPONSIVE – Mobile (<= 1024px)
   Collapse to hamburger. Mega panel details are hidden;
   only sidebar list is shown in an accordion.
   ================================================================== */

@media (max-width: 1199px) {
  .haus-nav__menu {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  .haus-nav.is-mobile-open .haus-nav__menu {
    max-height: 100vh;
    overflow-y: auto;
  }

  .haus-nav__item {
    width: 100%;
    border-bottom: 1px solid var(--haus-border);
  }

  .haus-nav__link {
    width: 100%;
    padding: 14px 20px;
    border-radius: 0;
    justify-content: space-between;
  }

  /* On mobile, all megas become full-width accordions */
  .haus-mega,
  .haus-mega--sidebar.is-open {
    display: block;
    position: static;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  /* Hide complex panels on mobile – show only sidebar list */
  .haus-mega__panels-wrap,
  .haus-mega__footer,
  .haus-mega__sign-features,
  .haus-mega__ap-header,
  .haus-mega__ap-col + .haus-mega__ap-col + .haus-mega__ap-col,
  .haus-mega__ap-col + .haus-mega__ap-col + .haus-mega__ap-col ~ .haus-mega__ap-col {
    display: none;
  }

  .haus-mega--all-products {
    padding: 0;
  }

  .haus-mega__ap-grid {
    grid-template-columns: 1fr 1fr;
    border-left: none;
  }

  .haus-mega__sidebar {
    border-radius: 0;
    border-right: none;
    padding: 12px;
  }

  .haus-mega__sign-columns {
    grid-template-columns: 1fr;
  }

  .haus-mega__sign-col {
    border-right: none;
    border-bottom: 1px solid var(--haus-border);
    padding: 16px;
  }

  /* Hamburger button (add to your theme header) */
  .haus-nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: var(--haus-nav-h);
  }
}

@media (min-width: 1200px) {
  .haus-nav__hamburger { display: none; }
}


/* ==================================================================
   SPLIT-NAV LAYOUT  (left nav | centred logo | right nav)
   ================================================================== */

/* ── Outer header wrapper ─────────────────────────────────────────── */
.haus-header {
  background: var(--haus-bg);
  border-bottom: 1px solid var(--haus-border);
  z-index: var(--haus-z);
  position: relative;
}

.haus-header__inner {
  width: 100%;
}

/* ── Nav: full-width positioning context for mega panels ─────────── */
.haus-nav {
  position: relative;       /* mega panels absolutely positioned here  */
  background: transparent;
  border-bottom: none;      /* border already on .haus-header           */
  z-index: auto;
}

/* ── Inner flex row: left | logo | right | utils ─────────────────── */
.haus-nav__inner {
  display: flex;
  align-items: center;
  height: var(--haus-nav-h);
  padding: 0 24px;
  max-width: 1600px;
  margin: 0 auto;
  position: static;         /* NOT a positioning context                */
}

/* ── Left / Right side containers ───────────────────────────────── */
.haus-nav__side {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 100%;
  position: static;         /* NOT a positioning context                */
  min-width: 0;             /* allow flex children to shrink            */
}

/* Left items push toward the logo (right-aligned) */
.haus-nav__side--left  { justify-content: flex-end; }

/* Right items start from the logo (left-aligned) */
.haus-nav__side--right { justify-content: flex-start; }

/* ── Nav menu within each side ───────────────────────────────────── */
.haus-nav__menu {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  position: static;         /* NOT a positioning context                */
}

/* Each top-level item is positioned so its plain .haus-dropdown anchors
   correctly beneath it; .haus-mega panels are moved to be direct children
   of .haus-nav by JS instead, so they still span the full nav width. */
.haus-nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* ── Centred logo ────────────────────────────────────────────────── */
.haus-nav__logo {
  flex-shrink: 0;
  padding: 0 var(--haus-logo-pad);
  display: flex;
  align-items: center;
  justify-content: center;
}

.haus-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.haus-logo__img {
  max-height: var(--haus-logo-max-h);
  width: auto;
  display: block;
}

.haus-logo--text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--haus-navy);
}

/* ==================================================================
   HEADER ACTIONS — Custom Quote · Search · Wishlist · Cart
   Colours are the LIVE header's (#4C9F9C / #3a8a87 / #3f3f3f — the
   theme's HausPrint teal), not the mega-menu palette variables, so
   the row matches hausprint.shop 1:1.
   ================================================================== */

.haus-nav__utils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-wrap: nowrap;
}

.haus-nav__act {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.haus-nav__utils .custom-quote-wrap {
  margin-right: 2px;
}

.haus-nav__utils .nav-quote-btn {
  display: inline-flex;
  align-items: center;
  background: #4C9F9C;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  line-height: 1;
}

.haus-nav__utils .nav-quote-btn:hover {
  background: #3a8a87;
  color: #fff;
  transform: translateY(-1px);
}

.haus-nav__act-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  color: #3f3f3f;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.haus-nav__act-link .header-icon {
  font-size: 18px;
  color: inherit;
  transition: color 0.3s;
}

.haus-nav__act-link:hover .header-icon {
  color: #4c9f9c;
}

.haus-nav__count {
  position: absolute;
  top: 0;
  left: 60%;
  width: 18px;
  height: 18px;
  background: #4c9f9c;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
}

/* ── Account menu ──────────────────────────────────────────────────────
   The toggle is a <button>, so it needs the anchor styling reset onto it.
   The panel hangs off .haus-nav__account, which is the positioning context. */
.haus-nav__account {
  position: relative;
}

.haus-nav__account-toggle {
  background: none;
  border: 0;
  font: inherit;
}

/* Initials avatar shown in place of the icon once signed in. */
.haus-nav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4c9f9c;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.haus-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--haus-z, 1000);
  min-width: 232px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(20, 24, 30, 0.14);
}

.haus-account-menu[hidden] {
  display: none;
}

.haus-account-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.haus-account-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: #3f3f3f;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.haus-account-menu__link:hover,
.haus-account-menu__link:focus {
  background: #f4faf9;
  color: #4c9f9c;
}

.haus-account-menu__link .header-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: inherit;
}

.haus-account-menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.haus-account-menu__label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.haus-account-menu__sub {
  font-size: 11px;
  line-height: 1.3;
  color: #8a8f96;
}

/* Log Out sits below a rule, as its own group. */
.haus-account-menu__item--logout {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #ededed;
}

/* ── Account block in the mobile drawer ───────────────────────────────── */
.haus-mobile-drawer__account {
  /* Horizontal padding matches .haus-mobile-drawer__footer (16px 20px); the
     block is its sibling, not a child of the scrolling body. */
  padding: 14px 20px 4px;
  border-top: 1px solid #ededed;
}

.haus-mobile-drawer__account-title {
  margin: 0 0 6px;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8f96;
}

.haus-mobile-drawer__account-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.haus-mobile-drawer__account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: #3f3f3f;
  font-size: 14px;
  text-decoration: none;
}

.haus-mobile-drawer__account-link:hover,
.haus-mobile-drawer__account-link:focus {
  color: #4c9f9c;
}

.haus-search-panel {
  position: absolute;
  left: var(--haus-mega-inset);
  right: var(--haus-mega-inset);
  top: var(--haus-nav-h);
  z-index: calc(var(--haus-z) + 20);
  background: var(--haus-bg);
  border: 1px solid var(--haus-border);
  border-top: none;
  border-radius: 0 0 var(--haus-radius) var(--haus-radius);
  box-shadow: var(--haus-shadow);
  padding: 18px 24px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--haus-transition), transform var(--haus-transition);
}

.haus-search-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.haus-search-panel__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.haus-search-panel__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--haus-muted);
}

.haus-search-panel__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: none;
  border-bottom: 2px solid var(--haus-border);
  background: transparent;
  font-size: 16px;
  color: var(--haus-navy);
  outline: none;
}

.haus-search-panel__input:focus {
  border-bottom-color: var(--haus-teal);
}

.haus-search-panel__submit {
  height: 40px;
  padding: 0 22px;
  border: none;
  border-radius: var(--haus-radius-sm);
  background: #4C9F9C;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.haus-search-panel__submit:hover {
  background: #3a8a87;
}

.haus-search-panel__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--haus-muted);
  border-radius: var(--haus-radius-sm);
  cursor: pointer;
}

.haus-search-panel__close:hover {
  color: var(--haus-navy);
  background: var(--haus-teal-bg);
}

.haus-search-panel__close .haus-icon {
  width: 18px;
  height: 18px;
}

.haus-search-panel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Live product suggestions (QA #10) ──────────────────────────────
   The markup inside comes from the Pangja theme's popup_search_result
   endpoint (ul.items-list > li.item > .item-thumbnail + .item-meta),
   so these selectors deliberately match the THEME's class names. The
   theme's own styles for them are scoped under #haru-search-popup and
   never reach this panel, so everything is restated here. */
.haus-search-panel__results {
  max-width: 760px;
  margin: 14px auto 0;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--haus-border);
}

.haus-search-panel__results[hidden] {
  display: none;
}

.haus-search-panel__results .items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.haus-search-panel__results .item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--haus-border);
}

.haus-search-panel__results .item:last-child {
  border-bottom: none;
}

.haus-search-panel__results .item-thumbnail {
  flex: 0 0 48px;
  line-height: 0;
}

.haus-search-panel__results .item-thumbnail img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.haus-search-panel__results .item-meta a {
  color: var(--haus-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.haus-search-panel__results .item-meta a:hover,
.haus-search-panel__results .item-meta a:focus {
  color: var(--haus-teal);
  text-decoration: underline;
}

/* A post date carries no meaning on a product suggestion. */
.haus-search-panel__results .publish-date {
  display: none;
}

.haus-search-panel__results .view-more {
  padding: 10px 4px;
  text-align: center;
}

.haus-search-panel__results .view-more a {
  color: var(--haus-teal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.haus-search-panel__results .view-more a:hover,
.haus-search-panel__results .view-more a:focus {
  text-decoration: underline;
}

.haus-search-panel__results .ajax-not-found,
.haus-search-panel__hint {
  margin: 0;
  padding: 14px 4px;
  color: var(--haus-muted, #6b7280);
  font-size: 13px;
  text-align: center;
}


/* ── Hamburger button (visible on mobile) ───────────────────────── */
.haus-nav__hamburger-btn {
  display: none;              /* shown only on mobile                    */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--haus-radius-sm);
  margin-left: auto;
  color: var(--haus-navy);
  transition: background var(--haus-transition);
}

.haus-nav__hamburger-btn:hover {
  background: var(--haus-teal-bg);
}

.haus-hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.haus-nav__hamburger-btn[aria-expanded="true"] .haus-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.haus-nav__hamburger-btn[aria-expanded="true"] .haus-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.haus-nav__hamburger-btn[aria-expanded="true"] .haus-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mega panel: absolutely positioned from .haus-nav bottom ─────── */
.haus-mega {
  left: var(--haus-mega-inset);
  right: var(--haus-mega-inset);
  top: var(--haus-nav-h);    /* always from nav bottom, not item bottom  */
}


/* ==================================================================
   PANGJA THEME OVERRIDES
   Prevent the parent theme from clipping our mega panels.
   ================================================================== */

.haru-header,
.haru-header-wrap,
.haru-header-nav-wrap,
#masthead,
.site-header,
.haus-header {
  overflow: visible !important;
}

/* Hide Pangja's original header nav once ours is active.
   Only applies when body has our class (added by functions.php). */
.has-haus-mega-menu .haru-page-header,
.has-haus-mega-menu .haru-header:not(.haus-header),
.has-haus-mega-menu .haru-main-menu:not(.haus-nav) {
  display: none !important;
}


/* ==================================================================
   MOBILE – SPLIT NAV (override earlier mobile block)
   ================================================================== */

@media (max-width: 1199px) {

  /* Show hamburger, hide desktop nav sides */
  .haus-nav__hamburger-btn {
    display: flex;
  }

  .haus-nav__side {
    display: none;
  }

  /* Nav inner: logo + hamburger only on mobile */
  .haus-nav__inner {
    justify-content: space-between;
  }

  .haus-nav__logo {
    padding: 0;
  }

  /* Mega panels: completely hidden on mobile (drawer used instead) */
  .haus-mega {
    display: none !important;
  }

  /* Mobile header = hamburger · logo · search · cart (as on the live site).
     The Custom Quote button and the wishlist live in the drawer instead;
     keeping them here pushed the row past the viewport on 360–390 px
     phones (horizontal scroll, cart clipped). */
  .haus-nav__utils .custom-quote-wrap,
  .haus-nav__utils .haus-nav__wishlist {
    display: none;
  }

  .haus-nav__utils {
    margin-left: 4px;
    gap: 0;
  }

  .haus-nav__act-link {
    padding: 6px 4px;
  }
}

@media (min-width: 1200px) {
  /* Desktop: hide hamburger, show both nav sides */
  .haus-nav__hamburger-btn { display: none; }
  .haus-nav__side { display: flex; }
}


/* ==================================================================
   MOBILE DRAWER
   ================================================================== */

.haus-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: calc(var(--haus-z) + 50);
}

.haus-mobile-backdrop.is-open {
  display: block;
}

.haus-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--haus-bg);
  z-index: calc(var(--haus-z) + 100);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.haus-mobile-drawer.is-open {
  transform: translateX(0);
}

/* Tablets get a roomier panel than phones. */
@media (min-width: 600px) {
  .haus-mobile-drawer {
    width: min(400px, 85vw);
  }
}

.haus-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--haus-border);
  flex-shrink: 0;
}

.haus-mobile-drawer__close {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--haus-radius-sm);
  color: var(--haus-text);
  transition: background var(--haus-transition);
}

.haus-mobile-drawer__close:hover {
  background: var(--haus-teal-bg);
  color: var(--haus-teal);
}

.haus-mobile-drawer__body {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

/* Drawer menu: one accordion per top-level item. The row is the item's own link
   plus a toggle button; the panel under it holds the same products the desktop
   mega panel lists, grouped under collapsible headings. */
.haus-mobile-menu,
.haus-mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.haus-mobile-menu__item {
  margin: 0;
  border-bottom: 1px solid var(--haus-border);
}

.haus-mobile-menu__row {
  display: flex;
  align-items: stretch;
}

.haus-mobile-menu__link {
  flex: 1;
  display: block;
  min-height: 48px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--haus-navy);
  text-decoration: none;
  transition: color var(--haus-transition), background var(--haus-transition);
}

.haus-mobile-menu__link:hover,
.haus-mobile-menu__link:focus-visible {
  color: var(--haus-teal);
  background: var(--haus-teal-bg);
}

.haus-mobile-menu__toggle {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--haus-border);
  background: none;
  color: var(--haus-navy);
  cursor: pointer;
  transition: color var(--haus-transition), background var(--haus-transition);
}

.haus-mobile-menu__toggle:hover,
.haus-mobile-menu__toggle:focus-visible,
.haus-mobile-menu__toggle[aria-expanded="true"] {
  color: var(--haus-teal);
  background: var(--haus-teal-bg);
}

.haus-mobile-menu__toggle .haus-icon {
  width: 14px;
  height: 8px;
  transition: transform var(--haus-transition);
}

.haus-mobile-menu__toggle[aria-expanded="true"] .haus-icon {
  transform: rotate(180deg);
}

.haus-mobile-menu__sub {
  padding: 4px 0 10px;
  background: #f7f9fa;
  border-top: 1px solid var(--haus-border);
}

.haus-mobile-menu__sub[hidden] {
  display: none;
}

.haus-mobile-menu__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.haus-mobile-menu__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 20px 11px 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--haus-text);
  text-decoration: none;
  transition: color var(--haus-transition), background var(--haus-transition);
}

.haus-mobile-menu__list a:hover,
.haus-mobile-menu__list a:focus-visible {
  color: var(--haus-teal);
  background: var(--haus-teal-bg);
}

/* Per-link product thumbnail / category icon, same artwork as the desktop panels. */
.haus-mobile-menu__thumb,
.haus-mobile-menu__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.haus-mobile-menu__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.haus-mobile-menu__thumb img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.haus-mobile-menu__icon {
  padding: 7px;
  color: var(--haus-teal);
  background: var(--haus-teal-bg);
  border-radius: 8px;
  box-sizing: border-box;
}

.haus-mobile-menu__icon--img {
  padding: 0;
  background-color: var(--haus-teal);
  -webkit-mask: var(--haus-icon-img) center / 22px no-repeat;
          mask: var(--haus-icon-img) center / 22px no-repeat;
}

.haus-mobile-menu__list a.is-view-all {
  font-weight: 700;
  color: var(--haus-teal);
}

.haus-mobile-menu__label {
  flex: 1;
  min-width: 0;
}

/* Product groups (All Products columns, Signage groups, Services columns). */
.haus-mobile-menu__group {
  border-top: 1px solid var(--haus-border);
}

.haus-mobile-menu__group:first-child {
  border-top: 0;
}

.haus-mobile-menu__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haus-navy);
  cursor: pointer;
  list-style: none;
}

.haus-mobile-menu__group summary::-webkit-details-marker {
  display: none;
}

.haus-mobile-menu__group summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--haus-transition);
}

.haus-mobile-menu__group[open] > summary {
  color: var(--haus-teal);
}

.haus-mobile-menu__group[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.haus-mobile-menu__group summary:focus-visible {
  outline: 2px solid var(--haus-teal);
  outline-offset: -2px;
}

.haus-mobile-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--haus-border);
  flex-shrink: 0;
}

.haus-mobile-drawer__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  background: var(--haus-teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--haus-radius-sm);
  text-decoration: none;
  transition: background var(--haus-transition);
}

.haus-mobile-drawer__cart:hover {
  background: var(--haus-teal-dark);
}

/* ── Drawer: search field ──────────────────────────────────────── */
.haus-mobile-drawer__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 20px 12px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
}

.haus-mobile-drawer__search-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--haus-navy);
  outline: none;
}

.haus-mobile-drawer__search-submit {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--haus-muted);
  cursor: pointer;
}

.haus-mobile-drawer__search-submit .haus-icon {
  width: 18px;
  height: 18px;
}

/* Drawer: live suggestions reuse the desktop panel's result styles. */
.haus-mobile-drawer__results.haus-search-panel__results {
  max-width: none;
  margin: 0 20px 12px;
  max-height: 50vh;
}

/* ── Drawer: Custom Quote button — verbatim from the live
      Customizer CSS (.nav-menu-quote-btn) ─────────────────────── */
.nav-menu-quote-wrap {
  padding: 16px 20px 8px;
  text-align: center;
}

.nav-menu-quote-btn {
  display: block;
  background: #4C9F9C;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 6px;
  text-align: center;
  transition: background 0.2s;
}

.nav-menu-quote-btn:hover {
  background: #3a8a87;
  color: #fff;
}

/* ── Drawer: footer row (wishlist + cart side by side) ─────────── */
.haus-mobile-drawer__footer {
  display: flex;
  gap: 10px;
}

.haus-mobile-drawer__wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 12px;
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
  color: var(--haus-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--haus-transition), border-color var(--haus-transition);
}

.haus-mobile-drawer__wishlist:hover {
  color: var(--haus-teal);
  border-color: var(--haus-teal);
}

.haus-mobile-drawer__wishlist .haus-icon {
  width: 18px;
  height: 18px;
}

.haus-mobile-drawer__footer .haus-mobile-drawer__cart {
  flex: 1;
  width: auto;
}

/* ── Desktop 1200–1599px: fit 4 + 4 nav items, the centred logo and the
      actions row (Custom Quote · search · wishlist · cart) on one line.
      The two nav sides shared the space equally, but the left group
      ("All Products … Invitations") is wider than the right one, so it
      clipped off-screen while the right group ran under the quote button
      (1280: 315px per side for ~360px of items). Below 1600 the sides
      size to their content and the spacing tightens; the logo stays
      between them (a few px off exact centre). */
@media (min-width: 1200px) and (max-width: 1599px) {
  .haus-nav__side {
    flex: 1 1 auto;
  }

  .haus-nav__link {
    padding: 8px 8px;
    letter-spacing: 0.04em;
  }

  .haus-nav__logo {
    margin: 0 12px;
    padding: 0 16px;
  }

  .haus-nav__utils {
    margin-left: 8px;
    gap: 4px;
  }

  .haus-nav__utils .nav-quote-btn {
    padding: 8px 14px;
  }
}

/* ── 1200–1279px: the narrowest desktop band needs ~50px more — smaller
      link text and padding (the live theme header does the same at its
      narrowest desktop width). */
@media (min-width: 1200px) and (max-width: 1279px) {
  .haus-nav__link {
    padding: 8px 6px;
    font-size: 12px;
  }
}

/* ── Phones: the logo's desktop margins (40px each side) and the 24px inner
      padding pushed hamburger · search · cart past a 324–360px viewport
      (QA #33). */
@media (max-width: 1199px) {
  .haus-nav__logo {
    margin: 0;
  }
}

@media (max-width: 480px) {
  .haus-nav__inner {
    padding: 0 12px;
  }
}


/* ==================================================================
   REDESIGNED RIGHT-HAND PANELS (Invitations / Print / Labels)
   Rendered by haus_panel_layout_inner() for panels that have a layout
   set in wp-admin. The sidebar is untouched; these rules only style the
   content column. Layouts: category-grid, sizes-paper, option-cards,
   shape-grid.
   ================================================================== */

.haus-mega__lay {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Hero ─────────────────────────────────── */
.haus-mega__lay-hero {
  position: relative;
  margin: 0;
  border-radius: var(--haus-radius-sm);
  overflow: hidden;
  background: var(--haus-sidebar-bg);
  /* capped so hero + cards still fit a laptop-height panel */
  height: clamp(180px, 27vh, 300px);
}
.haus-mega__lay-hero picture,
.haus-mega__lay-hero img {
  display: block;
  width: 100%;
  height: 100%;
}
.haus-mega__lay-hero img { object-fit: cover; }

/* Text laid over the hero (e.g. Notepads) */
.haus-mega__lay-hero.has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,0) 62%);
}
.haus-mega__lay-hero-text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 36px;
  max-width: 42%;
  transform: translateY(-50%);
}

/* ── Intro: eyebrow / title / description ─── */
.haus-mega__lay-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haus-teal);
  margin-bottom: 4px;
}
.haus-mega__lay-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--haus-navy);
}
.haus-mega__lay-desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--haus-muted);
}
.haus-mega__lay-hero-text .haus-mega__lay-title { font-size: 30px; }
.haus-mega__lay-intro.is-label-only { text-align: center; }
.haus-mega__lay-intro.is-label-only .haus-mega__lay-eyebrow { margin: 0; }

/* ── Option groups ────────────────────────── */
.haus-mega__lay-groups { display: flex; flex-direction: column; gap: 18px; }
.haus-mega__lay-groups.is-split {
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}
.haus-mega__lay-groups.is-split > .haus-mega__lay-group {
  /* width in proportion to card count (floor of 3), so cards come out
     about the same size in both groups — 7 postcard sizes next to 4
     papers would otherwise be squeezed into half the width */
  flex: var(--haus-grow, 1) 1 0;
  min-width: 0;
  padding: 0 24px;
}
.haus-mega__lay-groups.is-split > .haus-mega__lay-group:first-child { padding-left: 0; }
.haus-mega__lay-groups.is-split > .haus-mega__lay-group:last-child  { padding-right: 0; }
.haus-mega__lay-groups.is-split > .haus-mega__lay-group + .haus-mega__lay-group {
  border-left: 1px solid var(--haus-border);
}
.haus-mega__lay-group { display: flex; flex-direction: column; gap: 12px; }
.haus-mega__lay-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
}
.haus-mega__lay-group-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--haus-navy); }
.haus-mega__lay-group-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--haus-teal-text);
  text-decoration: none;
  white-space: nowrap;
}
.haus-mega__lay-group-link .haus-icon { width: 14px; height: 14px; }
.haus-mega__lay-group-link:hover { color: var(--haus-teal-dark); }
.haus-mega__lay-group-sub { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--haus-muted); }

/* One row of cards; the template balances rows (7 -> 4 + 3) */
.haus-mega__lay-row {
  display: grid;
  grid-template-columns: repeat(var(--haus-cols, 4), minmax(0, 1fr));
  gap: 14px;
}

/* ── Cards (shared) ───────────────────────── */
.haus-mega__lay-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--haus-bg);
  border: 1px solid var(--haus-border);
  border-radius: var(--haus-radius-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--haus-transition), box-shadow var(--haus-transition), transform var(--haus-transition);
}
a.haus-mega__lay-card:hover,
a.haus-mega__lay-card:focus-visible {
  border-color: var(--haus-teal);
  box-shadow: 0 6px 18px rgba(26, 35, 50, .10);
  outline: none;
}
.haus-mega__lay-card-media { display: block; background: var(--haus-sidebar-bg); }
.haus-mega__lay-card-media img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  transition: transform .35s ease;
}
a.haus-mega__lay-card:hover .haus-mega__lay-card-media img { transform: scale(1.04); }
.haus-mega__lay-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 12px;
  flex: 1;
}
.haus-mega__lay-card-text { flex: 1; min-width: 0; }
.haus-mega__lay-card-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--haus-navy);
}
.haus-mega__lay-card-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--haus-muted); }
.haus-mega__lay-card-arrow { flex-shrink: 0; display: inline-flex; color: var(--haus-navy); }
.haus-mega__lay-card-arrow .haus-icon { width: 16px; height: 16px; }
.haus-mega__lay-card-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--haus-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* "size" cards: the product drawn to scale, not cropped */
.haus-mega__lay-card--size .haus-mega__lay-card-media img { object-fit: contain; padding: 10px; }

/* ── Category grid (Wedding, Holidays, …) ─── */
.haus-mega__lay--category-grid .haus-mega__lay-intro { margin-bottom: -4px; }

/* ── Option cards (Business Cards, Folders, …) */
.haus-mega__lay--option-cards .haus-mega__lay-card-media img { height: 150px; }
.haus-mega__lay--option-cards .haus-mega__lay-card-text strong { font-size: 14px; }
.haus-mega__lay--option-cards .haus-mega__lay-card-arrow { color: var(--haus-teal); }

/* ── Shape grid (Stickers, Roll Labels) ───── */
.haus-mega__lay--shape-grid .haus-mega__lay-card { background: var(--haus-sidebar-bg); }
.haus-mega__lay--shape-grid .haus-mega__lay-card-media { background: transparent; }
.haus-mega__lay--shape-grid .haus-mega__lay-card-media img { height: 150px; }
.haus-mega__lay--shape-grid .haus-mega__lay-card-body { justify-content: center; text-align: center; }
.haus-mega__lay--shape-grid .haus-mega__lay-card-text strong { font-size: 15px; }
.haus-mega__lay--shape-grid .haus-mega__lay-card-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.haus-mega__lay--shape-grid .haus-mega__lay-card-arrow { display: none; }

/* ── Sizes & paper (Postcards, Greeting, Thank You) */
.haus-mega__lay--sizes-paper .haus-mega__lay-card { text-align: center; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card-body { justify-content: center; padding: 8px 6px 10px; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card-arrow { display: none; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card-media img { height: 110px; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card--size {
  border-color: transparent;
  background: transparent;
}
.haus-mega__lay--sizes-paper .haus-mega__lay-card--size .haus-mega__lay-card-media { background: transparent; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card--size .haus-mega__lay-card-media img { height: 96px; padding: 4px; }
.haus-mega__lay--sizes-paper .haus-mega__lay-row { gap: 10px; }
.haus-mega__lay--sizes-paper .haus-mega__lay-card--size strong { white-space: nowrap; }

/* Two rows of cards (Folders 4 + 3, Stickers 3 + 3, Holidays 4 + 3):
   shorter images so the panel still fits a 900px-tall laptop screen
   without scrolling. */
.haus-mega__lay-group.is-multi-row .haus-mega__lay-card-media img { height: 104px; }
.haus-mega__lay--category-grid .haus-mega__lay-group.is-multi-row .haus-mega__lay-card-media img { height: 118px; }

/* QA #8: the Invitations panel's option and category images were cropped by object-fit: cover
   (Envelopes lost its edges). Fit the whole picture inside its box; heroes still fill theirs. */
#haus-mega-invitations .haus-mega__cfg-option img,
#haus-mega-invitations .haus-mega__lay-card-media img { object-fit: contain; }
#haus-mega-invitations .haus-mega__cfg-option img { background: var(--haus-sidebar-bg); }

/* ── Feature rows ─────────────────────────── */
.haus-mega__lay-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.haus-mega__lay-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 18px;
  min-width: 0;
}
.haus-mega__lay-feature + .haus-mega__lay-feature { border-left: 1px solid var(--haus-border); }
.haus-mega__lay-feature strong { display: block; font-size: 13px; font-weight: 700; color: var(--haus-navy); line-height: 1.3; }
.haus-mega__lay-feature-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--haus-muted); line-height: 1.35; }
.haus-mega__lay-feature-icon { flex-shrink: 0; display: inline-flex; color: var(--haus-teal); }
.haus-mega__lay-feature-icon .haus-icon { width: 22px; height: 22px; }
/* Above the cards: icons sit in soft teal circles */
.haus-mega__lay-features--above .haus-mega__lay-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--haus-teal-bg);
  align-items: center;
  justify-content: center;
}
.haus-mega__lay-features--below {
  padding-top: 16px;
  border-top: 1px solid var(--haus-border);
}
.haus-mega__lay-features--below .haus-mega__lay-feature:first-child { padding-left: 0; }