/* Final responsive layer. Loaded after page-specific stylesheets. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.site-header,
.counter-header,
.memories-header,
main,
.shell,
.home-shell,
.save-shell-modern,
.memories-shell,
.events-shell,
.gift-shell,
.milestone-shell,
.settings-shell {
  max-width: 100%;
}

.counter-header,
.memories-header {
  min-width: 0;
}

.counter-nav,
.memories-nav,
.main-nav,
.site-nav {
  min-width: 0;
}

.events-layout,
.gift-layout,
.events-layout > *,
.gift-layout > *,
.events-toolbar,
.gift-controls,
.event-sidebar,
.gift-sidebar,
.gift-checklist-card,
.milestone-list-card {
  min-width: 0;
  max-width: 100%;
}

.gift-checklist-card {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

body.save-page main.save-shell-modern {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: clip;
}

body.save-page .save-page-modern {
  margin-inline: auto !important;
  transform: none !important;
}

@media (max-width: 1100px) {
  .events-layout,
  .gift-layout,
  .memories-layout,
  .milestone-layout,
  .milestone-dashboard,
  .settings-grid,
  .settings-layout,
  .settings-main-grid,
  .share-grid,
  .public-counter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .event-sidebar,
  .gift-sidebar,
  .memory-sidebar,
  .milestone-sidebar,
  .settings-sidebar {
    width: 100%;
    max-width: none;
  }

  body.save-page .save-page-modern {
    width: min(100% - 2rem, 62rem);
  }
}

@media (max-width: 620px) {
  .counter-header,
  .memories-header {
    width: min(100% - 1rem, 94rem);
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .counter-nav,
  .memories-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 0.35rem;
    width: 100%;
    overflow: visible !important;
    padding: 0;
  }

  .counter-nav a,
  .memories-nav a {
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.3rem;
    font-size: clamp(0.72rem, 3.2vw, 0.86rem);
    text-align: center;
    white-space: normal;
  }

  .events-layout,
  .gift-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .events-toolbar,
  .gift-controls,
  .event-sidebar,
  .gift-sidebar,
  .add-event-card,
  .add-gift-card {
    width: 100%;
  }

  .events-toolbar .event-filters,
  .gift-controls .gift-toolbar,
  .milestone-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .event-filters button,
  .gift-toolbar button,
  .milestone-toolbar button {
    min-height: 2.625rem;
  }

  .event-sort,
  .gift-sort,
  .event-sort select,
  .gift-sort select {
    width: 100%;
    min-width: 0;
  }

  .gift-checklist-card {
    width: 100%;
  }

  .gift-table {
    max-width: none;
  }

  .site-footer a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  body.counter-page .locked-card h1,
  body.counter-page .locked-state-card h1,
  .memory-locked-card h1,
  .event-locked-card h1,
  .gift-locked-card h1,
  .milestone-locked-card h1 {
    font-size: clamp(2.4rem, 13vw, 4rem) !important;
    line-height: 0.96;
  }

  body.counter-page .counter-hero-card,
  body.counter-page .counter-summary-grid,
  body.counter-page .dashboard-grid,
  .memories-top,
  .events-top-card,
  .gift-page-hero,
  .milestone-page-hero,
  .settings-card {
    width: 100%;
    max-width: 100%;
  }

  body.save-page main.save-shell-modern {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    left: auto;
    transform: none;
  }

  body.save-page .save-page-modern {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  body.save-page .save-email-panel h2 {
    font-size: clamp(2.8rem, 15vw, 4.2rem) !important;
    line-height: 0.95 !important;
  }

  body.save-page .save-email-panel > p {
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
  }

  body.save-page .save-mobile-chip {
    left: 1rem !important;
    right: auto !important;
    max-width: calc(100vw - 2rem);
  }
}

@media (max-width: 430px) {
  body.flow-page.php-flow-page .flow-steps,
  .flow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    overflow: visible;
    padding-bottom: 0;
  }

  body.flow-page.php-flow-page .step-item,
  .step-item {
    min-width: 0;
    padding: 0.75rem 0.3rem;
  }

  body.flow-page.php-flow-page .step-item > span:last-child,
  .step-item > span:last-child {
    min-width: 0;
  }

  body.flow-page.php-flow-page .step-item strong,
  .step-item strong {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
  }

  body.flow-page.php-flow-page .step-item small,
  .step-item small {
    font-size: 0.68rem;
  }

  body.flow-page.php-flow-page .step-dot,
  .step-dot {
    width: 2.25rem;
    height: 2.25rem;
  }

  .site-header,
  .counter-header,
  .memories-header {
    padding-inline: 1rem !important;
  }

  .main-nav,
  .site-nav {
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .nav-cta,
  .nav-button,
  .main-nav a,
  .site-nav a {
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    font-size: 0.9rem;
  }

  .counter-nav a,
  .memories-nav a {
    min-height: 2.5rem;
    font-size: 0.74rem;
    border-radius: 0.9rem;
  }

  body.counter-page .counter-hero-card h1,
  body.counter-page .counter-names,
  body.public-counter-page .shared-names {
    font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
    overflow-wrap: anywhere;
  }

  body.counter-page .counter-days,
  body.public-counter-page .shared-days strong {
    font-size: clamp(4rem, 23vw, 6.5rem) !important;
  }

  .memories-toolbar,
  .events-toolbar,
  .gift-controls,
  .milestone-toolbar {
    overflow-x: visible;
  }

  .memory-filters,
  .event-filters,
  .gift-toolbar,
  .milestone-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .memory-filters button,
  .event-filters button,
  .gift-toolbar button,
  .milestone-filters button {
    flex: 1 1 auto;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

/* Keep the shared header and expanded footer calm on narrow screens. */
@media (max-width: 620px) {
  .site-header {
    align-items: center !important;
    gap: 0.55rem !important;
    flex-wrap: nowrap !important;
    min-height: auto !important;
    padding: 0.72rem 0.9rem !important;
  }

  .site-header .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header .brand img {
    width: clamp(7rem, 30vw, 9.25rem) !important;
  }

  .site-header .main-nav {
    flex: 0 1 auto;
    margin-left: auto;
    width: auto !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    font-size: 0.86rem !important;
  }

  .site-header .main-nav a[href="#how-it-works"] {
    display: none !important;
  }

  .site-header .main-nav a:not(.nav-cta),
  .site-header .nav-button {
    min-height: 2.15rem !important;
    padding: 0.35rem 0.2rem !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
  }

  .site-header .main-nav .nav-cta {
    min-height: 2.9rem !important;
    padding: 0.75rem 0.86rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  .home-footer {
    gap: 0.4rem 0.85rem;
    padding-inline: 1rem;
    text-align: center;
  }

  .home-footer span {
    display: none;
  }

  .home-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 390px) {
  .site-header .brand img {
    width: 6.45rem !important;
  }

  .site-header .main-nav {
    width: auto !important;
    justify-content: flex-end !important;
    gap: 0.34rem !important;
  }

  .site-header .main-nav a:not(.nav-cta),
  .site-header .nav-button {
    padding-inline: 0.08rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }

  .site-header .main-nav .nav-cta {
    margin-left: 0;
    min-height: 2.55rem !important;
    padding-inline: 0.68rem !important;
    font-size: 0.78rem !important;
  }
}