@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=20260703-store-capsule2');
@import url('./components/skeleton.css');
@import url("./components/listing-filters.css?v=20260629-mobile-filter-jitter-fix1");
@import url('./components/media-slots.css');
@import url('./components/header.css?v=20260528-mobile-dock');
@import url('./components/header-desktop-flex.css');
@import url('./components/profile-avatars.css?v=20260618-share-avatars1');
@import url('./components/hero.css');
@import url('./components/auth-home-hero.css');
@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');
@import url('./components/editors-picks.css');
@import url('./components/daily-deals.css');
@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=20260627-jedi-picks-badge1');
@import url('./components/search-pivots.css');
@import url('./components/personalized-group-rail.css');
@import url('./components/footer.css?v=20260626-journal-labels1');
@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=20260603-hover-tune2');
@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=20260703-hints1');
@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=1779250003');
@import url('./components/mobile-product-cards.css?v=20260605-store-gap2');
@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: 280px;
    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-categories-panel.is-mobile-sheet .header-categories-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-categories-panel.is-mobile-sheet .header-categories-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;
}

.fixed-header .header-categories-panel.is-mobile-sheet .header-categories-sheet-grip {
  background: inherit;
}

.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);
  overflow: hidden;
  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;
}

.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);
}

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

.header-auth-overlay .header-auth-input-wrap:focus-within,
.header-auth-overlay .header-auth-input-wrap.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) {
  .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,
  .workspace-avatar-dialog__close {
    display: none !important;
  }

  .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;
  }
}