/* Phase 5: global navigation, semantic search and footer. Color, rhythm and type use frozen tokens. */
.mg-site-header { position: relative; z-index: 40; background: var(--surface); border-block-end: var(--hairline) solid var(--line); }
.mg-shell-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--mg-header-height); }
.mg-shell-logo { flex: 0 0 auto; padding-inline: 0; }
.mg-shell-logo img { display: block; width: var(--mg-logo-width); aspect-ratio: 152 / 42; object-fit: contain; }
.mg-shell-desktop, .mg-shell-actions { display: flex; align-items: center; gap: var(--space-3); }
.mg-shell-desktop { min-width: 0; }
.mg-shell-desktop > a, .mg-shell-services > summary { min-height: var(--tap-min); padding-inline: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; font-size: var(--mg-type-small); white-space: nowrap; }
.mg-shell-desktop a:hover, .mg-shell-desktop a:focus-visible { text-decoration: underline; text-underline-offset: var(--space-2); }
.mg-shell-services > summary, .mg-shell-mobile-services summary { cursor: pointer; list-style: none; }
.mg-shell-services > summary::-webkit-details-marker, .mg-shell-mobile-services summary::-webkit-details-marker { display: none; }
.mg-shell-services > summary .mg-icon { width: var(--space-4); height: var(--space-4); }
.mg-shell-services[open] > summary .mg-icon { transform: rotate(180deg); }
.mg-shell-mega { position: absolute; top: 100%; inset-inline: 0; width: 100%; background: var(--surface-raised); border-block: var(--hairline) solid var(--line-strong); padding-block: var(--space-4) var(--space-6); max-height: min(78vh, 720px); overflow: auto; }
.mg-shell-mega > * { max-width: var(--container-max); margin-inline: auto; }
.mg-shell-all { display: inline-flex; min-height: var(--tap-min); align-items: center; padding-inline: var(--space-4); }
.mg-shell-mega-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-3); padding-inline: var(--space-4); }
.mg-shell-mega-grid section { min-width: 0; }
.mg-shell-family { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 700; border-block-end: var(--hairline) solid var(--line-strong); }
.mg-shell-mega-grid ul, .mg-shell-footer-grid ul { padding: 0; margin: 0; list-style: none; }
.mg-shell-mega-grid li a { display: flex; min-height: var(--tap-min); padding-block: var(--space-2); font-size: var(--mg-type-small); text-decoration: none; }
.mg-shell-actions { flex: 0 0 auto; gap: var(--space-2); }
.mg-shell-actions .mg-language-switch { gap: var(--space-1); }
.mg-shell-actions .mg-language-switch a, .mg-shell-actions .mg-language-switch span { padding: var(--space-1); font-size: var(--mg-type-small); }
.mg-language-switch [aria-disabled="true"] { color: var(--ink-muted); opacity: .8; cursor: not-allowed; }
.mg-shell-actions .mg-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.mg-shell-actions .mg-icon { width: var(--space-6); height: var(--space-6); }
.mg-shell-actions .mg-shell-menu-button { display: none; }
.mg-shell-cta { white-space: nowrap; }
.mg-shell-dialog { position: fixed; inset: 0; width: min(100% - 2 * var(--space-4), var(--measure)); max-height: calc(100dvh - 2 * var(--space-4)); margin: auto; padding: var(--space-6); background: var(--surface-raised); color: var(--ink); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); overflow-y: auto; }
.mg-shell-dialog::backdrop { background: var(--brand-black); opacity: .82; }
.mg-shell-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block-end: var(--space-4); }
.mg-shell-dialog-top .mg-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.mg-shell-dialog .mg-search { max-width: 100%; }
.mg-shell-dialog .mg-search .mg-inline { flex-wrap: nowrap; }
.mg-shell-dialog .mg-search input { width: 100%; }
.mg-shell-mobile-dialog { width: min(100% - 2 * var(--space-4), var(--measure)); }
.mg-shell-mobile-dialog nav > a, .mg-shell-mobile-dialog nav > details > summary { display: flex; padding-block: var(--space-3); align-items: center; border-block-end: var(--hairline) solid var(--line); text-decoration: none; min-height: var(--tap-min); }
.mg-shell-mobile-services > a, .mg-shell-mobile-services > details { margin-inline-start: var(--space-4); display: block; }
.mg-shell-mobile-services > details > summary, .mg-shell-mobile-services > details > a { min-height: var(--tap-min); display: flex; align-items: center; text-decoration: none; padding: var(--space-2); }
.mg-shell-mobile-services > details > a { margin-inline-start: var(--space-4); }
.mg-shell-mobile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-6); }
.mg-site-footer { padding-block-end: var(--space-8); }
.mg-shell-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-6); }
.mg-shell-footer-grid nav strong { display: block; margin-block-end: var(--space-4); }
.mg-shell-footer-grid nav a { display: flex; min-height: var(--tap-min); align-items: center; text-decoration: none; font-size: var(--mg-type-small); }
.mg-shell-footer-brand { max-width: var(--measure); }
.mg-shell-footer-brand p { color: var(--ink-muted); }
.mg-shell-footer-wordmark { font-family: var(--font-display); font-size: var(--mg-type-wordmark); font-weight: 700; text-decoration: none; }
.mg-shell-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block-start: var(--space-8); font-size: var(--mg-type-small); color: var(--ink-muted); }
.mg-shell-cookie-settings { color: var(--ink); font: inherit; background: transparent; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill); min-height: var(--tap-min); padding-inline: var(--space-4); cursor: pointer; }
.mg-wa { position: fixed; inset-inline-end: var(--space-4); bottom: var(--space-4); z-index: 35; background: var(--surface-raised); color: var(--ink); box-shadow: none; }
.mg-shell-search-results { min-height: 55dvh; }
.mg-shell-results { display: grid; margin-block-start: var(--space-8); }
.mg-shell-result { display: grid; gap: var(--space-2); padding-block: var(--space-6); border-block-start: var(--hairline) solid var(--line); }
.mg-shell-result h2, .mg-shell-result p { margin: 0; }
.mg-shell-result-tag { display: inline-flex; width: max-content; color: var(--ink-muted); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill); padding-inline: var(--space-3); font-size: var(--mg-type-small); }
.mg-shell-no-results { display: grid; gap: var(--space-4); margin-block-start: var(--space-8); }
.mg-shell-suggestions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 1250px) {
  .mg-shell-desktop { display: none; }
  .mg-shell-actions .mg-shell-menu-button { display: inline-flex; }
}
@media (max-width: 900px) {
  .mg-shell-actions .mg-shell-cta, .mg-shell-actions .mg-shell-whatsapp-head, .mg-shell-actions .mg-language-switch { display: none; }
  .mg-shell-bar { gap: var(--space-2); }
  .mg-shell-dialog { padding: var(--space-4); }
  .mg-shell-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mg-shell-footer-brand, .mg-shell-footer-policy { grid-column: 1 / -1; }
  .mg-wa { bottom: var(--space-16); }
}
@media (prefers-reduced-motion: reduce) { .mg-shell-services > summary .mg-icon { transition: none; } }

.mg-shell-recommended { display: grid; padding-inline-start: var(--space-6); gap: var(--space-3); }

.mg-shell-store-grid { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); }
.mg-shell-store-grid ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0; list-style: none; gap: var(--space-2); }
.mg-shell-store-grid li a, .mg-shell-store-grid > div > a { display: flex; align-items: center; min-height: var(--tap-min); text-decoration: none; }
.mg-shell-store-grid li a:hover, .mg-shell-store-grid a:focus-visible { text-decoration: underline; }