/* Angroos universal marketing-hero frame: 750 × 350 source and rendered ratio. */
@media (max-width: 800px) {
  /* Every storefront page hero uses the same compact mobile banner frame. */
  .site-shell main section.standard-page-hero,
  .site-shell main section.experience-hero,
  .site-shell main section.minis-hero,
  .site-shell main section.kai-moto-hero,
  .site-shell main section.aurelo-hero,
  .site-shell main section.occasion-calendar-hero,
  .site-shell main section.wishlist-hero,
  .site-shell main section.qa-hero,
  .site-shell main > section[class*="hero"],
  .ai-hamper-page .ai-hamper-hero.standard-page-hero,
  .source-gift-page .source-gift-hero,
  .minis-page .minis-hero,
  .kai-moto-page .kai-moto-hero,
  .aurelo-page .aurelo-hero,
  .luxe-page .luxe-hero.standard-page-hero,
  .gift-dna-page .experience-hero,
  .memory-page .experience-hero.memory-hero-full-bleed,
  .dream-page .experience-hero.dream-hero-full-bleed {
    box-sizing: border-box !important;
    width: calc(100% - 14px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 750 / 350 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* Keep the mobile banner message deliberate: title, optional accent and CTA. */
  .site-shell main section.standard-page-hero :is(.eyebrow, [class*="kicker"]),
  .site-shell main section.experience-hero .eyebrow,
  .site-shell main section:is(.minis-hero,.kai-moto-hero,.aurelo-hero,.occasion-calendar-hero,.qa-hero) > div > span:first-child,
  .site-shell main > section[class*="hero"] > div > span:first-child,
  .site-shell main section.standard-page-hero :is(.contact-hero-meta,.inside-hero-signature),
  .site-shell main section.privacy-hero > aside {
    display: none !important;
  }

  .site-shell main section.standard-page-hero h1,
  .site-shell main section.experience-hero h1,
  .site-shell main section:is(.minis-hero,.kai-moto-hero,.aurelo-hero,.occasion-calendar-hero,.wishlist-hero,.qa-hero) h1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin-block: 0 7px !important;
    font-family: var(--font-geist), Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    text-wrap: balance;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  .site-shell main > section[class*="hero"] h1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin-block: 0 7px !important;
    font-family: var(--font-geist), Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    text-wrap: balance;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  .site-shell main section.standard-page-hero h1 br,
  .site-shell main section.experience-hero h1 br {
    display: block;
  }

  .site-shell main section.standard-page-hero p,
  .site-shell main section.experience-hero p,
  .site-shell main section:is(.minis-hero,.kai-moto-hero,.aurelo-hero,.occasion-calendar-hero,.qa-hero) p {
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 10px !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  .site-shell main > section[class*="hero"] p {
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 10px !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  /* Policy and information heroes have no image: keep only the essential title
     and a short summary inside the universal 15:7 frame. */
  .site-shell main section.privacy-hero.standard-page-hero > div {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  .site-shell main section.privacy-hero.standard-page-hero > div > p {
    max-width: 72% !important;
  }

  /* CTA contract shared by every mobile hero. */
  .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.occasion-calendar-hero,.qa-hero)
    :is(.button, nav > a, [class*="actions"] > a, [class*="actions"] > button) {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(157,122,58,.25) !important;
    border-radius: 999px !important;
    background: rgba(255,253,248,.76) !important;
    box-shadow: none !important;
    color: #655a49 !important;
    font-family: var(--font-geist), Arial, sans-serif !important;
    font-size: 6.25px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase;
    white-space: nowrap !important;
  }

  .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.occasion-calendar-hero,.qa-hero)
    :is(.button, nav > a, [class*="actions"] > a, [class*="actions"] > button) svg {
    display: none !important;
  }

  .ai-hamper-page .ai-hamper-hero.standard-page-hero {
    position: relative !important;
    overflow: hidden !important;
  }

  .ai-hamper-page .ai-hamper-hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    justify-content: center !important;
  }

  .ai-hamper-page .ai-hamper-back,
  .ai-hamper-page .ai-hamper-hero-copy > .eyebrow,
  .ai-hamper-page .ai-hamper-hero-copy > p {
    display: none !important;
  }

  .ai-hamper-page .ai-hamper-hero-copy > h1 {
    width: 58% !important;
    margin: 0 0 38px !important;
    font-size: 20px !important;
    line-height: .96 !important;
  }

  .ai-hamper-page .ai-hamper-capabilities {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important;
    display: flex !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .ai-hamper-page .ai-hamper-capabilities > span {
    min-width: 0 !important;
    padding-inline: 8px !important;
    font-size: 6px !important;
    white-space: nowrap !important;
  }

  /* Final authority layer. The app's historical page styles are intentionally
     very specific, so the site root ID makes this shared contract deterministic. */
  #angroos-site .site-shell main section.standard-page-hero,
  #angroos-site .site-shell main section.experience-hero,
  #angroos-site .site-shell main section.minis-hero,
  #angroos-site .site-shell main section.kai-moto-hero,
  #angroos-site .site-shell main section.aurelo-hero,
  #angroos-site .site-shell main section.garden-hero,
  #angroos-site .site-shell main section.occasion-calendar-hero,
  #angroos-site .site-shell main section.wishlist-hero,
  #angroos-site .site-shell main section.qa-hero,
  #angroos-site .site-shell main > section[class*="hero"] {
    box-sizing: border-box !important;
    width: calc(100% - 14px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 750 / 350 !important;
    margin-inline: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #angroos-site .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.garden-hero,.occasion-calendar-hero,.wishlist-hero,.qa-hero) h1,
  #angroos-site .site-shell main > section[class*="hero"] h1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin-block: 0 7px !important;
    font-family: var(--font-geist), Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    text-wrap: balance !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  #angroos-site .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.garden-hero,.occasion-calendar-hero,.wishlist-hero,.qa-hero)
    :is(.eyebrow,[class*="kicker"],.contact-hero-meta,.inside-hero-signature),
  #angroos-site .site-shell main section.privacy-hero > aside,
  #angroos-site .site-shell main > section[class*="hero"] > div > span:first-child {
    display: none !important;
  }

  #angroos-site .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.garden-hero,.occasion-calendar-hero,.wishlist-hero,.qa-hero) p,
  #angroos-site .site-shell main > section[class*="hero"] p {
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    font-size: 10px !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  #angroos-site .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.garden-hero,.occasion-calendar-hero,.qa-hero)
    :is(.button,nav > a,[class*="actions"] > a,[class*="actions"] > button) {
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(157,122,58,.25) !important;
    border-radius: 999px !important;
    background: rgba(255,253,248,.76) !important;
    box-shadow: none !important;
    color: #655a49 !important;
    font-family: var(--font-geist), Arial, sans-serif !important;
    font-size: 6.25px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #angroos-site .site-shell main section:is(.standard-page-hero,.experience-hero,.minis-hero,.kai-moto-hero,.aurelo-hero,.garden-hero,.occasion-calendar-hero,.qa-hero)
    :is(.button,nav > a,[class*="actions"] > a,[class*="actions"] > button) svg {
    display: none !important;
  }
}

@media (max-width: 800px) {
  #angroos-site main.aurelo-page section.aurelo-hero.standard-page-hero {
    width: calc(100% - 14px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 750 / 350 !important;
    margin-top: 10px !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero::after {
    /* Confine the readability fade to the left 40%; keep the artwork clear beyond it. */
    background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 24%, rgba(255,255,255,0) 40%) !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero > div {
    box-sizing: border-box !important;
    width: 62% !important;
    height: 100% !important;
    min-height: 0 !important;
    inset: 0 auto 0 0 !important;
    padding: 15px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero h1 {
    font-size: 20px !important;
    margin: 5px 0 8px !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero h1 em {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  #angroos-site .site-shell main.aurelo-page.aurelo-page .aurelo-hero.standard-page-hero > div > p {
    font-size: 10px !important;
    line-height: 1.38 !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero .hero-actions {
    min-height: 32px !important;
    margin-top: 5px !important;
    gap: 5px !important;
  }

  #angroos-site main.aurelo-page .aurelo-hero picture img {
    height: 100% !important;
    min-height: 100% !important;
  }

  /* Use the homepage hero palette for both Aurelo actions. */
  #angroos-site main.aurelo-page .aurelo-hero .hero-actions .button:first-child,
  #angroos-site main.aurelo-page .aurelo-hero .hero-actions .button + .button {
    border-color: rgba(157,122,58,.25) !important;
    background: rgba(255,253,248,.76) !important;
    color: #655a49 !important;
  }
}

/* Final mobile typography contract for every storefront hero banner. */
@media (max-width: 800px) {
  body#angroos-site > .site-shell.site-shell.site-shell > main[class][class][class] :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1,
  body#angroos-site > .site-shell.site-shell.site-shell > main[class][class][class] :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1 :is(em,span),
  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1,
  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1 :is(em,span) {
    font-size: 20px !important;
  }

  body#angroos-site > .site-shell.site-shell.site-shell > main[class][class][class] :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1 + p,
  body#angroos-site > .site-shell.site-shell.site-shell > main[class][class][class] :is(section,header)[class*="hero"][class*="hero"][class*="hero"] [class*="copy" i] > p,
  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"][class*="hero"] h1 + p,
  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"][class*="hero"] [class*="copy" i] > p {
    font-size: 10px !important;
  }

  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"] :is(.hero-proof,.corporate-hero-proof) {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-flow: row nowrap !important;
    width: max-content !important;
    max-width: calc(100vw - 46px) !important;
    min-height: 20px !important;
    margin: 6px 0 0 !important;
    padding: 3px 7px 3px 4px !important;
    gap: 5px !important;
    overflow: hidden !important;
    border: 1px solid rgba(111,85,37,.16) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.32) !important;
    color: #6f6658 !important;
    font-size: 7px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: .03em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"] :is(.hero-proof,.corporate-hero-proof) > span {
    flex: 0 1 auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"] :is(.hero-proof,.corporate-hero-proof) .icon {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #e7d8b8 !important;
    color: #6e5222 !important;
    font-size: 7px !important;
  }
}

@media (max-width: 359px) {
  body#angroos-site#angroos-site main :is(section,header)[class*="hero"][class*="hero"]:has(:is(.hero-proof,.corporate-hero-proof)) {
    height: 184px !important;
    min-height: 184px !important;
    aspect-ratio: auto !important;
  }
}