:root {
  --shell-header-height-desktop: 76px;
  --shell-header-height-mobile: 60px;
  --shell-sidebar-width: 280px;
  --shell-bottom-nav-height: 68px;
  --shell-content-max-width: var(--container-desktop);
  --shell-footer-spacing: var(--space-3xl);
  --shell-nav-active-surface: var(--color-sand);
  --shell-nav-hover-surface: var(--color-light-gray);
  --shell-divider: var(--border-subtle);
  --shell-topbar-height: 72px;
  --shell-transition-duration: 160ms;
}

.ag-shell { width: 100%; max-width: var(--shell-content-max-width); margin-inline: auto; color: var(--color-charcoal); }
.ag-shell--framed { border: var(--shell-divider); border-radius: var(--radius-xl); background: var(--color-warm-white); overflow: hidden; }
.ag-main-content { min-width: 0; display: grid; gap: var(--space-xl); }
.ag-shell-section { min-width: 0; padding: var(--space-xl); border: var(--shell-divider); border-radius: var(--radius-lg); background: var(--color-warm-white); }
.ag-shell-section--muted { background: var(--color-light-gray); }
.ag-shell-section__title { margin: 0 0 var(--space-sm); color: var(--color-deep-navy); }
.ag-shell-section__text { margin: 0; color: var(--color-neutral); }
.ag-shell-placeholder { min-height: 112px; display: grid; place-items: center; padding: var(--space-xl); border: var(--border-width-sm) dashed var(--color-stone); border-radius: var(--radius-lg); background: var(--color-light-gray); color: var(--color-neutral); text-align: center; }

.ag-site-header { min-height: var(--shell-header-height-desktop); border-bottom: var(--shell-divider); background: var(--color-warm-white); }
.ag-site-header__inner { max-width: var(--shell-content-max-width); min-height: var(--shell-header-height-desktop); margin-inline: auto; padding-inline: var(--container-padding-desktop); display: flex; align-items: center; gap: var(--space-xl); }
.ag-logo { display: inline-flex; align-items: center; color: var(--color-deep-navy); font-weight: var(--font-weight-bold); text-decoration: none; white-space: nowrap; }
.ag-logo__image { display: block; width: auto; max-width: 176px; height: auto; max-height: 44px; object-fit: contain; }
.ag-logo__wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
.ag-logo--hero { color: inherit; }
.ag-logo--footer { color: var(--color-warm-white); }
.ag-logo--mobile .ag-logo__image { max-width: 136px; max-height: 34px; }
.ag-logo--mobile .ag-logo__wordmark { min-height: 34px; font-size: var(--text-h4-size); line-height: var(--text-h4-line); }
.ag-site-header__brand { gap: var(--space-sm); }
.ag-site-header__mark { inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-brand-gold); color: var(--color-deep-navy); }
.ag-site-header__nav { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 auto; min-width: 0; }
.ag-site-header__nav--secondary { flex: 0 1 auto; }
.ag-site-header__link { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-md); border-radius: var(--radius-md); color: var(--color-charcoal); text-decoration: none; transition: background-color var(--shell-transition-duration), color var(--shell-transition-duration), box-shadow var(--shell-transition-duration); }
.ag-site-header__link:hover { background: var(--shell-nav-hover-surface); color: var(--color-deep-navy); }
.ag-site-header__link:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }
.ag-site-header__link[aria-current="page"], .ag-site-header__link--active { background: transparent; color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); box-shadow: inset 0 -3px 0 var(--color-brand-gold); }
.ag-site-header__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }

.ag-internal-header .ag-site-header__inner { width: min(calc(100% - 48px), 1360px); max-width: none; padding-inline: 0; }
.ag-internal-header .ag-site-header__actions .ag-button--text:not(.ag-button--icon) { color: var(--color-deep-navy); }
.ag-internal-header .ag-site-header__actions .ag-button--text:not(.ag-button--icon):hover { color: var(--color-caspian-blue); }

.ag-mobile-header { min-height: var(--shell-header-height-mobile); display: none; align-items: center; gap: var(--space-xs); padding-inline: var(--container-padding-mobile); border-bottom: var(--shell-divider); background: var(--color-warm-white); }
.ag-mobile-header__brand, .ag-mobile-header__title { flex: 1 1 auto; min-width: 0; color: var(--color-deep-navy); font-weight: var(--font-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-mobile-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
.ag-mobile-header__menu-preview { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-bottom: var(--shell-divider); background: var(--color-light-gray); }

.ag-footer { padding-block: var(--shell-footer-spacing); background: var(--color-deep-navy); color: var(--color-warm-white); }
.ag-footer__inner { max-width: var(--shell-content-max-width); margin-inline: auto; padding-inline: var(--container-padding-desktop); display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-2xl); }
.ag-footer__brand, .ag-footer__title { color: var(--color-warm-white); font-weight: var(--font-weight-bold); }
.ag-footer__text, .ag-footer__link { color: var(--color-light-gray); }
.ag-footer__group { display: grid; align-content: start; gap: var(--space-sm); }
.ag-footer__link { min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.ag-footer__link:hover, .ag-footer__link:focus-visible { color: var(--color-brand-gold); }
.ag-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--border-width-sm) solid var(--color-charcoal); }

.ag-bottom-nav { min-height: var(--shell-bottom-nav-height); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs); border: var(--shell-divider); border-radius: var(--radius-xl); background: var(--color-warm-white); }
.ag-bottom-nav__item { position: relative; min-height: 56px; display: grid; place-items: center; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-lg); color: var(--color-charcoal); text-decoration: none; font-size: var(--text-caption-size); }
.ag-bottom-nav__item:hover { background: var(--shell-nav-hover-surface); }
.ag-bottom-nav__item[aria-current="page"] { background: var(--shell-nav-active-surface); color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); box-shadow: inset 0 3px 0 var(--color-brand-gold); }
.ag-bottom-nav__item[aria-disabled="true"] { opacity: .58; pointer-events: none; }
.ag-bottom-nav__icon { font-size: 1.25rem; line-height: 1; }
.ag-bottom-nav__badge { position: absolute; inset-block-start: var(--space-xs); inset-inline-end: var(--space-md); min-width: 20px; padding-inline: var(--space-xs); border-radius: var(--radius-round); background: var(--color-terracotta); color: var(--color-warm-white); font-size: var(--text-caption-size); text-align: center; }

.ag-breadcrumbs { min-width: 0; }
.ag-breadcrumbs__list { display: flex; align-items: center; gap: var(--space-sm); padding: 0; margin: 0; list-style: none; overflow: hidden; }
.ag-breadcrumbs__item { min-width: 0; display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-neutral); }
.ag-breadcrumbs__item + .ag-breadcrumbs__item {
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--border-width-sm) solid var(--color-stone);
}
.ag-breadcrumbs__link { color: var(--color-caspian-blue); text-decoration: none; }
.ag-breadcrumbs__current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-charcoal); font-weight: var(--font-weight-semibold); }
.ag-breadcrumbs--condensed .ag-breadcrumbs__item:not(:first-child):not(:last-child) { display: none; }

.ag-tabs { min-width: 0; }
.ag-tabs__list { display: flex; gap: var(--space-sm); padding: var(--space-xs); margin: 0; border: var(--shell-divider); border-radius: var(--radius-lg); background: var(--color-light-gray); overflow-x: auto; }
.ag-tabs__tab { min-height: 44px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-charcoal); font: inherit; font-weight: var(--font-weight-semibold); white-space: nowrap; cursor: pointer; }
.ag-tabs__tab:hover { background: var(--shell-nav-hover-surface); }
.ag-tabs__tab:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }
.ag-tabs__tab[aria-selected="true"] { background: var(--color-warm-white); color: var(--color-deep-navy); box-shadow: inset 0 -3px 0 var(--color-brand-gold); }
.ag-tabs__tab:disabled { opacity: .58; cursor: not-allowed; }
.ag-tabs--compact .ag-tabs__tab { min-height: var(--control-touch-target); padding-inline: var(--space-md); }

.ag-pagination { display: flex; justify-content: center; }
.ag-pagination__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; }
.ag-pagination__link, .ag-pagination__ellipsis { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-md); border: var(--shell-divider); border-radius: var(--radius-md); background: var(--color-warm-white); color: var(--color-charcoal); text-decoration: none; }
.ag-pagination__link:hover { background: var(--shell-nav-hover-surface); }
.ag-pagination__link:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }
.ag-pagination__link[aria-current="page"] { background: var(--shell-nav-active-surface); border-color: var(--color-brand-gold); color: var(--color-deep-navy); font-weight: var(--font-weight-bold); }
.ag-pagination__link[aria-disabled="true"] { opacity: .58; pointer-events: none; }
.ag-pagination--compact .ag-pagination__optional { display: none; }

.ag-public-shell, .ag-catalog-shell, .ag-detail-shell, .ag-checkout-shell { display: grid; gap: var(--space-xl); padding: var(--space-xl); }
.ag-public-shell__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-xl); align-items: start; }
.ag-catalog-shell__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.ag-catalog-shell__toolbar, .ag-catalog-shell__results-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.ag-catalog-shell__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ag-detail-shell__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-xl); align-items: start; }
.ag-detail-shell__media { min-height: 280px; }
.ag-detail-shell__summary { align-self: start; border-color: var(--color-brand-gold); }
.ag-checkout-shell__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-xl); align-items: start; }
.ag-checkout-shell__steps { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0; margin: 0; list-style: none; }
.ag-checkout-shell__step { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); border-radius: var(--radius-round); background: var(--color-light-gray); color: var(--color-neutral); }
.ag-checkout-shell__step--active { background: var(--shell-nav-active-surface); color: var(--color-deep-navy); box-shadow: inset 0 0 0 var(--border-width-sm) var(--color-brand-gold); }

.ag-account-shell, .ag-partner-shell { display: grid; grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); min-height: 520px; border: var(--shell-divider); border-radius: var(--radius-xl); background: var(--color-warm-white); overflow: hidden; }
.ag-sidebar { display: grid; align-content: start; gap: var(--space-lg); padding: var(--space-xl); border-inline-end: var(--shell-divider); background: var(--color-light-gray); }
.ag-sidebar__label { margin: 0; color: var(--color-neutral); font-size: var(--text-caption-size); font-weight: var(--font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.ag-sidebar__nav, .ag-sidebar__group { display: grid; gap: var(--space-xs); }
.ag-sidebar__item { min-height: 44px; display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); border-radius: var(--radius-md); color: var(--color-charcoal); text-decoration: none; }
.ag-sidebar__item:hover { background: var(--shell-nav-hover-surface); }
.ag-sidebar__item:focus-visible { outline: 0; box-shadow: var(--control-focus-ring); }
.ag-sidebar__item[aria-current="page"] { background: var(--shell-nav-active-surface); color: var(--color-deep-navy); font-weight: var(--font-weight-semibold); box-shadow: inset 4px 0 0 var(--color-brand-gold); }
.ag-sidebar__item[aria-disabled="true"] { opacity: .58; pointer-events: none; }
.ag-sidebar__icon { inline-size: 24px; text-align: center; }
.ag-sidebar__logout { margin-top: var(--space-lg); }
.ag-account-topbar { min-height: var(--shell-topbar-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); border-bottom: var(--shell-divider); background: var(--color-warm-white); }
.ag-account-topbar__title { margin: 0; color: var(--color-deep-navy); }
.ag-account-topbar__meta { margin: 0; color: var(--color-neutral); }
.ag-account-topbar__actions, .ag-account-topbar__user { display: flex; align-items: center; gap: var(--space-sm); }
.ag-account-topbar__avatar { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--color-sand); color: var(--color-deep-navy); font-weight: var(--font-weight-bold); }
.ag-account-shell__mobile-nav, .ag-partner-shell__mobile-nav { display: none; padding: var(--space-lg) var(--space-xl); border-bottom: var(--shell-divider); background: var(--color-light-gray); }
.ag-account-shell__content, .ag-partner-shell__content { min-width: 0; display: grid; align-content: start; gap: var(--space-xl); }
.ag-account-shell__panel, .ag-partner-shell__panel { padding: var(--space-xl); }

@media (max-width: 1100px) and (min-width: 1024px) {
  .ag-internal-header .ag-site-header__inner { width: calc(100% - 32px); }
}

@media (max-width: 1023px) {
  .ag-site-header { display: none; }
  .ag-mobile-header { display: flex; }
  .ag-internal-mobile-header .ag-mobile-header__brand { display: flex; justify-content: center; }
  .ag-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: var(--container-padding-tablet); }
  .ag-public-shell__body, .ag-catalog-shell__body, .ag-detail-shell__body, .ag-checkout-shell__body { grid-template-columns: 1fr; }
  .ag-catalog-shell__sidebar { display: none; }
  .ag-catalog-shell__grid { grid-template-columns: 1fr; }
  .ag-account-shell, .ag-partner-shell { grid-template-columns: 1fr; }
  .ag-account-shell > .ag-sidebar, .ag-partner-shell > .ag-sidebar { display: none; }
  .ag-account-shell__mobile-nav, .ag-partner-shell__mobile-nav { display: block; }
}
@media (max-width: 767px) {
  .ag-shell--framed { border-radius: var(--radius-lg); }
  .ag-public-shell, .ag-catalog-shell, .ag-detail-shell, .ag-checkout-shell, .ag-account-shell__panel, .ag-partner-shell__panel { padding: var(--space-md); }
  .ag-footer__inner { grid-template-columns: 1fr; padding-inline: var(--container-padding-mobile); gap: var(--space-md); }
  .ag-footer__group { padding-block: var(--space-xs); }
  .ag-footer__legal { display: grid; }
  .ag-account-topbar { align-items: flex-start; flex-direction: column; padding: var(--space-lg); }
}
