@import url('./breakpoints.css');
@import url('./base.css');
/* DISABLED 2026-05-03: mobile-foundation + wave overrides were breaking
   component-level mobile rules (vertical text in similar-interests, single
   huge cards in editors-picks/daily-deals/special-illustrations). Files
   left on disk for reference. */
/* @import url('./mobile-foundation.css'); */
/* RE-ENABLED 2026-05-11 (Round 29): minimal safe distillation.
   mobile-essentials.css contains only a11y-critical rules (16px input
   baseline, WCAG tap targets via --tap-min, hover-touch guard, safe-area
   vars, reduced-motion). Does not touch component layout. */
@import url('./mobile-essentials.css');
@import url('./layout.css');
@import url('./components/buttons.css');
@import url('./components/chips.css');
@import url('./components/cards.css');
@import url('./components/listing-cards.css?v=20260704-mobile-polish1');
@import url('./components/skeleton.css');
@import url("./components/listing-filters.css?v=20260705-premium1");
@import url('./components/media-slots.css');
@import url('./components/header.css?v=20260724-catlock1');
@import url('./components/header-desktop-flex.css');
@import url('./components/profile-avatars.css?v=20260618-share-avatars1');
@import url('./components/hero.css?v=20260705-polish3');
@import url('./components/auth-home-hero.css?v=20260703-warm-hero1');
@import url('./components/auth-event-banner.css');
@import url('./components/explore-by-scenario.css');
@import url('./components/similar-interests.css');
@import url('./components/winter-best-products.css');
@import url('./components/christmas-special-gifts.css');
@import url('./components/special-illustrations.css');
@import url('./components/special-people-gifts.css');
@import url('./components/favorite-categories.css?v=20260704-mobile-polish1');
@import url('./components/editors-picks.css?v=20260704-mobile-polish1');
@import url('./components/daily-deals.css?v=20260719-deals-tiles1');
@import url('./components/special-gifts-rail.css');
@import url('./components/gifts-you-like.css?v=20260528-mobile-title');
@import url('./components/marketplace-info.css');
@import url('./components/search.css');
@import url('./components/search-page.css?v=20260719-shop-match3');
@import url('./components/search-pivots.css');
@import url('./components/personalized-group-rail.css');
@import url('./components/footer.css?v=20260719-footer-fix2');
@import url('./components/promo.css');
@import url('./components/pagination.css?v=1779250002');
@import url('./components/breadcrumbs.css');
@import url('./components/category-page.css?v=20260629-mobile-filter-jitter-fix1');
@import url('./components/categories-directory.css?v=20260627-categories-directory1');
@import url('./components/category-shop-by-interest.css');
@import url('./components/recently-viewed.css');
@import url('./components/overlays.css?v=20260723-popup1');
@import url('./components/product-action-pills.css?v=20260604-saved-label1');
@import url('./components/assistant-platform.css');
@import url('./components/assistant-search.css');
@import url('./components/favorites.css?v=20260603-favorites-wide1');
@import url('./components/support.css?v=20260527-touch');
@import url('./components/gift-room.css?v=20260723-popup1');
@import url('./components/featured-hub.css?v=20260701-room-gifthub-document-header1');
@import url('./components/shell-page.css?v=20260605-technical-content1');
@import url('./components/site-chrome-minimal.css?v=20260527-touch');
@import url('./components/header-search-icons.css?v=20260527-searchclip');
@import url('./components/index-page.css?v=20260703-warm-hero1');
@import url('./components/mobile-product-cards.css?v=20260705-cards-solid1');
@import url('./components/mobile-card-polish.css?v=20260605-badge-locale1');
@import url('./components/history.css?v=20260604-history-modal5');

/* DISABLED 2026-05-03: all 5 mobile-wave overrides broke component-level
   mobile rules. The files remain on disk — they can be re-enabled selectively
   if something from them is actually needed. */
/* @import url('./mobile-wave1-overrides.css'); */
/* @import url('./mobile-wave2-overrides.css'); */
/* @import url('./mobile-wave3-overrides.css'); */
/* @import url('./mobile-wave4-overrides.css'); */
/* @import url('./mobile-wave5-premium.css'); */

/* ==========================================================================
   Homepage skeleton — shown while body has `.is-homepage-preparing`.
   Mirrors the rough visual structure of the real homepage so the user
   sees a sensible placeholder instead of an empty page during load.
   Built on top of the `jp-skeleton` shimmer primitive in skeleton.css.
   Pattern matches category-page skeleton (single-source-of-truth shimmer).
   ========================================================================== */
.homepage-skeleton {
  background: #f8f1eb;
  padding: 24px 0 48px;
}

.homepage-skeleton__section {
  width: var(--homepage-shell-width);
  max-width: var(--jp-page-shell-max, 1372px);
  margin-inline: auto;
  padding-inline: var(--homepage-shell-inset);
  box-sizing: border-box;
}

.homepage-skeleton__section + .homepage-skeleton__section {
  margin-top: 48px;
}

.homepage-skeleton__hero-card {
  width: 100%;
  height: 410px;
  border-radius: 30px;
}

.homepage-skeleton__rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.homepage-skeleton__rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.homepage-skeleton__rail-title {
  width: 280px;
  height: 26px;
}

.homepage-skeleton__rail-title--short {
  width: 200px;
}

.homepage-skeleton__rail-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.homepage-skeleton__rail-arrow {
  width: 56px;
  height: 46px;
  border-radius: 999px;
}

.homepage-skeleton__rail-track {
  display: flex;
  align-items: stretch;
  gap: 17.5px;
  overflow: hidden;
}

.homepage-skeleton__rail-card {
  width: 258px;
  min-width: 258px;
  height: 339px;
  border-radius: 20px;
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .homepage-skeleton__rail-card {
    width: 228px;
    min-width: 228px;
    height: 309px;
  }
}

@media (max-width: 720px) {
  .homepage-skeleton {
    padding-block: 16px 32px;
  }
  .homepage-skeleton__section + .homepage-skeleton__section {
    margin-top: 32px;
  }
  .homepage-skeleton__hero-card {
    height: 420px;
    border-radius: 24px;
  }
  .homepage-skeleton__rail-title {
    width: 220px;
    height: 22px;
  }
  .homepage-skeleton__rail-card {
    width: 220px;
    min-width: 220px;
    height: 301px;
    border-radius: 24px;
  }
}

html:has(body.page--homepage),
body.page--homepage {
  scrollbar-gutter: stable both-edges;
}

@media (min-width: 721px) {
  body.page--homepage .fixed-header .header-desktop-shell {
    width: var(--homepage-shell-width) !important;
    max-width: var(--jp-page-shell-max, 1372px) !important;
    padding-inline: var(--homepage-shell-inset) !important;
  }
}

@media (max-width: 720px) {
  body.page--homepage .fixed-header .header-mobile-top {
    left: 16px;
    width: calc(100% - 32px);
  }

  body.page--homepage .fixed-header .header-mobile-bottom-bar {
    left: 0;
    right: 0;
  }
}

.page--homepage {
  --homepage-shell-width: var(--jp-page-shell-width);
  --homepage-shell-inset: var(--jp-page-shell-inset);
  --homepage-rail-fade-width: 52px;
  --homepage-rail-fade-overhang: calc(var(--homepage-rail-fade-width) / 2);
  --homepage-rail-arrow-overhang: 27px;
  /* Was 96px — left over from when prev/next arrows lived on the
     right side overlapping the cards. After rail-pill-pager moved
     the arrows into the header, this reserve simply shifts the
     last card 96px short of the right grid edge, leaving a visible
     empty gap when the carousel is scrolled to the end. */
  --homepage-rail-overlay-reserve: 0px;
  --page-bg: #f8f1eb;
  --homepage-hero-gap-desktop: 0px;
  --homepage-hero-gap-mobile: 0px;
  /* Desktop homepage rhythm: keep containers about 60px apart from one
     rule, including authenticated-only rails and special promo sections. */
  --homepage-container-gap-desktop: 60px;
  --homepage-section-gap-desktop: var(--homepage-container-gap-desktop);
  --homepage-section-gap-mobile: 33px;
  /* Auth-only sections already include their own header padding; a 32px
     section margin produces the intended ~60px visible gap between cards
     and the next section title on desktop. */
  --homepage-auth-stack-gap-desktop: 32px;
  --homepage-auth-stack-offset-desktop: 0px;
  --homepage-card-hover-shadow: var(--shadow-card-hover);
  background: #f8f1eb;
  overflow-x: clip;
}

.page--homepage .page-main {
  overflow-x: clip;
}

.page--homepage > .hero-home.section--tight {
  padding-top: var(--homepage-hero-gap-desktop);
  padding-bottom: calc(var(--homepage-section-gap-desktop) / 2);
}

.page--homepage .hero-home {
  padding-top: 0;
}

.page--homepage > .section.section--tight:not(.hero-home):not(.auth-home-hero) {
  padding-top: calc(var(--homepage-section-gap-desktop) / 2);
  padding-bottom: calc(var(--homepage-section-gap-desktop) / 2);
}

.page--homepage .page-main > .section.section--tight:not(.hero-home):not(.auth-home-hero) {
  padding-top: calc(var(--homepage-section-gap-desktop) / 2);
  padding-bottom: calc(var(--homepage-section-gap-desktop) / 2);
}

.page--homepage > .daily-deals.section--tight,
.page--homepage > .marketplace-info.section--tight {
  margin-top: calc(var(--homepage-section-gap-desktop) / 2);
}

body.page--homepage.is-homepage-authenticated > section:not([data-recently-viewed-auth-only]) {
  display: none !important;
}

/* index.html wraps sections in <main class="page-main">, so the rule above
   (which targets direct body children) doesn't reach them. Hide guest-only
   sections explicitly when authenticated, regardless of nesting depth. */
body.is-homepage-authenticated [data-recently-viewed-guest-only] {
  display: none !important;
}

/* SYMMETRIC RULE — hide auth-only sections for guests.
   Without this, sections like Hero compact, Auth event banner,
   Recently viewed rail, Personalized rails all leak into the
   guest view. Mirrors the rule above for guest-only. */
body.page--homepage:not(.is-homepage-authenticated) [data-recently-viewed-auth-only] {
  display: none !important;
}

body:not(.page--homepage) > .site-footer > .site-footer__newsletter {
  display: none !important;
}

body.page--homepage.is-homepage-authenticated > .site-footer > .site-footer__newsletter {
  display: none !important;
}

body.page--homepage.is-homepage-authenticated > [data-recently-viewed-auth-only] + [data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

body.page--homepage.is-homepage-authenticated .page-main > [data-recently-viewed-auth-only] + [data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

body.page--homepage.is-homepage-authenticated > [data-recently-viewed-auth-only].is-first-auth-section {
  margin-top: var(--homepage-auth-stack-offset-desktop);
}

body.page--homepage.is-homepage-authenticated .page-main > [data-recently-viewed-auth-only].is-first-auth-section {
  margin-top: var(--homepage-auth-stack-offset-desktop);
}

body.page--homepage.is-homepage-authenticated > .daily-deals[data-recently-viewed-auth-only] + .special-gifts-rail[data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

body.page--homepage.is-homepage-authenticated .page-main > .daily-deals[data-recently-viewed-auth-only] + .special-gifts-rail[data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

body.page--homepage.is-homepage-authenticated > .recently-viewed-rail[data-personalized-offers-theme-id="fantasy-character-art"][data-recently-viewed-auth-only] + .daily-deals[data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

body.page--homepage.is-homepage-authenticated .page-main > .recently-viewed-rail[data-personalized-offers-theme-id="fantasy-character-art"][data-recently-viewed-auth-only] + .daily-deals[data-recently-viewed-auth-only] {
  margin-top: var(--homepage-auth-stack-gap-desktop);
}

@media (max-width: 1142px) {
  .page--homepage {
    --homepage-shell-width: var(--jp-page-shell-width);
    --homepage-shell-inset: var(--jp-page-shell-inset);
  }
}

/* Aligned with the rest of the codebase's 760px mobile convention.
   Previously used 767px which left a 47px dead-zone where component
   media queries (720/760) and shell width (767) disagreed and caused
   misalignment between hero, sections and footer. */
@media (max-width: 760px) {
  .page--homepage {
    --homepage-shell-width: var(--jp-page-shell-width);
    --homepage-shell-inset: var(--jp-page-shell-inset);
    --homepage-section-gap-mobile: 33px;
  }

  body.page--homepage.is-homepage-authenticated > [data-recently-viewed-auth-only] + [data-recently-viewed-auth-only] {
    margin-top: 0;
  }

  body.page--homepage.is-homepage-authenticated .page-main > [data-recently-viewed-auth-only] + [data-recently-viewed-auth-only] {
    margin-top: 0;
  }

  body.page--homepage.is-homepage-authenticated > [data-recently-viewed-auth-only].is-first-auth-section {
    margin-top: 0;
  }

  body.page--homepage.is-homepage-authenticated .page-main > [data-recently-viewed-auth-only].is-first-auth-section {
    margin-top: 0;
  }

  body.page--homepage.is-homepage-authenticated > .daily-deals[data-recently-viewed-auth-only] + .special-gifts-rail[data-recently-viewed-auth-only] {
    margin-top: 8px;
  }

  body.page--homepage.is-homepage-authenticated .page-main > .daily-deals[data-recently-viewed-auth-only] + .special-gifts-rail[data-recently-viewed-auth-only] {
    margin-top: 8px;
  }

  body.page--homepage.is-homepage-authenticated > .recently-viewed-rail[data-personalized-offers-theme-id="fantasy-character-art"][data-recently-viewed-auth-only] + .daily-deals[data-recently-viewed-auth-only] {
    margin-top: 15px;
  }

  body.page--homepage.is-homepage-authenticated .page-main > .recently-viewed-rail[data-personalized-offers-theme-id="fantasy-character-art"][data-recently-viewed-auth-only] + .daily-deals[data-recently-viewed-auth-only] {
    margin-top: 15px;
  }

  .page--homepage > .hero-home.section--tight {
    padding-top: var(--homepage-hero-gap-mobile) !important;
    padding-bottom: calc(var(--homepage-section-gap-mobile) / 2);
  }

  .page--homepage > .section.section--tight:not(.hero-home):not(.auth-home-hero) {
    padding-top: calc(var(--homepage-section-gap-mobile) / 2);
    padding-bottom: calc(var(--homepage-section-gap-mobile) / 2);
  }

  .page--homepage .page-main > .section.section--tight:not(.hero-home):not(.auth-home-hero) {
    padding-top: calc(var(--homepage-section-gap-mobile) / 2);
    padding-bottom: calc(var(--homepage-section-gap-mobile) / 2);
  }

  .page--homepage > .daily-deals.section--tight,
  .page--homepage > .marketplace-info.section--tight {
    margin-top: calc(var(--homepage-section-gap-mobile) / 2);
  }

  body.page--homepage .recently-viewed-rail__title,
  body.page--homepage .personalized-group-rail__title,
  body.page--homepage .daily-deals__title,
  body.page--homepage .special-gifts-rail__title,
  body.page--homepage .explore-scenarios__title,
  body.page--homepage .similar-interests__title,
  body.page--homepage .winter-best-products__title,
  body.page--homepage .christmas-special-gifts__title,
  body.page--homepage .special-people-gifts__title,
  body.page--homepage .favorite-categories__title,
  body.page--homepage .editors-picks__title,
  body.page--homepage .special-illustrations__title,
  body.page--homepage .gifts-you-like__title,
  body.page--homepage .marketplace-info__title,
  body.page--homepage .shop-by-interest__title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0;
  }

}

/* JEDI_DISPLAY_HEADING_LOCK
   Loaded last in the cascade. Forces every <h1>/<h2> to Fraunces
   regardless of any component-level font-family override. */
h1, h2,
h1[class], h2[class],
h1[id], h2[id] {
  font-family: var(--font-display) !important;
}

/* JEDI_DISPLAY_BUTTON_LOCK
   Force Fraunces on every button across the site —
   <button> elements, role=button, and every BEM-style button class. */
button,
[role="button"],
.btn,
[class*="-btn"],
[class*="__btn"],
[class*="-button"],
[class*="__button"] {
  font-family: var(--font-display) !important;
}

/* JEDI_BUTTON_DESCENDANT_LOCK
   Inner spans/labels inside buttons often re-declare font-family on themselves
   (e.g. .cat-filters__main-label sets var(--font-heading)). Force every
   descendant of a button to inherit Fraunces too. */
button *,
[role="button"] *,
.btn *,
[class*="-btn"] *,
[class*="__btn"] *,
[class*="-button"] *,
[class*="__button"] * {
  font-family: var(--font-display) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   iOS Safari zooms the viewport when an input/textarea with font-size
   < 16px receives focus. That re-flows the layout and forces a manual
   zoom-out. Targets local inputs plus any future input that ships <16px.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input:not([type]),
  textarea {
    font-size: max(16px, 1em);
  }
}

@media (max-width: 720px) {
  .site-footer__locale-modal-title,
  .header-auth-title,
  .cat-filters-drawer__title,
  .reviews-modal__heading,
  .collection-modal__title,
  .gift-room-modal__title,
  .gift-room-submodal__title.collection-modal__title,
  .workspace-avatar-dialog__head h2 {
    font-size: var(--popup-title-size, 25px) !important;
    line-height: var(--popup-title-line-height, 1.16) !important;
  }

  .smart-gift-room-prompt__title.header-auth-title {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 420px) {
  .smart-gift-room-prompt__title.header-auth-title {
    font-size: 15px !important;
    line-height: 1.08 !important;
  }
}

/* JEDI_POPUP_CONTROL_CONTRACT
   Loaded after every buyer-surface component import. Keeps desktop close
   pills and mobile sheet grips identical across auth, filters, footer,
   listing, saved-board, Gift Room, and header sheets. */
.header-auth-close,
.site-footer__locale-modal-close,
.cat-filters-drawer__close,
.collection-modal__close,
.reviews-modal__close.header-auth-close,
.gift-room-plan-step-modal__close.header-auth-close,
.gr-cal-modal__close.header-auth-close,
.gr-organize-modal__close.header-auth-close,
.gift-room-share-modal__close.collection-modal__close,
.workspace-avatar-dialog__close {
  width: var(--popup-close-width, 78px);
  height: var(--popup-close-height, 55px);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--popup-bg);
  box-shadow: var(--popup-shadow-soft);
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.24s ease, filter 0.24s ease;
  will-change: transform;
}

.header-auth-close:hover,
.header-auth-close:focus-visible,
.site-footer__locale-modal-close:hover,
.site-footer__locale-modal-close:focus-visible,
.cat-filters-drawer__close:hover,
.cat-filters-drawer__close:focus-visible,
.collection-modal__close:hover,
.collection-modal__close:focus-visible,
.reviews-modal__close.header-auth-close:hover,
.reviews-modal__close.header-auth-close:focus-visible,
.gift-room-plan-step-modal__close.header-auth-close:hover,
.gift-room-plan-step-modal__close.header-auth-close:focus-visible,
.gr-cal-modal__close.header-auth-close:hover,
.gr-cal-modal__close.header-auth-close:focus-visible,
.gr-organize-modal__close.header-auth-close:hover,
.gr-organize-modal__close.header-auth-close:focus-visible,
.gift-room-share-modal__close.collection-modal__close:hover,
.gift-room-share-modal__close.collection-modal__close:focus-visible,
.workspace-avatar-dialog__close:hover,
.workspace-avatar-dialog__close:focus-visible {
  background-color: var(--popup-close-hover-bg, var(--sort-control-bg, rgb(225 209 188)));
  animation: header-auth-close-bounce 0.28s cubic-bezier(0.23, 1.3, 0.32, 1) both;
  filter: var(--popup-close-hover-filter, drop-shadow(0 4px 10px rgba(35, 32, 48, 0.12)));
}

.header-auth-close:active,
.site-footer__locale-modal-close:active,
.cat-filters-drawer__close:active,
.collection-modal__close:active,
.reviews-modal__close.header-auth-close:active,
.gift-room-plan-step-modal__close.header-auth-close:active,
.gr-cal-modal__close.header-auth-close:active,
.gr-organize-modal__close.header-auth-close:active,
.gift-room-share-modal__close.collection-modal__close:active,
.workspace-avatar-dialog__close:active {
  transform: none;
}

.header-auth-close:focus-visible,
.site-footer__locale-modal-close:focus-visible,
.cat-filters-drawer__close:focus-visible,
.collection-modal__close:focus-visible,
.reviews-modal__close.header-auth-close:focus-visible,
.gift-room-plan-step-modal__close.header-auth-close:focus-visible,
.gr-cal-modal__close.header-auth-close:focus-visible,
.gr-organize-modal__close.header-auth-close:focus-visible,
.gift-room-share-modal__close.collection-modal__close:focus-visible,
.workspace-avatar-dialog__close:focus-visible {
  outline: 2px solid var(--popup-focus);
  outline-offset: 2px;
}

.header-auth-close-icon,
.site-footer__locale-modal-close-icon,
.cat-filters-drawer__close-icon,
.collection-modal__close-icon,
.reviews-modal__close .header-auth-close-icon,
.gift-room-plan-step-modal__close .header-auth-close-icon,
.gr-cal-modal__close .header-auth-close-icon,
.gr-organize-modal__close .header-auth-close-icon,
.workspace-avatar-dialog__close .header-auth-close-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--popup-close-icon-size, 17px);
  height: var(--popup-close-icon-size, 17px);
  display: block;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.collection-modal__close svg,
.gift-room-modal__close svg {
  width: var(--popup-close-icon-size, 17px);
  height: var(--popup-close-icon-size, 17px);
}

.collection-modal__sheet-grip,
.collection-invite-modal__sheet-grip,
.card-board-menu__sheet-grip,
.site-footer__locale-sheet-grip,
.cat-filters-drawer__sheet-grip,
.seller-contact__sheet-grip,
.gift-room-share-modal__sheet-grip,
.gift-room-social-modal__sheet-grip,
.gift-room-card-menu__sheet-grip,
.gr-lobby-filter-menu__sheet-grip,
.gr-organize-modal__sheet-grip,
.gr-cal-modal__sheet-grip,
.gift-room-settings-modal__sheet-grip,
.gift-room-modal__sheet-grip,
.gift-room-plan-step-modal__sheet-grip,
.fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-sheet-grip,
.fixed-header .header-account-panel.is-mobile-sheet .header-account-sheet-grip {
  flex-basis: var(--popup-sheet-grip-height, 44px);
  min-height: var(--popup-sheet-grip-height, 44px);
  align-items: center;
  justify-content: center;
  background: var(--popup-bg);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.collection-modal__sheet-grip span,
.collection-invite-modal__sheet-grip span,
.card-board-menu__sheet-grip span,
.site-footer__locale-sheet-grip span,
.cat-filters-drawer__sheet-grip span,
.seller-contact__sheet-grip span,
.gift-room-share-modal__sheet-grip span,
.gift-room-social-modal__sheet-grip span,
.gift-room-card-menu__sheet-grip span,
.gr-lobby-filter-menu__sheet-grip span,
.gr-organize-modal__sheet-grip span,
.gr-cal-modal__sheet-grip span,
.gift-room-settings-modal__sheet-grip span,
.gift-room-modal__sheet-grip span,
.gift-room-plan-step-modal__sheet-grip span,
.fixed-header .header-notifications-panel.is-mobile-sheet .header-notifications-sheet-grip span,
.fixed-header .header-account-panel.is-mobile-sheet .header-account-sheet-grip span {
  width: var(--popup-sheet-grip-width, 48px);
  height: var(--popup-sheet-grip-thickness, 5px);
  border-radius: var(--radius-pill, 999px);
  background: var(--popup-sheet-grip-color);
  display: block;
}

/* Header-sheet floating X pills exist only in the mobile sheet state —
   css/hotfix.css shows and positions them there.
   Categories sheet has NO close button (frozen design 2026-07-24). */
.header-categories-sheet-close,
.header-notifications-sheet-close,
.header-account-sheet-close {
  display: none;
}

/* Filter-popover floating X pill (injected by header-shell.js) is a
   mobile-sheet-only control. */
.jp-popover-floating-close {
  display: none;
}

.fixed-header .header-account-panel.is-open.is-mobile-sheet {
  position: fixed;
  inset: auto 10px calc(var(--mobile-bottom-nav-height, 72px) + 8px) 10px;
  z-index: 10040;
  display: block;
  width: auto;
  max-width: none;
  max-height: min(74dvh, 560px);
  /* Not hidden: the floating X pill hangs above the sheet's top edge
     (JEDI_SHEET_FLOATING_CLOSE canon); the panel-inner scrolls itself. */
  overflow: visible;
  border-radius: 24px;
  background: var(--popup-bg);
  box-shadow: var(--shadow-popover);
  transform: translateY(var(--header-account-sheet-drag-y, 0));
}

.fixed-header .header-account-panel.is-open.is-mobile-sheet .header-account-panel-inner {
  display: grid;
  gap: 0;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.fixed-header .header-account-panel.is-open.is-mobile-sheet .header-account-profile,
.fixed-header .header-account-panel.is-open.is-mobile-sheet .header-account-item {
  min-height: 58px;
}

.fixed-header .header-account-panel .header-account-avatar {
  flex: 0 0 auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header-auth-overlay {
  --popup-control-border: var(--popup-border-strong);
  --popup-focus: var(--color-forest);
}

/* Freeze the page behind the sign-in overlay. The matching scrollbar-width
   padding-right compensation is applied in JS (lockAuthOverlayScroll), so there
   is no layout jump. Without this the page scrolled behind the modal. Steven 2026-07-04. */
body.auth-modal-open {
  overflow: hidden;
}

.header-auth-overlay .header-auth-input-wrap {
  border-color: var(--popup-border-strong);
}

/* Only the plain (rounded) wrap gets the focus ring. The password field's
   wrap has .has-eye and is a square (border-radius:0) grid container, so a
   box-shadow ring on it renders as an ugly rectangle behind the pill. Its
   ring lives on the rounded .header-auth-input instead (see .has-eye rules
   below). Excluding .has-eye here keeps styles.css's intent and kills the
   rectangular green contour. Steven 2026-07-20. */
.header-auth-overlay .header-auth-input-wrap:not(.has-eye):focus-within,
.header-auth-overlay .header-auth-input-wrap:not(.has-eye).is-filled {
  border-color: var(--popup-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent);
}

.header-auth-overlay .header-auth-input-wrap.has-eye .header-auth-input {
  border-color: var(--popup-border-strong) !important;
}

.header-auth-overlay .header-auth-input-wrap.has-eye:focus-within .header-auth-input,
.header-auth-overlay .header-auth-input-wrap.has-eye.is-filled .header-auth-input {
  border-color: var(--popup-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--popup-focus) 14%, transparent) !important;
}

@media (max-width: 760px) {
  .header-auth-close {
    top: 8px;
    left: auto;
    right: 14px;
    bottom: auto;
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: none;
    filter: none;
    z-index: 4;
  }

  .header-auth-close:hover,
  .header-auth-close:focus-visible {
    background: var(--popup-hover);
    filter: none;
  }

  .header-auth-card::before,
  .smart-gift-room-prompt.header-auth-card::before,
  .cat-filters__chip-popover::before,
  .cat-filters__sort-popover::before,
  .reviews-modal__panel::before {
    min-height: var(--popup-sheet-grip-height, 44px);
    border-radius: var(--popup-sheet-radius);
    background: var(--popup-sheet-grip-pseudo-bg);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  /* JEDI_SHEET_FLOATING_CLOSE — canonical X pill ABOVE every bottom sheet.
     The pill floats on the backdrop, horizontally centred, 10px above the
     sheet's top edge (same canon as the desktop pill that floats beside the
     card). Each close button is positioned against its sheet/shell container;
     `left` uses calc, not translateX, because the hover bounce animation
     would overwrite a transform. Steven 2026-07-23. */
  .site-footer__locale-modal-close,
  .cat-filters-drawer__close,
  .collection-modal__close,
  .reviews-modal__close.header-auth-close,
  .gift-room-plan-step-modal__close.header-auth-close,
  .gr-cal-modal__close.header-auth-close,
  .gr-organize-modal__close.header-auth-close,
  .gift-room-share-modal__close.collection-modal__close,
  .gift-room-modal__close,
  .gift-room-invite-modal__close.header-auth-close,
  .gift-room-profile-bio-modal__close.header-auth-close,
  .gift-room-rsvp-modal__close.header-auth-close,
  .gift-room-planner-sheet__close.header-auth-close,
  .collection-invite-modal__close,
  .workspace-avatar-dialog__close,
  .card-board-menu__close,
  .listing-mbuy-sheet__close,
  .jp-gad-sheet-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: auto;
    bottom: calc(100% + var(--popup-close-offset, 10px));
    left: calc(50% - (var(--popup-sheet-close-width, 57px) / 2));
    right: auto;
    width: var(--popup-sheet-close-width, 57px);
    height: var(--popup-sheet-close-height, 42px);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--popup-bg);
    box-shadow: var(--popup-shadow-soft);
    cursor: pointer;
    z-index: 6;
  }

  /* Filter chip/sort popovers render as sheets on mobile: keep them above the
     locked mobile bottom bar (z-index 12000) so the sheet covers it. */
  .cat-filters__applied-popover,
  .cat-filters__chip-popover,
  .cat-filters__sort-popover {
    z-index: 12500;
  }

  .cat-filters__applied-backdrop,
  .cat-filters__sort-backdrop {
    z-index: 12490;
  }

  /* Their floating X pill (injected by header-shell.js): the sheets must not
     clip it, so the options list takes over scrolling. */
  .cat-filters__applied-popover,
  .cat-filters__chip-popover,
  .cat-filters__sort-popover {
    overflow: visible;
  }

  .cat-filters__chip-popover-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .jp-popover-floating-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: calc(100% + var(--popup-close-offset, 10px));
    top: auto;
    left: calc(50% - (var(--popup-sheet-close-width, 78px) / 2));
    right: auto;
    width: var(--popup-sheet-close-width, 78px);
    height: var(--popup-sheet-close-height, 55px);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--popup-bg);
    box-shadow: var(--popup-shadow-soft);
    cursor: pointer;
    z-index: 6;
  }

  .jp-popover-floating-close img {
    display: block;
    pointer-events: none;
  }
}