/* Quiet, token-based feedback for the native details menu and footer. */
.mg-shell-services > summary {
  border-radius: var(--radius-sm);
  transition: color 160ms ease, background-color 160ms ease;
}

.mg-shell-services > summary:hover,
.mg-shell-services > summary:focus-visible,
.mg-shell-services[open] > summary {
  color: var(--accent-ink);
  background: var(--surface-raised);
}

.mg-shell-services > summary:focus-visible,
.mg-shell-mega a:focus-visible,
.mg-shell-footer-grid a:focus-visible,
.mg-shell-footer-wordmark:focus-visible,
.mg-shell-cookie-settings:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.mg-shell-services > summary .mg-icon {
  color: var(--accent);
  transition: transform 180ms ease, color 180ms ease;
}

/* Keep destination links and disclosure controls as separate, obvious actions. */
.mg-shell-nav-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.mg-shell-nav-item > .mg-shell-nav-link {
  position: relative;
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
  padding-inline: var(--space-1);
  color: var(--ink);
  font-size: var(--mg-type-small);
  text-decoration: none;
  white-space: nowrap;
}
.mg-shell-nav-item > .mg-shell-nav-link::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-1);
  inset-block-end: calc(var(--space-2) - 1px);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.mg-shell-nav-item > .mg-shell-nav-link:dir(rtl)::after { transform-origin: right center; }
.mg-shell-desktop .mg-shell-nav-item > .mg-shell-nav-link:is(:hover, :focus-visible) { text-decoration: none; }
.mg-shell-nav-item > .mg-shell-nav-link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.mg-shell-desktop > a { position: relative; }
.mg-shell-desktop > a::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-1);
  inset-block-end: calc(var(--space-2) - 1px);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.mg-shell-desktop > a:dir(rtl)::after { transform-origin: right center; }
.mg-shell-desktop > a:is(:hover, :focus-visible):not([aria-disabled="true"]) { text-decoration: none; }
.mg-shell-desktop > a:is(:hover, :focus-visible):not([aria-disabled="true"])::after { transform: scaleX(1); }
.mg-shell-nav-item > details > summary {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  min-height: var(--tap-min);
  padding: 0;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.mg-shell-nav-item > details > summary:hover,
.mg-shell-nav-item > details > summary:focus-visible,
.mg-shell-nav-item > details[open] > summary { background: var(--surface-raised); }
.mg-shell-nav-item > details > summary .mg-icon { width: var(--space-4); height: var(--space-4); color: var(--accent-ink); }
.mg-shell-nav-item > details > summary:focus-visible,
.mg-shell-mobile-nav-item > :is(a, details > summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mg-shell-mobile-nav-item { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: stretch; border-block-end: var(--hairline) solid var(--line); }
.mg-shell-mobile-nav-link,
.mg-shell-mobile-nav-item > details > summary {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--tap-min);
  color: var(--ink);
  text-decoration: none;
}
.mg-shell-mobile-nav-link { padding-inline: var(--space-3); }
.mg-shell-mobile-nav-item > details > summary { justify-content: center; padding: 0; border-radius: var(--radius-sm); cursor: pointer; }
.mg-shell-mobile-nav-item > details > summary .mg-icon { width: var(--space-4); height: var(--space-4); color: var(--accent-ink); }
.mg-shell-mobile-nav-item > details[open] > summary,
.mg-shell-mobile-nav-item > details > summary:hover { background: var(--surface-raised); }
.mg-shell-mobile-services[open] > summary .mg-icon { transform: rotate(180deg); }
.mg-shell-mobile-submenu { grid-column: 1 / -1; padding: 0 var(--space-3) var(--space-3); background: var(--surface-raised); }
.mg-shell-mobile-submenu > a,
.mg-shell-mobile-family > summary,
.mg-shell-mobile-family > a { display: flex; align-items: center; min-height: var(--tap-min); padding: var(--space-2); color: var(--ink); text-decoration: none; }
.mg-shell-mobile-family > summary { cursor: pointer; font-weight: 700; }
.mg-shell-mobile-family > a { margin-inline-start: var(--space-3); }
.mg-shell-mobile-submenu > a:hover,
.mg-shell-mobile-submenu > a:focus-visible,
.mg-shell-mobile-family > summary:hover,
.mg-shell-mobile-family > a:hover,
.mg-shell-mobile-family > a:focus-visible { background: var(--surface); color: var(--accent-ink); }

.mg-shell-mega {
  background: var(--surface-raised);
  border-block: var(--hairline) solid var(--line-strong);
  box-shadow: 0 18px 42px rgb(0 0 0 / 18%);
}

.mg-shell-mega-grid { gap: var(--space-4); }
.mg-shell-mega-grid section { padding-inline: var(--space-2); }
.mg-shell-mega .mg-shell-family { position: relative; }
.mg-shell-mega .mg-shell-family::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-2);
  inset-block-end: var(--space-2);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.mg-shell-mega .mg-shell-family:dir(rtl)::after { transform-origin: right center; }
.mg-shell-mega .mg-shell-family:is(:hover, :focus-visible)::after { transform: scaleX(1); }

.mg-shell-mega .mg-shell-all {
	position: relative;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--accent-ink);
  font-weight: 700;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.mg-shell-mega .mg-shell-all::after {
	content: "";
	position: absolute;
	inset-inline: var(--space-4);
	inset-block-end: var(--space-2);
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}
.mg-shell-mega .mg-shell-all:dir(rtl)::after { transform-origin: right center; }
.mg-shell-mega .mg-shell-all:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.mg-shell-mega .mg-shell-all:hover,
.mg-shell-mega .mg-shell-all:focus-visible {
  background: var(--surface);
}

.mg-shell-mega .mg-shell-family {
  padding-inline: var(--space-2);
  color: var(--accent-ink);
  border-block-end-color: var(--line-strong);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.mg-shell-mega .mg-shell-family:hover,
.mg-shell-mega .mg-shell-family:focus-visible {
  color: var(--accent-ink);
  border-block-end-color: var(--accent);
}

.mg-shell-mega-grid li a,
.mg-shell-store-grid li a,
.mg-shell-store-grid > div > a {
  position: relative;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.mg-shell-mega-grid li a:hover,
.mg-shell-mega-grid li a:focus-visible,
.mg-shell-store-grid li a:hover,
.mg-shell-store-grid li a:focus-visible,
.mg-shell-store-grid > div > a:hover,
.mg-shell-store-grid > div > a:focus-visible {
  color: var(--accent-ink);
  background: var(--surface);
}

.mg-site-footer {
  position: relative;
  padding-block: var(--space-12) var(--space-4);
  background: var(--surface-raised);
  border-block-start: var(--hairline) solid var(--line-strong);
}

.mg-shell-footer-grid {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  padding-block-end: var(--space-8);
}

.mg-shell-footer-brand { padding-inline-end: var(--space-4); }
.mg-shell-footer-wordmark {
  display: inline-flex;
  position: relative;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}
.mg-shell-footer-wordmark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-1);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.mg-shell-footer-wordmark:dir(rtl)::after { transform-origin: right center; }
.mg-shell-footer-brand p { max-width: 32ch; line-height: 1.7; }

.mg-shell-footer-grid nav strong {
  margin-block-end: var(--space-2);
  color: var(--ink);
  font-size: var(--mg-type-small);
  font-weight: 700;
}

.mg-shell-footer-grid nav ul { display: grid; gap: 2px; }
.mg-shell-footer-grid nav a {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  padding-inline: 0;
  color: var(--ink-muted);
  line-height: 1.5;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}
.mg-shell-footer-grid nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-2);
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
.mg-shell-footer-grid nav a:dir(rtl)::after { transform-origin: right center; }

.mg-shell-footer-grid nav a:hover,
.mg-shell-footer-grid nav a:focus-visible,
.mg-shell-footer-wordmark:hover,
.mg-shell-footer-wordmark:focus-visible {
  color: var(--accent-ink);
}
.mg-shell-footer-grid nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.mg-shell-footer-wordmark:is(:hover, :focus-visible)::after { transform: scaleX(1); }

.mg-shell-footer-grid nav a:hover { transform: translateX(2px); }
.mg-shell-footer-grid nav a:dir(rtl):hover { transform: translateX(-2px); }

.mg-shell-footer-grid nav span[aria-disabled="true"] {
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  color: var(--ink-muted);
  text-decoration: none;
}

/* Ordinary inline text links animate their own underline; card/price actions stay quiet. */
a.mg-link {
  position: relative;
  text-decoration: none;
}
a.mg-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-2);
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
a.mg-link:dir(rtl)::after { transform-origin: right center; }
a.mg-link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
button.mg-link { text-decoration: none; }
.mg-p6-image-card .mg-link { text-decoration: none; }
.mg-p6-image-card .mg-link::after { content: none; }

.mg-shell-footer-bottom {
  padding-block-start: var(--space-4);
  border-block-start: var(--hairline) solid var(--line-strong);
}

.mg-shell-cookie-settings {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.mg-shell-cookie-settings:hover {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent-ink);
}

@media (max-width: 900px) {
  .mg-shell-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .mg-shell-footer-brand,
  .mg-shell-footer-policy { grid-column: 1 / -1; }
  .mg-shell-footer-brand { padding-inline-end: 0; }
}

@media (max-width: 520px) {
  .mg-site-footer { padding-block-start: var(--space-8); }
  .mg-shell-footer-grid { gap: var(--space-4) var(--space-3); }
  .mg-shell-footer-grid nav a,
  .mg-shell-footer-grid nav span[aria-disabled="true"] { min-height: 44px; }
  .mg-shell-footer-bottom { align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
  .mg-shell-services[open] .mg-shell-mega { animation: mg-mega-enter 180ms ease-out both; }
  .mg-site-footer.is-in-view { animation: mg-footer-enter 420ms ease-out both; }
  @keyframes mg-mega-enter {
    from { opacity: .72; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes mg-footer-enter {
    from { opacity: .94; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-shell-services > summary,
  .mg-shell-services > summary .mg-icon,
  .mg-shell-mega .mg-shell-all,
  .mg-shell-mega .mg-shell-family,
  .mg-shell-mega-grid li a,
  .mg-shell-store-grid li a,
  .mg-shell-store-grid > div > a,
  .mg-shell-footer-grid nav a,
  .mg-shell-footer-grid nav a::after,
  .mg-shell-footer-wordmark::after,
  a.mg-link::after,
  .mg-shell-cookie-settings,
  .mg-site-footer {
    animation: none;
    transition: none;
  }
  .mg-shell-desktop > a::after,
  .mg-shell-nav-item > .mg-shell-nav-link::after,
  .mg-shell-mega .mg-shell-all::after,
  .mg-shell-mega .mg-shell-family::after { transition: none; }
  .mg-shell-footer-grid nav a:hover { transform: none; }
}
/* Use the available footer width while keeping edge gutters and mobile wrapping. */
.mg-site-footer > .mg-container { width: auto; max-width: none; margin-inline: clamp(20px, 3vw, 56px); padding-inline: 0; }
.mg-site-footer .mg-shell-footer-grid { grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(140px, 1fr)); justify-content: space-between; gap: clamp(24px, 5vw, 96px); }
.mg-site-footer .mg-shell-footer-grid > * { text-align: start; }
@media (max-width: 900px) { .mg-site-footer .mg-shell-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 420px) { .mg-site-footer .mg-shell-footer-grid { gap: var(--space-4); } }