/*
 * Canonical HELGA UI foundation. Product pages opt in explicitly through
 * the typed shell presentation contract.
 */

:root {
  --helga-ui-color-navy: #1F2D4A;
  --helga-ui-color-navy-dark: #15233B;
  --helga-ui-color-terracotta: #C66B47;
  --helga-ui-color-terracotta-dark: #B95634;
  --helga-ui-color-terracotta-soft: #F1D7CB;
  --helga-ui-color-cream: #F5EFE6;
  --helga-ui-color-paper: #FFFCF8;
  --helga-ui-color-surface-secondary: #FBF7F1;
  --helga-ui-color-success: #547C57;
  --helga-ui-color-text-muted: #7E7A74;

  --helga-ui-font-family: "Manrope", system-ui, -apple-system, sans-serif;

  --helga-ui-shell-rail-width: 96px;
  --helga-ui-shell-main-padding: 30px 42px 34px;
  --helga-ui-mobile-gutter: 18px;
  --helga-ui-mobile-navigation-height: 68px;
  --helga-ui-navigation-control-size: 52px;
  --helga-ui-touch-target-min: 44px;

  --helga-ui-radius-navigation: 17px;
  --helga-ui-radius-status: 25px;
  --helga-ui-radius-focus: 44px;
  --helga-ui-radius-action: 19px;

  --helga-ui-shadow-focus: 0 18px 48px rgba(41, 33, 27, .08),
    0 3px 10px rgba(41, 33, 27, .04);
  --helga-ui-shadow-surface: 0 10px 28px rgba(41, 33, 27, .065),
    0 2px 7px rgba(41, 33, 27, .035);
}

.helga-ui-app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--helga-ui-shell-rail-width) minmax(0, 1fr);
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-cream);
  font-family: var(--helga-ui-font-family);
}

.helga-ui-app-shell__rail {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px 12px;
  overflow-y: auto;
  color: var(--helga-ui-color-navy);
  background: rgba(255, 252, 248, .72);
  box-shadow: inset -1px 0 rgba(31, 45, 74, .06);
}

.helga-ui-app-shell__main {
  min-width: 0;
  padding: var(--helga-ui-shell-main-padding);
}

.helga-ui-product-identity {
  display: flex;
  min-width: var(--helga-ui-touch-target-min);
  min-height: var(--helga-ui-touch-target-min);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: rgba(241, 215, 203, .38);
  text-align: center;
}

.helga-ui-product-identity__mark {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
}

.helga-ui-product-identity__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.helga-ui-primary-navigation,
.helga-ui-primary-navigation__section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.helga-ui-primary-navigation {
  gap: 18px;
}

.helga-ui-primary-navigation__section {
  gap: 10px;
}

.helga-ui-primary-navigation__item {
  position: relative;
  display: inline-flex;
  width: var(--helga-ui-navigation-control-size);
  height: var(--helga-ui-navigation-control-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--helga-ui-radius-navigation);
  color: var(--helga-ui-color-navy);
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.helga-ui-primary-navigation__item:hover,
.helga-ui-primary-navigation__item:focus-visible {
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-paper);
  box-shadow: var(--helga-ui-shadow-surface);
}

.helga-ui-primary-navigation__item.is-active {
  color: var(--helga-ui-color-paper);
  background: var(--helga-ui-color-navy-dark);
  box-shadow: 0 10px 24px rgba(21, 35, 59, .16);
}

.helga-ui-primary-navigation__item:focus-visible,
.helga-ui-mobile-navigation__item:focus-visible,
.helga-ui-back-link:focus-visible {
  outline: 3px solid var(--helga-ui-color-terracotta);
  outline-offset: 3px;
}

.helga-ui-primary-navigation__icon,
.helga-ui-mobile-navigation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.helga-ui-primary-navigation__icon svg,
.helga-ui-mobile-navigation__icon svg {
  width: 24px;
  height: 24px;
}

.helga-ui-primary-navigation__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.helga-ui-mobile-navigation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: none;
  min-height: calc(
    var(--helga-ui-mobile-navigation-height) + env(safe-area-inset-bottom)
  );
  padding: 0 10px env(safe-area-inset-bottom);
  align-items: stretch;
  justify-content: space-around;
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-paper);
  box-shadow: 0 -8px 24px rgba(41, 33, 27, .07);
}

.helga-ui-mobile-navigation__item {
  position: relative;
  display: flex;
  min-width: var(--helga-ui-touch-target-min);
  min-height: var(--helga-ui-touch-target-min);
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--helga-ui-color-text-muted);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.helga-ui-mobile-navigation__item::before {
  position: absolute;
  top: 0;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.helga-ui-mobile-navigation__item.is-active {
  color: var(--helga-ui-color-navy-dark);
}

.helga-ui-mobile-navigation__item.is-active::before {
  background: var(--helga-ui-color-terracotta);
}

.helga-ui-shell-header {
  display: flex;
  width: min(1180px, 100%);
  min-height: 52px;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.helga-ui-shell-header__identity {
  display: inline-flex;
  min-height: 46px;
  padding: 0 18px;
  align-items: center;
  border-radius: 17px;
  color: var(--helga-ui-color-navy);
  background: rgba(255, 252, 248, .76);
  box-shadow: var(--helga-ui-shadow-surface);
  font-size: .8rem;
  font-weight: 800;
}

.helga-ui-shell-header__mark {
  display: none;
  width: auto;
  height: 36px;
  object-fit: contain;
}

.helga-ui-shell-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.helga-ui-header-control,
.helga-ui-account-control {
  display: inline-flex;
  width: var(--helga-ui-touch-target-min);
  height: var(--helga-ui-touch-target-min);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-paper);
  box-shadow: var(--helga-ui-shadow-surface);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.helga-ui-header-control {
  display: none;
}

.helga-ui-header-control:focus-visible,
.helga-ui-account-control:focus-visible {
  outline: 3px solid var(--helga-ui-color-navy);
  outline-offset: 3px;
}

.helga-ui-header-control svg,
.helga-ui-account-control svg {
  width: 22px;
  height: 22px;
}

/* The product manifest decides whether the helper is rendered.  HELGA keeps
   one branded floating trigger on both surfaces and never consumes one of
   the five stable mobile navigation destinations. */
@media (min-width: 768px) {
  .helga-ui-shell-active .helga-helper {
    right: 28px;
    bottom: 28px;
  }
}

@media (max-width: 767px) {
  .helga-ui-shell-active .helga-helper {
    right: 18px;
    bottom: calc(
      var(--helga-ui-mobile-navigation-height)
      + env(safe-area-inset-bottom)
      + 16px
    );
    transform: none;
  }
}

.helga-ui-detail-header {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.helga-ui-back-link {
  display: inline-flex;
  width: fit-content;
  min-width: var(--helga-ui-touch-target-min);
  min-height: var(--helga-ui-touch-target-min);
  align-items: center;
  gap: 8px;
  border-radius: var(--helga-ui-radius-navigation);
  color: var(--helga-ui-color-navy);
  font-weight: 700;
  text-decoration: none;
}

.helga-ui-back-link:hover {
  color: var(--helga-ui-color-terracotta-dark);
}

.helga-ui-back-link__icon {
  flex: 0 0 auto;
}

.helga-ui-detail-header__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.helga-ui-detail-header__title {
  margin: 0;
  color: var(--helga-ui-color-navy);
  font-family: var(--helga-ui-font-family);
  font-size: 2.375rem;
  font-weight: 670;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.helga-ui-page-title-context {
  margin: 0;
  color: var(--helga-ui-color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.helga-ui-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-surface-secondary);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
}

.helga-ui-status__indicator {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.helga-ui-status--attention {
  color: var(--helga-ui-color-terracotta-dark);
  background: var(--helga-ui-color-terracotta-soft);
}

.helga-ui-status--neutral {
  color: var(--helga-ui-color-text-muted);
  background: var(--helga-ui-color-surface-secondary);
}

.helga-ui-status--waiting {
  color: var(--helga-ui-color-navy);
  background: var(--helga-ui-color-cream);
}

.helga-ui-status--confirmed {
  color: var(--helga-ui-color-navy-dark);
  background: var(--helga-ui-color-paper);
  box-shadow: inset 0 0 0 1px rgba(31, 45, 74, .18);
}

.helga-ui-status--completed {
  color: var(--helga-ui-color-success);
  background: var(--helga-ui-color-paper);
  box-shadow: inset 0 0 0 1px rgba(84, 124, 87, .25);
}

@media (max-width: 767px) {
  .helga-ui-app-shell {
    display: block;
  }

  .helga-ui-app-shell__rail {
    display: none;
  }

  .helga-ui-app-shell__main {
    padding: var(--helga-ui-mobile-gutter);
    padding-bottom: calc(
      var(--helga-ui-mobile-navigation-height)
      + env(safe-area-inset-bottom)
      + var(--helga-ui-mobile-gutter)
    );
  }

  .helga-ui-shell-header {
    min-height: 44px;
    margin-bottom: 18px;
  }

  .helga-ui-shell-header__identity {
    width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
    background: rgba(241, 215, 203, .38);
    box-shadow: none;
  }

  .helga-ui-shell-header__identity > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .helga-ui-shell-header__mark { display: block; }

  .helga-ui-header-control { display: inline-flex; }

  .helga-ui-mobile-navigation {
    display: flex;
  }

  .helga-ui-detail-header__title {
    font-size: 1.9375rem;
  }
}